From 33686ec5c2bef70a74467afea47d7841f40b1c48 Mon Sep 17 00:00:00 2001
From: disty <distty@gmail.com>
Date: Mon, 2 Dec 2024 09:19:26 +0200
Subject: [PATCH] add inpaint with live preview

---
 README.md                                     |    5 +-
 __init__.py                                   |    5 +-
 pyproject.toml                                |    2 +-
 web/core/content.html                         |   65 +-
 web/core/css/main.css                         | 2209 +++++++++--------
 .../js/common/components/CanvasComponent.js   |  220 +-
 .../js/common/components/DataComponent.js     |   48 +
 web/core/js/common/components/DimSelector.js  |    2 +-
 web/core/js/common/components/Seeder.js       |    8 +-
 .../components/canvas/CanvasControlsPlugin.js |  132 +-
 .../common/components/canvas/CanvasLoader.js  |  367 ++-
 .../components/canvas/CustomBrushPlugin.js    |   60 +-
 .../components/canvas/ImageLoaderPlugin.js    |   40 +-
 .../components/canvas/MaskBrushPlugin.js      |  964 +++----
 .../components/canvas/MaskExportUtilities.js  | 1006 ++++++++
 .../js/common/components/imageLoaderComp.js   |    7 +
 .../js/common/components/messageHandler.js    |  369 ++-
 web/core/js/common/scripts/componentTypes.js  |   22 +
 web/core/js/common/scripts/interactiveUI.js   |  497 ++++
 .../js/common/scripts/stateManagerMain.js     |  119 +
 web/core/main.js                              |   67 +-
 web/flow/js/main.js                           |    9 +-
 22 files changed, 4324 insertions(+), 1899 deletions(-)
 create mode 100644 web/core/js/common/components/DataComponent.js
 create mode 100644 web/core/js/common/components/canvas/MaskExportUtilities.js
 create mode 100644 web/core/js/common/scripts/interactiveUI.js
 create mode 100644 web/core/js/common/scripts/stateManagerMain.js

diff --git a/README.md b/README.md
index 0685877..978a72a 100644
--- a/README.md
+++ b/README.md
@@ -107,7 +107,10 @@ http://127.0.0.1:8188/flow
 
 ### Feature Support
 - [x] Canvas / Masking / Inpainting Functionality
-- - [ ] Improved Canvas / Masking / Inpainting Functionality
+- - [x] Improved Canvas / Masking / Inpainting Functionality
+- - [ ] Outpainting Functionality
+- - Improving Inpainting Functionality
+
 - [ ] Enhanced Media Handling
 - [x] Live Preview
 - [ ] Prompt Tracking
diff --git a/__init__.py b/__init__.py
index cbb966c..2aaa542 100644
--- a/__init__.py
+++ b/__init__.py
@@ -38,7 +38,7 @@
 NODE_DISPLAY_NAME_MAPPINGS: Dict[str, str] = {}
 APP_CONFIGS: List[AppConfig] = []
 APP_NAME: str = "Flow"
-APP_VERSION: str = "0.3.3"
+APP_VERSION: str = "0.4.0"
 PURPLE = "\033[38;5;129m"
 RESET = "\033[0m"
 FLOWMSG = f"{PURPLE}Flow{RESET}"
@@ -743,7 +743,8 @@ def download_or_update_flows() -> None:
         "afl_mochi2v",
         "afl_pulid_flux",
         "afl_pulid_flux_GGUF",
-        "afl_reactor",
+        "afl_reactor"
+        "5otvy-cogvideox-orbit-left-lora",
     ]
 
     try:
diff --git a/pyproject.toml b/pyproject.toml
index 2a29ecb..06acdbe 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-disty-flow"
 description = "Flow is a custom node designed to provide a more user-friendly interface for ComfyUI by acting as an alternative user interface for running workflows. It is not a replacement for workflow creation.\nFlow is currently in the early stages of development, so expect bugs and ongoing feature enhancements. With your support and feedback, Flow will settle into a steady stream."
-version = "0.3.3"
+version = "0.4.0"
 license = {file = "LICENSE"}
 
 [project.urls]
diff --git a/web/core/content.html b/web/core/content.html
index 2b0c433..f294a37 100644
--- a/web/core/content.html
+++ b/web/core/content.html
@@ -1,28 +1,51 @@
-<header></header>
-<div class="content" >
-    <div class="left-col" style="display: block;">
-        <div id="side-workflow-controls" class="custom-scrollbar"></div>
-    </div>
-    <div class="mid-col">
+    <!-- <div id="responsive-indicator"></div> -->
+    <div id="container" class="container">
+        <header></header>
+        <main class="content">
+            <aside class="left-col" id="left-col">
+                <button id="toggle-left" class="toggle-button left-toggle" aria-label="Toggle Left Panel">
+                <svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                    <path d="M16 19V5l-11 7z"/>
+                </svg>
+                </button>
+                <div class="left-panel-content">
+                    <div id="side-workflow-controls" class="custom-scrollbar"></div>
+
+                </div>
+            </aside>
+
+            <section class="main-area mid-col">
                 <div id="display-media-main">
                     <div id="canvasWrapper" style="display: none;">
                         <canvas id="imageCanvas"></canvas>
                     </div>
                     <div id="image-container" class="custom-scrollbar"></div>
                 </div>
-            <div id="controls">
-                <div id="pluginUIContainer" class="plugin-ui-container" style="display: none;"></div>
-                <div id="progressbar"></div>
-                <div id="prompts"></div>
-            </div>
-    </div>
-    <div class="right-col" >
-        <div id="history" class="custom-scrollbar">
-            <h2>Recent</h2>
-            <div id="images-container">
-            </div>
-        </div>
-    </div>
+                <div id="controls" class="custom-scrollbar">
+                    <div id="progressbar"></div>
+                    <div id="quick-controls"></div>
+                    <div id="pluginUIContainer" class="plugin-ui-container">
+                    </div>
+                    <div id="prompts"></div>
+                </div>
+            </section>
+
+            <aside class="sidebar right-col" id="right-col">
+                <button id="toggle-right" class="toggle-button right-toggle" aria-label="Toggle Right Panel">
+                    <svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                        <path d="M8 5v14l11-7z"/>
+                    </svg>
+                </button>
+                <div class="right-panel-content">
+                    <div id="history" class="custom-scrollbar">
+                        <div id="header"><h2>Recent</h2></div>
+                        <div id="images-container" class="custom-scrollbar">
+                        </div>
+                    </div>
+                </div>
+            </aside>
+        </main>
+    <footer></footer>    
 </div>
-</div> 
-<footer></footer>    
+</body>
+</html>
diff --git a/web/core/css/main.css b/web/core/css/main.css
index bfbb339..d708353 100644
--- a/web/core/css/main.css
+++ b/web/core/css/main.css
@@ -1,8 +1,9 @@
+/* Reset and Base Styles */
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    font-family: 'Roboto', sans-serif, 'Arial Narrow', Arial;
+    font-family: 'Roboto', sans-serif, 'Arial Narrow', Arial, sans-serif;
 }
 
 :root {
@@ -40,6 +41,7 @@
     --color-input-range-background: #570d7b;
     --color-spinner:#570d7b;
     --color-spinner-highlight:#7d0ab6;
+    --color-spinner-highlight: #7d0ab6;
 }
 
 html, body {
@@ -57,46 +59,77 @@ body {
     min-height: 100vh;
 }
 
+.container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    color: var(--color-primary-text);
+    overflow: hidden;
+}
+
 header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: var(--color-header-background);
-    padding-left: 50px;
-    padding-right: 50px;
-    padding-top: 10px;
+    padding: 4px 20px;
     text-align: left;
     border-bottom: 1px dashed var(--color-border);
+    position: relative; /* For positioning child elements if needed */
 }
 
-#right-header {
+#logo {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-right: 10px;
-    padding: 5px;
 }
 
-#Support {
-    color: var(--color-header-text);
-    margin: 10px;
-    font-size: 12px;
+#img-logo {
+    padding-right: 40px;
 }
 
-a {
-    text-decoration: none;
+#img-logo img {
+    max-width: 100%;
+    height: auto;
 }
 
-.appName {
-    padding: 10px;
+.logo-text {
+    display: inline-block;
+    position: relative;
+    font-family: Arial, sans-serif;
+    cursor: pointer;
     color: var(--color-header-text);
-    border-top: 1px dashed var(--color-border);
-    border-left: 1px dashed var(--color-border);
-    border-right: 1px dashed var(--color-border);
-    font-size: 12px;
+    user-select: none;
+}
+
+.logo-text .text {
+    overflow: hidden;
+    font-size: 30px;
+    text-align: center;
+    display: inline-block;
+    animation-name: animation-text;
+    animation-duration: 2s;
+}
+
+.logo-text .left,
+.logo-text .right {
+    position: absolute;
+    font-size: 30px;
+    line-height: 30px;
+    animation-duration: 1.5s;
+    font-weight: bold;
+}
+
+.logo-text .left {
+    left: -30px;
+    animation-name: animation-left;
+}
+
+.logo-text .right {
+    right: -30px;
+    animation-name: animation-right;
 }
 
-/* Animations */
 @keyframes animation-text {
     0% { opacity: 0; }
     40% { opacity: 0; }
@@ -113,61 +146,53 @@ a {
     to { right: -30px; }
 }
 
-header #logo {
+.appName {
+    padding: 10px;
+    color: var(--color-header-text);
+    border: 1px dashed var(--color-border);
+    border-top: none;
+    border-bottom: none;
+    font-size: 12px;
+}
+
+.appName h2 {
+    font-size: 16px;
+    font-weight: normal;
+}
+
+#right-header {
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-right: 10px;
+    padding: 5px;
 }
 
-header #img-logo {
-    padding-right: 40px;
-}
-
-header .logo-text {
-    display: inline-block;
-    position: relative;
-    font-family: Arial;
-    cursor: pointer;
+#Support {
     color: var(--color-header-text);
-    user-select: none;
-
+    margin: 10px;
+    font-size: 12px;
+    display: none;
 }
 
-header .logo-text .text {
-    overflow: hidden;
-    font-size: 30px;
-    text-align: center;
-    display: inline-block;
-    animation-name: animation-text;
-    animation-duration: 2s;
+a {
+    text-decoration: none;
 }
 
-header .left {
-    position: absolute;
-    left: -30px;
-    font-size: 30px;
-    line-height: 30px;
-    animation-name: animation-left;
-    animation-duration: 1.5s;
-    font-weight: bold;
+#patreon, #github, #x, #discord {
+    display: flex;
+    align-items: center;
 }
 
-header .right {
-    position: absolute;
-    right: -30px;
-    font-size: 30px;
-    line-height: 30px;
-    animation-name: animation-right;
-    animation-duration: 1.5s;
-    font-weight: bold;
+#patreon a, #github a, #x a, #discord a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    color: var(--color-primary-text);
-    overflow: hidden;
+#patreon a svg, #github a svg, #x a svg, #discord a svg {
+    width: 24px;
+    height: 24px;
 }
 
 .content {
@@ -175,11 +200,7 @@ header .right {
     flex: 1;
     text-align: left;
     overflow: hidden;
-}
-
-.content div {
-    overflow: auto;
-    padding: 4px 6px;
+    position: relative;
 }
 
 .content .mid-col,
@@ -187,178 +208,299 @@ header .right {
 .content .right-col {
     display: flex;
     flex-direction: column;
-    align-items: left;
+    align-items: flex-start;
+    transition: all 0.3s ease;
 }
 
 .content .left-col {
-    flex: 1.1;
-    background-color: var(--color-background);
-}
-.content .right-col {
-    flex: 0.5;
+    width: 24%;
+    min-width: 10px;
     background-color: var(--color-background);
+    position: relative;
+    transition: width 0.3s ease;
+    overflow: hidden;
 }
 
-.content .mid-col {
-    flex: 2.5;
+/* .content .mid-col {
+    display: flex;
+    flex: 1;
     border-left: 1px dashed var(--color-border);
     border-right: 1px dashed var(--color-border);
-    justify-content: space-around;
+    align-items: center;
+    justify-content: center;
     min-height: 100%;
     padding: 10px;
-    /* padding: 4px 6px; */
-
-}
-
-.canvas-container {
+    transition: flex 0.3s ease;
+    gap: 10px;
+} */
+.content .mid-col {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    /* height: 100% !important; */
-    /* width: 100% !important; */
-    /* background: var(--color-button-primary-active); */
-}
+    flex: 1;
+    flex-direction: column; /* Ensure proper stacking */
+    min-width: 0; /* Prevent overflow */
+    border-left: 1px dashed var(--color-border);
+    border-right: 1px dashed var(--color-border);
+    padding: 10px;
+    gap: 10px;
+    transition: flex 0.3s ease;
 
-#canvasContainer:focus {
-    border: 2px solid #4A90E2;
 }
 
-#imageCanvas {
-    /* width: 100%; */
-    /* height: 100%; */
-    display: block;
-    /* position: absolute; */
-    /* top: 0; */
-    /* left: 0; */
-    /* background: green; */
-    overflow: hidden;
+.content .left-col.minimized {
+    width: 0;
     padding: 0;
-
 }
 
-/* Green dashed border around the canvas wrapper */
-#canvasWrapper {
-    /* position: relative; */
-    flex: 1; 
-    /* width: 100%; */
-    /* height: 100%; */
-    overflow: hidden;
-    /* background-color: var(--color-background-secondary); */
-    border: 1px dashed var(--color-border);
-    box-sizing: border-box;
-    /* width: 800px;  */
-    /* height: 600px;  */
+.content .right-col {
+    width: 10%;
+    min-width: 100px;
+    background-color: var(--color-background);
+    padding:0;
+    padding-left: 10px;
     position: relative;
-    margin: 0; /* Remove default margins */
-    padding: 10px;
+    transition: width 0.3s ease;
+    overflow: hidden;
+}
+
+.content .right-col.minimized {
+    width: 0;
+    padding: 4px;
 }
 
-.brush-ui-container {
+/* Sidebar Content Styles */
+.left-panel-content,
+.right-panel-content {
+    flex: 1; 
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    overflow: hidden; 
     padding: 10px;
-    background-color: var(--color-button-primary-text-hover);
-    color: var(--color-primary-text);
-    border: 1px solid var(--color-border);
-    border-radius: 5px;
-    margin-bottom: 10px;
-}
-
-#control button {
-    padding: 5px;
-    background-color: var(--color-primary);
-    user-select: none;
-}
-
-#control button:hover {
-    box-shadow: var(--shadow-hover);
-    background-color: var(--color-accent);
-}
-
-input[type="text"],
-input[type="number"],
-textarea {
-    border:none;
-    border-bottom: 1px solid var(--color-border);
-    transition: border-color 0.3s ease-in-out;
-    padding: 8px;
-    background-color: var(--color-background-secondary);
     color: var(--color-primary-text);
-    margin:0 10px;
-    
-}
+    width: 100%;
 
-input[type="text"]:hover,
-input[type="number"]:hover,
-textarea:hover {
-    border-color: var(--color-border);
 }
-
-input[type="text"]:focus,
-input[type="number"]:focus,
-textarea:focus {
-    border-color: var(--color-primary-text);
-    outline: none;
+.right-panel-content {
+    padding: 0px;
 }
 
-input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 10px;
-    height: 10px;
-    border-radius: 100%;
-    background: var(--color-input-range-thumb);
-    cursor: pointer;
-    margin: 2px;
+.left-panel-content p,
+.right-panel-content p {
+    margin-bottom: 10px;
 }
 
-input[type="range"] {
-    -webkit-appearance: none;
+#controls {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    /* background-color: var(--color-scrollbar-track); */
+    /* padding: 6px; */
     width: 100%;
-    background-color: var(--color-input-range-background);
-    padding: 4px;
+    gap: 4px;
 }
 
-#title {
+#progressbar {
+    flex: 1;
     display: flex;
-    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    margin: 3px 0;
     background-color: var(--color-background-secondary);
+    border-top: 1px dashed var(--color-border);
+    padding: 6px;
     width: 100%;
-    text-align: left;
 }
 
-#title #title-text {
-    flex: 1;
-    user-select: none;
+#prompts {
+    display: flex;
+    flex-direction: column;
+    /* background-color: var(--color-background-secondary); */
+    /* border-top: 1px dashed var(--color-primary); */
+    /* padding: 6px; */
+    width: 100%;
+    gap: 4px;
 }
 
-#title input[type="text"],
-#title textarea {
-    flex: 3;
+#prompt{
+    align-items: center;
+    background-color: var(--color-background-secondary);
+    border-top: 1px dashed var(--color-border);
+    padding: 6px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
 }
 
+#prompts textarea {
+    border:none;
+    /* border-bottom: 1px solid var(--color-border); */
+    transition: border-color 0.3s ease-in-out;
+    /* padding: 8px; */
+    /* background-color: var(--color-background-secondary); */
+    color: var(--color-primary-text);
+    /* margin:0 10px; */
+    /* width: 100%; */
+    flex:3;
+    
+}
 
-#buttonsgen {
-    display: flex;
-    justify-content: right;
+#prompt #title-text {
+    flex: 1;
+    user-select: none;
 }
 
-#buttonsgen button {
+#main-progress {
+    flex: 2;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 3;
+    border-radius: 0;
+    height: 20px;
+    background-color: var(--color-progress-background);
+    border: 0;
+}
+
+#main-progress::-moz-progress-bar {
+    background: var(--color-highlight);
+}
+
+#main-progress::-webkit-progress-bar {
+    background: transparent;
+}
+
+#main-progress::-webkit-progress-value {
+    background: var(--color-progress-value);
+}
+
+#spinner {
+    height: 20px;
+    width: 20px;
+    border-radius: 10%;
+    border: 4px dashed var(--color-spinner);
+    margin-right: 10px;
+}
+
+.spin {
+    animation: spin 1s infinite ease-out;
+    border-color: var(--color-spinner) var(--color-spinner-highlight) !important;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+#loading-area {
+    background-color: var(--color-background-secondary);
+    z-index: 100;
     display: flex;
-    justify-content: right;
-    background-color: var(--color-button-primary);
-    padding: 10px;
-    margin: 0px 10px;
-    color: var(--color-button-primary-text);
-    transition: background-color 0.3s ease, color 0.3s ease;
+    justify-content: space-evenly;
+    align-items: center;
+    width: 100%;
 }
 
-#buttonsgen button:hover {
-    background-color: var(--color-button-primary-hover);
-    color: var(--color-button-primary-text-hover);
+#queue-display{
+    overflow-y: auto;
+    background-color: var(--color-background-secondary);
+    margin-left: 10px;
+    user-select: none;
+    width: 20px;
+}
+
+footer {
+    background-color: var(--color-background-secondary);
+    color: var(--color-primary-text);
+    padding: 15px 50px;
+    text-align: center;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    border-top: 1px dashed var(--color-border);
+    margin-top: auto;
+}
+
+#footer-content p {
+    font-size: 14px;
+}
+
+input[type="text"],
+input[type="number"],
+textarea {
+    border:none;
+    border-bottom: 1px solid var(--color-border);
+    transition: border-color 0.3s ease-in-out;
+    /* padding: 8px; */
+    background-color: var(--color-background-secondary);
+    color: var(--color-primary-text);
+    /* margin:0 10px; */
+    
+}
+
+input[type="text"]:hover,
+input[type="number"]:hover,
+textarea:hover {
+    border-color: var(--color-border);
+}
+
+input[type="text"]:focus,
+input[type="number"]:focus,
+textarea:focus {
+    border-color: var(--color-primary-text);
+    outline: none;
+    
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    width: 100%;
+    background-color: var(--color-input-range-background);
+    padding: 4px;
+}
+
+/* Chrome/Safari/Opera */
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    background: var(--color-input-range-thumb);
+    cursor: pointer;
+    margin: 2px;
+}
+
+/* Firefox */
+input[type="range"]::-moz-range-thumb {
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    background: var(--color-input-range-thumb);
+    cursor: pointer;
+    margin: 2px;
+    border: none; /* Remove default border in Firefox */
+}
+
+/* IE/Edge */
+input[type="range"]::-ms-thumb {
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    background: var(--color-input-range-thumb);
+    cursor: pointer;
+    margin: 2px;
+    border: none;
+}
 
+/* For Chrome, Safari, Edge, Opera */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* For Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
 }
 
 .stepper-container {
@@ -371,6 +513,7 @@ input[type="range"] {
     background-color: var(--color-background-secondary);
     font-size: 15px;
     font-weight: bold;
+    padding: 5px;
 }
 
 .stepper-container .range-input {
@@ -397,46 +540,77 @@ input[type="range"] {
     background-color: var(--color-button-secondary);
 }
 
-.stepper {
-    display: flex;
-    /* overflow: hidden; */
-    flex: 1 1 auto;  
-    /* background: red; */
-    /* width: 10px; */
-
-}
 .stepper__input {
     border: 1px solid var(--color-background-secondary);
     background-color: var(--color-background-secondary);
     color: var(--color-primary-text);
-    /* flex: 1 1 auto;   */
     text-align: center;
     transition: background-color 0.3s ease, color 0.3s ease;
-    /* margin: 0; */
-    /* padding: 0; */
-    /* background: red; */
-
-
 }
+
 .stepper__button {
     background-color: var(--color-background-secondary);
     color: var(--color-primary-text);
-    /* padding: 5px 10px; */
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease;
     width: 100%;
     border: none;
 }
+
 .stepper__button:hover,
 .swap-btn:hover {
-    /* background-color: var(--color-accent); */
-    /* box-shadow: var(--shadow-hover); */
     background-color: var(--color-button-secondary-hover);
     color: var(--color-button-secondary-text-hover);
     border: none;
-    
+}
+
+.seeder-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-evenly;
+    margin-bottom: 5px;
+    background-color: var(--color-background-secondary);
+    font-size: 15px;
+    font-weight: bold;
+    padding: 5px;
+}
+
+.seeder-container > input[type="text"] {
+    /* flex: 1; */
+    margin-right: 20px;
+    /* margin-left: 10px; */
+    /* flex: 1 1 auto;   */
+    /* width: auto; */
+    /* min-width: 50px; */
+    /* width: 200px; */
+    text-align: center;
+    /* padding: 0 15px ; */
+    /* height: 100%; */
+    padding: 6px;
 
 }
+
+.seeder-container > span {
+    flex: 1;
+}
+
+.seeder-container .seeder-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex: 0.5;
+}
+
+.seeder-container button {
+    width: 30px;
+    height: 30px;
+    font-weight: bold;    
+    color: var(--color-button-secondary-text);
+    background-color: var(--color-button-secondary);
+}
+
 .dimension-selector-container {
     display: flex;
     flex-direction: column;
@@ -444,23 +618,38 @@ input[type="range"] {
     color: var(--color-primary-text);
     width: 100%;
     margin-bottom: 4px;
-    padding: 0px 0;
+    padding: 5px;
 }
+
 #dimension-selector {
     display: flex;
     width: 100%;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-evenly;
+} 
+
+.stepper {
+    display: flex;
+    /* flex: 1 1 auto;   */
 }
+
 .dimension-stepper {
     display: flex;
     flex-direction: column;
-    width: 100%;
-    /* flex: 1 1 auto;   */
+    width: 100%;  
+     /* flex: 1 1 auto;  */
+     /* background: red; */
+     /* border:  solid 1px red; */
 }
+
 .dimension-stepper label {
     margin-bottom: 5px;
     text-align: center;
     font-size: 0.9em;
+    font-weight: bold;
 }
+
 .swap-btn {
     background-color: var(--color-background-secondary);
     border: none;
@@ -469,68 +658,147 @@ input[type="range"] {
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease;
 }
+
+#aspect-ratio-selector {
+    width: 100%;
+    padding: 0;
+}
+
 .aspect-ratio-selector__select {
-    border-top: 1px solid var(--color-background-secondary);
+    /* border-top: 1px solid var(--color-background-secondary); */
     background-color: var(--color-background-secondary);
     color: var(--color-primary-text);
-    padding: 5px;
+    /* padding: 5px; */
     width: 100%;
     outline: none;
-    
-}
-.seeder-container{
-    width: 100%;
+    border: none;
+    margin-top: 6px;
+} 
+
+.loader {
     display: flex;
-    align-items: center;
     flex-direction: row;
+    align-items: center;
+    margin-bottom: 4px;
     justify-content: space-around;
-    margin-bottom: 5px;
     background-color: var(--color-background-secondary);
-    font-size: 15px;
-    font-weight: bold;
+    padding: 2px;
+    /* box-shadow: 0 4px 8px var(--color-background-secondary); */
 }
-.seeder-container{
-    width: 100%;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-bottom: 5px;
-    background-color: var(--color-background-secondary);
+
+.loader label {
+    width: 50%;
+    color: var(--color-primary-text);
     font-size: 15px;
     font-weight: bold;
 }
-/* .seeder-container .range-input {
-    flex: 2;
-} */
 
-.seeder-container > input[type="text"] {
-    text-align: center;
-    border: none;
+.loader input[type="text"] {
+    width: 50%;
+    padding: 8px;
+    background-color: var(--color-background-secondary);
     color: var(--color-primary-text);
-    flex: 1 1 auto;  /* grow | shrink | basis */
-    width: 100%;
-    min-width: 50px;  /* Minimum width when shrinking */
-    max-width: 100%;  /* Maximum width when expanding */
+    border: none;
+    border-bottom: 1px solid var(--color-border);
 }
 
-/* .seeder-container input[type='number'] {
-    flex: 2;
-
-} */
 
-.seeder-container span {
-    color: var(--color-primary-text);
-    /* flex: 1; */
+select {
+    width: 100%;
+    padding: 8px;
+    background-color: var(--color-background-secondary);
+    color: var(--color-primary-text);
+    border: none;
+    outline: none;
+}
 
+select:focus {
+    border-color: var(--color-accent);
 }
 
-.seeder-container button {
-    width: 30px;
-    height: 30px;
-    font-weight: bold;    
-    color: var(--color-button-secondary-text);
+select option:hover {
+    background-color: var(--color-primary-text);
+    color: var(--color-background-secondary);
+}
+
+.input-component-wrapper {
+    display: flex;
+    align-items: center;
+    justify-items: space-evenly;
+    background-color: var(--color-background-secondary);
+    padding: 10px 14px; /* Reduced padding for a narrower component */
+    /* border: 1px solid var(--color-border); */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    color: var(--color-primary-text);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin:  0;
+    transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
+    width: 100%;
+    /* flex-grow: 1; */
+
+}
+
+.input-component-wrapper:hover {
+    /* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); */
+    /* border-color: var(--color-button-primary-hover); */
+}
+
+.input-container {
+    /* position: relative; */
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    flex: 1;
+    background-color: var(--color-background-secondary);
+    margin-bottom: 4px;
+    padding: 10px;
+}
+.input-container input[type="text"],
+.input-container input[type="number"],
+.input-container textarea {
+    padding: 6px;
+}
+
+.input-container .text-input {
+    flex : 4;
+    width: 100%;
+}
+
+.input-container label {
+    font-size: 1rem;
+    margin-right: 10px; 
+    user-select: none;
+    flex-shrink: 0;
+    /* width: 120px;  */
+    /* background: red; */
+    flex: 1;
+}
+.multi-component-container {
+    background: var(--color-background-secondary);
+    margin-bottom: 4px;
+    padding: 10px;
+    width: 100%;
+}
+
+.multi-component-container  .stepper-container .text-input{
+    /* background: red; */
+
+}
+.add-lora-button {
     background-color: var(--color-button-secondary);
+    color: var(--color-button-secondary-text);
+    padding: 0px;
+    /* margin: 0 10px; */
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    /* width:80%; */
+    overflow: hidden;
+}
+
+.add-lora-button:hover {
+    background-color: var(--color-button-secondary-hover);
+    color: var(--color-button-secondary-text-hover);
 }
 
 button {
@@ -553,161 +821,266 @@ button:last-child {
 button.active {
     background-color: var(--color-button-secondary-active);
     color: var(--color-button-secondary-text-active);
-    /* box-shadow: var(--shadow-hover); */
 }
 
 button:hover {
     background-color: var(--color-button-secondary-hover);
     color: var(--color-button-secondary-text-hover);
 }
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+#buttonsgen {
+    display: flex;
+    justify-content: right;
 }
-.add-lora-button {
+
+#buttonsgen button {
+    display: flex;
+    justify-content: right;
     background-color: var(--color-button-primary);
+    padding: 10px;
+    margin: 0px 10px;
     color: var(--color-button-primary-text);
-    padding: 6px 0;
-    margin: 0 ;
-    font-size: medium;
-    border: none;
-    cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease;
 }
-.dropdown-stepper-container,
-.multi-stepper-container {
-    background-color: var(--color-background-secondary);
-    margin-bottom: 6px;
-    padding: 10px;
-}
-#main-progress {
-    flex: 2;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 3;
-    border-radius: 0;
-    height: 20px;
-    background-color: var(--color-progress-background);
-    border: 0;
-}
-#main-progress::-moz-progress-bar {
-    background: var(--color-highlight);
-}
-#main-progress::-webkit-progress-bar {
-    background: transparent;
+
+#buttonsgen button:hover {
+    background-color: var(--color-button-primary-hover);
+    color: var(--color-button-primary-text-hover);
+
 }
-#main-progress::-webkit-progress-value {
-    background: var(--color-progress-value);
+/* Responsive Indicator (for testing purposes) */
+#responsive-indicator {
+    text-decoration: none;
+    padding: 2px 0px;
+    transition: background-color 0.3s, color 0.3s;
 }
-#control {
+
+/* Toggle Buttons Styles */
+.toggle-button {
+    position: absolute;
+    bottom:50%;
+    /* transform: translateY(-50%); */
+    width:20px;
+    height: 30px;
+    background-color: var(--color-button-primary);
+    border: none;
+    /* border-radius: 4px; */
+    cursor: pointer;
     display: flex;
-    justify-content: center;
-    background-color: var(--color-background-secondary);
-    border-top: 1px dashed var(--color-primary);
-    padding: 6px;
+    /* align-items: center; */
+    /* justify-content: center; */
+    transition: background-color 0.3s, transform 0.3s;
+    z-index: 10; /* Ensure buttons are above other elements */
 }
-#spinner {
-    height: 20px;
-    width: 20px;
-    border-radius: 10%;
-    border: 4px dashed var(--color-spinner);
-    margin-right: 10px;
+
+.toggle-button .arrow {
+    width: 50px;
+    height: 50px;
+    fill: var(--color-button-primary-text);
+    transition: transform 0.3s;
 }
-.spin {
-    animation: spin 1s infinite ease-out;
-    border-color: var(--color-spinner) var(--color-spinner-highlight) !important;
+
+.toggle-button:hover {
+    background-color: var(--color-button-primary-hover);
 }
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
+
+.toggle-button.active .arrow {
+    transform: rotate(180deg); /* Rotate arrow when active */
 }
-#loading-area {
-    background-color: var(--color-background-secondary);
-    z-index: 100;
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
+
+/* Specific Positioning for Left Toggle Button */
+.left-toggle {
+    right: -15px;
 }
-#queue-display{
-     overflow-y: auto;
-     padding: 10px;
-     background-color: var(--color-background-secondary);
-     margin-left: 10px;
-     user-select: none;
+
+/* Specific Positioning for Right Toggle Button */
+.right-toggle {
+    left: -15px; 
 }
-footer {
-    background-color: var(--color-background-secondary);
-    color: var(--color-primary-text);
-    padding: 15px 50px;
-    text-align: center;
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    border-top: 1px dashed var(--color-border);
-    margin-top: auto;
+
+#display-media-main {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    gap: 4px;
+    height: 50%;
 }
-.loader {
+
+
+
+
+.canvas-container {
     display: flex;
-    flex-direction: row;
+    justify-content: center;
     align-items: center;
-    margin-bottom: 4px;
-    justify-content: space-around;
-    background-color: var(--color-background-secondary);
-    box-shadow: 0 4px 8px var(--color-background-secondary);
-}
-.loader label {
-    width: 50%;
-    color: var(--color-primary-text);
-    font-size: 15px;
-    font-weight: bold;
-}
-select {
-    width: 100%;
-    padding: 8px;
-    background-color: var(--color-background-secondary);
-    color: var(--color-primary-text);
-    border: none;
+    /* height: 100% !important; */
+    /* width: 100% !important; */
+    /* background: var(--color-button-primary-active); */
+
 }
-select:focus {
-    border-color: var(--color-accent);
+
+#canvasContainer:focus {
+    border: 2px solid #4A90E2;
 }
-select option:hover {
-    background-color: var(--color-primary-text);
-    color: var(--color-background-secondary);
+/* Allow flex items to shrink properly */
+#canvasWrapper,
+#image-container {
+    flex: 1 1 0;
+    min-width: 0;
 }
-#display-media-main {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: stretch;
+
+/* #imageCanvas {
+    display: block;
+    overflow: hidden;
+    padding: 0;
+
+} */
+#imageCanvas {
     width: 100%;
-    height: 550px;
+    height: 100%;
+}
+
+/* Green dashed border around the canvas wrapper */
+/* #canvasWrapper {
+    flex: 1; 
+    overflow: hidden;
+    border: 1px dashed var(--color-border);
+    box-sizing: border-box;
+    position: relative;
+    margin: 0; 
+
+
+} */
+#canvasWrapper {
+    flex: 1 1 0;
+    min-width: 0;
     overflow: hidden;
+    border: 1px dashed var(--color-border);
+    box-sizing: border-box;
+    position: relative;
+    margin: 0;
+    /* Remove or adjust padding if necessary */
+    /* padding: 10px; */
 }
-#load-image-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    gap: 10px;
-    width: 300px;
+
+#images-container {
+    /* display: flex; */
+    /* flex-direction: column; */
+    flex: 1; /* Allow it to grow and fill available space within #history */
+    /* padding: 10px;/ */
+    overflow: hidden; 
     height: 100%;
-    overflow-y: auto;
+
 }
+#history #header {
+    /* background: var(--color-background-pattern); */
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+
+    /* padding: 5px; */
+    width: 100%;
+    background-color: var(--color-button-secondary);
+}
+
+#history {
+    flex: 1; /* Allow it to grow and fill space */
+    display: flex;
+    flex-direction: column;
+    overflow: hidden; /* Child handles scrolling */
+    width: 100%;
+}
+#history h2 {
+    color: var(--color-border);
+    text-align: center;
+    margin-bottom: 2px;
+    font-size: 1.2em;
+    /* background-color: red; */
+    width: 100%;
+}
+.history-thumbnail {
+    /* border-radius: 5px; */
+    overflow: hidden;
+    cursor: pointer;
+    position: relative;
+    margin-bottom: 2px;
+    width: 100%;
+
+}
+.history-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s;
+    border: 1px dashed var(--color-border);
+
+}
+
+.content .mid-col #image-container img,
+.content .mid-col #image-container video {
+    width: auto;
+    height: 100%;
+    object-fit: contain;
+    border-left: 1px dashed var(--color-border);
+    border-right: 1px dashed var(--color-border);
+    max-width: 100%;
+}
+
+#image-container {
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    align-items: center;
+    border: 1px dashed var(--color-border);
+    /* width: 10%; */
+    /* flex: 1; */
+    /* display: hidden; */
+
+}
+
+
+.image-loader-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--color-background-secondary);
+    color: var(--color-primary-text);
+    /* font-size: 1.2em; */
+    font-weight: bold;
+    border: 1px dashed var(--color-border);
+    border-bottom: none;
+    padding: 5px;
+}
+#load-image-container {
+    width: 20%;
+    border: 1px dashed var(--color-border);
+    padding: 10px;
+
+
+}
+
 .image-loader {
-    flex: 0 1 auto;
     width: 100%;
-    min-height: 250px;
-    max-height: 50%;
     position: relative;
-    border-radius: 5px;
-    border: 2px dashed var(--color-border);
-    /* background: var(--color-background-secondary); */
+    margin-bottom: 10px;
+    padding-bottom: 10px;
 }
-#load-image-container img {
+
+.image-loader img {
+    display: block;
+    width: 100% !important; /* Force same width */
+    height: auto !important; /* Let height adjust automatically */
+    position: relative !important; /* Remove absolute positioning */
+    top: auto !important;
+    left: auto !important;
+    transform: none !important;
+    object-fit: contain;
+    border: 1px dashed var(--color-border);
+
+}
+
+
+/* #load-image-container img {
     max-width: 100%;
     max-height: 100%;
     width: auto;
@@ -718,8 +1091,8 @@ select option:hover {
     padding: 5px;
     object-fit: cover;
 
-}
-#image-container {
+} */
+/* #image-container {
     flex: 1;
     height: 100%;
     overflow: hidden;
@@ -735,44 +1108,26 @@ select option:hover {
     object-fit: contain;
     border: 1px dashed var(--color-border);
     border-radius: 5px;
-}
-#batch-images-container {
+} */
+.plugin-ui-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    border-top: 1px dashed var(--color-border);
+    background-color: var(--color-background-secondary);
     width: 100%;
-    height: 100px;
-    border: 1px solid var(--color-primary);
-    position: relative;
 }
-#batch-images {
-    padding: 10px;
-    background-color: var(--color-background-secondary);
-    border: 1px solid var(--color-border);
-    border-radius: 5px;
-    height: 100%;
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-primary) var(--color-scrollbar-track);
+
+#quick-controls {
     display: flex;
     flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    background-color: var(--color-background-secondary);
+    flex: 0 1 auto; /* Don't grow, can shrink, auto basis */
+    justify-self: right;
 }
-#history h2 {
-    color: var(--color-primary-text);
-    text-align: center;
-    margin-bottom: 10px;
-    font-size: 1.2em;
-}
-.history-thumbnail {
-    border: 1px dashed var(--color-border);
-    /* border-radius: 5px; */
-    overflow: hidden;
-    cursor: pointer;
-    position: relative;
-}
-.history-thumbnail img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.3s;
-}
-#history,
+#images-container,
 #side-workflow-controls,
 #load-image-container,
 #custom-theme-modal,
@@ -781,6 +1136,7 @@ select option:hover {
     scrollbar-width: thin;
     scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
     overflow-y: auto;
+    padding-right: 6px;
 }
 .custom-scrollbar::-webkit-scrollbar {
     width: 2px;
@@ -797,25 +1153,147 @@ select option:hover {
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
     background-color: var(--color-accent);
 }
-.images-thumbnail {
-    border: 2px solid var(--color-border);
-    /* border-radius: 5px; */
-    overflow: hidden;
+
+.add-lora-button {
+    background-color: var(--color-button-secondary);
+    color: var(--color-button-secondary-text);
+    /* padding: 10px; */
+    /* margin: 0 10px; */
+    border: none;
     cursor: pointer;
-    position: relative;
-}
-.images-thumbnail img {
+    transition: background-color 0.3s ease, color 0.3s ease;
     width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.3s;
 }
-@media (max-width: 768px) {
+
+/* Large Tablets and Desktops */
+@media (max-width: 1450px) {
+    .seeder-container > input[type="text"] {
+        width:40%;
+    }
+    
+}
+
+/* Large Tablets and Desktops */
+@media (max-width: 1200px) {
     .content {
+        flex-direction: row;
+    }
+    #responsive-indicator {
+        background-color: orange;        
+    }
+    .stepper-container .range-input {
+        display: none;
+    }
+    .stepper-container span {
+        flex: 1;
+    }
+    .seeder-container > input[type="text"] {
+        width:26%;
+    }
+}
+
+/* Tablets (768px to 992px) */
+@media (min-width: 768px) and (max-width: 992px) {
+    #responsive-indicator {
+        background-color: red;
+    }
+    .seeder-container > input[type="text"] {
+        width:15%;
+    }
+    #dimension-selector {
+        display: flex;
+        width: 100%;
+        align-items: center;
         flex-direction: column;
+        justify-content: space-evenly;
+    } 
+}
+
+/* Small Tablets and Large Phones */
+@media (max-width: 768px) {
+    #responsive-indicator {
+        background-color: green;
+    }
+    #Support {
+        display: none;
+    }
+    .logo-text {
+        display: none;
+    }
+    #dimension-selector {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        flex-direction: column;
+        justify-content: space-evenly;
+    } 
+}
+
+/* Mobile Devices */
+@media (max-width: 576px) {
+    #responsive-indicator {
+        background-color: blue;
+    }
+    #right-header,
+    #left-col,
+    #right-col {
+        display: none;
+    }
+    
+    #mid {
+        display: none;
+    }
+    .logo-text {
+        display: none;
+    }
+    
+    #logo {
+        padding-right: 10px;
+    }
+    .appName {
+        padding: 0;
+        border: none;
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+    
+    .appName h2 {
+        font-size: 14px; 
+    }
+    
+    #img-logo img {
+        max-width: 80px; 
+    }
+
+    #footer-content p {
+        font-size:11px;
+    }
+    .toggle-button {
+        width: 25px;
+        height: 25px;
+    }
+
+    .toggle-button .arrow {
+        width: 12px;
+        height: 12px;
+    }
+
+    /* Adjust positioning if needed */
+    .left-toggle {
+        right: -12.5px;
+    }
+
+    .right-toggle {
+        left: -12.5px;
     }
 }
 
+
+
+
+
 #theme-selector {
     display: flex;
     justify-content: center; 
@@ -864,7 +1342,6 @@ select option:hover {
     font-weight: bold;
     font-size: 14px;
 
-    
 }
 #theme-option-create-custom {
     color: var(--color-primary-text) !important;
@@ -1248,6 +1725,8 @@ html:not(.css-loading) body {
         transition: none;
     }
 }
+
+
 .lightbox-overlay {
     position: fixed;
     top: 0;
@@ -1353,606 +1832,360 @@ html:not(.css-loading) body {
     max-height: 100%;
     border: 1px dashed var(--color-border);
 }
-.add-lora-button {
-    background-color: var(--color-button-secondary);
-    color: var(--color-button-secondary-text);
-    /* padding: 10px; */
-    /* margin: 0 10px; */
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s ease, color 0.3s ease;
-    width: 100%;
-}
-.add-lora-button:hover {
-    background-color: var(--color-button-secondary-hover);
-    color: var(--color-button-secondary-text-hover);
-}
 
-/* ToggleComponent.css */
 
-.toggle-component-wrapper {
-    display: flex;
-    align-items: center;
-    background-color: var(--color-background-secondary);
-    padding: 15px 20px;
-    /* border-radius: 12px; */
-    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
-    color: var(--color-primary-text);
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    /* margin: 10px 0; */
-    transition: background-color 0.3s, box-shadow 0.3s;
-    width: 100%;
-    
-}
 
-.toggle-component-wrapper:hover {
-    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
-}
 
-.toggle-label-container {
-    display: flex;
-    align-items: center;
-    margin: 0 10px;
-    flex-grow: 1;
-}
 
-.toggle-label {
-    font-size: 1.1rem;
-    margin: 0 10px;
-    user-select: none;
-    transition: color 0.3s;
-}
-
-.toggle-icon {
-    width: 24px;
-    height: 24px;
-    object-fit: contain;
-    transition: opacity 0.3s;
-}
 
-.off-icon {
-    display: inline;
-}
 
-.on-icon {
-    display: none;
-}
-
-.toggle-switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
-}
 
-.toggle-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
 
-.slider {
+/* CSS Isolation: Prefix all classes with 'cbp-' */
+.cbp-brush-ui-container {
+    background-color: var(--color-background);
+    user-select: none;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    color: var(--color-text);
     position: absolute;
+    top: 10%;
+    left: 25%;
+    z-index: 1000;
+    transition: width 0.3s, height 0.3s;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    
+    border: 1px dashed var(--color-border);
+    }
+    .cbp-brush-ui-header {
+    cursor: move;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: var(--color-header-background);
+    border-bottom: 1px dashed var(--color-border);
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    }
+    .cbp-brush-ui-title {
+    font-weight: bold;
+    }
+    .cbp-brush-ui-minimize-btn {
+    background: none;
+    border: none;
+    font-size: 18px;
     cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--color-border);
-    transition: background-color 0.4s, box-shadow 0.4s;
-    /* border-radius: 34px; */
-    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-}
-
-.slider::before {
-    position: absolute;
-    content: "";
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: var(--color-background);
-    transition: transform 0.4s, background-color 0.4s;
-    /* border-radius: 50%; */
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-}
-
-.toggle-switch input:checked + .slider {
-    background-color: var(--color-button-primary);
-}
-
-.toggle-switch input:checked + .slider::before {
-    transform: translateX(26px);
-    background-color: var(--color-button-primary-text);
-}
-
-.toggle-switch input:focus + .slider {
-    box-shadow: 0 0 2px var(--color-button-primary-hover);
-}
-
-.toggle-switch:hover .slider {
-    background-color: var(--color-button-primary-hover);
-}
-
-.toggle-switch input:checked + .slider:hover {
-    background-color: var(--color-button-primary-active);
-}
-
-.toggle-switch input:checked + .slider::before:hover {
-    background-color: var(--color-button-primary-text-active);
-}
-
-@media (max-width: 600px) {
-    .toggle-component-wrapper {
-        flex-direction: column;
-        align-items: flex-start;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    color: var(--color-text);
+    display: none;
     }
-
-    .toggle-label-container {
-        margin: 0 0 10px 0;
+    .cbp-brush-ui-content {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+    box-sizing: border-box;
     }
-}
-
-.input-component-wrapper {
+    .cbp-brush-ui-content label {
     display: flex;
-    align-items: center;
-    background-color: var(--color-background-secondary);
-    padding: 10px 14px; /* Reduced padding for a narrower component */
-    /* border: 1px solid var(--color-border); */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    color: var(--color-primary-text);
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin:  0;
-    transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
+    flex-direction: column;
+    font-size: 12px;
+    gap: 4px;
+    }
+    .cbp-brush-ui-content input[type="range"],
+    .cbp-brush-ui-content input[type="number"],
+    .cbp-brush-ui-content input[type="color"],
+    .cbp-brush-ui-content button {
     width: 100%;
-    /* flex-grow: 1; */
-
-}
-
-.input-component-wrapper:hover {
-    /* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); */
-    /* border-color: var(--color-button-primary-hover); */
-}
-
-.input-label {
-    font-size: 1rem;
-    margin-right: 10px; 
-    user-select: none;
-    flex-shrink: 0;
-    width: 120px; 
-}
-
-.input-container {
-    position: relative;
+    height: 30px;
+    box-sizing: border-box;
+    padding: 4px;
+    /* border: 1px solid #ccc; */
+    /* border-radius: 4px; */
+    font-size: 14px;
+    }
+    
+    .cbp-brush-ui-toggle-btn {
+    flex: 2; 
     display: flex;
+    justify-content: center;
     align-items: center;
-    /* flex-grow: 1; */
-    background-color: var(--color-background-secondary);
-    /* margin-bottom: 4px; */
-}
-.input-container input[type="text"],
-.input-container input[type="number"],
-.input-container textarea {
-    /* border:none;
-    border-bottom: 1px solid var(--color-border);
-    transition: border-color 0.3s ease-in-out;
-    padding: 8px;
-    background-color: var(--color-background-secondary);
-    color: var(--color-primary-text);
-    margin:0 10px; */
-    /* background-color: red; */
-    width: 100%;
-}
-
-/* 
-.input-container input[type="text"]:hover,
-.input-container input[type="number"]:hover,
-.input-container textarea:hover {
-    border-color: var(--color-border);
-}
-
-.input-container input[type="text"]:focus,
-.input-container input[type="number"]:focus,
-.input-container textarea:focus {
-    border-color: var(--color-primary-text);
-    outline: none;
-} */
-
-.styled-input {
+    background: var(--color-button-primary);
+    border: none;
+    cursor: pointer;
+    padding: 4px !important;
+    height: 40px !important;
+    width: auto; 
+    }
+    #cbp-color-picker {
+    flex: 1;
+    height: auto;
+    
+    }
+    #cbp-color-picker:hover {
+    border: 1px dashed var(--color-button-primary-text);
+    }
+    #cbp-toggle-btn-icon {
+    width: 70%;
+    height: 100%;
+    /* display: block; Ensures the SVG takes up space */
+    }
+    #cbp-toggle-drawing-mode-btn.active {
+    /* background: var(--color-button-primary-text); */
+    border: 1px dashed var(--color-button-primary-text) !important;
+    } 
+    #ui-toggle-btn.active {
+    background: var(--color-button-primary-text);
+    /* border: 1px dashed var(--color-button-secondary-text-active) !important; */
+    
+    }
+    .cbp-brush-ui-color-picker {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    
     width: 100%;
-    padding: 8px 12px;
-    padding-left: 40px; 
-    border: 1px solid var(--color-border);
+    height: 100%;
+    }
+    
+    .cbp-brush-ui-content input[type="color"] {
+    padding: 0;
+    /* border: none; */
     background-color: var(--color-background);
-    color: var(--color-primary-text);
-    font-size: 1rem;
-    transition: border-color 0.3s, box-shadow 0.3s;
+    outline: none;
+    -webkit-appearance: none; /* Removes default styling in WebKit browsers */
+    border-bottom: 1px dashed var(--color-border);
+    
+    }
+    
+    /* Remove the color swatch border in WebKit browsers */
+    .cbp-brush-ui-content input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+    border: none;
+    }
+    
+    .cbp-brush-ui-content input[type="color"]::-webkit-color-swatch {
+    border: none;
+    }
+    
+    /* Remove the color swatch border in Firefox */
+    .cbp-brush-ui-content input[type="color"]::-moz-color-swatch {
+    border: none;
+    }
+    .cbp-brush-ui-minimized .cbp-brush-ui-content {
+    display: none;
+    }
+    .cbp-brush-ui-full {
+    width: 155px;
+    height: auto;
+    }
+    .cbp-brush-ui-mini {
+    width: 80px;
+    height: auto;
+    }
+    .cbp-brush-ui-minimized {
+    width: 60px;
+    height: auto;
+    }
+    .cbp-brush-ui-input-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    }
+    .cbp-brush-ui-input-group input {
     flex: 1;
-}
+    }
+    .cbp-hidden-cursor {
+    cursor: none !important;
+    }
+    
+    
+    
+    
+    .mbp-container * {
+    box-sizing: border-box;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    }
+    
+    .mbp-container {
+    /* --mbp-primary: var(--color-button-primary);
+    --mbp-primary-hover: var(--color-button-primary-hover);
+    --mbp-bg: var(--color-background-secondary);
+    --mbp-border: var(--color-border);
+    --mbp-text: var(--color-primary-text);
+    --mbp-icon: var(--color-primary); */
+    padding: 0.5rem;
+    }
+    
+    .mbp-header {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+    }
+    
+    .mbp-header .mbp-select {
+    flex: 1;
+    }
+    
+    .mbp-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    border: 1px solid var(--mbp-border);
+    background: var(--color-button-primary) ;
+    /* border-radius: 0.375rem; */
+    cursor: pointer;
+    transition: all 0.2s;
+    color: var(--mbp-icon);
+    min-width: 36px;
+    height: 36px;
+    width: 100%;
+    }
 
-.styled-input:focus {
+    .mbp-button:hover {
+    background: var(--color-button-primary-hover);
+    color: var(--mbp-primary);
+    }
+    
+    .mbp-button svg {
+        width: 1.25rem;
+        height: 1.25rem;
+    }
+    #clearAllMasksBtn {
+        /* Make the button a flex container to center the SVG */
+        /* display: flex; */
+        /* align-items: center; */
+        /* justify-content: center; */
+        
+        /* Set a specific size for your button if needed */
+        /* width: 50px;   */
+        height: 35px;
+        /* padding: 8px; */
+    }
+    
+    #clearAllMasksBtn svg {
+        width: 100%;
+        height: 100%;
+        /* width: auto; */
+        height: 35px;
+    } 
+
+    .mbp-select {
+    padding: 0.5rem;
+    border: none;
+    background: var(--color-background);
+    color: var(--mbp-text);
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.5rem center;
+    background-size: 1.25rem;
+    padding-right: 2.5rem;
+    height: 36px;
     outline: none;
-    border-color: var(--color-button-primary);
-    /* box-shadow: 0 0 3px rgba(86, 13, 123, 0.5); */
-}
-
-.input-component-wrapper,
-.input-container,
-.styled-input {
-    border-radius: 0;
-}
-
-@media (max-width: 600px) {
-    .input-component-wrapper {
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 8px 12px;
+    }
+    .mbp-select:hover {
+    /* background: var(--color-button-primary-hover); */
+    border-top: solid 1px var(--color-button-primary-hover);
+    }
+    
+    .mbp-button-group {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
     }
 
-    .input-label {
-        margin-right: 0;
-        margin-bottom: 6px;
-        width: 100%; 
+    .mbp-toggle-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        border: 1px dashed var(--color-border);
+        padding: 2px;
     }
+    .mbp-toggle {
+        position: relative;
+        display: inline-block;
+        width: 40px;
+        height: 100%;
+        border-left: 1px dashed var(--color-border);
+        align-items: center;
+
 
-    .styled-input {
-        padding-left: 36px;
     }
-}
+    .mbp-toggle input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+    .mbp-toggle-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        /* background-color: var(--color-button-primary); */
+        /* background-color: var(--color-background-secondary); */
+        transition: .4s;
+    }
+    .mbp-toggle-slider:before {
+        position: absolute;
+        content: "";
+        height: 20px;
+        width: 20px;
+        left: 2px;
+        bottom: 0px;
+        background-color: var(--color-button-secondary);
+        transition: .4s;
+    }
+    .mbp-toggle-slider:after {
+        position: absolute;
+        content: "";
+        height: 20px;
+        width: 20px;
+        left: 2px;
+        bottom: 0px;
+        background-color: var(--color-button-primary);
+        transition: .4s;
+    }
+    .mbp-toggle input:checked + .mbp-toggle-slider {
+        /* background-color: var(--color-button-secondary-active); */
 
-.multi-component-container {
-    background: var(--color-background-secondary);
-    margin-bottom: 4px;
-}
-.plugin-ui-container {
-    background: var(--color-background-secondary);
-    padding: 4px;
-    /* position: absolute; */
-    /* top: 100px; */
-    /* left: 19%; */
-    z-index: 1000;
-    transition: width 0.3s, height 0.3s;
-    display: flex;
-    flex-direction: row;
-    /* justify-content: space-between; */
-    align-items: stretch;
-    /* border: 1px dashed var(--color-border); */
-    margin: 5px;
-}
-/* Style for the plugin UI container */
-#pluginUIContainer {
-    /* padding: 10px; */
-    /* background-color: var(--color-background-secondary); */
-    /* Adjust as needed */
-}
+    }
+    .mbp-toggle input:checked + .mbp-toggle-slider:before {
+        transform: translateX(20px);
+    }
 
-/* Parent container for the canvas */
-/* #canvasContainer {
-    position: relative;
-    width: 100%;
-    height: calc(100% - 60px); 
-    border: 1px solid #ccc; 
-    box-sizing: border-box;
-} */
+  
+    .mbp-toggle input:checked + .mbp-toggle-slider:after {
+        transform: translateX(20px);
+        background-color: var(--color-button-secondary-active);
 
-/* Make the canvas fill its parent container */
-/* #imageCanvas {
-    width: 100% !important;
-    height: 100% !important;
-    display: block; 
-    background: var(--color-progress-background);    
+    }
+    .mbp-label {
+    font-size: 0.75rem;
+    color: var(--mbp-text);
+    user-select: none;
+    padding: 0 6px;
+    }
     
-} */
-
-           /* CSS Isolation: Prefix all classes with 'cbp-' */
-           .cbp-brush-ui-container {
-            background-color: var(--color-background);
-            user-select: none;
-            border-radius: 8px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-            font-family: Arial, sans-serif;
-            font-size: 14px;
-            color: var(--color-text);
-            position: absolute;
-            top: 100px;
-            left: 19%;
-            z-index: 1000;
-            transition: width 0.3s, height 0.3s;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-
-            border: 1px dashed var(--color-border);
-        }
-        .cbp-brush-ui-header {
-            cursor: move;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px;
-            background-color: var(--color-header-background);
-            border-bottom: 1px dashed var(--color-border);
-            border-top-left-radius: 8px;
-            border-top-right-radius: 8px;
-        }
-        .cbp-brush-ui-title {
-            font-weight: bold;
-        }
-        .cbp-brush-ui-minimize-btn {
-            background: none;
-            border: none;
-            font-size: 18px;
-            cursor: pointer;
-            width: 24px;
-            height: 24px;
-            padding: 0;
-            color: var(--color-text);
-            display: none;
-        }
-        .cbp-brush-ui-content {
-            padding: 10px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            width: 100%;
-            box-sizing: border-box;
-        }
-        .cbp-brush-ui-content label {
-            display: flex;
-            flex-direction: column;
-            font-size: 12px;
-            gap: 4px;
-        }
-        .cbp-brush-ui-content input[type="range"],
-        .cbp-brush-ui-content input[type="number"],
-        .cbp-brush-ui-content input[type="color"],
-        .cbp-brush-ui-content button {
-            width: 100%;
-            height: 30px;
-            box-sizing: border-box;
-            padding: 4px;
-            /* border: 1px solid #ccc; */
-            /* border-radius: 4px; */
-            font-size: 14px;
-        }
-
-        .cbp-brush-ui-toggle-btn {
-            flex: 2; 
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background: var(--color-button-primary);
-            border: none;
-            cursor: pointer;
-            padding: 4px !important;
-            height: 40px !important;
-            width: auto; 
-        }
-        #cbp-color-picker {
-            flex: 1;
-            height: auto;
-
-        }
-        #cbp-color-picker:hover {
-            border: 1px dashed var(--color-button-primary-text);
-        }
-        #cbp-toggle-btn-icon {
-            width: 70%;
-            height: 100%;
-            /* display: block; Ensures the SVG takes up space */
-        }
-        #cbp-toggle-drawing-mode-btn.active {
-            /* background: var(--color-button-primary-text); */
-            border: 1px dashed var(--color-button-primary-text) !important;
-        } 
-        #ui-toggle-btn.active {
-            background: var(--color-button-primary-text);
-            /* border: 1px dashed var(--color-button-secondary-text-active) !important; */
-
-        }
-        .cbp-brush-ui-color-picker {
-            flex: 1;
-            display: flex;
-            flex-direction: row;
-            gap: 10px;
-
-            width: 100%;
-            height: 100%;
-        }
-
-        .cbp-brush-ui-content input[type="color"] {
-            padding: 0;
-            /* border: none; */
-            background-color: var(--color-background);
-            outline: none;
-            -webkit-appearance: none; /* Removes default styling in WebKit browsers */
-            border-bottom: 1px dashed var(--color-border);
-
-        }
-        
-        /* Remove the color swatch border in WebKit browsers */
-        .cbp-brush-ui-content input[type="color"]::-webkit-color-swatch-wrapper {
-            padding: 0;
-            border: none;
-        }
-        
-        .cbp-brush-ui-content input[type="color"]::-webkit-color-swatch {
-            border: none;
-        }
-        
-        /* Remove the color swatch border in Firefox */
-        .cbp-brush-ui-content input[type="color"]::-moz-color-swatch {
-            border: none;
-        }
-        .cbp-brush-ui-minimized .cbp-brush-ui-content {
-            display: none;
-        }
-        .cbp-brush-ui-full {
-            width: 155px;
-            height: auto;
-        }
-        .cbp-brush-ui-mini {
-            width: 80px;
-            height: auto;
-        }
-        .cbp-brush-ui-minimized {
-            width: 60px;
-            height: auto;
-        }
-        .cbp-brush-ui-input-group {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .cbp-brush-ui-input-group input {
-            flex: 1;
-        }
-        .cbp-hidden-cursor {
-            cursor: none !important;
-        }
-
-
-
-
-        .mbp-container * {
-            box-sizing: border-box;
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-        }
-        
-        .mbp-container {
-            /* --mbp-primary: var(--color-button-primary);
-            --mbp-primary-hover: var(--color-button-primary-hover);
-            --mbp-bg: var(--color-background-secondary);
-            --mbp-border: var(--color-border);
-            --mbp-text: var(--color-primary-text);
-            --mbp-icon: var(--color-primary); */
-            padding: 0.5rem;
-        }
-
-        .mbp-header {
-            display: flex;
-            gap: 0.5rem;
-            margin-bottom: 0.75rem;
-        }
-
-        .mbp-header .mbp-select {
-            flex: 1;
-        }
-
-        .mbp-button {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0.5rem;
-            border: 1px solid var(--mbp-border);
-            background: var(--color-button-primary) ;
-            /* border-radius: 0.375rem; */
-            cursor: pointer;
-            transition: all 0.2s;
-            color: var(--mbp-icon);
-            min-width: 36px;
-            height: 36px;
-            width: 100%;
-        }
-
-        .mbp-button:hover {
-            background: var(--color-button-primary-hover);
-            color: var(--mbp-primary);
-        }
-
-        .mbp-button svg {
-            width: 1.25rem;
-            height: 1.25rem;
-        }
-
-        .mbp-select {
-            padding: 0.5rem;
-            border: none;
-            background: var(--color-background);
-            color: var(--mbp-text);
-            cursor: pointer;
-            appearance: none;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-position: right 0.5rem center;
-            background-size: 1.25rem;
-            padding-right: 2.5rem;
-            height: 36px;
-            outline: none;
-        }
-        .mbp-select:hover {
-            /* background: var(--color-button-primary-hover); */
-            border-top: solid 1px var(--color-button-primary-hover);
-        }
-
-        .mbp-toggle-wrapper {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            margin: 0.75rem 0;
-            padding: 0.25rem 0;
-            display: none !important;
-
-        }
-
-        .mbp-toggle {
-            position: relative;
-            display: inline-block;
-            width: 3.5rem;
-            height: 1.75rem;
-            margin: 0;
-        }
-
-        .mbp-toggle input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-            margin: 0;
-        }
-
-        .mbp-toggle-slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            /* background-color: #e5e7eb; */
-            transition: .3s;
-            border-radius: 2rem;
-        }
-
-        .mbp-toggle-slider:before {
-            position: absolute;
-            content: "";
-            height: 1.25rem;
-            width: 1.25rem;
-            left: 0.25rem;
-            bottom: 0.25rem;
-            /* background-color: white; */
-            transition: .3s;
-            border-radius: 50%;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .mbp-toggle input:checked + .mbp-toggle-slider {
-            background-color: var(--mbp-primary);
-        }
-
-        .mbp-toggle input:checked + .mbp-toggle-slider:before {
-            transform: translateX(1.75rem);
-        }
-
-        .mbp-label {
-            font-size: 0.75rem;
-            color: var(--mbp-text);
-            user-select: none;
-            padding: 0 6px;
-        }
-
-        .mbp-button-group {
-            display: flex;
-            gap: 0.5rem;
-            margin: 0.75rem 0;
-
-        }        
\ No newline at end of file
+    .mbp-button-group {
+    display: flex;
+    gap: 0.5rem;
+    margin: 0.75rem 0;
+    
+    }        
+    
+    
+    
\ No newline at end of file
diff --git a/web/core/js/common/components/CanvasComponent.js b/web/core/js/common/components/CanvasComponent.js
index 8fb3fbb..c420394 100644
--- a/web/core/js/common/components/CanvasComponent.js
+++ b/web/core/js/common/components/CanvasComponent.js
@@ -1,5 +1,6 @@
 import { showSpinner, hideSpinner } from './utils.js';
 import { updateWorkflow } from './workflowManager.js';
+import { messageHandler } from './messageHandler.js';
 
 function dataURLToBlob(dataURL) {
     const [header, data] = dataURL.split(',');
@@ -16,7 +17,15 @@ function dataURLToBlob(dataURL) {
     return new Blob([new Uint8Array(array)], { type: mime });
 }
 
-async function processAndUpload(items, getImage, uploadDescription, defaultErrorMessage, successMessagePrefix, workflow) {
+async function processAndUpload(
+    items,
+    getImage,
+    uploadDescription,
+    defaultErrorMessage,
+    successMessagePrefix,
+    workflow,
+    postUploadCallback = null
+) {
     for (const item of items) {
         const { id, label, nodePath } = item;
 
@@ -58,14 +67,41 @@ async function processAndUpload(items, getImage, uploadDescription, defaultError
                 throw new Error('Invalid JSON response from server.');
             }
 
-            console.log(`${successMessagePrefix} ${id} uploaded successfully:`, result);
-
+            // console.log(`${successMessagePrefix} ${id} uploaded successfully:`, result);
             if (result && result.name) {
                 updateWorkflow(workflow, nodePath, result.name);
-                console.log(`Workflow updated at nodePath ${nodePath} with imageUrl: ${result.name}`);
+                switch (uploadDescription) {
+                    case 'Original Image':
+                        messageHandler.setOriginalImage(imageDataURL);
+                        // console.log('Original Image set in MessageHandler');
+                        break;
+                    case 'Cropped Mask Image':
+                        messageHandler.setCroppedMaskImage(imageDataURL);
+                        // console.log('Cropped Mask Image set in MessageHandler');
+                        break;                        
+                    case 'Mask Alpha Image':
+                        messageHandler.setAlphaMaskImage(imageDataURL);
+                        // console.log('Mask Alpha Image set in MessageHandler');
+                        break;
+                    // case 'Mask Image':
+                    //     messageHandler.setMaskImage(imageDataURL);
+                    //     console.log('Mask Image set in MessageHandler');
+                    //     break;
+                    // case 'Selected Mask Alpha Image':
+                    //     messageHandler.setCanvasSelectedMaskOutputs(imageDataURL);
+                    //     // console.log('Selected Mask Alpha Image added to CanvasSelectedMaskOutputs in MessageHandler');
+                    //     messageHandler.setMaskImage(imageDataURL);
+                    //     // console.log('Mask Image set in MessageHandler');
+                    //     break;
+                    default:
+                        console.warn(`No setter defined for upload description: ${uploadDescription}`);
+                }
             } else {
                 throw new Error('Server response did not include imageUrl or imageName.');
             }
+            if (postUploadCallback) {
+                postUploadCallback(result);
+            }
         } catch (error) {
             console.error(`Error uploading ${uploadDescription.toLowerCase()} ${id}:`, error);
             alert(`Error uploading ${label}: ${error.message}`);
@@ -75,6 +111,7 @@ async function processAndUpload(items, getImage, uploadDescription, defaultError
     }
 }
 
+
 export default async function CanvasComponent(flowConfig, workflow, canvasLoader) {
     if (flowConfig.canvasOutputs && Array.isArray(flowConfig.canvasOutputs)) {
         await processAndUpload(
@@ -87,30 +124,6 @@ export default async function CanvasComponent(flowConfig, workflow, canvasLoader
         );
     }
 
-    // **Process canvasLoadedImages and canvasSelectedMaskOutputs (Case 1)**
-    if (
-        flowConfig.canvasLoadedImages && Array.isArray(flowConfig.canvasLoadedImages) &&
-        flowConfig.canvasSelectedMaskOutputs && Array.isArray(flowConfig.canvasSelectedMaskOutputs)
-    ) {
-        await processAndUpload(
-            flowConfig.canvasLoadedImages,
-            () => canvasLoader.getOriginalImage(),
-            'Original Image',
-            'Original image upload failed.',
-            'Original Image',
-            workflow
-        );
-
-        await processAndUpload(
-            flowConfig.canvasSelectedMaskOutputs,
-            () => canvasLoader.getSelectedMaskAlphaOnImage(),
-            'Selected Mask Alpha Image',
-            'Selected mask alpha image upload failed.',
-            'Selected Mask Alpha Image',
-            workflow
-        );
-    }
-
     if (flowConfig.canvasMaskOutputs && Array.isArray(flowConfig.canvasMaskOutputs)) {
         await processAndUpload(
             flowConfig.canvasMaskOutputs,
@@ -133,7 +146,39 @@ export default async function CanvasComponent(flowConfig, workflow, canvasLoader
         );
     }
 
-    // **Process canvasSelectedMaskOutputs (New Functionality for Case 1)**
+    if  (flowConfig.canvasCroppedMaskOutputs && Array.isArray(flowConfig.canvasCroppedMaskOutputs)) {
+        await processAndUpload(
+            flowConfig.canvasCroppedMaskOutputs,
+            () => canvasLoader.getCroppedMask(),
+            'Cropped Mask Image',
+            'Cropped mask image upload failed.',
+            'Cropped Mask Image',
+            workflow
+        );
+    }
+
+    if  (flowConfig.canvasCroppedImageOutputs && Array.isArray(flowConfig.canvasCroppedImageOutputs)) {
+        await processAndUpload(
+            flowConfig.canvasCroppedImageOutputs,
+            () => canvasLoader.getCroppedImage(),
+            'Cropped Image',
+            'Cropped image upload failed.',
+            'Cropped Image',
+            workflow
+        );
+    }
+
+    if  (flowConfig.canvasCroppedAlphaOnImageOutputs && Array.isArray(flowConfig.canvasCroppedAlphaOnImageOutputs)) {
+        await processAndUpload(
+            flowConfig.canvasCroppedAlphaOnImageOutputs,
+            () => canvasLoader.getCroppedAlphaOnImage(),
+            'Cropped Alpha Image',
+            'Cropped alpha image upload failed.',
+            'Cropped Alpha Image',
+            workflow
+        );
+    }
+
     if (flowConfig.canvasSelectedMaskOutputs && Array.isArray(flowConfig.canvasSelectedMaskOutputs)) {
         await processAndUpload(
             flowConfig.canvasSelectedMaskOutputs,
@@ -144,4 +189,121 @@ export default async function CanvasComponent(flowConfig, workflow, canvasLoader
             workflow
         );
     }
+
+    // ** ( Case 1 ) **
+    if (
+        flowConfig.canvasLoadedImages && Array.isArray(flowConfig.canvasLoadedImages) &&
+        flowConfig.canvasAlphaOutputs && Array.isArray(flowConfig.canvasAlphaOutputs)
+    ) {
+        await processAndUpload(
+            flowConfig.canvasLoadedImages,
+            () => canvasLoader.getOriginalImage(),
+            'Original Image',
+            'Original image upload failed.',
+            'Original Image',
+            workflow
+        );
+
+        await processAndUpload(
+            flowConfig.canvasAlphaOutputs,
+            () => canvasLoader.getMaskAlphaOnImage(),
+            'Mask Alpha Image',
+            'Mask alpha image upload failed.',
+            'Mask Alpha Image',
+            workflow
+        );
+    }
+
+    // ** ( Case 3 ) **
+    // if (
+    //     flowConfig.canvasCroppedImageOutputs && Array.isArray(flowConfig.canvasCroppedImageOutputs) &&
+    //     flowConfig.canvasCroppedMaskOutputs && Array.isArray(flowConfig.canvasCroppedMaskOutputs)
+    // ) {
+    //     await processAndUpload(
+    //         flowConfig.canvasCroppedImageOutputs,
+    //         () => canvasLoader.getCroppedImage(),
+    //         'Cropped Image',
+    //         'Cropped image upload failed.',
+    //         'Cropped Image',
+    //         workflow
+    //     );
+
+    //     await processAndUpload(
+    //         flowConfig.canvasCroppedMaskOutputs,
+    //         () => canvasLoader.getCroppedMask(),
+    //         'Cropped Mask Image',
+    //         'Cropped mask image upload failed.',
+    //         'Cropped Mask Image',
+    //         workflow
+    //     );
+    // }
+
+    // ** ( Case 4 ) **
+    if (
+        flowConfig.canvasCroppedImageOutputs && Array.isArray(flowConfig.canvasCroppedImageOutputs) &&
+        flowConfig.canvasCroppedMaskOutputs && Array.isArray(flowConfig.canvasCroppedMaskOutputs) &&
+        flowConfig.canvasLoadedImages && Array.isArray(flowConfig.canvasLoadedImages)
+    ) {
+        await processAndUpload(
+            flowConfig.canvasCroppedImageOutputs,
+            () => canvasLoader.getCroppedImage(),
+            'Cropped Image',
+            'Cropped image upload failed.',
+            'Cropped Image',
+            workflow
+        );
+
+        await processAndUpload(
+            flowConfig.canvasCroppedMaskOutputs,
+            () => canvasLoader.getCroppedMask(),
+            'Cropped Mask Image',
+            'Cropped mask image upload failed.',
+            'Cropped Mask Image',
+            workflow
+        );
+
+        await processAndUpload(
+            flowConfig.canvasLoadedImages,
+            () => canvasLoader.getOriginalImage(),
+            'Original Image',
+            'Original image upload failed.',
+            'Original Image',
+            workflow
+        );
+    }
+
+    // ** ( Case 5 ) **
+    if (
+        flowConfig.canvasCroppedImageOutputs && Array.isArray(flowConfig.canvasCroppedImageOutputs) &&
+        flowConfig.canvasCroppedAlphaOnImageOutputs && Array.isArray(flowConfig.canvasCroppedAlphaOnImageOutputs) &&
+        flowConfig.canvasLoadedImages && Array.isArray(flowConfig.canvasLoadedImages)
+    ) {
+        await processAndUpload(
+            flowConfig.canvasCroppedImageOutputs,
+            () => canvasLoader.getCroppedImage(),
+            'Cropped Image',
+            'Cropped image upload failed.',
+            'Cropped Image',
+            workflow
+        );
+
+        await processAndUpload(
+            flowConfig.canvasCroppedAlphaOnImageOutputs,
+            () => canvasLoader.getCroppedAlphaOnImage(),
+            'Cropped Alpha Image',
+            'Cropped alpha image upload failed.',
+            'Cropped Alpha Image',
+            workflow
+        );
+
+        await processAndUpload(
+            flowConfig.canvasLoadedImages,
+            () => canvasLoader.getOriginalImage(),
+            'Original Image',
+            'Original image upload failed.',
+            'Original Image',
+            workflow
+        );
+    }
+
 }
diff --git a/web/core/js/common/components/DataComponent.js b/web/core/js/common/components/DataComponent.js
new file mode 100644
index 0000000..464517c
--- /dev/null
+++ b/web/core/js/common/components/DataComponent.js
@@ -0,0 +1,48 @@
+import { store } from '../scripts/stateManagerMain.js';
+import { updateWorkflow } from './workflowManager.js';
+
+function getNestedValue(obj, path) {
+    return path.split('.').reduce((acc, key) => (acc && acc[key] !== undefined) ? acc[key] : undefined, obj);
+}
+
+class DataComponent {
+    constructor(config, workflow) {
+        this.id = config.id;
+        this.name = config.name;
+        this.nodePath = config.nodePath;
+        this.dataPath = config.dataPath;
+        this.workflow = workflow;
+
+        this.handleStoreUpdate = this.handleStoreUpdate.bind(this);
+
+        this.updateWorkflowWithStoreData();
+
+        this.unsubscribe = store.subscribe(this.handleStoreUpdate);
+    }
+
+    updateWorkflowWithStoreData() {
+        const state = store.getState();
+        const data = getNestedValue(state, this.dataPath);
+
+        if (data === undefined) {
+            console.warn(`DataComponent [${this.id}]: No data found at path "${this.dataPath}" in the store.`);
+            return;
+        }
+
+        updateWorkflow(this.workflow, this.nodePath, data);
+        // console.log(`DataComponent [${this.id}]: Updated workflow at "${this.nodePath}" with data from "${this.dataPath}".`);
+    }
+
+    handleStoreUpdate() {
+        this.updateWorkflowWithStoreData();
+    }
+
+    destroy() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            // console.log(`DataComponent [${this.id}]: Unsubscribed from store updates.`);
+        }
+    }
+}
+
+export default DataComponent;
diff --git a/web/core/js/common/components/DimSelector.js b/web/core/js/common/components/DimSelector.js
index a6b0d6d..b11ba80 100644
--- a/web/core/js/common/components/DimSelector.js
+++ b/web/core/js/common/components/DimSelector.js
@@ -163,7 +163,7 @@ class DimensionSelector {
         const path = this.config.nodePath;
         // const path = config.nodePath
         updateWorkflow(this.workflow, `${path}.${dimension}`, value);
-        console.log(`Workflow updated - ${dimension}: ${value}`);
+        // console.log(`Workflow updated - ${dimension}: ${value}`);
     }
 
     updateWorkflowWithCurrentDimensions() {
diff --git a/web/core/js/common/components/Seeder.js b/web/core/js/common/components/Seeder.js
index 6c5ba35..dac87ac 100644
--- a/web/core/js/common/components/Seeder.js
+++ b/web/core/js/common/components/Seeder.js
@@ -39,9 +39,11 @@ class Seeder {
         const html = `
             <span for="${this.config.id}Input">${this.config.label}</span>
             <input type="text" id="${this.config.id}Input" value="${this.config.initialSeed}">
-            <button id="${this.config.id}RandomSeedButton">R</button>
-            <button id="${this.config.id}DecrementButton">-</button>
-            <button id="${this.config.id}IncrementButton">+</button>
+            <div class="seeder-buttons">
+                <button id="${this.config.id}RandomSeedButton">R</button>
+                <button id="${this.config.id}DecrementButton">-</button>
+                <button id="${this.config.id}IncrementButton">+</button>
+            </div>
         `;
         this.container.innerHTML = html;
 
diff --git a/web/core/js/common/components/canvas/CanvasControlsPlugin.js b/web/core/js/common/components/canvas/CanvasControlsPlugin.js
index 831ac8c..f673f58 100644
--- a/web/core/js/common/components/canvas/CanvasControlsPlugin.js
+++ b/web/core/js/common/components/canvas/CanvasControlsPlugin.js
@@ -7,15 +7,21 @@ export class CanvasControlsPlugin extends CanvasPlugin {
         this.zoomIn = this.zoomIn.bind(this);
         this.zoomOut = this.zoomOut.bind(this);
         this.resetZoom = this.resetZoom.bind(this);
+        this.togglePanMode = this.togglePanMode.bind(this);
         this.onMouseDown = this.onMouseDown.bind(this);
         this.onMouseMove = this.onMouseMove.bind(this);
         this.onMouseUp = this.onMouseUp.bind(this);
-        this.onAfterRender = this.onAfterRender.bind(this); 
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.onKeyUp = this.onKeyUp.bind(this);
+        this.onAfterRender = this.onAfterRender.bind(this);
         this.arraysEqual = this.arraysEqual.bind(this);
-
+        this.onMaskActivated = this.onMaskActivated.bind(this);
+        this.onMaskDeactivated = this.onMaskDeactivated.bind(this);
         this.canvasManager = null;
         this.canvas = null;
         this.isPanning = false;
+        this.isPanMode = false; 
+        this.isAltPan = false; 
         this.lastPosX = 0;
         this.lastPosY = 0;
         this.lastTransform = null;
@@ -30,6 +36,7 @@ export class CanvasControlsPlugin extends CanvasPlugin {
         this.attachEventListeners();
 
         this.lastTransform = this.canvas.viewportTransform.slice();
+
     }
 
     createUI() {
@@ -44,7 +51,7 @@ export class CanvasControlsPlugin extends CanvasPlugin {
                 display: inline-flex;
                 gap: 0.5rem;
                 padding: 0.5rem;
-                 /* background: var(--color-background); */
+                /* background: var(--color-background); */
                 /* border: 1px dashed var(--color-border); */
                 user-select: none;
             }
@@ -83,7 +90,7 @@ export class CanvasControlsPlugin extends CanvasPlugin {
                 display: none;
             }
             #panBtn {
-                display: none;
+                
             }    
         `;
         document.head.appendChild(styleSheet);
@@ -91,32 +98,51 @@ export class CanvasControlsPlugin extends CanvasPlugin {
         const temp = document.createElement('div');
         temp.innerHTML = `
             <div class="cc-container">
-                <button id="zoomInBtn" class="cc-button">
+                <button id="zoomInBtn" class="cc-button" title="Zoom In">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7" />
                     </svg>
                 </button>
 
-                <button id="zoomOutBtn" class="cc-button">
+                <button id="zoomOutBtn" class="cc-button" title="Zoom Out">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" />
                     </svg>
                 </button>
 
-                <div class="cc-divider" ></div>
+                <div class="cc-divider"></div>
 
-                <button id="resetZoomBtn" class="cc-button">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                <button id="resetZoomBtn" class="cc-button" title="Reset Zoom">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                        <path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z" fill="currentColor"/>
                     </svg>
                 </button>
 
-                <div class="cc-divider"></div>
 
-                <button id="panBtn" class="cc-button">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11" />
+                <button id="panBtn" class="cc-button" title="Pan">
+                    <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+                    width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+                    preserveAspectRatio="xMidYMid meet">
+
+                    <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+                    fill="currentColor" stroke="none">
+                    <path d="M2826 4936 c-54 -20 -106 -65 -141 -121 l-30 -48 -5 -1165 -5 -1164
+                    -28 -24 c-36 -31 -78 -31 -114 0 l-28 24 -5 1044 -5 1043 -23 37 c-102 163
+                    -321 171 -428 16 -18 -26 -37 -70 -43 -98 -8 -35 -11 -490 -11 -1481 0 -1558
+                    4 -1454 -57 -1511 -43 -40 -102 -54 -155 -36 -24 8 -207 128 -408 267 -201
+                    139 -383 262 -405 274 -63 32 -155 29 -224 -8 -58 -32 -120 -104 -140 -164
+                    -24 -74 -10 -167 36 -229 14 -18 333 -311 709 -652 474 -429 707 -633 754
+                    -661 38 -22 111 -55 162 -72 l93 -32 700 0 700 0 85 23 c362 99 627 381 696
+                    740 12 62 14 308 14 1476 l0 1402 -26 52 c-94 189 -355 187 -457 -3 -22 -40
+                    -22 -46 -27 -730 -3 -379 -9 -697 -13 -706 -9 -17 -49 -39 -72 -39 -27 0 -63
+                    22 -74 47 -8 17 -11 314 -11 1032 0 877 -2 1013 -15 1052 -35 102 -130 169
+                    -239 169 -107 0 -192 -56 -237 -155 -18 -38 -19 -95 -19 -1063 l0 -1024 -29
+                    -29 c-38 -37 -82 -39 -116 -4 l-25 24 0 1139 c0 1262 3 1200 -66 1280 -20 24
+                    -54 52 -77 63 -52 27 -140 34 -191 15z"/>
+                    </g>
                     </svg>
+
+
                 </button>
             </div>
         `;
@@ -134,8 +160,10 @@ export class CanvasControlsPlugin extends CanvasPlugin {
             console.warn('Element with id "pluginUIContainer" not found.');
         }
 
-        this.updatePanButtonState = (isPanning) => {
-            this.panBtn.dataset.active = isPanning;
+        this.panBtn.dataset.active = this.isPanMode;
+
+        this.updatePanButtonState = () => {
+            this.panBtn.dataset.active = this.isPanMode || this.isAltPan;
         };
     }
 
@@ -143,6 +171,9 @@ export class CanvasControlsPlugin extends CanvasPlugin {
         this.zoomInBtn.addEventListener('click', this.zoomIn);
         this.zoomOutBtn.addEventListener('click', this.zoomOut);
         this.resetZoomBtn.addEventListener('click', this.resetZoom);
+        this.panBtn.addEventListener('click', this.togglePanMode);
+
+
 
         this.canvas.on('mouse:down', this.onMouseDown);
         this.canvas.on('mouse:move', this.onMouseMove);
@@ -150,12 +181,19 @@ export class CanvasControlsPlugin extends CanvasPlugin {
         this.canvas.on('mouse:out', this.onMouseUp);
 
         this.canvas.on('after:render', this.onAfterRender);
+
+        this.canvasManager.on('mask:activated', this.onMaskActivated);
+        this.canvasManager.on('mask:deactivated', this.onMaskDeactivated);
+
+        document.addEventListener('keydown', this.onKeyDown);
+        document.addEventListener('keyup', this.onKeyUp);
     }
 
     detachEventListeners() {
         this.zoomInBtn.removeEventListener('click', this.zoomIn);
         this.zoomOutBtn.removeEventListener('click', this.zoomOut);
         this.resetZoomBtn.removeEventListener('click', this.resetZoom);
+        this.panBtn.removeEventListener('click', this.togglePanMode); 
 
         this.canvas.off('mouse:down', this.onMouseDown);
         this.canvas.off('mouse:move', this.onMouseMove);
@@ -163,6 +201,12 @@ export class CanvasControlsPlugin extends CanvasPlugin {
         this.canvas.off('mouse:out', this.onMouseUp);
 
         this.canvas.off('after:render', this.onAfterRender);
+
+        this.canvasManager.off('mask:activated', this.onMaskActivated);
+        this.canvasManager.off('mask:deactivated', this.onMaskDeactivated);
+
+        document.removeEventListener('keydown', this.onKeyDown);
+        document.removeEventListener('keyup', this.onKeyUp);
     }
 
     arraysEqual(a, b) {
@@ -173,6 +217,14 @@ export class CanvasControlsPlugin extends CanvasPlugin {
         return true;
     }
 
+    onMaskActivated() {
+        this.isPanMode = false;
+        this.updatePanButtonState();
+    }
+
+    onMaskDeactivated() {
+    }
+
     onAfterRender() {
         const currentTransform = this.canvas.viewportTransform;
         if (!this.arraysEqual(currentTransform, this.lastTransform)) {
@@ -193,6 +245,7 @@ export class CanvasControlsPlugin extends CanvasPlugin {
     zoomOut() {
         let zoom = this.canvas.getZoom();
         zoom /= 1.1;
+        if (zoom < 0.1) zoom = 0.1;
         this.canvas.zoomToPoint({ x: this.canvas.width / 2, y: this.canvas.height / 2 }, zoom);
     }
 
@@ -200,13 +253,46 @@ export class CanvasControlsPlugin extends CanvasPlugin {
         this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
     }
 
+    togglePanMode() {
+        this.isPanMode = !this.isPanMode;
+        this.updatePanButtonState();
+
+        if (this.isPanMode) {
+            this.canvas.setCursor('grab');
+            this.canvasManager.emit('pan:activated');
+        } else {
+            this.canvas.setCursor('default');
+            this.canvasManager.emit('pan:deactivated');
+        }
+    }
+
+    onKeyDown(e) {
+        if (e.altKey && !this.isAltPan) {
+            this.isAltPan = true;
+            this.updatePanButtonState();
+            this.canvas.setCursor('grab');
+            this.canvasManager.emit('pan:activated');
+        }
+    }
+
+    onKeyUp(e) {
+        if (!e.altKey && this.isAltPan) {
+            this.isAltPan = false;
+            this.updatePanButtonState();
+            this.canvas.setCursor(this.isPanMode ? 'grab' : 'default');
+            this.canvasManager.emit('pan:deactivated');
+        }
+    }
+
     onMouseDown(opt) {
-        const evt = opt.e;
-        if (evt.altKey) {
+        if (this.isPanMode || this.isAltPan) { 
             this.isPanning = true;
+            const evt = opt.e;
             this.lastPosX = evt.clientX;
             this.lastPosY = evt.clientY;
-            this.canvas.setCursor('move');
+            this.canvas.setCursor('grabbing');
+            evt.preventDefault();
+            evt.stopPropagation();
         }
     }
 
@@ -226,8 +312,10 @@ export class CanvasControlsPlugin extends CanvasPlugin {
     }
 
     onMouseUp(opt) {
-        this.isPanning = false;
-        this.canvas.setCursor('default');
+        if (this.isPanning) {
+            this.isPanning = false;
+            this.canvas.setCursor(this.isPanMode || this.isAltPan ? 'grab' : 'default');
+        }
     }
 
     destroy() {
@@ -237,4 +325,4 @@ export class CanvasControlsPlugin extends CanvasPlugin {
 
         this.detachEventListeners();
     }
-}
\ No newline at end of file
+}
diff --git a/web/core/js/common/components/canvas/CanvasLoader.js b/web/core/js/common/components/canvas/CanvasLoader.js
index 99ca1b6..160113b 100644
--- a/web/core/js/common/components/canvas/CanvasLoader.js
+++ b/web/core/js/common/components/canvas/CanvasLoader.js
@@ -7,235 +7,67 @@ import { CustomBrushPlugin } from './CustomBrushPlugin.js';
 import { UndoRedoPlugin } from './UndoRedoPlugin.js';
 import { ImageAdderPlugin } from './ImageAdderPlugin.js';
 import { CanvasScaleForSavePlugin } from './CanvasScaleForSavePlugin.js';
+import { store } from '../../scripts/stateManagerMain.js';
 
-const loadFabric = () => {
+const loadScript = (src, name = '') => {
     return new Promise((resolve, reject) => {
         const script = document.createElement('script');
-        script.src = '/core/js/common/components/canvas/fabric.5.2.4.min.js';
+        script.src = src;
         script.async = false;
         script.onload = () => {
-            console.log('Fabric.js loaded successfully');
+            // console.log(`${name || src} loaded successfully`);
             resolve();
         };
         script.onerror = () => {
-            console.error('Failed to load Fabric.js');
-            reject(new Error('Fabric.js failed to load'));
+            const error = `Failed to load ${name || src}`;
+            console.error(error);
+            reject(new Error(error));
         };
         document.head.appendChild(script);
     });
 };
 
-// Floating toolbar functionality - move
-const styleSheet = document.createElement('style');
-styleSheet.textContent = `
-    .plugin-ui-container {
-        position: relative;
-        display: flex;
-        gap: 0.5rem;
-        padding: 0.5rem;
-        padding-right: calc(0.5rem + 36px);
-        transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
-        will-change: transform;
-    }
-
-    .plugin-ui-container.floating {
-        position: fixed;
-        bottom: 25%;
-       /* left: 16%px; */
-        z-index: 1000;
-        background: var(--color-background);
-        border: 1px dashed var(--color-border);
-        cursor: move;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-
-    .dock-toggle {
-        position: absolute;
-        right: 0;
-        top: 0;
-        height: 100%;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0.5rem;
-        background: var(--color-button-primary);
-        border: none;
-        border-left: 1px dashed var(--color-border);
-        cursor: pointer;
-        transition: all 0.2s;
-        color: var(--color-primary-text);
-        width: 36px;
-    }
-
-    .plugin-ui-container.floating .dock-toggle {
-        position: relative;
-        height: 36px;
-        margin-left: 0.5rem;
-        border: none;
-    }
-
-    .dock-toggle:hover {
-        background: var(--color-button-primary-hover);
-    }
-
-    .dock-toggle svg {
-        width: 1.25rem;
-        height: 1.25rem;
-        transition: transform 0.2s ease;
-    }
-
-    .dock-toggle:hover svg {
-        transform: scale(1.1);
-    }
-
-    .plugin-ui-container.floating .dock-toggle:hover svg {
-        transform: scale(1.1);
-    }
-`;
-document.head.appendChild(styleSheet);
-
-function initializeFloating() {
-    const container = document.getElementById('pluginUIContainer');
-    const dockButton = document.createElement('button');
-    dockButton.className = 'dock-toggle';
-    dockButton.title = 'Make toolbar floating';
-    dockButton.innerHTML = `
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 
-                  d="M15 9l-3-3m0 0L9 9m3-3v15m0-15h6m-6 0H6"/>
-        </svg>
-    `;
-    container.appendChild(dockButton);
-
-    let isDragging = false;
-    let currentX;
-    let currentY;
-    let initialX;
-    let initialY;
-    let xOffset = 0;
-    let yOffset = 0;
-    let originalPosition = null;
-    let lastFrameTime = 0;
-    const frameRate = 1000 / 120;
-
-    function updateDockIcon(isFloating) {
-        dockButton.title = isFloating ? 'Dock toolbar' : 'Make toolbar floating';
-        dockButton.innerHTML = isFloating 
-            ? `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 
-                         d="M9 15l3 3m0 0l3-3m-3 3V6m0 12h6m-6 0H6"/>
-               </svg>`
-            : `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 
-                         d="M15 9l-3-3m0 0L9 9m3-3v15m0-15h6m-6 0H6"/>
-               </svg>`;
-    }
-
-    function updateDockButtonPosition(isFloating) {
-        if (isFloating) {
-            container.appendChild(dockButton);
-        } else {
-            container.insertBefore(dockButton, container.firstChild);
-        }
-    }
-
-    function startDragging(e) {
-        if (container.classList.contains('floating') && e.target !== dockButton) {
-            isDragging = true;
-            initialX = e.clientX - xOffset;
-            initialY = e.clientY - yOffset;
-            container.style.transition = 'none';
-            document.body.style.cursor = 'move';
-        }
+const loadDependencies = async () => {
+    try {
+        await Promise.all([
+            loadScript('/core/js/common/components/canvas/fabric.5.2.4.min.js', 'Fabric.js'),
+            // loadScript('/core/js/common/components/canvas/pica.min.js', 'Pica.js')
+        ]);
+        // console.log('All dependencies loaded successfully');
+    } catch (error) {
+        console.error('Failed to load dependencies:', error);
     }
+};
 
-    function drag(e) {
-        if (isDragging) {
-            e.preventDefault();
-            
-            const currentTime = performance.now();
-            if (currentTime - lastFrameTime < frameRate) return;
-            
-            currentX = e.clientX - initialX;
-            currentY = e.clientY - initialY;
-            xOffset = currentX;
-            yOffset = currentY;
-            container.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`;
-            
-            lastFrameTime = currentTime;
-        }
-    }
+function setView(view) {
+    const canvasWrapper = document.getElementById("canvasWrapper");
+    const imageContainer = document.getElementById("image-container");
 
-    function stopDragging() {
-        if (isDragging) {
-            isDragging = false;
-            container.style.transition = '';
-            document.body.style.cursor = '';
-        }
+    if (!canvasWrapper || !imageContainer) {
+        console.warn("Required elements not found: 'canvasWrapper' or 'image-container'.");
+        return;
     }
 
-    function toggleFloating() {
-        const isFloating = container.classList.toggle('floating');
-        updateDockIcon(isFloating);
-        updateDockButtonPosition(isFloating);
-
-        if (isFloating) {
-            originalPosition = {
-                parent: container.parentNode,
-                nextSibling: container.nextSibling,
-                styles: {
-                    position: container.style.position,
-                    top: container.style.top,
-                    left: container.style.left,
-                    transform: container.style.transform,
-                    zIndex: container.style.zIndex
-                }
-            };
-            
-            container.addEventListener('mousedown', startDragging);
-            window.addEventListener('mousemove', drag);
-            window.addEventListener('mouseup', stopDragging);
-            window.addEventListener('mouseleave', stopDragging);
-            
-            container.style.transform = `translate3d(${xOffset}px, ${yOffset}px, 0)`;
-        } else {
-            container.removeEventListener('mousedown', startDragging);
-            window.removeEventListener('mousemove', drag);
-            window.removeEventListener('mouseup', stopDragging);
-            window.removeEventListener('mouseleave', stopDragging);
-            
-            container.style.transform = '';
-            container.style.position = '';
-            container.style.top = '';
-            container.style.left = '';
-            container.style.zIndex = '';
-            xOffset = 0;
-            yOffset = 0;
-        }
+    switch(view) {
+        case 'output':
+            imageContainer.style.display = "flex"; 
+            canvasWrapper.style.display = "none"; 
+            break;
+        case 'canvas':
+            canvasWrapper.style.display = "flex"; 
+            imageContainer.style.display = "none";
+            break;
+        case 'splitView':
+            canvasWrapper.style.display = "flex";
+            imageContainer.style.display = "flex";
+            break;
+        default:
+            console.warn(`Unknown view state: ${view}. Defaulting to 'splitView'.`);
+            canvasWrapper.style.display = "flex";
+            imageContainer.style.display = "flex";
     }
-
-    dockButton.addEventListener('click', toggleFloating);
-
-    container.addEventListener('selectstart', (e) => {
-        if (isDragging) e.preventDefault();
-    });
-
-    return function cleanup() {
-        container.removeEventListener('mousedown', startDragging);
-        window.removeEventListener('mousemove', drag);
-        window.removeEventListener('mouseup', stopDragging);
-        window.removeEventListener('mouseleave', stopDragging);
-        dockButton.removeEventListener('click', toggleFloating);
-        container.removeEventListener('selectstart', (e) => {
-            if (isDragging) e.preventDefault();
-        });
-        if (dockButton.parentNode) {
-            dockButton.parentNode.removeChild(dockButton);
-        }
-    };
 }
-const cleanupFloating = initializeFloating();
-// Floating toolbar functionality
+
 
 export class CanvasLoader {
     constructor(canvasId, flowConfig) {
@@ -243,6 +75,12 @@ export class CanvasLoader {
         this.flowConfig = flowConfig;
         this.isInitialized = false;
         this.initPromise = this.init();
+
+        store.subscribe((state) => {
+            setView(state.view);
+        });
+
+        setView(this.flowConfig.initialView || store.getState().view);
     }
 
     determineCanvasOptions(flowConfig) {
@@ -259,9 +97,17 @@ export class CanvasLoader {
 
         // **Case 1**: Load maskBrush if canvasLoadedImages and canvasSelectedMaskOutputs are present
         if (flowConfig.canvasLoadedImages && Array.isArray(flowConfig.canvasLoadedImages) && flowConfig.canvasLoadedImages.length > 0 &&
-            flowConfig.canvasSelectedMaskOutputs && Array.isArray(flowConfig.canvasSelectedMaskOutputs) && flowConfig.canvasSelectedMaskOutputs.length > 0) {
+            flowConfig.canvasAlphaOutputs && Array.isArray(flowConfig.canvasAlphaOutputs) && flowConfig.canvasAlphaOutputs.length > 0) {
             options.maskBrush = true;
             options.imageLoader = true;
+            store.dispatch({
+                type: 'SET_VIEW',
+                payload: 'canvas'
+            });
+            store.dispatch({
+                type: 'SET_INPAINT_STYLE',
+                payload: 'full'
+            });
         }
 
         // **Case 2**: Load customBrush if canvasOutputs are present
@@ -269,10 +115,54 @@ export class CanvasLoader {
             options.customBrush = true;
             options.imageLoader = true;
             options.canvasScaleForSave = true;
-
-
+            store.dispatch({
+                type: 'SET_VIEW',
+                payload: 'splitView'
+            });
+        }
+        // // **Case 3**: Load canvasCroppedImageOutputs if canvasCroppedMaskOutputs are present
+        // if (flowConfig.canvasCroppedMaskOutputs && Array.isArray(flowConfig.canvasCroppedMaskOutputs) && flowConfig.canvasCroppedMaskOutputs.length > 0) {
+        //     options.maskBrush = true;
+        //     options.imageLoader = true;
+        //     store.dispatch({
+        //         type: 'SET_VIEW',
+        //         payload: 'canvas'
+        //     });
+        // }
+
+        //MASK
+        // **Case 4**: Load canvasCroppedImageOutputs and canvasCroppedMaskOutputs and canvasLoadedImages are present
+        if (flowConfig.canvasCroppedImageOutputs && Array.isArray(flowConfig.canvasCroppedImageOutputs) && flowConfig.canvasCroppedImageOutputs.length > 0 &&
+            flowConfig.canvasCroppedMaskOutputs && Array.isArray(flowConfig.canvasCroppedMaskOutputs) && flowConfig.canvasCroppedMaskOutputs.length > 0 &&
+            flowConfig.canvasLoadedImages && Array.isArray(flowConfig.canvasLoadedImages) && flowConfig.canvasLoadedImages.length > 0) {
+                options.maskBrush = true;
+                options.imageLoader = true;
+                store.dispatch({
+                    type: 'SET_VIEW',
+                    payload: 'canvas'
+                });
+                store.dispatch({
+                    type: 'SET_INPAINT_STYLE',
+                    payload: 'cropped'
+                });
+                
+        }
+        //ALPHA MASK
+        // **Case 5**: Load canvasCroppedImageOutputs and canvasCroppedAlphaOnImageOutputs and canvasLoadedImages are present
+        if (flowConfig.canvasCroppedImageOutputs && Array.isArray(flowConfig.canvasCroppedImageOutputs) && flowConfig.canvasCroppedImageOutputs.length > 0 &&
+            flowConfig.canvasCroppedAlphaOnImageOutputs && Array.isArray(flowConfig.canvasCroppedAlphaOnImageOutputs) && flowConfig.canvasCroppedAlphaOnImageOutputs.length > 0 &&
+            flowConfig.canvasLoadedImages && Array.isArray(flowConfig.canvasLoadedImages) && flowConfig.canvasLoadedImages.length > 0) {
+                options.maskBrush = true;
+                options.imageLoader = true;
+                store.dispatch({
+                    type: 'SET_VIEW',
+                    payload: 'canvas'
+                });
+                store.dispatch({
+                    type: 'SET_INPAINT_STYLE',
+                    payload: 'cropped'
+                });
         }
-
         return options;
     }
 
@@ -282,13 +172,14 @@ export class CanvasLoader {
 
 
             if (!this.options.maskBrush && !this.options.customBrush) {
-                console.warn("No relevant fields in flowConfig. Canvas will not be displayed or initialized.");
+                console.log("No relevant fields in flowConfig. Canvas will not be displayed or initialized.");
                 this.hideCanvasUI();
                 return;
             }
 
-            await loadFabric();
-
+            // await loadFabric();
+            // loadScript('/core/js/common/components/canvas/fabric.5.2.4.min.js')
+            await loadDependencies();
             const canvasWrapper = document.getElementById('canvasWrapper');
             const pluginUIContainer = document.getElementById('pluginUIContainer');
 
@@ -297,7 +188,7 @@ export class CanvasLoader {
             }
 
             canvasWrapper.style.display = 'block';
-            pluginUIContainer.style.display = 'block';
+            pluginUIContainer.style.display = 'flex';
 
             this.canvasManager = new CanvasManager({ canvasId: this.canvasId });
 
@@ -437,6 +328,48 @@ export class CanvasLoader {
         return null;
     }
 
+    getCroppedMask(){
+        const maskBrushPlugin = this.canvasManager.getPluginByName('MaskBrushPlugin');
+        if (maskBrushPlugin) {
+            const exportFunction = maskBrushPlugin.getExportFunction('saveCroppedMask');
+            if (exportFunction) {
+                return exportFunction();
+            } else {
+                console.error('Failed to get export function for saveCroppedMask.');
+                return null;
+            }
+        }
+        return null;
+    }
+
+    getCroppedImage(){
+        const maskBrushPlugin = this.canvasManager.getPluginByName('MaskBrushPlugin');
+        if (maskBrushPlugin) {
+            const exportFunction = maskBrushPlugin.getExportFunction('saveCroppedImage');
+            if (exportFunction) {
+                return exportFunction();
+            } else {
+                console.error('Failed to get export function for saveCroppedImage.');
+                return null;
+            }
+        }
+        return null;
+    }
+
+    getCroppedAlphaOnImage(){
+        const maskBrushPlugin = this.canvasManager.getPluginByName('MaskBrushPlugin');
+        if (maskBrushPlugin) {
+            const exportFunction = maskBrushPlugin.getExportFunction('saveCroppedAlphaOnImage');
+            if (exportFunction) {
+                return exportFunction();
+            } else {
+                console.error('Failed to get export function for saveCroppedAlphaOnImage.');
+                return null;
+            }
+        }
+        return null;
+    }
+
     getSelectedMaskAlphaOnImage() {
         const maskBrushPlugin = this.canvasManager.getPluginByName('MaskBrushPlugin');
         if (maskBrushPlugin) {
diff --git a/web/core/js/common/components/canvas/CustomBrushPlugin.js b/web/core/js/common/components/canvas/CustomBrushPlugin.js
index d7f8681..805628e 100644
--- a/web/core/js/common/components/canvas/CustomBrushPlugin.js
+++ b/web/core/js/common/components/canvas/CustomBrushPlugin.js
@@ -1,4 +1,5 @@
 import { CanvasPlugin } from './CanvasPlugin.js';
+import { store } from  '../../scripts/stateManagerMain.js';
 
 export class CustomBrushPlugin extends CanvasPlugin {
     constructor(options = {}) {
@@ -74,6 +75,7 @@ export class CustomBrushPlugin extends CanvasPlugin {
         this.onMinimize = this.onMinimize.bind(this);
         this.onModeChange = this.onModeChange.bind(this);
         this.brushStrokeIdCounter = 0;
+        this.disableDrawingMode = this.disableDrawingMode.bind(this);
     }
 
     init(canvasManager) {
@@ -165,8 +167,8 @@ export class CustomBrushPlugin extends CanvasPlugin {
                         <img id="cbp-toggle-btn-icon" src=${this.brushIcon}  alt="Toggle Drawing Mode" width="24" height="24">
                     </button>
                     <input type="color" id="cbp-color-picker" value="${this.brushColor}">
-
                 </div>
+                <button id="disableDrawingModeBtn" class="mbp-button" style="width: 100%;  display: none;" title="Disable Drawing Mode">
             </div>
         `;
 
@@ -179,17 +181,22 @@ export class CustomBrushPlugin extends CanvasPlugin {
         this.toggleBtnIcon = this.uiContainer.querySelector('#cbp-toggle-btn-icon');
         this.minimizeBtn = this.uiContainer.querySelector('.cbp-brush-ui-minimize-btn');
         this.uiHeader = this.uiContainer.querySelector('.cbp-brush-ui-header');
+        this.disableDrawingModeBtn = this.uiContainer.querySelector('#disableDrawingModeBtn');
 
         this.uiHeader.addEventListener('mousedown', this.onHeaderMouseDown);
         this.minimizeBtn.addEventListener('click', this.onMinimize);
         this.toggleDrawBtn.addEventListener('click', this.onToggleDrawingMode);
+        // this.disableDrawingModeBtn.addEventListener('click', this.disableDrawingMode.bind(this));
     }
 
     attachEventListeners() {
         this.brushSizeInput.addEventListener('input', this.onBrushSizeChange);
         this.brushOpacityInput.addEventListener('input', this.onBrushOpacityChange);
         this.colorPicker.addEventListener('input', this.onColorChange);
+        this.disableDrawingModeBtn.addEventListener('click', this.disableDrawingMode);
+
         window.addEventListener('keydown', this.onKeyDown);
+
     }
 
     detachEventListeners() {
@@ -263,7 +270,8 @@ export class CustomBrushPlugin extends CanvasPlugin {
 
     onToggleDrawingMode() {
         this.drawingMode = !this.drawingMode;
-    
+
+        console.log('Drawing mode:', this.drawingMode);
         const toggleButton = document.getElementById('cbp-toggle-drawing-mode-btn');
         if (this.drawingMode) {
             toggleButton.classList.add('active');
@@ -326,6 +334,51 @@ export class CustomBrushPlugin extends CanvasPlugin {
         }
     }
 
+    disableDrawingMode() {
+        if (this.drawingMode) {
+            this.drawingMode = false;
+            console.log('Drawing mode disabled');
+            
+            this.toggleDrawBtn.classList.remove('active');
+            this.toggleBtnIcon.src = this.brushIcon;
+    
+            this.canvas.defaultCursor = this.originalCanvasProperties.defaultCursor || 'default';
+    
+            this.canvas.lowerCanvasEl.classList.remove(this.hiddenCursorClass);
+            this.canvas.upperCanvasEl.classList.remove(this.hiddenCursorClass);
+    
+            this.disableSelectionBox();
+    
+            this.canvas.getObjects().forEach(obj => {
+                if (this.drawnObjects.has(obj)) {
+                    obj.selectable = false;
+                    obj.evented = false;
+                    obj.hasControls = false;
+                    obj.hasBorders = false;
+                    obj.lockMovementX = true;
+                    obj.lockMovementY = true;
+                }
+            });
+    
+            this.detachDrawingEvents();
+    
+            if (this.cursorCircle) {
+                this.canvas.remove(this.cursorCircle);
+                this.cursorCircle = null;
+            }
+            if (this.secondaryCircle) {
+                this.canvas.remove(this.secondaryCircle);
+                this.secondaryCircle = null;
+            }
+    
+            this.brushSizeInput.disabled = true;
+            this.brushOpacityInput.disabled = true;
+            this.colorPicker.disabled = true;
+    
+            this.setNonDrawnObjectsSelectable(true);
+        }
+    }
+    
     enforceObjectProperties(obj) {
         if (obj === this.cursorCircle || obj === this.secondaryCircle) return;
 
@@ -803,10 +856,8 @@ export class CustomBrushPlugin extends CanvasPlugin {
 
         this.canvas.off('object:added', this.onObjectAdded);
 
-        // Remove viewport:changed listener
         this.canvasManager.off('viewport:changed', this.onViewportChanged);
 
-        // Restore original canvas properties
         if (this.originalCanvasProperties) {
             this.canvas.selection = this.originalCanvasProperties.selection;
             this.canvas.selectionColor = this.originalCanvasProperties.selectionColor;
@@ -817,7 +868,6 @@ export class CustomBrushPlugin extends CanvasPlugin {
             this.canvas.defaultCursor = this.originalCanvasProperties.defaultCursor;
             this.canvas.freeDrawingCursor = this.originalCanvasProperties.freeDrawingCursor;
         }
-
         super.destroy();
     }
 }
diff --git a/web/core/js/common/components/canvas/ImageLoaderPlugin.js b/web/core/js/common/components/canvas/ImageLoaderPlugin.js
index 5d40df6..28668d8 100644
--- a/web/core/js/common/components/canvas/ImageLoaderPlugin.js
+++ b/web/core/js/common/components/canvas/ImageLoaderPlugin.js
@@ -29,6 +29,8 @@ export class ImageLoaderPlugin extends CanvasPlugin {
         this.onImageRemove = this.onImageRemove.bind(this);
         this.onLoadButtonClick = this.onLoadButtonClick.bind(this);
         this.onFileInputChange = this.onFileInputChange.bind(this);
+
+        this.handlePreviewImageLoaded = this.handlePreviewImageLoaded.bind(this);
     }
 
     init(canvasManager) {
@@ -41,7 +43,11 @@ export class ImageLoaderPlugin extends CanvasPlugin {
 
         this.canvasManager.on('canvas:resized', this.onCanvasResized);
 
-        this.canvasManager.on('image:remove', this.onImageRemove);
+        this.canvasManager.on('image:remove', this.onImageRemove); 
+        
+        window.addEventListener('previewImageLoaded', this.handlePreviewImageLoaded);
+
+
     }
 
     createUI() {
@@ -152,7 +158,6 @@ export class ImageLoaderPlugin extends CanvasPlugin {
     }
 
     onToggleMode() {
-        // Toggle between 'Single' and 'Multi' modes
         this.options.mode = this.options.mode === 'Single' ? 'Multi' : 'Single';
         this.toggleButton.setAttribute('data-mode', this.options.mode);
         this.toggleButton.innerHTML = `
@@ -211,7 +216,6 @@ export class ImageLoaderPlugin extends CanvasPlugin {
     }
 
     onCanvasResized({ width, height }) {
-        // Recalculate and apply scale to all images based on original dimensions
         this.loadedImages.forEach(({ imageObject, borderRect }) => {
             const img = imageObject;
             const border = borderRect;
@@ -230,7 +234,6 @@ export class ImageLoaderPlugin extends CanvasPlugin {
                 scaleFactor = desiredHeight / img.height;
             }
 
-            // Apply uniform scale to maintain aspect ratio
             img.set({
                 scaleX: scaleFactor,
                 scaleY: scaleFactor,
@@ -434,7 +437,7 @@ export class ImageLoaderPlugin extends CanvasPlugin {
 
             delete this.originalImages[id];
 
-            console.log(`ImageLoaderPlugin: Removed image with ID=${id}`);
+            // console.log(`ImageLoaderPlugin: Removed image with ID=${id}`);
             this.canvasManager.emit('image:removed', { id });
 
             this.canvasManager.emit('image:list:updated', {
@@ -449,7 +452,7 @@ export class ImageLoaderPlugin extends CanvasPlugin {
 
             if (this.options.mode === 'Single' && this.loadedImages.length === 0) {
                 this.canvas.clear();
-                console.log('ImageLoaderPlugin: Canvas cleared in Single mode');
+                // console.log('ImageLoaderPlugin: Canvas cleared in Single mode');
             }
 
             this.canvas.requestRenderAll();
@@ -459,10 +462,32 @@ export class ImageLoaderPlugin extends CanvasPlugin {
     }
 
     onImageRemove({ id }) {
-        console.log(`ImageLoaderPlugin: Received request to remove image ID=${id}`);
+        // console.log(`ImageLoaderPlugin: Received request to remove image ID=${id}`);
         this.removeImageById(id);
     }
 
+    handlePreviewImageLoaded(event) {
+        const combinedDataURL = event.detail;
+        if (combinedDataURL) {
+            this.loadImageFromDataURL(combinedDataURL);
+            // console.log('ImageLoaderPlugin: Received and loading preview image.');
+        } else {
+            console.error('ImageLoaderPlugin: No image data received in previewImageLoaded event.');
+        }
+    }
+
+    loadImageFromDataURL(dataURL) {
+        fetch(dataURL)
+            .then(response => response.blob())
+            .then(blob => {
+                const file = new File([blob], 'preview.png', { type: 'image/png' });
+                this.handleImageFile(file);
+            })
+            .catch(error => {
+                console.error('ImageLoaderPlugin: Failed to convert Data URL to File.', error);
+            });
+    }
+
     destroy() {
         if (this.uiContainer && this.uiContainer.parentNode) {
             this.uiContainer.parentNode.removeChild(this.uiContainer);
@@ -475,5 +500,6 @@ export class ImageLoaderPlugin extends CanvasPlugin {
         this.loadedImages = [];
         this.originalImages = {};
         this.canvas.requestRenderAll();
+        window.removeEventListener('previewImageLoaded', this.handlePreviewImageLoaded);
     }
 }
diff --git a/web/core/js/common/components/canvas/MaskBrushPlugin.js b/web/core/js/common/components/canvas/MaskBrushPlugin.js
index 14490e3..dacec35 100644
--- a/web/core/js/common/components/canvas/MaskBrushPlugin.js
+++ b/web/core/js/common/components/canvas/MaskBrushPlugin.js
@@ -1,4 +1,8 @@
+
+// MaskBrushPlugin.js
 import { CustomBrushPlugin } from './CustomBrushPlugin.js';
+import { MaskExportUtilities } from './MaskExportUtilities.js';
+import { store } from  '../../scripts/stateManagerMain.js';
 
 export class MaskBrushPlugin extends CustomBrushPlugin {
     constructor(options = {}) {
@@ -6,9 +10,11 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
 
         this.masks = [];
         this.currentMask = null;
-        this.maskStrokeHistory = {}; // { maskName: { undoStack: [], redoStack: [] } }
+        this.maskStrokeHistory = {};
         this.brushIcon = '/core/media/ui/double-face-mask.png';
-
+        this.isSubscribed = false;
+        this.resizeObserver = null;
+        this.clearMasksOnImageLoaded = options.clearMasksOnImageLoaded !== undefined ? options.clearMasksOnImageLoaded : true;
         this.onAddMask = this.onAddMask.bind(this);
         this.onChangeMask = this.onChangeMask.bind(this);
         this.onChangeMaskColor = this.onChangeMaskColor.bind(this);
@@ -23,11 +29,23 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
         this.onWindowResize = this.onWindowResize.bind(this);
         this.onUndoMaskStroke = this.onUndoMaskStroke.bind(this);
         this.onRedoMaskStroke = this.onRedoMaskStroke.bind(this);
+        this.onImageModified = this.onImageModified.bind(this);
+        this.onClearMask = this.onClearMask.bind(this);
+        this.onClearAllMasks = this.onClearAllMasks.bind(this);
+        this.onToggleHideMask = this.onToggleHideMask.bind(this);
+        this.onToggleHideAllMasks = this.onToggleHideAllMasks.bind(this);
+        this.handleStateChange = this.handleStateChange.bind(this);
+        // this.enableDrawingMode = this.enableDrawingMode.bind(this);
+        this.disableDrawingMode = this.disableDrawingMode.bind(this);
+        this.onPanActivated = this.onPanActivated.bind(this);
+        this.onPanDeactivated = this.onPanDeactivated.bind(this);
+
+        this.maskExportUtilities = new MaskExportUtilities(this);
     }
 
     init(canvasManager) {
         super.init(canvasManager);
-        
+
         if (this.brushOpacityInput && this.brushOpacityInput.parentElement) {
             this.brushOpacityInput.parentElement.style.display = 'none';
         }
@@ -36,41 +54,55 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
 
         this.attachAdditionalEventListeners();
 
+        window.addEventListener('resize', this.onWindowResize);
+        
         this.canvasManager.on('image:loaded', this.onImageLoaded);
         this.canvasManager.on('canvas:state:changed', this.onCanvasStateChanged);
         this.canvasManager.on('undo:mask:stroke', this.onUndoMaskStroke);
         this.canvasManager.on('redo:mask:stroke', this.onRedoMaskStroke);
+        this.canvasManager.on('save:trigger', this.onHandleSaveFromCanvas);
+        // this.onToggleDrawingMode();
+        this.canvasManager.on('pan:activated', this.onPanActivated);
+        this.canvasManager.on('pan:deactivated', this.onPanDeactivated);
+        this.setupResizeObserver();
+    }
 
-        window.addEventListener('resize', this.onWindowResize);
+    setupResizeObserver() {
+        const canvasContainer = this.canvas.getElement().parentElement;
+        if (!canvasContainer) {
+            console.error('Canvas container element not found.');
+            return;
+        }
 
-        this.canvasManager.on('save:trigger', this.onHandleSaveFromCanvas);
+        this.resizeObserver = new ResizeObserver(entries => {
+            for (let entry of entries) {
+                if (entry.target === canvasContainer) {
+                    this.onImageModified();
+                }
+            }
+        });
+
+        this.resizeObserver.observe(canvasContainer);
     }
 
     extendUI() {
-        const styleSheet = document.createElement('style');
-        styleSheet.textContent = `
-        
-        `;
-        document.head.appendChild(styleSheet);
-
         const temp = document.createElement('div');
         temp.innerHTML = `
             <div class="mbp-container">
-                    <div class="mbp-toggle-wrapper">
+                <div class="mbp-toggle-wrapper" style="display: none;">
                     <label for="applyColorToMaskCheckbox" class="mbp-label">Mask Color Fill</label>
                     <label class="mbp-toggle" for="applyColorToMaskCheckbox">
                         <input type="checkbox" id="applyColorToMaskCheckbox">
                         <span class="mbp-toggle-slider"></span>
                     </label>
-                    </div>     
-                <div class="mbp-header">
+                </div>
+                <div class="mbp-header" style="display: none;">
                     <select id="maskList" class="mbp-select">
                         <option value="" disabled selected>Select a mask</option>
                     </select>
                 </div>
-                
 
-                <div class="mbp-button-group">
+                <div class="mbp-button-group" style="display: none;">
                     <button id="addMaskBtn" class="mbp-button" title="Add New Mask">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
@@ -82,8 +114,8 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
                         </svg>
                     </button>
                 </div>
-                    <label for="" class="mbp-label">Mask Order</label>
-                <div class="mbp-button-group">
+                    <label for="" class="mbp-label" style="display: none;">Mask Order</label>
+                <div class="mbp-button-group" style="display: none;">
                     <button id="moveMaskUpBtn" class="mbp-button" title="Move Mask Up">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
@@ -96,18 +128,87 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
                     </button>
                 </div>
 
-                
-                <select id="saveOptionsSelect" class="mbp-select">
+                <div class="mbp-button-group" ">
+                    <button id="clearMaskBtn" class="mbp-button" title="Clear Mask" style="display: none;">
+                        Clear
+                    </button>
+                    <button id="clearAllMasksBtn" class="mbp-button" title="Clear All Masks">
+                        <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+                        width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+                        preserveAspectRatio="xMidYMid meet">
+
+                        <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+                        fill="currentColor" stroke="none">
+                        <path d="M413 4049 c-69 -27 -147 -110 -168 -181 -19 -63 -19 -121 -2 -179 8
+                        -24 129 -228 270 -453 142 -226 253 -414 249 -418 -5 -5 -83 -49 -173 -99 -90
+                        -50 -175 -100 -188 -112 -41 -38 -71 -115 -71 -184 0 -57 5 -72 65 -187 l66
+                        -125 65 -318 c69 -336 71 -361 34 -432 -39 -77 -105 -119 -211 -136 -45 -7
+                        -72 -36 -72 -77 0 -49 35 -72 103 -65 135 12 252 93 312 214 54 109 51 170
+                        -21 518 -33 159 -59 291 -57 292 1 2 285 159 631 349 574 316 629 344 639 328
+                        6 -11 113 -203 237 -429 169 -305 224 -413 216 -421 -7 -6 -42 -27 -79 -47
+                        l-66 -36 -102 187 c-56 103 -111 195 -122 205 -43 36 -118 4 -118 -52 0 -12
+                        47 -108 105 -213 84 -153 103 -194 93 -203 -17 -15 -545 -305 -555 -305 -5 0
+                        -71 115 -147 255 -77 141 -145 260 -152 266 -20 17 -72 14 -94 -6 -38 -35 -27
+                        -68 120 -334 77 -140 137 -258 133 -261 -5 -4 -42 -26 -83 -48 l-76 -41 -84
+                        161 c-69 131 -90 163 -112 170 -37 13 -80 -9 -93 -46 -9 -26 0 -47 89 -220 54
+                        -105 108 -201 119 -213 12 -13 32 -23 48 -23 16 0 223 108 540 283 283 156
+                        575 317 649 357 151 84 170 99 170 137 0 24 -309 600 -607 1130 -81 145 -125
+                        193 -198 213 -91 25 -137 13 -331 -94 -97 -53 -181 -93 -185 -89 -4 4 -97 197
+                        -208 428 -110 231 -215 440 -233 465 -49 67 -139 110 -226 109 -42 0 -87 -8
+                        -119 -20z m206 -157 c27 -22 74 -113 258 -497 217 -457 250 -515 291 -515 10
+                        0 112 52 227 116 232 129 263 138 310 94 33 -31 99 -150 88 -161 -10 -10
+                        -1224 -679 -1233 -679 -3 0 -25 36 -49 81 -48 89 -50 128 -8 166 12 11 108 67
+                        212 124 202 110 235 134 235 172 0 13 -121 216 -285 477 -273 435 -285 456
+                        -285 503 0 130 139 199 239 119z"/>
+                        <path d="M3750 3114 c-98 -26 -179 -72 -255 -148 -97 -95 -147 -198 -170 -346
+                        -5 -33 -8 -36 -58 -48 -60 -14 -144 -69 -182 -118 -55 -72 -79 -142 -79 -231
+                        0 -74 3 -88 37 -156 59 -120 158 -190 286 -203 56 -6 64 -5 86 16 15 14 25 35
+                        25 51 0 43 -28 67 -94 78 -74 14 -112 36 -153 89 -79 104 -42 256 77 319 71
+                        38 180 26 247 -27 82 -64 170 39 93 110 -28 27 -109 70 -130 70 -23 0 -2 106
+                        37 186 33 68 126 157 197 190 207 95 453 7 555 -198 l32 -63 -52 -23 c-73 -32
+                        -135 -79 -149 -112 -25 -59 43 -122 96 -89 93 58 118 70 168 80 192 35 366
+                        -125 354 -326 -6 -86 -29 -135 -104 -216 -30 -32 -54 -67 -54 -77 0 -10 18
+                        -42 40 -72 114 -153 112 -348 -6 -478 -24 -28 -65 -64 -92 -80 -99 -64 -53
+                        -62 -1284 -62 -1105 0 -1118 0 -1138 -20 -24 -24 -26 -67 -4 -98 l15 -22 1148
+                        0 c1026 0 1153 2 1202 16 232 69 389 272 389 502 0 90 -22 180 -60 249 l-29
+                        51 44 67 c96 143 108 307 34 463 -57 118 -180 215 -316 245 l-56 13 -22 61
+                        c-63 176 -234 325 -413 362 -72 15 -195 13 -262 -5z"/>
+                        <path d="M3681 1994 c-37 -16 -50 -56 -30 -93 14 -25 32 -34 93 -46 16 -3 44
+                        -21 63 -40 29 -29 33 -39 33 -84 0 -44 -5 -56 -34 -89 l-34 -37 -432 -5 -432
+                        -5 -19 -24 c-24 -30 -24 -62 0 -92 l19 -24 434 0 433 0 53 24 c208 94 214 392
+                        10 497 -47 24 -122 33 -157 18z"/>
+                        <path d="M1759 1212 c-28 -23 -30 -73 -4 -102 26 -29 126 -29 155 0 26 26 25
+                        60 -1 94 -17 22 -28 26 -74 26 -36 0 -60 -6 -76 -18z"/>
+                        </g>
+                        </svg>
+
+                    </button>
+                </div>
+                <div class="mbp-toggle-wrapper">
+                    <label for="hideMaskCheckbox" class="mbp-label">Hide Mask</label>
+                    <label class="mbp-toggle" for="hideMaskCheckbox">
+                        <input type="checkbox" id="hideMaskCheckbox">
+                        <span class="mbp-toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="mbp-toggle-wrapper" style="display: none;">
+                    <label for="hideAllMasksCheckbox" class="mbp-label">Hide All Masks</label>
+                    <label class="mbp-toggle" for="hideAllMasksCheckbox">
+                        <input type="checkbox" id="hideAllMasksCheckbox">
+                        <span class="mbp-toggle-slider"></span>
+                    </label>
+                </div>
+                <select id="saveOptionsSelect" class="mbp-select" style="display: none;">
                 </select>
-                
-                <button id="saveMaskBtn" class="mbp-button" style="width: 100%;" title="Save Mask">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
-                    </svg>
+                <button id="saveMaskBtn" class="mbp-button" style="width: 100%; display: none;" title="Save Mask">
+                    <!-- SVG icon -->
+                    Save
                 </button>
+                <button id="disableDrawingModeBtn" class="mbp-button" style="width: 100%; display: none;" title="Disable Drawing Mode">
             </div>
         `;
 
+
         while (temp.firstChild) {
             this.uiContainer.appendChild(temp.firstChild);
         }
@@ -118,85 +219,112 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
         this.moveMaskUpBtn = this.uiContainer.querySelector('#moveMaskUpBtn');
         this.moveMaskDownBtn = this.uiContainer.querySelector('#moveMaskDownBtn');
         this.removeMaskBtn = this.uiContainer.querySelector('#removeMaskBtn');
+        this.clearMaskBtn = this.uiContainer.querySelector('#clearMaskBtn');
+        this.clearAllMasksBtn = this.uiContainer.querySelector('#clearAllMasksBtn');
+        this.hideMaskCheckbox = this.uiContainer.querySelector('#hideMaskCheckbox');
+        this.hideAllMasksCheckbox = this.uiContainer.querySelector('#hideAllMasksCheckbox');
         this.saveOptionsSelect = this.uiContainer.querySelector('#saveOptionsSelect');
         this.saveMaskBtn = this.uiContainer.querySelector('#saveMaskBtn');
-
+        this.disableDrawingModeBtn = this.uiContainer.querySelector('#disableDrawingModeBtn');
+        
         this.saveOptions = [
+            {
+                value: 'saveCroppedMask',
+                text: 'Cropped Mask',
+                handler: () => this.maskExportUtilities.saveCroppedMask(),
+                exportFunction: () => this.maskExportUtilities.exportCroppedMask(),
+                show: true,
+            },  
+            {
+                value: 'saveCroppedAlphaOnImage',
+                text: 'Cropped Alpha',
+                handler: () => this.maskExportUtilities.saveCroppedAlphaOnImage(),
+                exportFunction: () => this.maskExportUtilities.exportCroppedAlphaOnImage(),
+                show: true,
+            },  
+            {
+                value: 'saveCroppedImage',
+                text: 'Cropped Image',
+                handler: () => this.maskExportUtilities.saveCroppedImage(),
+                exportFunction: () => this.maskExportUtilities.exportCroppedImage(),
+                show: true,
+            },   
+          
             {
                 value: 'saveMaskAlphaOnImage',
                 text: 'Mask As Alpha on Image',
-                handler: () => this.saveMaskAlphaOnImage(),
-                exportFunction: () => this.exportMaskAlphaOnImage(),
+                handler: () => this.maskExportUtilities.saveMaskAlphaOnImage(),
+                exportFunction: () => this.maskExportUtilities.exportMaskAlphaOnImage(),
                 show: true,
             },
             {
                 value: 'saveAllMasksAlphaOnImage',
                 text: 'All Masks As Alpha on Image',
-                handler: () => this.saveAllMasksAlphaOnImage(),
-                exportFunction: () => this.exportAllMasksAlphaOnImage(),
+                handler: () => this.maskExportUtilities.saveAllMasksAlphaOnImage(),
+                exportFunction: () => this.maskExportUtilities.exportAllMasksAlphaOnImage(),
                 show: true,
             },
             {
                 value: 'saveAllMasksCombinedAlphaOnImage',
                 text: 'All Masks As Alpha Combined on Image',
-                handler: () => this.saveAllMasksCombinedAlphaOnImage(),
-                exportFunction: () => this.exportAllMasksCombinedAlphaOnImage(),
+                handler: () => this.maskExportUtilities.saveAllMasksCombinedAlphaOnImage(),
+                exportFunction: () => this.maskExportUtilities.exportAllMasksCombinedAlphaOnImage(),
                 show: true,
             },
             {
                 value: 'saveMask',
                 text: 'Mask',
-                handler: () => this.saveMask(),
-                exportFunction: () => this.exportMask(),
+                handler: () => this.maskExportUtilities.saveMask(),
+                exportFunction: () => this.maskExportUtilities.exportMask(),
                 show: true,
             },
             {
                 value: 'saveAllMasks',
                 text: 'All Masks',
-                handler: () => this.saveAllMasks(),
-                exportFunction: () => this.exportMasksImage(),
+                handler: () => this.maskExportUtilities.saveAllMasks(),
+                exportFunction: () => this.maskExportUtilities.exportAllMasks(),
                 show: true,
             },
             {
                 value: 'saveAllMasksCombined',
                 text: 'All Masks Combined',
-                handler: () => this.saveAllMasksCombined(),
-                exportFunction: () => this.exportAllMasksCombined(),
+                handler: () => this.maskExportUtilities.saveAllMasksCombined(),
+                exportFunction: () => this.maskExportUtilities.exportAllMasksCombined(),
                 show: true,
             },
             {
                 value: 'saveAllMasksCombinedBW',
                 text: 'All Masks Combined (B&W)',
-                handler: () => this.saveAllMasksCombinedBlackWhite(),
-                exportFunction: () => this.exportMasksCombinedBlackWhite(),
+                handler: () => this.maskExportUtilities.saveAllMasksCombinedBlackWhite(),
+                exportFunction: () => this.maskExportUtilities.exportMasksCombinedBlackWhite(),
                 show: true,
             },
             {
                 value: 'saveMaskOnImage',
                 text: 'Mask on Image',
-                handler: () => this.saveMaskOnImage(),
-                exportFunction: () => this.exportMaskOnImage(),
+                handler: () => this.maskExportUtilities.saveMaskOnImage(),
+                exportFunction: () => this.maskExportUtilities.exportMaskOnImage(),
                 show: true,
             },
             {
                 value: 'saveAllMasksOnImage',
                 text: 'All Masks on Image',
-                handler: () => this.saveAllMasksOnImage(),
-                exportFunction: () => this.exportAllMasksOnImage(),
+                handler: () => this.maskExportUtilities.saveAllMasksOnImage(),
+                exportFunction: () => this.maskExportUtilities.exportAllMasksOnImage(),
                 show: true,
             },
             {
                 value: 'saveAllMasksCombinedOnImage',
                 text: 'All Masks Combined on Image',
-                handler: () => this.saveAllMasksCombinedOnImage(),
-                exportFunction: () => this.exportAllMasksCombinedOnImage(),
+                handler: () => this.maskExportUtilities.saveAllMasksCombinedOnImage(),
+                exportFunction: () => this.maskExportUtilities.exportAllMasksCombinedOnImage(),
                 show: true,
             },
             {
                 value: 'saveAllMasksCombinedBWOnImage',
                 text: 'All Masks Combined (B&W) on Image',
-                handler: () => this.saveAllMasksCombinedBlackWhiteOnImage(),
-                exportFunction: () => this.exportAllMasksCombinedBlackWhiteOnImage(),
+                handler: () => this.maskExportUtilities.saveAllMasksCombinedBlackWhiteOnImage(),
+                exportFunction: () => this.maskExportUtilities.exportAllMasksCombinedBlackWhiteOnImage(),
                 show: true,
             },
         ];
@@ -211,7 +339,6 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
         });
     }
 
-
     attachAdditionalEventListeners() {
         this.addMaskBtn.addEventListener('click', this.onAddMask);
         this.maskList.addEventListener('change', this.onChangeMask);
@@ -220,8 +347,12 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
         this.moveMaskUpBtn.addEventListener('click', this.onMoveMaskUp);
         this.moveMaskDownBtn.addEventListener('click', this.onMoveMaskDown);
         this.removeMaskBtn.addEventListener('click', this.onRemoveMask);
-
+        this.clearMaskBtn.addEventListener('click', this.onClearMask);
+        this.clearAllMasksBtn.addEventListener('click', this.onClearAllMasks);
+        this.hideMaskCheckbox.addEventListener('change', this.onToggleHideMask);
+        this.hideAllMasksCheckbox.addEventListener('change', this.onToggleHideAllMasks);
         this.saveMaskBtn.addEventListener('click', this.onHandleSave);
+        this.disableDrawingModeBtn.addEventListener('click', this.disableDrawingMode);
     }
 
     detachAdditionalEventListeners() {
@@ -232,8 +363,12 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
         this.moveMaskUpBtn.removeEventListener('click', this.onMoveMaskUp);
         this.moveMaskDownBtn.removeEventListener('click', this.onMoveMaskDown);
         this.removeMaskBtn.removeEventListener('click', this.onRemoveMask);
-
+        this.clearMaskBtn.removeEventListener('click', this.onClearMask);
+        this.clearAllMasksBtn.removeEventListener('click', this.onClearAllMasks);
+        this.hideMaskCheckbox.removeEventListener('change', this.onToggleHideMask);
+        this.hideAllMasksCheckbox.removeEventListener('change', this.onToggleHideAllMasks);
         this.saveMaskBtn.removeEventListener('click', this.onHandleSave);
+        this.disableDrawingModeBtn.removeEventListener('click', this.disableDrawingMode);
 
         this.canvasManager.off('image:loaded', this.onImageLoaded);
         this.canvasManager.off('canvas:state:changed', this.onCanvasStateChanged);
@@ -243,13 +378,36 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
         window.removeEventListener('resize', this.onWindowResize);
 
         this.canvasManager.off('save:trigger', this.onHandleSaveFromCanvas);
+
+        // Disconnect the ResizeObserver
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
     }
 
     onWindowResize() {
-        if (typeof this.onImageModified === 'function') {
-            this.onImageModified();
-        } else {
-            console.error('onImageModified method is not defined or not bound correctly.');
+        this.onImageModified();
+    }
+
+    handleStateChange(state) {
+        console.log('---Current state---', state.hideMask);
+        console.log('---this.clearMasksOnImageLoaded ---', this.clearMasksOnImageLoaded );
+
+
+        if (this.clearMasksOnImageLoaded == false) {
+            if (state.hideMask) {
+                this.hideMaskCheckbox.checked = true;
+                // this.currentMask.visible  = false
+                // this.currentMask.fabricImage.visible = this.currentMask.visible
+                // this.canvas.renderAll();
+                // console.log('---Current state--- hideMask true', state.hideMask);
+            } else {
+                // console.log('---Current state--- hideMask false', state.hideMask);
+                // this.hideMaskCheckbox.checked = false;
+                // this.canvas.renderAll();
+                // this.onToggleDrawingMode() 
+            }
         }
     }
 
@@ -263,16 +421,73 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
 
         this.imageObject.on('modified', this.onImageModified);
 
-        this.masks.forEach(mask => {
-            this.canvas.remove(mask.fabricImage);
-        });
-        this.masks = [];
-        this.currentMask = null;
-        this.maskList.options.length = 0;
+        if (!this.isSubscribed) {
+            this.unsubscribe = store.subscribe(this.handleStateChange);
+            this.isSubscribed = true;
+        }
+        if (this.clearMasksOnImageLoaded) {
+            this.masks.forEach(mask => {
+                this.canvas.remove(mask.fabricImage);
+            });
+            this.masks = [];
+            this.currentMask = null;
+            this.maskList.options.length = 0;
 
-        this.maskStrokeHistory = {};
+            this.maskStrokeHistory = {};
+
+            this.onAddMask();
+        } else {
+            this.masks.forEach(mask => {
+                this.canvas.remove(mask.fabricImage);
+                mask.fabricImage = new fabric.Image(mask.canvasEl, {
+                    left: this.imageObject.left,
+                    top: this.imageObject.top,
+                    originX: this.imageObject.originX,
+                    originY: this.imageObject.originY,
+                    selectable: false,
+                    evented: false,
+                    lockMovementX: true,
+                    lockMovementY: true,
+                    lockRotation: true,
+                    lockScalingX: true,
+                    lockScalingY: true,
+                    hasControls: false,
+                    hasBorders: false,
+                    hoverCursor: 'default',
+                    opacity: this.brushOpacity,
+                    scaleX: this.imageObject.scaleX,
+                    scaleY: this.imageObject.scaleY,
+                    willReadFrequently: true,
+                });
+                this.canvas.add(mask.fabricImage);
+                mask.fabricImage.bringToFront();
+
+                if (this.hideMaskCheckbox.checked) {
+                    this.currentMask.visible  = false
+                    this.currentMask.fabricImage.visible = this.currentMask.visible
+                    this.canvas.renderAll();
+                    // console.log('---Current state--- hideMask true', state.hideMask);
+                    // this.onToggleDrawingMode() 
+
+                }
+                else if (this.hideMaskCheckbox.checked === false) {
+                    // console.log('---Current state--- false', state.hideMask);
+                    // this.hideMaskCheckbox.checked = false;
+                    // this.canvas.renderAll();
+                }                
+            });
 
-        this.onAddMask();
+            if (this.masks.length > 0) {
+                if (!this.currentMask || !this.masks.includes(this.currentMask)) {
+                    this.currentMask = this.masks[0];
+                }
+                this.maskList.value = this.currentMask.name;
+                this.updateBrushColorAndCursor();
+            } else {
+                this.onAddMask();
+            }
+            this.canvas.renderAll();
+        }
     }
 
     onImageModified() {
@@ -336,10 +551,10 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
             hasControls: false,
             hasBorders: false,
             hoverCursor: 'default',
-            opacity: this.brushOpacity, 
+            opacity: this.brushOpacity,
             scaleX: this.imageObject.scaleX,
             scaleY: this.imageObject.scaleY,
-            willReadFrequently: true, 
+            willReadFrequently: true,
         });
 
         this.canvas.add(maskFabricImage);
@@ -351,6 +566,7 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
             fabricImage: maskFabricImage,
             canvasEl: maskCanvas,
             ctx: maskCtx,
+            visible: true,
         };
 
         this.masks.push(mask);
@@ -367,7 +583,6 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
         option.dataset.color = color;
         this.maskList.add(option);
         this.maskList.value = maskName;
-
         this.updateBrushColorAndCursor();
     }
 
@@ -375,15 +590,46 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
         const selectedOption = this.maskList.options[this.maskList.selectedIndex];
         const maskName = selectedOption.value;
         const color = selectedOption.dataset.color;
-    
+
         this.currentMask = this.masks.find(m => m.name === maskName);
         this.brushColor = color;
-    
+
         this.colorPicker.value = color;
-    
+
+        this.hideMaskCheckbox.checked = !this.currentMask.visible;
+
         this.updateBrushColorAndCursor();
     }
+
+    disableDrawingMode() {  
+        super.disableDrawingMode();
+    }
+
+    onPanActivated() {
+        this.disableDrawingMode();
+
+    }
     
+    onPanDeactivated() {
+        // this.disableDrawingMode();
+    }
+
+
+    onToggleDrawingMode() {
+        super.onToggleDrawingMode();
+
+        if (this.drawingMode) {
+            this.canvasManager.emit('mask:activated');
+        }
+
+        // console.log('onToggleDrawingModemask:', store);
+
+        // store.dispatch({
+        //     type: 'TOGGLE_MASK',
+        //     payload: true
+        // });
+    }
+
     onChangeMaskColor() {
         const color = this.brushColor = this.colorPicker.value;
         const selectedOption = this.maskList.options[this.maskList.selectedIndex];
@@ -435,9 +681,9 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
         for (let i = 0; i < data.length; i += 4) {
             const alpha = data[i + 3];
             if (alpha > 0) {
-                data[i] = rNew;     // Red
-                data[i + 1] = gNew; // Green
-                data[i + 2] = bNew; // Blue
+                data[i] = rNew;
+                data[i + 1] = gNew;
+                data[i + 2] = bNew;
             }
         }
 
@@ -446,7 +692,7 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
     }
 
     onApplyColorToExistingMaskChange() {
-        //can be used if additional actions are needed when the checkbox state changes
+        // Additional actions if needed when the checkbox state changes
     }
 
     onMoveMaskUp() {
@@ -522,8 +768,12 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
             const newIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;
             this.maskList.selectedIndex = newIndex;
             this.currentMask = this.masks[newIndex];
+
+            this.hideMaskCheckbox.checked = !this.currentMask.visible;
+
         } else {
             this.currentMask = null;
+            this.hideMaskCheckbox.checked = false;
         }
 
         this.updateBrushColorAndCursor();
@@ -531,13 +781,74 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
         this.canvas.renderAll();
     }
 
+    onClearMask() {
+        if (!this.currentMask) {
+            alert('No mask selected to clear.');
+            return;
+        }
+
+        const confirmClear = confirm(`Are you sure you want to clear "${this.currentMask.name}"?`);
+        if (!confirmClear) {
+            return;
+        }
+
+        this.currentMask.ctx.clearRect(0, 0, this.currentMask.canvasEl.width, this.currentMask.canvasEl.height);
+        this.currentMask.fabricImage.dirty = true;
+        this.canvas.renderAll();
+
+        this.maskStrokeHistory[this.currentMask.name] = {
+            undoStack: [],
+            redoStack: []
+        };
+    }
+
+    onClearAllMasks() {
+        // const confirmClearAll = confirm('Are you sure you want to clear all masks?');
+        // if (!confirmClearAll) {
+        //     return;
+        // }
+
+        this.masks.forEach(mask => {
+            mask.ctx.clearRect(0, 0, mask.canvasEl.width, mask.canvasEl.height);
+            mask.fabricImage.dirty = true;
+
+            this.maskStrokeHistory[mask.name] = {
+                undoStack: [],
+                redoStack: []
+            };
+        });
+        this.canvas.renderAll();
+    }
+
+    onToggleHideMask() {
+        if (!this.currentMask) {
+            this.hideMaskCheckbox.checked = false;
+            return;
+        }
+
+        this.currentMask.visible = !this.hideMaskCheckbox.checked;
+        this.currentMask.fabricImage.visible = this.currentMask.visible;
+        this.canvas.renderAll();
+    }
+
+    onToggleHideAllMasks() {
+        const hideAll = this.hideAllMasksCheckbox.checked;
+        this.masks.forEach(mask => {
+            mask.visible = !hideAll;
+            mask.fabricImage.visible = mask.visible;
+        });
+        if (this.currentMask) {
+            this.hideMaskCheckbox.checked = !this.currentMask.visible;
+        }
+        this.canvas.renderAll();
+    }
+
     updateBrushColorAndCursor() {
         if (this.currentMask) {
-            this.brushColor = this.currentMask.color; 
-            this.updateCursorCircle(); 
-            this.canvas.requestRenderAll(); 
+            this.brushColor = this.currentMask.color;
+            this.updateCursorCircle();
+            this.canvas.requestRenderAll();
         } else {
-
             this.brushColor = '#FF0000';
             this.updateCursorCircle();
             this.canvas.requestRenderAll();
@@ -606,14 +917,12 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
     }
 
     onUndoMaskStroke(strokeData) {
-        console.log('MaskBrushPlugin: Undoing mask stroke', strokeData);
         if (strokeData.type === 'add') {
             this.undoLastStroke(strokeData.maskName);
         }
     }
 
     onRedoMaskStroke(strokeData) {
-        console.log('MaskBrushPlugin: Redoing mask stroke', strokeData);
         if (strokeData.type === 'add') {
             this.redoLastStroke(strokeData.maskName, strokeData);
         }
@@ -685,7 +994,6 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
             console.error('Image object is not defined.');
             return;
         }
-
         this.currentMask.ctx.globalAlpha = 1;
 
         const adjustedBrushSize = this.brushSize / (this.currentZoom * this.imageObject.scaleX);
@@ -760,496 +1068,6 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
         return this.saveOptions.find(opt => opt.value === optionValue)?.exportFunction || null;
     }
 
-    createCombinedAlphaMask() {
-        const alphaCanvas = document.createElement('canvas');
-        alphaCanvas.width = this.imageOriginalWidth;
-        alphaCanvas.height = this.imageOriginalHeight;
-        const alphaCtx = alphaCanvas.getContext('2d');
-
-        alphaCtx.clearRect(0, 0, alphaCanvas.width, alphaCanvas.height);
-        this.masks.forEach(mask => {
-            alphaCtx.drawImage(mask.canvasEl, 0, 0, alphaCanvas.width, alphaCanvas.height);
-        });
-
-        return alphaCanvas;
-    }
-
-    exportMaskAlphaOnImage() {
-        if (!this.imageObject) {
-            alert('No image loaded to save the alpha on.');
-            return null;
-        }
-
-        if (!this.currentMask) {
-            alert('No mask selected to save as alpha.');
-            return null;
-        }
-
-        try {
-            const combinedCanvas = document.createElement('canvas');
-            combinedCanvas.width = this.imageOriginalWidth;
-            combinedCanvas.height = this.imageOriginalHeight;
-            const combinedCtx = combinedCanvas.getContext('2d');
-
-            combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
-
-            const alphaMask = document.createElement('canvas');
-            alphaMask.width = this.imageOriginalWidth;
-            alphaMask.height = this.imageOriginalHeight;
-            const alphaCtx = alphaMask.getContext('2d');
-            alphaCtx.drawImage(this.currentMask.canvasEl, 0, 0, alphaMask.width, alphaMask.height);
-
-            combinedCtx.globalCompositeOperation = 'destination-out';
-            combinedCtx.drawImage(alphaMask, 0, 0, combinedCanvas.width, combinedCanvas.height);
-            combinedCtx.globalCompositeOperation = 'source-over';
-
-            const combinedDataURL = combinedCanvas.toDataURL('image/png');
-            return combinedDataURL;
-
-        } catch (error) {
-            console.error('Error saving single mask alpha on image:', error);
-            alert('An error occurred while saving the single mask alpha on image.');
-            return null;
-        }
-    }
-
-    exportAllMasksAlphaOnImage() {
-        if (!this.imageObject) {
-            alert('No image loaded to save the alphas on.');
-            return null;
-        }
-
-        if (this.masks.length === 0) {
-            alert('No masks available to save as alphas.');
-            return null;
-        }
-
-        try {
-            const dataURLs = this.masks.map(mask => {
-                const combinedCanvas = document.createElement('canvas');
-                combinedCanvas.width = this.imageOriginalWidth;
-                combinedCanvas.height = this.imageOriginalHeight;
-                const combinedCtx = combinedCanvas.getContext('2d');
-
-                combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
-
-                const alphaMask = document.createElement('canvas');
-                alphaMask.width = this.imageOriginalWidth;
-                alphaMask.height = this.imageOriginalHeight;
-                const alphaCtx = alphaMask.getContext('2d');
-                alphaCtx.drawImage(mask.canvasEl, 0, 0, alphaMask.width, alphaMask.height);
-
-                combinedCtx.globalCompositeOperation = 'destination-out';
-                combinedCtx.drawImage(alphaMask, 0, 0, combinedCanvas.width, combinedCanvas.height);
-                combinedCtx.globalCompositeOperation = 'source-over';
-
-                return {
-                    dataURL: combinedCanvas.toDataURL('image/png'),
-                    filename: `${mask.name}_alpha_on_image.png`
-                };
-            });
-
-            return dataURLs;
-
-        } catch (error) {
-            console.error('Error saving all masks alphas on image:', error);
-            alert('An error occurred while saving all masks alphas on image.');
-            return null;
-        }
-    }
-
-    exportAllMasksCombinedAlphaOnImage() {
-        if (!this.imageObject) {
-            alert('No image loaded to save the combined alpha on.');
-            return null;
-        }
-
-        if (this.masks.length === 0) {
-            alert('No masks available to save as combined alpha.');
-            return null;
-        }
-
-        try {
-            const combinedCanvas = document.createElement('canvas');
-            combinedCanvas.width = this.imageOriginalWidth;
-            combinedCanvas.height = this.imageOriginalHeight;
-            const combinedCtx = combinedCanvas.getContext('2d');
-
-            combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
-
-            const alphaMask = this.createCombinedAlphaMask();
-
-            combinedCtx.globalCompositeOperation = 'destination-out';
-            combinedCtx.drawImage(alphaMask, 0, 0, combinedCanvas.width, combinedCanvas.height);
-            combinedCtx.globalCompositeOperation = 'source-over'; 
-
-            const combinedDataURL = combinedCanvas.toDataURL('image/png');
-            return combinedDataURL;
-
-        } catch (error) {
-            console.error('Error saving combined masks alpha on image:', error);
-            alert('An error occurred while saving the combined masks alpha on image.');
-            return null;
-        }
-    }
-
-    //Mask
-    exportMask() {
-        if (!this.currentMask) {
-            alert('No mask selected to export.');
-            return null;
-        }
-
-        try {
-            const dataURL = this.currentMask.canvasEl.toDataURL('image/png');
-            return dataURL;
-        } catch (error) {
-            console.error('Error exporting single mask image:', error);
-            alert('An error occurred while exporting the single mask image.');
-            return null;
-        }
-    }
-
-    exportAllMasks() {
-        if (!this.imageObject) {
-            alert('No image loaded to export masks on.');
-            return null;
-        }
-
-        if (this.masks.length === 0) {
-            alert('No masks available to export on image.');
-            return null;
-        }
-
-        const combinedCanvas = document.createElement('canvas');
-        combinedCanvas.width = this.imageOriginalWidth;
-        combinedCanvas.height = this.imageOriginalHeight;
-        const combinedCtx = combinedCanvas.getContext('2d');
-
-        combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
-
-        this.masks.forEach(mask => {
-            combinedCtx.drawImage(mask.canvasEl, 0, 0, combinedCanvas.width, combinedCanvas.height);
-        });
-
-        const combinedDataURL = combinedCanvas.toDataURL('image/png');
-        return combinedDataURL;
-    }
-
-    exportAllMasksCombined() {
-        if (this.masks.length === 0) {
-            alert('No masks available to export.');
-            return null;
-        }
-
-        try {
-            const combinedCanvas = document.createElement('canvas');
-            combinedCanvas.width = this.imageOriginalWidth;
-            combinedCanvas.height = this.imageOriginalHeight;
-            const combinedCtx = combinedCanvas.getContext('2d');
-            this.masks.forEach(mask => {
-                combinedCtx.drawImage(mask.canvasEl, 0, 0, combinedCanvas.width, combinedCanvas.height);
-            });
-
-            const combinedDataURL = combinedCanvas.toDataURL('image/png');
-            return combinedDataURL;
-        } catch (error) {
-            console.error('Error exporting combined masks image:', error);
-            alert('An error occurred while exporting the combined masks image.');
-            return null;
-        }
-    }
-
-    exportMasksCombinedBlackWhite() {
-        if (this.masks.length === 0) {
-            alert('No masks available to export.');
-            return null;
-        }
-
-        const combinedCanvas = document.createElement('canvas');
-        combinedCanvas.width = this.imageOriginalWidth;
-        combinedCanvas.height = this.imageOriginalHeight;
-        const combinedCtx = combinedCanvas.getContext('2d');
-
-        combinedCtx.fillStyle = 'black';
-        combinedCtx.fillRect(0, 0, combinedCanvas.width, combinedCanvas.height);
-
-        this.masks.forEach(mask => {
-            const maskCanvas = document.createElement('canvas');
-            maskCanvas.width = this.imageOriginalWidth;
-            maskCanvas.height = this.imageOriginalHeight;
-            const maskCtx = maskCanvas.getContext('2d');
-
-            maskCtx.drawImage(mask.canvasEl, 0, 0, maskCanvas.width, maskCanvas.height);
-
-            const imageData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
-            const data = imageData.data;
-
-            for (let i = 0; i < data.length; i += 4) {
-                const alpha = data[i + 3];
-                if (alpha > 0) {
-                    data[i] = 255;    
-                    data[i + 1] = 255; 
-                    data[i + 2] = 255;
-                }
-            }
-
-            maskCtx.putImageData(imageData, 0, 0);
-
-            combinedCtx.drawImage(maskCanvas, 0, 0, combinedCanvas.width, combinedCanvas.height);
-        });
-
-        const combinedDataURL = combinedCanvas.toDataURL('image/png');
-        return combinedDataURL;
-    }
-
-    //Mask on image
-    exportMaskOnImage() {
-        if (!this.imageObject) {
-            alert('No image loaded to export mask on.');
-            return null;
-        }
-
-        if (!this.currentMask) {
-            alert('No mask selected to export on image.');
-            return null;
-        }
-
-        try {
-            const combinedCanvas = document.createElement('canvas');
-            combinedCanvas.width = this.imageOriginalWidth;
-            combinedCanvas.height = this.imageOriginalHeight;
-            const combinedCtx = combinedCanvas.getContext('2d');
-
-            combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
-
-            combinedCtx.drawImage(this.currentMask.canvasEl, 0, 0, combinedCanvas.width, combinedCanvas.height);
-
-            const combinedDataURL = combinedCanvas.toDataURL('image/png');
-            return combinedDataURL;
-        } catch (error) {
-            console.error('Error exporting single mask on image:', error);
-            alert('An error occurred while exporting the single mask on image.');
-            return null;
-        }
-    }
-
-    exportAllMasksOnImage() {
-        if (!this.imageObject) {
-            alert('No image loaded to export masks on.');
-            return null;
-        }
-
-        if (this.masks.length === 0) {
-            alert('No masks available to export on image.');
-            return null;
-        }
-
-        try {
-            const combinedCanvas = document.createElement('canvas');
-            combinedCanvas.width = this.imageOriginalWidth;
-            combinedCanvas.height = this.imageOriginalHeight;
-            const combinedCtx = combinedCanvas.getContext('2d');
-
-            combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
-
-            this.masks.forEach(mask => {
-                combinedCtx.drawImage(mask.canvasEl, 0, 0, combinedCanvas.width, combinedCanvas.height);
-            });
-
-            const combinedDataURL = combinedCanvas.toDataURL('image/png');
-            return combinedDataURL;
-        } catch (error) {
-            console.error('Error exporting all masks on image:', error);
-            alert('An error occurred while exporting all masks on image.');
-            return null;
-        }
-    }
-
-    exportAllMasksCombinedOnImage() {
-        if (!this.imageObject) {
-            alert('No image loaded to export combined masks on.');
-            return null;
-        }
-
-        if (this.masks.length === 0) {
-            alert('No masks available to export combined on image.');
-            return null;
-        }
-
-        try {
-            const combinedCanvas = document.createElement('canvas');
-            combinedCanvas.width = this.imageOriginalWidth;
-            combinedCanvas.height = this.imageOriginalHeight;
-            const combinedCtx = combinedCanvas.getContext('2d');
-
-            combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
-
-            const combinedMaskCanvas = this.createCombinedAlphaMask();
-            combinedCtx.drawImage(combinedMaskCanvas, 0, 0, combinedCanvas.width, combinedCanvas.height);
-
-            const combinedDataURL = combinedCanvas.toDataURL('image/png');
-            return combinedDataURL;
-        } catch (error) {
-            console.error('Error exporting combined masks on image:', error);
-            alert('An error occurred while exporting combined masks on image.');
-            return null;
-        }
-    }
-
-    exportAllMasksCombinedBlackWhiteOnImage() {
-        if (!this.imageObject) {
-            alert('No image loaded to export masks on.');
-            return null;
-        }
-
-        if (this.masks.length === 0) {
-            alert('No masks available to export on image.');
-            return null;
-        }
-
-        const combinedCanvas = document.createElement('canvas');
-        combinedCanvas.width = this.imageOriginalWidth;
-        combinedCanvas.height = this.imageOriginalHeight;
-        const combinedCtx = combinedCanvas.getContext('2d');
-
-        combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
-
-        const tempMasksCanvas = document.createElement('canvas');
-        tempMasksCanvas.width = this.imageOriginalWidth;
-        tempMasksCanvas.height = this.imageOriginalHeight;
-        const tempMasksCtx = tempMasksCanvas.getContext('2d');
-
-        tempMasksCtx.fillStyle = 'black';
-        tempMasksCtx.fillRect(0, 0, tempMasksCanvas.width, tempMasksCanvas.height);
-
-        this.masks.forEach(mask => {
-            const maskCanvas = document.createElement('canvas');
-            maskCanvas.width = this.imageOriginalWidth;
-            maskCanvas.height = this.imageOriginalHeight;
-            const maskCtx = maskCanvas.getContext('2d');
-
-            maskCtx.drawImage(mask.canvasEl, 0, 0, maskCanvas.width, maskCanvas.height);
-
-            const imageData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
-            const data = imageData.data;
-
-            for (let i = 0; i < data.length; i += 4) {
-                const alpha = data[i + 3];
-                if (alpha > 0) {
-                    data[i] = 255;     
-                    data[i + 1] = 255;
-                    data[i + 2] = 255;
-                }
-            }
-
-            maskCtx.putImageData(imageData, 0, 0);
-
-            tempMasksCtx.drawImage(maskCanvas, 0, 0, tempMasksCanvas.width, tempMasksCanvas.height);
-        });
-
-        combinedCtx.drawImage(tempMasksCanvas, 0, 0, combinedCanvas.width, combinedCanvas.height);
-
-        const combinedDataURL = combinedCanvas.toDataURL('image/png');
-        return combinedDataURL;
-    }
-
-    saveMaskAlphaOnImage() {
-        const dataURL = this.exportMaskAlphaOnImage();
-        if (dataURL) {
-            this.downloadImage(dataURL, `${this.currentMask.name}_alpha_on_image.png`);
-        }
-    }
-
-    saveAllMasksAlphaOnImage() {
-        const dataURLs = this.exportAllMasksAlphaOnImage();
-        if (dataURLs) {
-            dataURLs.forEach(({ dataURL, filename }) => {
-                this.downloadImage(dataURL, filename);
-            });
-        }
-    }
-
-    saveAllMasksCombinedAlphaOnImage() {
-        const dataURL = this.exportAllMasksCombinedAlphaOnImage();
-        if (dataURL) {
-            this.downloadImage(dataURL, 'combined_masks_alpha_on_image.png');
-        }
-    }
-
-    saveMask() {
-        if (this.currentMask && this.currentMask.canvasEl) {
-            const dataURL = this.exportMask();
-            if (dataURL) {
-                this.downloadImage(dataURL, `${this.currentMask.name}.png`);
-            }
-        } else {
-            alert('No current mask data available to save.');
-        }
-    }
-
-    saveAllMasks() {
-        if (this.masks.length > 0) {
-            this.masks.forEach((mask) => {
-                const dataURL = mask.canvasEl.toDataURL('image/png');
-                this.downloadImage(dataURL, `${mask.name}.png`);
-            });
-        } else {
-            alert('No mask data available to save.');
-        }
-    }
-
-    saveAllMasksCombined() {
-        const combinedDataURL = this.exportAllMasksCombined();
-        if (combinedDataURL) {
-            this.downloadImage(combinedDataURL, 'combined_masks.png');
-        }
-    }
-
-    saveAllMasksCombinedBlackWhite() {
-        const combinedDataURL = this.exportMasksCombinedBlackWhite();
-        if (combinedDataURL) {
-            this.downloadImage(combinedDataURL, 'combined_masks_black_white.png');
-        }
-    }
-
-    saveMaskOnImage() {
-        const dataURL = this.exportMaskOnImage();
-        if (dataURL) {
-            this.downloadImage(dataURL, `${this.currentMask.name}_on_image.png`);
-        }
-    }
-
-    saveAllMasksOnImage() {
-        const dataURL = this.exportAllMasksOnImage();
-        if (dataURL) {
-            this.downloadImage(dataURL, 'all_masks_on_image.png');
-        }
-    }
-
-    saveAllMasksCombinedOnImage() {
-        const dataURL = this.exportAllMasksCombinedOnImage();
-        if (dataURL) {
-            this.downloadImage(dataURL, 'combined_masks_on_image.png');
-        }
-    }
-
-    saveAllMasksCombinedBlackWhiteOnImage() {
-        const combinedDataURL = this.exportAllMasksCombinedBlackWhiteOnImage();
-        if (combinedDataURL) {
-            this.downloadImage(combinedDataURL, 'combined_masks_black_white_on_image.png');
-        }
-    }
-
-    downloadImage(dataUrl, filename) {
-        const link = document.createElement('a');
-        link.href = dataUrl;
-        link.download = filename;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    }
-
     destroy() {
         this.detachAdditionalEventListeners();
 
@@ -1265,7 +1083,13 @@ export class MaskBrushPlugin extends CustomBrushPlugin {
 
         this.canvasManager.off('undo:mask:stroke', this.onUndoMaskStroke);
         this.canvasManager.off('redo:mask:stroke', this.onRedoMaskStroke);
+        this.canvasManager.off('pan:activated', this.onPanActivated);
+        this.canvasManager.off('pan:deactivated', this.onPanDeactivated);
 
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.isSubscribed = false;
+        }
         super.destroy();
     }
 }
diff --git a/web/core/js/common/components/canvas/MaskExportUtilities.js b/web/core/js/common/components/canvas/MaskExportUtilities.js
new file mode 100644
index 0000000..6f9b1f9
--- /dev/null
+++ b/web/core/js/common/components/canvas/MaskExportUtilities.js
@@ -0,0 +1,1006 @@
+import { store } from '../../scripts/stateManagerMain.js';
+
+export class MaskExportUtilities {
+    constructor(plugin) {
+        this.plugin = plugin;
+        this.isSubscribed = false;
+
+        this.config = {
+            padding: 50,
+            margin: 0,
+            resizeMask: true,
+            resizeWidth: 1024,
+            resizeHeight: 1024,
+            resizeKeepProportion: true,
+            blurMask: 25,
+            bw: true
+        };
+    }
+
+    _getBoundingBox(canvas) {
+        const ctx = canvas.getContext('2d');
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+
+        let minX = canvas.width, minY = canvas.height, maxX = 0, maxY = 0;
+
+        for (let y = 0; y < canvas.height; y++) {
+            for (let x = 0; x < canvas.width; x++) {
+                const index = (y * canvas.width + x) * 4 + 3; 
+                if (imageData[index] > 0) {
+                    if (x < minX) minX = x;
+                    if (x > maxX) maxX = x;
+                    if (y < minY) minY = y;
+                    if (y > maxY) maxY = y;
+                }
+            }
+        }
+
+        return { minX, minY, maxX, maxY };
+    }
+
+
+    _addPadding(canvas, padding, touchesEdges) {
+        const { touchesLeft, touchesRight, touchesTop, touchesBottom } = touchesEdges;
+
+        const padLeft = touchesLeft ? 0 : padding / 2;
+        const padRight = touchesRight ? 0 : padding / 2;
+        const padTop = touchesTop ? 0 : padding / 2;
+        const padBottom = touchesBottom ? 0 : padding / 2;
+
+        const paddedWidth = canvas.width + padLeft + padRight;
+        const paddedHeight = canvas.height + padTop + padBottom;
+
+        const paddedCanvas = document.createElement('canvas');
+        paddedCanvas.width = paddedWidth;
+        paddedCanvas.height = paddedHeight;
+        const paddedCtx = paddedCanvas.getContext('2d');
+
+        paddedCtx.clearRect(0, 0, paddedWidth, paddedHeight);
+        paddedCtx.drawImage(canvas, padLeft, padTop, canvas.width, canvas.height);
+
+        return paddedCanvas;
+    }
+
+
+    _addMargin(canvas, margin, blurMask) {
+        if (margin <= 0) return canvas;
+
+        const effectiveMargin = Math.max(margin, blurMask * 2);
+        const marginWidth = canvas.width + effectiveMargin;
+        const marginHeight = canvas.height + effectiveMargin;
+
+        const marginCanvas = document.createElement('canvas');
+        marginCanvas.width = marginWidth;
+        marginCanvas.height = marginHeight;
+        const marginCtx = marginCanvas.getContext('2d');
+
+        marginCtx.clearRect(0, 0, marginWidth, marginHeight);
+        const marginOffsetX = effectiveMargin / 2;
+        const marginOffsetY = effectiveMargin / 2;
+        marginCtx.drawImage(canvas, marginOffsetX, marginOffsetY, canvas.width, canvas.height);
+
+        return marginCanvas;
+    }
+
+    _resizeCanvas(canvas, targetWidth, targetHeight, keepProportion) {
+        if (!this.config.resizeMask) return canvas;
+
+        if (keepProportion) {
+            const aspectRatio = canvas.width / canvas.height;
+            if (targetWidth / targetHeight > aspectRatio) {
+                targetWidth = Math.round(targetHeight * aspectRatio);
+            } else {
+                targetHeight = Math.round(targetWidth / aspectRatio);
+            }
+        }
+
+        const resizedCanvas = document.createElement('canvas');
+        resizedCanvas.width = targetWidth;
+        resizedCanvas.height = targetHeight;
+        const resizedCtx = resizedCanvas.getContext('2d');
+        resizedCtx.drawImage(canvas, 0, 0, targetWidth, targetHeight);
+
+        return resizedCanvas;
+    }
+
+    _convertToBlackAndWhite(canvas) {
+        const ctx = canvas.getContext('2d');
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data = imageData.data;
+
+        for (let i = 0; i < data.length; i += 4) {
+            const alpha = data[i + 3];
+            if (alpha > 0) {
+                data[i] = 255;     
+                data[i + 1] = 255;
+                data[i + 2] = 255;
+                data[i + 3] = 255; 
+            } else {
+                data[i] = 0;       
+                data[i + 1] = 0;   
+                data[i + 2] = 0;   
+                data[i + 3] = 255; 
+            }
+        }
+
+        ctx.putImageData(imageData, 0, 0);
+        return canvas;
+    }
+
+    _applyBlur(canvas, blurAmount) {
+        if (blurAmount <= 0) return canvas;
+
+        const blurredCanvas = document.createElement('canvas');
+        blurredCanvas.width = canvas.width;
+        blurredCanvas.height = canvas.height;
+        const blurredCtx = blurredCanvas.getContext('2d');
+
+        blurredCtx.fillStyle = 'black';
+        blurredCtx.fillRect(0, 0, blurredCanvas.width, blurredCanvas.height);
+
+        blurredCtx.filter = `blur(${blurAmount}px)`;
+        blurredCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
+        blurredCtx.filter = 'none';
+
+        return blurredCanvas;
+    }
+
+
+    downloadImage(dataUrl, filename) {
+        const link = document.createElement('a');
+        link.href = dataUrl;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+
+
+    _processBoundingBox(canvas) {
+        const { minX, minY, maxX, maxY } = this._getBoundingBox(canvas);
+
+        if (maxX < minX || maxY < minY) {
+            alert('Selected mask is completely transparent.');
+            return null;
+        }
+
+        const touchesEdges = {
+            touchesLeft: minX === 0,
+            touchesRight: maxX === canvas.width - 1,
+            touchesTop: minY === 0,
+            touchesBottom: maxY === canvas.height - 1
+        };
+
+        return { minX, minY, maxX, maxY, touchesEdges };
+    }
+
+
+    exportCroppedMask(overrides = {}) {
+        const config = { ...this.config, ...overrides };
+
+        if (!this.plugin.currentMask) {
+            alert('No mask selected to export.');
+            return null;
+        }
+
+        try {
+            const maskCanvas = this.plugin.currentMask.canvasEl;
+            const boundingBox = this._processBoundingBox(maskCanvas);
+            if (!boundingBox) return null;
+
+            const { minX, minY, maxX, maxY, touchesEdges } = boundingBox;
+            let croppedWidth = maxX - minX + 1;
+            let croppedHeight = maxY - minY + 1;
+            const originalCroppedWidth = croppedWidth;
+            const originalCroppedHeight = croppedHeight;
+
+            const croppedCanvas = document.createElement('canvas');
+            croppedCanvas.width = croppedWidth;
+            croppedCanvas.height = croppedHeight;
+            const croppedCtx = croppedCanvas.getContext('2d');
+            croppedCtx.drawImage(maskCanvas, minX, minY, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight);
+
+            if (config.padding > 0) {
+                const paddedCanvas = this._addPadding(croppedCanvas, config.padding, touchesEdges);
+                croppedWidth = paddedCanvas.width;
+                croppedHeight = paddedCanvas.height;
+                croppedCanvas.width = paddedCanvas.width;
+                croppedCanvas.height = paddedCanvas.height;
+                croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
+                croppedCtx.drawImage(paddedCanvas, 0, 0);
+            }
+
+            if (config.margin > 0) {
+                const marginCanvas = this._addMargin(croppedCanvas, config.margin, config.blurMask);
+                croppedWidth = marginCanvas.width;
+                croppedHeight = marginCanvas.height;
+                croppedCanvas.width = marginCanvas.width;
+                croppedCanvas.height = marginCanvas.height;
+                croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
+                croppedCtx.drawImage(marginCanvas, 0, 0);
+            }
+
+            if (config.resizeMask) {
+                const resizedCanvas = this._resizeCanvas(croppedCanvas, config.resizeWidth, config.resizeHeight, config.resizeKeepProportion);
+                croppedWidth = resizedCanvas.width;
+                croppedHeight = resizedCanvas.height;
+                croppedCanvas.width = resizedCanvas.width;
+                croppedCanvas.height = resizedCanvas.height;
+                croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
+                croppedCtx.drawImage(resizedCanvas, 0, 0);
+            }
+
+            if (config.bw) {
+                this._convertToBlackAndWhite(croppedCanvas);
+            }
+
+            if (config.blurMask > 0) {
+                const blurredCanvas = this._applyBlur(croppedCanvas, config.blurMask);
+                croppedCanvas.width = blurredCanvas.width;
+                croppedCanvas.height = blurredCanvas.height;
+                croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
+                croppedCtx.drawImage(blurredCanvas, 0, 0);
+            }
+
+            const croppedImage = {
+                loadedImage: {
+                    width: this.plugin.imageOriginalWidth,
+                    height: this.plugin.imageOriginalHeight
+                },
+                mask: {
+                    x: minX,
+                    y: minY,
+                    width: originalCroppedWidth,
+                    height: originalCroppedHeight,
+                    resizePaddingWidth: croppedWidth,
+                    resizePaddingHeight: croppedHeight
+                },
+            };
+            store.dispatch({
+                type: 'SET_CROPPED_IMAGE',
+                payload: croppedImage
+            });
+
+            return croppedCanvas.toDataURL('image/png');
+
+        } catch (error) {
+            console.error('Error exporting cropped mask:', error);
+            alert('An error occurred while exporting the cropped mask.');
+            return null;
+        }
+    }
+
+
+    saveCroppedMask(overrides = {}) {
+        const config = { ...this.config, ...overrides };
+        const dataURL = this.exportCroppedMask(overrides);
+        if (dataURL) {
+            const filenameParts = [`${this.plugin.currentMask.name}_cropped`];
+            if (config.padding > 0) {
+                filenameParts.push(`padded_${config.padding}`);
+            }
+            if (config.margin > 0) {
+                filenameParts.push(`margin_${config.margin}`);
+            }
+            if (config.resizeMask) {
+                const proportion = config.resizeKeepProportion ? '_proportional' : '';
+                filenameParts.push(`resized_${config.resizeWidth}x${config.resizeHeight}${proportion}`);
+            }
+            if (config.blurMask > 0) {
+                filenameParts.push(`blurred_${config.blurMask}`);
+            }
+            if (config.bw) {
+                filenameParts.push(`bw_${config.bw}`);
+            }
+            const filename = `${filenameParts.join('_')}.png`;
+            this.downloadImage(dataURL, filename);
+        }
+    }
+
+
+    exportCroppedImage(overrides = {}) {
+        const config = { 
+            padding: 0, 
+            resizeMask: true, 
+            resizeWidth: 1024, 
+            resizeHeight: 1024, 
+            resizeKeepProportion: true,
+            ...overrides 
+        };
+
+        if (!this.plugin.imageObject) {
+            alert('No image loaded to export.');
+            return null;
+        }
+
+        if (!this.plugin.currentMask) {
+            alert('No mask selected to guide the cropping.');
+            return null;
+        }
+
+        try {
+            const imageCanvas = document.createElement('canvas');
+            const imageCtx = imageCanvas.getContext('2d');
+            imageCanvas.width = this.plugin.imageOriginalWidth;
+            imageCanvas.height = this.plugin.imageOriginalHeight;
+            imageCtx.drawImage(
+                this.plugin.imageObject.getElement(),
+                0,
+                0,
+                imageCanvas.width,
+                imageCanvas.height
+            );
+
+            const maskCanvas = this.plugin.currentMask.canvasEl;
+            const boundingBox = this._processBoundingBox(maskCanvas);
+            if (!boundingBox) return null;
+
+            const { minX, minY, maxX, maxY } = boundingBox;
+            let croppedWidth = maxX - minX + 1;
+            let croppedHeight = maxY - minY + 1;
+
+            const croppedCanvas = document.createElement('canvas');
+            croppedCanvas.width = croppedWidth;
+            croppedCanvas.height = croppedHeight;
+            const croppedCtx = croppedCanvas.getContext('2d');
+            croppedCtx.drawImage(
+                imageCanvas,
+                minX,
+                minY,
+                croppedWidth,
+                croppedHeight,
+                0,
+                0,
+                croppedWidth,
+                croppedHeight
+            );
+
+            if (config.padding > 0) {
+                const paddedCanvas = document.createElement('canvas');
+                paddedCanvas.width = croppedWidth + config.padding;
+                paddedCanvas.height = croppedHeight + config.padding;
+                const paddedCtx = paddedCanvas.getContext('2d');
+
+                paddedCtx.clearRect(0, 0, paddedCanvas.width, paddedCanvas.height);
+                const offsetX = config.padding / 2;
+                const offsetY = config.padding / 2;
+                paddedCtx.drawImage(
+                    croppedCanvas,
+                    offsetX,
+                    offsetY,
+                    croppedWidth,
+                    croppedHeight
+                );
+
+                croppedCanvas.width = paddedCanvas.width;
+                croppedCanvas.height = paddedCanvas.height;
+                croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
+                croppedCtx.drawImage(paddedCanvas, 0, 0);
+                croppedWidth = paddedCanvas.width;
+                croppedHeight = paddedCanvas.height;
+            }
+
+            if (config.resizeMask) {
+                const resizedCanvas = this._resizeCanvas(croppedCanvas, config.resizeWidth, config.resizeHeight, config.resizeKeepProportion);
+                croppedCanvas.width = resizedCanvas.width;
+                croppedCanvas.height = resizedCanvas.height;
+                croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
+                croppedCtx.drawImage(resizedCanvas, 0, 0);
+                croppedWidth = resizedCanvas.width;
+                croppedHeight = resizedCanvas.height;
+            }
+
+            return croppedCanvas.toDataURL('image/png');
+
+        } catch (error) {
+            console.error('Error exporting cropped image:', error);
+            alert('An error occurred while exporting the cropped image.');
+            return null;
+        }
+    }
+
+    saveCroppedImage(overrides = {}) {
+        const config = { 
+            padding: 0, 
+            resizeMask: true, 
+            resizeWidth: 1024, 
+            resizeHeight: 1024, 
+            resizeKeepProportion: true,
+            ...overrides 
+        };
+        const dataURL = this.exportCroppedImage(overrides);
+        if (dataURL) {
+            const filenameParts = [`${this.plugin.imageObject.name}_cropped`];
+            if (config.padding > 0) {
+                filenameParts.push(`padded_${config.padding}`);
+            }
+            if (config.resizeMask) {
+                const proportion = config.resizeKeepProportion ? '_proportional' : '';
+                filenameParts.push(`resized_${config.resizeWidth}x${config.resizeHeight}${proportion}`);
+            }
+            const filename = `${filenameParts.join('_')}.png`;
+            this.downloadImage(dataURL, filename);
+        }
+    }
+
+    exportCroppedAlphaOnImage(overrides = {}) {
+        const config = { 
+            padding: 50, 
+            resizeMask: true, 
+            resizeWidth: 1024, 
+            resizeHeight: 1024, 
+            resizeKeepProportion: true, 
+            blurMask: 25,
+            ...overrides 
+        };
+
+        if (!this.plugin.imageObject) {
+            alert('No image loaded to export.');
+            return null;
+        }
+
+        if (!this.plugin.currentMask) {
+            alert('No mask selected to guide the cropping.');
+            return null;
+        }
+
+        try {
+            const imageCanvas = document.createElement('canvas');
+            const imageCtx = imageCanvas.getContext('2d');
+            imageCanvas.width = this.plugin.imageOriginalWidth;
+            imageCanvas.height = this.plugin.imageOriginalHeight;
+            imageCtx.drawImage(
+                this.plugin.imageObject.getElement(),
+                0,
+                0,
+                imageCanvas.width,
+                imageCanvas.height
+            );
+
+            const maskCanvas = this.plugin.currentMask.canvasEl;
+            const boundingBox = this._processBoundingBox(maskCanvas);
+            if (!boundingBox) return null;
+
+            const { minX, minY, maxX, maxY } = boundingBox;
+            const originalCroppedWidth = maxX - minX + 1;
+            const originalCroppedHeight = maxY - minY + 1;
+
+            const croppedCanvas = document.createElement('canvas');
+            croppedCanvas.width = originalCroppedWidth;
+            croppedCanvas.height = originalCroppedHeight;
+            const croppedCtx = croppedCanvas.getContext('2d');
+            croppedCtx.drawImage(
+                imageCanvas,
+                minX,
+                minY,
+                originalCroppedWidth,
+                originalCroppedHeight,
+                0,
+                0,
+                originalCroppedWidth,
+                originalCroppedHeight
+            );
+
+            if (config.padding > 0) {
+                const paddedCanvas = document.createElement('canvas');
+                paddedCanvas.width = originalCroppedWidth + config.padding;
+                paddedCanvas.height = originalCroppedHeight + config.padding;
+                const paddedCtx = paddedCanvas.getContext('2d');
+
+                paddedCtx.clearRect(0, 0, paddedCanvas.width, paddedCanvas.height);
+                const offsetX = config.padding / 2;
+                const offsetY = config.padding / 2;
+                paddedCtx.drawImage(
+                    croppedCanvas,
+                    offsetX,
+                    offsetY,
+                    originalCroppedWidth,
+                    originalCroppedHeight
+                );
+
+                croppedCanvas.width = paddedCanvas.width;
+                croppedCanvas.height = paddedCanvas.height;
+                croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
+                croppedCtx.drawImage(paddedCanvas, 0, 0);
+            }
+
+            const scaleXOriginal = croppedCanvas.width;
+            const scaleYOriginal = croppedCanvas.height;
+
+            if (config.resizeMask) {
+                const resizedCanvas = this._resizeCanvas(croppedCanvas, config.resizeWidth, config.resizeHeight, config.resizeKeepProportion);
+                croppedCanvas.width = resizedCanvas.width;
+                croppedCanvas.height = resizedCanvas.height;
+                croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
+                croppedCtx.drawImage(resizedCanvas, 0, 0);
+            }
+
+            const tempMaskCanvas = document.createElement('canvas');
+            tempMaskCanvas.width = croppedCanvas.width;
+            tempMaskCanvas.height = croppedCanvas.height;
+            const tempMaskCtx = tempMaskCanvas.getContext('2d');
+            tempMaskCtx.drawImage(
+                maskCanvas,
+                minX,
+                minY,
+                originalCroppedWidth,
+                originalCroppedHeight,
+                0,
+                0,
+                croppedCanvas.width,
+                croppedCanvas.height
+            );
+
+            const tempMaskImageData = tempMaskCtx.getImageData(0, 0, croppedCanvas.width, croppedCanvas.height);
+            const tempMaskData = tempMaskImageData.data;
+
+            const croppedImageData = croppedCtx.getImageData(0, 0, croppedCanvas.width, croppedCanvas.height);
+            const croppedData = croppedImageData.data;
+
+            for (let i = 0; i < croppedData.length; i += 4) {
+                const maskAlpha = tempMaskData[i + 3];
+                // Invert the alpha: 255 - maskAlpha
+                croppedData[i + 3] = 255 - maskAlpha;
+            }
+
+            croppedCtx.putImageData(croppedImageData, 0, 0);
+
+            if (config.blurMask > 0) {
+                const blurredCanvas = this._applyBlur(croppedCanvas, config.blurMask);
+                croppedCanvas.width = blurredCanvas.width;
+                croppedCanvas.height = blurredCanvas.height;
+                croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
+                croppedCtx.drawImage(blurredCanvas, 0, 0);
+            }
+
+            const finalCroppedWidth = croppedCanvas.width;
+            const finalCroppedHeight = croppedCanvas.height;
+            const croppedImage = {
+                loadedImage: {
+                    width: imageCanvas.width,
+                    height: imageCanvas.height
+                },
+                mask: {
+                    x: minX,
+                    y: minY,
+                    width: originalCroppedWidth,
+                    height: originalCroppedHeight,
+                    resizePaddingWidth: finalCroppedWidth,
+                    resizePaddingHeight: finalCroppedHeight
+                },
+            };
+            store.dispatch({
+                type: 'SET_CROPPED_IMAGE',
+                payload: croppedImage
+            });
+
+            return croppedCanvas.toDataURL('image/png');
+
+        } catch (error) {
+            console.error('Error exporting cropped alpha on image:', error);
+            alert('An error occurred while exporting the cropped alpha on image.');
+            return null;
+        }
+    }
+
+    saveCroppedAlphaOnImage(overrides = {}) {
+        const config = { 
+            padding: 50, 
+            resizeMask: true, 
+            resizeWidth: 1024, 
+            resizeHeight: 1024, 
+            resizeKeepProportion: true, 
+            blurMask: 25,
+            ...overrides 
+        };
+        const dataURL = this.exportCroppedAlphaOnImage(overrides);
+        if (dataURL) {
+            const filenameParts = [`${this.plugin.imageObject.name}_cropped_alpha_on_image`];
+            if (config.padding > 0) {
+                filenameParts.push(`padded_${config.padding}`);
+            }
+            if (config.resizeMask) {
+                const proportion = config.resizeKeepProportion ? '_proportional' : '';
+                filenameParts.push(`resized_${config.resizeWidth}x${config.resizeHeight}${proportion}`);
+            }
+            if (config.blurMask > 0) {
+                filenameParts.push(`blurred_${config.blurMask}`);
+            }
+            const filename = `${filenameParts.join('_')}.png`;
+            this.downloadImage(dataURL, filename);
+        }
+    }
+
+    createCombinedAlphaMask() {
+        const alphaCanvas = document.createElement('canvas');
+        alphaCanvas.width = this.plugin.imageOriginalWidth;
+        alphaCanvas.height = this.plugin.imageOriginalHeight;
+        const alphaCtx = alphaCanvas.getContext('2d');
+
+        alphaCtx.clearRect(0, 0, alphaCanvas.width, alphaCanvas.height);
+        this.plugin.masks.forEach(mask => {
+            alphaCtx.drawImage(mask.canvasEl, 0, 0, alphaCanvas.width, alphaCanvas.height);
+        });
+
+        return alphaCanvas;
+    }
+
+    exportMaskAlphaOnImage() {
+        if (!this.plugin.imageObject) {
+            alert('No image loaded to save the alpha on.');
+            return null;
+        }
+
+        if (!this.plugin.currentMask) {
+            alert('No mask selected to save as alpha.');
+            return null;
+        }
+
+        try {
+            const combinedCanvas = document.createElement('canvas');
+            combinedCanvas.width = this.plugin.imageOriginalWidth;
+            combinedCanvas.height = this.plugin.imageOriginalHeight;
+            const combinedCtx = combinedCanvas.getContext('2d');
+
+            combinedCtx.drawImage(this.plugin.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+            const alphaMask = document.createElement('canvas');
+            alphaMask.width = this.plugin.imageOriginalWidth;
+            alphaMask.height = this.plugin.imageOriginalHeight;
+            const alphaCtx = alphaMask.getContext('2d');
+            alphaCtx.drawImage(this.plugin.currentMask.canvasEl, 0, 0, alphaMask.width, alphaMask.height);
+
+            combinedCtx.globalCompositeOperation = 'destination-out';
+            combinedCtx.drawImage(alphaMask, 0, 0, combinedCanvas.width, combinedCanvas.height);
+            combinedCtx.globalCompositeOperation = 'source-over';
+
+            const combinedDataURL = combinedCanvas.toDataURL('image/png');
+            return combinedDataURL;
+
+        } catch (error) {
+            console.error('Error saving single mask alpha on image:', error);
+            alert('An error occurred while saving the single mask alpha on image.');
+            return null;
+        }
+    }
+
+
+    exportAllMasksAlphaOnImage() {
+        if (!this.plugin.imageObject) {
+            alert('No image loaded to save the alphas on.');
+            return null;
+        }
+
+        if (this.plugin.masks.length === 0) {
+            alert('No masks available to save as alphas.');
+            return null;
+        }
+
+        try {
+            const dataURLs = this.plugin.masks.map(mask => {
+                const combinedCanvas = document.createElement('canvas');
+                combinedCanvas.width = this.plugin.imageOriginalWidth;
+                combinedCanvas.height = this.plugin.imageOriginalHeight;
+                const combinedCtx = combinedCanvas.getContext('2d');
+
+                combinedCtx.drawImage(this.plugin.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+                const alphaMask = document.createElement('canvas');
+                alphaMask.width = this.plugin.imageOriginalWidth;
+                alphaMask.height = this.plugin.imageOriginalHeight;
+                const alphaCtx = alphaMask.getContext('2d');
+                alphaCtx.drawImage(mask.canvasEl, 0, 0, alphaMask.width, alphaMask.height);
+
+                combinedCtx.globalCompositeOperation = 'destination-out';
+                combinedCtx.drawImage(alphaMask, 0, 0, combinedCanvas.width, combinedCanvas.height);
+                combinedCtx.globalCompositeOperation = 'source-over';
+
+                return {
+                    dataURL: combinedCanvas.toDataURL('image/png'),
+                    filename: `${mask.name}_alpha_on_image.png`
+                };
+            });
+
+            return dataURLs;
+
+        } catch (error) {
+            console.error('Error saving all masks alphas on image:', error);
+            alert('An error occurred while saving all masks alphas on image.');
+            return null;
+        }
+    }
+
+    exportAllMasksCombinedAlphaOnImage() {
+        if (!this.plugin.imageObject) {
+            alert('No image loaded to save the combined alpha on.');
+            return null;
+        }
+
+        if (this.plugin.masks.length === 0) {
+            alert('No masks available to save as combined alpha.');
+            return null;
+        }
+
+        try {
+            const combinedCanvas = document.createElement('canvas');
+            combinedCanvas.width = this.plugin.imageOriginalWidth;
+            combinedCanvas.height = this.plugin.imageOriginalHeight;
+            const combinedCtx = combinedCanvas.getContext('2d');
+
+            combinedCtx.drawImage(this.plugin.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+            const combinedMaskCanvas = this.createCombinedAlphaMask();
+
+            combinedCtx.globalCompositeOperation = 'destination-out';
+            combinedCtx.drawImage(combinedMaskCanvas, 0, 0, combinedCanvas.width, combinedCanvas.height);
+            combinedCtx.globalCompositeOperation = 'source-over';
+
+            const combinedDataURL = combinedCanvas.toDataURL('image/png');
+            return combinedDataURL;
+
+        } catch (error) {
+            console.error('Error saving combined masks alpha on image:', error);
+            alert('An error occurred while saving the combined masks alpha on image.');
+            return null;
+        }
+    }
+
+    exportMask() {
+        if (!this.plugin.currentMask) {
+            alert('No mask selected to export.');
+            return null;
+        }
+
+        try {
+            const dataURL = this.plugin.currentMask.canvasEl.toDataURL('image/png');
+            return dataURL;
+        } catch (error) {
+            console.error('Error exporting single mask image:', error);
+            alert('An error occurred while exporting the single mask image.');
+            return null;
+        }
+    }
+
+    exportAllMasksOnImage() {
+        if (!this.plugin.imageObject) {
+            alert('No image loaded to export masks on.');
+            return null;
+        }
+
+        if (this.plugin.masks.length === 0) {
+            alert('No masks available to export on image.');
+            return null;
+        }
+
+        try {
+            const combinedCanvas = document.createElement('canvas');
+            combinedCanvas.width = this.plugin.imageOriginalWidth;
+            combinedCanvas.height = this.plugin.imageOriginalHeight;
+            const combinedCtx = combinedCanvas.getContext('2d');
+
+            combinedCtx.drawImage(this.plugin.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+            this.plugin.masks.forEach(mask => {
+                combinedCtx.drawImage(mask.canvasEl, 0, 0, combinedCanvas.width, combinedCanvas.height);
+            });
+
+            const combinedDataURL = combinedCanvas.toDataURL('image/png');
+            return combinedDataURL;
+        } catch (error) {
+            console.error('Error exporting all masks on image:', error);
+            alert('An error occurred while exporting all masks on image.');
+            return null;
+        }
+    }
+
+    exportAllMasksCombined() {
+        if (this.plugin.masks.length === 0) {
+            alert('No masks available to export.');
+            return null;
+        }
+
+        try {
+            const combinedCanvas = document.createElement('canvas');
+            combinedCanvas.width = this.plugin.imageOriginalWidth;
+            combinedCanvas.height = this.plugin.imageOriginalHeight;
+            const combinedCtx = combinedCanvas.getContext('2d');
+
+            this.plugin.masks.forEach(mask => {
+                combinedCtx.drawImage(mask.canvasEl, 0, 0, combinedCanvas.width, combinedCanvas.height);
+            });
+
+            const combinedDataURL = combinedCanvas.toDataURL('image/png');
+            return combinedDataURL;
+        } catch (error) {
+            console.error('Error exporting combined masks image:', error);
+            alert('An error occurred while exporting the combined masks image.');
+            return null;
+        }
+    }
+
+    exportMasksCombinedBlackWhite() {
+        if (this.plugin.masks.length === 0) {
+            alert('No masks available to export.');
+            return null;
+        }
+
+        try {
+            const combinedCanvas = document.createElement('canvas');
+            combinedCanvas.width = this.plugin.imageOriginalWidth;
+            combinedCanvas.height = this.plugin.imageOriginalHeight;
+            const combinedCtx = combinedCanvas.getContext('2d');
+
+            combinedCtx.fillStyle = 'black';
+            combinedCtx.fillRect(0, 0, combinedCanvas.width, combinedCanvas.height);
+
+            this.plugin.masks.forEach(mask => {
+                const maskCanvas = document.createElement('canvas');
+                maskCanvas.width = this.plugin.imageOriginalWidth;
+                maskCanvas.height = this.plugin.imageOriginalHeight;
+                const maskCtx = maskCanvas.getContext('2d');
+
+                maskCtx.drawImage(mask.canvasEl, 0, 0, maskCanvas.width, maskCanvas.height);
+
+                const imageData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
+                const data = imageData.data;
+
+                for (let i = 0; i < data.length; i += 4) {
+                    const alpha = data[i + 3];
+                    if (alpha > 0) {
+                        data[i] = 255;     // Red
+                        data[i + 1] = 255; // Green
+                        data[i + 2] = 255; // Blue
+                    }
+                }
+
+                maskCtx.putImageData(imageData, 0, 0);
+
+                combinedCtx.drawImage(maskCanvas, 0, 0, combinedCanvas.width, combinedCanvas.height);
+            });
+
+            const combinedDataURL = combinedCanvas.toDataURL('image/png');
+            return combinedDataURL;
+        } catch (error) {
+            console.error('Error exporting masks combined black and white:', error);
+            alert('An error occurred while exporting the masks combined black and white.');
+            return null;
+        }
+    }
+
+    exportMaskOnImage() {
+        if (!this.plugin.imageObject) {
+            alert('No image loaded to export mask on.');
+            return null;
+        }
+
+        if (!this.plugin.currentMask) {
+            alert('No mask selected to export on image.');
+            return null;
+        }
+
+        try {
+            const combinedCanvas = document.createElement('canvas');
+            combinedCanvas.width = this.plugin.imageOriginalWidth;
+            combinedCanvas.height = this.plugin.imageOriginalHeight;
+            const combinedCtx = combinedCanvas.getContext('2d');
+
+            combinedCtx.drawImage(this.plugin.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
+            combinedCtx.drawImage(this.plugin.currentMask.canvasEl, 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+            const combinedDataURL = combinedCanvas.toDataURL('image/png');
+            return combinedDataURL;
+        } catch (error) {
+            console.error('Error exporting single mask on image:', error);
+            alert('An error occurred while exporting the single mask on image.');
+            return null;
+        }
+    }
+
+    exportAllMasksOnImage() {
+        return this.exportAllMasksOnImage();
+    }
+
+    exportAllMasksCombinedOnImage() {
+        return this.exportAllMasksCombinedAlphaOnImage();
+    }
+
+    exportAllMasksCombinedBlackWhiteOnImage() {
+        return this.exportMasksCombinedBlackWhite();
+    }
+
+
+    saveMaskAlphaOnImage() {
+        const dataURL = this.exportMaskAlphaOnImage();
+        if (dataURL) {
+            this.downloadImage(dataURL, `${this.plugin.currentMask.name}_alpha_on_image.png`);
+        }
+    }
+
+    saveAllMasksAlphaOnImage() {
+        const dataURLs = this.exportAllMasksAlphaOnImage();
+        if (dataURLs) {
+            dataURLs.forEach(({ dataURL, filename }) => {
+                this.downloadImage(dataURL, filename);
+            });
+        }
+    }
+
+    saveAllMasksCombinedAlphaOnImage() {
+        const dataURL = this.exportAllMasksCombinedAlphaOnImage();
+        if (dataURL) {
+            this.downloadImage(dataURL, 'combined_masks_alpha_on_image.png');
+        }
+    }
+
+    saveMask() {
+        if (this.plugin.currentMask && this.plugin.currentMask.canvasEl) {
+            const dataURL = this.exportMask();
+            if (dataURL) {
+                this.downloadImage(dataURL, `${this.plugin.currentMask.name}.png`);
+            }
+        } else {
+            alert('No current mask data available to save.');
+        }
+    }
+
+    saveAllMasks() {
+        if (this.plugin.masks.length > 0) {
+            this.plugin.masks.forEach((mask) => {
+                const dataURL = mask.canvasEl.toDataURL('image/png');
+                this.downloadImage(dataURL, `${mask.name}.png`);
+            });
+        } else {
+            alert('No mask data available to save.');
+        }
+    }
+
+    saveAllMasksCombined() {
+        const combinedDataURL = this.exportAllMasksCombined();
+        if (combinedDataURL) {
+            this.downloadImage(combinedDataURL, 'combined_masks.png');
+        }
+    }
+
+    saveAllMasksCombinedBlackWhite() {
+        const combinedDataURL = this.exportMasksCombinedBlackWhite();
+        if (combinedDataURL) {
+            this.downloadImage(combinedDataURL, 'combined_masks_black_white.png');
+        }
+    }
+
+    saveMaskOnImage() {
+        const dataURL = this.exportMaskOnImage();
+        if (dataURL) {
+            this.downloadImage(dataURL, `${this.plugin.currentMask.name}_on_image.png`);
+        }
+    }
+
+    saveAllMasksOnImage() {
+        const dataURL = this.exportAllMasksOnImage();
+        if (dataURL) {
+            this.downloadImage(dataURL, 'all_masks_on_image.png');
+        }
+    }
+
+    saveAllMasksCombinedOnImage() {
+        const dataURL = this.exportAllMasksCombinedOnImage();
+        if (dataURL) {
+            this.downloadImage(dataURL, 'combined_masks_on_image.png');
+        }
+    }
+
+    saveAllMasksCombinedBlackWhiteOnImage() {
+        const combinedDataURL = this.exportAllMasksCombinedBlackWhiteOnImage();
+        if (combinedDataURL) {
+            this.downloadImage(combinedDataURL, 'combined_masks_black_white_on_image.png');
+        }
+    }
+
+    exportAllMasksCombined() {
+        return this.exportAllMasksCombined();
+    }
+
+    exportMasksCombinedBlackWhite() {
+        return this.exportMasksCombinedBlackWhite();
+    }
+}
diff --git a/web/core/js/common/components/imageLoaderComp.js b/web/core/js/common/components/imageLoaderComp.js
index e445c97..0105f43 100644
--- a/web/core/js/common/components/imageLoaderComp.js
+++ b/web/core/js/common/components/imageLoaderComp.js
@@ -33,6 +33,13 @@ export default function imageLoaderComp(flowConfig, workflow) {
 
     flowConfig.imageLoaders.forEach((imageConfig, index) => {
         const containerId = loadImageContainer.id;
+        const imageDropAreaTitle = document.createElement('div');
+        imageDropAreaTitle.classList.add('image-loader-title');
+        imageDropAreaTitle.textContent = imageConfig.label;
+        loadImageContainer.appendChild(imageDropAreaTitle);
+
+        // console.log("image-loader-title",imageConfig.label);
+        // this.imageDropAreaTitle.textContent = 'Drop an image or video here';
         const imageLoader = new ImageLoader(containerId, {
             allowedFileType: 'image',
             defaultImageSrc: '/core/media/ui/drop_image_rect_no_border_trans.png',
diff --git a/web/core/js/common/components/messageHandler.js b/web/core/js/common/components/messageHandler.js
index 941ec26..e88c5b2 100644
--- a/web/core/js/common/components/messageHandler.js
+++ b/web/core/js/common/components/messageHandler.js
@@ -1,7 +1,8 @@
+// messageHandler.js
 import { WebSocketHandler } from './webSocketHandler.js';
 import { updateProgress, displayImagesInDiv } from './imagedisplay.js';
 import { hideSpinner } from './utils.js';
-
+import { store } from  '../scripts/stateManagerMain.js';
 class IMessageProcessor {
     process(data) {
         throw new Error('Method not implemented.');
@@ -87,6 +88,9 @@ class BlobMessageProcessor extends IMessageProcessor {
 
     async process(blob) {
         try {
+            const { view } = store.getState();
+            const { croppedImage } = store.getState();
+            const { inpiantStyle } = store.getState();
             if (!blob.type) {
                 const headerSize = 8; 
                 if (blob.size <= headerSize) {
@@ -97,8 +101,29 @@ class BlobMessageProcessor extends IMessageProcessor {
 
                 const slicedBlob = blob.slice(headerSize);
                 const detectedType = await detectMimeType(slicedBlob);
+                const objectURL = URL.createObjectURL(slicedBlob);
                 if (detectedType) {
-                    this.messageHandler.handleMedia(URL.createObjectURL(slicedBlob), detectedType, false);
+                    switch(view) {
+                        case 'output':
+                            this.messageHandler.handleMedia(objectURL, detectedType, false);
+                            break;
+                        case 'canvas':
+                            switch(inpiantStyle) {
+                                case 'full':
+                                    this.messageHandler.overlayPreviewOnOriginal(objectURL, detectedType, false);
+                                    // console.log('Blob message inpiantStyle full:', inpiantStyle);
+                                    break;
+                                case 'cropped':
+                                    this.messageHandler.compositeCroppedPreviewOnOriginal(objectURL, croppedImage);
+                                    // console.log('Blob message inpiantStyle cropped:', inpiantStyle);
+                                    break;
+                            }
+                            break;
+                        case 'splitView':
+                            this.messageHandler.handleMedia(objectURL, detectedType, false);
+                            // this.messageHandler.overlayPreviewOnOriginal(objectURL);
+                            break;
+                    }
                 } else {
                     console.error('Could not detect MIME type of Blob.');
                     hideSpinner();
@@ -126,12 +151,65 @@ export class MessageHandler {
         this.spinnerHidden = false;
         this.jsonProcessor = new JSONMessageProcessor(this);
         this.blobProcessor = new BlobMessageProcessor(this);
+        this.maskModePreview = true;
+        this.originalImageDataURL = null;
+        this.canvasSelectedMaskOutputs = null;
+        this.maskImageDataURL = null;
+        this.canvasCroppedMaskOutputs = null;
+        this.AlphaMaskImageDataURL = null;
+    }
+
+    setOriginalImage(dataURL) {
+        if (!dataURL || typeof dataURL !== 'string') {
+            console.error('Original image Data URL is invalid.');
+            return;
+        }
+        this.originalImageDataURL = dataURL;
+        // console.log('Original image set for MaskModePreview.');
+    }
+    setAlphaMaskImage(dataURL) {
+        if (!dataURL || typeof dataURL !== 'string') {
+            console.error('Alpha mask image Data URL is invalid.');
+            return;
+        }
+        this.AlphaMaskImageDataURL = dataURL;
+        // console.log('Alpha mask image set for MaskModePreview.');
+    }
+
+    setCanvasSelectedMaskOutputs(dataURL) {
+        if (!dataURL || typeof dataURL !== 'string') {
+            console.error('Canvas Selected Mask Outputs should be an array of Data URLs.');
+            return;
+        }
+        this.canvasSelectedMaskOutputs = dataURL;
+        // console.log('Canvas Selected Mask Outputs set successfully.');
+    }
+
+    setCroppedMaskImage(dataURL) {
+        if (!dataURL || typeof dataURL !== 'string') {
+            console.error('Canvas Cropped Mask Outputs should be an array of Data URLs.');
+            return;
+        }
+        this.canvasCroppedMaskOutputs = dataURL;
+        // console.log('Canvas Cropped Mask Outputs set successfully.');
+    }
+
+    setMaskImage(dataURL) {
+        if (!dataURL || typeof dataURL !== 'string') {
+            console.error('Mask image Data URL is invalid.');
+            return;
+        }
+        this.maskImageDataURL = dataURL;
+        // console.log('Mask image set for MaskModePreview.');
     }
 
     handleMessage(event) {
         if (typeof event.data === 'string') {
             this.jsonProcessor.process(event.data);
+            
+        // preview output
         } else if (event.data instanceof Blob) {
+            // console.log('Preview image:');
             this.blobProcessor.process(event.data);
         } else {
             console.warn('Unknown message type:', typeof event.data);
@@ -171,7 +249,7 @@ export class MessageHandler {
         window.dispatchEvent(event);
     }
 
-    processImages(images) {
+    async processImages(images) {
         const newImageFilenames = [];
         const imageUrls = images.map(image => {
             const { filename } = image;
@@ -179,7 +257,11 @@ export class MessageHandler {
             if (filename.includes('ComfyUI_temp')) {
                 return null;
             }
-    
+            // Detect original image based on filename
+            if (filename.toLowerCase().includes('original')) {
+                // Original image is handled separately
+                return null;
+            }    
             if (this.lastImageFilenames.includes(filename)) {
                 console.log('Duplicate image:', filename);
                 return null;
@@ -187,12 +269,23 @@ export class MessageHandler {
     
             newImageFilenames.push(filename);
             const imageUrl = `/view?filename=${encodeURIComponent(filename)}`;
-            console.log('Image URL:', imageUrl);
+            console.log('processImages Image URL:', imageUrl);
             return imageUrl;
         }).filter(url => url !== null);
-    
+        console.log('Image URLs:', imageUrls.length);
         if (imageUrls.length > 0) {
             displayImagesInDiv(imageUrls); 
+            for (const url of imageUrls) {
+                try {
+                    const { view } = store.getState();
+
+                    if (view === 'canvas') {
+                        this.emitCombinedImage(url)
+                    }
+                } catch (error) {
+                    console.error('Error overlaying preview on image:', url, error);
+                }
+            }
             this.lastImageFilenames = newImageFilenames;
         }
     }
@@ -223,12 +316,274 @@ export class MessageHandler {
     handleStatus() {
         updateProgress();
     }
+
+    async compositeCroppedPreviewOnOriginal(previewUrl, croppedImage) {
+        if (!this.originalImageDataURL || !this.canvasCroppedMaskOutputs) {
+            console.error('Original image data URL or mask is not provided. Cannot overlay preview.');
+            return null;
+        }
+
+        try {
+            const [originalImage, previewImage, maskImage] = await this.loadImages([
+                this.originalImageDataURL,
+                previewUrl,
+                this.canvasCroppedMaskOutputs
+            ]);
+
+            const { x, y, width, height } = croppedImage.mask;
+
+            const mainCanvas = this.createCanvas(originalImage.width, originalImage.height);
+            const mainCtx = mainCanvas.getContext('2d');
+
+            mainCtx.drawImage(originalImage, 0, 0);
+
+            const maskedPreview = this.prepareMaskedPreview(previewImage, maskImage, width, height);
+
+            mainCtx.drawImage(maskedPreview, x, y, width, height);
+
+            const JPEG_QUALITY = 0.5;
+
+            const combinedDataURL = mainCanvas.toDataURL('image/jpeg', JPEG_QUALITY);
+
+            if (combinedDataURL) {
+                this.emitCombinedImage(combinedDataURL);
+            }
+
+            return combinedDataURL;
+        } catch (error) {
+            console.error('Error during compositing:', error);
+            return null;
+        }
+    }
+
+    async loadImages(urls) {
+        return Promise.all(urls.map(url => this.loadImage(url)));
+    }
+
+
+    createCanvas(width, height) {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        return canvas;
+    }
+
+    prepareMaskedPreview(previewImage, maskImage, width, height) {
+        const maskCanvas = this.createCanvas(width, height);
+        const previewCanvas = this.createCanvas(width, height);
+
+        const maskCtx = maskCanvas.getContext('2d');
+        const previewCtx = previewCanvas.getContext('2d');
+
+        const BLUR_RADIUS = 3;
+        maskCtx.filter = `blur(${BLUR_RADIUS}px)`;
+        maskCtx.drawImage(maskImage, 0, 0, width, height);
+        maskCtx.filter = 'none'; 
+
+        previewCtx.drawImage(previewImage, 0, 0, width, height);
+
+        const blurredMaskData = maskCtx.getImageData(0, 0, width, height);
+        const previewData = previewCtx.getImageData(0, 0, width, height);
+
+        const maskedData = this.applyMaskToAlpha(previewData, blurredMaskData);
+
+        previewCtx.putImageData(maskedData, 0, 0);
+
+        return previewCanvas;
+    }
+
+    applyMaskToAlpha(previewData, maskData) {
+        const data = previewData.data;
+        const mask = maskData.data;
+
+        if (data.length !== mask.length) {
+            throw new Error('Preview and mask ImageData must have the same dimensions.');
+        }
+
+        for (let i = 0; i < data.length; i += 4) {
+            const maskAlpha = mask[i];
+            const normalizedAlpha = maskAlpha / 255;
+            data[i + 3] = normalizedAlpha * data[i + 3];
+        }
+
+        return previewData;
+    }
+
+    async compositePreviewOnOriginal(previewUrl, invertMask = true) {
+        if (!this.originalImageDataURL || !this.AlphaMaskImageDataURL) {
+            console.error('Original image or mask image is not set. Cannot overlay preview.');
+            return null;
+        }
+    
+        try {
+            const [originalImage, previewImage, maskImage] = await Promise.all([
+                this.loadImage(this.originalImageDataURL),
+                this.loadImage(previewUrl),
+                this.loadImage(this.AlphaMaskImageDataURL)
+            ]);
+    
+            let scaledMaskImage = maskImage;
+            if (maskImage.width !== originalImage.width || maskImage.height !== originalImage.height) {
+                console.warn('Mask dimensions do not match original image. Scaling mask to match.');
+                scaledMaskImage = await this.scaleImage(maskImage, originalImage.width, originalImage.height);
+            }
+    
+            const maskCanvas = document.createElement('canvas');
+            maskCanvas.width = scaledMaskImage.width;
+            maskCanvas.height = scaledMaskImage.height;
+            const maskCtx = maskCanvas.getContext('2d');
+    
+            const FEATHER_RADIUS = 5;
+            maskCtx.filter = `blur(${FEATHER_RADIUS}px)`;
+            maskCtx.drawImage(scaledMaskImage, 0, 0, maskCanvas.width, maskCanvas.height);
+            maskCtx.filter = 'none'; 
+    
+            const maskImageData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
+            const maskData = maskImageData.data;
+    
+            if (invertMask) {
+                for (let i = 3; i < maskData.length; i += 4) {
+                    maskData[i] = 255 - maskData[i];
+                }
+                maskCtx.putImageData(maskImageData, 0, 0);
+            }
+    
+            let minX = maskCanvas.width, minY = maskCanvas.height, maxX = 0, maxY = 0;
+            for (let y = 0; y < maskCanvas.height; y++) {
+                for (let x = 0; x < maskCanvas.width; x++) {
+                    const idx = (y * maskCanvas.width + x) * 4;
+                    if (maskData[idx + 3] > 0) { 
+                        minX = Math.min(minX, x);
+                        minY = Math.min(minY, y);
+                        maxX = Math.max(maxX, x);
+                        maxY = Math.max(maxY, y);
+                    }
+                }
+            }
+    
+            if (minX > maxX || minY > maxY) {
+                console.warn('Mask is fully transparent. No area to overlay preview.');
+                // Optionally display the original image
+                // displayImagesInDiv([this.originalImageDataURL], '', false);
+                return this.originalImageDataURL;
+            }
+    
+            const maskedWidth = maxX - minX;
+            const maskedHeight = maxY - minY;
+    
+            const MIN_SCALE = 1; 
+    
+            const previewAspect = previewImage.width / previewImage.height;
+            const maskAspect = maskedWidth / maskedHeight;
+    
+            let previewWidth, previewHeight, previewX, previewY;
+    
+            if (previewAspect > maskAspect) {
+                let scale = maskedHeight / previewImage.height;
+                scale = Math.max(scale, MIN_SCALE); 
+                previewWidth = previewImage.width * scale;
+                previewHeight = previewImage.height * scale;
+                previewX = minX + (maskedWidth - previewWidth) / 2;
+                previewY = minY;
+            } else {
+                let scale = maskedWidth / previewImage.width;
+                scale = Math.max(scale, MIN_SCALE); 
+                previewWidth = previewImage.width * scale;
+                previewHeight = previewImage.height * scale;
+                previewX = minX;
+                previewY = minY + (maskedHeight - previewHeight) / 2;
+            }
+    
+            previewX = minX + (maskedWidth - previewWidth) / 2;
+            previewY = minY + (maskedHeight - previewHeight) / 2;
+    
+            const canvas = document.createElement('canvas');
+            canvas.width = originalImage.width;
+            canvas.height = originalImage.height;
+            const ctx = canvas.getContext('2d');
+    
+            ctx.drawImage(originalImage, 0, 0);
+    
+            const clippingCanvas = document.createElement('canvas');
+            clippingCanvas.width = originalImage.width;
+            clippingCanvas.height = originalImage.height;
+            const clippingCtx = clippingCanvas.getContext('2d');
+            clippingCtx.drawImage(maskCanvas, 0, 0);
+    
+            const tempCanvas = document.createElement('canvas');
+            tempCanvas.width = originalImage.width;
+            tempCanvas.height = originalImage.height;
+            const tempCtx = tempCanvas.getContext('2d');
+    
+            tempCtx.drawImage(previewImage, previewX, previewY, previewWidth, previewHeight);
+    
+            tempCtx.globalCompositeOperation = 'destination-in';
+            tempCtx.drawImage(clippingCanvas, 0, 0);
+    
+            tempCtx.globalCompositeOperation = 'source-over';
+    
+            ctx.drawImage(tempCanvas, 0, 0);
+    
+            const JPEG_QUALITY = 0.5;
+
+            const combinedDataURL = canvas.toDataURL('image/jpeg', JPEG_QUALITY);
+   
+            return combinedDataURL;
+    
+        } catch (error) {
+            console.error('Error during image compositing:', error);
+            return null;
+        }
+    }
+
+    emitCombinedImage(combinedDataURL) {
+        if (!combinedDataURL) {
+            console.error('No combined image data to emit.');
+            return;
+        }
+        
+        const previewImageEvent = new CustomEvent('previewImageLoaded', {
+            detail: combinedDataURL
+        });
+        window.dispatchEvent(previewImageEvent);
+    }
+
+    async overlayPreviewOnOriginal(previewUrl, invertMask = true) {
+        const combinedDataURL = await this.compositePreviewOnOriginal(previewUrl, invertMask);
+        
+        if (combinedDataURL) {
+            this.emitCombinedImage(combinedDataURL);
+        }
+        return combinedDataURL;
+    }
+
+    async scaleImage(img, width, height) {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0, width, height);
+        const scaledImage = await this.loadImage(canvas.toDataURL());
+        return scaledImage;
+    }
+
+    loadImage(src) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = 'Anonymous';
+            img.onload = () => resolve(img);
+            img.onerror = (err) => reject(err);
+            img.src = src;
+        });
+    }
 }
 
+const messageHandler = new MessageHandler();
+export { messageHandler };
+
 export function initializeWebSocket(clientId) {
     const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
     const serverAddress = `${window.location.hostname}:${window.location.port}`;
-    const messageHandler = new MessageHandler();
     const wsHandler = new WebSocketHandler(
         `${protocol}://${serverAddress}/ws?clientId=${encodeURIComponent(clientId)}`,
         (event) => messageHandler.handleMessage(event)
diff --git a/web/core/js/common/scripts/componentTypes.js b/web/core/js/common/scripts/componentTypes.js
index f359cd8..7698828 100644
--- a/web/core/js/common/scripts/componentTypes.js
+++ b/web/core/js/common/scripts/componentTypes.js
@@ -55,8 +55,30 @@ export const componentTypes = {
         { name: 'id', label: 'ID', type: 'text' },
         { name: 'label', label: 'Label', type: 'text' },
     ],
+    'canvasAlphaOutput': [
+        { name: 'id', label: 'ID', type: 'text' },
+        { name: 'label', label: 'Label', type: 'text' },
+    ],
     'canvasSelectedMaskOutput': [
         { name: 'id', label: 'ID', type: 'text' },
         { name: 'label', label: 'Label', type: 'text' },
     ],    
+    'canvasCroppedMaskOutput': [
+        { name: 'id', label: 'ID', type: 'text' },
+        { name: 'label', label: 'Label', type: 'text' },
+    ],       
+    'canvasCroppedImageOutput': [
+        { name: 'id', label: 'ID', type: 'text' },
+        { name: 'label', label: 'Label', type: 'text' },
+    ],  
+    'canvasCroppedAlphaOnImageOutput': [
+        { name: 'id', label: 'ID', type: 'text' },
+        { name: 'label', label: 'Label', type: 'text' },
+    ],
+
+    'dataComponent': [
+        { name: 'id', label: 'ID', type: 'text' },
+        { name: 'name', label: 'NAME', type: 'text' },
+        { name: 'dataPath', label: 'Data Path', type: 'text'},
+    ],
 };
\ No newline at end of file
diff --git a/web/core/js/common/scripts/interactiveUI.js b/web/core/js/common/scripts/interactiveUI.js
new file mode 100644
index 0000000..5cdba3f
--- /dev/null
+++ b/web/core/js/common/scripts/interactiveUI.js
@@ -0,0 +1,497 @@
+// interactiveUI.js
+const toggleLeftBtn = document.getElementById('toggle-left');
+const leftCol = document.getElementById('left-col');
+const toggleRightBtn = document.getElementById('toggle-right');
+const rightCol = document.getElementById('right-col');
+const controlsDiv = document.getElementById('quick-controls');
+const sideWorkflowControls = document.getElementById('side-workflow-controls');
+
+const classesToMoveLeft = ['seeder-container', 'stepper-container'];
+
+const idsToMoveRight = ['history'];
+
+const leftElementPlaceholders = new Map();
+const rightElementPlaceholders = new Map();
+
+let moveElementsOnMinimize = true;
+let moveHistoryOnMinimize = true;
+
+
+function getElementsToMoveByClass(container, classesToMove) {
+    const selectors = classesToMove.map(className => `.${className}`).join(',');
+    return container.querySelectorAll(selectors);
+}
+
+
+function getElementsToMoveById(container, idsToMove) {
+    return idsToMove.map(id => container.querySelector(`#${id}`)).filter(el => el !== null);
+}
+
+function moveLeftElementsToControls() {
+    const elementsLeft = getElementsToMoveByClass(sideWorkflowControls, classesToMoveLeft);
+    elementsLeft.forEach(element => {
+        if (element.id && !leftElementPlaceholders.has(element.id)) {
+            const placeholder = document.createElement('div');
+            placeholder.className = 'element-placeholder';
+            placeholder.dataset.elementId = element.id;
+
+            sideWorkflowControls.replaceChild(placeholder, element);
+
+            leftElementPlaceholders.set(element.id, { placeholder, parent: sideWorkflowControls });
+
+            controlsDiv.appendChild(element);
+            console.log(`Moved "${element.id}" to #controls.`);
+            // updateElementsWithIcons("controls", iconList, true, "add");
+        }
+    });
+}
+
+function moveLeftElementsBack() {
+    leftElementPlaceholders.forEach(({ placeholder, parent }, elementId) => {
+        const element = document.getElementById(elementId);
+        if (element) {
+            parent.replaceChild(element, placeholder);
+            console.log(`Moved "${elementId}" back to its original parent.`);
+            // updateElementsWithIcons("side-workflow-controls", iconList, true, "add");
+        } else {
+            console.warn(`Element with ID "${elementId}" not found.`);
+        }
+    });
+
+    leftElementPlaceholders.clear();
+}
+
+function moveRightElementsToControls() {
+
+    console.log("rightCol", rightCol); //Need to fix
+    // const elementsRight = getElementsToMoveById(rightCol, idsToMoveRight);
+    // elementsRight.forEach(element => {
+    //     if (element.id && !rightElementPlaceholders.has(element.id)) {
+    //         // Create a placeholder
+    //         const placeholder = document.createElement('div');
+    //         placeholder.className = 'element-placeholder';
+    //         placeholder.dataset.elementId = element.id;
+
+    //         // Replace the element with the placeholder
+    //         rightCol.replaceChild(placeholder, element);
+
+    //         // Store the placeholder and parent in the map
+    //         rightElementPlaceholders.set(element.id, { placeholder, parent: rightCol });
+
+    //         // Append the element to controlsDiv
+    //         controlsDiv.appendChild(element);
+    //         console.log(`Moved "${element.id}" to #controls.`);
+    //     }
+    // });
+}
+
+function moveRightElementsBack() {
+    rightElementPlaceholders.forEach(({ placeholder, parent }, elementId) => {
+        const element = document.getElementById(elementId);
+        if (element) {
+            parent.replaceChild(element, placeholder);
+            console.log(`Moved "${elementId}" back to its original parent.`);
+        } else {
+            console.warn(`Element with ID "${elementId}" not found.`);
+        }
+    });
+
+    rightElementPlaceholders.clear();
+}
+
+function handleLeftColumnToggle() {
+    leftCol.classList.toggle('minimized');
+    toggleLeftBtn.classList.toggle('active');
+
+    const isMinimized = leftCol.classList.contains('minimized');
+
+    if (isMinimized) {
+        if (moveElementsOnMinimize) {
+            moveLeftElementsToControls();
+        }
+    } else {
+        if (moveElementsOnMinimize) {
+            moveLeftElementsBack();
+        }
+    }
+}
+
+function handleRightColumnToggle() {
+    rightCol.classList.toggle('minimized');
+    toggleRightBtn.classList.toggle('active');
+
+    const isMinimized = rightCol.classList.contains('minimized');
+
+    if (isMinimized) {
+        if (moveHistoryOnMinimize) {
+            moveRightElementsToControls();
+        }
+    } else {
+        if (moveHistoryOnMinimize) {
+            moveRightElementsBack();
+        }
+    }
+}
+
+export function initialize(
+    moveElementsOnMinimizeParam = true,
+    minimizeOnStart = false,
+    rememberStateOnLoad = false,
+    moveHistoryOnMinimizeParam = true
+) {
+    moveElementsOnMinimize = moveElementsOnMinimizeParam;
+    moveHistoryOnMinimize = moveHistoryOnMinimizeParam;
+
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has('minimized')) {
+        minimizeOnStart = urlParams.get('minimized') === 'true';
+    }
+
+    let isLeftMinimized = minimizeOnStart;
+    let isRightMinimized = minimizeOnStart;
+
+    if (rememberStateOnLoad) {
+        const savedLeftState = localStorage.getItem('leftColMinimized');
+        if (savedLeftState !== null) {
+            isLeftMinimized = savedLeftState === 'true';
+        }
+        const savedRightState = localStorage.getItem('rightColMinimized');
+        if (savedRightState !== null) {
+            isRightMinimized = savedRightState === 'true';
+        }
+    }
+
+    if (isLeftMinimized) {
+        leftCol.classList.add('minimized');
+        toggleLeftBtn.classList.add('active');
+        if (moveElementsOnMinimize) {
+            moveLeftElementsToControls();
+        }
+    }
+
+    if (isRightMinimized) {
+        rightCol.classList.add('minimized');
+        toggleRightBtn.classList.add('active');
+        if (moveHistoryOnMinimize) {
+            moveRightElementsToControls();
+        }
+    }
+
+    toggleLeftBtn.addEventListener('click', () => {
+        handleLeftColumnToggle();
+
+        if (rememberStateOnLoad) {
+            const isMinimizedNow = leftCol.classList.contains('minimized');
+            localStorage.setItem('leftColMinimized', isMinimizedNow);
+        }
+    });
+
+    toggleRightBtn.addEventListener('click', () => {
+        handleRightColumnToggle();
+
+        if (rememberStateOnLoad) {
+            const isMinimizedNow = rightCol.classList.contains('minimized');
+            localStorage.setItem('rightColMinimized', isMinimizedNow);
+        }
+    });
+
+    const mediaQuery = window.matchMedia('(max-width: 576px)');
+    function handleMediaQueryChange(e) {
+        if (e.matches) {
+
+            if (!leftCol.classList.contains('minimized')) {
+                leftCol.classList.add('minimized');
+                toggleLeftBtn.classList.add('active');
+                if (moveElementsOnMinimize) {
+                    moveLeftElementsToControls();
+                }
+            }
+
+            console.log("rightCol", rightCol);
+            console.log("rightCol.classList.contains('minimized')", rightCol.classList.contains('minimized'));
+            console.log("moveHistoryOnMinimize", moveHistoryOnMinimize);
+
+
+            if (!rightCol.classList.contains('minimized')) {
+                rightCol.classList.add('minimized');
+                toggleRightBtn.classList.add('active');
+                if (moveHistoryOnMinimize) {
+                    moveRightElementsToControls();
+                }
+            }
+        } else {
+
+            if (leftCol.classList.contains('minimized') && !isLeftMinimized) {
+                leftCol.classList.remove('minimized');
+                toggleLeftBtn.classList.remove('active');
+                if (moveElementsOnMinimize) {
+                    moveLeftElementsBack();
+                }
+            }
+
+            if (rightCol.classList.contains('minimized') && !isRightMinimized) {
+                rightCol.classList.remove('minimized');
+                toggleRightBtn.classList.remove('active');
+                if (moveHistoryOnMinimize) {
+                    moveRightElementsBack();
+                }
+            }
+        }
+    }
+
+    handleMediaQueryChange(mediaQuery);
+
+    mediaQuery.addEventListener('change', handleMediaQueryChange);
+}
+
+initialize(false, false, false, false);
+
+
+const iconList = {
+    "CFG": `
+            <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+            width="32px" height="32px" viewBox="0 0 512.000000 512.000000"
+                preserveAspectRatio="xMidYMid meet">
+
+                <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+                fill="currentColor"  stroke="none">
+                <path d="M2487 4790 c-92 -24 -179 -97 -219 -185 -31 -70 -31 -180 0 -250 30
+                -65 102 -138 164 -165 l48 -21 0 -212 0 -212 -422 -78 c-233 -43 -702 -130
+                -1043 -193 -341 -63 -632 -120 -647 -125 -36 -15 -54 -60 -38 -98 23 -57 37
+                -57 364 4 164 31 300 55 301 53 2 -2 -136 -251 -306 -553 -411 -729 -373 -652
+                -359 -722 22 -105 69 -177 165 -250 76 -58 134 -87 247 -124 249 -81 574 -73
+                816 21 101 39 219 116 267 174 51 62 87 149 88 210 1 49 -11 72 -346 665 -191
+                338 -345 617 -342 620 4 3 250 51 548 106 l542 101 3 -1138 2 -1138 240 0 240
+                0 0 1183 0 1182 552 102 c304 56 554 101 556 99 2 -2 -151 -277 -339 -612
+                -188 -334 -348 -623 -355 -641 -28 -65 19 -193 100 -276 269 -277 922 -316
+                1281 -75 122 81 198 197 198 302 0 49 -17 81 -361 690 -199 352 -359 642 -357
+                644 3 3 156 33 340 68 185 34 343 68 352 75 25 22 35 60 23 90 -26 61 22 67
+                -1093 -140 -563 -105 -1031 -191 -1040 -191 -15 0 -17 20 -17 195 l0 194 48
+                21 c62 28 136 101 163 164 32 71 32 181 0 252 -27 63 -101 136 -163 164 -54
+                24 -148 33 -201 20z m1806 -1630 c158 -280 287 -512 287 -515 0 -3 -261 -5
+                -580 -5 -319 0 -580 2 -580 5 0 10 574 1025 580 1025 3 0 135 -229 293 -510z
+                m-2880 -480 c158 -280 287 -512 287 -515 0 -3 -261 -5 -580 -5 -319 0 -580 2
+                -580 5 0 10 574 1025 580 1025 3 0 135 -229 293 -510z"/>
+                <path d="M1940 1111 c-110 -34 -170 -114 -178 -237 l-4 -72 -72 -4 c-79 -5
+                -135 -29 -177 -75 -52 -55 -63 -90 -67 -211 -5 -125 5 -163 44 -181 35 -16
+                2113 -16 2148 0 39 18 49 56 44 181 -4 121 -15 156 -67 211 -42 46 -98 70
+                -177 75 l-72 4 -4 72 c-7 105 -49 174 -133 219 -40 22 -46 22 -650 24 -335 1
+                -621 -2 -635 -6z"/>
+                </g>
+            </svg>
+    `,
+    "Steps": `
+        <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+            width="32px" height="32px" viewBox="0 0 512.000000 512.000000"
+            preserveAspectRatio="xMidYMid meet">
+            <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="currentColor" stroke="none">
+            <path d="M1267 4970 c-136 -35 -269 -111 -358 -207 -61 -65 -98 -121 -151
+            -228 -106 -211 -147 -378 -155 -625 -9 -279 28 -449 159 -736 102 -223 288
+            -537 349 -589 63 -52 62 -52 521 56 231 54 435 107 452 117 62 36 69 62 72
+            286 3 232 25 402 80 626 77 313 52 591 -78 857 -107 221 -251 350 -469 424
+            -82 28 -110 32 -219 35 -100 3 -141 0 -203 -16z"/>
+            <path d="M3391 3720 c-40 -11 -106 -35 -146 -55 -302 -145 -461 -436 -458
+            -840 1 -218 29 -323 159 -597 99 -207 172 -418 211 -608 24 -120 31 -139 61
+            -172 20 -23 49 -42 71 -47 20 -5 226 -11 458 -14 418 -5 423 -5 465 16 35 18
+            49 34 75 87 73 147 171 485 214 737 18 110 20 152 16 303 -8 233 -43 388 -137
+            587 -81 173 -239 383 -354 469 -78 60 -201 117 -293 138 -98 22 -249 20 -342
+            -4z"/>
+            <path d="M1735 2509 c-203 -55 -386 -108 -405 -117 -19 -9 -45 -33 -58 -52
+            -22 -32 -24 -42 -18 -115 3 -44 15 -114 26 -155 48 -168 175 -379 292 -485 90
+            -81 262 -145 391 -145 73 0 219 29 276 56 159 72 251 224 251 414 0 143 -66
+            366 -163 554 -62 118 -95 146 -172 145 -30 0 -198 -41 -420 -100z"/>
+            <path d="M3215 1241 c-41 -17 -72 -61 -94 -133 -55 -188 -79 -389 -62 -531 25
+            -213 103 -337 259 -410 59 -28 79 -32 174 -35 134 -5 228 14 341 70 124 63
+            199 142 270 288 99 203 133 404 101 607 -6 38 -45 88 -84 108 -21 11 -120 18
+            -391 30 -403 17 -485 18 -514 6z"/>
+            </g>
+        </svg>
+    `,
+    "Seed": `
+        <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+            width="32px" height="32px" viewBox="0 0 512.000000 512.000000"
+            preserveAspectRatio="xMidYMid meet">
+            <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="currentColor" stroke="none">
+            <path d="M2513 5032 c-160 -298 -265 -733 -252 -1041 2 -44 2 -81 0 -81 -2 0
+            -30 25 -63 55 -112 104 -325 233 -528 321 -104 44 -296 114 -315 114 -27 0
+            107 -344 202 -519 62 -114 171 -274 233 -344 29 -32 51 -59 49 -61 -2 -1 -33
+            -11 -69 -20 -100 -27 -279 -101 -445 -183 -82 -41 -153 -78 -158 -82 -4 -4 41
+            -35 101 -69 249 -142 463 -216 654 -229 l88 -6 -32 -36 c-17 -20 -51 -77 -75
+            -129 -46 -95 -116 -292 -108 -300 6 -6 122 23 235 59 111 37 258 106 326 154
+            l49 35 3 -275 2 -275 150 0 150 0 0 275 c0 151 3 275 6 275 3 0 23 -14 44 -30
+            63 -50 206 -118 335 -159 130 -42 224 -66 230 -59 8 8 -63 206 -108 300 -24
+            52 -58 110 -76 131 l-33 37 55 0 c83 0 212 26 328 65 108 37 324 140 418 198
+            l53 34 -84 45 c-168 91 -428 200 -543 229 -27 6 -52 13 -54 15 -1 1 25 35 59
+            75 155 180 294 437 403 747 28 78 33 102 22 102 -19 0 -211 -70 -315 -114
+            -203 -88 -417 -218 -531 -323 -31 -29 -58 -53 -61 -53 -2 0 -2 34 0 75 13 249
+            -59 612 -174 883 -46 108 -115 242 -124 242 -3 0 -24 -35 -47 -78z"/>
+            <path d="M945 2560 c-148 -24 -315 -98 -455 -204 -113 -84 -294 -273 -403
+            -419 l-89 -117 47 -65 c232 -326 484 -544 732 -634 275 -101 571 -49 851 148
+            138 98 340 308 466 484 l48 67 -88 117 c-155 207 -365 401 -540 500 -186 105
+            -394 150 -569 123z"/>
+            <path d="M3945 2560 c-303 -47 -610 -265 -882 -628 l-85 -112 48 -67 c181
+            -253 414 -470 620 -575 339 -173 648 -142 986 102 162 116 501 508 477 552 -5
+            10 -44 64 -87 121 -99 132 -284 322 -392 403 -105 79 -259 157 -364 184 -93
+            24 -238 32 -321 20z"/>
+            <path d="M2470 1500 c-109 -13 -190 -38 -305 -95 -205 -101 -415 -286 -593
+            -523 l-93 -124 17 -26 c42 -65 180 -234 256 -313 489 -505 994 -544 1495 -116
+            44 37 111 102 150 145 72 80 215 259 233 292 23 44 -284 398 -460 532 -231
+            175 -475 255 -700 228z"/>
+            </g>
+        </svg>
+    `,
+    "Batch Size": `
+    <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+        width="32px" height="32px" viewBox="0 0 512.000000 512.000000"
+        preserveAspectRatio="xMidYMid meet">
+        <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+        fill="currentColor" stroke="none">
+        <path d="M2520 4813 c-33 -6 -2374 -1050 -2422 -1079 -20 -13 -50 -45 -65 -71
+        -53 -90 -30 -216 50 -277 29 -22 2332 -1254 2400 -1284 36 -15 118 -15 154 0
+        69 30 2372 1262 2402 1285 50 38 85 122 78 185 -8 64 -48 132 -95 162 -71 44
+        -2397 1074 -2437 1079 -22 2 -51 3 -65 0z"/>
+        <path d="M118 2820 c-77 -41 -127 -138 -114 -221 9 -57 40 -114 78 -142 18
+        -13 568 -309 1221 -657 1326 -707 1241 -667 1349 -618 96 45 2352 1250 2386
+        1275 91 68 105 216 30 307 -44 53 -95 76 -170 76 l-63 0 -1134 -605 c-624
+        -333 -1138 -605 -1142 -605 -4 0 -517 272 -1140 605 l-1134 605 -65 0 c-44 -1
+        -77 -7 -102 -20z"/>
+        <path d="M145 1976 c-22 -9 -59 -35 -82 -59 -84 -89 -84 -207 0 -293 34 -34
+        258 -157 1177 -647 624 -332 1164 -619 1200 -637 89 -45 151 -45 240 0 36 18
+        576 305 1200 637 919 490 1143 613 1177 647 86 89 84 208 -6 297 -53 54 -111
+        74 -180 65 -32 -4 -351 -170 -1177 -611 l-1134 -604 -1135 605 c-1237 660
+        -1184 635 -1280 600z"/>
+        </g>
+    </svg>
+    `,
+    "Denoise": `
+        <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+        width="32px" height="32px" viewBox="0 0 1589.000000 1335.000000"
+        preserveAspectRatio="xMidYMid meet">
+        <g transform="translate(0.000000,1335.000000) scale(0.100000,-0.100000)"
+        fill="currentColor" stroke="none">
+        <path d="M2382 13329 c-471 -61 -896 -415 -1038 -864 -63 -199 -58 15 -61
+        -2522 l-3 -2313 315 0 315 0 3 2273 c2 2154 4 2275 21 2331 68 226 233 389
+        457 453 62 17 274 18 5554 18 5215 0 5493 -1 5554 -18 226 -62 388 -221 459
+        -447 15 -51 17 -225 19 -2332 l3 -2278 315 0 315 0 0 2279 c0 2002 -2 2289
+        -15 2367 -44 254 -159 484 -334 667 -175 183 -386 303 -651 370 l-85 22 -5540
+        1 c-3047 1 -5568 -2 -5603 -7z"/>
+        <path d="M5090 11755 l0 -315 315 0 315 0 0 315 0 315 -315 0 -315 0 0 -315z"/>
+        <path d="M9537 11433 c-4 -3 -7 -147 -7 -320 l0 -313 320 0 320 0 -2 318 -3
+        317 -311 3 c-171 1 -313 -1 -317 -5z"/>
+        <path d="M2550 10485 l0 -315 315 0 315 0 0 315 0 315 -315 0 -315 0 0 -315z"/>
+        <path d="M6360 10485 l0 -315 315 0 315 0 0 315 0 315 -315 0 -315 0 0 -315z"/>
+        <path d="M12070 10485 l0 -315 320 0 320 0 0 315 0 315 -320 0 -320 0 0 -315z"/>
+        <path d="M4450 9215 l0 -315 320 0 320 0 0 315 0 315 -320 0 -320 0 0 -315z"/>
+        <path d="M8260 9215 l0 -315 320 0 320 0 0 315 0 315 -320 0 -320 0 0 -315z"/>
+        <path d="M10170 8580 l0 -320 315 0 315 0 0 320 0 320 -315 0 -315 0 0 -320z"/>
+        <path d="M10 6675 l0 -315 635 0 635 0 3 -2632 3 -2633 21 -85 c132 -526 521
+        -896 1037 -985 79 -13 694 -15 5600 -15 6017 0 5586 -4 5778 56 375 117 700
+        433 822 802 66 196 60 -53 66 2852 l5 2635 633 3 632 2 0 315 0 315 -7935 0
+        -7935 0 0 -315z m2540 -635 l0 -320 315 0 315 0 2 318 3 317 632 3 633 2 2
+        -317 3 -318 318 -3 317 -2 0 320 0 320 635 0 635 0 0 -635 0 -635 315 0 315 0
+        2 633 3 632 318 3 317 2 0 -320 0 -320 315 0 315 0 2 318 3 317 318 3 317 2 0
+        -320 0 -320 315 0 315 0 2 318 3 317 633 3 632 2 0 -320 0 -320 320 0 320 0 0
+        320 0 320 633 -2 632 -3 3 -317 2 -318 315 0 315 0 2 318 3 317 315 0 315 0 3
+        -632 2 -633 -317 -2 -318 -3 -3 -317 -2 -318 320 0 320 0 0 -635 0 -635 -320
+        0 -320 0 0 -315 0 -315 320 0 320 0 0 -659 c0 -747 -1 -758 -71 -901 -58 -117
+        -162 -221 -279 -279 -131 -64 -186 -71 -581 -71 l-339 0 0 320 0 320 -320 0
+        -320 0 0 -320 0 -320 -315 0 -315 0 0 320 0 320 315 0 315 0 0 315 0 315 -635
+        0 -635 0 0 -635 0 -635 -315 0 -315 0 0 320 0 320 -320 0 -320 0 0 -320 0
+        -320 -632 2 -633 3 0 315 0 315 633 3 632 2 0 635 0 635 -315 0 -315 0 0 -320
+        0 -320 -320 0 -320 0 0 320 0 320 -315 0 -315 0 0 -635 0 -635 -320 0 -320 0
+        0 -320 0 -320 -632 2 -633 3 -3 317 -2 318 -315 0 -315 0 0 -320 0 -320 -635
+        0 -635 0 0 320 0 320 315 0 315 0 0 635 0 635 -315 0 -315 0 0 -320 0 -320
+        -320 0 -320 0 0 -636 0 -636 -372 5 c-406 4 -421 6 -543 66 -191 96 -329 293
+        -343 493 l-5 78 317 0 316 0 0 315 0 315 -317 2 -318 3 -3 633 -2 632 320 0
+        320 0 0 320 0 320 -320 0 -320 0 2 633 3 632 318 3 317 2 0 315 0 315 -317 2
+        -318 3 -3 305 c-1 168 0 310 3 317 3 10 75 13 320 13 l315 0 0 -320z"/>
+        <path d="M3180 5405 l0 -315 -315 0 -315 0 0 -635 0 -635 315 0 315 0 0 -320
+        0 -320 -315 0 -315 0 0 -635 0 -635 315 0 315 0 2 318 3 317 318 3 317 2 0
+        635 0 635 -320 0 -320 0 0 315 0 315 635 0 635 0 0 -315 0 -315 320 0 320 0 0
+        -320 0 -320 -320 0 -320 0 0 -315 0 -315 320 0 320 0 0 -320 0 -320 315 0 315
+        0 0 -315 0 -315 635 0 635 0 0 635 0 635 -315 0 -315 0 0 315 0 315 -320 0
+        -320 0 0 635 0 635 -635 0 -635 0 0 320 0 320 -315 0 -315 0 0 315 0 315 -320
+        0 -320 0 0 -315z m2540 -2540 l0 -315 320 0 320 0 0 -320 0 -320 -320 0 -320
+        0 0 320 0 320 -315 0 -315 0 0 315 0 315 315 0 315 0 0 -315z"/>
+        <path d="M5090 5405 l0 -315 315 0 315 0 0 315 0 315 -315 0 -315 0 0 -315z"/>
+        <path d="M9530 5405 l0 -315 -1270 0 -1270 0 0 -320 0 -320 -315 0 -315 0 0
+        -315 0 -315 315 0 315 0 0 -320 0 -320 635 0 635 0 0 -315 0 -315 320 0 320 0
+        0 315 0 315 -320 0 -320 0 0 320 0 320 320 0 320 0 0 315 0 315 315 0 315 0 0
+        320 0 320 635 0 635 0 0 -635 0 -635 -632 -2 -633 -3 -3 -632 -2 -633 320 0
+        320 0 0 -320 0 -320 315 0 315 0 0 320 0 320 635 0 635 0 0 -320 0 -320 320 0
+        320 0 0 -315 0 -315 315 0 315 0 0 635 0 635 -635 0 -635 0 0 635 0 635 320 0
+        320 0 0 -320 0 -320 315 0 315 0 0 320 0 320 -315 0 -315 0 0 315 0 315 -320
+        0 -320 0 0 320 0 320 320 0 320 0 0 315 0 315 -320 0 -320 0 0 -315 0 -315
+        -635 0 -635 0 0 315 0 315 -635 0 -635 0 0 -315z m-1270 -1270 l0 -315 -635 0
+        -635 0 0 315 0 315 635 0 635 0 0 -315z m3810 0 l0 -315 -315 0 -315 0 0 -320
+        0 -320 -320 0 -320 0 0 -315 0 -315 -315 0 -315 0 0 315 0 315 315 0 315 0 0
+        320 0 320 320 0 320 0 0 315 0 315 315 0 315 0 0 -315z"/>
+        </g>
+        </svg>
+
+    `,    
+};
+
+function updateElementsWithIcons(containerId, iconList, addIcon = true, mode = "replace") {
+    const validModes = ["add", "replace"];
+    if (!validModes.includes(mode)) {
+      console.error(`Invalid mode "${mode}". Expected "add" or "replace".`);
+      return;
+    }
+
+    const container = document.getElementById(containerId);
+    if (!container) {
+      console.warn(`Container with id "${containerId}" not found.`);
+      return;
+    }
+
+    const childDivs = container.querySelectorAll("div");
+    const idSet = new Set();
+    childDivs.forEach(div => {
+      if (div.id) {
+        if (idSet.has(div.id)) {
+          console.warn(`Duplicate ID "${div.id}" found within the container. IDs should be unique.`);
+        } else {
+          idSet.add(div.id);
+        }
+      }
+    });
+
+    childDivs.forEach(function(div) {
+      const labelOrSpan = div.querySelector("label, span");
+      if (labelOrSpan) {
+        const text = labelOrSpan.textContent.trim();
+
+        if (iconList[text]) {
+          if (addIcon) {
+            if (mode.toLowerCase() === "add") {
+              const iconTextContainer = document.createElement("span");
+              iconTextContainer.classList.add("icon-text");
+
+              const iconSpan = document.createElement("span");
+              iconSpan.innerHTML = iconList[text];
+              iconSpan.classList.add("icon");
+              iconSpan.setAttribute('aria-hidden', 'true');
+
+              const textSpan = document.createElement("span");
+              textSpan.textContent = text;
+
+              iconTextContainer.appendChild(iconSpan);
+              iconTextContainer.appendChild(textSpan);
+
+              labelOrSpan.innerHTML = '';
+              labelOrSpan.appendChild(iconTextContainer);
+
+              labelOrSpan.setAttribute('aria-label', text);
+            } else if (mode.toLowerCase() === "replace") {
+              labelOrSpan.innerHTML = iconList[text];
+              labelOrSpan.setAttribute('aria-label', text);
+            }
+          } else {
+          }
+        }
+      }
+    });
+}
diff --git a/web/core/js/common/scripts/stateManagerMain.js b/web/core/js/common/scripts/stateManagerMain.js
new file mode 100644
index 0000000..b44e25a
--- /dev/null
+++ b/web/core/js/common/scripts/stateManagerMain.js
@@ -0,0 +1,119 @@
+class StateManager {
+    constructor(initialState = {}) {
+        // console.log('StateManager initializing with:', initialState);
+        this.state = initialState;
+        this.listeners = new Set();
+        this.history = [];
+        this.historyLimit = 100;
+
+        this.dispatch = this.dispatch.bind(this);
+        this.subscribe = this.subscribe.bind(this);
+        this.getState = this.getState.bind(this);
+        
+        this.state = new Proxy(this.state, {
+            set: () => {
+                throw new Error('Direct state mutation is not allowed. Use dispatch instead.');
+            }
+        });
+    }
+
+    getState() {
+        // console.log('Getting current state:', this.state);
+        return Object.freeze({ ...this.state });
+    }
+
+    subscribe(listener) {
+        console.log('New subscriber added to StateManager');
+        if (typeof listener !== 'function') {
+            throw new TypeError('Listener must be a function');
+        }
+        this.listeners.add(listener);
+        
+        listener(this.getState());
+
+        return () => {
+            console.log('Subscriber removed from StateManager');
+            this.listeners.delete(listener);
+        };
+    }
+
+    dispatch(action) {
+        console.log('Action dispatched:', action);
+        if (!action || typeof action !== 'object' || !action.type) {
+            throw new TypeError('Action must be an object with a type property');
+        }
+
+        try {
+            const nextState = this.reducer(this.state, action);
+            
+            if (nextState === undefined || nextState === null) {
+                throw new Error('Reducer must return a valid state object');
+            }
+
+            // console.log('Previous state:', this.state);
+            // console.log('Next state:', nextState);
+
+            this.state = nextState;
+            
+            this.saveToHistory(action, nextState);
+            
+            this.notifyListeners();
+            
+            return true;
+        } catch (error) {
+            console.error('Error dispatching action:', error);
+            return false;
+        }
+    }
+
+    reducer(state, action) {
+        switch (action.type) {
+            case 'SET_VIEW':
+                return { ...state, view: action.payload };
+            case 'TOGGLE_MASK':
+                return { ...state, hideMask: !state.hideMask };
+            case 'SET_HIDE_MASK':
+                return { ...state, hideMask: action.payload };
+            case 'SET_CROPPED_IMAGE':
+                return { ...state, croppedImage: action.payload };
+            case 'SET_INPAINT_STYLE':
+                return { ...state, inpiantStyle: action.payload };
+            case 'RESET_STATE':
+                return this.constructor.initialState;
+            default:
+                return state;
+        }
+    }
+
+    notifyListeners() {
+        console.log('Notifying', this.listeners.size, 'listeners');
+        this.listeners.forEach(listener => {
+            try {
+                listener(this.getState());
+            } catch (error) {
+                console.error('Error in listener:', error);
+            }
+        });
+    }
+
+    saveToHistory(action, state) {
+        const timestamp = new Date().toISOString();
+        this.history.push({
+            action,
+            state: { ...state },
+            timestamp
+        });
+
+        if (this.history.length > this.historyLimit) {
+            this.history.shift();
+        }
+        console.log('History updated, current length:', this.history.length);
+    }
+}
+
+export const store = new StateManager({
+    view: 'output', // Possible values: 'output', 'canvas', 'splitView'
+    hideMask:false,
+    croppedImage: {},
+    inpiantStyle: 'full', // Possible values: 'full', 'cropped'
+});
diff --git a/web/core/main.js b/web/core/main.js
index a3ac8fe..28a1842 100644
--- a/web/core/main.js
+++ b/web/core/main.js
@@ -2,6 +2,7 @@ import StateManager from './js/common/scripts/stateManager.js';
 import MultiComponent from './js/common/components/MultiComponent.js';
 import InputComponent from "./js/common/components/InputComponent.js";
 import ToggleComponent from "./js/common/components/ToggleComponent.js";
+import DataComponent from "./js/common/components/DataComponent.js";
 import Seeder from "./js/common/components/Seeder.js";
 import Stepper from "./js/common/components/Stepper.js";
 import MultiStepper from "./js/common/components/MultiStepper.js";
@@ -17,15 +18,32 @@ import { fetchWorkflow } from './js/common/scripts/fetchWorkflow.js';
 import { fetchflowConfig } from './js/common/scripts/fetchflowConfig.js'; 
 import { setFaviconStatus } from './js/common/scripts/favicon.js'; 
 import { PreferencesManager } from './js/common/scripts/preferences.js';
+import { initialize } from './js/common/scripts/interactiveUI.js';
 import ThemeManager from './js/common/scripts/ThemeManager.js';
 import injectStylesheet from './js/common/scripts/injectStylesheet.js';
 import LoraWorkflowManager from './js/common/components/LoraWorkflowManager.js';
 import { CanvasLoader } from './js/common/components/canvas/CanvasLoader.js';
 import { checkAndShowMissingPackagesDialog } from './js/common/components/missingPackagesDialog.js';
 import CanvasComponent from './js/common/components/CanvasComponent.js';
+import { store } from  './js/common/scripts/stateManagerMain.js';
 
 (async (window, document, undefined) => {
 
+    const defaultPreferences = {
+        selectedCategories: [],
+        favoritesFilterActive: false,
+        hideDescriptions: false,
+        hideTitles: false,
+        sortValue: 'nameAsc',
+        selectedTheme: null 
+    };
+    
+    const preferencesManager = new PreferencesManager(defaultPreferences);
+    ThemeManager.applyInitialTheme(preferencesManager);
+    const themeManager = new ThemeManager(preferencesManager);
+    themeManager.init();
+
+
     function getFlowName() {
         const scripts = document.getElementsByTagName('script');
         for (let script of scripts) {
@@ -44,7 +62,7 @@ import CanvasComponent from './js/common/components/CanvasComponent.js';
         }
         const paths = window.location.pathname.split('/').filter(Boolean);
         if (paths[0] === 'flow' && paths[1]) {
-            console.log('Flow name from URL path:', paths[1]);
+            console.log('Flow name:', paths[1]);
             return paths[1];
         }
         console.log('Default flow name: linker');
@@ -66,26 +84,9 @@ import CanvasComponent from './js/common/components/CanvasComponent.js';
     console.log("flowConfig", flowConfig);
     console.log("workflow", workflow);
 
-    const defaultPreferences = {
-        selectedCategories: [],
-        favoritesFilterActive: false,
-        hideDescriptions: false,
-        hideTitles: false,
-        sortValue: 'nameAsc',
-        selectedTheme: null 
-    };
-    
-    const preferencesManager = new PreferencesManager(defaultPreferences);
-
-    ThemeManager.applyInitialTheme(preferencesManager);
-    const themeManager = new ThemeManager(preferencesManager);
-    themeManager.init();
 
     function generateWorkflowControls(config) {
         const container = document.getElementById('side-workflow-controls');
-
-        console.log("config", config);
-
         if (config.dropdowns && Array.isArray(config.dropdowns)) {
             config.dropdowns.forEach(dropdown => {
                 const div = document.createElement('div');
@@ -146,7 +147,7 @@ import CanvasComponent from './js/common/components/CanvasComponent.js';
         const promptsContainer = document.getElementById('prompts');
         config.prompts.forEach((input, index) => {
             const titleDiv = document.createElement('div');
-            titleDiv.id = 'title';
+            titleDiv.id = 'prompt';
     
             const labelDiv = document.createElement('div');
             labelDiv.id = 'title-text';
@@ -232,14 +233,26 @@ import CanvasComponent from './js/common/components/CanvasComponent.js';
         });
     }
 
+    if (flowConfig.dataComponents && Array.isArray(flowConfig.dataComponents)) {
+        flowConfig.dataComponents.forEach(config => {
+            new DataComponent(config, workflow);
+        });
+    }
+
+
     imageLoaderComp(flowConfig, workflow);
     
     const initCanvas = async () => {
         canvasLoader = new CanvasLoader('imageCanvas', flowConfig);
-        await canvasLoader.initPromise;  // Wait for initialization to complete
+        await canvasLoader.initPromise;
     
         if (canvasLoader.isInitialized) {
-            console.log("Canvas initialized successfully with selected plugins.");
+            console.log("Canvas initialized successfully.");
+
+            const container = document.getElementById('pluginUIContainer');
+            const quickControls = document.getElementById('quick-controls');
+            container.append(quickControls);
+
         } else {
             console.log("Canvas was not initialized due to missing flowConfig fields.");
         }
@@ -253,7 +266,7 @@ import CanvasComponent from './js/common/components/CanvasComponent.js';
         if (canvasLoader && canvasLoader.isInitialized) {
             await CanvasComponent(flowConfig, workflow, canvasLoader);
         } else {
-            console.warn("Canvas is not initialized. Skipping CanvasComponent.");
+            console.log("Canvas is not initialized. Skipping CanvasComponent.");
         }
 
         console.log("Queueing workflow:", workflow);        
@@ -286,6 +299,10 @@ import CanvasComponent from './js/common/components/CanvasComponent.js';
     }
 
     async function processQueue() {
+        store.dispatch({
+            type: 'TOGGLE_MASK',
+            payload: true
+        });
         if (StateManager.isProcessing()) return;
         
         if (StateManager.getJobQueue().length === 0) {
@@ -324,9 +341,7 @@ import CanvasComponent from './js/common/components/CanvasComponent.js';
             if (!response.ok) {
                 throw new Error('Failed to process prompt.');
             }
-
             const result = await response.json();
-            // console.log('Prompt processed:', result);
         } catch (error) {
             console.error('Error processing prompt:', error);
             throw error;
@@ -334,6 +349,7 @@ import CanvasComponent from './js/common/components/CanvasComponent.js';
             // hideSpinner();
         }
     }
+
     function updateQueueDisplay(jobQueue) {
         const queueDisplay = document.getElementById('queue-display');
         if (!queueDisplay) {
@@ -417,6 +433,8 @@ import CanvasComponent from './js/common/components/CanvasComponent.js';
     });
 
     document.addEventListener('DOMContentLoaded', () => {
+        initialize(false, false, false, false);
+
         const overlay = document.getElementById('css-loading-overlay');
         overlay.classList.add('fade-out');
     
@@ -424,5 +442,6 @@ import CanvasComponent from './js/common/components/CanvasComponent.js';
             overlay.style.display = 'none';
         });
     });
+   
 })(window, document, undefined);
 
diff --git a/web/flow/js/main.js b/web/flow/js/main.js
index de27c53..bc916e8 100644
--- a/web/flow/js/main.js
+++ b/web/flow/js/main.js
@@ -20,8 +20,14 @@ const priorityFlowIds = [
     'n0y8e',
     'yigqn',
     '12slf',
-    '28s1h',
+    '89hf7',
+    '3b1ww',
+    'y2gic',
+    'f9k2j',
+    'k5ttn',
+    '3pw8q',
     '67e3l',
+    'j4wox',
 ]; 
 
 const categoryKeywords = [
@@ -42,6 +48,7 @@ const categoryKeywords = [
     'Mochi',
     'Paint',
     'Inpaint',
+    'Inpainting',
     'Detailer',
     'Canvas',
     'Remover',