sveltekit-ui 1.1.74 → 1.1.76

package/dist/Components/ImageEditor/{index.svelte.js → manager.svelte.js}

@@ -3,15 +3,16 @@ import {
   clean_custom_identifier,
   mime_type_extensions,
   deep_copy,
+  set_closurable,
   url_to_file,
 } from "../../client/index.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_text_input_manager } from "../TextInput/index.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
-import { create_slider_manager } from "../Slider/index.svelte.js"
-import { create_file_input_manager } from "../FileInput/index.svelte.js"
-import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_popover_manager } from "../Popover/manager.svelte.js"
+import { create_text_input_manager } from "../TextInput/manager.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
+import { create_slider_manager } from "../Slider/manager.svelte.js"
+import { create_file_input_manager } from "../FileInput/manager.svelte.js"
+import { create_checkbox_manager } from "../Checkbox/manager.svelte.js"
 import "context-filter-polyfill" // ctx.filter doesnt work on safari and this should fix
 
 export function create_image_editor_manager(config) {
@@ -50,10 +51,18 @@ export function create_image_editor_manager(config) {
   let start_y = $state(null)
   let last_known_x = $state(null)
   let last_known_y = $state(null)
-  let is_disabled = $state(false)
+  let is_read_only = $derived(set_closurable(config?.is_read_only, false))
+  let is_disabled = $derived(set_closurable(config?.is_disabled, false) || is_read_only)
+  let is_interaction_disabled = $derived(is_disabled)
   let ai_error_message = $state(null)
+  let error_message = $state(null)
   let file_size_kb = $state(null)
 
+  let is_destroyed = false
+  let set_base_image_timeout_id = null
+  let crop_timeout_id = null
+  const owned_object_urls = new Set()
+
   let popover_manager = $state(null)
   let file_input_manager = $state(null)
   let screen_tab_filters_button_manager = $state(null)
@@ -137,18 +146,47 @@ export function create_image_editor_manager(config) {
   )
 
   let shown_file_size_data = $derived(file_size_data?.[mime_type_input])
+  let is_ai_loading = $derived(
+    ai_image_generator_is_loading ||
+      ai_remove_background_is_loading ||
+      ai_restore_resolution_is_loading ||
+      ai_restore_face_is_loading
+  )
+
+  function create_owned_object_url(blob) {
+    const object_url = URL.createObjectURL(blob)
+    owned_object_urls.add(object_url)
+    return object_url
+  }
+
+  function revoke_owned_object_url(object_url) {
+    if (!object_url || !owned_object_urls.has(object_url)) return
+    URL.revokeObjectURL(object_url)
+    owned_object_urls.delete(object_url)
+  }
+
+  function revoke_all_owned_object_urls() {
+    for (const object_url of owned_object_urls) {
+      URL.revokeObjectURL(object_url)
+    }
+    owned_object_urls.clear()
+  }
 
   async function set_file_size_kb() {
-    if (!selected_image_source) {
+    const image_source = selected_image_source
+    if (!image_source) {
       return
     }
-    let data_url = await get_image_data_url(
-      selected_image_source,
-      mime_type_input ?? mime_type,
-      file_quality_slider_manager?.val
-    )
-    let size = calculate_file_size(data_url, mime_type_input ?? mime_type)
-    file_size_kb = size
+    try {
+      const target_mime_type = mime_type_input ?? mime_type
+      let data_url = await get_image_data_url(image_source, target_mime_type, file_quality_slider_manager?.val)
+      if (is_destroyed || image_source !== selected_image_source) return
+      file_size_kb = calculate_file_size(data_url, target_mime_type)
+    } catch (error) {
+      if (!is_destroyed && image_source === selected_image_source) {
+        error_message = error?.message ?? "Unable to calculate image size."
+      }
+    }
   }
 
   function set_crop_box_loc(w, h) {
@@ -160,17 +198,31 @@ export function create_image_editor_manager(config) {
   }
 
   function on_destroy() {
-    if (document) {
-      let hidden_image_el = document?.querySelector(`#${id}_hidden_image_el`)
-      if (hidden_image_el) {
-        hidden_image_el.remove()
-      }
+    is_destroyed = true
+    if (set_base_image_timeout_id != null) {
+      clearTimeout(set_base_image_timeout_id)
+      set_base_image_timeout_id = null
+    }
+    if (crop_timeout_id != null) {
+      clearTimeout(crop_timeout_id)
+      crop_timeout_id = null
     }
+    ai_image_generator_is_loading = false
+    ai_remove_background_is_loading = false
+    ai_restore_resolution_is_loading = false
+    ai_restore_face_is_loading = false
+    revoke_all_owned_object_urls()
   }
 
   function set_base_image(new_src) {
-    setTimeout(() => {
-      let hidden_image_el = document?.querySelector(`#${id}_hidden_image_el`)
+    if (typeof document === "undefined" || is_destroyed) return
+    if (set_base_image_timeout_id != null) {
+      clearTimeout(set_base_image_timeout_id)
+    }
+    set_base_image_timeout_id = setTimeout(() => {
+      set_base_image_timeout_id = null
+      if (is_destroyed) return
+      let hidden_image_el = document.querySelector(`#${id}_hidden_image_el`)
       if (hidden_image_el) {
         hidden_image_el.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
         if (new_src) {
@@ -334,11 +386,12 @@ export function create_image_editor_manager(config) {
         set_base_image(new_image_src)
       }
     } catch (err) {
-      console.log("error updating image", err)
+      console.error("Error updating image", err)
     }
   }
 
   function undo() {
+    if (is_disabled || is_destroyed) return
     if (Array.isArray(image_sources) && image_sources.length > 1 && image_source_index < image_sources.length - 1) {
       image_source_index++
       set_base_image(selected_image_source)
@@ -346,6 +399,7 @@ export function create_image_editor_manager(config) {
   }
 
   function redo() {
+    if (is_disabled || is_destroyed) return
     if (Array.isArray(image_sources) && image_sources.length > 1 && image_source_index > 0) {
       image_source_index--
       set_base_image(selected_image_source)
@@ -353,17 +407,24 @@ export function create_image_editor_manager(config) {
   }
 
   function clear() {
+    revoke_all_owned_object_urls()
     image_sources = []
     image_source_index = 0
     file_picker_file = null
     file_name_text_input_manager.set_val(null)
+    file_size_data = null
+    file_size_kb = null
+    set_base_image(null)
   }
 
   async function finish() {
+    if (is_disabled || is_destroyed) return
+    const image_source = selected_image_source
     let file_to_return = null
-    if (selected_image_source) {
-      file_to_return = await url_to_file(selected_image_source, file_name_derived)
+    if (image_source) {
+      file_to_return = await url_to_file(image_source, file_name_derived)
     }
+    if (is_destroyed || image_source !== selected_image_source) return
     if (typeof config?.on_finish == "function") {
       config?.on_finish(file_to_return)
     }
@@ -371,26 +432,11 @@ export function create_image_editor_manager(config) {
   }
 
   function drop_handler(e) {
-    let accept = ["image/webp", "image/jpeg", "image/png"]
-    let files_loc = []
-    if (e.dataTransfer.items) {
-      for (let i = 0; i < e.dataTransfer.items.length; i++) {
-        if (e.dataTransfer.items[i].kind === "file") {
-          let file = e.dataTransfer.items[i].getAsFile()
-          if (accept.includes(file?.type)) {
-            files_loc = [...files_loc, file]
-          }
-        }
-      }
-    } else {
-      for (let i = 0; i < e.dataTransfer.files.length; i++) {
-        let file = e.dataTransfer.files[i].getAsFile()
-        files_loc = [...files_loc, file]
-      }
-    }
-    if (files_loc.length > 0) {
-      init_file(files_loc[0])
-    }
+    file_input_manager?.drop_handler(e)
+  }
+
+  function drag_over_handler(e) {
+    file_input_manager?.drag_over_handler(e)
   }
 
   // filters ↓↓↓
@@ -466,6 +512,7 @@ export function create_image_editor_manager(config) {
   // crop ↓↓↓
   function set_crop_box(w = null, h = null) {
     let canvas_el = document?.querySelector(`#${id}_canvas_el`)
+    if (!canvas_el) return
     if (w != null && w > -1 && h != null && h > -1) {
       crop_aspect_ratio = parseFloat((w / h).toPrecision(4))
     } else {
@@ -493,6 +540,7 @@ export function create_image_editor_manager(config) {
   }
 
   function crop_image(w, h) {
+    if (is_interaction_disabled) return
     if (crop_aspect_width != w && crop_aspect_height != h) {
       crop_aspect_width = w
       crop_aspect_height = h
@@ -504,7 +552,10 @@ export function create_image_editor_manager(config) {
       }
     }
     main_image_transformer()
-    setTimeout(() => {
+    if (crop_timeout_id != null) clearTimeout(crop_timeout_id)
+    crop_timeout_id = setTimeout(() => {
+      crop_timeout_id = null
+      if (is_destroyed) return
       set_crop_box()
       set_image_pixels_crop()
     }, 10)
@@ -512,6 +563,7 @@ export function create_image_editor_manager(config) {
 
   function set_image_pixels_crop() {
     let canvas_el = document?.querySelector(`#${id}_canvas_el`)
+    if (!canvas_el) return
     let canv_height = canvas_el.offsetHeight
     let canv_width = canvas_el.offsetWidth
     image_pixels_crop_width =
@@ -722,17 +774,21 @@ export function create_image_editor_manager(config) {
   }
 
   function crop_on_down(e, type) {
-    e.preventDefault()
+    if (is_interaction_disabled) return
+    e?.preventDefault?.()
     if (e?.touches) {
       start_x = e.touches[0].pageX
       start_y = e.touches[0].pageY
       last_known_x = e.touches[0].pageX
       last_known_y = e.touches[0].pageY
-    } else if ((e?.x, e?.y)) {
-      start_x = e.x
-      start_y = e.y
-      last_known_x = e.x
-      last_known_y = e.y
+    } else {
+      const pointer_x = e?.clientX ?? e?.x
+      const pointer_y = e?.clientY ?? e?.y
+      if (!Number.isFinite(pointer_x) || !Number.isFinite(pointer_y)) return
+      start_x = pointer_x
+      start_y = pointer_y
+      last_known_x = pointer_x
+      last_known_y = pointer_y
     }
     crop_drag_type = type
     crop_top_start = crop_top
@@ -742,14 +798,19 @@ export function create_image_editor_manager(config) {
   }
 
   function crop_on_move(e) {
+    if (is_interaction_disabled) return
     let canvas_el = document?.querySelector(`#${id}_canvas_el`)
+    if (!canvas_el) return
     if ((start_x != null && !isNaN(start_x)) || (start_y != null && !isNaN(start_y))) {
       if (e?.touches) {
         last_known_x = e.touches[0].pageX
         last_known_y = e.touches[0].pageY
-      } else if ((e?.x, e?.y)) {
-        last_known_x = e.x
-        last_known_y = e.y
+      } else {
+        const pointer_x = e?.clientX ?? e?.x
+        const pointer_y = e?.clientY ?? e?.y
+        if (!Number.isFinite(pointer_x) || !Number.isFinite(pointer_y)) return
+        last_known_x = pointer_x
+        last_known_y = pointer_y
       }
       let canv_height = canvas_el.offsetHeight
       let canv_width = canvas_el.offsetWidth
@@ -783,121 +844,139 @@ export function create_image_editor_manager(config) {
 
   // ai ↓↓↓
 
+  async function remote_image_to_data_url(src, mime_type = "image/webp") {
+    const response = await fetch(src)
+    if (!response.ok) {
+      throw new Error(`Unable to load generated image (${response.status}).`)
+    }
+    const blob = await response.blob()
+    const blob_url = URL.createObjectURL(blob)
+    try {
+      return await get_image_data_url(blob_url, mime_type)
+    } finally {
+      URL.revokeObjectURL(blob_url)
+    }
+  }
+
   async function ai_image_generator(input) {
+    if (is_interaction_disabled || is_ai_loading) return
     ai_error_message = null
     if (typeof config?.ai_image_generator != "function") {
       ai_error_message = "ai_image_generator function not provided to config"
       return
     }
     ai_image_generator_is_loading = true
-    const res = await config.ai_image_generator(input)
-    if (res?.is_success) {
-      try {
+    try {
+      const res = await config.ai_image_generator(input)
+      if (is_destroyed) return
+      if (res?.is_success) {
         init_file()
-        const data_url = res?.data?.data_url
+        const data_url = res?.data?.data_url ?? res?.data
+        if (!data_url) throw new Error("Image generator returned no image data.")
         image_sources = [data_url, ...image_sources]
         image_source_index = 0
         set_base_image(data_url)
-        mime_type = res?.data?.mime_type || "image/webp"
+        mime_type = res?.data?.mime_type || get_mime_type_from_src(data_url) || "image/webp"
         mime_type_input = mime_type
         set_file_data_base()
-      } catch (e) {
-        ai_error_message = "error generating image"
+      } else {
+        ai_error_message = res?.error_message ?? "Error generating image"
       }
-    } else {
-      ai_error_message = res?.error_message ?? "error generating image"
+    } catch (error) {
+      if (!is_destroyed) ai_error_message = error?.message ?? "Error generating image"
+    } finally {
+      if (!is_destroyed) ai_image_generator_is_loading = false
     }
-    ai_image_generator_is_loading = false
   }
 
   async function ai_remove_background(input) {
+    if (is_interaction_disabled || is_ai_loading) return
     ai_error_message = null
     if (typeof config?.ai_remove_image_background !== "function") {
       ai_error_message = "ai_remove_image_background function not provided to config"
       return
     }
     ai_remove_background_is_loading = true
-    const res = await config?.ai_remove_image_background(input)
-    if (res?.is_success) {
-      try {
-        let response = await fetch(res?.data)
-        let blob = await response.blob()
-        let blob_url = URL.createObjectURL(blob)
-        let data_url = await get_image_data_url(blob_url, "image/webp")
+    try {
+      const res = await config.ai_remove_image_background(input)
+      if (is_destroyed) return
+      if (res?.is_success) {
+        let data_url = await remote_image_to_data_url(res?.data, "image/webp")
+        if (is_destroyed) return
         image_sources = [data_url, ...image_sources]
         image_source_index = 0
         set_base_image(data_url)
         mime_type = "image/webp"
         mime_type_input = "image/webp"
         set_file_data_base()
-      } catch (error) {
-        console.error("Error loading image:", error)
-        ai_error_message = "Error removing image background"
+      } else {
+        ai_error_message = res?.error_message ?? "Error removing image background"
       }
-    } else {
-      ai_error_message = res?.error_message ?? "Error removing image background"
+    } catch (error) {
+      if (!is_destroyed) ai_error_message = error?.message ?? "Error removing image background"
+    } finally {
+      if (!is_destroyed) ai_remove_background_is_loading = false
     }
-    ai_remove_background_is_loading = false
   }
 
   async function ai_restore_resolution(input) {
+    if (is_interaction_disabled || is_ai_loading) return
     ai_error_message = null
     if (typeof config?.ai_restore_resolution !== "function") {
       ai_error_message = "ai_restore_resolution function not provided to config"
       return
     }
     ai_restore_resolution_is_loading = true
-    const res = await config?.ai_restore_resolution(input)
-    if (res?.is_success) {
-      try {
-        let response = await fetch(res?.data)
-        let blob = await response.blob()
-        let blob_url = URL.createObjectURL(blob)
-        let data_url = await get_image_data_url(blob_url, "image/webp")
+    try {
+      const res = await config.ai_restore_resolution(input)
+      if (is_destroyed) return
+      if (res?.is_success) {
+        let data_url = await remote_image_to_data_url(res?.data, "image/webp")
+        if (is_destroyed) return
         image_sources = [data_url, ...image_sources]
         image_source_index = 0
         set_base_image(data_url)
         mime_type = "image/webp"
         mime_type_input = "image/webp"
         set_file_data_base()
-      } catch (error) {
-        console.error("Error loading image:", error)
-        ai_error_message = "Error removing image background"
+      } else {
+        ai_error_message = res?.error_message ?? "Error restoring image resolution"
       }
-    } else {
-      ai_error_message = res?.error_message ?? "Error removing image background"
+    } catch (error) {
+      if (!is_destroyed) ai_error_message = error?.message ?? "Error restoring image resolution"
+    } finally {
+      if (!is_destroyed) ai_restore_resolution_is_loading = false
     }
-    ai_restore_resolution_is_loading = false
   }
 
   async function ai_restore_face(input) {
+    if (is_interaction_disabled || is_ai_loading) return
     ai_error_message = null
     if (typeof config?.ai_restore_face !== "function") {
       ai_error_message = "ai_restore_face function not provided to config"
       return
     }
     ai_restore_face_is_loading = true
-    const res = await config?.ai_restore_face(input)
-    if (res?.is_success) {
-      try {
-        let response = await fetch(res?.data)
-        let blob = await response.blob()
-        let blob_url = URL.createObjectURL(blob)
-        let data_url = await get_image_data_url(blob_url, "image/webp")
+    try {
+      const res = await config.ai_restore_face(input)
+      if (is_destroyed) return
+      if (res?.is_success) {
+        let data_url = await remote_image_to_data_url(res?.data, "image/webp")
+        if (is_destroyed) return
         image_sources = [data_url, ...image_sources]
         image_source_index = 0
         set_base_image(data_url)
         mime_type = "image/webp"
         mime_type_input = "image/webp"
         set_file_data_base()
-      } catch (error) {
-        console.error("Error loading image:", error)
-        ai_error_message = "Error removing image background"
+      } else {
+        ai_error_message = res?.error_message ?? "Error restoring face"
       }
-    } else {
-      ai_error_message = res?.error_message ?? "Error removing image background"
+    } catch (error) {
+      if (!is_destroyed) ai_error_message = error?.message ?? "Error restoring face"
+    } finally {
+      if (!is_destroyed) ai_restore_face_is_loading = false
     }
-    ai_restore_face_is_loading = false
   }
 
   // ai ↑↑↑
@@ -912,14 +991,16 @@ export function create_image_editor_manager(config) {
   let base_chart_path = "M5,35 C100,35 93,30 95,5"
 
   async function set_file_data_base() {
-    if (selected_image_source) {
+    const image_source = selected_image_source
+    if (image_source) {
       file_size_data = deep_copy(file_size_data_base)
-      load_file_size_quality_data(mime_type, selected_image_source)
+      void load_file_size_quality_data(mime_type, image_source)
     }
-    set_file_size_kb() // prob also run on various slider or image type changes
+    void set_file_size_kb()
   }
 
   function get_mime_type_from_src(image_src) {
+    if (typeof image_src !== "string") return null
     let re = /^data:(image\/\w+);base64,/
     let result = image_src.match(re)
     return result && result.length > 1 ? result[1] : null
@@ -938,19 +1019,24 @@ export function create_image_editor_manager(config) {
       let image_src = selected_image_source
       if (image_src) {
         if (!file_size_data?.[mime_type] && image_src) {
-          load_file_size_quality_data(mime_type, image_src)
+          void load_file_size_quality_data(mime_type, image_src)
         }
       }
       file_quality_slider_manager.set_val(quality)
     }
-    set_file_size_kb()
+    void set_file_size_kb()
   }
 
   async function set_file_from_inputs() {
-    if (selected_image_source) {
-      let data_url = await get_image_data_url(selected_image_source, mime_type_input, file_quality_slider_manager?.val)
+    const image_source = selected_image_source
+    if (image_source) {
+      let data_url = await get_image_data_url(image_source, mime_type_input, file_quality_slider_manager?.val)
+      if (is_destroyed || image_source !== selected_image_source) return
       image_sources = [data_url, ...image_sources]
+      image_source_index = 0
       mime_type = mime_type_input
+      set_base_image(data_url)
+      void set_file_data_base()
     }
   }
 
@@ -963,6 +1049,7 @@ export function create_image_editor_manager(config) {
     }
     if (mime_type == "image/png") {
       let data_url = await get_image_data_url(image_src, "image/png", 100)
+      if (is_destroyed || image_src !== selected_image_source) return
       let file_size = calculate_file_size(data_url, "image/png")
       file_size_data[mime_type] = {
         is_loading: false,
@@ -982,6 +1069,7 @@ export function create_image_editor_manager(config) {
         let x_vals = x_vals_sets[i]
         for (let x_val of x_vals) {
           let data_url = await get_image_data_url(image_src, mime_type, x_val)
+          if (is_destroyed || image_src !== selected_image_source) return
           let file_size = calculate_file_size(data_url, mime_type)
           file_size_xy_data.push([x_val, file_size])
         }
@@ -1046,6 +1134,10 @@ export function create_image_editor_manager(config) {
 
   async function get_image_data_url(image_src, mime_type = "image/webp", quality = 100) {
     return new Promise((resolve, reject) => {
+      if (typeof Image === "undefined" || typeof document === "undefined") {
+        reject(new Error("Image conversion is only available in a browser."))
+        return
+      }
       let img = new Image()
       img.crossOrigin = "Anonymous"
       img.onload = function () {
@@ -1082,15 +1174,18 @@ export function create_image_editor_manager(config) {
   // file ↑↑↑
 
   function init_file(file_input) {
-    let hidden_image_el = document.createElement("img")
-    hidden_image_el.id = `${id}_hidden_image_el`
-    hidden_image_el.style = "display: none;"
-    hidden_image_el.alt = "hidden_image_el"
-    hidden_image_el.onload = () => main_image_transformer()
-    document.body.appendChild(hidden_image_el)
-    if (!file_input?.file) {
+    if (is_interaction_disabled || is_destroyed) return
+    error_message = null
+    const file = file_input?.file ?? (file_input?.type ? file_input : null)
+    if (file && !["image/png", "image/jpeg", "image/webp"].includes(file?.type)) {
+      error_message = `${file?.name ?? "File"} is not a supported image.`
+      return
+    }
+    revoke_all_owned_object_urls()
+    if (!file) {
       image_sources = []
       image_source_index = null
+      file_picker_file = null
       file_name = null
       file_name_text_input_manager.set_val(null)
       mime_type = null
@@ -1098,14 +1193,15 @@ export function create_image_editor_manager(config) {
       set_base_image(null)
       return
     }
-    let src_url = URL.createObjectURL(file_input?.file)
+    let src_url = create_owned_object_url(file)
     image_sources = [src_url]
     image_source_index = 0
-    let clean_file_name = (file_input?.file_name ?? file_input?.file?.name ?? null).replace(/\..+$/, "")
+    file_picker_file = file
+    let clean_file_name = String(file_input?.file_name ?? file?.name ?? "").replace(/\..+$/, "")
     file_name = clean_file_name
     file_name_text_input_manager.set_val(clean_file_name)
-    mime_type = file_input?.mime_type ?? file_input?.file?.type ?? null
-    mime_type_input = file_input?.mime_type ?? file_input?.file?.type ?? null
+    mime_type = file_input?.mime_type ?? file?.type ?? null
+    mime_type_input = file_input?.mime_type ?? file?.type ?? null
     set_base_image(src_url)
     set_file_data_base()
   }
@@ -1128,6 +1224,8 @@ export function create_image_editor_manager(config) {
       is_multiselect: false,
       is_drop_zone: true,
       accept: ["image/png", "image/jpeg", "image/webp"],
+      is_disabled: () => is_disabled,
+      is_read_only: () => is_read_only,
       on_get_file: (input) => {
         init_file({ file: input })
         file_input_manager.clear_files()
@@ -1140,6 +1238,7 @@ export function create_image_editor_manager(config) {
       icon_sw: 30,
       is_compressed: true,
       support_icon: "sliders",
+      is_disabled: () => is_disabled,
       selected_type: () => (screen_tab == "filters" ? "selected" : null),
       on_click: () => set_screen_tab("filters"),
     })
@@ -1149,6 +1248,7 @@ export function create_image_editor_manager(config) {
       is_compressed: true,
       icon_sw: 30,
       support_icon: "crop",
+      is_disabled: () => is_disabled,
       selected_type: () => (screen_tab == "crop" ? "selected" : null),
       on_click: () => set_screen_tab("crop"),
     })
@@ -1158,6 +1258,7 @@ export function create_image_editor_manager(config) {
       icon_sw: 30,
       is_compressed: true,
       support_icon: "resize",
+      is_disabled: () => is_disabled,
       selected_type: () => (screen_tab == "resize" ? "selected" : null),
       on_click: () => set_screen_tab("resize"),
     })
@@ -1167,6 +1268,7 @@ export function create_image_editor_manager(config) {
       icon_sw: 30,
       is_compressed: true,
       support_icon: "brain",
+      is_disabled: () => is_disabled,
       selected_type: () => (screen_tab == "ai" ? "selected" : null),
       on_click: () => set_screen_tab("ai"),
     })
@@ -1176,6 +1278,7 @@ export function create_image_editor_manager(config) {
       icon_sw: 30,
       is_compressed: true,
       support_icon: "file",
+      is_disabled: () => is_disabled,
       selected_type: () => (screen_tab == "file" ? "selected" : null),
       on_click: () => set_screen_tab("file"),
     })
@@ -1191,7 +1294,7 @@ export function create_image_editor_manager(config) {
       icon_sw: 30,
       is_compressed: true,
       support_icon: "undo_arrow",
-      is_disabled: () => image_sources.length < 2 || image_sources.length - image_source_index < 2,
+      is_disabled: () => is_disabled || image_sources.length < 2 || image_sources.length - image_source_index < 2,
       on_click: () => undo(),
     })
     redo_button_manager = create_button_manager({
@@ -1201,7 +1304,7 @@ export function create_image_editor_manager(config) {
       icon_sw: 30,
       is_compressed: true,
       support_icon: "redo_arrow",
-      is_disabled: () => image_sources.length < 2 || image_source_index < 1,
+      is_disabled: () => is_disabled || image_sources.length < 2 || image_source_index < 1,
       on_click: () => redo(),
     })
     clear_button_manager = create_button_manager({
@@ -1210,7 +1313,7 @@ export function create_image_editor_manager(config) {
       is_compressed: true,
       icon_sw: 30,
       support_icon: "trashcan",
-      is_disabled: () => image_sources.length < 1,
+      is_disabled: () => is_disabled || image_sources.length < 1,
       on_click: () => clear(),
     })
     finish_button_manager = create_button_manager({
@@ -1222,7 +1325,7 @@ export function create_image_editor_manager(config) {
       icon_sw: 30,
       is_compressed: true,
       support_icon: "check",
-      is_disabled: () => image_sources.length < 1,
+      is_disabled: () => is_disabled || image_sources.length < 1,
       on_click: () => finish(),
     })
     filter_brightness_slider_manager = create_slider_manager({
@@ -1232,6 +1335,7 @@ export function create_image_editor_manager(config) {
       min: 1,
       max: 200,
       step: 1,
+      is_disabled: () => is_disabled,
       on_change: () => main_image_transformer(),
     })
     filter_contrast_slider_manager = create_slider_manager({
@@ -1241,6 +1345,7 @@ export function create_image_editor_manager(config) {
       min: 1,
       max: 200,
       step: 1,
+      is_disabled: () => is_disabled,
       on_change: () => main_image_transformer(),
     })
     filter_saturation_slider_manager = create_slider_manager({
@@ -1250,6 +1355,7 @@ export function create_image_editor_manager(config) {
       min: 1,
       max: 200,
       step: 1,
+      is_disabled: () => is_disabled,
       on_change: () => main_image_transformer(),
     })
     filter_grayscale_slider_manager = create_slider_manager({
@@ -1259,6 +1365,7 @@ export function create_image_editor_manager(config) {
       min: 1,
       max: 200,
       step: 1,
+      is_disabled: () => is_disabled,
       on_change: () => main_image_transformer(),
     })
     filter_hue_slider_manager = create_slider_manager({
@@ -1268,6 +1375,7 @@ export function create_image_editor_manager(config) {
       min: 1,
       max: 200,
       step: 1,
+      is_disabled: () => is_disabled,
       on_change: () => main_image_transformer(),
     })
     filter_red_slider_manager = create_slider_manager({
@@ -1277,6 +1385,7 @@ export function create_image_editor_manager(config) {
       min: 1,
       max: 255,
       step: 1,
+      is_disabled: () => is_disabled,
       on_change: () => main_image_transformer(),
     })
     filter_green_slider_manager = create_slider_manager({
@@ -1286,6 +1395,7 @@ export function create_image_editor_manager(config) {
       min: 1,
       max: 255,
       step: 1,
+      is_disabled: () => is_disabled,
       on_change: () => main_image_transformer(),
     })
     filter_blue_slider_manager = create_slider_manager({
@@ -1295,6 +1405,7 @@ export function create_image_editor_manager(config) {
       min: 1,
       max: 100,
       step: 1,
+      is_disabled: () => is_disabled,
       on_change: () => main_image_transformer(),
     })
     filter_blur_slider_manager = create_slider_manager({
@@ -1304,6 +1415,7 @@ export function create_image_editor_manager(config) {
       min: 0,
       max: 200,
       step: 1,
+      is_disabled: () => is_disabled,
       on_change: () => main_image_transformer(),
     })
     filter_opacity_slider_manager = create_slider_manager({
@@ -1313,17 +1425,20 @@ export function create_image_editor_manager(config) {
       min: 0,
       max: 100,
       step: 1,
+      is_disabled: () => is_disabled,
       on_change: () => main_image_transformer(),
     })
     filters_set_default_button_manager = create_button_manager({
       type: "outlined",
       is_no_wrap: true,
       text: "Set Default Values",
+      is_disabled: () => is_disabled,
       on_click: () => reset_filters(),
     })
     filters_apply_filters_button_manager = create_button_manager({
       is_no_wrap: true,
       text: "Apply Filters",
+      is_disabled: () => is_disabled,
       on_click: () => apply_filters(),
     })
     crop_free_button_manager = create_button_manager({
@@ -1501,31 +1616,36 @@ export function create_image_editor_manager(config) {
         { key: "restore_resolution", name: "Restore Resolution" },
         { key: "restore_face", name: "Restore Face" },
       ],
+      is_disabled: () => is_disabled || is_ai_loading,
     })
     ai_generate_image_from_text_text_input_manager = create_text_input_manager({
       label: "Text Prompt",
       type: "text_area",
       rows: 3,
       placeholder: "Describe what you want your image to be of",
-      is_disabled: () => ai_image_generator_is_loading,
+      is_disabled: () => is_disabled || is_ai_loading,
     })
     ai_generate_image_images_prompt_file_input_manager = create_file_input_manager({
       label: "Image Prompt",
       is_multiselect: true,
       is_drop_zone: false,
       accept: ["image/png", "image/jpeg", "image/webp"],
+      is_disabled: () => is_disabled || is_ai_loading,
+      is_read_only: () => is_read_only,
     })
     ai_generate_image_include_workspace_in_images_prompt_checkbox_manager = create_checkbox_manager({
       label: "Include Workspace Image in Images Prompt",
       type: "toggle",
       val: true,
+      is_disabled: () => is_disabled || is_ai_loading,
+      is_read_only: () => is_read_only,
     })
     ai_generate_image_from_text_button_manager = create_button_manager({
       text: "Generate Image",
       is_compressed: true,
       mt: 1,
       is_loading: () => ai_image_generator_is_loading,
-      is_disabled: () => is_disabled,
+      is_disabled: () => is_disabled || is_ai_loading,
       on_click: async () => {
         const files = Array.isArray(ai_generate_image_images_prompt_file_input_manager?.val)
           ? [...ai_generate_image_images_prompt_file_input_manager.val]
@@ -1562,21 +1682,21 @@ export function create_image_editor_manager(config) {
       text: "Remove Background",
       is_compressed: true,
       is_loading: () => ai_remove_background_is_loading,
-      is_disabled: () => is_disabled,
+      is_disabled: () => is_disabled || is_ai_loading || !selected_image_source,
       on_click: () => ai_remove_background(selected_image_source),
     })
     ai_restore_resolution_button_manager = create_button_manager({
       text: "Restore Resolution",
       is_compressed: true,
       is_loading: () => ai_restore_resolution_is_loading,
-      is_disabled: () => is_disabled,
+      is_disabled: () => is_disabled || is_ai_loading || !selected_image_source,
       on_click: () => ai_restore_resolution(selected_image_source),
     })
     ai_restore_face_button_manager = create_button_manager({
       text: "Restore Face",
       is_compressed: true,
       is_loading: () => ai_restore_face_is_loading,
-      is_disabled: () => is_disabled,
+      is_disabled: () => is_disabled || is_ai_loading || !selected_image_source,
       on_click: () => ai_restore_face(selected_image_source),
     })
     resize_width_dropdown_manager = create_dropdown_manager({
@@ -1701,6 +1821,12 @@ export function create_image_editor_manager(config) {
     get is_disabled() {
       return is_disabled
     },
+    get is_read_only() {
+      return is_read_only
+    },
+    get error_message() {
+      return error_message
+    },
     get current_image_width() {
       return current_image_width
     },
@@ -1956,6 +2082,7 @@ export function create_image_editor_manager(config) {
     download_image,
     set_file_from_inputs,
     drop_handler,
+    drag_over_handler,
     set_is_popover,
   }
 }