Change the save button disabled logic

fix the generation problem

---------

Co-authored-by: Michael Chung <michaelchung@michaels-mbp-2.home>

crates/desktop/artcraft/src/commands/app_preferences/update_app_preference_command.rs

@@ -29,9 +29,10 @@ pub enum ValueType {
 pub enum PreferenceName {
   PreferredDownloadDirectory,
   PlaySounds,
+  EnqueueSuccessSound,
+  EnqueueFailureSound,
   GenerationSuccessSound,
   GenerationFailureSound,
-  GenerationEnqueueSound,
 }
 
 #[derive(Serialize)]
@@ -85,6 +86,16 @@ async fn update_prefs(
           return Err(anyhow!("Invalid value: {:?}", request.value)),
       }
     }
+    PreferenceName::EnqueueSuccessSound => {
+      prefs.enqueue_success_sound = request.value
+          .map(|val| string_value(&val))
+          .transpose()?;
+    }
+    PreferenceName::EnqueueFailureSound => {
+      prefs.enqueue_failure_sound = request.value
+          .map(|val| string_value(&val))
+          .transpose()?;
+    }
     PreferenceName::GenerationSuccessSound => {
       prefs.generation_success_sound = request.value
           .map(|val| string_value(&val))
@@ -95,11 +106,6 @@ async fn update_prefs(
           .map(|val| string_value(&val))
           .transpose()?;
     }
-    PreferenceName::GenerationEnqueueSound => {
-      prefs.generation_enqueue_sound = request.value
-          .map(|val| string_value(&val))
-          .transpose()?;
-    }
   }
   
   app_prefs.set_clone(&prefs)?;

crates/desktop/artcraft/src/commands/command_response_wrapper.rs

@@ -3,7 +3,11 @@ use std::error::Error;
 use std::str::FromStr;
 
 /// Easy to use Result<T, E> type.
-pub type CommandResult<T, E> = Result<CommandSuccessResponseWrapper<T>, CommandErrorResponseWrapper<E>>;
+pub type CommandResult<SuccessPayload, ErrType, ErrPayload> = 
+  Result<CommandSuccessResponseWrapper<SuccessPayload>, CommandErrorResponseWrapper<ErrType, ErrPayload>>;
+
+/// No inner payloads for this type. Just strings as messages.
+pub type SimpleCommandResult = CommandResult<(), (), ()>;
 
 /// Statuses for successful commands.
 #[derive(Serialize, Clone, Debug)]
@@ -18,6 +22,7 @@ pub enum CommandSuccessStatus {
 pub enum CommandErrorStatus {
   BadRequest, // 400
   Unauthorized, // 401
+  TooManyRequests, // 429
   ServerError, // 500
 }
 
@@ -34,15 +39,22 @@ pub struct CommandSuccessResponseWrapper<T: Serialize> {
 }
 
 #[derive(Serialize, Debug)]
-pub struct CommandErrorResponseWrapper<T: Serialize> {
+pub struct CommandErrorResponseWrapper<ErrType: Serialize, ErrPayload: Serialize> {
   /// Both "success" and "error" types have a `status` field for the frontend.
   pub status: CommandErrorStatus,
 
   #[serde(skip_serializing_if = "Option::is_none")]
   pub error_message: Option<String>,
   
+  /// Represents a "type" of error, preferably an enum without payloads.
+  /// Preferably this serializes to a string.
   #[serde(skip_serializing_if = "Option::is_none")]
-  pub error_details: Option<T>,
+  pub error_type: Option<ErrType>,
+  
+  /// Represents a full error details object or payload.
+  /// This could be a structure, message, or whatever.
+  #[serde(skip_serializing_if = "Option::is_none")]
+  pub error_details: Option<ErrPayload>,
 }
 
 
@@ -96,11 +108,12 @@ impl From<&str> for CommandSuccessResponseWrapper<String> {
   }
 }
 
-impl From<&str> for CommandErrorResponseWrapper<String> {
+impl From<&str> for CommandErrorResponseWrapper<(), ()> {
   fn from(value: &str) -> Self {
     CommandErrorResponseWrapper {
       status: CommandErrorStatus::BadRequest, // NB: Default to 500 error.
       error_message: Some(value.to_string()),
+      error_type: None,
       error_details: None,
     }
   }

crates/desktop/artcraft/src/commands/sora/check_sora_session_command.rs

@@ -1,3 +1,5 @@
+use std::ops::Add;
+use chrono::{DateTime, TimeDelta, Utc};
 use crate::commands::app_preferences::get_app_preferences_command::AppPreferencesPayload;
 use crate::state::app_preferences::app_preferences_manager::AppPreferencesManager;
 use crate::state::data_dir::app_data_root::AppDataRoot;
@@ -12,6 +14,8 @@ use openai_sora_client::requests::list_media::list_media::list_media;
 use serde_derive::Serialize;
 use tauri::{AppHandle, State};
 
+const CACHE_PERIOD : TimeDelta = TimeDelta::milliseconds(1000 * 60 * 5); // 5 minutes
+
 #[derive(Serialize)]
 #[serde(rename_all = "snake_case")]
 pub struct CheckSoraSessionCommand {
@@ -63,10 +67,35 @@ async fn do_check(
       });
     }
   };
+
+  let mut needs_upgrade_or_check = false;
   
-  let upgraded = maybe_upgrade_or_renew_session(&mut creds).await?;
+  let stats = sora_creds_manager.get_credential_stats()?;
+
+  match stats.last_consecutive_credential_success {
+    None => {
+      info!("Session never checked, needs upgrade or status checking.");
+      needs_upgrade_or_check= true;
+    }
+    Some(last_success) => {
+      let now = chrono::Utc::now();
+      let expires = last_success.add(CACHE_PERIOD);
+      if now.gt(&expires) {
+        info!("Session success expired, needs upgrade or status checking.");
+        needs_upgrade_or_check = true;
+      }
+    }
+  }
   
-  list_media(&creds).await?;
+  let mut upgraded = false;
+  
+  if needs_upgrade_or_check {
+    info!("Attempting to upgrade session...");
+    upgraded = maybe_upgrade_or_renew_session(&mut creds).await?;
+    info!("Attempting to check session...");
+    list_media(&creds).await?;
+    sora_creds_manager.record_credential_success()?;
+  }
 
   if upgraded {
     info!("Saving upgraded session to manager and disk...");

crates/desktop/artcraft/src/commands/sora/sora_image_generation_command.rs

@@ -14,8 +14,13 @@ use openai_sora_client::requests::image_gen::sora_image_gen_remix::{sora_image_g
 use openai_sora_client::requests::upload::upload_media_from_bytes::sora_media_upload_from_bytes;
 use std::fs::read_to_string;
 use std::io::Cursor;
+use std::time::Duration;
 use tauri::{AppHandle, Manager, State};
 
+const SORA_IMAGE_UPLOAD_TIMEOUT: Duration = Duration::from_millis(1000 * 30); // 30 seconds
+
+const SORA_IMAGE_REMIX_TIMEOUT: Duration = Duration::from_millis(1000 * 30); // 30 seconds
+
 #[tauri::command]
 pub async fn sora_image_generation_command(
   prompt: &str,
@@ -55,8 +60,13 @@ pub async fn generate_image(
     let image_bytes = BASE64_STANDARD.decode(image)?;
 
     let filename = "image.png".to_string();
+    
 
-    let response = sora_media_upload_from_bytes(image_bytes, filename, CredentialMigrationRef::New(&creds))
+    let response = sora_media_upload_from_bytes(
+      image_bytes, 
+      filename, 
+      CredentialMigrationRef::New(&creds), 
+      Some(SORA_IMAGE_UPLOAD_TIMEOUT))
         .await
         .map_err(|err| {
           error!("Failed to upload image to Sora: {:?}", err);
@@ -72,6 +82,7 @@ pub async fn generate_image(
     image_size: ImageSize::Square,
     sora_media_tokens: sora_media_tokens.clone(),
     credentials: CredentialMigrationRef::New(&creds),
+    request_timeout: Some(SORA_IMAGE_REMIX_TIMEOUT),
   }).await
       .map_err(|err| {
         error!("Failed to call Sora image generation: {:?}", err);

crates/desktop/artcraft/src/commands/sora/sora_image_remix_command.rs

@@ -1,4 +1,4 @@
-use crate::commands::command_response_wrapper::CommandResult;
+use crate::commands::command_response_wrapper::{CommandErrorResponseWrapper, CommandErrorStatus, CommandResult};
 use crate::events::sendable_event_trait::SendableEvent;
 use crate::events::sora::sora_image_enqueue_failure_event::SoraImageEnqueueFailureEvent;
 use crate::events::sora::sora_image_enqueue_success_event::SoraImageEnqueueSuccessEvent;
@@ -12,7 +12,7 @@ use crate::utils::get_url_file_extension::get_url_file_extension;
 use crate::utils::simple_http_download::simple_http_download;
 use base64::prelude::BASE64_STANDARD;
 use base64::Engine;
-use errors::AnyhowResult;
+use errors::{AnyhowError, AnyhowResult};
 use image::codecs::png::{CompressionType, FilterType, PngEncoder};
 use image::{DynamicImage, ImageReader};
 use log::{debug, error, info};
@@ -25,14 +25,22 @@ use openai_sora_client::requests::image_gen::common::{ImageSize, NumImages};
 use openai_sora_client::requests::image_gen::sora_image_gen_remix::{sora_image_gen_remix, SoraImageGenRemixRequest};
 use openai_sora_client::requests::upload::upload_media_from_bytes::sora_media_upload_from_bytes;
 use openai_sora_client::requests::upload::upload_media_from_file::sora_media_upload_from_file;
+use openai_sora_client::sora_error::SoraError;
 use serde_derive::{Deserialize, Serialize};
 use std::fs::read_to_string;
 use std::io::Cursor;
+use std::time::Duration;
+use storyteller_client::api_error::ApiError;
+use storyteller_client::api_error::ApiError::InternalServerError;
 use storyteller_client::media_files::get_media_file::get_media_file;
 use storyteller_client::utils::api_host::ApiHost;
 use tauri::{AppHandle, Emitter, Manager, State};
 use tokens::tokens::media_files::MediaFileToken;
 
+const SORA_IMAGE_UPLOAD_TIMEOUT: Duration = Duration::from_millis(1000 * 30); // 30 seconds
+
+const SORA_IMAGE_REMIX_TIMEOUT: Duration = Duration::from_millis(1000 * 30); // 30 seconds
+
 #[derive(Deserialize)]
 pub struct SoraImageRemixCommand {
   /// Image media file; the engine or canvas snapshot (screenshot).
@@ -50,6 +58,20 @@ pub struct SoraImageRemixCommand {
   pub maybe_number_of_samples: Option<u32>,
 }
 
+#[derive(Serialize, Debug)]
+#[serde(rename_all = "snake_case")]
+pub enum SoraImageRemixErrorType {
+  /// Generic server error
+  ServerError,
+  /// The user is sending too many requests
+  TooManyConcurrentTasks,
+  /// The user needs to create a Sora account
+  SoraUsernameNotYetCreated,
+  /// The Sora service is having problems. Try again soon.
+  SoraIsHavingProblems,
+}
+
+
 #[tauri::command]
 pub async fn sora_image_remix_command(
   app: AppHandle,
@@ -57,7 +79,7 @@ pub async fn sora_image_remix_command(
   app_data_root: State<'_, AppDataRoot>,
   sora_creds_manager: State<'_, SoraCredentialManager>,
   sora_task_queue: State<'_, SoraTaskQueue>,
-) -> CommandResult<(), String> {
+) -> CommandResult<(), SoraImageRemixErrorType, ()> {
   
   info!("image_generation_command called; scene media token: {:?}, additional images: {:?}", 
     request.snapshot_media_token, request.maybe_additional_images);
@@ -66,27 +88,83 @@ pub async fn sora_image_remix_command(
 
   let result = generate_image(request, &app_data_root, &sora_creds_manager, &sora_task_queue).await;
   
-  if let Err(err) = result {
-    error!("error: {:?}", err);
+  match result {
+    Err(err) => {
+      error!("error: {:?}", err);
 
-    let event = SoraImageEnqueueFailureEvent {};
-    let result = event.send(&app);
+      let event = SoraImageEnqueueFailureEvent {};
+      let result = event.send(&app);
 
-    if let Err(err) = result {
-      error!("Failed to emit event: {:?}", err);
+      if let Err(err) = result {
+        error!("Failed to emit event: {:?}", err);
+      }
+      
+      let mut status = CommandErrorStatus::ServerError;
+      let mut error_type = SoraImageRemixErrorType::ServerError;
+      let mut error_message = "A server error occurred. Please try again. If it continues, please tell our staff about the problem.";
+      
+      match (err) {
+        InnerError::SoraError(SoraError::TooManyConcurrentTasks) => {
+          error_type = SoraImageRemixErrorType::TooManyConcurrentTasks;
+          status = CommandErrorStatus::ServerError;
+          error_message = "You already have work in progress. Please wait for it to finish.";
+        },
+        InnerError::SoraError(SoraError::SoraUsernameNotYetCreated) => {
+          error_type = SoraImageRemixErrorType::SoraUsernameNotYetCreated;
+          status = CommandErrorStatus::BadRequest;
+          error_message = "You need to create a username on Sora.com to continue.";
+        },
+        InnerError::SoraError(SoraError::BadGateway(_) | SoraError::CloudFlareTimeout(_)) => {
+          error_type = SoraImageRemixErrorType::SoraIsHavingProblems;
+          status = CommandErrorStatus::ServerError;
+          error_message = "Sora is having problems. Please wait a moment and then retry.";
+        }
+        _ => {},
+      }
+
+      Err(CommandErrorResponseWrapper {
+        status,
+        error_message: Some(error_message.to_string()),
+        error_type: Some(error_type),
+        error_details: None,
+      })
+    }
+    Ok(_) => {
+      let event = SoraImageEnqueueSuccessEvent {};
+      let result = event.send(&app);
+
+      if let Err(err) = result {
+        error!("Failed to emit event: {:?}", err);
+      }
+
+      Ok(().into())
     }
-    
-    return Err("there was an error".into());
   }
+}
 
-  let event = SoraImageEnqueueSuccessEvent {};
-  let result = event.send(&app);
+#[derive(Debug)]
+enum InnerError {
+  SoraError(SoraError),
+  AnyhowError(AnyhowError),
+  StorytellerApiError(ApiError),
+}
 
-  if let Err(err) = result {
-    error!("Failed to emit event: {:?}", err);
+impl From<AnyhowError> for InnerError {
+  fn from(value: AnyhowError) -> Self {
+    Self::AnyhowError(value)
   }
+}
 
-  Ok(().into())
+impl From<SoraError> for InnerError {
+  fn from(value: SoraError) -> Self {
+    Self::SoraError(value)
+  }
+}
+
+impl From<ApiError> for InnerError {
+  fn from(value: ApiError) -> Self {
+    Self::StorytellerApiError(value)
+  }
 }
 
 pub async fn generate_image(
@@ -94,7 +172,7 @@ pub async fn generate_image(
   app_data_root: &AppDataRoot,
   sora_creds_manager: &SoraCredentialManager,
   sora_task_queue: &SoraTaskQueue,
-) -> AnyhowResult<()> {
+) -> Result<(), InnerError> {
 
   let response = get_media_file(&ApiHost::Storyteller, &request.snapshot_media_token).await?;
 
@@ -133,6 +211,7 @@ pub async fn generate_image(
         image_upload_from_file_with_session_auto_renew(ImageUploadFromFileAutoRenewRequest {
           file_path,
           credentials: &creds,
+          request_timeout: Some(SORA_IMAGE_UPLOAD_TIMEOUT),
         }).await?;
 
     if let Some(new_creds) = maybe_new_credentials {
@@ -157,6 +236,7 @@ pub async fn generate_image(
         image_size: ImageSize::Square,
         sora_media_tokens: sora_media_tokens.clone(),
         credentials: &creds,
+        request_timeout: Some(SORA_IMAGE_REMIX_TIMEOUT),
       }).await?;
 
   if let Some(new_creds) = maybe_new_creds {

crates/desktop/artcraft/src/commands/sora/sora_logout_command.rs

@@ -1,5 +1,5 @@
 use crate::commands::app_preferences::get_app_preferences_command::AppPreferencesPayload;
-use crate::commands::command_response_wrapper::{CommandResult, CommandSuccessResponseWrapper};
+use crate::commands::command_response_wrapper::{CommandResult, CommandSuccessResponseWrapper, SimpleCommandResult};
 use crate::state::app_preferences::app_preferences_manager::AppPreferencesManager;
 use crate::state::data_dir::app_data_root::AppDataRoot;
 use crate::state::sora::sora_credential_manager::SoraCredentialManager;
@@ -17,7 +17,7 @@ use tauri::{AppHandle, State};
 #[tauri::command]
 pub async fn sora_logout_command(
   sora_creds_manager: State<'_, SoraCredentialManager>,
-) -> CommandResult<(), String> {
+) -> SimpleCommandResult {
   info!("sora_logout_command called");
 
   if let Err(err) = sora_creds_manager.purge_credentials_from_disk() {
@@ -30,6 +30,10 @@ pub async fn sora_logout_command(
     return Err("error clearing credentials from memory".into());
   }
   
+  if let Err(err) = sora_creds_manager.reset_credential_stats() {
+    error!("Error resetting credential stats: {:?}", err);
+    return Err("error resetting credential stats".into());
+  }
+  
   Ok(().into())
 }
-

crates/desktop/artcraft/src/lib.rs

@@ -18,6 +18,7 @@ use crate::commands::sora::sora_image_remix_command::sora_image_remix_command;
 use crate::commands::sora::sora_logout_command::sora_logout_command;
 use crate::state::app_preferences::app_preferences_manager::load_app_preferences_or_default;
 use crate::state::data_dir::app_data_root::AppDataRoot;
+use crate::state::main_window_position::MainWindowPosition;
 use crate::state::main_window_size::MainWindowSize;
 use crate::state::sora::sora_credential_manager::SoraCredentialManager;
 use crate::state::sora::sora_task_queue::SoraTaskQueue;
@@ -110,6 +111,20 @@ pub fn run() {
         }
       }
 
+      match MainWindowPosition::from_filesystem_configs(&app_data_root_3) {
+        Ok(None) => {}
+        Ok(Some(pos)) => {
+          println!("Moving window to: {:?}", pos);
+          let result = pos.apply_to_main_window(&app);
+          if let Err(err) = result {
+            eprintln!("Could not set window position: {:?}", err);
+          }
+        }
+        Err(err) => {
+          eprintln!("Failed to read window position from disk: {:?}", err);
+        }
+      }
+
       tauri::async_runtime::spawn(main_window_thread(app_3, app_data_root_3, storyteller_creds_manager_2));
       tauri::async_runtime::spawn(sora_task_polling_thread(app_4, app_data_root_4, sora_creds_manager_3, storyteller_creds_manager_3, sora_task_queue_2));
       tauri::async_runtime::spawn(discord_presence_thread());

crates/desktop/artcraft/src/state/data_dir/app_data_root.rs

@@ -136,6 +136,10 @@ impl AppDataRoot {
   pub fn get_window_size_config_file(&self) -> PathBuf {
     self.path.join("window_size.json")
   }
+  
+  pub fn get_window_position_config_file(&self) -> PathBuf {
+    self.path.join("window_position.json")
+  }
 }
 
 // eg. /home/bob/artcraft, /Users/bob/artcraft, or C:\Users\Alice\artcraft

crates/desktop/artcraft/src/state/main_window_position.rs

@@ -0,0 +1,73 @@
+use crate::state::data_dir::app_data_root::AppDataRoot;
+use crate::windows::main_window::constants::MAIN_WINDOW_NAME;
+use errors::AnyhowResult;
+use serde_derive::{Deserialize, Serialize};
+use std::fs::OpenOptions;
+use std::io::Write;
+use tauri::{AppHandle, Manager, PhysicalPosition, Window};
+
+#[derive(Serialize, Deserialize, Clone, Debug, Eq, PartialEq)]
+pub struct MainWindowPosition {
+  pub x: i32,
+  pub y: i32,
+}
+
+impl MainWindowPosition {
+  pub fn new(x: i32, y: i32) -> Self {
+    Self { x, y }
+  }
+
+  pub fn from_main_window(app: &AppHandle) -> AnyhowResult<Self> {
+    let windows = app.windows();
+    windows.get(MAIN_WINDOW_NAME)
+        .map(|window| Self::from_window(window))
+        .unwrap_or_else(|| Err(anyhow::anyhow!("Main window not found")))
+  }
+
+  pub fn from_window(window: &Window) -> AnyhowResult<Self> {
+    let position = window.outer_position()?;
+    Ok(Self {
+      x: position.x,
+      y: position.y,
+    })
+  }
+
+  pub fn from_filesystem_configs(app_data_root: &AppDataRoot) -> AnyhowResult<Option<Self>> {
+    let filename = app_data_root.get_window_position_config_file();
+    if !filename.exists() {
+      return Ok(None);
+    }
+    let contents = std::fs::read_to_string(filename)?;
+    let pos : MainWindowPosition = serde_json::from_str(&contents)?;
+    Ok(Some(pos))
+  }
+
+  pub fn apply_to_main_window(&self, app: &AppHandle) -> AnyhowResult<()> {
+    let windows = app.windows();
+    let window = windows.get(MAIN_WINDOW_NAME)
+        .ok_or_else(|| anyhow::anyhow!("Main window not found"))?;
+    window.set_position(PhysicalPosition::new(self.x, self.y))?;
+    Ok(())
+  }
+
+  pub fn persist_to_filesystem(&self, app_data_root: &AppDataRoot) -> AnyhowResult<()> {
+    let filename = app_data_root.get_window_position_config_file();
+    let json = serde_json::to_string(self)?;
+    let mut file = OpenOptions::new()
+        .create(true)
+        .write(true)
+        .truncate(true)
+        .open(filename)?;
+    file.write_all(json.as_bytes())?;
+    file.flush()?;
+    Ok(())
+  }
+
+  pub fn to_physical_position(&self) -> PhysicalPosition<i32> {
+    PhysicalPosition::new(self.x, self.y)
+  }
+
+  pub fn matches_physical_position(&self, pos: &PhysicalPosition<i32>) -> bool {
+    self.x == pos.x && self.y == pos.y
+  }
+}

crates/desktop/artcraft/src/state/main_window_size.rs

@@ -1,12 +1,12 @@
 use crate::state::data_dir::app_data_root::AppDataRoot;
+use crate::utils::best_window_size_heuristic::best_window_size_heuristic;
+use crate::windows::main_window::constants::MAIN_WINDOW_NAME;
 use errors::AnyhowResult;
 use serde_derive::{Deserialize, Serialize};
 use std::fs::OpenOptions;
 use std::io::Write;
 use tauri::{AppHandle, Manager, PhysicalSize, Window};
 
-const MAIN_WINDOW_NAME: &str = "main";
-
 #[derive(Serialize, Deserialize, Clone, Debug, Eq, PartialEq)]
 pub struct MainWindowSize {
   pub width: u32,
@@ -26,7 +26,7 @@ impl MainWindowSize {
   }
 
   pub fn from_window(window: &Window) -> AnyhowResult<Self> {
-    let size = window.inner_size()?;
+    let size = best_window_size_heuristic(window)?;
     Ok(Self {
       width: size.width,
       height: size.height,

crates/desktop/artcraft/src/state/mod.rs

@@ -2,6 +2,7 @@ pub mod app_preferences;
 pub mod app_startup_time;
 pub mod data_dir;
 pub mod expanduser;
+pub mod main_window_position;
 pub mod main_window_size;
 pub mod os_platform;
 pub mod sora;

crates/desktop/artcraft/src/state/sora/mod.rs

@@ -2,4 +2,5 @@ pub mod read_sora_credentials_from_disk;
 pub mod read_sora_credentials_from_disk_with_upgrade;
 pub mod sora_credential_holder;
 pub mod sora_credential_manager;
+pub mod sora_credential_stats;
 pub mod sora_task_queue;

crates/desktop/artcraft/src/state/sora/sora_credential_manager.rs

@@ -1,23 +1,29 @@
-use std::{fs, io};
 use crate::state::data_dir::app_data_root::AppDataRoot;
 use crate::state::sora::read_sora_credentials_from_disk::read_sora_credentials_from_disk;
 use crate::state::sora::sora_credential_holder::SoraCredentialHolder;
+use crate::state::sora::sora_credential_stats::SoraCredentialStats;
 use anyhow::anyhow;
 use errors::AnyhowResult;
 use log::{error, info, warn};
+use memory_store::clone_cell::CloneCell;
+use openai_sora_client::creds::sora_cookies::SoraCookies;
 use openai_sora_client::creds::sora_credential_set::SoraCredentialSet;
+use openai_sora_client::creds::sora_jwt_bearer_token::SoraJwtBearerToken;
 use openai_sora_client::creds::sora_sentinel::SoraSentinel;
 use openai_sora_client::requests::sentinel_refresh::generate::token::generate_token;
 use std::fs::OpenOptions;
 use std::io::Write;
 use std::path::Path;
-use openai_sora_client::creds::sora_cookies::SoraCookies;
-use openai_sora_client::creds::sora_jwt_bearer_token::SoraJwtBearerToken;
+use std::{fs, io};
 
 #[derive(Clone)]
 pub struct SoraCredentialManager {
   holder: SoraCredentialHolder,
   app_data_root: AppDataRoot,
+  
+  /// This is meant to help debug credential issues, keep credentials cached, fresh, etc.
+  // TODO: Put this into the same structure as the credentials and also persist to disk.
+  stats: CloneCell<SoraCredentialStats>,
 }
 
 impl SoraCredentialManager {
@@ -35,9 +41,36 @@ impl SoraCredentialManager {
     Self {
       holder,
       app_data_root: app_data_root.clone(),
+      stats: CloneCell::with_owned(SoraCredentialStats::new()),
     }
   }
 
+  pub fn record_credential_success(&self) -> AnyhowResult<()> {
+    let mut stats = self.stats.get_clone()?;
+    stats.record_credential_success();
+    self.stats.set_owned(stats)?;
+    Ok(())
+  }
+
+  pub fn record_credential_failure(&self) -> AnyhowResult<()> {
+    let mut stats = self.stats.get_clone()?;
+    stats.record_credential_failure();
+    self.stats.set_owned(stats)?;
+    Ok(())
+  }
+  
+  pub fn reset_credential_stats(&self) -> AnyhowResult<()> {
+    self.stats.set_owned(SoraCredentialStats::new())
+  }
+  
+  pub fn get_credential_stats(&self) -> AnyhowResult<SoraCredentialStats> {
+    self.stats.get_clone()
+  }
+
+  pub fn set_credential_stats(&self, stats: SoraCredentialStats) -> AnyhowResult<()> {
+    self.stats.set_owned(stats)
+  }
+
   pub fn set_credentials(&self, creds: &SoraCredentialSet) -> AnyhowResult<()> {
     self.holder.set_credentials(creds)
   }

crates/desktop/artcraft/src/state/sora/sora_credential_stats.rs

@@ -0,0 +1,47 @@
+
+/// This is meant to track 401s and other credential failures, not 500s.
+#[derive(Clone)]
+pub struct SoraCredentialStats {
+  pub last_credential_failure: Option<chrono::DateTime<chrono::Utc>>,
+  pub last_credential_success: Option<chrono::DateTime<chrono::Utc>>,
+  pub credential_success_count: u32,
+  pub credential_failure_count: u32,
+  /// This resets on each failure
+  pub last_consecutive_credential_success: Option<chrono::DateTime<chrono::Utc>>,
+  /// This resets on each failure
+  pub consecutive_credential_success_count: u32,
+  /// This resets on each success
+  pub consecutive_credential_failure_count: u32,
+}
+
+impl SoraCredentialStats {
+  pub fn new() -> Self {
+    Self {
+      last_credential_failure: None,
+      last_credential_success: None,
+      last_consecutive_credential_success: None,
+      credential_success_count: 0,
+      credential_failure_count: 0,
+      consecutive_credential_success_count: 0,
+      consecutive_credential_failure_count: 0,
+    }
+  }
+  
+  pub fn record_credential_success(&mut self) {
+    let now = chrono::Utc::now();
+    self.last_credential_success = Some(now);
+    self.last_consecutive_credential_success = Some(now);
+    self.credential_success_count += 1;
+    self.consecutive_credential_success_count += 1;
+    self.consecutive_credential_failure_count = 0;
+  }
+
+  pub fn record_credential_failure(&mut self) {
+    let now = chrono::Utc::now();
+    self.last_credential_failure = Some(now);
+    self.last_consecutive_credential_success = None;
+    self.credential_failure_count += 1;
+    self.consecutive_credential_failure_count += 1;
+    self.consecutive_credential_success_count = 0;
+  }
+}

crates/desktop/artcraft/src/threads/main_window_thread/main_window_thread.rs

@@ -1,13 +1,15 @@
+use crate::state::app_startup_time::AppStartupTime;
 use crate::state::data_dir::app_data_root::AppDataRoot;
+use crate::state::main_window_position::MainWindowPosition;
 use crate::state::main_window_size::MainWindowSize;
 use crate::state::storyteller::storyteller_credential_manager::StorytellerCredentialManager;
 use crate::threads::main_window_thread::persist_storyteller_cookies_task::persist_storyteller_cookies_task;
+use crate::threads::main_window_thread::persist_window_position_task::persist_window_position_task;
 use crate::threads::main_window_thread::persist_window_resize_task::persist_window_resize_task;
 use errors::AnyhowResult;
 use log::{error, info};
 use memory_store::clone_slot::CloneSlot;
 use tauri::{AppHandle, Manager, Webview, Window};
-use crate::state::app_startup_time::AppStartupTime;
 
 const MAIN_WINDOW_NAME : &str = "main";
 
@@ -18,6 +20,7 @@ pub async fn main_window_thread(
 ) -> ! {
   // TODO: Move these into some kind of dependency injection framework
   let window_size_slot: CloneSlot<MainWindowSize> = CloneSlot::empty();
+  let window_pos_slot: CloneSlot<MainWindowPosition> = CloneSlot::empty();
   let app_startup_time = AppStartupTime::new();
 
   loop {
@@ -29,6 +32,7 @@ pub async fn main_window_thread(
           &app_data_root,
           &storyteller_creds_manager,
           &window_size_slot,
+          &window_pos_slot,
           &app_startup_time,
         ).await;
         if let Err(err) = result {
@@ -46,10 +50,12 @@ pub async fn handle_main_window(
   app_data_root: &AppDataRoot,
   storyteller_creds_manager: &StorytellerCredentialManager,
   window_size_slot: &CloneSlot<MainWindowSize>,
+  window_pos_slot: &CloneSlot<MainWindowPosition>,
   app_startup_time: &AppStartupTime,
 ) -> AnyhowResult<()> {
   loop {
     log_errors(persist_window_resize_task(window, app_data_root, window_size_slot).await);
+    log_errors(persist_window_position_task(window, app_data_root, window_pos_slot).await);
     log_errors(persist_storyteller_cookies_task(app, storyteller_creds_manager, app_startup_time).await);
     tokio::time::sleep(std::time::Duration::from_millis(1_000)).await;
   }

crates/desktop/artcraft/src/threads/main_window_thread/mod.rs

@@ -1,3 +1,4 @@
 pub mod main_window_thread;
 pub mod persist_storyteller_cookies_task;
+pub mod persist_window_position_task;
 pub mod persist_window_resize_task;

crates/desktop/artcraft/src/threads/main_window_thread/persist_window_position_task.rs

@@ -0,0 +1,34 @@
+use crate::state::data_dir::app_data_root::AppDataRoot;
+use crate::state::main_window_position::MainWindowPosition;
+use crate::state::main_window_size::MainWindowSize;
+use crate::utils::best_window_size_heuristic::best_window_size_heuristic;
+use errors::AnyhowResult;
+use log::info;
+use memory_store::clone_slot::CloneSlot;
+use tauri::Window;
+
+pub async fn persist_window_position_task(
+  window: &Window,
+  app_data_root: &AppDataRoot,
+  window_pos_slot: &CloneSlot<MainWindowPosition>,
+) -> AnyhowResult<()> {
+
+  let current_window_position = MainWindowPosition::from_window(window)?;
+  let current_physical_pos = window.outer_position()?;
+
+  let mut save_size_to_disk = true;
+
+  if let Ok(Some(old_size)) = window_pos_slot.get_clone() {
+    if old_size.matches_physical_position(&current_physical_pos) {
+      save_size_to_disk = false;
+    }
+  }
+
+  if save_size_to_disk {
+    info!("Saving window position configs to disk...");
+    current_window_position.persist_to_filesystem(app_data_root)?;
+    window_pos_slot.set_clone(&current_window_position)?;
+  }
+
+  Ok(())
+}

crates/desktop/artcraft/src/threads/main_window_thread/persist_window_resize_task.rs

@@ -1,5 +1,6 @@
 use crate::state::data_dir::app_data_root::AppDataRoot;
 use crate::state::main_window_size::MainWindowSize;
+use crate::utils::best_window_size_heuristic::best_window_size_heuristic;
 use errors::AnyhowResult;
 use log::info;
 use memory_store::clone_slot::CloneSlot;
@@ -12,7 +13,7 @@ pub async fn persist_window_resize_task(
 ) -> AnyhowResult<()> {
 
   let current_window_size = MainWindowSize::from_window(window)?;
-  let current_physical_size = window.inner_size()?;
+  let current_physical_size = best_window_size_heuristic(window)?;
 
   let mut save_size_to_disk = true;
   

crates/desktop/artcraft/src/utils/best_window_size_heuristic.rs

@@ -0,0 +1,25 @@
+use tauri::{PhysicalSize, Window};
+use errors::AnyhowResult;
+
+// A typical height difference when dev tools are open:
+//   Window inner size = PhysicalSize { width: 3704, height: 732 }
+//   Window outer size = PhysicalSize { width: 3704, height: 1476 }
+const HEIGHT_DIFFERENCE_THRESHOLD: u32 = 300;
+
+/// Get the best window size
+pub fn best_window_size_heuristic(window: &Window) -> AnyhowResult<PhysicalSize<u32>> {
+  // NB: Ordinarily we'd use inner size, as the outer size includes the window decorations.
+  // However, dev tools contract the inner size, and in the event they're open, we should 
+  // prefer the outer size.
+  let inner = window.inner_size()?;
+  let outer = window.outer_size()?;
+  
+  let height_delta = outer.height.saturating_sub(inner.height);
+  if height_delta > HEIGHT_DIFFERENCE_THRESHOLD {
+    // Dev tools are open, use the outer size
+    Ok(outer)
+  } else {
+    // Dev tools are not open, use the inner size
+    Ok(inner)
+  }
+}

crates/desktop/artcraft/src/utils/mod.rs

@@ -1,3 +1,4 @@
+pub mod best_window_size_heuristic;
 pub mod clear_all_webview_cookies;
 pub mod get_url_file_extension;
 pub mod image;
@@ -5,4 +6,4 @@ pub mod large_file_transfer;
 pub mod object_store;
 pub mod simple_http_download;
 pub mod sora;
-pub mod webview_unsafe;
+pub mod webview_unsafe;

crates/desktop/artcraft/src/windows/main_window/constants.rs

@@ -0,0 +1,4 @@
+
+/// The name of the main application window.
+/// This is the Artcraft application UX itself.
+pub const MAIN_WINDOW_NAME : &str = "main";

crates/desktop/artcraft/src/windows/main_window/mod.rs

@@ -0,0 +1 @@
+pub mod constants;

crates/desktop/artcraft/src/windows/mod.rs

@@ -1 +1,2 @@
-pub mod sora_login_window;
+pub mod sora_login_window;
+pub mod main_window;

crates/desktop/artcraft/tauri.conf.json

@@ -21,11 +21,45 @@
     ],
     "security": {
       "csp": {
-        "default-src": "*",
-        "connect-src": "*",
+        "default-src": [
+          "'self'",
+          "'unsafe-eval'",
+          "'unsafe-inline'",
+          "blob:",
+          "data:",
+          "https://*.fakeyou.com",
+          "https://*.storyteller.ai",
+          "https://www.googletagmanager.com",
+          "ipc://localhost",
+          "tauri://localhost"
+        ], 
+        "connect-src": [
+          "'self'",
+          "'unsafe-eval'",
+          "'unsafe-inline'",
+          "blob:",
+          "data:",
+          "https://*.fakeyou.com",
+          "https://*.storyteller.ai",
+          "https://unpkg.com/detect-gpu@5.0.70/",
+          "https://www.googletagmanager.com",
+          "ipc://localhost",
+          "tauri://localhost"
+        ],
         "font-src": "*",
         "img-src": "* data: blob: 'unsafe-inline'",
-        "style-src": "*"
+        "style-src": [
+          "'self'",
+          "'unsafe-eval'",
+          "'unsafe-inline'",
+          "blob:",
+          "data:",
+          "https://*.fakeyou.com",
+          "https://*.storyteller.ai",
+          "https://fonts.googleapis.com",
+          "ipc://localhost",
+          "tauri://localhost"
+        ]
       }
     }
   },

crates/desktop/tauri-artcraft/gen/schemas/capabilities.json

@@ -0,0 +1 @@
+{"default":{"identifier":"default","description":"enables the default permissions","local":true,"windows":["main"],"permissions":["core:default","log:default","upload:allow-download","upload:default",{"identifier":"http:default","allow":[{"url":"https://*.storyteller.ai"},{"url":"https://*.fakeyou.com"}],"deny":[{"url":"https://private.tauri.app"}]}]}}

crates/lib/api_clients/openai_sora_client/src/recipes/image_remix_with_session_auto_renew.rs

@@ -1,3 +1,4 @@
+use std::time::Duration;
 use anyhow::anyhow;
 use log::{info, warn};
 use errors::AnyhowResult;
@@ -7,7 +8,7 @@ use crate::creds::sora_jwt_bearer_token::SoraJwtBearerToken;
 use crate::creds::sora_sentinel::SoraSentinel;
 use crate::requests::bearer::generate::generate_bearer_with_cookie;
 use crate::requests::image_gen::common::{ImageSize, NumImages, SoraImageGenResponse};
-use crate::requests::image_gen::image_gen_http_request;
+use crate::requests::image_gen::{image_gen_http_request, SoraImageGenError};
 use crate::requests::image_gen::sora_image_gen_remix::{sora_image_gen_remix, SoraImageGenRemixRequest};
 use crate::requests::sentinel_refresh::generate::token::generate_token;
 use crate::sora_error::SoraError;
@@ -18,6 +19,8 @@ pub struct ImageRemixAutoRenewRequest<'a> {
   pub image_size: ImageSize,
   pub sora_media_tokens: Vec<String>,
   pub credentials: &'a SoraCredentialSet,
+  /// This function can try several different requests. This is the timeout for *individual* requests.
+  pub request_timeout: Option<Duration>,
 }
 
 /// Image request with retry and session auto-renewal.
@@ -29,6 +32,7 @@ pub async fn image_remix_with_session_auto_renew(request: ImageRemixAutoRenewReq
     image_size: request.image_size,
     sora_media_tokens: request.sora_media_tokens.clone(), // NB: Clone because used again
     credentials: CredentialMigrationRef::New(request.credentials),
+    request_timeout: request.request_timeout,
   }).await;
 
   let err = match result {
@@ -43,29 +47,32 @@ pub async fn image_remix_with_session_auto_renew(request: ImageRemixAutoRenewReq
 
   match err {
     // We'll fail these requests...
-    image_gen_http_request::SoraError::TooManyConcurrentTasks(_) => {
+    SoraImageGenError::TooManyConcurrentTasks(_) => {
       return Err(SoraError::TooManyConcurrentTasks);
     }
-    image_gen_http_request::SoraError::GenericError(err) => {
+    SoraImageGenError::GenericError(err) => {
       return Err(SoraError::OtherBadStatus(anyhow!("image remix failed with GenericError: {:?}", err)))
     }
-    image_gen_http_request::SoraError::NetworkError(err) => {
+    SoraImageGenError::NetworkError(err) => {
       // TODO: The underlying type should be a reqwest::Error.
       return Err(SoraError::OtherBadStatus(anyhow!("network error: {:?}", err)))
     }
+    SoraImageGenError::UsernameRequired(_err) => {
+      return Err(SoraError::SoraUsernameNotYetCreated)
+    }
 
     // We'll retry these requests...
 
-    image_gen_http_request::SoraError::SentinelBlock(err) => {
+    SoraImageGenError::SentinelBlock(err) => {
       warn!("Image generation failed due to sentinel block error: {:?}", err);
       refresh_sentinel = true;
     }
-    image_gen_http_request::SoraError::TokenExpired(err) => {
+    SoraImageGenError::TokenExpired(err) => {
       warn!("Image generation failed due to token expired error: {:?}", err);
       refresh_sentinel = true; // TODO: Not sure what this error is, actually.
       refresh_jwt = true;
     }
-    image_gen_http_request::SoraError::InvalidJwt(err) => {
+    SoraImageGenError::InvalidJwt(err) => {
       warn!("Image generation failed due to invalid jwt error: {:?}", err);
       refresh_jwt = true;
     }
@@ -123,12 +130,13 @@ pub async fn image_remix_with_session_auto_renew(request: ImageRemixAutoRenewReq
     image_size: request.image_size,
     sora_media_tokens: request.sora_media_tokens,
     credentials: CredentialMigrationRef::New(&new_creds),
+    request_timeout: request.request_timeout,
   }).await;
 
   match result {
     Ok(response) => Ok((response, Some(new_creds))),
     Err(err) => match err {
-      image_gen_http_request::SoraError::TooManyConcurrentTasks(err) => {
+      image_gen_http_request::SoraImageGenError::TooManyConcurrentTasks(err) => {
         Err(SoraError::TooManyConcurrentTasks)
       }
       _ => {

crates/lib/api_clients/openai_sora_client/src/recipes/image_upload_from_bytes_with_session_auto_renew.rs

@@ -14,12 +14,16 @@ use crate::sora_error::SoraError;
 use anyhow::anyhow;
 use errors::AnyhowResult;
 use log::{error, info, warn};
+use std::time::Duration;
 
 pub struct ImageUploadFromBytesAutoRenewRequest<'a> {
   pub file_bytes: Vec<u8>,
   pub filename: String,
   pub mime_type: &'a str,
   pub credentials: &'a SoraCredentialSet,
+  
+  /// This function can try to upload several times. This is the timeout for *individual* requests.
+  pub request_timeout: Option<Duration>,
 }
 
 /// Image upload with retry and session auto-renewal.
@@ -32,6 +36,7 @@ pub async fn image_upload_from_bytes_with_session_auto_renew(
     request.file_bytes.clone(), // FIXME(bt): This is horrible, but the client needs to take ownership. :(
     request.filename.clone(), // FIXME: Same
     CredentialMigrationRef::New(request.credentials),
+    request.request_timeout,
   ).await;
 
   let err = match result {
@@ -51,6 +56,7 @@ pub async fn image_upload_from_bytes_with_session_auto_renew(
     request.file_bytes,
     request.filename,
     CredentialMigrationRef::New(&new_creds),
+    request.request_timeout,
   ).await?;
 
   Ok((result, Some(new_creds)))

crates/lib/api_clients/openai_sora_client/src/recipes/image_upload_from_file_with_session_auto_renew.rs

@@ -6,10 +6,14 @@ use crate::requests::upload::upload_media_http_request::{upload_media_http_reque
 use crate::sora_error::SoraError;
 use log::{info, warn};
 use std::path::Path;
+use std::time::Duration;
 
 pub struct ImageUploadFromFileAutoRenewRequest<'a, P: AsRef<Path>> {
   pub file_path: P,
   pub credentials: &'a SoraCredentialSet,
+  
+  /// This function can try to upload several times. This is the timeout for *individual* requests.
+  pub request_timeout: Option<Duration>,
 }
 
 /// Image upload with retry and session auto-renewal.
@@ -21,10 +25,15 @@ pub async fn image_upload_from_file_with_session_auto_renew<P: AsRef<Path>>(
   let result = sora_media_upload_from_file(
     request.file_path.as_ref().clone(), // FIXME(bt): This is horrible, but the client needs to take ownership. :(
     CredentialMigrationRef::New(request.credentials),
+    /// This function can try to upload several times. This is the timeout for *individual* requests.
+    request.request_timeout,
   ).await;
 
   let err = match result {
     Ok(response) => return Ok((response, None)),
+    // We can't retry some errors.
+    Err(err @ SoraError::SoraUsernameNotYetCreated) => return Err(err),
+    // Retry all other errors.
     Err(err) => err,
   };
 
@@ -37,6 +46,7 @@ pub async fn image_upload_from_file_with_session_auto_renew<P: AsRef<Path>>(
   let result = sora_media_upload_from_file(
     request.file_path,
     CredentialMigrationRef::New(&new_creds),
+    request.request_timeout,
   ).await?;
 
   Ok((result, Some(new_creds)))

crates/lib/api_clients/openai_sora_client/src/recipes/list_sora_task_status_with_session_auto_renew.rs

@@ -39,11 +39,10 @@ pub async fn list_sora_task_status_with_session_auto_renew(
     new_creds = Some(updated_creds);
   }
 
-  let legacy_creds = new_creds.as_ref()
-      .unwrap_or_else(|| &args.credentials)
-      .to_legacy_credentials()?;
+  let upgraded_creds = new_creds.as_ref()
+      .unwrap_or_else(|| &args.credentials);
 
-  let result = get_image_gen_status(&request, &legacy_creds).await;
+  let result = get_image_gen_status(&request, &upgraded_creds).await;
 
   let err = match result {
     Ok(response) => return Ok((response, new_creds)),
@@ -56,7 +55,7 @@ pub async fn list_sora_task_status_with_session_auto_renew(
 
   info!("Retrying image upload with new credentials...");
 
-  let result = get_image_gen_status(&request, &legacy_creds).await?;
+  let result = get_image_gen_status(&request, &upgraded_creds).await?;
 
   Ok((result, Some(new_creds)))
 }

crates/lib/api_clients/openai_sora_client/src/recipes/wait_for_image_gen_status.rs

@@ -2,6 +2,7 @@ use crate::credentials::SoraCredentials;
 use crate::requests::image_gen::image_gen_status::TaskStatus;
 use crate::requests::image_gen::image_gen_status::{get_image_gen_status, StatusRequest, TaskResponse, VideoGenStatusResponse};
 use errors::AnyhowResult;
+use crate::creds::sora_credential_set::SoraCredentialSet;
 
 pub async fn wait_for_image_gen_status(task_id: &String, credentials: &SoraCredentials, retry_limit: Option<u32>) -> AnyhowResult<TaskResponse> {
   let status_request = StatusRequest {
@@ -10,11 +11,13 @@ pub async fn wait_for_image_gen_status(task_id: &String, credentials: &SoraCrede
     // before: Some(task_id.clone()),
   };
   let retry_limit = retry_limit.unwrap_or(10);
+  
+  let new_creds = SoraCredentialSet::from_legacy_credentials(&credentials)?;
 
   for _ in 0..retry_limit {
     tokio::time::sleep(std::time::Duration::from_secs(10)).await;
 
-    let status_response = get_image_gen_status(&status_request, credentials).await?;
+    let status_response = get_image_gen_status(&status_request, &new_creds).await?;
 
     match find_task_response_by_id(&status_response, task_id.clone()) {
       Some(task_response) => match TaskStatus::from_str(&task_response.status) {

crates/lib/api_clients/openai_sora_client/src/requests/image_gen/image_gen_http_request.rs

@@ -1,7 +1,9 @@
 use crate::creds::credential_migration::CredentialMigrationRef;
-use serde_derive::{Deserialize, Serialize};
-use thiserror::Error;
 use crate::requests::image_gen::image_gen_status::TaskId;
+use log::warn;
+use serde_derive::{Deserialize, Serialize};
+use std::time::Duration;
+use thiserror::Error;
 
 const SORA_IMAGE_GEN_URL: &str = "https://sora.com/backend/video_gen";
 
@@ -9,7 +11,7 @@ const SORA_IMAGE_GEN_URL: &str = "https://sora.com/backend/video_gen";
 const USER_AGENT : &str = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36";
 
 #[derive(Error, Debug)]
-pub enum SoraError {
+pub enum SoraImageGenError {
   #[error("Sora token expired: {0}")]
   TokenExpired(String),
 
@@ -27,6 +29,9 @@ pub enum SoraError {
 
   #[error("Network error: {0}")]
   NetworkError(String),
+
+  #[error("Sora username required: {0}")]
+  UsernameRequired(String),
 }
 
 #[derive(Serialize, Debug)]
@@ -127,6 +132,7 @@ pub enum SoraErrorCode {
   InvalidJwt,
   TokenExpired,
   TooManyConcurrentTasks,
+  UsernameRequired,
   Unknown(String),
 }
 
@@ -147,7 +153,11 @@ impl std::fmt::Display for RawSoraErrorInner {
 }
 
 /// Don't expose the internal request implementation as there are only a few "correct" ways to call the API.
-pub (crate) async fn image_gen_http_request(sora_request: RawSoraImageGenRequest, credentials: CredentialMigrationRef<'_>) -> Result<RawSoraResponse, SoraError> {
+pub (crate) async fn image_gen_http_request(
+  sora_request: RawSoraImageGenRequest, 
+  credentials: CredentialMigrationRef<'_>, 
+  request_timeout: Option<Duration>,
+) -> Result<RawSoraResponse, SoraImageGenError> {
   let client = reqwest::Client::new();
 
   let mut cookie;
@@ -161,78 +171,88 @@ pub (crate) async fn image_gen_http_request(sora_request: RawSoraImageGenRequest
       // TODO(bt,2025-04-23): We're using a Sora payload error in place of application state error. Surface this differently.
       sentinel = creds.sentinel.as_ref()
           .map(|sentinel| sentinel.to_string())
-          .ok_or(SoraError::SentinelBlock("Sentinel is required for image generation.".to_string()))?;
+          .ok_or(SoraImageGenError::SentinelBlock("Sentinel is required for image generation.".to_string()))?;
     }
     CredentialMigrationRef::New(creds) => {
       cookie = creds.cookies.to_string();
       // TODO(bt,2025-04-23): We're using a Sora payload error in place of application state error. Surface this differently.
       authorization_header = creds.jwt_bearer_token.as_ref()
-          .ok_or(SoraError::InvalidJwt("JWT bearer is required for image generation".to_string()))?
+          .ok_or(SoraImageGenError::InvalidJwt("JWT bearer is required for image generation".to_string()))?
           .to_authorization_header_value();
       // TODO(bt,2025-04-23): We're using a Sora payload error in place of application state error. Surface this differently.
       sentinel = creds.sora_sentinel.as_ref()
           .map(|sentinel| sentinel.get_sentinel().to_string())
-          .ok_or(SoraError::SentinelBlock("Sentinel is required for image generation.".to_string()))?;
+          .ok_or(SoraImageGenError::SentinelBlock("Sentinel is required for image generation.".to_string()))?;
     }
   }
 
-  let http_request = client.post(SORA_IMAGE_GEN_URL)
+  let mut http_request = client.post(SORA_IMAGE_GEN_URL)
       .header("User-Agent", USER_AGENT)
       .header("Cookie", &cookie)
       .header("Authorization", &authorization_header)
       .header("Content-Type", "application/json")
       .header("OpenAI-Sentinel-Token", &sentinel);
+  
+  
+  if let Some(timeout) = request_timeout {
+    http_request = http_request.timeout(timeout);
+  }
 
   let http_request = http_request.json(&sora_request).build()
-      .map_err(|e| SoraError::NetworkError(e.to_string()))?;
+      .map_err(|e| SoraImageGenError::NetworkError(e.to_string()))?;
 
   let response = client.execute(http_request)
       .await
-      .map_err(|e| SoraError::NetworkError(e.to_string()))?;
+      .map_err(|e| SoraImageGenError::NetworkError(e.to_string()))?;
 
   let status = response.status();
 
   let response_body = &response.text().await
-      .map_err(|e| SoraError::NetworkError(e.to_string()))?;
+      .map_err(|e| SoraImageGenError::NetworkError(e.to_string()))?;
 
   if status != reqwest::StatusCode::OK {
+    warn!("Sora image generation failure. Raw response: {:?}", response_body);
+    
     let error_response: RawSoraErrorResponse = serde_json::from_str(response_body)
-        .map_err(|e| SoraError::GenericError(format!("Failed to parse error response: {}", e)))?;
+        .map_err(|e| SoraImageGenError::GenericError(format!("Failed to parse error response: {}", e)))?;
 
     // Check for specific error codes
     if let Some(code) = &error_response.error.code {
       match code {
         SoraErrorCode::TokenExpired => {
-          return Err(SoraError::TokenExpired(error_response.error.message));
+          return Err(SoraImageGenError::TokenExpired(error_response.error.message));
         }
         SoraErrorCode::SentinelBlock => {
-          return Err(SoraError::SentinelBlock(error_response.error.message));
+          return Err(SoraImageGenError::SentinelBlock(error_response.error.message));
         }
         SoraErrorCode::TooManyConcurrentTasks => {
-          return Err(SoraError::TooManyConcurrentTasks(error_response.error.message));
+          return Err(SoraImageGenError::TooManyConcurrentTasks(error_response.error.message));
         }
         SoraErrorCode::Unknown(_) => {
-          return Err(SoraError::GenericError(error_response.error.message));
+          return Err(SoraImageGenError::GenericError(error_response.error.message));
         }
         SoraErrorCode::InvalidJwt => {
-          return Err(SoraError::InvalidJwt(error_response.error.message));
+          return Err(SoraImageGenError::InvalidJwt(error_response.error.message));
+        }
+        SoraErrorCode::UsernameRequired => {
+          return Err(SoraImageGenError::UsernameRequired(error_response.error.message));
         }
       }
     }
 
-    return Err(SoraError::GenericError(error_response.error.message));
+    return Err(SoraImageGenError::GenericError(error_response.error.message));
   }
 
   let response = serde_json::from_str(response_body)
-      .map_err(|e| SoraError::GenericError(format!("Failed to parse success response: {}", e)))?;
+      .map_err(|e| SoraImageGenError::GenericError(format!("Failed to parse success response: {}", e)))?;
 
   Ok(response)
 }
 
 #[cfg(test)]
 mod tests {
-  use errors::AnyhowResult;
   use crate::requests::image_gen::image_gen_http_request::RawSoraResponse;
+  use errors::AnyhowResult;
 
   #[test]
   fn deserialize_task_id() -> AnyhowResult<()> {

crates/lib/api_clients/openai_sora_client/src/requests/image_gen/image_gen_status.rs

@@ -6,7 +6,9 @@ use reqwest::Url;
 use serde_derive::{Deserialize, Serialize};
 use std::fmt::{Debug, Display};
 use std::{fs::File, io::Write, path::Path};
-use log::debug;
+use log::{debug, warn};
+use crate::creds::sora_credential_set::SoraCredentialSet;
+use crate::creds::sora_jwt_bearer_token::SoraJwtBearerToken;
 
 const SORA_STATUS_URL: &str = "https://sora.com/backend/video_gen";
 
@@ -171,7 +173,7 @@ pub struct InpaintItem {
   pub r#type: String,
   pub preset_id: Option<String>,
   pub generation_id: Option<String>,
-  pub upload_media_id: String,
+  pub upload_media_id: Option<String>,
   pub frame_index: i32,
   pub source_start_frame: i32,
 }
@@ -199,7 +201,16 @@ impl StatusRequest {
 }
 
 /// Gets the status of image generation tasks from Sora API
-pub async fn get_image_gen_status(status_request: &StatusRequest, credentials: &SoraCredentials) -> Result<VideoGenStatusResponse, SoraError> {
+pub async fn get_image_gen_status(status_request: &StatusRequest, credentials: &SoraCredentialSet) -> Result<VideoGenStatusResponse, SoraError> {
+
+  let bearer_header = match credentials.jwt_bearer_token.as_ref()  {
+    Some(bearer) => bearer.to_authorization_header_value(),
+    None => {
+      warn!("No JWT bearer for getting image gen status!");
+      return Err(SoraError::NoBearerTokenAvailable)
+    },
+  };
+
   let client = reqwest::Client::new();
 
   let mut url = reqwest::Url::parse(SORA_STATUS_URL)
@@ -216,8 +227,8 @@ pub async fn get_image_gen_status(status_request: &StatusRequest, credentials: &
 
   let http_request = client.get(url)
       .header("User-Agent", USER_AGENT)
-      .header("Cookie", &credentials.cookie)
-      .header("Authorization", credentials.authorization_header_value())
+      .header("Cookie", credentials.cookies.as_str())
+      .header("Authorization", bearer_header)
       .header("Content-Type", "application/json");
 
   let http_request = http_request.build()?;
@@ -235,9 +246,15 @@ pub async fn get_image_gen_status(status_request: &StatusRequest, credentials: &
     return Err(SoraError::AnyhowError(anyhow::anyhow!("The status request failed; status = {:?}, message = {:?}", status, response_body)));
   }
 
-  let response: VideoGenStatusResponse = serde_json::from_str(response_body)?;
+  let maybe_response = serde_json::from_str::<VideoGenStatusResponse>(response_body);
 
-  Ok(response)
+  match maybe_response {
+    Ok(response) => Ok(response),
+    Err(err) => {
+      warn!("Failed to parse status response: {:?}", err);
+      Err(SoraError::JsonErrorWithBody(err, response_body.to_string()))
+    }
+  }
 }
 
 pub async fn save_generations_to_dir(generations: &[Generation], dir: &str) -> AnyhowResult<()> {
@@ -275,6 +292,7 @@ mod tests {
   use errors::AnyhowResult;
   use std::fs::read_to_string;
   use testing::test_file_path::test_file_path;
+  use crate::creds::sora_credential_set::SoraCredentialSet;
 
   #[ignore]
   #[tokio::test]
@@ -297,10 +315,12 @@ mod tests {
     let bearer = bearer.trim().to_string();
 
     let creds = SoraCredentials { bearer_token: bearer, cookie, sentinel: Some(sentinel) };
+    let new_creds = SoraCredentialSet::from_legacy_credentials(&creds)?;
+
     // Get the task status for a specific task
     // let response = get_image_gen_status(&StatusRequest::new(None, Some("task_01jr9yvpfyetx9r7qvvx38scna".to_string())), &creds).await?;
 
-    let response = get_image_gen_status(&StatusRequest::new(Some(50), None), &creds).await?;
+    let response = get_image_gen_status(&StatusRequest::new(Some(50), None), &new_creds).await?;
     println!("task_id: {}", response.task_responses[0].id);
 
     let task_id = response.task_responses[0].id.clone();

crates/lib/api_clients/openai_sora_client/src/requests/image_gen/mod.rs

@@ -1,5 +1,5 @@
 pub (crate) mod image_gen_http_request;
-pub use image_gen_http_request::SoraError;
+pub use image_gen_http_request::SoraImageGenError;
 pub mod common;
 pub mod sora_image_gen_remix;
 pub mod sora_image_gen_simple;

crates/lib/api_clients/openai_sora_client/src/requests/image_gen/sora_image_gen_remix.rs

@@ -1,7 +1,8 @@
-use log::info;
 use crate::creds::credential_migration::CredentialMigrationRef;
 use crate::requests::image_gen::common::{ImageSize, NumImages, SoraImageGenResponse};
-use crate::requests::image_gen::image_gen_http_request::{image_gen_http_request, InpaintItem, InpaintItemType, OperationType, RawSoraImageGenRequest, SoraError, VideoGenType};
+use crate::requests::image_gen::image_gen_http_request::{image_gen_http_request, InpaintItem, InpaintItemType, OperationType, RawSoraImageGenRequest, SoraImageGenError, VideoGenType};
+use log::info;
+use std::time::Duration;
 
 pub struct SoraImageGenRemixRequest<'a> {
   pub prompt: String,
@@ -9,11 +10,12 @@ pub struct SoraImageGenRemixRequest<'a> {
   pub image_size: ImageSize,
   pub sora_media_tokens: Vec<String>,
   pub credentials: CredentialMigrationRef<'a>,
+  pub request_timeout: Option<Duration>,
 }
 
 /// The "remix" commands let you supply additional images as context.
 /// Sora "media tokens" of previously uploaded images must be supplied.
-pub async fn sora_image_gen_remix(request: SoraImageGenRemixRequest<'_>) -> Result<SoraImageGenResponse, SoraError> {
+pub async fn sora_image_gen_remix(request: SoraImageGenRemixRequest<'_>) -> Result<SoraImageGenResponse, SoraImageGenError> {
   let args = RawSoraImageGenRequest {
     r#type: VideoGenType::ImageGen,
     operation: OperationType::Remix,
@@ -39,7 +41,7 @@ pub async fn sora_image_gen_remix(request: SoraImageGenRemixRequest<'_>) -> Resu
   // TODO: Replace this with debug level logging in the future.
   info!("Sending remix request: {:?}", args);
 
-  let result = image_gen_http_request(args, request.credentials).await?;
+  let result = image_gen_http_request(args, request.credentials, request.request_timeout).await?;
 
   Ok(SoraImageGenResponse {
     task_id: result.id,
@@ -80,6 +82,7 @@ mod tests {
       image_size: ImageSize::Square,
       sora_media_tokens: vec!["media_01jqyhrz4detyvtzwp2p4j63ad".to_string()],
       credentials: CredentialMigrationRef::Legacy(&creds),
+      request_timeout: None,
     }).await?;
 
     println!("task_id: {}", response.task_id);

crates/lib/api_clients/openai_sora_client/src/requests/image_gen/sora_image_gen_simple.rs

@@ -1,14 +1,15 @@
-use crate::credentials::SoraCredentials;
+use crate::creds::credential_migration::CredentialMigrationRef;
 use crate::requests::image_gen::common::{ImageSize, NumImages, SoraImageGenResponse};
 use crate::requests::image_gen::image_gen_http_request::{image_gen_http_request, OperationType, RawSoraImageGenRequest, VideoGenType};
 use errors::AnyhowResult;
-use crate::creds::credential_migration::CredentialMigrationRef;
+use std::time::Duration;
 
 pub struct SoraImageGenSimpleRequest<'a> {
   pub prompt: String,
   pub num_images: NumImages,
   pub image_size: ImageSize,
   pub credentials: CredentialMigrationRef<'a>,
+  pub request_timeout: Option<Duration>,
 }
 
 pub async fn sora_image_gen_simple(args: SoraImageGenSimpleRequest<'_>) -> AnyhowResult<SoraImageGenResponse> {
@@ -24,7 +25,7 @@ pub async fn sora_image_gen_simple(args: SoraImageGenSimpleRequest<'_>) -> Anyho
   };
 
   // TODO: Error handling.
-  let result = image_gen_http_request(sora_request, args.credentials).await?;
+  let result = image_gen_http_request(sora_request, args.credentials, args.request_timeout).await?;
 
   Ok(SoraImageGenResponse {
     task_id: result.id,
@@ -34,12 +35,12 @@ pub async fn sora_image_gen_simple(args: SoraImageGenSimpleRequest<'_>) -> Anyho
 #[cfg(test)]
 mod tests {
   use crate::credentials::SoraCredentials;
+  use crate::creds::credential_migration::CredentialMigrationRef;
   use crate::requests::image_gen::common::{ImageSize, NumImages};
   use crate::requests::image_gen::sora_image_gen_simple::{sora_image_gen_simple, SoraImageGenSimpleRequest};
   use errors::AnyhowResult;
   use std::fs::read_to_string;
   use testing::test_file_path::test_file_path;
-  use crate::creds::credential_migration::CredentialMigrationRef;
 
   #[ignore] // You can manually run "ignore" tests in the IDE, but they won't run in CI.
   #[tokio::test]
@@ -64,6 +65,7 @@ mod tests {
       num_images: NumImages::One,
       image_size: ImageSize::Square,
       credentials: CredentialMigrationRef::Legacy(&creds),
+      request_timeout: None,
     }).await?;
 
     println!("task_id: {}", response.task_id);

crates/lib/api_clients/openai_sora_client/src/requests/upload/upload_media_from_bytes.rs

@@ -2,10 +2,16 @@ use crate::creds::credential_migration::CredentialMigrationRef;
 use crate::requests::upload::upload_media_http_request::{upload_media_http_request, SoraMediaUploadResponse};
 use crate::sora_error::SoraError;
 use std::path::PathBuf;
+use std::time::Duration;
 
 /// Upload bytes.
 /// The underlying reqwest lib needs to own the bytes, so we can't pass as a reference.
-pub async fn sora_media_upload_from_bytes(bytes: Vec<u8>, file_name: String, creds: CredentialMigrationRef<'_>) -> Result<SoraMediaUploadResponse, SoraError> {
+pub async fn sora_media_upload_from_bytes(
+  bytes: Vec<u8>, 
+  file_name: String, 
+  creds: CredentialMigrationRef<'_>,
+  maybe_timeout: Option<Duration>,
+) -> Result<SoraMediaUploadResponse, SoraError> {
   let file_path = PathBuf::from(&file_name);
 
   // TODO: Read file magic bytes first, then fall back to this.
@@ -20,5 +26,5 @@ pub async fn sora_media_upload_from_bytes(bytes: Vec<u8>, file_name: String, cre
     _ => "application/octet-stream",
   };
 
-  Ok(upload_media_http_request(bytes, file_name, mime_type, creds).await?)
+  Ok(upload_media_http_request(bytes, file_name, mime_type, creds, maybe_timeout).await?)
 }

crates/lib/api_clients/openai_sora_client/src/requests/upload/upload_media_from_file.rs

@@ -2,6 +2,7 @@ use crate::creds::credential_migration::CredentialMigrationRef;
 use crate::requests::upload::upload_media_http_request::{upload_media_http_request, SoraMediaUploadResponse};
 use crate::sora_error::SoraError;
 use std::path::Path;
+use std::time::Duration;
 use tokio::fs::File;
 use tokio::io::AsyncReadExt;
 
@@ -9,7 +10,11 @@ use tokio::io::AsyncReadExt;
 /// There's a better way to implement this.
 const INITIAL_BUFFER_SIZE : usize = 1024*1024;
 
-pub async fn sora_media_upload_from_file<P: AsRef<Path>>(file_path: P, creds: CredentialMigrationRef<'_>) -> Result<SoraMediaUploadResponse, SoraError> {
+pub async fn sora_media_upload_from_file<P: AsRef<Path>>(
+  file_path: P, 
+  creds: CredentialMigrationRef<'_>,
+  maybe_timeout: Option<Duration>,
+) -> Result<SoraMediaUploadResponse, SoraError> {
   let mut file = File::open(&file_path).await?;
   let mut buffer = Vec::with_capacity(INITIAL_BUFFER_SIZE);
   file.read_to_end(&mut buffer).await?;
@@ -31,7 +36,7 @@ pub async fn sora_media_upload_from_file<P: AsRef<Path>>(file_path: P, creds: Cr
     _ => "application/octet-stream",
   };
 
-  Ok(upload_media_http_request(buffer, filename, mime_type, creds).await?)
+  Ok(upload_media_http_request(buffer, filename, mime_type, creds, maybe_timeout).await?)
 }
 
 #[cfg(test)]
@@ -63,6 +68,7 @@ mod tests {
     let response = sora_media_upload_from_file(
       image_path,
       CredentialMigrationRef::Legacy(&creds),
+      None,
     ).await?;
 
     println!("media: {:?}", response);

crates/lib/api_clients/openai_sora_client/src/requests/upload/upload_media_http_request.rs

@@ -1,3 +1,4 @@
+use std::time::Duration;
 use crate::credentials::{SoraCredentials, USER_AGENT};
 use crate::creds::credential_migration::CredentialMigrationRef;
 use crate::sora_error::SoraError;
@@ -69,6 +70,7 @@ pub (crate) async fn upload_media_http_request(
   filename: String,
   mime_type: &str,
   credentials: CredentialMigrationRef<'_>,
+  maybe_timeout: Option<Duration>,
 ) -> Result<SoraMediaUploadResponse, SoraError> {
 
   // Create multipart form
@@ -97,11 +99,15 @@ pub (crate) async fn upload_media_http_request(
 
   // Make API request
   let client = Client::new();
-  let request_builder = client.post(SORA_UPLOAD_MEDIA_URL)
+  let mut request_builder = client.post(SORA_UPLOAD_MEDIA_URL)
       .multipart(form)
       .header("User-Agent", USER_AGENT)
       .header("Cookie", &cookie)
       .header("Authorization", &auth_header);
+  
+  if let Some(timeout) = maybe_timeout {
+    request_builder = request_builder.timeout(timeout);
+  }
 
   let response = request_builder.send().await?;
 

crates/lib/api_clients/openai_sora_client/src/sora_error.rs

@@ -29,6 +29,10 @@ pub enum SoraError {
   /// Failed to generate a bearer token despite the `200 OK` response.
   /// This has been generated by sending old/expired session cookies or empty cookies.
   FailedToGenerateBearer,
+  
+  /// Sora requires users to set up an account username before they can generate images.
+  /// This requires the user to set up that username.
+  SoraUsernameNotYetCreated,
 
   /// Something is wrong with the JWT bearer token.
   /// This error originates on our end as we try to parse the JWT.
@@ -58,6 +62,10 @@ pub enum SoraError {
 
   /// serde_json::Error, likely from JSON deserialization schema mismatch.
   JsonError(serde_json::Error),
+
+  /// serde_json::Error, likely from JSON deserialization schema mismatch.
+  /// Includes the original body.
+  JsonErrorWithBody(serde_json::Error, String),
 }
 
 impl Error for SoraError {}
@@ -71,6 +79,9 @@ impl Display for SoraError {
       Self::FailedToGenerateBearer => {
         write!(f, "Failed to generate bearer. Probably invalid session.")
       }
+      Self::SoraUsernameNotYetCreated => {
+        write!(f, "Sora username not created. Please set up a username.")
+      }
       Self::LocalJwtClaimsParseError(message) => {
         write!(f, "Local JWT claims parse error: {}", message)
       }
@@ -101,6 +112,9 @@ impl Display for SoraError {
       Self::JsonError(err) => {
         write!(f, "serde_json error: {}", err)
       }
+      Self::JsonErrorWithBody(err, message) => {
+        write!(f, "serde_json error: {:?} body: {:?}", err, message)
+      }
     }
   }
 }

crates/lib/api_clients/openai_sora_client/src/utils/classify_general_http_error.rs

@@ -40,7 +40,15 @@ Message: {
           || message.contains("token_expired");
 
   if cookie_expired {
-    return SoraError::UnauthorizedCookieOrBearerExpired
+    return SoraError::UnauthorizedCookieOrBearerExpired;
+  }
+  
+  let needs_onboarding = 
+      message.contains("You must onboard before using this service") 
+          || message.contains("onboarding_required");
+
+  if needs_onboarding {
+    return SoraError::SoraUsernameNotYetCreated;
   }
 
   let status_code = status.as_u16();

crates/service/web/storyteller_web/src/http_server/endpoints/image_studio/prompt/enqueue_studio_image_generation_handler.rs

@@ -15,7 +15,7 @@ use log::warn;
 use log::{debug, error};
 use mysql_queries::queries::media_files::get::get_media_file::get_media_file;
 use openai_sora_client::credentials::SoraCredentials;
-use openai_sora_client::requests::image_gen::SoraError;
+use openai_sora_client::requests::image_gen::SoraImageGenError;
 use openai_sora_client::requests::sentinel_refresh::generate::token::generate_token;
 use serde::Deserialize;
 use serde::Serialize;
@@ -326,7 +326,7 @@ pub async fn enqueue_studio_image_generation_handler(http_request: HttpRequest,
 
   debug!("Sora image gen response: {:?}", response);
 
-  if let Err(SoraError::SentinelBlock(msg)) = &response {
+  if let Err(SoraImageGenError::SentinelBlock(msg)) = &response {
     error!("Sora sentinel block, attempting refresh: {}", msg);
 
     match generate_token().await {
@@ -382,16 +382,16 @@ pub async fn enqueue_studio_image_generation_handler(http_request: HttpRequest,
 
   let response = response.map_err(|err| {
     match err {
-      SoraError::TokenExpired(msg) => {
+      SoraImageGenError::TokenExpired(msg) => {
         error!("Sora token expired, needs refresh: {}", msg);
         // TODO: Implement token refresh logic here
         EnqueueImageGenRequestError::ServerError
       },
-      SoraError::SentinelBlock(msg) => {
+      SoraImageGenError::SentinelBlock(msg) => {
         error!("Sora sentinel block still occurring after refresh: {}", msg);
         EnqueueImageGenRequestError::ServerError
       },
-      SoraError::TooManyConcurrentTasks(msg) => {
+      SoraImageGenError::TooManyConcurrentTasks(msg) => {
         error!("Sora too many concurrent tasks: {}", msg);
         EnqueueImageGenRequestError::TooManyConcurrentTasks
       },

frontend/apps/editor2d/src/components/PromptBox.tsx

@@ -320,7 +320,7 @@ export const PromptBox = () => {
     if (!prompt.trim()) return;
     try {
       console.log(
-        "Enqueuing with prompt:",
+        "(3) Enqueuing with prompt:",
         prompt,
         "and reference images:",
         referenceImages,

frontend/apps/editor3d/app/index.html

@@ -1,11 +1,20 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <title>ArtCraft</title>
     <meta charset="utf-8" />
-    <title>ArtCraft 3D</title>
-    <base href="/" />
-
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-Y4Y8KMLPQ7"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-Y4Y8KMLPQ7');
+    </script>
+
+    <base href="/" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import {
   faChevronLeft,
   faGear,
@@ -17,15 +17,20 @@ import { downloadFileFromUrl } from "@storyteller/api";
 import { TabSelector, TabItem } from "@storyteller/ui-tab-selector";
 import { Signal } from "@preact/signals-react";
 import { useSignals } from "@preact/signals-react/runtime";
+import { setLogoutStates } from "~/signals/authentication/utilities";
+import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext";
+
 function isEditorPath(path: string) {
   if (path === "/") return true;
   if (path === "/idealenigma/") return true;
   return false;
 }
+
 interface Props {
   pageName: string;
   appTabIdSignal: Signal<string>;
   setAppTabId: (id: string) => void;
+  is3DInitSignal: Signal<boolean>;
 }
 
 const appTabs: TabItem[] = [
@@ -33,7 +38,7 @@ const appTabs: TabItem[] = [
   { id: "2D", label: "2D" },
 ];
 
-export const TopBar = ({ pageName, appTabIdSignal, setAppTabId }: Props) => {
+export const TopBar = ({ pageName, appTabIdSignal, setAppTabId, is3DInitSignal }: Props) => {
   useSignals();
 
   const currentLocation = getCurrentLocationWithoutParams(
@@ -44,6 +49,22 @@ export const TopBar = ({ pageName, appTabIdSignal, setAppTabId }: Props) => {
   const [activeLibraryTab, setActiveLibraryTab] = useState("my-media");
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
 
+  const engine3D = useContext(EngineContext);
+  const handleTabChange = (tabId: string) => {
+    if (appTabIdSignal.peek() == "3D") {
+      engine3D?.unmountEngine();
+    }
+    setAppTabId(tabId);
+  }
+
+  const currentAppTabId = appTabIdSignal.value;
+  const is3DInit = is3DInitSignal.value;
+  useEffect(() => {
+    if (currentAppTabId == "3D" && is3DInit) {
+      engine3D?.remountEngine();
+    }
+  }, [currentAppTabId, engine3D, is3DInit]);
+
   return (
     <>
       <header className="fixed left-0 top-0 z-[60] w-full border-b border-white/5 bg-ui-background">
@@ -69,19 +90,9 @@ export const TopBar = ({ pageName, appTabIdSignal, setAppTabId }: Props) => {
               tabs={appTabs}
               activeTab={appTabIdSignal.value}
               disabled={false}
-              onTabChange={(tabId: string) => setAppTabId(tabId)}
+              onTabChange={handleTabChange}
               className="w-fit"
             />
-            {/* <Button
-              variant="secondary"
-              icon={faChevronRight}
-              iconClassName="text-xs"
-              iconFlip={true}
-              onClick={handleClick}
-              className="bg-transparent p-0 text-sm text-white/80 hover:bg-transparent hover:text-white hover:underline hover:underline-offset-2"
-            >
-              Go to 2D Canvas
-            </Button> */}
           </div>
 
           <div className="flex items-center justify-center gap-2 font-medium">
@@ -118,6 +129,7 @@ export const TopBar = ({ pageName, appTabIdSignal, setAppTabId }: Props) => {
       <SettingsModal
         isOpen={isSettingsModalOpen}
         onClose={() => setIsSettingsModalOpen(false)}
+        globalAccountLogoutCallback={() => setLogoutStates()}
       />
 
       <GalleryModal

frontend/apps/editor3d/app/src/flags/DevConsoleFlags.ts

@@ -0,0 +1,36 @@
+
+// This is used to do things such as disable job polling in the dev console.
+
+export const SetDevFlag = (flagName: string, value: any) => {
+  if (!!!(window as any)._dev_flags) {
+    (window as any)._dev_flags = {};
+  }
+  (window as any)._dev_flags[flagName] = value;
+}
+
+export const GetDevFlag = (flagName: string) => {
+  if (!!(window as any)._dev_flags && flagName in (window as any)._dev_flags) {
+    return (window as any)._dev_flags[flagName];
+  }
+  return null;
+}
+
+export const DisableJobPolling = () => {
+  SetDevFlag("disable_job_polling", true);
+}
+
+export const EnableJobPolling = () => {
+  SetDevFlag("disable_job_polling", false);
+}
+
+export const IsJobPollingDisabled = () : boolean => {
+  return GetDevFlag("disable_job_polling") === true;
+}
+
+(window as any).setDevFlag = SetDevFlag;
+(window as any).getDevFlag = GetDevFlag;
+
+(window as any).disableJobPolling = DisableJobPolling;
+(window as any).enableJobPolling = EnableJobPolling;
+
+

frontend/apps/editor3d/app/src/hooks/useActiveJobs/utilities.ts

@@ -1,9 +1,15 @@
 import { ToastTypes } from "~/enums";
 import { addToast, setJobs } from "~/signals";
 import { JobsApi } from "~/Classes/ApiManager/JobsApi";
+import { IsJobPollingDisabled } from "~/flags/DevConsoleFlags";
+
 export async function PollRecentJobs() {
   const jobsApi = new JobsApi();
 
+  if (IsJobPollingDisabled()) {
+    return;
+  }
+
   const response = await jobsApi.ListRecentJobs();
   if (response.success && response.data) {
     setJobs(response.data);

frontend/apps/editor3d/app/src/pages/Page2d/ContextualToolbarNode.tsx

@@ -0,0 +1,97 @@
+import { MouseEventHandler, useState, useEffect } from "react";
+import { Transition } from "@headlessui/react";
+import { twMerge } from "tailwind-merge";
+
+import { uiAccess } from "./signals/uiAccess";
+import { dispatchUiEvents } from "./signals/uiEvents";
+
+import { ToolbarNode } from "./components/features/ToolbarNode";
+import { ToolbarNodeButtonNames } from "./components/features/ToolbarNode/enums";
+import { transitionTimingStyles } from "./components/styles";
+import { useSignals } from "@preact/signals-react/runtime";
+
+export const ContextualToolbarNode = () => {
+  const [winSize, setWinSize] = useState<{ width: number; height: number }>({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+  const { isShowing, position, ...rest } = uiAccess.toolbarNode.signal.value;
+  const buttonsProps = Object.values(ToolbarNodeButtonNames).reduce(
+    (acc, buttonName) => {
+      acc[buttonName] = {
+        onClick: dispatchUiEvents.toolbarNode[buttonName],
+        disabled:
+          uiAccess.toolbarNode.signal.value.buttonStates[buttonName].disabled,
+        hidden:
+          uiAccess.toolbarNode.signal.value.buttonStates[buttonName].hidden,
+        active:
+          uiAccess.toolbarNode.signal.value.buttonStates[buttonName].active,
+      };
+      return acc;
+    },
+    {} as {
+      [key in ToolbarNodeButtonNames]: {
+        onClick: MouseEventHandler<HTMLButtonElement>;
+        disabled: boolean;
+        hidden: boolean;
+        active: boolean;
+      };
+    },
+  );
+  useEffect(() => {
+    function resizeHandler() {
+      setWinSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    window.addEventListener("resize", resizeHandler);
+    return () => {
+      window.removeEventListener("resize", resizeHandler);
+    };
+  }, []);
+
+  const handleColorChange = (color: string) => {
+    // Don't do anything if no node is known to be bound
+    if (uiAccess.toolbarNode.signal.value.knodeIds.length < 1) {
+      return;
+    }
+
+    // Update the UI component
+    uiAccess.toolbarNode.setColor(color);
+
+    // Signal the engine with the node ID (just grab the first -and expected only- node)
+    const nodeID = uiAccess.toolbarNode.signal.value.knodeIds[0];
+    dispatchUiEvents.toolbarNode.setSelectedColor({ kNodeId: nodeID, color });
+  }
+
+  useSignals();
+  const color = uiAccess.toolbarNode.signal.value.color;
+
+  const boundedTopPosition = Math.min(position.y, winSize.height - 164);
+  return (
+    <Transition
+      as="div"
+      show={isShowing}
+      className={twMerge(
+        transitionTimingStyles,
+        "fixed -translate-x-1/2 translate-y-5 data-[closed]:opacity-0",
+      )}
+      style={{
+        top: boundedTopPosition,
+        left: position.x,
+      }}
+    >
+      <ToolbarNode
+        {...rest}
+        buttonsProps={buttonsProps}
+        locked={uiAccess.toolbarNode.signal.value.locked}
+        onLockClicked={(e) => {
+          dispatchUiEvents.toolbarNode.lock(e);
+        }}
+        color={color}
+        onColorChange={handleColorChange}
+      />
+    </Transition>
+  );
+};

frontend/apps/editor3d/app/src/pages/Page2d/Engine.ts

@@ -0,0 +1,738 @@
+import Konva from "konva";
+
+import { uiAccess, uiEvents } from "./signals";
+import { ImageNode, ShapeNode, ShapeType, TextNode, PaintNode, PreviewCopyNode } from "./KonvaApp/Nodes";
+import { UndoStackManager } from "./KonvaApp/UndoRedo";
+import { CommandManager, MatteBox, SceneManager } from "./KonvaApp/EngineUtitlities";
+import {
+  NodeIsolator,
+  NodesManager,
+  NodesTranslationEventDetails,
+  NodeTransformationEventDetails,
+  NodeTransformer,
+  SelectionManager,
+  SelectionManagerEvents,
+  SelectorSquare,
+} from "./KonvaApp/NodesManagers";
+import { EngineOptions, TextNodeData, VideoNodeData } from "./KonvaApp/types";
+
+import { AppModes, VideoResolutions } from "./KonvaApp/constants";
+import { ToolbarMainButtonNames } from "./components/features/ToolbarMain/enum";
+
+import { ToolbarNodeButtonNames } from "./components/features/ToolbarNode/enums";
+import { NavigateFunction } from "react-router-dom";
+
+import { RealTimeDrawEngine } from "./KonvaApp/RenderingPrimitives/RealTimeDrawEngine";
+import { NodeColor } from "./signals/uiEvents/toolbarNode";
+import { invoke } from "@tauri-apps/api/core";
+
+import { DecodeBase64ToImage } from "./utilities/DecodeBase64ToImage";
+import { EncodeImageBitmapToBase64 } from "./utilities/EncodeImageBitmapToBase64";
+
+
+
+export interface RenderingOptions {
+  artstyle: string;
+  positivePrompt: string;
+  negativePrompt: string;
+  cinematic: boolean;
+  enginePreProcessing: boolean;
+  faceDetail: boolean;
+  lipSync: boolean;
+  upscale: boolean;
+  styleStrength: number;
+}
+
+export class Engine {
+  private navigateRef: NavigateFunction;
+  private appMode: AppModes = AppModes.INIT;
+  private boardCanvasRef: HTMLDivElement;
+  private stage: Konva.Stage;
+  private bgLayer: Konva.Layer;
+  private mediaLayer: Konva.Layer;
+  private nodeIsolationLayer: Konva.Layer;
+  private uiLayer: Konva.Layer;
+  private previewLayer: Konva.Layer;
+  private offScreenCanvas: OffscreenCanvas;
+  public realTimeDrawEngine: RealTimeDrawEngine;
+  private nodesManager: NodesManager;
+  private nodeIsolator: NodeIsolator;
+  private nodeTransformer: NodeTransformer;
+  private selectionManager: SelectionManager;
+  private selectorSquare: SelectorSquare;
+  private loadingVideosProvider: LoadingVideosProvider;
+  private matteBox: MatteBox;
+  private backgroundNode: ShapeNode | null = null;
+
+  private sceneManager: SceneManager;
+  public undoStackManager: UndoStackManager;
+  public commandManager: CommandManager;
+
+  public segmentationButtonCanBePressed: boolean = true;
+  // signal reference
+  constructor(boardCanvasRef: HTMLDivElement, options: EngineOptions) {
+    if (import.meta.env.DEV) {
+      console.log("Engine Created");
+    }
+    this.navigateRef = options.navigate;
+    this.appMode = AppModes.SELECT;
+
+    this.boardCanvasRef = boardCanvasRef;
+    this.stage = new Konva.Stage({
+      container: this.boardCanvasRef,
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+    this.bgLayer = new Konva.Layer();
+
+    this.mediaLayer = new Konva.Layer();
+    this.previewLayer = new Konva.Layer();
+
+    this.nodeIsolationLayer = new Konva.Layer();
+    this.uiLayer = new Konva.Layer();
+
+    this.stage.add(this.bgLayer);
+    this.stage.add(this.previewLayer);
+    this.stage.add(this.mediaLayer);
+    this.stage.add(this.nodeIsolationLayer);
+    this.stage.add(this.uiLayer);
+
+    // Konva Transformer
+    this.nodeTransformer = new NodeTransformer();
+    this.uiLayer.add(this.nodeTransformer.getKonvaNode());
+    // Loading Placeholders
+   
+    // Node Isolator
+    this.nodeIsolator = new NodeIsolator({
+      mediaLayerRef: this.mediaLayer,
+      nodeIsolationLayerRef: this.nodeIsolationLayer,
+    });
+
+    // core layer for all the work done.
+    this.offScreenCanvas = new OffscreenCanvas(0, 0);
+
+    // Collection of all Nodes
+    this.nodesManager = new NodesManager();
+    // Partial Collection of selected Nodes
+    this.selectionManager = new SelectionManager({
+      nodeTransformerRef: this.nodeTransformer,
+      mediaLayerRef: this.mediaLayer,
+    });
+
+    this.realTimeDrawEngine = new RealTimeDrawEngine({
+      width: VideoResolutions.SQUARE_1024.width,
+      height: VideoResolutions.SQUARE_1024.height,
+      mediaLayerRef: this.mediaLayer,
+      offScreenCanvas: this.offScreenCanvas,
+      onDraw: async (canvas, lineBounds) => {
+        await this.addPaintNode(canvas, lineBounds);
+      },
+      onPreviewCopy: async (image) => {
+        await this.addPreviewCopy(image);
+      },
+    });
+
+    // Selector Square to select Nodes
+    this.selectorSquare = new SelectorSquare({
+      captureCanvasRef: this.realTimeDrawEngine.captureCanvas,
+      mediaLayerRef: this.mediaLayer,
+      nodesManagerRef: this.nodesManager,
+      selectionManagerRef: this.selectionManager,
+      stageRef: this.stage,
+    });
+    this.uiLayer.add(this.selectorSquare.getKonvaNode());
+
+    //Collection of commands for undo-redo
+    this.undoStackManager = new UndoStackManager(() => {
+      //this.realTimeDrawEngine.render();
+    });
+    this.commandManager = new CommandManager({
+      mediaLayerRef: this.mediaLayer,
+      nodesManagerRef: this.nodesManager,
+      nodeTransformerRef: this.nodeTransformer,
+      selectionManagerRef: this.selectionManager,
+      renderEngineRef: this.realTimeDrawEngine,
+      undoStackManagerRef: this.undoStackManager,
+    });
+
+    // set up secene manager
+    this.sceneManager = new SceneManager({
+      navigateRef: this.navigateRef,
+      loadingVideosProviderRef: this.loadingVideosProvider,
+      mediaLayerRef: this.mediaLayer,
+      nodesManagerRef: this.nodesManager,
+      selectionManagerRef: this.selectionManager,
+      renderEngineRef: this.realTimeDrawEngine,
+    });
+    
+    this.matteBox = new MatteBox({
+      boardCanvasSize: {
+        width: this.boardCanvasRef.clientWidth,
+        height: this.boardCanvasRef.clientHeight,
+      },
+      captureCanvasSize: this.realTimeDrawEngine.captureCanvas.getSize(),
+      uiLayerRef: this.uiLayer,
+    });
+
+    // some of the managers has events
+    // hence, lastly, setup these events
+    this.setupEventSystem();
+    this.setAppMode(this.appMode);
+  }
+
+  private setAppMode(newAppMode: AppModes) {
+    this.appMode = newAppMode;
+    switch (this.appMode) {
+      case AppModes.PAINT: {
+        console.log("APPMODE: PAINT");
+        this.selectorSquare.disable(); // this breaks the paint if you use it in the wrong spot
+        this.selectionManager.disable(); // this prevents selection.
+        this.realTimeDrawEngine.enablePaintMode();
+
+        uiAccess.toolbarMain.enable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: false,
+        });
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.PAINT, {
+          active: true,
+        });
+        this.matteBox.disable();
+        return;
+      }
+      case AppModes.SELECT: {
+        console.log("APPMODE: SELECT");
+        this.realTimeDrawEngine.disablePaintMode();
+
+        this.selectorSquare.enable();
+        this.selectionManager.enable();
+        uiAccess.toolbarMain.enable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: true,
+        });
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.PAINT, {
+          active: false,
+        });
+        this.matteBox.disable();
+        document.body.style.cursor = "default";
+        return;
+      }
+      case AppModes.PREVIEW: {
+        console.log("APPMODE: RENDER");
+        this.selectorSquare.disable();
+        this.selectionManager.disable();
+        uiAccess.toolbarMain.disable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: false,
+        });
+        this.matteBox.enable();
+        document.body.style.cursor = "not-allowed";
+        return;
+      }
+      case AppModes.RENDERING: {
+        console.log("APPMODE: RENDER");
+        this.selectorSquare.disable();
+        this.selectionManager.disable();
+        uiAccess.toolbarMain.disable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: false,
+        });
+        this.matteBox.enable(true);
+        document.body.style.cursor = "wait";
+        return;
+      }
+      case AppModes.INIT:
+      default: {
+        console.log("APPMODE: INIT");
+        this.selectorSquare.disable();
+        uiAccess.toolbarMain.disable();
+        this.selectionManager.disable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: false,
+        });
+        document.body.style.cursor = "wait";
+        this.matteBox.disable();
+      }
+    }
+  }
+  private setupEventSystem() {
+    // Listen to changes in container size
+    const resizeObserver = new ResizeObserver(() => {
+      this.onBoardCanvasResize();
+    });
+    resizeObserver.observe(this.boardCanvasRef);
+    this.onBoardCanvasResize();
+
+    // Listen to Nodes
+    this.selectionManager.eventTarget.addEventListener(
+      SelectionManagerEvents.NODES_TRANSLATIONS,
+      ((event: CustomEvent<NodesTranslationEventDetails>) => {
+        //console.log("Event: SelectionManager -> Engine", event);
+        this.commandManager.translateNodes(event.detail);
+      }) as EventListener,
+    );
+    this.selectionManager.eventTarget.addEventListener(
+      SelectionManagerEvents.NODES_TRANSFORMATION,
+      ((event: CustomEvent<NodeTransformationEventDetails>) => {
+        //console.log("Event: SelectionManager -> Engine", event);
+        this.commandManager.transformNodes(event.detail);
+      }) as EventListener,
+    );
+
+    // Listen to Tooolbar Node
+    uiEvents.toolbarNode.lock.onClick(() => {
+      this.commandManager.toggleLockNodes();
+    });
+    uiEvents.toolbarNode.DOWNLOAD.onClick(() => {
+      const nodes = this.selectionManager.getSelectedNodes();
+      if (nodes.size > 1) {
+        uiAccess.dialogError.show({
+          title: "Error: Download Node Content",
+          message:
+            "Please do not select more than 1 item for the Download Node Content feature, you can only download 1 item at a time",
+        });
+        return;
+      }
+      const node = nodes.values().next().value;
+      try {
+        if (node instanceof VideoNode && node.currentUrl) {
+          downloadURI(node.currentUrl, `Download Video Node-${node.kNode.id}`);
+        } else {
+          throw new Error();
+        }
+      } catch {
+        uiAccess.dialogError.show({
+          title: "Error: Download Node Content",
+          message: "This item does not have content for download.",
+        });
+      }
+    });
+
+    uiEvents.toolbarNode.DELETE.onClick(() =>
+      this.commandManager.deleteNodes(),
+    );
+    uiEvents.toolbarNode.MOVE_LAYER_DOWN.onClick(() =>
+      this.commandManager.moveNodesDown(),
+    );
+    uiEvents.toolbarNode.MOVE_LAYER_UP.onClick(() =>
+      this.commandManager.moveNodesUp(),
+    );
+    uiEvents.toolbarNode.REMOVE_BACKGROUND.onClick(() =>
+      this.removeBackground(),
+    );
+
+    // Listen to Toolbar Main
+    uiEvents.toolbarMain.UNDO.onClick(() => {
+      this.undoStackManager.undo();
+    });
+    uiEvents.toolbarMain.REDO.onClick(() => {
+      this.undoStackManager.redo();
+      //this.realTimeDrawEngine.render();
+    });
+
+    uiEvents.toolbarMain.SAVE.onClick(async (/*event*/) => {
+      //await this.realTimeDrawEngine.saveOutput(); // This works.
+      await invoke("open_login_command");
+    });
+
+    uiEvents.toolbarMain.GENERATE.onClick(async (/*event*/) => {
+      console.log("generate clicked");
+      await this.realTimeDrawEngine.generateImage();
+    });
+
+    uiEvents.toolbarMain.SELECT.onClick(() => {
+      console.log("Toolbar Main >> Select");
+      this.setAppMode(AppModes.SELECT);
+    });
+
+    uiEvents.toolbarMain.PAINT.onClick(() => {
+      console.log("Toolbar Main >> Paint");
+      this.setAppMode(AppModes.PAINT);
+    });
+
+    uiEvents.toolbarMain.ERASER.onClick(() => {
+      console.log("Toolbar Main >> Eraser");
+    });
+
+    uiEvents.toolbarMain.PREVIEW.onClick(async () => {
+      console.log("Toolbar Main >> Preview");
+      this.setAppMode(AppModes.PREVIEW);
+      await this.handlePreview();
+      this.setAppMode(AppModes.SELECT);
+    });
+    uiEvents.toolbarMain.DOWNLOAD.onClick(async () => {
+      console.log("Toolbar Main >> Render Download");
+      try {
+        this.setAppMode(AppModes.RENDERING);
+      } catch (error) {
+        // throw error to retry
+        uiAccess.dialogError.show({
+          title: "Generation Error",
+          message: error?.toString() || "Unknown Error",
+        });
+        this.setAppMode(AppModes.SELECT);
+      }
+    });
+    // Listen to other toolbars
+    // VideoExtraction Toolbar
+  
+
+    // Listen to other requests coming from the UI
+    uiEvents.onGetStagedImage((image) => {
+      this.addImage(image);
+    });
+
+    uiEvents.onAddTextToEngine((textdata) => {
+      this.addText(textdata);
+    });
+
+    let renderTimeout: NodeJS.Timeout;
+
+    uiEvents.promptEvents.onPromptStrengthChanged(async (strength) => {
+      this.realTimeDrawEngine.currentStrength = strength / 100.0;
+      clearTimeout(renderTimeout);
+      renderTimeout = setTimeout(async () => {
+        //await this.realTimeDrawEngine.render();
+      }, 1000);
+    });
+
+    uiEvents.promptEvents.onPromptTextChanged(async (prompt) => {
+      this.realTimeDrawEngine.currentPrompt = prompt;
+      clearTimeout(renderTimeout);
+      renderTimeout = setTimeout(async () => {
+        //await this.realTimeDrawEngine.render();
+      }, 1000);
+    });
+
+    uiEvents.onAddShapeToEngine((shapeData) => {
+      switch (shapeData.shape) {
+        case "circle":
+          this.addShape(ShapeType.CIRCLE, 100);
+          break;
+        case "square":
+          this.addShape(ShapeType.SQUARE, 100);
+          break;
+        case "triangle":
+          this.addShape(ShapeType.TRIANGLE, 100);
+          break;
+      }
+    });
+
+    uiEvents.toolbarMain.onBgColorChanged((data) => {
+      this.realTimeDrawEngine.updateBackground(data);
+    });
+
+    uiEvents.toolbarNode.color.onConfirmChanged((nodeColor) => {
+      console.log("Color change event triggered with:", nodeColor);
+      if (!nodeColor) {
+        console.warn("nodeColor is undefined or null");
+        return;
+      }
+      if (!nodeColor.kNodeId) {
+        console.warn("nodeColor.kNodeId is undefined or null");
+        return;
+      }
+      this.changeNodeColor(nodeColor);
+    });
+    uiEvents.toolbarMain.onPaintColorChanged((color) => {
+      this.realTimeDrawEngine.paintColor = color;
+    });
+
+    uiEvents.toolbarMain.onEraseBrushSizeChanged((size: number) => {
+      this.realTimeDrawEngine.paintBrushSize = size;
+    });
+  }
+
+  removeBackground() {
+    const selectedNodeSet = this.selectionManager.getSelectedNodes();
+
+    if (selectedNodeSet.size !== 1) {
+      return; // Can only remove background from a single image at a time.
+    }
+
+    const [selectedNode] = selectedNodeSet;
+
+    const removeBgInvocation = async (
+      selectedNode: ImageNode,
+      callback: (
+        existingImageNode: ImageNode,
+        createdImage: ImageBitmap,
+      ) => void,
+    ) => {
+      const image: HTMLImageElement = selectedNode.kNode.image();
+      const base64Bitmap = await EncodeImageBitmapToBase64(image);
+      const base64BitmapResponse = await invoke("remove_background", {
+        image: base64Bitmap,
+      });
+
+      const createdImage = await DecodeBase64ToImage(
+        base64BitmapResponse as string,
+      );
+
+      callback(selectedNode, createdImage);
+    };
+
+    const _promise = removeBgInvocation(
+      selectedNode,
+      (selectedNode: ImageNode, createdImage: ImageBitmap) => {
+        if (!this.nodesManager.hasNode(selectedNode)) {
+          return;
+        }
+        this.commandManager.deleteSpecificNodes([selectedNode]);
+        this.addImageFromImageBitmap(createdImage);
+      },
+    );
+  }
+
+  disableAllButtons() {
+    const buttonNames = Object.values(ToolbarNodeButtonNames);
+    for (const name of buttonNames) {
+      uiAccess.toolbarNode.changeButtonState(name, { disabled: true });
+    }
+  }
+
+  async enableAllButtons() {
+    const buttonNames = Object.values(ToolbarNodeButtonNames);
+    for (const name of buttonNames) {
+      await uiAccess.toolbarNode.changeButtonState(name, { disabled: false });
+    }
+  }
+
+  sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  private onBoardCanvasResize() {
+    console.log("onBoardCanvasResize Event called");
+    // Print window dimensions for debugging
+    console.log("Window dimensions:", {
+      innerWidth: window.innerWidth,
+      innerHeight: window.innerHeight,
+      outerWidth: window.outerWidth,
+      outerHeight: window.outerHeight,
+    });
+
+    this.realTimeDrawEngine.updateCaptureCanvas(
+      window.innerWidth,
+      window.innerHeight,
+    );
+
+    this.matteBox.updateSize({
+      boardCanvasSize: {
+        width: this.boardCanvasRef.offsetWidth,
+        height: this.boardCanvasRef.offsetHeight,
+      },
+    });
+    this.uiLayer.draw();
+    this.stage.width(this.boardCanvasRef.offsetWidth);
+    this.stage.height(this.boardCanvasRef.offsetHeight);
+    this.stage.draw(); // Redraw the canvas
+  }
+
+  // Sandbox is quickly a way to test your idea.
+  public async sandbox() {}
+
+  public onMessage(event: MessageEvent) {
+    console.log("Message From Shared Worker");
+    console.log(event);
+  }
+
+  public initializeStage(sceneToken?: string) {
+    // load canvas that was originaly saved TODO Save manager for resharing.
+    uiAccess.toolbarNode.hide();
+    uiAccess.loadingBar.hide();
+    // load the scene if there's a scenetoken
+    if (sceneToken) {
+      this.sceneManager.loadScene(sceneToken);
+    }
+    this.setupStage();
+    // this.populateWithDebugItems();
+  }
+  public isInitialized() {
+    return this.stage !== null;
+  }
+
+  public async setupStage() {
+    // Frame rate inicator
+    // const textNode = new Konva.Text({
+    //   x: 10,
+    //   y: 80,
+    //   text: "",
+    //   fontSize: 18,
+    //   fontFamily: "Source Sans 3",
+    //   fill: "white",
+    // });
+    // const anim = new Konva.Animation((frame) => {
+    //   if (frame && import.meta.env.DEV) {
+    //     const timeDiff = frame.timeDiff;
+    //     const frameRate = frame.frameRate;
+    //     textNode.setText(
+    //       `FrameTime: ${timeDiff.toFixed(0)} ms\nFrameRate: ${frameRate.toFixed(0)} fps`,
+    //     );
+    //   }
+    // }, this.mediaLayer);
+
+    // anim.start();
+    //this.uiLayer.add(textNode);
+    this.addKeyboardShortcuts();
+  }
+
+  private changeNodeColor(nodeColor: NodeColor) {
+    console.log("Changing node color:", nodeColor);
+    // Find the node that is selected with the id
+    const idSelector = "#" + nodeColor.kNodeId;
+    const selectedNode = this.mediaLayer.findOne(idSelector);
+    console.log("Selected node:", selectedNode);
+    console.log("ID selector:", idSelector);
+    console.log("Media layer:", this.mediaLayer);
+    // TODO: Change the color of the node
+    // Turns out shapes are image nodes... how do we change the image's fill??
+    if (selectedNode) {
+      // Get the shape node from the real time drawing engine's image nodes
+      const shapeNode = this.realTimeDrawEngine.findImageNodeById(
+        nodeColor.kNodeId,
+      );
+      if (shapeNode && shapeNode instanceof ShapeNode) {
+        // Create new shape node with updated color
+        const newShapeNode = new ShapeNode({
+          canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+          canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+          shapeType: shapeNode.shapeType,
+          size: shapeNode.kNode.size(),
+          color: nodeColor.color,
+          mediaLayerRef: this.mediaLayer,
+          selectionManagerRef: this.selectionManager,
+          loaded: async () => {
+            //this.realTimeDrawEngine.render();
+          },
+        });
+        newShapeNode.kNode.position(shapeNode.kNode.position());
+        newShapeNode.kNode.zIndex(shapeNode.kNode.zIndex());
+
+        // Remove old node and add new one
+        shapeNode.kNode.destroy();
+        this.commandManager.createNode(newShapeNode);
+      }
+    }
+  }
+
+  public addText(textNodeData: TextNodeData) {
+    const textNode = new TextNode({
+      textNodeData: textNodeData,
+      mediaLayerRef: this.mediaLayer,
+      selectionManagerRef: this.selectionManager,
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+    });
+    this.commandManager.createNode(textNode);
+  }
+
+  public addShape(type: ShapeType, size: number, color?: string) {
+    const shapeNode = new ShapeNode({
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+      shapeType: type,
+      size: { width: size, height: size },
+      color: color,
+      mediaLayerRef: this.mediaLayer,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        //await this.realTimeDrawEngine.render();
+        this.setAppMode(AppModes.SELECT);
+      },
+    });
+
+    this.commandManager.createNode(shapeNode);
+  }
+  public addPreviewCopy(image: Image.Konva) {
+    // Start of Selection
+    const copyNode = new PreviewCopyNode({
+      image: image,
+      mediaLayerRef: this.mediaLayer,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        //this.realTimeDrawEngine.render();
+        this.setAppMode(AppModes.SELECT);
+      },
+    });
+    this.commandManager.createNode(copyNode);
+  }
+  public addImage(imageFile: File) {
+    const imageNode = new ImageNode({
+      mediaLayerRef: this.mediaLayer,
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+      imageFile: imageFile,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        //await this.realTimeDrawEngine.render();
+        this.setAppMode(AppModes.SELECT);
+      },
+    });
+
+    this.commandManager.createNode(imageNode);
+  }
+
+  public addImageFromImageBitmap(imageBitmap: ImageBitmap) {
+    const imageNode = new ImageNode({
+      mediaLayerRef: this.mediaLayer,
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+      imageBitmap: imageBitmap,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        //await this.realTimeDrawEngine.render();
+        this.setAppMode(AppModes.SELECT);
+      },
+    });
+
+    this.commandManager.createNode(imageNode);
+  }
+
+  public addPaintNode(
+    canvas: HTMLCanvasElement,
+    lineBounds: {
+      width: number;
+      height: number;
+      x: number;
+      y: number;
+    },
+  ) {
+    const node = new PaintNode({
+      canvasElement: canvas,
+      lineBounds: lineBounds,
+      mediaLayerRef: this.mediaLayer,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        //await this.realTimeDrawEngine.render();
+      },
+    });
+    this.commandManager.createNode(node);
+  }
+
+  // Events for Undo and Redo
+  private addKeyboardShortcuts() {
+    window.addEventListener("keydown", (event) => {
+      if (event.ctrlKey && event.key === "z") {
+        this.undoStackManager.undo();
+      } else if (
+        (event.ctrlKey && event.key === "y") ||
+        (event.ctrlKey && event.shiftKey && event.key === "Z")
+      ) {
+        this.undoStackManager.redo();
+      } else if (event.key === "Delete") {
+        this.commandManager.deleteNodes();
+      }
+    });
+  }   
+}
+
+// TODO: Move to utilities?
+function downloadURI(uri: string, name: string) {
+  const link = document.createElement("a");
+  link.download = name;
+  link.target = "_blank";
+  link.href = uri;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}

frontend/apps/editor3d/app/src/pages/Page2d/JobContext.tsx

@@ -0,0 +1,37 @@
+import React, { createContext, useContext, useState } from "react";
+import { JobContextType } from "@storyteller/common";
+const JobContext = createContext<JobContextType | undefined>(undefined);
+
+export const JobProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [jobTokens, setJobTokens] = useState<string[]>([]);
+
+  const addJobToken = (token: string) => {
+    setJobTokens((prevTokens) => [...prevTokens, token]);
+  };
+
+  const removeJobToken = (token: string) => {
+    setJobTokens((prevTokens) => prevTokens.filter((t) => t !== token));
+  };
+
+  const clearJobTokens = () => {
+    setJobTokens([]);
+  };
+
+  return (
+    <JobContext.Provider
+      value={{ jobTokens, addJobToken, removeJobToken, clearJobTokens }}
+    >
+      {children}
+    </JobContext.Provider>
+  );
+};
+
+export const useJobContext = () => {
+  const context = useContext(JobContext);
+  if (context === undefined) {
+    throw new Error("useJobContext must be used within a JobProvider");
+  }
+  return context;
+};

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EditEngine.ts

@@ -0,0 +1,371 @@
+import Konva from "konva";
+
+import { uiAccess } from "../signals";
+import { CommandManager, MatteBox } from "./EngineUtitlities";
+import { ImageNode } from "./Nodes";
+import { PaintNode } from "./Nodes/PaintNode";
+import {
+  NodesManager,
+  NodesTranslationEventDetails,
+  NodeTransformationEventDetails,
+  NodeTransformer,
+  SelectionManager,
+  SelectionManagerEvents,
+  SelectorSquare,
+} from "./NodesManagers";
+import { UndoStackManager } from "./UndoRedo";
+
+import { ToolbarMainButtonNames } from "../components/features/ToolbarMain/enum";
+import { EditModes, VideoResolutions } from "./constants";
+
+import { ToolbarNodeButtonNames } from "../components/features/ToolbarNode/enums";
+
+
+export interface RenderingOptions {
+  artstyle: string;
+  positivePrompt: string;
+  negativePrompt: string;
+  cinematic: boolean;
+  enginePreProcessing: boolean;
+  faceDetail: boolean;
+  lipSync: boolean;
+  upscale: boolean;
+  styleStrength: number;
+}
+
+export class EditEngine {
+  private editMode: EditModes = EditModes.SELECT;
+  private boardCanvasRef: HTMLDivElement;
+  private stage: Konva.Stage;
+
+  private mediaLayer: Konva.Layer;
+  private nodeIsolationLayer: Konva.Layer;
+  private uiLayer: Konva.Layer;
+  private offScreenCanvas: OffscreenCanvas;
+  private realTimeDrawEngine: RealTimeDrawEngine;
+  private nodesManager: NodesManager;
+  private nodeTransformer: NodeTransformer;
+  private selectionManager: SelectionManager;
+  private selectorSquare: SelectorSquare;
+  private matteBox: MatteBox;
+
+  private undoStackManager: UndoStackManager;
+  private commandManager: CommandManager;
+
+  public segmentationButtonCanBePressed: boolean = true;
+  // signal reference
+  constructor(boardCanvasRef: HTMLDivElement) {
+    if (import.meta.env.DEV) {
+      console.log("Engine Created");
+    }
+    this.editMode = EditModes.SELECT;
+
+    this.boardCanvasRef = boardCanvasRef;
+
+    this.stage = new Konva.Stage({
+      container: this.boardCanvasRef,
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+    //this.bgLayer = new Konva.Layer();
+
+    this.mediaLayer = new Konva.Layer();
+
+    this.nodeIsolationLayer = new Konva.Layer();
+    this.uiLayer = new Konva.Layer();
+
+    //this.stage.add(this.bgLayer);
+    this.stage.add(this.mediaLayer);
+    this.stage.add(this.nodeIsolationLayer);
+    this.stage.add(this.uiLayer);
+
+    // Konva Transformer
+    this.nodeTransformer = new NodeTransformer();
+    this.uiLayer.add(this.nodeTransformer.getKonvaNode());
+
+    // core layer for all the work done.
+    this.offScreenCanvas = new OffscreenCanvas(0, 0);
+
+    // Collection of all Nodes
+    this.nodesManager = new NodesManager();
+    // Partial Collection of selected Nodes
+    this.selectionManager = new SelectionManager({
+      nodeTransformerRef: this.nodeTransformer,
+      mediaLayerRef: this.mediaLayer,
+    });
+
+    this.realTimeDrawEngine = new RealTimeDrawEngine({
+      width: VideoResolutions.SQUARE_1024.width,
+      height: VideoResolutions.SQUARE_1024.height,
+      mediaLayerRef: this.mediaLayer,
+      offScreenCanvas: this.offScreenCanvas,
+      onDraw: async (canvas, lineBounds) => {
+        await this.addPaintNode(canvas, lineBounds);
+      },
+    });
+
+    // Selector Square to select Nodes
+    this.selectorSquare = new SelectorSquare({
+      captureCanvasRef: this.realTimeDrawEngine.captureCanvas,
+      mediaLayerRef: this.mediaLayer,
+      nodesManagerRef: this.nodesManager,
+      selectionManagerRef: this.selectionManager,
+      stageRef: this.stage,
+    });
+    this.uiLayer.add(this.selectorSquare.getKonvaNode());
+
+    //Collection of commands for undo-redo
+    this.undoStackManager = new UndoStackManager(() => {
+      this.realTimeDrawEngine.render();
+    });
+    this.commandManager = new CommandManager({
+      mediaLayerRef: this.mediaLayer,
+      nodesManagerRef: this.nodesManager,
+      nodeTransformerRef: this.nodeTransformer,
+      selectionManagerRef: this.selectionManager,
+      renderEngineRef: this.realTimeDrawEngine,
+      undoStackManagerRef: this.undoStackManager,
+    });
+
+    this.matteBox = new MatteBox({
+      boardCanvasSize: {
+        width: this.boardCanvasRef.clientWidth,
+        height: this.boardCanvasRef.clientHeight,
+      },
+      captureCanvasSize: this.realTimeDrawEngine.captureCanvas.getSize(),
+      uiLayerRef: this.uiLayer,
+    });
+
+    // some of the managers has events
+    // hence, lastly, setup these events
+    this.setupEventSystem();
+    this.setEditMode(this.editMode);
+  }
+
+  private setEditMode(newEditMode: EditModes) {
+    this.editMode = newEditMode;
+    switch (this.editMode) {
+      case EditModes.SELECT:
+      default: {
+        console.log("EDITMODE: SELECT");
+        this.realTimeDrawEngine.disablePaintMode();
+
+        this.selectorSquare.enable();
+        this.selectionManager.enable();
+        uiAccess.toolbarMain.enable();
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.SELECT, {
+          active: true,
+        });
+        uiAccess.toolbarMain.changeButtonState(ToolbarMainButtonNames.PAINT, {
+          active: false,
+        });
+        this.matteBox.disable();
+        document.body.style.cursor = "default";
+        return;
+      }
+      case EditModes.EDIT: {
+        console.log("EDITMODE: EDIT");
+        this.realTimeDrawEngine.enablePaintMode();
+        this.selectorSquare.disable();
+        this.selectionManager.disable();
+      }
+    }
+  }
+  private setupEventSystem() {
+    // Listen to changes in container size
+    const resizeObserver = new ResizeObserver(() => {
+      this.onBoardCanvasResize();
+    });
+    resizeObserver.observe(this.boardCanvasRef);
+    this.onBoardCanvasResize();
+
+    // Listen to Nodes
+    this.selectionManager.eventTarget.addEventListener(
+      SelectionManagerEvents.NODES_TRANSLATIONS,
+      ((event: CustomEvent<NodesTranslationEventDetails>) => {
+        //console.log("Event: SelectionManager -> Engine", event);
+        this.commandManager.translateNodes(event.detail);
+      }) as EventListener,
+    );
+    this.selectionManager.eventTarget.addEventListener(
+      SelectionManagerEvents.NODES_TRANSFORMATION,
+      ((event: CustomEvent<NodeTransformationEventDetails>) => {
+        //console.log("Event: SelectionManager -> Engine", event);
+        this.commandManager.transformNodes(event.detail);
+      }) as EventListener,
+    );
+
+    // Listen to Toolbar Main
+    // uiEvents.toolbarMain.UNDO.onClick(() => {
+    //   this.undoStackManager.undo();
+    // });
+    // uiEvents.toolbarMain.REDO.onClick(() => {
+    //   this.undoStackManager.redo();
+    //   this.realTimeDrawEngine.render();
+    // });
+
+    // uiEvents.toolbarMain.SAVE.onClick(async (/*event*/) => {
+    //   await this.realTimeDrawEngine.saveOutput();
+    // });
+
+    // uiEvents.toolbarMain.SELECT.onClick(() => {
+    //   console.log("Toolbar Main >> Select");
+    //   this.setAppMode(AppModes.SELECT);
+    // });
+
+    // uiEvents.toolbarMain.PAINT.onClick(() => {
+    //   console.log("Toolbar Main >> Paint");
+    //   this.setAppMode(AppModes.PAINT);
+    // });
+  }
+
+  disableAllButtons() {
+    const buttonNames = Object.values(ToolbarNodeButtonNames);
+    for (const name of buttonNames) {
+      uiAccess.toolbarNode.changeButtonState(name, { disabled: true });
+    }
+  }
+
+  async enableAllButtons() {
+    const buttonNames = Object.values(ToolbarNodeButtonNames);
+    for (const name of buttonNames) {
+      await uiAccess.toolbarNode.changeButtonState(name, { disabled: false });
+    }
+  }
+
+  sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  private onBoardCanvasResize() {
+    this.realTimeDrawEngine.updateCaptureCanvas(0, 0);
+    console.log("onBoardCanvasResize Event called");
+    console.log("Board Canvas values below");
+    console.log(this.boardCanvasRef.offsetWidth);
+    console.log(this.boardCanvasRef.offsetHeight);
+
+    this.matteBox.updateSize({
+      boardCanvasSize: {
+        width: this.boardCanvasRef.offsetWidth,
+        height: this.boardCanvasRef.offsetHeight,
+      },
+    });
+
+    this.uiLayer.draw();
+    this.stage.width(this.boardCanvasRef.offsetWidth);
+    this.stage.height(this.boardCanvasRef.offsetHeight);
+    this.stage.draw(); // Redraw the canvas
+  }
+
+  // Sandbox is quickly a way to test your idea.
+  public async sandbox() {}
+
+  public onMessage(event: MessageEvent) {
+    console.log("Message From Shared Worker");
+    console.log(event);
+  }
+
+  public initializeStage() {
+    // load canvas that was originaly saved TODO Save manager for resharing.
+    uiAccess.toolbarNode.hide();
+    uiAccess.loadingBar.hide();
+    this.setupStage();
+  }
+
+  public isInitialized() {
+    return this.stage !== null;
+  }
+
+  public async setupStage() {
+    // Frame rate inicator
+    // const textNode = new Konva.Text({
+    //   x: 10,
+    //   y: 80,
+    //   text: "",
+    //   fontSize: 18,
+    //   fontFamily: "Source Sans 3",
+    //   fill: "white",
+    // });
+    // const anim = new Konva.Animation((frame) => {
+    //   if (frame && import.meta.env.DEV) {
+    //     const timeDiff = frame.timeDiff;
+    //     const frameRate = frame.frameRate;
+    //     textNode.setText(
+    //       `FrameTime: ${timeDiff.toFixed(0)} ms\nFrameRate: ${frameRate.toFixed(0)} fps`,
+    //     );
+    //   }
+    // }, this.mediaLayer);
+
+    // anim.start();
+    // this.uiLayer.add(textNode);
+    this.addKeyboardShortcuts();
+  }
+
+  public addImage(imageFile: File) {
+    const imageNode = new ImageNode({
+      mediaLayerRef: this.mediaLayer,
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+      imageFile: imageFile,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        await this.realTimeDrawEngine.render();
+        this.setEditMode(EditModes.SELECT);
+      },
+    });
+
+    this.commandManager.createNode(imageNode);
+  }
+
+  public addImageFromImageBitmap(imageBitmap: ImageBitmap) {
+    const imageNode = new ImageNode({
+      mediaLayerRef: this.mediaLayer,
+      canvasPosition: this.realTimeDrawEngine.captureCanvas.position(),
+      canvasSize: this.realTimeDrawEngine.captureCanvas.size(),
+      imageBitmap: imageBitmap,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        await this.realTimeDrawEngine.render();
+        this.setEditMode(EditModes.SELECT);
+      },
+    });
+
+    this.commandManager.createNode(imageNode);
+  }
+
+  public addPaintNode(
+    canvas: HTMLCanvasElement,
+    lineBounds: {
+      width: number;
+      height: number;
+      x: number;
+      y: number;
+    },
+  ) {
+    var node = new PaintNode({
+      canvasElement: canvas,
+      lineBounds: lineBounds,
+      mediaLayerRef: this.mediaLayer,
+      selectionManagerRef: this.selectionManager,
+      loaded: async () => {
+        await this.realTimeDrawEngine.render();
+      },
+    });
+    this.commandManager.createNode(node);
+  }
+  // Events for Undo and Redo
+  private addKeyboardShortcuts() {
+    window.addEventListener("keydown", (event) => {
+      if (event.ctrlKey && event.key === "z") {
+        this.undoStackManager.undo();
+      } else if (
+        (event.ctrlKey && event.key === "y") ||
+        (event.ctrlKey && event.shiftKey && event.key === "Z")
+      ) {
+        this.undoStackManager.redo();
+      } else if (event.key === "Delete") {
+        this.commandManager.deleteNodes();
+      }
+    });
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/Base64Helpers.ts

@@ -0,0 +1,7 @@
+const ensureBase64Prefix = (base64String: string) => {
+    return base64String.startsWith("data:")
+      ? base64String
+      : `data:image/png;base64,${base64String}`;
+}
+
+export { ensureBase64Prefix };

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/CommandManager.ts

@@ -0,0 +1,157 @@
+import Konva from "konva";
+
+import { MediaNode, Position, RGBColor, Transformation } from "../types";
+import {
+  
+  CreateCommand,
+  DeleteCommand,
+  LockNodesCommand,
+  MoveLayerDown,
+  MoveLayerUp,
+  
+  TransformCommand,
+  TranslateCommand,
+  UndoStackManager,
+  UnlockNodesCommand,
+  
+} from "../UndoRedo";
+import {
+  NodesManager,
+  NodeTransformer,
+  SelectionManager,
+} from "../NodesManagers";
+import { RealTimeDrawEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
+
+interface EngineReferences {
+  mediaLayerRef: Konva.Layer;
+  nodesManagerRef: NodesManager;
+  nodeTransformerRef: NodeTransformer;
+  selectionManagerRef: SelectionManager;
+  renderEngineRef: RealTimeDrawEngine;
+  undoStackManagerRef: UndoStackManager;
+}
+
+export class CommandManager {
+  private mediaLayerRef: Konva.Layer;
+  private nodesManagerRef: NodesManager;
+  private nodeTransformerRef: NodeTransformer;
+  private selectionManagerRef: SelectionManager;
+  private renderEngineRef: RealTimeDrawEngine;
+  private undoStackManagerRef: UndoStackManager;
+
+  constructor(engineRefs: EngineReferences) {
+    this.mediaLayerRef = engineRefs.mediaLayerRef;
+    this.nodesManagerRef = engineRefs.nodesManagerRef;
+    this.nodeTransformerRef = engineRefs.nodeTransformerRef;
+    this.selectionManagerRef = engineRefs.selectionManagerRef;
+    this.renderEngineRef = engineRefs.renderEngineRef;
+    this.undoStackManagerRef = engineRefs.undoStackManagerRef;
+  }
+
+  createNode(node: MediaNode) {
+    const command = new CreateCommand({
+      nodes: new Set<MediaNode>([node]),
+      mediaLayerRef: this.mediaLayerRef,
+      nodesManagerRef: this.nodesManagerRef,
+      nodeTransformerRef: this.nodeTransformerRef,
+      selectionManagerRef: this.selectionManagerRef,
+      renderEngineRef: this.renderEngineRef,
+    });
+    this.undoStackManagerRef.executeCommand(command);
+
+    // Set the kNode's manual id to same as kNode's internal _id
+    // This helps identify the kNode in the Konva layer with find
+    node.kNode.id(node.kNode._id.toString());
+    //this.renderEngineRef.render();
+  }
+  deleteNodes() {
+    const nodes = this.selectionManagerRef.getSelectedNodes();
+    const command = new DeleteCommand({
+      nodes: nodes,
+      mediaLayerRef: this.mediaLayerRef,
+      nodesManagerRef: this.nodesManagerRef,
+      nodeTransformerRef: this.nodeTransformerRef,
+      selectionManagerRef: this.selectionManagerRef,
+      renderEngineRef: this.renderEngineRef,
+    });
+    this.undoStackManagerRef.executeCommand(command);
+    //this.renderEngineRef.render();
+  }
+
+  deleteSpecificNodes(nodes: MediaNode[]) {
+    const command = new DeleteCommand({
+      nodes: nodes,
+      mediaLayerRef: this.mediaLayerRef,
+      nodesManagerRef: this.nodesManagerRef,
+      nodeTransformerRef: this.nodeTransformerRef,
+      selectionManagerRef: this.selectionManagerRef,
+      renderEngineRef: this.renderEngineRef,
+    });
+    this.undoStackManagerRef.executeCommand(command);
+    //this.renderEngineRef.render();
+  }
+
+  toggleLockNodes() {
+    const nodes = this.selectionManagerRef.getSelectedNodes();
+    const node = nodes.values().next().value;
+    if (!node) {
+      console.log("Node Not Found for Locking");
+      return;
+    }
+    if (node.isLocked()) {
+      const command = new UnlockNodesCommand({
+        nodes: this.selectionManagerRef.getSelectedNodes(),
+      });
+      this.undoStackManagerRef.executeCommand(command);
+    } else {
+      const command = new LockNodesCommand({
+        nodes: this.selectionManagerRef.getSelectedNodes(),
+      });
+      this.undoStackManagerRef.executeCommand(command);
+    }
+  }
+  moveNodesUp() {
+    const command = new MoveLayerUp({
+      nodes: this.selectionManagerRef.getSelectedNodes(),
+      nodesManagerRef: this.nodesManagerRef,
+      mediaLayerRef: this.mediaLayerRef,
+    });
+    this.undoStackManagerRef.executeCommand(command);
+    //this.renderEngineRef.render();
+  }
+  moveNodesDown() {
+    const command = new MoveLayerDown({
+      nodes: this.selectionManagerRef.getSelectedNodes(),
+      nodesManagerRef: this.nodesManagerRef,
+      mediaLayerRef: this.mediaLayerRef,
+    });
+    this.undoStackManagerRef.executeCommand(command);
+    //this.renderEngineRef.render();
+  }
+  translateNodes(props: {
+    nodes: Set<MediaNode>;
+    initialPositions: Map<MediaNode, Position>;
+    finalPositions: Map<MediaNode, Position>;
+  }) {
+    const command = new TranslateCommand({
+      ...props,
+      layerRef: this.mediaLayerRef,
+    });
+    this.undoStackManagerRef.pushCommand(command);
+    //this.renderEngineRef.render();
+  }
+  transformNodes(props: {
+    nodes: Set<MediaNode>;
+    initialTransformations: Map<MediaNode, Transformation[]>;
+    finalTransformations: Map<MediaNode, Transformation[]>;
+  }) {
+    const command = new TransformCommand({
+      ...props,
+      layerRef: this.mediaLayerRef,
+    });
+    this.undoStackManagerRef.pushCommand(command);
+    //this.renderEngineRef.render();
+  }
+  
+ 
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/MatteBox.ts

@@ -0,0 +1,134 @@
+import Konva from "konva";
+import { Size } from "../types";
+import { Colors } from "../constants";
+import { uiAccess } from "../../signals/uiAccess";
+
+export class MatteBox {
+  private matteBoxPoly: Konva.Line;
+  private lightBoxRect: Konva.Rect;
+  private uiLayerRef: Konva.Layer;
+  private boardCanvasSize: Size;
+  private captureCanvasSize: Size;
+
+  constructor({
+    boardCanvasSize,
+    captureCanvasSize,
+    uiLayerRef,
+  }: {
+    boardCanvasSize: Size;
+    captureCanvasSize: Size;
+    uiLayerRef: Konva.Layer;
+  }) {
+    this.uiLayerRef = uiLayerRef;
+    this.boardCanvasSize = boardCanvasSize;
+    this.captureCanvasSize = captureCanvasSize;
+    this.matteBoxPoly = new Konva.Line({
+      points: getMatteBoxPolygonPoints({
+        boardCanvasSize: this.boardCanvasSize,
+        captureCanvasSize: this.captureCanvasSize,
+      }),
+      fill: Colors.translucentBlack,
+      closed: true,
+    });
+    this.lightBoxRect = new Konva.Rect({
+      size: captureCanvasSize,
+      position: {
+        x: (boardCanvasSize.width - captureCanvasSize.width) / 2,
+        y: (boardCanvasSize.height - captureCanvasSize.height) / 2,
+      },
+      fill: Colors.transparent,
+      // fill: "rgba(100,0,0,0.3)",
+    });
+  }
+  public enable(showMagicBox?: boolean) {
+    this.uiLayerRef.add(this.matteBoxPoly);
+    this.uiLayerRef.add(this.lightBoxRect);
+    if (showMagicBox) {
+      uiAccess.magicBox.show();
+    }
+  }
+  public disable() {
+    this.matteBoxPoly.remove();
+    this.lightBoxRect.remove();
+    if (uiAccess.magicBox.isShowing()) {
+      uiAccess.magicBox.hide();
+    }
+  }
+  public updateSize({
+    boardCanvasSize,
+    captureCanvasSize,
+  }: {
+    boardCanvasSize?: Size;
+    captureCanvasSize?: Size;
+  }) {
+    if (boardCanvasSize) {
+      this.boardCanvasSize = boardCanvasSize;
+    }
+    if (captureCanvasSize) {
+      this.captureCanvasSize = captureCanvasSize;
+    }
+    this.matteBoxPoly.points(
+      getMatteBoxPolygonPoints({
+        boardCanvasSize: this.boardCanvasSize,
+        captureCanvasSize: this.captureCanvasSize,
+      }),
+    );
+    this.lightBoxRect.setAttrs({
+      size: this.captureCanvasSize,
+      position: {
+        x: (this.boardCanvasSize.width - this.captureCanvasSize.width) / 2,
+        y: (this.boardCanvasSize.height - this.captureCanvasSize.height) / 2,
+      },
+    });
+  }
+}
+
+function getMatteBoxPolygonPoints({
+  boardCanvasSize: board,
+  captureCanvasSize: capture,
+}: {
+  boardCanvasSize: Size;
+  captureCanvasSize: Size;
+}) {
+  return [
+    //top left
+    0,
+    0,
+    // top right
+    board.width,
+    0,
+    //bottom right
+    board.width,
+    board.height,
+    //bottom middle
+    board.width / 2,
+    board.height,
+    //canvas bottom middle,
+    board.width / 2,
+    (board.height - capture.height) / 2 + capture.height,
+    //canvas bottom right,
+    (board.width - capture.width) / 2 + capture.width,
+    (board.height - capture.height) / 2 + capture.height,
+    //canvas top right,
+    (board.width - capture.width) / 2 + capture.width,
+    (board.height - capture.height) / 2,
+    //canvas top left,
+    (board.width - capture.width) / 2,
+    (board.height - capture.height) / 2,
+    //canvas bottom left,
+    (board.width - capture.width) / 2,
+    (board.height - capture.height) / 2 + capture.height,
+    //canvas bottom middle,
+    board.width / 2,
+    (board.height - capture.height) / 2 + capture.height,
+    //bottom middle
+    board.width / 2,
+    board.height,
+    //bottom left
+    0,
+    board.height,
+    //back to top left
+    0,
+    0,
+  ];
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/SceneManager.ts

@@ -0,0 +1,230 @@
+import Konva from "konva";
+import { v4 as uuidv4 } from "uuid";
+// TODO: USE API STORTELLE
+import { MediaFilesApi, MediaUploadApi } from "~/Classes/ApiManager";
+import { NodesManager, SelectionManager } from "../NodesManagers";
+import {
+  ImageNodeData,
+  NodeData,
+  TextNodeData,
+  TransformationData,
+  VideoNodeData,
+} from "../types";
+import { uiAccess } from "../../signals/uiAccess";
+import { NavigateFunction } from "react-router-dom";
+import { NodeType } from "../Nodes/constants";
+import { ImageNode, TextNode } from "../Nodes";
+import { RealTimeDrawEngine as RenderEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
+
+
+export class SceneManager {
+  private navigateRef: NavigateFunction;
+
+
+  private mediaLayerRef: Konva.Layer;
+  private nodesManagerRef: NodesManager;
+  private selectionManagerRef: SelectionManager;
+  private renderEngineRef: RenderEngine;
+  private currentSceneToken: string | undefined;
+
+  constructor({
+    navigateRef,
+  
+    mediaLayerRef,
+    nodesManagerRef,
+    selectionManagerRef,
+    renderEngineRef,
+  }: {
+    navigateRef: NavigateFunction;
+
+    mediaLayerRef: Konva.Layer;
+    nodesManagerRef: NodesManager;
+    selectionManagerRef: SelectionManager;
+    renderEngineRef: RenderEngine;
+  }) {
+    this.navigateRef = navigateRef;
+
+    this.mediaLayerRef = mediaLayerRef;
+    this.nodesManagerRef = nodesManagerRef;
+    this.selectionManagerRef = selectionManagerRef;
+    this.renderEngineRef = renderEngineRef;
+  }
+
+  public async saveScene() {
+    const mediaUploadApi = new MediaUploadApi();
+    const timestamp = new Date();
+    const sceneTitle =
+      "board_" + timestamp.toISOString().substring(0, 19).replace(/\D/g, "");
+
+    const saveJson = this.extractAllNodesData();
+    console.log("saveJson", saveJson);
+    const file = new File([saveJson], `${sceneTitle}`, {
+      type: "application/json",
+    });
+    if (!this.currentSceneToken) {
+      const uploadResponse = await mediaUploadApi.UploadNewScene({
+        blob: file,
+        fileName: file.name,
+        uuid: uuidv4(),
+      });
+      console.log(uploadResponse);
+      if (!uploadResponse.success || !uploadResponse.data) {
+        uiAccess.dialogError.show({
+          title: "Save New Scene Error",
+          message: uploadResponse.errorMessage,
+        });
+        return;
+      }
+      this.currentSceneToken = uploadResponse.data;
+      this.navigateRef(`/${this.currentSceneToken}`);
+    } else {
+      const uploadResponse = await mediaUploadApi.UploadSavedScene({
+        blob: file,
+        fileName: file.name,
+        uuid: uuidv4(),
+        mediaToken: this.currentSceneToken,
+      });
+      console.log(uploadResponse);
+      if (!uploadResponse.success || !uploadResponse.data) {
+        uiAccess.dialogError.show({
+          title: "Save Scene Error",
+          message: uploadResponse.errorMessage,
+        });
+        return;
+      }
+    }
+  }
+
+  public async loadScene(mediaFileToken: string) {
+    const mediaFileApi = new MediaFilesApi();
+    const getSceneResponse = await mediaFileApi.GetMediaFileByToken({
+      mediaFileToken: mediaFileToken,
+    });
+    if (!getSceneResponse.success || !getSceneResponse.data) {
+      uiAccess.dialogError.show({
+        title: "Load Scene Error",
+        message: getSceneResponse.errorMessage,
+      });
+      return;
+    }
+    this.currentSceneToken = mediaFileToken;
+    // console.log(getSceneResponse.data);
+    // console.log(getSceneResponse.data.public_bucket_path);
+    const fileResponse = await fetch(getSceneResponse.data.public_bucket_url);
+    if (!fileResponse.ok) {
+      uiAccess.dialogError.show({
+        title: "Load Scene Error",
+        message: "Failed to download Scene File",
+      });
+      return;
+    }
+    const fileBlob = await fileResponse.blob();
+
+    const loadJson: NodeData[] = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      const readerError = () => {
+        uiAccess.dialogError.show({
+          title: "Load Scene Error",
+          message: "Failed to read Scene File",
+        });
+        this.navigateRef("/");
+        console.log("debug file Response", fileResponse);
+        console.log("debug file Blob", fileBlob);
+        reject();
+      };
+      reader.onloadend = () => {
+        try {
+          resolve(JSON.parse(reader.result as string));
+        } catch {
+          readerError();
+        }
+      };
+      reader.onerror = () => {
+        readerError();
+      };
+      reader.readAsText(fileBlob);
+    });
+
+    this.rebuildScene(loadJson);
+  }
+
+  private extractAllNodesData() {
+    const nodesData: NodeData[] = [];
+    this.nodesManagerRef.getAllNodes().forEach((node) => {
+      const nodeData = node.getNodeData(
+        this.renderEngineRef.captureCanvas.position(),
+      );
+      if (nodeData !== null) {
+        nodesData.push(nodeData);
+      }
+    });
+    nodesData.sort((a, b) => a.transform.zIndex - b.transform.zIndex);
+    return JSON.stringify(nodesData);
+  }
+
+  private rebuildScene(nodesData: NodeData[]) {
+    // console.log(nodesData);
+    nodesData.forEach((nodeDatum) => {
+      if (nodeDatum.type === NodeType.IMAGE && nodeDatum.imageNodeData) {
+        this.addImage(nodeDatum.imageNodeData, nodeDatum.transform);
+      } else if (nodeDatum.type === NodeType.VIDEO && nodeDatum.videoNodeData) {
+        this.addVideo(nodeDatum.videoNodeData, nodeDatum.transform);
+      } else if (nodeDatum.type === NodeType.TEXT && nodeDatum.textNodeData) {
+        this.addText({
+          textNodeData: nodeDatum.textNodeData,
+          transform: nodeDatum.transform,
+        });
+      }
+    });
+  }
+
+  private addImage(
+    imageNodeData: ImageNodeData,
+    transform: TransformationData,
+  ) {
+    const imageNode = new ImageNode({
+      mediaFileUrl: imageNodeData.mediaFileUrl,
+      mediaLayerRef: this.mediaLayerRef,
+      canvasPosition: this.renderEngineRef.captureCanvas.position(),
+      canvasSize: this.renderEngineRef.captureCanvas.size(),
+      transform: transform,
+      selectionManagerRef: this.selectionManagerRef,
+    });
+    this.nodesManagerRef.saveNode(imageNode);
+    this.renderEngineRef.addNodes(imageNode);
+  }
+  private addVideo(
+    videoNodeData: VideoNodeData,
+    transform: TransformationData,
+  ) {
+    const videoNode = new VideoNode({
+      loadingVideosProviderRef: this.loadingVideosProviderRef,
+      mediaLayerRef: this.mediaLayerRef,
+      selectionManagerRef: this.selectionManagerRef,
+      canvasPosition: this.renderEngineRef.captureCanvas.position(),
+      canvasSize: this.renderEngineRef.captureCanvas.size(),
+      videoNodeData: videoNodeData,
+      transform: transform,
+    });
+    this.nodesManagerRef.saveNode(videoNode);
+    this.renderEngineRef.addNodes(videoNode);
+  }
+  private addText({
+    textNodeData,
+    transform,
+  }: {
+    textNodeData: TextNodeData;
+    transform: TransformationData;
+  }) {
+    const textNode = new TextNode({
+      textNodeData: textNodeData,
+      transform: transform,
+      mediaLayerRef: this.mediaLayerRef,
+      canvasPosition: this.renderEngineRef.captureCanvas.position(),
+      canvasSize: this.renderEngineRef.captureCanvas.size(),
+      selectionManagerRef: this.selectionManagerRef,
+    });
+    this.nodesManagerRef.saveNode(textNode);
+    this.renderEngineRef.addNodes(textNode);
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/EngineUtitlities/index.ts

@@ -0,0 +1,3 @@
+export { CommandManager } from "./CommandManager";
+export { MatteBox } from "./MatteBox";
+export { SceneManager } from "./SceneManager";

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/GenerationEngine.ts

@@ -0,0 +1,46 @@
+import { invoke } from "@tauri-apps/api/core";
+import {
+  cancelGeneration,
+  finishGeneration,
+  onStartGeneration,
+} from "~/signals/generation/generationSignals";
+
+export class GenerationEngine {
+  private isGenerating = false;
+
+  constructor() {
+    console.log("GenerationEngine constructor");
+    this.attachEventListeners();
+  }
+
+  private attachEventListeners() {
+    onStartGeneration((prompt) => {
+      this.invokeGeneration(prompt);
+    });
+  }
+
+  private async invokeGeneration(prompt: string) {
+    if (this.isGenerating) {
+      return;
+    }
+
+    this.isGenerating = true;
+    console.log("Invoking generation for prompt:", prompt);
+
+    try {
+      const base64BitmapResponse = await invoke("text_to_image", {
+        prompt: prompt,
+      });
+
+      console.log("Generation finished with response:", base64BitmapResponse);
+
+      const base64string = base64BitmapResponse as string;
+      finishGeneration(base64string);
+    } catch (error) {
+      console.error("Error during image processing:", error);
+      cancelGeneration();
+    } finally {
+      this.isGenerating = false;
+    }
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/BaseNode.ts

@@ -0,0 +1,253 @@
+import Konva from "konva";
+
+import { SelectionManager } from "../NodesManagers";
+import { highlightStrokeWidth, primaryOrange } from "./constants";
+import { NodeData, Position } from "../types";
+import { RealTimeDrawEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
+import { MouseEventHandler } from "react";
+import { KonvaEventObject } from "konva/lib/Node";
+
+export type SupportedNode = Konva.Image | Konva.Group | Konva.Shape;
+
+export abstract class BaseNode {
+  protected selectionManagerRef: SelectionManager;
+  public kNode: SupportedNode;
+  protected mediaLayerRef: Konva.Layer;
+
+  // Internal State members
+  // do not modify internal
+  protected isSelecting: boolean = false;
+  // This locks interaction when the render engine is rendering
+  protected isProcessing: boolean = false;
+  protected _isLocked: boolean = false;
+  protected _areBaseEventsListening: boolean = false;
+  protected _isKDragEventListening: boolean = false;
+  protected _isKTranformEventListening: boolean = false;
+
+  abstract getNodeData(captureCanvasPosition: Position): NodeData | null;
+
+  constructor({
+    selectionManagerRef,
+    mediaLayerRef,
+    kNode,
+  }: {
+    selectionManagerRef: SelectionManager;
+    mediaLayerRef: Konva.Layer;
+    kNode: SupportedNode;
+  }) {
+    // console.log("Node constructed");
+    // this.uuid = uuidv4();
+    this.mediaLayerRef = mediaLayerRef;
+    this.selectionManagerRef = selectionManagerRef;
+    this.kNode = kNode;
+  }
+
+  protected delete() {
+    // Do any other clean up and delete the konva node.
+    this.kNode.destroy();
+  }
+  public async setProcessing(val: boolean) {
+    this.isProcessing = val;
+  }
+  public isKEventRef() {
+    return this._isKDragEventListening && this._isKTranformEventListening;
+  }
+  public setIsKEventRef(flag: boolean) {
+    this._isKDragEventListening = flag;
+    this._isKTranformEventListening = flag;
+    this.removeListenToBaseKNodeTransformations();
+    this.removeListenToBaseKNodeDrags();
+    if (flag) {
+      this.listenToBaseKNodeTransformations();
+      this.listenToBaseKNodeDrags();
+    }
+  }
+  public highlight() {
+    // console.log("Highlight", this.kNode._id);
+    if (this.kNode instanceof Konva.Image || this.kNode instanceof Konva.Shape) {
+      this.kNode.stroke(primaryOrange);
+      this.kNode.strokeWidth(highlightStrokeWidth);
+      return;
+    }
+    if (this.kNode instanceof Konva.Group) {
+      const wrapperRect = this.kNode.findOne(".wrapper") as Konva.Rect;
+      console.log("Wrapper rect:", wrapperRect);
+      if (wrapperRect != null) {
+        wrapperRect.stroke(primaryOrange);
+        wrapperRect.strokeWidth(highlightStrokeWidth);
+      }
+      return;
+    }
+    if (import.meta.env.DEV) {
+      console.warn(
+        "DEV: BaseNode Highlight Error, kNode of BaseNode should be override by MediaNodes that extends kNode",
+      );
+    }
+  }
+
+  public unhighlight() {
+    // console.log("unHighlight", this.kNode._id);
+    if (this.kNode instanceof Konva.Image || this.kNode instanceof Konva.Shape) {
+      this.kNode.strokeWidth(0);
+      return;
+    }
+    if (this.kNode instanceof Konva.Group) {
+      const wrapperRect = this.kNode.findOne(".wrapper") as Konva.Rect;
+      console.log("Wrapper rect:", wrapperRect);
+      if (wrapperRect != null) {
+        // Issue investigate
+        wrapperRect.strokeWidth(0);
+      }
+      return;
+    }
+    if (import.meta.env.DEV) {
+      console.warn(
+        "DEV: BaseNode UnHighlight Error, kNode of BaseNode should be override by MediaNodes that extends kNode",
+      );
+    }
+  }
+
+  public moveLayerUp() {
+    this.kNode.moveUp();
+  }
+  public moveLayerDown() {
+    this.kNode.moveDown();
+  }
+  public isLocked() {
+    return this._isLocked;
+  }
+  public lock() {
+    this._isLocked = true;
+    this.kNode.setDraggable(false);
+    this.selectionManagerRef.updateNodeTransformer();
+    if (this.isKEventRef()) {
+      this.selectionManagerRef.updateContextComponents();
+    }
+  }
+  public unlock() {
+    this._isLocked = false;
+    this.kNode.setDraggable(true);
+    this.selectionManagerRef.updateNodeTransformer();
+    if (this.isKEventRef()) {
+      this.selectionManagerRef.updateContextComponents();
+    }
+  }
+
+  public listenToBaseKNode() {
+    if (this._areBaseEventsListening) {
+      return;
+    }
+    this._areBaseEventsListening = true;
+    const handleSelect = (isMultiSelect: boolean) => {
+      // console.log("handle select");
+      if (!isMultiSelect) {
+        // clear selection if not multislect
+        console.log("No Shift >> no multiselect");
+        this.selectionManagerRef.clearSelection();
+      }
+      if (this.selectionManagerRef.isNodeSelected(this)) {
+        this.selectionManagerRef.deselectNode(this);
+        return;
+      }
+      if (this.isSelecting) {
+        this.selectionManagerRef.selectNode(this);
+        return;
+      }
+    };
+
+    const handleRightClick = (e: KonvaEventObject<MouseEvent>) => {
+      this.selectionManagerRef.clearSelection();
+      this.selectionManagerRef.selectNode(this, undefined, {
+        show: true,
+        at: { x: e.evt.x, y: e.evt.y }
+      });
+    }
+
+    this.kNode.on("contextmenu", (e) => {
+      console.log("CONTEXT MENU", e);
+      e.evt.preventDefault();
+      handleRightClick(e);
+    });
+
+    this.kNode.on("mousedown", (e) => {
+      // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which
+      // 3: Right mouse button
+      // If right click, let context event handle it
+      if (e.evt.button === 2) {
+        return;
+      }
+
+      // Selection of Node
+      if (!this.selectionManagerRef.isNodeSelected(this)) {
+        this.isSelecting = true;
+        // send shift key to check for multiselect
+        handleSelect(e.evt.shiftKey);
+      }
+    });
+
+    this.kNode.on("mouseup", (e) => {
+      // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which
+      // 3: Right mouse button
+      // If right click, let context event handle it
+      if (e.evt.button === 2) {
+        return;
+      }
+
+      // just coming out of dragging or selecting mode
+      // no need to handle select
+      if (this.selectionManagerRef.isDragging() || this.isSelecting) {
+        this.isSelecting = false;
+        return;
+      }
+
+      // checking for multiselect, in multiselect deselection is possible
+      handleSelect(e.evt.shiftKey);
+    });
+  }
+  public removeListenToBaseKNode() {
+    this._areBaseEventsListening = false;
+    this.kNode.removeEventListener("mousedown mouseup");
+  }
+  private handleDragStart = () => {
+    console.log("Drag start", this.kNode._id);
+    if (this.isProcessing) {
+      return;
+    }
+    this.selectionManagerRef.dragStart();
+  };
+
+  private handleDragEnd = () => {
+    this.selectionManagerRef.dragEnd();
+  };
+
+  public listenToBaseKNodeDrags() {
+    this.kNode.on("dragstart", this.handleDragStart);
+    this.kNode.on("dragend", this.handleDragEnd);
+  }
+
+  public removeListenToBaseKNodeDrags() {
+    this.kNode.off("dragstart", this.handleDragStart);
+    this.kNode.off("dragend", this.handleDragEnd);
+  }
+  public listenToBaseKNodeTransformations() {
+    this.kNode.on("transformstart", (event) => {
+      console.log("transformstart", event.target._id);
+      this.selectionManagerRef.transformStart();
+    });
+    this.kNode.on("transform", () => {
+      this.kNode.setAttrs({
+        width: this.kNode.width() * this.kNode.scaleX(),
+        height: this.kNode.height() * this.kNode.scaleY(),
+        scaleX: 1,
+        scaleY: 1,
+      });
+    });
+    this.kNode.on("transformend", (event) => {
+      console.log("transformend", event.target._id);
+      this.selectionManagerRef.transformEnd();
+    });
+  }
+  public removeListenToBaseKNodeTransformations() {
+    this.kNode.removeEventListener("transformend");
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/ImageNode.ts

@@ -0,0 +1,261 @@
+import Konva from "konva";
+import { MediaFilesApi, MediaUploadApi } from "~/Classes/ApiManager";
+
+import { SelectionManager } from "../NodesManagers";
+import { Position, Size, NodeData, TransformationData } from "../types";
+
+import { NetworkedNode, UploadStatus } from "./NetworkedNode";
+import { NodeType, transparent } from "./constants";
+import { NodeUtilities } from "./NodeUtilities";
+
+interface ImageNodeContructor {
+  canvasPosition: Position;
+  canvasSize: Size;
+  imageFile?: File;
+  imageBitmap?: ImageBitmap;
+  mediaFileToken?: string;
+  mediaFileUrl?: string;
+  transform?: TransformationData;
+  mediaLayerRef: Konva.Layer;
+  selectionManagerRef: SelectionManager;
+  loaded: () => Promise<void>;
+}
+
+export class ImageNode extends NetworkedNode {
+  public kNode: Konva.Image;
+  public imageSize?: Size;
+  private loaded!: () => Promise<void>;
+  constructor({
+    canvasPosition,
+    canvasSize,
+    imageFile,
+    mediaFileToken,
+    mediaFileUrl,
+    transform: existingTransform,
+    mediaLayerRef,
+    selectionManagerRef,
+    loaded,
+    imageBitmap,
+  }: ImageNodeContructor) {
+    // kNodes need to be created first to guaruntee
+    // that it is not undefined in parent's context
+    const transform = NodeUtilities.getInitialTransform({
+      existingTransform,
+      canvasPosition,
+      canvasSize,
+    });
+    const kNode = new Konva.Image({
+      image: undefined, // to do replace with placeholder
+      ...transform,
+      draggable: true,
+      strokeScaleEnabled: false,
+    });
+    super({
+      selectionManagerRef: selectionManagerRef,
+      mediaLayerRef: mediaLayerRef,
+      kNode: kNode,
+      localFile: imageFile,
+    });
+    this.kNode = kNode;
+    this.loaded = loaded;
+    // this.imageSize = minNodeSize;
+    this.mediaLayerRef.add(this.kNode);
+
+    if (imageFile) {
+      this.loadImageFromFile({
+        imageFile: imageFile,
+        maxSize: canvasSize,
+        refPosition: canvasPosition,
+      });
+      return;
+    }
+    if (mediaFileUrl && transform) {
+      this.mediaFileToken = mediaFileToken;
+      this.mediaFileUrl = mediaFileUrl;
+      this.loadImageFromUrl(mediaFileUrl);
+      return;
+    }
+    if (imageBitmap) {
+      this.loadImageFromImageBitmap({
+        imageBitmap: imageBitmap,
+        maxSize: canvasSize,
+        refPosition: canvasPosition,
+      });
+      return;
+    }
+    console.log("image node creation is fucked");
+  }
+  private loadImageFromFile({
+    imageFile,
+    maxSize,
+    refPosition,
+  }: {
+    imageFile: File;
+    maxSize: Size;
+    refPosition: Position;
+  }) {
+    const imageComponent = new Image();
+    imageComponent.crossOrigin = "anonymous";
+    // this.setProgress({ progress: 100, status: UploadStatus.SUCCESS });
+
+    imageComponent.onload = () => {
+      //this.setProgress({ progress: 0, status: UploadStatus.FILE_STAGED });
+      this.imageSize = {
+        width: imageComponent.width,
+        height: imageComponent.height,
+      };
+      const adjustedSize = NodeUtilities.adjustNodeSizeToCanvas({
+        componentSize: this.imageSize,
+        maxSize: maxSize,
+      });
+      const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
+        canvasOffset: refPosition,
+        componentSize: adjustedSize,
+        maxSize: maxSize,
+      });
+      this.kNode.image(imageComponent);
+      this.kNode.setSize(adjustedSize);
+      this.kNode.setPosition(centerPosition);
+      this.kNode.moveToTop();
+      this.kNode.fill(transparent);
+      this.listenToBaseKNode();
+      this.mediaLayerRef.draw();
+      //this.uploadImage(imageFile);
+      this.loaded();
+    };
+    imageComponent.onerror = () => {
+      //this.setProgress({ progress: 0, status: UploadStatus.ERROR_ON_FILE });
+    };
+    imageComponent.src = URL.createObjectURL(imageFile);
+  }
+  private async loadImageFromUrl(mediaFileUrl: string) {
+    //this.setProgress({ progress: 75, status: UploadStatus.LOADING });
+
+    const newImage = new Image();
+    newImage.crossOrigin = "anonymous";
+    newImage.onerror = () => {
+      //this.setProgress({ progress: 90, status: UploadStatus.ERROR_ON_LOAD });
+    };
+    newImage.onload = () => {
+      // console.log("network image", newImage);
+      this.kNode.image(newImage);
+      this.kNode.draw();
+      //this.setProgress({ progress: 100, status: UploadStatus.SUCCESS });
+    };
+    newImage.src = mediaFileUrl;
+    this.listenToBaseKNode();
+  }
+
+  private loadImageFromImageBitmap({
+    imageBitmap,
+    maxSize,
+    refPosition,
+  }: {
+    imageBitmap: ImageBitmap;
+    maxSize: Size;
+    refPosition: Position;
+  }) {
+    this.imageSize = {
+      width: imageBitmap.width,
+      height: imageBitmap.height,
+    };
+    const adjustedSize = NodeUtilities.adjustNodeSizeToCanvas({
+      componentSize: this.imageSize,
+      maxSize: maxSize, // TODO
+    });
+    const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
+      canvasOffset: refPosition, // TODO
+      componentSize: adjustedSize, // TODO
+      maxSize: maxSize, // TODO
+    });
+    this.kNode.image(imageBitmap);
+    this.kNode.setSize(adjustedSize);
+    this.kNode.setPosition(centerPosition);
+    this.kNode.moveToTop();
+    this.kNode.fill(transparent);
+    this.listenToBaseKNode();
+    this.mediaLayerRef.draw();
+    //this.uploadImage(imageFile);
+    this.loaded();
+    this.listenToBaseKNode();
+  }
+
+  private async uploadImage(imageFile: File) {
+    //this.setProgress({ progress: 10, status: UploadStatus.UPLOADING });
+
+    const mediaUploadApi = new MediaUploadApi();
+    const uploadResponse = await mediaUploadApi.UploadImage({
+      blob: imageFile,
+      uuid: this.uuidGenerate(),
+      fileName: imageFile.name,
+    });
+    // console.log(uploadResponse);
+    if (!uploadResponse.success || !uploadResponse.data) {
+      this.setStatus(UploadStatus.ERROR_ON_UPLOAD, uploadResponse.errorMessage);
+      return;
+    }
+    this.mediaFileToken = uploadResponse.data;
+    this.retreiveImage(this.mediaFileToken);
+  }
+
+  private async retreiveImage(mediaFileToken: string) {
+    //this.setProgress({ progress: 50, status: UploadStatus.RETREIVING });
+    const mediaFileApi = new MediaFilesApi();
+    const mediaFileResponse = await mediaFileApi.GetMediaFileByToken({
+      mediaFileToken: mediaFileToken,
+    });
+    // console.log(mediaFileResponse);
+    if (!mediaFileResponse.success || !mediaFileResponse.data) {
+      this.setStatus(
+        UploadStatus.ERROR_ON_RETREIVE,
+        mediaFileResponse.errorMessage,
+      );
+      return;
+    }
+    this.mediaFileUrl = mediaFileResponse.data.media_links.cdn_url;
+    this.loadImageFromUrl(this.mediaFileUrl);
+  }
+
+  public async retry() {
+    if (this.mediaFileUrl) {
+      this.loadImageFromUrl(this.mediaFileUrl);
+      return;
+    }
+    if (this.mediaFileToken) {
+      this.retreiveImage(this.mediaFileToken);
+      return;
+    }
+    if (this.localFile) {
+      this.uploadImage(this.localFile);
+      return;
+    }
+    console.warn("Image Node has no data to recontruct itself!");
+  }
+  public getNodeData(canvasPostion: Position) {
+    if (!this.mediaFileUrl) {
+      console.error("Image Node can not be saved");
+      return null;
+    }
+    const data: NodeData = {
+      type: NodeType.IMAGE,
+      transform: {
+        position: {
+          x: this.kNode.position().x - canvasPostion.x,
+          y: this.kNode.position().y - canvasPostion.y,
+        },
+        size: this.kNode.size(),
+        rotation: this.kNode.rotation(),
+        scale: {
+          x: this.kNode.scaleX(),
+          y: this.kNode.scaleY(),
+        },
+        zIndex: this.kNode.getZIndex(),
+      },
+      imageNodeData: {
+        mediaFileUrl: this.mediaFileUrl,
+        mediaFileToken: this.mediaFileToken,
+      },
+    };
+    return data;
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/NetworkedNode.ts

@@ -0,0 +1,134 @@
+import Konva from "konva";
+import { v4 as uuidv4 } from "uuid";
+import { SelectionManager } from "../NodesManagers";
+import { BaseNode, SupportedNode } from "./BaseNode";
+import { Size } from "../types";
+import { LoadingVideosProvider } from "../EngineUtitlities/LoadingVideosProvider";
+import { NodeProgressEventDetail } from "../types/events";
+
+export enum UploadStatus {
+  INIT = "init",
+  FILE_STAGED = "file_staged",
+  ERROR_ON_FILE = "error_on_file",
+  UPLOADING = "uploading",
+  ERROR_ON_UPLOAD = "error_on_upload",
+  RETREIVING = "retreiving",
+  ERROR_ON_RETREIVE = "error_on_retreive",
+  LOADING = "loading",
+  ERROR_ON_LOAD = "error_on_load",
+  SUCCESS = "success",
+}
+
+export abstract class NetworkedNode extends BaseNode {
+  public kNode: SupportedNode;
+
+  // members to deal with loading progress
+  public didFinishLoading: boolean = false;
+  protected _progress: number = 0;
+  protected _progressMessage?: string;
+  protected progressStatus: string = UploadStatus.INIT;
+  public progressEvent: EventTarget;
+
+  // members to deal with the file carried
+  protected localFile?: File;
+  protected mediaFileToken?: string;
+  protected mediaFileUrl?: string;
+  public mediaFileSize?: Size;
+
+  // loading screen
+  protected loadingVideosProviderRef?: LoadingVideosProvider;
+
+  // error and retry handling
+  public errorMessage?: string;
+  abstract retry(): void;
+
+  constructor({
+    kNode,
+    selectionManagerRef,
+    mediaLayerRef,
+    localFile,
+    loadingVideosProviderRef,
+  }: {
+    kNode: SupportedNode;
+    selectionManagerRef: SelectionManager;
+    mediaLayerRef: Konva.Layer;
+    loadingVideosProviderRef?: LoadingVideosProvider;
+    localFile?: File;
+  }) {
+    super({
+      kNode,
+      selectionManagerRef,
+      mediaLayerRef,
+    });
+    this.kNode = kNode;
+    this.loadingVideosProviderRef = loadingVideosProviderRef;
+    this.didFinishLoading = false;
+    this.progressEvent = new EventTarget();
+    this.localFile = localFile;
+  }
+  public progress() {
+    return this._progress;
+  }
+  public progressMessage() {
+    return this._progressMessage;
+  }
+  public status() {
+    return this.progressStatus;
+  }
+  public isError() {
+    const errorStatues: string[] = [
+      UploadStatus.ERROR_ON_FILE,
+      UploadStatus.ERROR_ON_UPLOAD,
+      UploadStatus.ERROR_ON_RETREIVE,
+      UploadStatus.ERROR_ON_LOAD,
+    ];
+    return errorStatues.includes(this.progressStatus);
+  }
+
+  protected uuidGenerate() {
+    return uuidv4();
+  }
+  protected setStatus(newStatus: string, message?: string) {
+    this.progressStatus = newStatus;
+    this.errorMessage = message;
+    this.selectionManagerRef.updateContextComponents();
+  }
+  protected setProgress<S>({
+    progress,
+    name,
+    status,
+    message,
+  }: {
+    progress: number;
+    name?: string;
+    status?: S;
+    message?: string;
+  }) {
+    this._progress = progress;
+    if (message) {
+      this._progressMessage = message;
+    }
+    if (status && typeof status === "string") {
+      this.progressStatus = status;
+    }
+
+    if (this._progress === 100) {
+      this.didFinishLoading = true;
+    }
+    // TODO: change to use
+    this.progressEvent.dispatchEvent(
+      new CustomEvent<NodeProgressEventDetail<S>>(
+        name ? name : "GenericNodeProgress",
+        {
+          detail: {
+            node: this,
+            progress: this._progress,
+            message: message,
+            status: status,
+          },
+        },
+      ),
+    );
+    this.selectionManagerRef.updateContextComponents();
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/NodeUtilities.ts

@@ -0,0 +1,158 @@
+import Konva from "konva";
+import { Position, Size, TransformationData } from "../types";
+import { minNodeSize, transparent } from "./constants";
+
+export const NodeUtilities = {
+  adjustNodeSizeToCanvas,
+  downloadOffscreenCanvas,
+  getInitialTransform,
+  isAssetUrlAvailable,
+  positionNodeOnCanvasCenter,
+  printKNodeAttrs,
+  urlToBlob,
+};
+function downloadOffscreenCanvas(canvas: OffscreenCanvas) {
+  canvas.convertToBlob().then((blob) => {
+    if (blob) {
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "offscreen-canvas-image.png"; // Specify the file name
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url); // Clean up
+    }
+  });
+}
+function getInitialTransform({
+  existingTransform,
+  mediaFileSize,
+  canvasPosition,
+  canvasSize,
+}: {
+  existingTransform?: TransformationData;
+  mediaFileSize?: Size;
+  canvasPosition: Position;
+  canvasSize: Size;
+}) {
+  return existingTransform
+    ? {
+        ...existingTransform,
+        position: {
+          x: existingTransform.position.x + canvasPosition.x,
+          y: existingTransform.position.y + canvasPosition.y,
+        },
+        fill: transparent,
+      }
+    : {
+        position: positionNodeOnCanvasCenter({
+          canvasOffset: canvasPosition,
+          componentSize: mediaFileSize ?? minNodeSize,
+          maxSize: canvasSize,
+        }),
+        size: mediaFileSize ?? minNodeSize,
+        fill: "gray",
+      };
+}
+
+function adjustNodeSizeToCanvas({
+  componentSize,
+  maxSize,
+}: {
+  componentSize: Size;
+  maxSize: Size;
+}) {
+  const adjustedSize = {
+    width: componentSize.width,
+    height: componentSize.height,
+  };
+  if (adjustedSize.width > maxSize.width) {
+    const scaleDown = maxSize.width / adjustedSize.width;
+    adjustedSize.width = adjustedSize.width * scaleDown;
+    adjustedSize.height = adjustedSize.height * scaleDown;
+  }
+  if (adjustedSize.height > maxSize.height) {
+    const scaleDownAgain = maxSize.height / adjustedSize.height;
+    adjustedSize.width = adjustedSize.width * scaleDownAgain;
+    adjustedSize.height = adjustedSize.height * scaleDownAgain;
+  }
+  return adjustedSize;
+}
+
+function positionNodeOnCanvasCenter({
+  canvasOffset,
+  componentSize,
+  maxSize,
+}: {
+  canvasOffset: Position;
+  componentSize: Size;
+  maxSize: Size;
+}) {
+  return {
+    x: canvasOffset.x + maxSize.width / 2 - componentSize.width / 2,
+    y: canvasOffset.y + maxSize.height / 2 - componentSize.height / 2,
+  };
+}
+
+function printKNodeAttrs(kNode: Konva.Node) {
+  console.log({
+    position: kNode.position(),
+    size: kNode.size(),
+    scale: kNode.scale(),
+    rotation: kNode.rotation(),
+  });
+}
+async function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// Function to check if the URL returns a 200 status
+async function checkUrl(url: string): Promise<boolean> {
+  try {
+    const response = await fetch(url);
+    return response.status === 200;
+  } catch (error) {
+    console.error("Error fetching URL:", error);
+    return false;
+  }
+}
+// wait using a while loop to display the result.
+async function isAssetUrlAvailable({
+  url,
+  sleepDurationMs = 500,
+  totalRetries,
+}: {
+  url: string;
+  sleepDurationMs?: number;
+  totalRetries?: number;
+}): Promise<boolean> {
+  let retryCount = 0;
+  let isAvailable = false;
+  const totalRetriesReached = () => {
+    if (!totalRetries) {
+      return false;
+    }
+    return retryCount >= totalRetries;
+  };
+  while (!isAvailable && !totalRetriesReached()) {
+    isAvailable = await checkUrl(url);
+    if (!isAvailable) {
+      console.log("Asset at Url not available yet, retrying...");
+      retryCount = retryCount + 1;
+      await sleep(sleepDurationMs);
+    } else if (import.meta.env.DEV) {
+      console.log("Preview Image is available:", url);
+    }
+  }
+  return isAvailable;
+}
+
+async function urlToBlob(url: string): Promise<Blob> {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch resource: ${response.statusText}`);
+  }
+  const blob = await response.blob();
+  return blob;
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/PaintNode.ts

@@ -0,0 +1,91 @@
+import Konva from "konva";
+import { SelectionManager } from "../NodesManagers";
+import { Position, NodeData } from "../types";
+import { NodeType } from "./constants";
+
+import { NetworkedNode } from "./NetworkedNode";
+
+interface PaintNodeConstructor {
+  canvasElement: HTMLCanvasElement;
+  lineBounds: {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+  };
+  mediaLayerRef: Konva.Layer;
+  selectionManagerRef: SelectionManager;
+
+  loaded: () => Promise<void>;
+}
+
+export class PaintNode extends NetworkedNode {
+  retry(): void {
+    throw new Error("Method not implemented.");
+  }
+
+  constructor({
+    canvasElement,
+    lineBounds,
+    mediaLayerRef,
+    selectionManagerRef,
+    loaded,
+  }: PaintNodeConstructor) {
+    const cl = canvasElement;
+
+    // Convert circle to image
+    const dataURL = cl.toDataURL();
+    const imageObj = new Image();
+    imageObj.src = dataURL;
+
+    const paintShape = new Konva.Image({
+      x: lineBounds.x,
+      y: lineBounds.y,
+      width: lineBounds.width,
+      height: lineBounds.height,
+      image: imageObj,
+      listening: false, // Disable event listening to allow captureCanvas to receive events
+      draggable: true,
+      // stroke: '#000000',
+      // strokeWidth: 2,
+      // dash: [5, 5], // Creates dotted outline THIS IS FOR DEBUG
+      globalCompositeOperation: "source-over",
+      fill: "transparent",
+    });
+
+    imageObj.onload = () => {
+      this.mediaLayerRef.draw();
+      loaded();
+    };
+
+    super({
+      selectionManagerRef: selectionManagerRef,
+      mediaLayerRef: mediaLayerRef,
+      kNode: paintShape,
+    });
+    this.kNode.moveToTop();
+    this.mediaLayerRef.add(this.kNode);
+    this.listenToBaseKNode();
+    this.mediaLayerRef.draw();
+  }
+
+  public getNodeData(canvasPosition: Position) {
+    const data: NodeData = {
+      type: NodeType.SHAPE,
+      transform: {
+        position: {
+          x: this.kNode.position().x - canvasPosition.x,
+          y: this.kNode.position().y - canvasPosition.y,
+        },
+        size: this.kNode.size(),
+        rotation: this.kNode.rotation(),
+        scale: {
+          x: this.kNode.scaleX(),
+          y: this.kNode.scaleY(),
+        },
+        zIndex: this.kNode.getZIndex(),
+      },
+    };
+    return data;
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/PreviewCopy.ts

@@ -0,0 +1,58 @@
+import Konva from "konva";
+import { SelectionManager } from "../NodesManagers";
+import { Position, Size, NodeData, TransformationData } from "../types";
+import { NodeType } from "./constants";
+import { NodeUtilities } from "./NodeUtilities";
+import { NetworkedNode } from "./NetworkedNode";
+
+interface PreviewCopyConstructor {
+  image: Konva.Image;
+  mediaLayerRef: Konva.Layer;
+  selectionManagerRef: SelectionManager;
+  loaded: () => Promise<void>;
+}
+
+export class PreviewCopyNode extends NetworkedNode {
+  retry(): void {
+    throw new Error("Method not implemented.");
+  }
+
+  constructor({
+    image,
+    mediaLayerRef,
+    selectionManagerRef,
+    loaded,
+  }: PreviewCopyConstructor) {
+    // Create the actual shape inside the group
+
+    super({
+      selectionManagerRef: selectionManagerRef,
+      mediaLayerRef: mediaLayerRef,
+      kNode: image,
+    });
+    this.kNode.moveToTop();
+    this.mediaLayerRef.add(this.kNode);
+    this.listenToBaseKNode();
+    this.mediaLayerRef.draw();
+  }
+
+  public getNodeData(canvasPosition: Position) {
+    const data: NodeData = {
+      type: NodeType.SHAPE,
+      transform: {
+        position: {
+          x: this.kNode.position().x - canvasPosition.x,
+          y: this.kNode.position().y - canvasPosition.y,
+        },
+        size: this.kNode.size(),
+        rotation: this.kNode.rotation(),
+        scale: {
+          x: this.kNode.scaleX(),
+          y: this.kNode.scaleY(),
+        },
+        zIndex: this.kNode.getZIndex(),
+      },
+    };
+    return data;
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/PureTextNode.ts

@@ -0,0 +1,186 @@
+import Konva from "konva";
+import { SelectionManager } from "../NodesManagers";
+import { BaseNode } from "./BaseNode";
+import {
+  NodeData,
+  Position,
+  Size,
+  TextNodeChildrenTransformData,
+  TextNodeData,
+  TransformationData,
+} from "../types";
+import { NodeUtilities } from "./NodeUtilities";
+import { NodeType } from "./constants";
+
+export class PureTextNode extends BaseNode {
+  public kNode: Konva.Group;
+  public rectNode: Konva.Rect;
+  public textNode: Konva.Text;
+  private originalTextSize: Size;
+  private textNodeData: TextNodeData;
+
+  public didFinishLoading: boolean = true;
+
+  constructor({
+    textNodeData,
+    selectionManagerRef,
+    mediaLayerRef,
+    canvasPosition,
+    canvasSize,
+    transform: existingTransform,
+    textChildrenTransforms,
+  }: {
+    textNodeData: TextNodeData;
+    selectionManagerRef: SelectionManager;
+    mediaLayerRef: Konva.Layer;
+    canvasSize: Size;
+    canvasPosition: Position;
+    transform?: TransformationData;
+    textChildrenTransforms?: TextNodeChildrenTransformData;
+  }) {
+    const textNode = new Konva.Text({
+      ...textNodeData,
+      x: 10,
+      y: 10,
+      width: 500,
+    });
+    const kNode = new Konva.Group({
+      position: NodeUtilities.positionNodeOnCanvasCenter({
+        canvasOffset: canvasPosition,
+        componentSize: {
+          width: textNode.width() + 20,
+          height: textNode.height() + 20,
+        },
+        maxSize: canvasSize,
+      }),
+      width: textNode.width() + 20,
+      height: textNode.height() + 20,
+      draggable: true,
+    });
+    const rectNode = new Konva.Rect({
+      x: 0,
+      y: 0,
+      width: textNode.width() + 20,
+      height: textNode.height() + 20,
+      strokeScaleEnabled: false,
+      name: "wrapper",
+    });
+
+    super({
+      selectionManagerRef: selectionManagerRef,
+      mediaLayerRef: mediaLayerRef,
+      kNode: kNode,
+    });
+    this.textNodeData = textNodeData;
+    this.kNode = kNode;
+    this.textNode = textNode;
+    this.rectNode = rectNode;
+    this.kNode.add(this.rectNode);
+    this.kNode.add(this.textNode);
+    if (existingTransform && textChildrenTransforms) {
+      this.applyTransform({
+        existingTransform,
+        textChildrenTransforms,
+        canvasPosition,
+      });
+    }
+    this.mediaLayerRef.add(this.kNode);
+    this.originalTextSize = this.textNode.size();
+    this.listenToBaseKNode();
+  }
+  public listenToBaseKNodeTransformations() {
+    this.kNode.on("transformstart", () => {
+      // console.log("transformstart", event.target._id);
+      this.selectionManagerRef.transformStart();
+    });
+
+    this.kNode.on("transform", () => {
+      const newBoxSize = {
+        width: this.kNode.width() * this.kNode.scaleX(),
+        height: this.kNode.height() * this.kNode.scaleY(),
+        scaleX: 1,
+        scaleY: 1,
+      };
+      this.rectNode.setAttrs(newBoxSize);
+      this.kNode.setAttrs(newBoxSize);
+      const scaleX = (newBoxSize.width - 20) / this.originalTextSize.width;
+      const scaleY = (newBoxSize.height - 20) / this.originalTextSize.height;
+      this.textNode.setAttrs({
+        // make sure these stay the same
+        x: 10,
+        y: 10,
+        size: this.originalTextSize,
+        //while these changes in size
+        scaleX: scaleX,
+        scaleY: scaleY,
+      });
+    });
+    this.kNode.on("transformend", () => {
+      // console.log("transformend", event.target._id);
+      NodeUtilities.printKNodeAttrs(this.kNode);
+      NodeUtilities.printKNodeAttrs(this.textNode);
+      this.selectionManagerRef.transformEnd(this);
+    });
+  }
+  public getNodeData(canvasPostion: Position) {
+    const data: NodeData = {
+      type: NodeType.TEXT,
+      transform: {
+        position: {
+          x: this.kNode.position().x - canvasPostion.x,
+          y: this.kNode.position().y - canvasPostion.y,
+        },
+        size: this.kNode.size(),
+        rotation: this.kNode.rotation(),
+        scale: {
+          x: this.kNode.scaleX(),
+          y: this.kNode.scaleY(),
+        },
+        zIndex: this.kNode.getZIndex(),
+      },
+      textNodeData: this.textNodeData,
+      textChildrenTransforms: {
+        wrapperRectTransform: {
+          position: this.rectNode.position(),
+          size: this.rectNode.size(),
+          rotation: this.rectNode.rotation(),
+          scale: {
+            x: this.rectNode.scaleX(),
+            y: this.rectNode.scaleY(),
+          },
+          zIndex: this.rectNode.getZIndex(),
+        },
+        textNodeTransform: {
+          position: this.textNode.position(),
+          size: this.textNode.size(),
+          rotation: this.textNode.rotation(),
+          scale: {
+            x: this.textNode.scaleX(),
+            y: this.textNode.scaleY(),
+          },
+          zIndex: this.textNode.getZIndex(),
+        },
+      },
+    };
+    return data;
+  }
+  private applyTransform({
+    canvasPosition,
+    existingTransform,
+    textChildrenTransforms,
+  }: {
+    canvasPosition: Position;
+    existingTransform: TransformationData;
+    textChildrenTransforms: TextNodeChildrenTransformData;
+  }) {
+    this.kNode.setAttrs({
+      ...existingTransform,
+      position: {
+        x: existingTransform.position.x + canvasPosition.x,
+        y: existingTransform.position.y + canvasPosition.y,
+      },
+    });
+    this.rectNode.setAttrs(textChildrenTransforms.wrapperRectTransform);
+    this.textNode.setAttrs(textChildrenTransforms.textNodeTransform);
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/ShapeNode.ts

@@ -0,0 +1,152 @@
+import Konva from "konva";
+import { SelectionManager } from "../NodesManagers";
+import { Position, Size, NodeData, TransformationData } from "../types";
+import { NodeType } from "./constants";
+import { NodeUtilities } from "./NodeUtilities";
+import { NetworkedNode } from "./NetworkedNode";
+
+export enum ShapeType {
+  CIRCLE = "circle",
+  SQUARE = "square",
+  TRIANGLE = "triangle",
+}
+
+interface ShapeNodeConstructor {
+  canvasPosition: Position;
+  canvasSize: Size;
+  shapeType: ShapeType;
+  size: Size;
+  color?: string; // Hex color string
+  transform?: TransformationData;
+  mediaLayerRef: Konva.Layer;
+  selectionManagerRef: SelectionManager;
+  loaded: () => Promise<void>;
+}
+
+export class ShapeNode extends NetworkedNode {
+  retry(): void {
+    throw new Error("Method not implemented.");
+  }
+
+  public shapeType: ShapeType;
+  public size: Size;
+  public color: string;
+
+  constructor({
+    canvasPosition,
+    canvasSize,
+    shapeType,
+    size,
+    color = "#2D81FF", // Default red if no color provided
+    transform: existingTransform,
+    mediaLayerRef,
+    selectionManagerRef,
+    loaded,
+  }: ShapeNodeConstructor) {
+    // Create the actual shape inside the group
+    const transform = NodeUtilities.getInitialTransform({
+      existingTransform,
+      mediaFileSize: size,
+      canvasPosition,
+      canvasSize,
+    });
+
+    let shape = null;
+
+    switch (shapeType) {
+      case ShapeType.CIRCLE:
+        shape = new Konva.Ellipse({
+          radiusX: size.width / 2,
+          radiusY: size.height / 2,
+          fill: color,
+          strokeScaleEnabled: false,
+          draggable: true,
+        });
+        break;
+
+      case ShapeType.SQUARE:
+        shape = new Konva.Rect({
+          width: size.width,
+          height: size.height,
+          ...transform,
+          fill: color,
+          strokeScaleEnabled: false,
+          draggable: true,
+        });
+        break;
+
+      case ShapeType.TRIANGLE:
+        shape = new Konva.Shape({
+          width: size.width,
+          height: size.height,
+          ...transform,
+          fill: color,
+          strokeScaleEnabled: false,
+          draggable: true,
+          sceneFunc: (context, shape) => {
+            context.beginPath();
+            context.moveTo(shape.width() / 2, 0);
+            context.lineTo(shape.width(), shape.height());
+            context.lineTo(0, shape.height());
+            context.closePath();
+            context.fillStrokeShape(shape);
+          }
+        });
+        break;
+
+      default:
+        throw new Error("Invalid shape type");
+    }
+
+    super({
+      selectionManagerRef: selectionManagerRef,
+      mediaLayerRef: mediaLayerRef,
+      kNode: shape,
+    });
+
+    this.shapeType = shapeType;
+    this.size = size;
+    this.color = color;
+
+    // Center the shape
+    const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
+      canvasOffset: canvasPosition,
+      componentSize: this.size,
+      maxSize: canvasSize,
+    });
+
+    // If the shape is an ellipse, the center is the origin so we need to offset it
+    if (shapeType === ShapeType.CIRCLE) {
+      centerPosition.x += size.width / 2;
+      centerPosition.y += size.height / 2;
+    }
+
+    // Add shape to group
+    // bring to the front
+    this.kNode.moveToTop();
+    this.kNode.setPosition(centerPosition);
+    this.mediaLayerRef.add(this.kNode);
+    this.listenToBaseKNode();
+    this.mediaLayerRef.draw();
+  }
+
+  public getNodeData(canvasPosition: Position) {
+    const data: NodeData = {
+      type: NodeType.SHAPE,
+      transform: {
+        position: {
+          x: this.kNode.position().x - canvasPosition.x,
+          y: this.kNode.position().y - canvasPosition.y,
+        },
+        size: this.kNode.size(),
+        rotation: this.kNode.rotation(),
+        scale: {
+          x: this.kNode.scaleX(),
+          y: this.kNode.scaleY(),
+        },
+        zIndex: this.kNode.getZIndex(),
+      },
+    };
+    return data;
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/TextNode.ts

@@ -0,0 +1,168 @@
+import Konva from "konva";
+import { SelectionManager } from "../NodesManagers";
+import { BaseNode } from "./BaseNode";
+import {
+  NodeData,
+  Position,
+  Size,
+  TextAlign,
+  TextNodeData,
+  TransformationData,
+} from "../types";
+import { NodeUtilities } from "./NodeUtilities";
+import { NodeType, transparent } from "./constants";
+
+export class TextNode extends BaseNode {
+  public kNode: Konva.Image;
+  private textNodeData: TextNodeData;
+  private originalTextSize?: Size;
+  public didFinishLoading: boolean = true;
+
+  constructor({
+    textNodeData,
+    selectionManagerRef,
+    mediaLayerRef,
+    canvasPosition,
+    canvasSize,
+    transform: existingTransform,
+  }: {
+    textNodeData: TextNodeData;
+    selectionManagerRef: SelectionManager;
+    mediaLayerRef: Konva.Layer;
+    canvasSize: Size;
+    canvasPosition: Position;
+    transform?: TransformationData;
+  }) {
+    const transform = NodeUtilities.getInitialTransform({
+      existingTransform,
+      canvasPosition,
+      canvasSize,
+    });
+    // Create a new ImageNode to house the canvas text
+    const kNode = new Konva.Image({
+      image: undefined, // will use the canvas as the image source
+      ...transform,
+      draggable: true,
+      strokeScaleEnabled: false,
+    });
+
+    super({
+      selectionManagerRef: selectionManagerRef,
+      mediaLayerRef: mediaLayerRef,
+      kNode: kNode,
+    });
+    this.textNodeData = textNodeData;
+    this.kNode = kNode;
+    this.mediaLayerRef.add(this.kNode);
+    this.listenToBaseKNode();
+
+    this.loadTextImageUsingCanvas({
+      maxSize: canvasSize,
+      refPosition: canvasPosition,
+      existingTransform: existingTransform,
+    });
+  }
+
+  private loadTextImageUsingCanvas({
+    maxSize,
+    refPosition,
+    existingTransform,
+  }: {
+    maxSize: Size;
+    refPosition: Position;
+    existingTransform?: TransformationData;
+  }) {
+    // Create a temporary canvas to draw the text
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (context === null) {
+      return;
+    }
+
+    // calvulate and set canvas
+    const lines: string[] = this.textNodeData.text.split("\n");
+    const { fontSize, fontFamily, fontStyle, fontWeight, maxWidth, textAlign } =
+      this.textNodeData;
+    this.originalTextSize = {
+      width: maxWidth,
+      height: fontSize * lines.length * 1.5 + fontSize * 0.5,
+    };
+    canvas.width = this.originalTextSize.width;
+    canvas.height = this.originalTextSize.height;
+
+    // Set the font styles to match the text node
+    context.font = `${fontWeight} ${fontStyle} ${fontSize}px ${fontFamily}`;
+
+    context.fillStyle = this.textNodeData.color;
+    context.textAlign = textAlign;
+    context.textBaseline = "top";
+
+    // Draw the text on the canvas
+    lines.forEach((line, idx) => {
+      const yOffset = fontSize * (1.5 * idx + 0.5);
+      const xOffset =
+        textAlign === TextAlign.LEFT
+          ? 0
+          : textAlign === TextAlign.CENTER
+            ? maxWidth / 2
+            : maxWidth; // textAlign === TextAlign.Right
+
+      context.fillText(line, xOffset, yOffset);
+    });
+
+    // Convert canvas to data URL
+    const dataURL = canvas.toDataURL("image/png");
+
+    // Create a new Image object
+    const imageComponent = new Image();
+    imageComponent.crossOrigin = "anonymous";
+    imageComponent.onload = () => {
+      if (existingTransform) {
+        this.kNode.setAttrs({
+          image: imageComponent,
+          fill: transparent,
+        });
+        return;
+      }
+      const imageSize = {
+        width: canvas.width,
+        height: canvas.height,
+      };
+
+      const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({
+        canvasOffset: refPosition,
+        componentSize: imageSize,
+        maxSize: maxSize,
+      });
+
+      this.kNode.setAttrs({
+        image: imageComponent,
+        size: imageSize,
+        position: centerPosition,
+        fill: transparent,
+      });
+    };
+    imageComponent.src = dataURL;
+  }
+
+  public getNodeData(canvasPostion: Position) {
+    const data: NodeData = {
+      type: NodeType.TEXT,
+      transform: {
+        position: {
+          x: this.kNode.position().x - canvasPostion.x,
+          y: this.kNode.position().y - canvasPostion.y,
+        },
+        size: this.kNode.size(),
+        rotation: this.kNode.rotation(),
+        scale: {
+          x: this.kNode.scaleX(),
+          y: this.kNode.scaleY(),
+        },
+        zIndex: this.kNode.getZIndex(),
+      },
+      textNodeData: this.textNodeData,
+    };
+    return data;
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/constants.ts

@@ -0,0 +1,16 @@
+import { Colors } from "../constants";
+
+export enum NodeType {
+  IMAGE = "image",
+  TEXT = "text",
+  VIDEO = "video",
+  SHAPE = "shape",
+}
+export const transparent = Colors.transparent;
+export const primaryOrange = Colors.primaryOrange;
+
+export const highlightStrokeWidth = 2;
+export const minNodeSize = {
+  width: 200,
+  height: 200,
+};

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/Nodes/index.ts

@@ -0,0 +1,7 @@
+export { NodeType } from "./constants";
+export { BaseNode } from "./BaseNode";
+export { ImageNode } from "./ImageNode";
+export { PreviewCopyNode } from "./PreviewCopy";
+export { TextNode } from "./TextNode";
+export { ShapeNode , ShapeType} from "./ShapeNode";
+export { PaintNode } from "./PaintNode";

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/NodeIsolator.ts

@@ -0,0 +1,122 @@
+import Konva from "konva";
+import { MediaNode, TransformationData } from "../types";
+import { uiAccess } from "../../signals/uiAccess";
+
+export class NodeIsolator {
+  private mediaLayerRef: Konva.Layer;
+  private backgroundRect: Konva.Rect;
+  private referenceRect: Konva.Rect;
+  private nodeIsolationLayerRef: Konva.Layer;
+  private currentNode: MediaNode | undefined;
+  private originalKNodeTransformation: TransformationData | undefined;
+  private adjustSizeFnRef: (() => void) | undefined;
+
+  constructor({
+    mediaLayerRef,
+    nodeIsolationLayerRef,
+  }: {
+    mediaLayerRef: Konva.Layer;
+    nodeIsolationLayerRef: Konva.Layer;
+  }) {
+    this.mediaLayerRef = mediaLayerRef;
+    this.nodeIsolationLayerRef = nodeIsolationLayerRef;
+    this.backgroundRect = new Konva.Rect({
+      fill: "rgba(0,0,0,0.5)",
+    });
+    this.referenceRect = new Konva.Rect({
+      fill: "gray",
+      stroke: "salmon",
+      strokeWidth: 10,
+      dash: [20, 10],
+      strokeScaleEnabled: false,
+    });
+  }
+
+  private adjustSizes() {
+    this.backgroundRect.setAttrs({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+
+    if (this.currentNode && this.originalKNodeTransformation) {
+      this.referenceRect.setAttrs(this.originalKNodeTransformation);
+
+      const originalSize = {
+        width:
+          this.originalKNodeTransformation.size.width *
+          this.originalKNodeTransformation.scale.x,
+        height:
+          this.originalKNodeTransformation.size.height *
+          this.originalKNodeTransformation.scale.y,
+      };
+      const maxWidth = window.innerWidth * 0.8;
+      const isolationResize = {
+        width: maxWidth,
+        height: (maxWidth / originalSize.width) * originalSize.height,
+      };
+      const maxHeight = window.innerHeight - 350;
+      if (isolationResize.height > maxHeight) {
+        isolationResize.height = maxHeight;
+        isolationResize.width =
+          (maxHeight / originalSize.height) * originalSize.width;
+      }
+      const isolationReposition = {
+        x: (window.innerWidth - isolationResize.width) / 2,
+        y: (maxHeight - isolationResize.height) / 2 + 100,
+      };
+      this.currentNode.kNode.setAttrs({
+        scale: { x: 1, y: 1 },
+        rotation: 0,
+        size: isolationResize,
+        position: isolationReposition,
+      });
+    }
+  }
+  public enterIsolation(node: MediaNode) {
+    // console.log("NodeIsolator > enterIsolation");
+    uiAccess.toolbarMain.disable();
+    this.currentNode = node;
+    this.adjustSizeFnRef = () => this.adjustSizes();
+    this.preserveKNodeTransformation(node.kNode);
+
+    this.currentNode.kNode.remove();
+    this.nodeIsolationLayerRef.add(this.backgroundRect);
+    this.nodeIsolationLayerRef.add(this.currentNode.kNode);
+    this.mediaLayerRef.add(this.referenceRect);
+    this.adjustSizeFnRef();
+
+    window.addEventListener("resize", this.adjustSizeFnRef);
+  }
+
+  public exitIsolation() {
+    // console.log("NodeIsolator > exitIsolation");
+    if (this.adjustSizeFnRef) {
+      window.removeEventListener("resize", this.adjustSizeFnRef);
+      this.adjustSizeFnRef = undefined;
+    }
+    if (!this.currentNode) {
+      console.error("NodeIsolator lost crrent node before isolation!!");
+      return;
+    }
+    this.currentNode.kNode.remove();
+    this.backgroundRect.remove();
+    this.referenceRect.remove();
+    this.mediaLayerRef.add(this.currentNode.kNode);
+    this.currentNode.kNode.setAttrs(this.originalKNodeTransformation);
+    this.currentNode = undefined;
+    this.originalKNodeTransformation = undefined;
+    uiAccess.toolbarMain.enable();
+  }
+  private preserveKNodeTransformation(kNode: Konva.Node) {
+    this.originalKNodeTransformation = {
+      position: kNode.position(),
+      size: kNode.size(),
+      rotation: kNode.rotation(),
+      scale: {
+        x: kNode.scaleX(),
+        y: kNode.scaleY(),
+      },
+      zIndex: kNode.zIndex(),
+    };
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/NodeTransformer.ts

@@ -0,0 +1,61 @@
+import Konva from "konva";
+import { MediaNode } from "../types";
+
+export class NodeTransformer {
+  private kTransformer: Konva.Transformer;
+
+  constructor() {
+    this.kTransformer = new Konva.Transformer({
+      padding: 0,
+      anchorStyleFunc: (anchor) => {
+        // anchor is Konva.Rect instance
+        // you manually change its styling
+        anchor.cornerRadius(10);
+        if (anchor.hasName("top-center") || anchor.hasName("bottom-center")) {
+          anchor.height(6);
+          anchor.offsetY(3);
+          anchor.width(30);
+          anchor.offsetX(15);
+        }
+        if (anchor.hasName("middle-left") || anchor.hasName("middle-right")) {
+          anchor.height(30);
+          anchor.offsetY(15);
+          anchor.width(6);
+          anchor.offsetX(3);
+        }
+        // if (anchor.hasName("rotater")) {
+        //   anchor.offsetY(-25);
+        // }
+        // you also can set other properties
+        // e.g. you can set fillPatternImage to set icon to the anchor
+      },
+    });
+  }
+  public getKonvaNode() {
+    return this.kTransformer;
+  }
+  public addNodes({ selectedNodes }: { selectedNodes: Set<MediaNode> }) {
+    const kNodesArray = Array.from(selectedNodes).reduce((acc, node) => {
+      acc.push(node.kNode);
+      return acc;
+    }, [] as Konva.Node[]);
+
+    //if there are more things in the ui layer, turn this on
+    // this.kTransformer.moveToTop();
+
+    this.kTransformer.nodes(kNodesArray);
+  }
+  public clear() {
+    this.kTransformer.nodes([]);
+  }
+  public enable() {
+    this.kTransformer.rotateEnabled(true);
+    this.kTransformer.resizeEnabled(true);
+    this.kTransformer.draggable(true);
+  }
+  public disable() {
+    this.kTransformer.rotateEnabled(false);
+    this.kTransformer.resizeEnabled(false);
+    this.kTransformer.draggable(false);
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/NodesManager.ts

@@ -0,0 +1,63 @@
+import { MediaNode } from "../types";
+
+export class NodesManager {
+  private allNodes: Set<MediaNode>;
+  private allZIndices: Map<MediaNode, number>;
+
+  constructor() {
+    this.allNodes = new Set();
+    this.allZIndices = new Map();
+  }
+  public getAllNodes() {
+    return this.allNodes;
+  }
+
+  public getAllZIndices() {
+    return this.allZIndices;
+  }
+  public getSortedZIndices() {
+    return Array.from(this.allZIndices).sort(
+      (nodeA, nodeB) => nodeA[1] - nodeB[1],
+    );
+  }
+  public updateAllZIndices() {
+    this.allNodes.forEach((node) => {
+      this.allZIndices.set(node, node.kNode.getZIndex());
+    });
+  }
+
+  public saveNode(node: MediaNode): void {
+    if (this.allNodes.has(node)) {
+      return;
+    }
+    this.allNodes.add(node);
+    this.updateAllZIndices();
+    // this.printNodesAndZIndices();
+  }
+
+  public removeNode(node: MediaNode): void {
+    if (this.allNodes.has(node)) {
+      this.allNodes.delete(node);
+      this.allZIndices.delete(node);
+      this.updateAllZIndices();
+    }
+    // this.printNodesAndZIndices();
+  }
+
+  public hasNode(node: MediaNode): boolean {
+    return this.allNodes.has(node);
+  }
+
+  /*************************
+   *  For Debugging use
+   */
+  public printNodesAndZIndices() {
+    console.log(this.allNodes);
+    console.log(this.allZIndices);
+    const trueZIndices = Array.from(this.allNodes).map((node) => ({
+      id: node.kNode._id,
+      z: node.kNode.getZIndex(),
+    }));
+    console.log("True ZIndces", trueZIndices);
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/SelectionManager.ts

@@ -0,0 +1,384 @@
+import Konva from "konva";
+import { NodeTransformer } from "./NodeTransformer";
+import { MediaNode, Position, Transformation } from "../types";
+import { uiAccess, uiEvents } from "../../signals";
+import { NetworkedNode } from "../Nodes/NetworkedNode";
+import { LoadingBarStatus } from "../../components/ui";
+import { ImageNode, ShapeNode, TextNode, PreviewCopyNode } from "../Nodes";
+import {
+  calculateContextualsPosition,
+  getImageNodeButtonStates,
+  getMultiSelectButtonStates, getPreviewCopyNodeButtonStates,
+  getShapeNodeButtonStates,
+  getTextNodeButtonStates,
+  getVideoNodeButtonStates,
+} from "./ToolbarNodeUtilities";
+
+export enum SelectionManagerEvents {
+  NODES_TRANSLATIONS = "nodestranslation",
+  NODES_TRANSFORMATION = "nodestransformation",
+}
+export interface NodesTranslationEventDetails {
+  nodes: Set<MediaNode>;
+  initialPositions: Map<MediaNode, Position>;
+  finalPositions: Map<MediaNode, Position>;
+}
+export interface NodeTransformationEventDetails {
+  nodes: Set<MediaNode>;
+  initialTransformations: Map<MediaNode, Transformation[]>;
+  finalTransformations: Map<MediaNode, Transformation[]>;
+}
+
+export class SelectionManager {
+  private selectedNodes: Set<MediaNode>;
+  private mediaLayerRef: Konva.Layer;
+  private nodeTransformerRef: NodeTransformer;
+  private initialPositions: Map<MediaNode, Position>;
+  private initialTransformations: Map<MediaNode, Transformation[]>;
+  public eventTarget: EventTarget;
+  private _isDragging: boolean = false;
+  private disabled: boolean = false;
+
+  public firstSelectedNode: MediaNode | undefined;
+
+  constructor({
+    mediaLayerRef,
+    nodeTransformerRef,
+  }: {
+    mediaLayerRef: Konva.Layer;
+    nodeTransformerRef: NodeTransformer;
+  }) {
+    this.firstSelectedNode = undefined;
+    this.selectedNodes = new Set();
+
+    this.initialPositions = new Map<MediaNode, Position>();
+    this.initialTransformations = new Map<MediaNode, Transformation[]>();
+    this.eventTarget = new EventTarget();
+    this.mediaLayerRef = mediaLayerRef;
+    this.nodeTransformerRef = nodeTransformerRef;
+  }
+  // This lets us perfom operations on the selected node.
+  public getSelectedNodes(): Set<MediaNode> {
+    return this.selectedNodes;
+  }
+  public selectNodes(nodes: MediaNode[]) {
+    const unlockedNodes = nodes.filter((node) => {
+      return !node.isLocked();
+    });
+    unlockedNodes.forEach((node) => {
+      this.selectNode(node, true);
+    });
+    this.mediaLayerRef.batchDraw();
+  }
+  public disable() {
+    this.clearSelection();
+    this.disabled = true;
+  }
+  public enable() {
+    this.disabled = false;
+  }
+  public isDisabled() {
+    return this.disable;
+  }
+  public selectNode(node: MediaNode, doNotDraw?: boolean, contextMenu: {
+    show?: boolean,
+    at?: { x: number, y: number }
+  } = {
+      show: false,
+    }): boolean {
+    if (
+      this.disabled || // no-op when disabled
+      this.selectedNodes.has(node) || // if the node is already selected
+      (this.selectedNodes.size > 0 && node.isLocked()) ||
+      // if in multiselect but picked a locked item
+      (this.selectedNodes.size > 0 &&
+        this.selectedNodes.values().next().value?.isLocked())
+      // if the first node picked is a locked item
+    ) {
+      return false;
+    }
+
+    node.highlight();
+    if (this.selectedNodes.size === 0) {
+      node.setIsKEventRef(true);
+    }
+    this.selectedNodes.add(node);
+    this.updateNodeTransformer();
+    this.updateContextComponents();
+
+    console.log("SelectionManager > selectNode > showContextMenu", contextMenu.show);
+    if (contextMenu.show) {
+      this.showContextComponents(contextMenu.at);
+    }
+
+    if (!doNotDraw) {
+      this.mediaLayerRef.batchDraw();
+    }
+    return true;
+  }
+
+  public deselectNode(node: MediaNode, doNotDraw?: boolean): void {
+    if (this.disabled) {
+      // no-op when disabled
+      return;
+    }
+    node.unhighlight();
+    if (node.isKEventRef()) {
+      node.setIsKEventRef(false);
+    }
+    this.selectedNodes.delete(node);
+    this.updateNodeTransformer();
+    this.updateContextComponents();
+    this.showContextComponents();
+    if (!doNotDraw) {
+      this.mediaLayerRef.batchDraw();
+    }
+  }
+
+  public clearSelection(): void {
+    if (this.disabled) {
+      //no-op when disabled
+      return;
+    }
+    this.selectedNodes.forEach((node) => {
+      node.unhighlight();
+      if (node.isKEventRef()) {
+        node.setIsKEventRef(false);
+      }
+    });
+
+    this.selectedNodes.clear();
+    this.nodeTransformerRef.clear();
+    this.hideContextComponents();
+    this.mediaLayerRef.batchDraw();
+  }
+
+  public onToggleLock() {
+    this.updateContextComponents();
+  }
+  public isDragging() {
+    return this._isDragging;
+  }
+  public isNodeSelected(node: MediaNode): boolean {
+    return this.selectedNodes.has(node);
+  }
+
+  public dragStart() {
+    // track the dragging state for mouseevents in nodes
+    this._isDragging = true;
+    this.hideContextComponents();
+
+    // track all nodes initial position when dragstart
+    this.selectedNodes.forEach((selectedNode) => {
+      this.initialPositions.set(selectedNode, selectedNode.kNode.position());
+    });
+  }
+
+  public dragEnd() {
+    // release the dragging state for mouseevents in nodes
+    this._isDragging = false;
+    // track and map the final positions
+    const finalPositions = new Map<MediaNode, Position>();
+    this.selectedNodes.forEach((currNode) => {
+      finalPositions.set(currNode, currNode.kNode.position());
+    });
+    // dispatch the info for engine to manage un-redo stack
+    this.eventTarget.dispatchEvent(
+      new CustomEvent<NodesTranslationEventDetails>(
+        SelectionManagerEvents.NODES_TRANSLATIONS,
+        {
+          detail: {
+            nodes: this.selectedNodes,
+            initialPositions: new Map(this.initialPositions),
+            finalPositions: finalPositions,
+          },
+        },
+      ),
+    );
+    // done, clear data and show menu
+    this.initialPositions.clear();
+    this.updateContextComponents();
+  }
+
+  private getKNodeTransformation(kNode: Konva.Node) {
+    return {
+      kNodeId: kNode._id,
+      position: kNode.position(),
+      size: kNode.size(),
+      rotation: kNode.rotation(),
+      scale: {
+        x: kNode.scaleX(),
+        y: kNode.scaleY(),
+      },
+    };
+  }
+  public transformStart() {
+    // track all nodes initial transformation when transformStart
+    this.selectedNodes.forEach((selectedNode) => {
+      const transformations = [this.getKNodeTransformation(selectedNode.kNode)];
+      if (selectedNode.kNode instanceof Konva.Group) {
+        const childKNodes = selectedNode.kNode.getChildren();
+        childKNodes.forEach((childKNode: Konva.Node) => {
+          transformations.push(this.getKNodeTransformation(childKNode));
+        });
+      }
+      this.initialTransformations.set(selectedNode, transformations);
+    });
+    this.hideContextComponents();
+  }
+  public transformEnd() {
+    // track and map the final positions
+    const finalTransformations = new Map<MediaNode, Transformation[]>();
+    this.selectedNodes.forEach((selectedNode) => {
+      const transformations = [this.getKNodeTransformation(selectedNode.kNode)];
+      if (selectedNode.kNode instanceof Konva.Group) {
+        const childKNodes = selectedNode.kNode.getChildren();
+        childKNodes.forEach((childKNode: Konva.Node) => {
+          transformations.push(this.getKNodeTransformation(childKNode));
+        });
+      }
+      finalTransformations.set(selectedNode, transformations);
+    });
+    // dispatch the info for engine to manage un-redo stack
+    this.eventTarget.dispatchEvent(
+      new CustomEvent<NodeTransformationEventDetails>(
+        SelectionManagerEvents.NODES_TRANSFORMATION,
+        {
+          detail: {
+            nodes: this.selectedNodes,
+            initialTransformations: new Map(this.initialTransformations),
+            finalTransformations: finalTransformations,
+          },
+        },
+      ),
+    );
+  }
+
+  public updateNodeTransformer() {
+    const lockFlag = this.selectedNodes.values().next().value?.isLocked();
+    if (lockFlag) {
+      this.nodeTransformerRef.disable();
+    } else {
+      this.nodeTransformerRef.enable();
+    }
+    this.nodeTransformerRef.addNodes({ selectedNodes: this.selectedNodes });
+  }
+
+  public hideContextComponents() {
+    uiAccess.toolbarNode.hide();
+    uiAccess.loadingBar.hide();
+  }
+
+  public showContextComponents(at?: { x: number, y: number }) {
+    const showOrUpdate = uiAccess.toolbarNode.isShowing()
+      ? uiAccess.toolbarNode.update
+      : uiAccess.toolbarNode.show;
+
+    // If a position is received, set it
+    // Otherwise use the previous position
+    const position = at ? at : uiAccess.toolbarNode.signal.value.position;
+
+    const node = this.selectedNodes.values().next().value;
+    if (node === undefined) {
+      this.hideContextComponents();
+      return; // no node
+    }
+    if (this.selectedNodes.size === 1) {
+      if (node instanceof ImageNode) {
+        showOrUpdate({
+          knodeIds: [node.kNode.id()],
+          locked: node.isLocked(),
+          buttonStates: getImageNodeButtonStates({ locked: node.isLocked() }),
+          position: position
+        });
+      }
+      if (node instanceof PreviewCopyNode) {
+        showOrUpdate({
+          knodeIds: [node.kNode.id()],
+          locked: node.isLocked(),
+          buttonStates: getPreviewCopyNodeButtonStates({ locked: node.isLocked() }),
+          position: position
+        });
+      }
+      else if (node instanceof ShapeNode) {
+        showOrUpdate({
+          knodeIds: [node.kNode.id()],
+          locked: node.isLocked(),
+          buttonStates: getShapeNodeButtonStates({ locked: node.isLocked() }),
+          color: node.color,
+          position: position
+        });
+      }
+      else if (node instanceof TextNode) {
+        showOrUpdate({
+          knodeIds: [node.kNode.id()],
+          locked: node.isLocked(),
+          buttonStates: getTextNodeButtonStates({ locked: node.isLocked() }),
+          color: node.getNodeData({ x: 0, y: 0 })?.textNodeData?.color ?? "#000000",
+          position: position
+        });
+      }
+     
+
+      // show loading bar is the node is noding
+      if (node instanceof NetworkedNode) {
+        if (!node.didFinishLoading && !uiAccess.loadingBar.isShowing()) {
+          // console.log("show loading bar");
+          uiAccess.loadingBar.show();
+        }
+      }
+    } else {
+      if (node) {
+        showOrUpdate({
+          locked: node.isLocked(),
+          buttonStates: getMultiSelectButtonStates({ locked: node.isLocked() }),
+          position: position
+        });
+      }
+    }
+  }
+
+  public updateContextComponents() {
+    // use first node as reference
+    const node = this.selectedNodes.values().next().value;
+    if (node === undefined) {
+      this.hideContextComponents();
+      return; // no nodes
+    }
+
+    // console.log("SelectionManager > updateContextComponents for node:", node);
+    const coord = calculateContextualsPosition(
+      this.nodeTransformerRef.getKonvaNode(),
+    );
+
+    if (node.isLocked() !== uiAccess.toolbarNode.isLocked()) {
+      // console.log("setting lock");
+      uiAccess.toolbarNode.setLocked(node.isLocked());
+    }
+    console.debug("Setting context position to:", coord)
+    uiAccess.toolbarNode.setPosition({
+      x: coord.x,
+      y: coord.y,
+    });
+    if (node instanceof NetworkedNode) {
+      uiAccess.loadingBar.update({
+        position: coord,
+        progress: node.progress(),
+        status: node.isError()
+          ? LoadingBarStatus.ERROR
+          : LoadingBarStatus.LOADING,
+        message: node.progressMessage(),
+      });
+      uiEvents.toolbarNode.retry.onClick((e) => {
+        if (e) {
+          console.log("CONTEXTUAL LOADING BAR RETRY ONCLICK", e, node);
+          node.retry();
+        }
+      });
+      if (node.didFinishLoading) {
+        // console.log("node finished loading", node);
+        uiAccess.loadingBar.hide();
+      }
+    }
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/SelectorSquare.ts

@@ -0,0 +1,176 @@
+import Konva from "konva";
+import { NodesManager } from "./NodesManager";
+import { SelectionManager } from "./SelectionManager";
+import { MediaNode } from "../types";
+
+interface SqaureCoordinates {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+export class SelectorSquare {
+  private kSquare: Konva.Rect;
+  private selecting: boolean = false;
+  private sqaureCoordinates: SqaureCoordinates = {
+    x1: 0,
+    x2: 0,
+    y1: 0,
+    y2: 0,
+  };
+
+  // engine class references
+  private captureCanvasRef: Konva.Rect;
+  private mediaLayerRef: Konva.Layer;
+  private nodesManagerRef: NodesManager;
+  private selectionManagerRef: SelectionManager;
+  private stageRef: Konva.Stage;
+
+  constructor({
+    captureCanvasRef,
+    mediaLayerRef,
+    nodesManagerRef,
+    selectionManagerRef,
+    stageRef,
+  }: {
+    captureCanvasRef: Konva.Rect;
+    mediaLayerRef: Konva.Layer;
+    nodesManagerRef: NodesManager;
+    selectionManagerRef: SelectionManager;
+    stageRef: Konva.Stage;
+  }) {
+    this.kSquare = new Konva.Rect({
+      fill: "rgba(45, 129, 255, 0.3)",
+      stroke: "#00a1ff",
+      strokeWidth: 1,
+      visible: false,
+      // disable events to not interrupt with events
+      listening: false,
+    });
+    this.captureCanvasRef = captureCanvasRef;
+    this.mediaLayerRef = mediaLayerRef;
+    this.nodesManagerRef = nodesManagerRef;
+    this.selectionManagerRef = selectionManagerRef;
+    this.stageRef = stageRef;
+  }
+  public getKonvaNode() {
+    return this.kSquare;
+  }
+
+  public disable() {
+    this.stageRef.off("mousedown touchstart");
+    this.stageRef.off("mousemove touchmove");
+    this.stageRef.off("mouseup touchend");
+    this.stageRef.off("mouseleave");
+  }
+  public enable() {
+    // Remove any existing event handlers first to prevent duplicates
+    this.disable();
+
+    this.stageRef.on("mousedown touchstart", (e) => {
+      const stagePointerPos = this.stageRef.getPointerPosition();
+      if (
+        (e.target !== this.stageRef && e.target !== this.captureCanvasRef) || // do nothing if we mousedown on any shape
+        stagePointerPos === null || // do nothing if pointers not available
+        e.evt.shiftKey // do nothing so then multiselect is more forgiving in misclicks
+      ) {
+        return;
+      }
+
+      // start handle mousedown
+      e.evt.preventDefault();
+      if (e.target === this.stageRef || e.target === this.captureCanvasRef) {
+        //moused down on empty space, clear previous selection first
+        this.selectionManagerRef.clearSelection();
+      }
+
+      // this starts drawing the square
+      this.sqaureCoordinates = {
+        x1: stagePointerPos.x,
+        y1: stagePointerPos.y,
+        x2: stagePointerPos.x,
+        y2: stagePointerPos.y,
+      };
+      
+      this.kSquare.size({
+        width: 0,
+        height: 0,
+      });
+      this.selecting = true;
+    });
+
+    this.stageRef.on("mousemove touchmove", (e) => {
+      // do nothing if we didn't start selection
+      const stagePointerPos = this.stageRef.getPointerPosition();
+      if (!this.selecting || stagePointerPos === null) {
+        return;
+      }
+
+      // handle drawing square according to mouse move
+      e.evt.preventDefault();
+      this.sqaureCoordinates = {
+        ...this.sqaureCoordinates,
+        x2: stagePointerPos.x,
+        y2: stagePointerPos.y,
+      };
+      const { x1, y1, x2, y2 } = this.sqaureCoordinates;
+      this.kSquare.moveToTop();
+      this.kSquare.setAttrs({
+        visible: true,
+        x: Math.min(x1, x2),
+        y: Math.min(y1, y2),
+        width: Math.abs(x2 - x1),
+        height: Math.abs(y2 - y1),
+      });
+    });
+
+    this.stageRef.on("mouseup touchend", (e) => {
+      // do nothing if we didn't start selection
+      if (!this.selecting) {
+        return;
+      }
+
+      this.selecting = false;
+      if (!this.kSquare.visible()) {
+        return;
+      }
+      e.evt.preventDefault();
+      // update visibility
+      this.kSquare.visible(false);
+      // Find all the Nodes and feed them into Selectmanager
+      var shapes = this.mediaLayerRef.getChildren();
+      var box = this.kSquare.getClientRect();
+      var foundKNodes = shapes.filter((shape) =>
+        Konva.Util.haveIntersection(box, shape.getClientRect()),
+      );
+      if (foundKNodes.length > 0) {
+        const kNodeIds = foundKNodes.map((kNode) => kNode._id);
+        const foundNodes = Array.from(
+          this.nodesManagerRef.getAllNodes(),
+        ).reduce((accNodes, currNode) => {
+          if (kNodeIds.includes(currNode.kNode._id) && !currNode.isLocked()) {
+            accNodes.push(currNode);
+          }
+          return accNodes;
+        }, [] as MediaNode[]);
+        console.log("selector square found", foundNodes);
+        this.selectionManagerRef.selectNodes(foundNodes);
+      }
+    });
+
+    this.stageRef.on("mouseleave", (e) => {
+      if (!this.selecting) {
+        return;
+      }
+
+      this.selecting = false;
+      if (!this.kSquare.visible()) {
+        return;
+      }
+      e.evt.preventDefault();
+      // update visibility
+      this.kSquare.visible(false);
+      // and then do nothing, this is considered a cancel
+    });
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/ToolbarNodeUtilities.ts

@@ -0,0 +1,236 @@
+import Konva from "konva";
+import { ToolbarNodeButtonNames } from "../../components/features/ToolbarNode";
+import { ContextualToolbarProps } from "../../signals/uiAccess/toolbarNode";
+export function calculateContextualsPosition(kNode: Konva.Transformer) {
+  const w = kNode.getSize().width * kNode.scaleX();
+  const h = kNode.getSize().height * kNode.scaleY();
+  const x0 = kNode.getPosition().x;
+  const y0 = kNode.getPosition().y;
+
+  const d = kNode.getAbsoluteRotation();
+  const r = d >= 0 ? (d * Math.PI) / 180 : ((360 + d) * Math.PI) / 180;
+
+  let px: number, py: number;
+  if (r < Math.PI / 2) {
+    //top right quadrants
+    px = x0 + (h * Math.sin(r) + w * Math.cos(r)) / 2 - h * Math.sin(r);
+    py = y0 + h * Math.cos(r) + w * Math.cos(Math.PI / 2 - r);
+  } else if (r < Math.PI) {
+    //lower right quadrants
+    px = x0 - (h * Math.sin(r) - w * Math.cos(r)) / 2;
+    py = y0 + w * Math.cos(Math.PI / 2 - r);
+  } else if (r < (Math.PI * 3) / 2) {
+    //lower left quadrants
+    px = x0 + h * Math.cos(r) - (h * Math.cos(r) + w * Math.sin(r)) / 2;
+    py = y0;
+  } else {
+    //top left quadrants
+    px = x0 + (-h * Math.sin(r) + w * Math.cos(r)) / 2;
+    py = y0 + h * Math.cos(r);
+  }
+  return { x: px, y: py };
+}
+
+export function getImageNodeButtonStates(
+  props: { locked?: boolean | "unknown" } = {},
+) {
+  const ButtonNames = ToolbarNodeButtonNames;
+  return Object.values(ButtonNames).reduce(
+    (buttonStates, buttonName) => {
+      switch (buttonName) {
+        case ButtonNames.AI_STYLIZE:
+        case ButtonNames.SEGMENTATION:
+        case ButtonNames.DOWNLOAD:
+        case ButtonNames.CHROMA:
+        case ButtonNames.COLOR:
+        case ButtonNames.TRANSFORM:
+          // hidden buttons
+          buttonStates[buttonName] = {
+            disabled: true,
+            hidden: true,
+            active: false,
+          };
+          return buttonStates;
+
+        default:
+          // all other buttons
+          buttonStates[buttonName] = {
+            disabled: false,
+            hidden: false,
+            active: false,
+          };
+          return buttonStates;
+      }
+    },
+    {} as ContextualToolbarProps["buttonStates"],
+  );
+}
+
+export function getPreviewCopyNodeButtonStates(
+    props: { locked?: boolean | "unknown" } = {},
+) {
+    const ButtonNames = ToolbarNodeButtonNames;
+    return Object.values(ButtonNames).reduce(
+        (buttonStates, buttonName) => {
+            switch (buttonName) {
+                case ButtonNames.AI_STYLIZE:
+                case ButtonNames.SEGMENTATION:
+                case ButtonNames.DOWNLOAD:
+                case ButtonNames.CHROMA:
+                case ButtonNames.COLOR:
+                case ButtonNames.TRANSFORM:
+                    // hidden buttons
+                    buttonStates[buttonName] = {
+                        disabled: true,
+                        hidden: true,
+                        active: false,
+                    };
+                    return buttonStates;
+
+                default:
+                    // all other buttons
+                    buttonStates[buttonName] = {
+                        disabled: false,
+                        hidden: false,
+                        active: false,
+                    };
+                    return buttonStates;
+            }
+        },
+        {} as ContextualToolbarProps["buttonStates"],
+    );
+}
+export function getTextNodeButtonStates(
+  props: { locked?: boolean | "unknown" } = {},
+) {
+  const ButtonNames = ToolbarNodeButtonNames;
+  return Object.values(ButtonNames).reduce(
+    (buttonStates, buttonName) => {
+      switch (buttonName) {
+        case ButtonNames.AI_STYLIZE:
+        case ButtonNames.SEGMENTATION:
+        case ButtonNames.DOWNLOAD:
+        case ButtonNames.CHROMA:
+        case ButtonNames.REMOVE_BACKGROUND:
+        case ButtonNames.TRANSFORM:
+          // hidden buttons
+          buttonStates[buttonName] = {
+            disabled: true,
+            hidden: true,
+            active: false,
+          };
+          return buttonStates;
+
+        default:
+          // all other buttons
+          buttonStates[buttonName] = {
+            disabled: false,
+            hidden: false,
+            active: false,
+          };
+          return buttonStates;
+      }
+    },
+    {} as ContextualToolbarProps["buttonStates"],
+  );
+}
+export function getVideoNodeButtonStates(
+  props: { locked?: boolean | "unknown" } = {},
+) {
+  const ButtonNames = ToolbarNodeButtonNames;
+  return Object.values(ButtonNames).reduce(
+    (buttonStates, buttonName) => {
+      switch (buttonName) {
+        case ButtonNames.AI_STYLIZE:
+        case ButtonNames.COLOR:
+        case ButtonNames.REMOVE_BACKGROUND:
+        case ButtonNames.TRANSFORM:
+          // soon to come feature is disabled
+          buttonStates[buttonName] = {
+              disabled: true,
+              hidden: true,
+              active: false,
+          };
+          return buttonStates;
+        default:
+          // all other buttons
+          buttonStates[buttonName] = {
+              disabled: false,
+              hidden: false,
+              active: false,
+          };
+          return buttonStates;
+      }
+    },
+    {} as ContextualToolbarProps["buttonStates"],
+  );
+}
+
+export function getShapeNodeButtonStates(
+  props: { locked?: boolean | "unknown" } = {},
+) {
+  const ButtonNames = ToolbarNodeButtonNames;
+  return Object.values(ButtonNames).reduce(
+    (buttonStates, buttonName) => {
+      switch (buttonName) {
+        case ButtonNames.AI_STYLIZE:
+        case ButtonNames.SEGMENTATION:
+        case ButtonNames.DOWNLOAD:
+        case ButtonNames.CHROMA:
+        case ButtonNames.REMOVE_BACKGROUND:
+        case ButtonNames.TRANSFORM:
+          // hidden buttons
+          buttonStates[buttonName] = {
+              disabled: true,
+              hidden: true,
+              active: false,
+          };
+          return buttonStates;
+        default:
+          // all other buttons
+          buttonStates[buttonName] = {
+              disabled: false,
+              hidden: false,
+              active: false,
+          };
+          return buttonStates;
+      }
+    },
+    {} as ContextualToolbarProps["buttonStates"],
+  );
+}
+
+export function getMultiSelectButtonStates(
+  props: { locked?: boolean | "unknown" } = {},
+) {
+  const ButtonNames = ToolbarNodeButtonNames;
+  return Object.values(ButtonNames).reduce(
+    (buttonStates, buttonName) => {
+      switch (buttonName) {
+        case ButtonNames.AI_STYLIZE:
+        case ButtonNames.SEGMENTATION:
+        case ButtonNames.DOWNLOAD:
+        case ButtonNames.CHROMA:
+        case ButtonNames.COLOR:
+        case ButtonNames.REMOVE_BACKGROUND:
+        case ButtonNames.TRANSFORM:
+          // hidden buttons
+          buttonStates[buttonName] = {
+              disabled: true,
+              hidden: true,
+              active: false,
+          };
+          return buttonStates;
+        default:
+          // all other buttons
+          buttonStates[buttonName] = {
+              disabled: false,
+              hidden: false,
+              active: false,
+          };
+          return buttonStates;
+      }
+    },
+    {} as ContextualToolbarProps["buttonStates"],
+  );
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/NodesManagers/index.ts

@@ -0,0 +1,10 @@
+export { NodesManager } from "./NodesManager";
+export { NodeIsolator } from "./NodeIsolator";
+export { NodeTransformer } from "./NodeTransformer";
+export { SelectionManager, SelectionManagerEvents } from "./SelectionManager";
+export { SelectorSquare } from "./SelectorSquare";
+
+export type {
+  NodesTranslationEventDetails,
+  NodeTransformationEventDetails,
+} from "./SelectionManager";

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/RenderingPrimitives/OffScreenSceneCanvas.ts

@@ -0,0 +1,59 @@
+//@ts-ignore
+// TODO: have to export and modify the code
+import { ICanvasConfig } from "konva/lib/Canvas";
+
+import { Canvas } from "konva/lib/Canvas";
+import { OffScreenSceneContext } from "./OffScreenSceneContext";
+
+export class OffScreenSceneCanvas extends Canvas {
+  constructor(
+    config: ICanvasConfig = { width: 0, height: 0, willReadFrequently: false },
+  ) {
+    super(config); // creates canvas then you have to replace it
+    //@ts-ignore
+    // replace here also kills the css but thats ok
+    this._canvas = new OffscreenCanvas(config.width, config.height);
+
+    this.context = new OffScreenSceneContext(this, {
+      willReadFrequently: config.willReadFrequently,
+    });
+    console.log("Created Offscreen Scene Canvas");
+    this.setSize(config.width, config.height);
+  }
+
+  setPixelRatio(pixelRatio: number) {
+    console.log("overriden setPixelRatio");
+    var previousRatio = this.pixelRatio;
+    this.pixelRatio = pixelRatio;
+    this.setSize(
+      this.getWidth() / previousRatio,
+      this.getHeight() / previousRatio,
+    );
+  }
+  public override setWidth(width: number) {
+    // take into account pixel ratio
+    // console.log("overriden setWidth");
+    this.width = this._canvas.width = width * this.pixelRatio;
+    var pixelRatio = this.pixelRatio,
+      _context = this.getContext()._context;
+    _context.scale(pixelRatio, pixelRatio);
+  }
+  public override setHeight(height: number) {
+    // take into account pixel ratio
+    // console.log("overriden setHeight");
+    this.height = this._canvas.height = height * this.pixelRatio;
+    var pixelRatio = this.pixelRatio,
+      _context = this.getContext()._context;
+    _context.scale(pixelRatio, pixelRatio);
+  }
+  getWidth() {
+    return this.width;
+  }
+  getHeight() {
+    return this.height;
+  }
+  setSize(width: number | undefined, height: number | undefined) {
+    this.setWidth(width || 0);
+    this.setHeight(height || 0);
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/RenderingPrimitives/OffScreenSceneContext.ts

@@ -0,0 +1,11 @@
+import { Context } from "konva/lib/Context";
+import { Canvas } from "konva/lib/Canvas";
+
+export class OffScreenSceneContext extends Context {
+  constructor(canvas: Canvas, { willReadFrequently = false } = {}) {
+    super(canvas);
+    this._context = canvas._canvas.getContext("2d", {
+      willReadFrequently,
+    }) as CanvasRenderingContext2D;
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts

@@ -0,0 +1,879 @@
+import Konva from "konva";
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+
+import { FileUtilities } from "../../utilities/FileUtilities";
+import {
+  ImageNode,
+  TextNode,
+  ShapeNode,
+  PreviewCopyNode,
+  PaintNode,
+} from "../Nodes";
+import { MediaNode } from "../types";
+import { RenderTask } from "./RenderTask";
+
+import {
+  isLoadingVisible,
+  loadingProgress,
+} from "../../signals/uiEvents/loadingIndicator";
+
+import { EncodeImageBitmapToBase64 } from "../../utilities/EncodeImageBitmapToBase64";
+import { setCanvasRenderBitmap } from "../../signals/canvasRenderBitmap";
+
+interface ServerSettings {
+  model_path: string;
+  lora_path?: string;
+}
+
+export class RealTimeDrawEngine {
+  private imageNodes: (ImageNode | TextNode | ShapeNode | PaintNode)[];
+
+  public offScreenCanvas: OffscreenCanvas;
+  private outputBitmap: ImageBitmap | undefined;
+
+  // private frames: ImageBitmap[];
+  // capturing composite within window
+
+  public mediaLayerRef: Konva.Layer;
+  private drawingsLayer: Konva.Layer; // New Layer for Drawings
+
+  private height: number;
+  private width: number;
+  private positionX: number;
+  private positionY: number;
+  private positionPreviewX: number;
+  private positionPreviewY: number;
+
+  private port: MessagePort | undefined;
+  public captureCanvas: Konva.Rect;
+  public backgroundRasterRect: Konva.Image;
+
+  public fps: number = 24;
+
+  public currentPrompt: string;
+  public currentStrength: number;
+
+  public lastRenderedBitmap: ImageBitmap | undefined;
+
+  // Paint Color
+  // paint Brush Size
+  // has to exit out of paint mode when shape or image are used.
+  public paintColor: string = "#000000";
+  private brushSize: number = 5; // Default brush size
+
+  public onDrawCallback?: (
+    canvas: HTMLCanvasElement,
+    lineBounds: {
+      width: number;
+      height: number;
+      x: number;
+      y: number;
+    },
+  ) => void;
+  private offscreenRenderDiv: HTMLDivElement;
+
+  private client: WebSocketClient | null = null;
+  private isConnected: boolean = false;
+
+  public backgroundColor: string = "#d2d2d2"; // off white
+  constructor({
+    width,
+    height,
+    mediaLayerRef,
+    offScreenCanvas,
+    onDraw,
+    onPreviewCopy, // New Parameter
+  }: {
+    width: number;
+    height: number;
+    mediaLayerRef: Konva.Layer;
+    offScreenCanvas: OffscreenCanvas;
+    onDraw?: (
+      canvas: HTMLCanvasElement,
+      lineBounds: {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+      },
+    ) => void;
+    onPreviewCopyCallback?: (previewCopy: Konva.Image) => void; // New Parameter
+  }) {
+    this.imageNodes = [];
+    this.onDrawCallback = onDraw;
+
+    // TODO: Make this dynamic and update this on change of canvas.
+    this.width = width * 1.5;
+    this.height = height * 1;
+
+    this.positionX = window.innerWidth - this.width;
+    this.positionY = window.innerHeight - this.height;
+
+    this.offScreenCanvas = offScreenCanvas;
+    this.offScreenCanvas.width = this.width;
+    this.offScreenCanvas.height = this.height;
+
+    // this is the whole canvas
+    this.mediaLayerRef = mediaLayerRef;
+
+    // Create a separate layer for drawings
+    this.drawingsLayer = new Konva.Layer({
+      clearBeforeDraw: true, // Ensures transparent background
+    });
+
+    this.mediaLayerRef.getStage()?.add(this.drawingsLayer); // to od pass in stage
+
+    // Set background layer to red and media layer to green for visibility
+
+    this.port = undefined;
+
+    this.fps = 24;
+
+    this.currentPrompt = "";
+    this.currentStrength = 1;
+
+    // This is captures a subset of the medialayer ref
+    this.captureCanvas = new Konva.Rect({
+      name: "CaptureCanvas",
+      x: this.positionX,
+      y: this.positionY,
+      width: this.width,
+      height: this.height,
+      stroke: "blue",
+      strokeWidth: 1,
+      cornerRadius: 10,
+      draggable: false,
+    });
+
+    this.offscreenRenderDiv = document.createElement("div");
+
+    this.mediaLayerRef.add(this.captureCanvas);
+
+    this.captureCanvas.setZIndex(0);
+
+    this.listenToServerEvents();
+  }
+
+  public async listenToServerEvents() {
+    listen("notification", (event) => {
+      console.log(event);
+      // Handle model download events
+      const payload = event.payload as any;
+
+      // Model download started
+      if (payload.model_download_started) {
+        const modelInfo = payload.model_download_started;
+        console.log(
+          `Model download started: ${modelInfo.model_name} (${modelInfo.model_type})`,
+        );
+
+        // Set up loading indicator
+        isLoadingVisible.value = true;
+        loadingProgress.value = 0;
+
+        // Create fake progress updates
+        const downloadTimer = setInterval(() => {
+          loadingProgress.value += 2;
+          // Cap at 95% until we get the completed event
+          if (loadingProgress.value >= 95) {
+            loadingProgress.value = 95;
+            clearInterval(downloadTimer);
+          }
+        }, 500);
+      }
+
+      // Model download completed
+      if (payload.model_download_complete) {
+        const modelInfo = payload.model_download_complete;
+        console.log(
+          `Model download completed: ${modelInfo.model_name} (${modelInfo.model_type})`,
+        );
+
+        // Complete the loading progress
+        loadingProgress.value = 100;
+
+        // Hide loading indicator after a short delay
+        setTimeout(() => {
+          isLoadingVisible.value = false;
+        }, 1000);
+      }
+    });
+  }
+
+  private isEnabled: boolean = false;
+  private cleanupFunction: (() => void) | null = null;
+
+  // this starts the python server
+  public async startServer() {
+    try {
+      this.client = new WebSocketClient("ws://localhost:8765");
+
+      // Set up message handlers
+      this.client.onProgress((progress) => {
+        console.log(
+          `Progress: ${progress.message} (${progress.progress * 100}%)`,
+        );
+        if (progress.error) {
+          console.error("Error:", progress.error);
+        }
+      });
+
+      // Wait for connection to be established
+      await new Promise<void>((resolve, reject) => {
+        if (!this.client) return reject("Client not initialized");
+
+        this.client.ws.onopen = () => {
+          this.isConnected = true;
+          resolve();
+        };
+        this.client.ws.onerror = (error) => reject(error);
+      });
+
+      // Load initial model
+      await this.loadModel({
+        model_path: "C:/Users/Tensor/Downloads/animagineXL40_v4Opt.safetensors",
+        lora_path: "C:/Users/Tensor/Downloads/anyu_all.safetensors",
+      });
+    } catch (error) {
+      console.error("Failed to start server:", error);
+      this.isConnected = false;
+    }
+  }
+
+  private async loadModel(settings: ServerSettings) {
+    if (!this.client || !this.isConnected) {
+      throw new Error("Server not connected");
+    }
+    await this.client.loadModel(settings);
+  }
+
+  private updateCursor(stage: Konva.Stage) {
+    // Create cursor canvas
+    const cursorCanvas = document.createElement("canvas");
+    const size = this.brushSize * 5; // Match the brush size used in drawing
+    cursorCanvas.width = size * 2; // Double size for padding
+    cursorCanvas.height = size * 2;
+
+    const ctx = cursorCanvas.getContext("2d");
+    if (!ctx) return;
+
+    // Draw the outer circle with a light stroke
+    ctx.beginPath();
+    ctx.arc(size, size, size / 2, 0, Math.PI * 2);
+    ctx.strokeStyle = "white";
+    ctx.lineWidth = 3;
+    ctx.stroke();
+
+    // Draw the inner circle with a dark stroke
+    ctx.beginPath();
+    ctx.arc(size, size, size / 2 - 1, 0, Math.PI * 2);
+    ctx.strokeStyle = "black";
+    ctx.lineWidth = 1;
+    ctx.stroke();
+
+    // Convert to data URL
+    const cursorUrl = cursorCanvas.toDataURL();
+
+    // Apply custom cursor
+    stage.container().style.cursor = `url(${cursorUrl}) ${size} ${size}, auto`;
+  }
+
+  public paintMode() {
+    let isDrawing = false;
+    let currentLine: Konva.Line | null = null;
+
+    const stage = this.mediaLayerRef.getStage();
+    if (!stage) return;
+
+    // Initialize cursor
+    this.updateCursor(stage);
+
+    const startDrawing = (pos: { x: number; y: number }) => {
+      if (!this.isEnabled) return;
+      const stage = this.mediaLayerRef.getStage();
+      if (!stage) return;
+
+      // Convert pointer position to relative position within capture canvas
+      const captureBox = this.captureCanvas.getClientRect();
+      const relativeX = pos.x - captureBox.x;
+      const relativeY = pos.y - captureBox.y;
+
+      currentLine = new Konva.Line({
+        points: [relativeX, relativeY],
+        stroke: this.paintColor,
+        strokeWidth: this.brushSize * 5,
+        lineCap: "round",
+        lineJoin: "round",
+        x: this.captureCanvas.x(),
+        y: this.captureCanvas.y(),
+        draggable: false,
+      });
+      this.drawingsLayer.moveToTop();
+      this.drawingsLayer.add(currentLine); // Add to drawingsLayer
+      isDrawing = true;
+    };
+
+    const draw = (pos: { x: number; y: number }) => {
+      if (!this.isEnabled) return;
+      if (!isDrawing || !currentLine) return;
+
+      // Convert pointer position to relative position
+      const captureBox = this.captureCanvas.getClientRect();
+      const relativeX = pos.x - captureBox.x;
+      const relativeY = pos.y - captureBox.y;
+
+      const newPoints = currentLine.points().concat([relativeX, relativeY]);
+      currentLine.points(newPoints);
+      this.drawingsLayer.batchDraw();
+    };
+
+    const stopDrawing = () => {
+      if (!this.isEnabled) return;
+      if (!isDrawing || !currentLine) return;
+
+      // Store current line before resetting state
+      const lineToConvert = currentLine;
+
+      // Reset drawing state immediately so we can start a new stroke
+      isDrawing = false;
+      currentLine = null;
+
+      // Create a temporary layer to render the line
+      const tempLayer = new Konva.Layer({
+        clearBeforeDraw: true,
+      });
+      this.mediaLayerRef.getStage()?.add(tempLayer);
+      tempLayer.add(lineToConvert);
+
+      // Get the line canvas with transparent background
+      // Get the bounding box of the line
+      const lineBounds = lineToConvert.getClientRect();
+
+      // Create canvas with just enough size to contain the line
+      const lineCanvas = tempLayer.toCanvas({
+        x: lineBounds.x,
+        y: lineBounds.y,
+        width: lineBounds.width,
+        height: lineBounds.height,
+        pixelRatio: 1,
+      });
+
+      if (this.onDrawCallback) {
+        this.onDrawCallback(lineCanvas, lineBounds);
+      }
+
+      // Clean up
+      lineToConvert.destroy();
+      tempLayer.destroy();
+
+      this.drawingsLayer.batchDraw();
+    };
+
+    // Check if point is within capture canvas bounds
+    const isWithinCaptureCanvas = (pos: { x: number; y: number }) => {
+      const captureBox = this.captureCanvas.getClientRect();
+      return (
+        pos.x >= captureBox.x &&
+        pos.x <= captureBox.x + captureBox.width &&
+        pos.y >= captureBox.y &&
+        pos.y <= captureBox.y + captureBox.height
+      );
+    };
+
+    // Add event listeners
+    stage.on("mousedown touchstart", (e) => {
+      const pos = stage.getPointerPosition();
+      if (pos && isWithinCaptureCanvas(pos)) {
+        startDrawing(pos);
+      }
+    });
+
+    stage.on("mousemove touchmove", (e) => {
+      const pos = stage.getPointerPosition();
+      if (pos && isWithinCaptureCanvas(pos)) {
+        draw(pos);
+      }
+    });
+
+    stage.on("mouseup touchend", async () => {
+      stopDrawing();
+      //await this.render();
+    });
+
+    // Store cleanup function
+    this.cleanupFunction = () => {
+      stage.off("mousedown touchstart");
+      stage.off("mousemove touchmove");
+      stage.off("mouseup touchend");
+    };
+  }
+
+  public enablePaintMode() {
+    this.isEnabled = true;
+    this.disableDragging();
+    if (!this.cleanupFunction) {
+      this.paintMode();
+    }
+    // Update cursor when enabling paint mode
+    const stage = this.mediaLayerRef.getStage();
+    if (stage) {
+      this.updateCursor(stage);
+    }
+  }
+
+  public enableDragging() {
+    // Enable dragging for all nodes in media layer
+    this.imageNodes?.forEach((node) => {
+      console.log("Image Nodes Enable");
+      console.log(node);
+      node.kNode.draggable(true);
+      node.kNode.listening(true);
+    });
+
+    this.mediaLayerRef.batchDraw();
+  }
+
+  public disableDragging() {
+    // Disable dragging for all nodes in media layer
+    this.imageNodes?.forEach((node) => {
+      node.kNode.draggable(false);
+      node.kNode.listening(false);
+    });
+    this.mediaLayerRef.batchDraw();
+  }
+
+  public disablePaintMode() {
+    this.isEnabled = false;
+    this.enableDragging();
+    if (this.cleanupFunction) {
+      this.cleanupFunction();
+      this.cleanupFunction = null;
+    }
+    // Reset cursor when disabling paint mode
+    const stage = this.mediaLayerRef.getStage();
+    if (stage) {
+      stage.container().style.cursor = "default";
+    }
+  }
+
+  public findImageNodeById(
+    id: string,
+  ): ImageNode | TextNode | ShapeNode | PaintNode | undefined {
+    return this.imageNodes.find((node) => {
+      if (node.kNode) {
+        return node.kNode.id() === id;
+      }
+      return false;
+    });
+  }
+  async updateCaptureCanvas(
+    width: number | undefined,
+    height: number | undefined,
+  ) {
+    console.log("updateCaptureCanvas");
+    if (!this.captureCanvas) {
+      return;
+    }
+    const scaleFactor = 0.9;
+    // Store old values for calculating delta
+    const oldPositionX = this.positionX;
+    const oldPositionY = this.positionY;
+
+    const oldWidth = this.width;
+    const oldHeight = this.height;
+
+    // Original aspect ratio
+    const originalAspectRatio = oldWidth / oldHeight;
+
+    // Calculate new dimensions based on window size
+    let newWidth: number;
+    let newHeight: number;
+
+    if (width === undefined) {
+      newWidth = window.innerWidth * scaleFactor;
+    } else {
+      newWidth = width * scaleFactor;
+    }
+
+    if (height === undefined) {
+      newHeight = window.innerHeight * scaleFactor;
+    } else {
+      newHeight = height * scaleFactor;
+    }
+
+    // Preserve aspect ratio
+    const newAspectRatio = newWidth / newHeight;
+
+    if (newAspectRatio > originalAspectRatio) {
+      // Width is constraining factor
+      newWidth = newHeight * originalAspectRatio;
+    } else {
+      // Height is constraining factor
+      newHeight = newWidth / originalAspectRatio;
+    }
+
+    this.width = newWidth;
+    this.height = newHeight;
+
+    console.log("New dimensions:", this.width, this.height);
+
+    // Calculate new position to center the canvas in the window
+    this.positionX = (window.innerWidth - this.width) / 2;
+    const headerPadding = 56;
+    this.positionY = (window.innerHeight - headerPadding - this.height) / 2;
+
+    console.log("New centered position:", this.positionX, this.positionY);
+
+    // Update the canvas position and size
+    this.captureCanvas.setPosition({
+      x: this.positionX,
+      y: this.positionY,
+    });
+    this.captureCanvas.size({ width: this.width, height: this.height });
+
+    // Calculate scale factors to maintain proportions
+    const scaleX = this.width / oldWidth;
+    const scaleY = this.height / oldHeight;
+
+    // Use a uniform scale factor to preserve aspect ratio
+    const uniformScale = Math.min(scaleX, scaleY);
+
+    // Update all children except the capture canvas
+    var children = this.mediaLayerRef.getChildren();
+    for (let i = 0; i < children.length; i++) {
+      let node = children[i];
+
+      // skip the capture canvas and preview canvas update.
+      if (node.name() === "CaptureCanvas") {
+        continue;
+      }
+
+      const pos = node.getPosition();
+      const oldScale = node.scale();
+
+      // Apply both position shift and scaling to maintain relative positioning
+      node.setPosition({
+        x: (pos.x - oldPositionX) * uniformScale + this.positionX,
+        y: (pos.y - oldPositionY) * uniformScale + this.positionY,
+      });
+
+      // Update scale proportionally if the node has a scale property
+      if (
+        oldScale &&
+        typeof oldScale.x === "number" &&
+        typeof oldScale.y === "number"
+      ) {
+        node.scale({
+          x: oldScale.x * uniformScale,
+          y: oldScale.y * uniformScale,
+        });
+      }
+    }
+
+    this.mediaLayerRef.batchDraw();
+  }
+
+  debug() {
+    // DEBUG ONLY
+    const rectangle = new Konva.Rect({
+      x: this.positionX,
+      y: this.positionY,
+      width: 100,
+      height: 100,
+      fill: "green",
+      stroke: "black",
+      strokeWidth: 1,
+      draggable: false,
+    });
+    this.mediaLayerRef.add(rectangle);
+  }
+
+  async sendCanvasPayload(renderTask: RenderTask) {
+    if (!this.port) {
+      return console.log("Undefined Worker");
+    }
+    this.port.postMessage(renderTask);
+  }
+
+  public placeDebugRect(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    layer: Konva.Layer,
+  ): void {
+    const rect = new Konva.Rect({
+      x: x,
+      y: y,
+      width: width, // Default width
+      height: height, // Default height
+      fill: "green",
+      draggable: false,
+    });
+
+    layer.add(rect);
+    layer.draw();
+  }
+
+  // This function uses a portion of the video layer to capture just the capture canvas.
+  // capture everything after seeking each video node.
+  renderPortionOfLayer(
+    layer: Konva.Layer,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+  ): HTMLCanvasElement {
+    const canvas = layer.toCanvas({
+      x: x,
+      y: y,
+      width: width,
+      height: height,
+    });
+    return canvas;
+  }
+
+  public isProcessing = false;
+  private handleNodeDragEnd = async () => {
+    // Clean up any existing state
+    //await this.render();
+  };
+
+  public async addNodes(node: MediaNode) {
+    if (
+      node instanceof ImageNode ||
+      node instanceof TextNode ||
+      node instanceof ShapeNode ||
+      node instanceof PaintNode ||
+      node instanceof PreviewCopyNode
+    ) {
+      console.debug("Adding node:", node);
+      this.imageNodes.push(node);
+      console.log(this.imageNodes);
+    }
+
+    // ensure the layer doesn't move if added while painting.
+    if (this.isEnabled) {
+      this.disableDragging();
+    }
+
+    //await this.render();
+  }
+
+  public removeNodes(node: MediaNode) {
+    if (
+      node instanceof ImageNode ||
+      node instanceof TextNode ||
+      node instanceof ShapeNode ||
+      node instanceof PaintNode ||
+      node instanceof PreviewCopyNode
+    ) {
+      const index = this.imageNodes.indexOf(node);
+      if (index > -1) {
+        node.kNode.off("dragend", this.handleNodeDragEnd);
+        this.imageNodes.splice(index, 1);
+      }
+    }
+  }
+
+  private cloneStageForRender(
+    stage: Konva.Stage,
+    layerOfInterest: Konva.Layer,
+  ): Konva.Stage {
+    const stageClone = new Konva.Stage({
+      width: stage.width(),
+      height: stage.height(),
+      container: this.offscreenRenderDiv,
+    });
+
+    const renderLayer = new Konva.Layer();
+
+    // Clone all the nodes then reset them to render right
+    layerOfInterest.getChildren().forEach((node) => {
+      const dupNode = node.clone();
+      dupNode.strokeWidth(0);
+      renderLayer.add(dupNode);
+    });
+
+    stageClone.add(renderLayer);
+
+    return stageClone;
+  }
+
+  private async imageBitmapToBase64(imageBitmap: ImageBitmap): Promise<string> {
+    // Create a temporary canvas
+    const canvas = document.createElement("canvas");
+    canvas.width = imageBitmap.width;
+    canvas.height = imageBitmap.height;
+
+    // Draw the ImageBitmap onto the canvas
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Failed to get 2D context");
+
+    ctx.drawImage(imageBitmap, 0, 0);
+
+    // Convert to base64
+    const base64String = canvas.toDataURL("image/png");
+
+    // Clean up
+    canvas.remove();
+
+    // Remove the data:image/png;base64, prefix if you want just the base64 string
+    return base64String.split(",")[1];
+  }
+
+  public async saveOutput() {
+    if (!this.outputBitmap) {
+      console.error("No output bitmap available to save");
+      return;
+    }
+
+    const base64Bitmap = await EncodeImageBitmapToBase64(this.outputBitmap);
+
+    const saveResponse = await invoke("save_image", {
+      image: base64Bitmap,
+    });
+  }
+
+  public async generateImage() {
+    if (!this.lastRenderedBitmap) {
+      console.error("No rendered bitmap available to generate from");
+      return;
+    }
+
+    const base64Bitmap = await this.imageBitmapToBase64(
+      this.lastRenderedBitmap,
+    );
+
+    const generateResponse = await invoke("image_generation_command", {
+      image: base64Bitmap,
+      prompt: this.currentPrompt,
+    });
+  }
+
+  public async render() {
+    // only pick nodes that intersect wi th the canvas on screen bounds to freeze.
+    if (this.isProcessing) {
+      console.log("isProcessing Returning");
+      return;
+    }
+    console.log("Calling Render");
+    this.isProcessing = true;
+
+    this.mediaLayerRef.draw();
+    // Output all nodes in mediaLayerRef
+    const nodes = this.mediaLayerRef.getChildren();
+    console.log("All nodes in mediaLayer:", nodes);
+    console.log(
+      `context: x:${this.positionX} y:${this.positionY} ${this.width} x ${this.height}`,
+    );
+
+    const bitmap = (await this.renderFrame({
+      layerOfInterest: this.mediaLayerRef,
+      x: this.captureCanvas.x(),
+      y: this.captureCanvas.y(),
+      width: this.width,
+      height: this.height,
+      mimeType: "image/jpeg",
+      pixelRatio: 1,
+      quality: 1.0,
+      test: false,
+    })) as ImageBitmap;
+
+    this.lastRenderedBitmap = bitmap;
+
+    setCanvasRenderBitmap(bitmap);
+
+    try {
+    } catch (error) {
+      console.error("Error during image processing:", error);
+    } finally {
+      this.isProcessing = false;
+    }
+  }
+
+  // Add getter/setter for brush size
+  public set paintBrushSize(size: number) {
+    this.brushSize = size * 7.5;
+    const stage = this.mediaLayerRef.getStage();
+    if (stage && this.isEnabled) {
+      this.updateCursor(stage);
+    }
+  }
+
+  public get paintBrushSize(): number {
+    return this.brushSize;
+  }
+
+  // Add method to check connection status
+  public isServerConnected(): boolean {
+    return this.isConnected && this.client !== null;
+  }
+
+  // Add method to reconnect if needed
+  public async reconnect() {
+    if (this.client) {
+      this.client.ws.close();
+    }
+    await this.startServer();
+  }
+
+  private async renderFrame(config: {
+    layerOfInterest: Konva.Layer; // layer where the element that you want to clip lives.
+    // XY and height of a captureCanvas ( region of interest )
+    x?: number; // x position of the region of interest
+    y?: number; // y position of the region of interest
+    width?: number; // size of the region of interest
+    height?: number; // size of the region of interest
+    pixelRatio?: number; // higher means higher quality
+    mimeType?: string; // image/jpeg or image/png
+    quality?: number; // 1.0 is the best.
+    test: boolean; // true == blob else Image Bitmap
+  }): Promise<ImageBitmap | Blob> {
+    const box = config.layerOfInterest.getClientRect();
+    const stage = config.layerOfInterest.getStage();
+
+    const x = config.x !== undefined ? config.x : Math.floor(box.x);
+    const y = config.y !== undefined ? config.y : Math.floor(box.y);
+    const pixelRatio = config.pixelRatio || 1;
+
+    // Clone the required layer from the stage
+    // Set the right details (like removing highlight stroke)
+    // Then render the cloned stage to a bitmap
+    const stageClone = this.cloneStageForRender(stage, config.layerOfInterest);
+    const stageBlob = (await stageClone.toBlob({
+      x: x,
+      y: y,
+      width: config.width || Math.ceil(box.width),
+      height: config.height || Math.ceil(box.height),
+      pixelRatio: pixelRatio,
+    })) as Blob;
+
+    // if config.test is true, the result is downloaded to the local files
+    // config.test = true;
+    if (config.test) {
+      await FileUtilities.blobToFileJpeg(stageBlob, "1");
+    }
+
+    const result = await createImageBitmap(stageBlob);
+    return result;
+  }
+
+  // Add method to create or update background
+  public updateBackground(color: string) {
+    this.captureCanvas.fill(color);
+
+    const captureCanvasImage = this.captureCanvas.toDataURL();
+    const imageSource = new Image();
+    imageSource.src = captureCanvasImage;
+
+    imageSource.onload = () => {
+      this.backgroundRasterRect.fill(color);
+      this.backgroundRasterRect.image(imageSource);
+
+      this.mediaLayerRef.batchDraw();
+      //this.render();
+    };
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/RenderingPrimitives/RenderTask.ts

@@ -0,0 +1,37 @@
+import { bool } from "@techstark/opencv-js";
+
+export enum WorkerEvent {
+  START = "start",
+  PROGRESS = "progress",
+  COMPLETE = "complete",
+  DATA = "data",
+  ERROR = "error",
+}
+
+export interface RenderTaskPayload {
+  offscreenCanvas: OffscreenCanvas;
+  id: number;
+}
+
+// RenderSharedWorker.ts
+export interface RenderTask {
+  jobID: number;
+  isDone: bool;
+  event: WorkerEvent;
+  data: RenderTaskPayload | undefined;
+}
+
+export interface RenderTaskProgress {
+  isProcessing: boolean;
+  progress: number;
+  jobID: number;
+  event: WorkerEvent;
+}
+
+export interface RenderTaskResult {
+  event: Worker;
+  jobID: number;
+  data: {
+    mediaUrl: string;
+  };
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/RenderingPrimitives/note.txt

@@ -0,0 +1,18 @@
+   const dataURL = this.videoLayer.toDataURL({
+          x: this.captureCanvas.x(),
+          y: this.captureCanvas.y(),
+          width: this.captureCanvas.width(),
+          height: this.captureCanvas.height(),
+        });
+        
+
+        // Create an image element to display the captured area
+        const img = new Image();
+        img.src = dataURL;
+        document.body.appendChild(img); // Append the image to the body or any other container
+
+        // Optionally, you can download the captured image
+        const link = document.createElement("a");
+        link.href = dataURL;
+        link.download = "snapshot.png";
+        link.click();

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/CreateCommand.ts

@@ -0,0 +1,77 @@
+import Konva from "konva";
+import { ICommand } from "./ICommand";
+import { MediaNode } from "../types";
+import {
+  NodesManager,
+  NodeTransformer,
+  SelectionManager,
+} from "../NodesManagers";
+import { RealTimeDrawEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
+import { toolbarNode } from "../../signals/uiAccess/toolbarNode";
+
+export class CreateCommand implements ICommand {
+  private mediaLayerRef: Konva.Layer;
+  private nodes: Set<MediaNode>;
+  private zIndices: Map<MediaNode, number>;
+
+  private nodesManagerRef: NodesManager;
+  private nodeTransformerRef: NodeTransformer;
+  private selectionManagerRef: SelectionManager;
+
+  private renderEngineRef: RealTimeDrawEngine;
+
+  constructor({
+    nodes,
+    mediaLayerRef,
+    nodesManagerRef,
+    nodeTransformerRef,
+    renderEngineRef,
+    selectionManagerRef,
+  }: {
+    nodes: Set<MediaNode>;
+    mediaLayerRef: Konva.Layer;
+    nodesManagerRef: NodesManager;
+    nodeTransformerRef: NodeTransformer;
+    renderEngineRef: RealTimeDrawEngine;
+    selectionManagerRef: SelectionManager;
+  }) {
+    this.nodes = nodes;
+    this.zIndices = new Map(nodesManagerRef.getAllZIndices());
+
+    this.mediaLayerRef = mediaLayerRef;
+    this.nodesManagerRef = nodesManagerRef;
+    this.nodeTransformerRef = nodeTransformerRef;
+    this.renderEngineRef = renderEngineRef;
+    this.selectionManagerRef = selectionManagerRef;
+  }
+
+  execute() {
+    this.nodes.forEach((node) => {
+      this.mediaLayerRef.add(node.kNode);
+      this.nodesManagerRef.saveNode(node);
+      this.renderEngineRef.addNodes(node);
+    });
+    this.mediaLayerRef.draw();
+
+  }
+
+  undo() {
+    this.nodes.forEach((node) => {
+      this.nodesManagerRef.removeNode(node);
+      this.renderEngineRef.removeNodes(node);
+      this.selectionManagerRef.deselectNode(node);
+      node.kNode.remove();
+      if (
+        this.zIndices.get(node) &&
+        node.kNode.getZIndex() !== this.zIndices.get(node)
+      ) {
+        node.kNode.setZIndex(this.zIndices.get(node));
+      }
+    });
+    this.nodeTransformerRef.clear();
+    toolbarNode.hide();
+    this.mediaLayerRef.draw();
+    this.renderEngineRef.render();
+ 
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/DeleteCommand.ts

@@ -0,0 +1,77 @@
+import Konva from "konva";
+import { ICommand } from "./ICommand";
+import { MediaNode } from "../types";
+import {
+  NodesManager,
+  NodeTransformer,
+  SelectionManager,
+} from "../NodesManagers";
+import { RealTimeDrawEngine as RenderEngine } from "../RenderingPrimitives/RealTimeDrawEngine";
+
+import { toolbarNode } from "../../signals/uiAccess/toolbarNode";
+
+export class DeleteCommand implements ICommand {
+  private mediaLayerRef: Konva.Layer;
+  private nodes: Set<MediaNode>;
+  private zIndices: Map<MediaNode, number> = new Map();
+
+  private nodesManagerRef: NodesManager;
+  private nodeTransformerRef: NodeTransformer;
+  private selectionManagerRef: SelectionManager;
+
+  private renderEngineRef: RenderEngine;
+
+  constructor({
+    nodes,
+    mediaLayerRef,
+    nodesManagerRef,
+    nodeTransformerRef,
+    renderEngineRef,
+    selectionManagerRef,
+  }: {
+    nodes: Set<MediaNode>;
+    mediaLayerRef: Konva.Layer;
+    nodesManagerRef: NodesManager;
+    nodeTransformerRef: NodeTransformer;
+    renderEngineRef: RenderEngine;
+    selectionManagerRef: SelectionManager;
+  }) {
+    this.nodes = new Set<MediaNode>(nodes);
+    this.zIndices = new Map(nodesManagerRef.getAllZIndices());
+
+    this.mediaLayerRef = mediaLayerRef;
+    this.nodesManagerRef = nodesManagerRef;
+    this.nodeTransformerRef = nodeTransformerRef;
+    this.renderEngineRef = renderEngineRef;
+    this.selectionManagerRef = selectionManagerRef;
+  }
+
+  execute() {
+    this.nodes.forEach((node) => {
+      this.nodesManagerRef.removeNode(node);
+      this.renderEngineRef.removeNodes(node);
+      this.selectionManagerRef.deselectNode(node);
+      node.kNode.remove();
+    });
+    this.nodeTransformerRef.clear();
+    toolbarNode.hide();
+    this.mediaLayerRef.draw();
+  }
+
+  undo() {
+    this.nodes.forEach((node) => {
+      this.mediaLayerRef.add(node.kNode);
+      this.nodesManagerRef.saveNode(node);
+      this.renderEngineRef.addNodes(node);
+    });
+    this.nodesManagerRef.getAllNodes().forEach((node) => {
+      if (
+        this.zIndices.get(node) &&
+        node.kNode.getZIndex() !== this.zIndices.get(node)
+      ) {
+        node.kNode.setZIndex(this.zIndices.get(node));
+      }
+    });
+    this.mediaLayerRef.draw();
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/ICommand.ts

@@ -0,0 +1,4 @@
+export interface ICommand {
+  execute(): void | boolean | Promise<boolean>;
+  undo(): void;
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/LockNodesCommand.ts

@@ -0,0 +1,19 @@
+import { MediaNode } from "../types";
+import { ICommand } from "./ICommand";
+
+export class LockNodesCommand implements ICommand {
+  private nodes: Set<MediaNode>;
+  constructor({ nodes }: { nodes: Set<MediaNode> }) {
+    this.nodes = new Set(nodes);
+  }
+  execute() {
+    this.nodes.forEach((node) => {
+      node.lock();
+    });
+  }
+  undo() {
+    this.nodes.forEach((node) => {
+      node.unlock();
+    });
+  }
+}

frontend/apps/editor3d/app/src/pages/Page2d/KonvaApp/UndoRedo/MoveLayerDown.ts

@@ -0,0 +1,64 @@
+import Konva from "konva";
+import { ICommand } from "./ICommand";
+import { MediaNode } from "../types";
+import { NodesManager } from "../NodesManagers";
+
+export class MoveLayerDown implements ICommand {
+  private sortedMovingNodes: [MediaNode, number][];
+  private sortedAllNodesByZ: [MediaNode, number][];
+  private mediaLayerRef: Konva.Layer;
+  private nodesManagerRef: NodesManager;
+
+  constructor({
+    nodes,
+    mediaLayerRef,
+    nodesManagerRef,
+  }: {
+    nodes: Set<MediaNode>;
+    mediaLayerRef: Konva.Layer;
+    nodesManagerRef: NodesManager;
+  }) {
+    this.sortedMovingNodes = Array.from(nodes)
+      .reduce(
+        (accNodes, currNode) => {
+          accNodes.push([currNode, currNode.kNode.getZIndex()]);
+          return accNodes;
+        },
+        [] as [MediaNode, number][],
+      )
+      // this sort the remapped array in ascending order
+      .sort(([, zA], [, zB]) => zA - zB);
+
+    // set up references
+    this.sortedAllNodesByZ = nodesManagerRef.getSortedZIndices();
+    this.mediaLayerRef = mediaLayerRef;
+    this.nodesManagerRef = nodesManagerRef;
+  }
+
+  execute() {
+    let hasMovedNode = false;
+    let currMinIndex = 0;
+    this.sortedMovingNodes.forEach(([movingNode, movingNodeZindex]) => {
+      if (movingNodeZindex === currMinIndex) {
+        currMinIndex = currMinIndex + 1;
+      } else {
+        movingNode.moveLayerDown();
+        hasMovedNode = true;
+      }
+    });
+    this.nodesManagerRef.updateAllZIndices();
+    this.mediaLayerRef.draw();
+    // if (import.meta.env.DEV && !hasMovedNode) {
+    //   console.log("No Node Moved-DOWN");
+    // }
+    return hasMovedNode;
+  }
+
+  undo() {
+    this.sortedAllNodesByZ.forEach(([node, zIndex]) => {
+      node.kNode.setZIndex(zIndex);
+    });
+    this.nodesManagerRef.updateAllZIndices();
+    this.mediaLayerRef.draw();
+  }
+}