sveltekit-ui 1.1.16 → 1.1.17

package/dist/Components/ImageEditor/index.svelte.js

@@ -1,1961 +0,0 @@
-import {
-  create_unique_id,
-  clean_custom_identifier,
-  mime_type_extensions,
-  deep_copy,
-  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 "context-filter-polyfill" // ctx.filter doesnt work on safari and this should fix
-
-export function create_image_editor_manager(config) {
-  let id = create_unique_id(null, 20)
-
-  let is_popover = $state(true)
-  let screen_tab = $state("filters")
-  let image_sources = $state([])
-  let image_source_index = $state(null)
-  let file_picker_file = $state(null)
-  let file_name = $state(null)
-  let mime_type = $state(null)
-  let mime_type_input = $state(null)
-  let file_size_data = $state(null)
-  let is_lock_resize_aspect_ratio = $state(true)
-  let resize_width = $state(null)
-  let resize_height = $state(null)
-  let crop_width = $state(null)
-  let crop_height = $state(null)
-  let crop_left = $state(0)
-  let crop_top = $state(0)
-  let crop_aspect_width = $state(null)
-  let crop_aspect_height = $state(null)
-  let crop_aspect_ratio = $state(null)
-  let current_image_width = $state(null)
-  let current_image_height = $state(null)
-  let current_image_ar = $state(null)
-  let image_pixels_crop_width = $state(null)
-  let image_pixels_crop_height = $state(null)
-  let crop_drag_type = $state("main")
-  let crop_top_start = $state(null)
-  let crop_left_start = $state(null)
-  let crop_width_start = $state(null)
-  let crop_height_start = $state(null)
-  let start_x = $state(null)
-  let start_y = $state(null)
-  let last_known_x = $state(null)
-  let last_known_y = $state(null)
-  let is_disabled = $state(false)
-  let ai_error_message = $state(null)
-  let file_size_kb = $state(null)
-
-  let popover_manager = $state(null)
-  let file_input_manager = $state(null)
-  let screen_tab_filters_button_manager = $state(null)
-  let screen_tab_crop_button_manager = $state(null)
-  let screen_tab_resize_button_manager = $state(null)
-  let screen_tab_ai_button_manager = $state(null)
-  let screen_tab_file_button_manager = $state(null)
-  let undo_button_manager = $state(null)
-  let redo_button_manager = $state(null)
-  let clear_button_manager = $state(null)
-  let finish_button_manager = $state(null)
-  let is_show_img_slider = $state(false) // idk if using this really
-
-  let filter_brightness_slider_manager = $state(null)
-  let filter_contrast_slider_manager = $state(null)
-  let filter_saturation_slider_manager = $state(null)
-  let filter_grayscale_slider_manager = $state(null)
-  let filter_hue_slider_manager = $state(null)
-  let filter_red_slider_manager = $state(null)
-  let filter_green_slider_manager = $state(null)
-  let filter_blue_slider_manager = $state(null)
-  let filter_blur_slider_manager = $state(null)
-  let filter_opacity_slider_manager = $state(null)
-  let filters_set_default_button_manager = $state(null)
-  let filters_apply_filters_button_manager = $state(null)
-
-  let crop_free_button_manager = $state(null)
-  let crop_one_to_one_button_manager = $state(null)
-  let crop_four_to_three_button_manager = $state(null)
-  let crop_three_to_two_button_manager = $state(null)
-  let crop_sixteen_to_nine_button_manager = $state(null)
-  let crop_three_to_four_button_manager = $state(null)
-  let crop_two_to_three_button_manager = $state(null)
-  let crop_nine_to_sixteen_button_manager = $state(null)
-  let crop_width_ratio_text_input_manager = $state(null)
-  let crop_height_ratio_text_input_manager = $state(null)
-  let crop_image_button_manager = $state(null)
-  let crop_aspect_width_loc = $state(null)
-  let crop_aspect_height_loc = $state(null)
-
-  let file_name_text_input_manager = $state(null)
-  let mime_type_webp_button_manager = $state(null)
-  let mime_type_jpeg_button_manager = $state(null)
-  let mime_type_png_button_manager = $state(null)
-  let download_image_button_manager = $state(null)
-  let set_file_changes_button_manager = $state(null)
-  let file_quality_slider_manager = $state(null)
-
-  let ai_tab_dropdown_manager = $state(null)
-  let ai_image_generator_is_loading = $state(null)
-  let ai_generate_image_from_text_text_input_manager = $state(null)
-  let ai_generate_image_images_prompt_file_input_manager = $state(null)
-  let ai_generate_image_include_workspace_in_images_prompt_checkbox_manager = $state(null)
-  let ai_generate_image_from_text_button_manager = $state(null)
-  let ai_remove_background_is_loading = $state(false)
-  let ai_restore_resolution_is_loading = $state(false)
-  let ai_restore_face_is_loading = $state(false)
-  let ai_remove_bg_button_manager = $state(null)
-  let ai_restore_resolution_button_manager = $state(null)
-  let ai_restore_face_button_manager = $state(null)
-
-  let resize_width_dropdown_manager = $state(null)
-  let resize_height_dropdown_manager = $state(null)
-  let resize_width_text_input_manager = $state(null)
-  let resize_height_text_input_manager = $state(null)
-  let resize_aspect_ratio_lock_button_manager = $state(null)
-  let resize_image_button_manager = $state(null)
-
-  let selected_image_source = $derived(
-    Array.isArray(image_sources) && image_source_index < image_sources.length
-      ? image_sources?.[image_source_index]
-      : null
-  )
-
-  let file_name_derived = $derived(clean_custom_identifier(file_name_text_input_manager?.val ?? file_name ?? ""))
-
-  let file_name_derived_with_extension = $derived(
-    `${clean_custom_identifier(file_name_text_input_manager?.val ?? file_name ?? "")}.${
-      mime_type_extensions?.[mime_type ?? mime_type_input]
-    }`
-  )
-
-  let shown_file_size_data = $derived(file_size_data?.[mime_type_input])
-
-  async function set_file_size_kb() {
-    if (!selected_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
-  }
-
-  function set_crop_box_loc(w, h) {
-    crop_aspect_width_loc = w
-    crop_aspect_height_loc = h
-    crop_width_ratio_text_input_manager.set_val(crop_aspect_width_loc)
-    crop_height_ratio_text_input_manager.set_val(crop_aspect_height_loc)
-    set_crop_box(w, h)
-  }
-
-  function on_destroy() {
-    if (document) {
-      let hidden_image_el = document?.querySelector(`#${id}_hidden_image_el`)
-      if (hidden_image_el) {
-        hidden_image_el.remove()
-      }
-    }
-  }
-
-  function set_base_image(new_src) {
-    setTimeout(() => {
-      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) {
-          clear_canvas()
-          reset_fields()
-          hidden_image_el.src = new_src
-        }
-      }
-    })
-  }
-
-  function clear_canvas() {
-    let canvas_container_el = document?.querySelector(`#${id}_canvas_container_el`)
-    current_image_width = null
-    current_image_height = null
-    current_image_ar = null
-    if (canvas_container_el) {
-      canvas_container_el.style.min_width = "auto"
-      canvas_container_el.style.min_height = "auto"
-    }
-    let canvas_el = document?.querySelector(`#${id}_canvas_el`)
-    if (!canvas_el) {
-      return
-    }
-    let ctx = canvas_el.getContext("2d", { willReadFrequently: true })
-    ctx.clearRect(0, 0, canvas_el.width, canvas_el.height)
-  }
-
-  function reset_fields() {
-    filter_brightness_slider_manager.set_val(100)
-    filter_contrast_slider_manager.set_val(100)
-    filter_saturation_slider_manager.set_val(100)
-    filter_grayscale_slider_manager.set_val(0)
-    filter_hue_slider_manager.set_val(0)
-    filter_red_slider_manager.set_val(100)
-    filter_green_slider_manager.set_val(100)
-    filter_blue_slider_manager.set_val(100)
-    filter_blur_slider_manager.set_val(0)
-    filter_opacity_slider_manager.set_val(100)
-    file_quality_slider_manager.set_val(75)
-    crop_left = 0
-    crop_top = 0
-    crop_width = null
-    crop_height = null
-    resize_width = null
-    resize_height = null
-    is_lock_resize_aspect_ratio = true
-    crop_aspect_width = null
-    crop_aspect_height = null
-    crop_aspect_ratio = null
-  }
-
-  function set_screen_tab(screen_tab_loc) {
-    screen_tab = screen_tab_loc
-    let hidden_image_el = document?.querySelector(`#${id}_hidden_image_el`)
-    reset_fields()
-    if (screen_tab != "ai" && !hidden_image_el) {
-      set_base_image(selected_image_source)
-    }
-    if (screen_tab == "filters") {
-      main_image_transformer()
-    } else if (screen_tab == "file") {
-      set_file_data_base()
-    } else if (screen_tab == "crop") {
-      set_crop_box()
-    } else if (screen_tab == "ai") {
-      is_show_img_slider = false
-    }
-  }
-
-  function main_image_transformer() {
-    try {
-      let hidden_image_el = document?.querySelector(`#${id}_hidden_image_el`)
-      let edit_image_container_el = document?.querySelector(`#${id}_edit_image_container_el`)
-      let canvas_container_el = document?.querySelector(`#${id}_canvas_container_el`)
-      let canvas_el = document?.querySelector(`#${id}_canvas_el`)
-      if (!canvas_el || !hidden_image_el?.height || !(image_sources.length > 0)) {
-        return
-      }
-      let hidden_image_el_width = hidden_image_el?.width
-      let hidden_image_el_height = hidden_image_el?.height
-      let canv_width = canvas_el.offsetWidth
-      let canv_height = canvas_el.offsetHeight
-      let edit_image_container_el_width = edit_image_container_el.offsetWidth
-      let edit_image_container_el_height = edit_image_container_el.offsetHeight
-      clear_canvas()
-      current_image_width = hidden_image_el_width
-      current_image_height = hidden_image_el_height
-      current_image_ar =
-        current_image_width && current_image_height
-          ? parseFloat((current_image_width / current_image_height).toPrecision(4))
-          : null
-      let resize_width_loc = resize_width
-      let resize_height_loc = resize_height
-      if (resize_width_loc < 1) {
-        if (crop_width > 0) {
-          resize_width_loc = Math.round((crop_width * hidden_image_el_width) / canv_width)
-        } else {
-          resize_width_loc = hidden_image_el_width
-        }
-      }
-      if (resize_height_loc < 1) {
-        if (crop_height > 0) {
-          resize_height_loc = Math.round((crop_height * hidden_image_el_height) / canv_height)
-        } else {
-          resize_height_loc = hidden_image_el_height
-        }
-      }
-      let resize_aspect_ratio = resize_width_loc / resize_height_loc
-      let edit_image_frame_aspect_ratio = edit_image_container_el_width / edit_image_container_el_height
-      let crop_width_loc = crop_width > 0 ? crop_width : canv_width
-      let crop_height_loc = crop_height > 0 ? crop_height : canv_height
-      let image_pixels_crop_width = Math.round((crop_width_loc * hidden_image_el_width) / canv_width)
-      let image_pixels_crop_left = Math.round((crop_left * hidden_image_el_width) / canv_width)
-      let image_pixels_crop_height = Math.round((crop_height_loc * hidden_image_el_height) / canv_height)
-      let image_pixels_crop_top = Math.round((crop_top * hidden_image_el_height) / canv_height)
-      let display_image_height = edit_image_container_el_height
-      let display_image_width = display_image_height * resize_aspect_ratio
-      if (edit_image_frame_aspect_ratio < resize_aspect_ratio) {
-        display_image_width = edit_image_container_el_width
-        display_image_height = display_image_width / resize_aspect_ratio
-      }
-      canvas_container_el.style.min_width = "auto"
-      canvas_container_el.style.min_height = "auto"
-      if (resize_width_loc < display_image_width || resize_height_loc < display_image_height) {
-        canvas_container_el.style.width = display_image_width + "px"
-        canvas_container_el.style.height = display_image_height + "px"
-      }
-      canvas_el.width = Math.round(resize_width_loc)
-      canvas_el.height = Math.round(resize_height_loc)
-      let ctx = canvas_el.getContext("2d", { willReadFrequently: true })
-      ctx.filter = `brightness(${filter_brightness_slider_manager?.val}%) contrast(${filter_contrast_slider_manager?.val}%) saturate(${filter_saturation_slider_manager?.val}%) grayscale(${filter_grayscale_slider_manager?.val}%) opacity(${filter_opacity_slider_manager?.val}%) hue-rotate(${filter_hue_slider_manager?.val}deg) blur(${filter_blur_slider_manager?.val}px)`
-      ctx.drawImage(
-        hidden_image_el,
-        image_pixels_crop_left,
-        image_pixels_crop_top,
-        image_pixels_crop_width,
-        image_pixels_crop_height,
-        0,
-        0,
-        resize_width_loc,
-        resize_height_loc
-      )
-      let canv_image_data = ctx.getImageData(0, 0, image_pixels_crop_width, image_pixels_crop_height)
-      for (let i = 0; i < canv_image_data.data.length; i += 4) {
-        canv_image_data.data[i] = canv_image_data.data[i] * (filter_red_slider_manager?.val / 100)
-        canv_image_data.data[i + 1] = canv_image_data.data[i + 1] * (filter_green_slider_manager?.val / 100)
-        canv_image_data.data[i + 2] = canv_image_data.data[i + 2] * (filter_blue_slider_manager?.val / 100)
-      }
-      ctx.putImageData(canv_image_data, 0, 0)
-      ctx.filter = "none"
-      if (
-        (image_pixels_crop_width > 0 && Math.round(image_pixels_crop_width) != Math.round(hidden_image_el_width)) ||
-        (image_pixels_crop_height > 0 && Math.round(image_pixels_crop_height) != Math.round(hidden_image_el_height)) ||
-        (resize_width > 0 && resize_height > 0)
-      ) {
-        reset_fields()
-        let new_image_src = canvas_el.toDataURL(mime_type, file_quality_slider_manager?.val)
-        image_sources = [new_image_src, ...image_sources.slice(image_source_index)]
-        image_source_index = 0
-        set_base_image(new_image_src)
-      }
-    } catch (err) {
-      console.log("error updating image", err)
-    }
-  }
-
-  function undo() {
-    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)
-    }
-  }
-
-  function redo() {
-    if (Array.isArray(image_sources) && image_sources.length > 1 && image_source_index > 0) {
-      image_source_index--
-      set_base_image(selected_image_source)
-    }
-  }
-
-  function clear() {
-    image_sources = []
-    image_source_index = 0
-    file_picker_file = null
-    file_name_text_input_manager.set_val(null)
-  }
-
-  async function finish() {
-    let file_to_return = null
-    if (selected_image_source) {
-      file_to_return = await url_to_file(selected_image_source, file_name_derived)
-    }
-    if (typeof config?.on_finish == "function") {
-      config?.on_finish(file_to_return)
-    }
-    popover_manager?.close()
-  }
-
-  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])
-    }
-  }
-
-  // filters ↓↓↓
-
-  function apply_filters() {
-    let canvas_el = document?.querySelector(`#${id}_canvas_el`)
-    if (canvas_el && selected_image_source) {
-      let new_image_src = canvas_el.toDataURL(mime_type, file_quality_slider_manager?.val)
-      image_sources = [new_image_src, ...image_sources.slice(image_source_index)]
-      image_source_index = 0
-      reset_fields()
-      set_base_image(new_image_src)
-    }
-  }
-
-  function reset_filters() {
-    filter_brightness_slider_manager.set_val(100)
-    filter_contrast_slider_manager.set_val(100)
-    filter_saturation_slider_manager.set_val(100)
-    filter_grayscale_slider_manager.set_val(0)
-    filter_hue_slider_manager.set_val(0)
-    filter_red_slider_manager.set_val(100)
-    filter_green_slider_manager.set_val(100)
-    filter_blue_slider_manager.set_val(100)
-    filter_blur_slider_manager.set_val(0)
-    filter_opacity_slider_manager.set_val(100)
-    set_base_image(selected_image_source)
-  }
-  // filters ↑↑↑
-
-  // resize ↓↓↓
-  const resize_options = [
-    { key: 512, name: "512px" },
-    { key: 800, name: "800px" },
-    { key: 1000, name: "1000px" },
-    { key: 1200, name: "1200px" },
-    { key: 1600, name: "1600px" },
-    { key: 2000, name: "2000px" },
-    { key: 2400, name: "2400px" },
-  ]
-
-  function toggle_is_lock_resize_aspect_ratio() {
-    is_lock_resize_aspect_ratio = !is_lock_resize_aspect_ratio
-  }
-
-  function set_resize_dimensions(w, h) {
-    if (w == 0 && !h) {
-      resize_width = 0
-      if (is_lock_resize_aspect_ratio) {
-        resize_height = 0
-      }
-    } else if (h == 0 && !w) {
-      resize_height = 0
-      if (is_lock_resize_aspect_ratio) {
-        resize_width = 0
-      }
-    } else if (w > 0) {
-      resize_width = Math.round(Math.min(w, 10000))
-      if (h > 0) {
-        resize_height = Math.round(Math.min(h, 10000))
-      } else if (is_lock_resize_aspect_ratio) {
-        resize_height = Math.round(w / current_image_ar / 10) * 10
-      }
-    } else if (h > 0) {
-      resize_height = Math.round(Math.min(h, 10000))
-      if (is_lock_resize_aspect_ratio) {
-        resize_width = Math.round((h * current_image_ar) / 10) * 10
-      }
-    }
-  }
-  // resize ↑↑↑
-
-  // crop ↓↓↓
-  function set_crop_box(w = null, h = null) {
-    let canvas_el = document?.querySelector(`#${id}_canvas_el`)
-    if (w != null && w > -1 && h != null && h > -1) {
-      crop_aspect_ratio = parseFloat((w / h).toPrecision(4))
-    } else {
-      crop_aspect_ratio = null
-    }
-    let canv_height = canvas_el.offsetHeight
-    let canv_width = canvas_el.offsetWidth
-    let canvas_aspect_ratio = crop_aspect_ratio ? crop_aspect_ratio : canv_width / canv_height
-    crop_top = 0
-    crop_left = 0
-    crop_width = canv_width
-    crop_height = canv_height
-    if (crop_aspect_ratio <= canvas_aspect_ratio || crop_height > canv_height) {
-      crop_height = canv_height
-      crop_width = canv_height * canvas_aspect_ratio
-      crop_left = (canv_width - crop_width) / 2
-    }
-    if (crop_aspect_ratio > canvas_aspect_ratio || crop_width > canv_width) {
-      crop_left = 0
-      crop_width = canv_width
-      crop_height = canv_width / canvas_aspect_ratio
-      crop_top = (canv_height - crop_height) / 2
-    }
-    set_image_pixels_crop()
-  }
-
-  function crop_image(w, h) {
-    if (crop_aspect_width != w && crop_aspect_height != h) {
-      crop_aspect_width = w
-      crop_aspect_height = h
-      if (w != null && w > 0 && h != null && h > 0) {
-        crop_aspect_ratio =
-          w > 0 && h > 0 ? JSON.parse((Math.min(w, 10000) / Math.min(h, 10000)).toPrecision(4)).toFixed(2) : null
-      } else {
-        crop_aspect_ratio = null
-      }
-    }
-    main_image_transformer()
-    setTimeout(() => {
-      set_crop_box()
-      set_image_pixels_crop()
-    }, 10)
-  }
-
-  function set_image_pixels_crop() {
-    let canvas_el = document?.querySelector(`#${id}_canvas_el`)
-    let canv_height = canvas_el.offsetHeight
-    let canv_width = canvas_el.offsetWidth
-    image_pixels_crop_width =
-      crop_width > 0 && current_image_width > 0
-        ? Math.round((crop_width * current_image_width) / canv_width)
-        : current_image_width
-    image_pixels_crop_height =
-      crop_height > 0 && current_image_height > 0
-        ? Math.round((crop_height * current_image_height) / canv_height)
-        : current_image_height
-  }
-
-  function update_crop_values(
-    canv_height,
-    canv_width,
-    crop_drag_type,
-    crop_top,
-    crop_left,
-    crop_width,
-    crop_height,
-    crop_top_start,
-    crop_left_start,
-    crop_width_start,
-    crop_height_start,
-    x_change,
-    y_change,
-    crop_aspect_ratio
-  ) {
-    let new_crop_top = crop_top
-    let new_crop_left = crop_left
-    let new_crop_width = crop_width
-    let new_crop_height = crop_height
-    if (crop_drag_type == "main") {
-      new_crop_left = crop_left_start + x_change
-      new_crop_top = crop_top_start + y_change
-      if (new_crop_left < 0) {
-        new_crop_left = 0
-      }
-      if (new_crop_top < 0) {
-        new_crop_top = 0
-      }
-      let room_right = canv_width - (new_crop_left + crop_width)
-      let room_bottom = canv_height - (new_crop_top + crop_height)
-      let room_left = new_crop_left
-      let room_top = new_crop_top
-      if (room_right < 0) {
-        new_crop_left = canv_width - crop_width
-      }
-      if (room_bottom < 0) {
-        new_crop_top = canv_height - crop_height
-      }
-    }
-    // new_crop_width = new_crop_height * crop_aspect_ratio
-    // new_crop_height = new_crop_width / crop_aspect_ratio
-    let center_vert_start = crop_top_start + crop_height_start / 2
-    let center_horiz_start = crop_left_start + crop_width_start / 2
-    let shortest_horiz_length_to_wall_start = Math.min(canv_width - center_horiz_start, center_horiz_start)
-    let shortest_vert_length_to_wall_start = Math.min(canv_height - center_vert_start, center_vert_start)
-    if (["tl", "t", "tr"].includes(crop_drag_type)) {
-      let res = linear_low_crop_slide(crop_top_start, crop_height_start, y_change)
-      new_crop_top = res.crop_lower
-      new_crop_height = res.crop_range
-    }
-    if (["tl", "l", "bl"].includes(crop_drag_type)) {
-      let res = linear_low_crop_slide(crop_left_start, crop_width_start, x_change)
-      new_crop_left = res.crop_lower
-      new_crop_width = res.crop_range
-    }
-    if (["bl", "b", "br"].includes(crop_drag_type)) {
-      new_crop_height = linear_high_crop_slide(crop_height_start, canv_height - crop_top_start, y_change)
-    }
-    if (["tr", "r", "br"].includes(crop_drag_type)) {
-      new_crop_width = linear_high_crop_slide(crop_width_start, canv_width - crop_left_start, x_change)
-    }
-    if (crop_aspect_ratio) {
-      if (["t", "b"].includes(crop_drag_type)) {
-        let crop_width_based_on_change = new_crop_height * crop_aspect_ratio
-        if (crop_width_based_on_change / 2 >= shortest_horiz_length_to_wall_start) {
-          new_crop_width = shortest_horiz_length_to_wall_start * 2
-          new_crop_left = center_horiz_start - shortest_horiz_length_to_wall_start
-          new_crop_height = new_crop_width / crop_aspect_ratio
-          new_crop_top = crop_top_start
-          if (crop_drag_type == "t") {
-            new_crop_top = crop_top_start + crop_height_start - new_crop_height
-          }
-        } else {
-          new_crop_width = crop_width_based_on_change
-          new_crop_left = center_horiz_start - crop_width_based_on_change / 2
-          new_crop_height = new_crop_width / crop_aspect_ratio
-        }
-      } else if (["l", "r"].includes(crop_drag_type)) {
-        let crop_height_based_on_change = new_crop_width / crop_aspect_ratio
-        if (crop_height_based_on_change / 2 >= shortest_vert_length_to_wall_start) {
-          new_crop_height = shortest_vert_length_to_wall_start * 2
-          new_crop_top = center_vert_start - shortest_vert_length_to_wall_start
-          new_crop_width = new_crop_height * crop_aspect_ratio
-          new_crop_left = crop_left_start
-          if (crop_drag_type == "l") {
-            new_crop_left = crop_left_start + crop_width_start - new_crop_width
-          }
-        } else {
-          new_crop_height = crop_height_based_on_change
-          new_crop_top = center_vert_start - crop_height_based_on_change / 2
-          new_crop_width = new_crop_height * crop_aspect_ratio
-        }
-      } else if (crop_drag_type == "tl") {
-        let max_width = crop_left_start + crop_width_start
-        let max_height = crop_top_start + crop_height_start
-        let is_height_shortest_distance = max_width / crop_aspect_ratio > max_height
-        if (is_height_shortest_distance) {
-          new_crop_width = new_crop_height * crop_aspect_ratio
-          new_crop_left = max_width - new_crop_width
-        } else {
-          new_crop_height = new_crop_width / crop_aspect_ratio
-          new_crop_top = max_height - new_crop_height
-        }
-      } else if (crop_drag_type == "tr") {
-        let max_width = canv_width - crop_left_start
-        let max_height = crop_top_start + crop_height_start
-        let is_height_shortest_distance = max_width / crop_aspect_ratio > max_height
-        if (is_height_shortest_distance) {
-          new_crop_width = new_crop_height * crop_aspect_ratio
-          new_crop_left = canv_width - max_width
-        } else {
-          new_crop_height = new_crop_width / crop_aspect_ratio
-          new_crop_top = max_height - new_crop_height
-        }
-      } else if (crop_drag_type == "bl") {
-        let max_width = crop_left_start + crop_width_start
-        let max_height = canv_height - crop_top_start
-        let is_height_shortest_distance = max_width / crop_aspect_ratio > max_height
-        if (is_height_shortest_distance) {
-          new_crop_width = new_crop_height * crop_aspect_ratio
-          new_crop_left = max_width - new_crop_width
-        } else {
-          new_crop_height = new_crop_width / crop_aspect_ratio
-          new_crop_top = crop_top_start
-        }
-      } else if (crop_drag_type == "br") {
-        let max_width = canv_width - crop_left_start
-        let max_height = canv_height - crop_top_start
-        let is_height_shortest_distance = max_width / crop_aspect_ratio > max_height
-        if (is_height_shortest_distance) {
-          new_crop_width = new_crop_height * crop_aspect_ratio
-          new_crop_left = crop_left_start
-        } else {
-          new_crop_height = new_crop_width / crop_aspect_ratio
-          new_crop_top = crop_top_start
-        }
-      }
-    }
-    return {
-      crop_top: new_crop_top,
-      crop_left: new_crop_left,
-      crop_width: new_crop_width,
-      crop_height: new_crop_height,
-    }
-  }
-
-  function linear_low_crop_slide(crop_lower_start, crop_range_start, lower_change) {
-    let new_crop_lower = crop_lower_start + lower_change
-    let new_crop_range = crop_range_start - lower_change
-    if (new_crop_lower < 0) {
-      new_crop_range += new_crop_lower
-      new_crop_lower = 0
-    }
-    let max_crop_lower = crop_lower_start + crop_range_start
-    if (new_crop_lower > max_crop_lower) {
-      new_crop_range -= new_crop_lower - max_crop_lower
-      new_crop_lower = max_crop_lower
-    }
-    if (new_crop_range < 1) {
-      new_crop_range = 1
-    }
-    let crop_total = new_crop_lower + new_crop_range
-    if (crop_total !== crop_lower_start + crop_range_start) {
-      if (crop_total > crop_lower_start + crop_range_start) {
-        new_crop_range -= crop_total - (crop_lower_start + crop_range_start)
-      } else {
-        new_crop_range += crop_lower_start + crop_range_start - crop_total
-      }
-    }
-    return { crop_lower: new_crop_lower, crop_range: new_crop_range }
-  }
-
-  function linear_high_crop_slide(crop_range_start, frame_range, lower_change) {
-    let new_crop_range = crop_range_start + lower_change
-    if (new_crop_range < 1) {
-      new_crop_range = 1
-    }
-    if (new_crop_range > frame_range) {
-      new_crop_range = frame_range
-    }
-    return new_crop_range
-  }
-
-  function crop_on_up(e) {
-    if (start_x != null || start_y != null) {
-      start_x = null
-      start_y = null
-      last_known_x = null
-      last_known_y = null
-      crop_top_start = null
-      crop_left_start = null
-      crop_width_start = null
-      crop_height_start = null
-    }
-  }
-
-  function crop_on_down(e, type) {
-    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
-    }
-    crop_drag_type = type
-    crop_top_start = crop_top
-    crop_left_start = crop_left
-    crop_width_start = crop_width
-    crop_height_start = crop_height
-  }
-
-  function crop_on_move(e) {
-    let canvas_el = document?.querySelector(`#${id}_canvas_el`)
-    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
-      }
-      let canv_height = canvas_el.offsetHeight
-      let canv_width = canvas_el.offsetWidth
-      let x_change = last_known_x - start_x
-      let y_change = last_known_y - start_y
-      let res = update_crop_values(
-        canv_height,
-        canv_width,
-        crop_drag_type,
-        crop_top,
-        crop_left,
-        crop_width,
-        crop_height,
-        crop_top_start,
-        crop_left_start,
-        crop_width_start,
-        crop_height_start,
-        x_change,
-        y_change,
-        crop_aspect_ratio
-      )
-      crop_height = res.crop_height
-      crop_width = res.crop_width
-      crop_left = res.crop_left
-      crop_top = res.crop_top
-    }
-    set_image_pixels_crop()
-  }
-
-  // crop ↑↑↑
-
-  // ai ↓↓↓
-
-  async function ai_image_generator(input) {
-    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 {
-        init_file()
-        const data_url = res?.data?.data_url
-        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_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"
-    }
-    ai_image_generator_is_loading = false
-  }
-
-  async function ai_remove_background(input) {
-    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")
-        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"
-    }
-    ai_remove_background_is_loading = false
-  }
-
-  async function ai_restore_resolution(input) {
-    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")
-        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"
-    }
-    ai_restore_resolution_is_loading = false
-  }
-
-  async function ai_restore_face(input) {
-    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")
-        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"
-    }
-    ai_restore_face_is_loading = false
-  }
-
-  // ai ↑↑↑
-
-  // file ↓↓↓
-  let file_size_data_base = {
-    "image/png": null,
-    "image/webp": null,
-    "image/jpeg": null,
-  }
-
-  let base_chart_path = "M5,35 C100,35 93,30 95,5"
-
-  async function set_file_data_base() {
-    if (selected_image_source) {
-      file_size_data = deep_copy(file_size_data_base)
-      load_file_size_quality_data(mime_type, selected_image_source)
-    }
-    set_file_size_kb() // prob also run on various slider or image type changes
-  }
-
-  function get_mime_type_from_src(image_src) {
-    let re = /^data:(image\/\w+);base64,/
-    let result = image_src.match(re)
-    return result && result.length > 1 ? result[1] : null
-  }
-
-  async function file_input_change(file_name, mime_type, quality) {
-    if (file_name || mime_type) {
-      mime_type = mime_type && file_size_data_base.hasOwnProperty(mime_type) ? mime_type : mime_type_input
-      mime_type_input = mime_type
-      if (mime_type && file_name_text_input_manager?.val != file_name) {
-        file_name_text_input_manager.set_val(file_name)
-      }
-    }
-    if (mime_type || quality) {
-      quality = quality ? Math.max(1, Math.min(100, quality)) : file_quality_slider_manager?.val
-      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)
-        }
-      }
-      file_quality_slider_manager.set_val(quality)
-    }
-    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)
-      image_sources = [data_url, ...image_sources]
-      mime_type = mime_type_input
-    }
-  }
-
-  async function load_file_size_quality_data(mime_type, image_src) {
-    if (!file_size_data?.[mime_type]) {
-      file_size_data = deep_copy(file_size_data_base)
-    }
-    file_size_data[mime_type] = {
-      is_loading: true,
-    }
-    if (mime_type == "image/png") {
-      let data_url = await get_image_data_url(image_src, "image/png", 100)
-      let file_size = calculate_file_size(data_url, "image/png")
-      file_size_data[mime_type] = {
-        is_loading: false,
-        file_size_xy_data: [file_size],
-        min_file_size_kb: null,
-        max_file_size_kb: null,
-        chart_path: base_chart_path,
-      }
-    } else {
-      let x_vals_sets = [
-        [1, 80, 100],
-        [15, 95],
-        [5, 50, 90, 99],
-      ]
-      let file_size_xy_data = file_size_data?.[mime_type]?.file_size_xy_data || []
-      for (let i = 0; i < x_vals_sets.length; i++) {
-        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)
-          let file_size = calculate_file_size(data_url, mime_type)
-          file_size_xy_data.push([x_val, file_size])
-        }
-        let chart_data = generate_file_size_chart(file_size_xy_data)
-        let updated_data = { file_size_xy_data, ...chart_data }
-        file_size_data[mime_type] = {
-          is_loading: i < x_vals_sets.length - 1,
-          ...updated_data,
-        }
-      }
-    }
-  }
-
-  function generate_file_size_chart(file_size_data) {
-    let w = 100
-    let h = 40
-    let x_padding = 5
-    let y_padding = 5
-    let min_file_size_kb
-    let max_file_size_kb
-    if (!file_size_data || file_size_data.length < 1) {
-      min_file_size_kb = null
-      max_file_size_kb = null
-      chart_path = base_chart_path
-      return
-    }
-    let x_values = file_size_data.map(([x, y]) => x)
-    let y_values = file_size_data.map(([x, y]) => y)
-    let min_x = Math.min(...x_values)
-    let max_x = Math.max(...x_values)
-    let min_y = Math.min(...y_values)
-    let max_y = Math.max(...y_values)
-    min_file_size_kb = min_y
-    max_file_size_kb = max_y
-    let x_scale = (w - 2 * x_padding) / w
-    let x_padding_scale = x_padding / w
-    let y_scale = (h - 2 * y_padding) / h
-    let y_padding_scale = y_padding / h
-    let normalized_data_scaled = []
-    for (let [x, y] of file_size_data) {
-      let new_x = ((x - min_x) / (max_x - min_x)) * x_scale + x_padding_scale
-      let new_y = (1 - (y - min_y) / (max_y - min_y)) * y_scale + y_padding_scale
-      normalized_data_scaled.push([new_x, new_y])
-    }
-    normalized_data_scaled.sort((a, b) => b[0] - a[0])
-    let chart_path = "M"
-    for (let item of normalized_data_scaled) {
-      chart_path += " " + Math.floor(item[0] * w) + "," + Math.floor(item[1] * h)
-    }
-    return {
-      min_file_size_kb,
-      max_file_size_kb,
-      chart_path,
-    }
-  }
-
-  function calculate_file_size(data_url, mime_type) {
-    let head = `data:${mime_type};base64,`
-    let file_size = (data_url.length - head.length) * 0.75
-    return Math.round(file_size * 0.001) // size in KB
-  }
-
-  async function get_image_data_url(image_src, mime_type = "image/webp", quality = 100) {
-    return new Promise((resolve, reject) => {
-      let img = new Image()
-      img.crossOrigin = "Anonymous"
-      img.onload = function () {
-        let canvas = document.createElement("canvas")
-        let ctx = canvas.getContext("2d", { willReadFrequently: true })
-        canvas.width = this.naturalWidth
-        canvas.height = this.naturalHeight
-        ctx.drawImage(this, 0, 0)
-        let data_url = canvas.toDataURL(mime_type, quality / 100)
-        resolve(data_url)
-      }
-      img.onerror = reject
-      img.src = image_src
-    })
-  }
-
-  async function download_image() {
-    if (selected_image_source) {
-      get_image_data_url(selected_image_source, mime_type_input ?? "image/webp", file_quality_slider_manager?.val)
-        .then((data_url) => {
-          let temp_link = document.createElement("a")
-          temp_link.download = `${
-            file_name_text_input_manager?.val ? file_name_text_input_manager?.val : create_unique_id("image", 6)
-          }.${mime_type_extensions?.[mime_type_input ?? mime_type]}`
-          temp_link.href = data_url
-          temp_link.click()
-        })
-        .catch((err) => {
-          console.error(`Failed to generate download link: ${err}`)
-        })
-    }
-  }
-
-  // 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) {
-      image_sources = []
-      image_source_index = null
-      file_name = null
-      file_name_text_input_manager.set_val(null)
-      mime_type = null
-      mime_type_input = null
-      set_base_image(null)
-      return
-    }
-    let src_url = URL.createObjectURL(file_input?.file)
-    image_sources = [src_url]
-    image_source_index = 0
-    let clean_file_name = (file_input?.file_name ?? file_input?.file?.name ?? null).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
-    set_base_image(src_url)
-    set_file_data_base()
-  }
-
-  function set_is_popover(input) {
-    is_popover = !!input
-  }
-
-  async function init(config) {
-    is_popover = !!config?.is_popover
-    popover_manager = create_popover_manager({
-      min_width: 320,
-      target_width: 900,
-      min_height: 320,
-      target_height: 700,
-      header: "Edit Image",
-      type: "center",
-    })
-    file_input_manager = create_file_input_manager({
-      is_multiselect: false,
-      is_drop_zone: true,
-      accept: ["image/png", "image/jpeg", "image/webp"],
-      on_get_file: (input) => {
-        init_file({ file: input })
-        file_input_manager.clear_files()
-      },
-      height: "100%",
-    })
-    screen_tab_filters_button_manager = create_button_manager({
-      type: "soft",
-      text: "Filters",
-      icon_sw: 30,
-      is_compressed: true,
-      support_icon: "sliders",
-      selected_type: () => (screen_tab == "filters" ? "selected" : null),
-      on_click: () => set_screen_tab("filters"),
-    })
-    screen_tab_crop_button_manager = create_button_manager({
-      type: "soft",
-      text: "Crop",
-      is_compressed: true,
-      icon_sw: 30,
-      support_icon: "crop",
-      selected_type: () => (screen_tab == "crop" ? "selected" : null),
-      on_click: () => set_screen_tab("crop"),
-    })
-    screen_tab_resize_button_manager = create_button_manager({
-      type: "soft",
-      text: "Resize",
-      icon_sw: 30,
-      is_compressed: true,
-      support_icon: "resize",
-      selected_type: () => (screen_tab == "resize" ? "selected" : null),
-      on_click: () => set_screen_tab("resize"),
-    })
-    screen_tab_ai_button_manager = create_button_manager({
-      type: "soft",
-      text: "AI",
-      icon_sw: 30,
-      is_compressed: true,
-      support_icon: "brain",
-      selected_type: () => (screen_tab == "ai" ? "selected" : null),
-      on_click: () => set_screen_tab("ai"),
-    })
-    screen_tab_file_button_manager = create_button_manager({
-      type: "soft",
-      text: "File",
-      icon_sw: 30,
-      is_compressed: true,
-      support_icon: "file",
-      selected_type: () => (screen_tab == "file" ? "selected" : null),
-      on_click: () => set_screen_tab("file"),
-    })
-    undo_button_manager = create_button_manager({
-      type: "soft",
-      is_no_wrap: true,
-      text: () =>
-        `Undo ${
-          image_sources.length - image_source_index > 1
-            ? "(" + (image_sources.length - image_source_index - 1) + ")"
-            : ""
-        }`,
-      icon_sw: 30,
-      is_compressed: true,
-      support_icon: "undo_arrow",
-      is_disabled: () => image_sources.length < 2 || image_sources.length - image_source_index < 2,
-      on_click: () => undo(),
-    })
-    redo_button_manager = create_button_manager({
-      type: "soft",
-      is_no_wrap: true,
-      text: () => `Redo ${image_source_index > 0 ? "(" + image_source_index + ")" : ""}`,
-      icon_sw: 30,
-      is_compressed: true,
-      support_icon: "redo_arrow",
-      is_disabled: () => image_sources.length < 2 || image_source_index < 1,
-      on_click: () => redo(),
-    })
-    clear_button_manager = create_button_manager({
-      type: "soft",
-      text: "Clear",
-      is_compressed: true,
-      icon_sw: 30,
-      support_icon: "trashcan",
-      is_disabled: () => image_sources.length < 1,
-      on_click: () => clear(),
-    })
-    finish_button_manager = create_button_manager({
-      h: 10,
-      l: 18,
-      c: 14,
-      is_no_wrap: true,
-      text: "Finish",
-      icon_sw: 30,
-      is_compressed: true,
-      support_icon: "check",
-      is_disabled: () => image_sources.length < 1,
-      on_click: () => finish(),
-    })
-    filter_brightness_slider_manager = create_slider_manager({
-      label: "Brightness",
-      label_font_size: 1.4,
-      val: 100,
-      min: 1,
-      max: 200,
-      step: 1,
-      on_change: () => main_image_transformer(),
-    })
-    filter_contrast_slider_manager = create_slider_manager({
-      label: "Contrast",
-      label_font_size: 1.4,
-      val: 100,
-      min: 1,
-      max: 200,
-      step: 1,
-      on_change: () => main_image_transformer(),
-    })
-    filter_saturation_slider_manager = create_slider_manager({
-      label: "Saturation",
-      label_font_size: 1.4,
-      val: 100,
-      min: 1,
-      max: 200,
-      step: 1,
-      on_change: () => main_image_transformer(),
-    })
-    filter_grayscale_slider_manager = create_slider_manager({
-      label: "Grayscale",
-      label_font_size: 1.4,
-      val: 0,
-      min: 1,
-      max: 200,
-      step: 1,
-      on_change: () => main_image_transformer(),
-    })
-    filter_hue_slider_manager = create_slider_manager({
-      label: "Hue",
-      label_font_size: 1.4,
-      val: 0,
-      min: 1,
-      max: 200,
-      step: 1,
-      on_change: () => main_image_transformer(),
-    })
-    filter_red_slider_manager = create_slider_manager({
-      label: "Red",
-      label_font_size: 1.4,
-      val: 100,
-      min: 1,
-      max: 255,
-      step: 1,
-      on_change: () => main_image_transformer(),
-    })
-    filter_green_slider_manager = create_slider_manager({
-      label: "Green",
-      label_font_size: 1.4,
-      val: 100,
-      min: 1,
-      max: 255,
-      step: 1,
-      on_change: () => main_image_transformer(),
-    })
-    filter_blue_slider_manager = create_slider_manager({
-      label: "Blue",
-      label_font_size: 1.4,
-      val: 100,
-      min: 1,
-      max: 100,
-      step: 1,
-      on_change: () => main_image_transformer(),
-    })
-    filter_blur_slider_manager = create_slider_manager({
-      label: "Blur",
-      label_font_size: 1.4,
-      val: 0,
-      min: 0,
-      max: 200,
-      step: 1,
-      on_change: () => main_image_transformer(),
-    })
-    filter_opacity_slider_manager = create_slider_manager({
-      label: "Opacity",
-      label_font_size: 1.4,
-      val: 100,
-      min: 0,
-      max: 100,
-      step: 1,
-      on_change: () => main_image_transformer(),
-    })
-    filters_set_default_button_manager = create_button_manager({
-      type: "outlined",
-      is_no_wrap: true,
-      text: "Set Default Values",
-      on_click: () => reset_filters(),
-    })
-    filters_apply_filters_button_manager = create_button_manager({
-      is_no_wrap: true,
-      text: "Apply Filters",
-      on_click: () => apply_filters(),
-    })
-    crop_free_button_manager = create_button_manager({
-      type: "soft",
-      text: "Free",
-      is_disabled: () => is_disabled,
-      on_click: () => set_crop_box_loc(null, null),
-    })
-    crop_one_to_one_button_manager = create_button_manager({
-      type: "soft",
-      text: "1/1",
-      icon_sw: 30,
-      is_icon_left: true,
-      text_align: "left",
-      support_icon: "ar_one_to_one",
-      is_disabled: () => is_disabled,
-      is_half_selected: () => crop_aspect_ratio == 1,
-      on_click: () => set_crop_box_loc(1, 1),
-    })
-    crop_four_to_three_button_manager = create_button_manager({
-      type: "soft",
-      text: "4/3",
-      icon_sw: 30,
-      is_icon_left: true,
-      text_align: "left",
-      support_icon: "ar_four_to_three",
-      is_disabled: () => is_disabled,
-      is_half_selected: () => crop_aspect_ratio == 1.333,
-      on_click: () => set_crop_box_loc(4, 3),
-    })
-    crop_three_to_two_button_manager = create_button_manager({
-      type: "soft",
-      text: "3/2",
-      icon_sw: 30,
-      is_icon_left: true,
-      text_align: "left",
-      support_icon: "ar_three_to_two",
-      is_disabled: () => is_disabled,
-      is_half_selected: () => crop_aspect_ratio == 1.5,
-      on_click: () => set_crop_box_loc(3, 2),
-    })
-    crop_sixteen_to_nine_button_manager = create_button_manager({
-      type: "soft",
-      text: "16/9",
-      icon_sw: 30,
-      is_icon_left: true,
-      text_align: "left",
-      support_icon: "ar_sixteen_to_nine",
-      is_disabled: () => is_disabled,
-      is_half_selected: () => crop_aspect_ratio == 1.778,
-      on_click: () => set_crop_box_loc(16, 9),
-    })
-    crop_three_to_four_button_manager = create_button_manager({
-      type: "soft",
-      text: "3/4",
-      icon_deg: 90,
-      icon_sw: 30,
-      is_icon_left: true,
-      text_align: "left",
-      support_icon: "ar_four_to_three",
-      is_disabled: () => is_disabled,
-      is_half_selected: () => crop_aspect_ratio == 0.75,
-      on_click: () => set_crop_box_loc(3, 4),
-    })
-    crop_two_to_three_button_manager = create_button_manager({
-      type: "soft",
-      text: "2/3",
-      icon_deg: 90,
-      icon_sw: 30,
-      is_icon_left: true,
-      text_align: "left",
-      support_icon: "ar_three_to_two",
-      is_disabled: () => is_disabled,
-      is_half_selected: () => crop_aspect_ratio == 0.6667,
-      on_click: () => set_crop_box_loc(2, 3),
-    })
-    crop_nine_to_sixteen_button_manager = create_button_manager({
-      type: "soft",
-      text: "9/16",
-      icon_deg: 90,
-      icon_sw: 30,
-      is_icon_left: true,
-      text_align: "left",
-      support_icon: "ar_sixteen_to_nine",
-      is_disabled: () => is_disabled,
-      is_half_selected: () => crop_aspect_ratio == 0.5625,
-      on_click: () => set_crop_box_loc(9, 16),
-    })
-    crop_width_ratio_text_input_manager = create_text_input_manager({
-      type: "number",
-      val: crop_aspect_width_loc,
-      min: 0,
-      mt: 0.5,
-      is_compressed: true,
-      placeholder: "width ratio",
-      is_disabled: () => is_disabled,
-      on_change: (input) => {
-        crop_aspect_width_loc = input
-        set_crop_box(crop_aspect_width_loc, crop_aspect_height_loc)
-      },
-    })
-    crop_height_ratio_text_input_manager = create_text_input_manager({
-      type: "number",
-      val: crop_aspect_height_loc,
-      min: 0,
-      mt: 0.5,
-      is_compressed: true,
-      placeholder: "height ratio",
-      is_disabled: () => is_disabled,
-      on_change: (input) => {
-        crop_aspect_height_loc = input
-        set_crop_box(crop_aspect_width_loc, crop_aspect_height_loc)
-      },
-    })
-    crop_image_button_manager = create_button_manager({
-      text: "Crop Image",
-      mt: 0.5,
-      is_disabled: () => is_disabled,
-      on_click: () => crop_image(),
-    })
-    file_name_text_input_manager = create_text_input_manager({
-      label: "File Name",
-      placeholder: () => (file_name_derived && file_name_derived.length > 0 ? file_name_derived : "some_file_name"),
-      val: file_name_derived,
-      mb: 1,
-      is_disabled: () => is_disabled,
-      on_change: (input) => file_input_change(input, mime_type),
-    })
-    mime_type_webp_button_manager = create_button_manager({
-      type: "outlined",
-      text: "webp",
-      is_disabled: () => is_disabled,
-      selected_type: () => (mime_type_input == "image/webp" ? "selected" : null),
-      on_click: () => file_input_change(file_name_text_input_manager?.val, "image/webp"),
-    })
-    mime_type_jpeg_button_manager = create_button_manager({
-      type: "outlined",
-      text: "jpeg",
-      is_disabled: () => is_disabled,
-      selected_type: () => (mime_type_input == "image/jpeg" ? "selected" : null),
-      on_click: () => file_input_change(file_name_text_input_manager?.val, "image/jpeg"),
-    })
-    mime_type_png_button_manager = create_button_manager({
-      type: "outlined",
-      text: "png",
-      is_disabled: () => is_disabled,
-      selected_type: () => (mime_type_input == "image/png" ? "selected" : null),
-      on_click: () => file_input_change(file_name_text_input_manager?.val, "image/png"),
-    })
-    download_image_button_manager = create_button_manager({
-      type: "outlined",
-      text: "Download",
-      is_disabled: () => is_disabled,
-      on_click: () => download_image(),
-    })
-    set_file_changes_button_manager = create_button_manager({
-      text: "Set File Changes",
-      is_disabled: () => is_disabled,
-      on_click: () => set_file_from_inputs(),
-    })
-    file_quality_slider_manager = create_slider_manager({
-      val: 75,
-      min: 1,
-      max: 100,
-      step: 1,
-      is_disabled: () => is_disabled,
-      on_change: (input) => file_input_change(file_name_text_input_manager?.val, null, input),
-    })
-    ai_tab_dropdown_manager = create_dropdown_manager({
-      type: "horiz_selector",
-      val: "image_generator",
-      options: [
-        { key: "image_generator", name: "Image Generator" },
-        { key: "remove_background", name: "Remove Background" },
-        { key: "restore_resolution", name: "Restore Resolution" },
-        { key: "restore_face", name: "Restore Face" },
-      ],
-    })
-    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,
-    })
-    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"],
-    })
-    ai_generate_image_include_workspace_in_images_prompt_checkbox_manager = create_checkbox_manager({
-      label: "Include Workspace Image in Images Prompt",
-      type: "toggle",
-      val: true,
-    })
-    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,
-      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]
-          : []
-        if (selected_image_source && ai_generate_image_include_workspace_in_images_prompt_checkbox_manager?.val) {
-          try {
-            const target_mime = mime_type_input ?? "image/webp"
-            const quality = file_quality_slider_manager?.val ?? 75
-            const data_url = await get_image_data_url(selected_image_source, target_mime, quality)
-            const m = data_url.match(/^data:(.*?);base64,(.*)$/)
-            if (m) {
-              const mime = m[1] || target_mime
-              const bin = atob(m[2])
-              const bytes = new Uint8Array(bin.length)
-              for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i)
-              const ext = mime_type_extensions?.[mime] || "bin"
-              const base =
-                file_name_text_input_manager?.val ||
-                (typeof create_unique_id === "function" ? create_unique_id("image", 6) : "workspace-image")
-              const file = new File([bytes], `${base}.${ext}`, { type: mime })
-              files.push(file)
-            }
-          } catch (e) {
-            console.error("failed to include workspace image", e)
-          }
-        }
-        await ai_image_generator({
-          text_prompt: ai_generate_image_from_text_text_input_manager?.val,
-          images_prompt: files,
-        })
-      },
-    })
-    ai_remove_bg_button_manager = create_button_manager({
-      text: "Remove Background",
-      is_compressed: true,
-      is_loading: () => ai_remove_background_is_loading,
-      is_disabled: () => is_disabled,
-      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,
-      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,
-      on_click: () => ai_restore_face(selected_image_source),
-    })
-    resize_width_dropdown_manager = create_dropdown_manager({
-      type: "horiz_selector",
-      val: resize_width,
-      min_header_width: 9.5,
-      header: "Width",
-      header_icon: "opposing_arrows",
-      header_icon_deg: 90,
-      options: resize_options,
-      is_disabled: () => is_disabled,
-      on_item_click: (input) => {
-        set_resize_dimensions(input.key, null)
-        resize_width_text_input_manager.set_val(resize_width)
-        resize_height_text_input_manager.set_val(resize_height)
-      },
-    })
-    resize_height_dropdown_manager = create_dropdown_manager({
-      type: "horiz_selector",
-      val: resize_height,
-      min_header_width: 9.5,
-      header: "Height",
-      header_icon: "opposing_arrows",
-      header_icon_deg: 0,
-      options: resize_options,
-      is_disabled: () => is_disabled,
-      on_item_click: (input) => {
-        set_resize_dimensions(null, input.key)
-        resize_width_text_input_manager.set_val(resize_width)
-        resize_height_text_input_manager.set_val(resize_height)
-      },
-    })
-    resize_width_text_input_manager = create_text_input_manager({
-      type: "number",
-      val: resize_width,
-      min: 0,
-      mt: 0.5,
-      label: "Resize Width",
-      is_popover: true,
-      is_popover_edit_content: true,
-      is_compressed: true,
-      placeholder: "resize width",
-      is_disabled: () => is_disabled,
-      on_finish: (input) => {
-        set_resize_dimensions(input, null)
-        if (resize_height_text_input_manager?.val != resize_height) {
-          resize_height_text_input_manager.set_val(resize_height)
-        }
-      },
-    })
-    resize_height_text_input_manager = create_text_input_manager({
-      type: "number",
-      val: resize_height,
-      min: 0,
-      mt: 0.5,
-      label: "Resize Height",
-      is_popover: true,
-      is_popover_edit_content: true,
-      is_compressed: true,
-      placeholder: "resize height",
-      is_disabled: () => is_disabled,
-      on_finish: (input) => {
-        set_resize_dimensions(null, input)
-        if (resize_width_text_input_manager?.val != resize_width) {
-          resize_width_text_input_manager.set_val(resize_width)
-        }
-      },
-    })
-    resize_aspect_ratio_lock_button_manager = create_button_manager({
-      type: "outlined",
-      icon_sw: 30,
-      fixed_width: 20,
-      mt: 0.5,
-      support_icon: () => (is_lock_resize_aspect_ratio ? "linked" : "unlinked"),
-      text: () => `${is_lock_resize_aspect_ratio ? "Unlock" : "Lock"} Aspect Ratio`,
-      selected_type: () => (is_lock_resize_aspect_ratio ? "selected" : null),
-      is_disabled: () => is_disabled,
-      on_click: () => toggle_is_lock_resize_aspect_ratio(),
-    })
-    resize_image_button_manager = create_button_manager({
-      text: "Resize Image",
-      is_compressed: true,
-      mt: 0.5,
-      is_success_animation: true,
-      is_disabled: () => is_disabled || !resize_width || !resize_height,
-      on_click: () => main_image_transformer(),
-    })
-    // init_file() issue if called without document defined
-  }
-
-  init(config)
-
-  return {
-    id,
-    get file_picker_file() {
-      return file_picker_file
-    },
-    get image_sources() {
-      return image_sources
-    },
-    get image_source_index() {
-      return image_source_index
-    },
-    get selected_image_source() {
-      return selected_image_source
-    },
-    get screen_tab() {
-      return screen_tab
-    },
-    get crop_left() {
-      return crop_left
-    },
-    get crop_top() {
-      return crop_top
-    },
-    get crop_width() {
-      return crop_width
-    },
-    get crop_height() {
-      return crop_height
-    },
-    get is_disabled() {
-      return is_disabled
-    },
-    get current_image_width() {
-      return current_image_width
-    },
-    get current_image_height() {
-      return current_image_height
-    },
-    get image_pixels_crop_width() {
-      return image_pixels_crop_width
-    },
-    get image_pixels_crop_height() {
-      return image_pixels_crop_height
-    },
-    get current_image_ar() {
-      return current_image_ar
-    },
-    get crop_aspect_ratio() {
-      return crop_aspect_ratio
-    },
-    get is_lock_resize_aspect_ratio() {
-      return is_lock_resize_aspect_ratio
-    },
-    get resize_width() {
-      return resize_width
-    },
-    get resize_height() {
-      return resize_height
-    },
-    get file_size_data() {
-      return file_size_data
-    },
-    get mime_type_input() {
-      return mime_type_input
-    },
-    get file_size_kb() {
-      return file_size_kb
-    },
-    get file_name() {
-      return file_name
-    },
-    get file_name_derived() {
-      return file_name_derived
-    },
-    get file_name_derived_with_extension() {
-      return file_name_derived_with_extension
-    },
-    get ai_error_message() {
-      return ai_error_message
-    },
-    get file_input_manager() {
-      return file_input_manager
-    },
-    get screen_tab_filters_button_manager() {
-      return screen_tab_filters_button_manager
-    },
-    get screen_tab_crop_button_manager() {
-      return screen_tab_crop_button_manager
-    },
-    get screen_tab_resize_button_manager() {
-      return screen_tab_resize_button_manager
-    },
-    get screen_tab_ai_button_manager() {
-      return screen_tab_ai_button_manager
-    },
-    get screen_tab_file_button_manager() {
-      return screen_tab_file_button_manager
-    },
-    get undo_button_manager() {
-      return undo_button_manager
-    },
-    get redo_button_manager() {
-      return redo_button_manager
-    },
-    get clear_button_manager() {
-      return clear_button_manager
-    },
-    get finish_button_manager() {
-      return finish_button_manager
-    },
-    get is_show_img_slider() {
-      return is_show_img_slider
-    },
-    get filter_brightness_slider_manager() {
-      return filter_brightness_slider_manager
-    },
-    get filter_contrast_slider_manager() {
-      return filter_contrast_slider_manager
-    },
-    get filter_saturation_slider_manager() {
-      return filter_saturation_slider_manager
-    },
-    get filter_grayscale_slider_manager() {
-      return filter_grayscale_slider_manager
-    },
-    get filter_hue_slider_manager() {
-      return filter_hue_slider_manager
-    },
-    get filter_red_slider_manager() {
-      return filter_red_slider_manager
-    },
-    get filter_green_slider_manager() {
-      return filter_green_slider_manager
-    },
-    get filter_blue_slider_manager() {
-      return filter_blue_slider_manager
-    },
-    get filter_blur_slider_manager() {
-      return filter_blur_slider_manager
-    },
-    get filter_opacity_slider_manager() {
-      return filter_opacity_slider_manager
-    },
-    get filters_set_default_button_manager() {
-      return filters_set_default_button_manager
-    },
-    get filters_apply_filters_button_manager() {
-      return filters_apply_filters_button_manager
-    },
-    get crop_free_button_manager() {
-      return crop_free_button_manager
-    },
-    get crop_one_to_one_button_manager() {
-      return crop_one_to_one_button_manager
-    },
-    get crop_four_to_three_button_manager() {
-      return crop_four_to_three_button_manager
-    },
-    get crop_three_to_two_button_manager() {
-      return crop_three_to_two_button_manager
-    },
-    get crop_sixteen_to_nine_button_manager() {
-      return crop_sixteen_to_nine_button_manager
-    },
-    get crop_three_to_four_button_manager() {
-      return crop_three_to_four_button_manager
-    },
-    get crop_two_to_three_button_manager() {
-      return crop_two_to_three_button_manager
-    },
-    get crop_nine_to_sixteen_button_manager() {
-      return crop_nine_to_sixteen_button_manager
-    },
-    get crop_width_ratio_text_input_manager() {
-      return crop_width_ratio_text_input_manager
-    },
-    get crop_height_ratio_text_input_manager() {
-      return crop_height_ratio_text_input_manager
-    },
-    get crop_image_button_manager() {
-      return crop_image_button_manager
-    },
-    get crop_aspect_width_loc() {
-      return crop_aspect_width_loc
-    },
-    get crop_aspect_height_loc() {
-      return crop_aspect_height_loc
-    },
-    get file_name_text_input_manager() {
-      return file_name_text_input_manager
-    },
-    get mime_type_webp_button_manager() {
-      return mime_type_webp_button_manager
-    },
-    get mime_type_jpeg_button_manager() {
-      return mime_type_jpeg_button_manager
-    },
-    get mime_type_png_button_manager() {
-      return mime_type_png_button_manager
-    },
-    get download_image_button_manager() {
-      return download_image_button_manager
-    },
-    get set_file_changes_button_manager() {
-      return set_file_changes_button_manager
-    },
-    get shown_file_size_data() {
-      return shown_file_size_data
-    },
-    get file_quality_slider_manager() {
-      return file_quality_slider_manager
-    },
-    get ai_tab_dropdown_manager() {
-      return ai_tab_dropdown_manager
-    },
-    get ai_image_generator_is_loading() {
-      return ai_image_generator_is_loading
-    },
-    get ai_generate_image_from_text_text_input_manager() {
-      return ai_generate_image_from_text_text_input_manager
-    },
-    get ai_generate_image_images_prompt_file_input_manager() {
-      return ai_generate_image_images_prompt_file_input_manager
-    },
-    get ai_generate_image_include_workspace_in_images_prompt_checkbox_manager() {
-      return ai_generate_image_include_workspace_in_images_prompt_checkbox_manager
-    },
-    get ai_generate_image_from_text_button_manager() {
-      return ai_generate_image_from_text_button_manager
-    },
-    get ai_remove_bg_button_manager() {
-      return ai_remove_bg_button_manager
-    },
-    get ai_restore_resolution_button_manager() {
-      return ai_restore_resolution_button_manager
-    },
-    get ai_restore_face_button_manager() {
-      return ai_restore_face_button_manager
-    },
-    get resize_width_dropdown_manager() {
-      return resize_width_dropdown_manager
-    },
-    get resize_height_dropdown_manager() {
-      return resize_height_dropdown_manager
-    },
-    get resize_width_text_input_manager() {
-      return resize_width_text_input_manager
-    },
-    get resize_height_text_input_manager() {
-      return resize_height_text_input_manager
-    },
-    get resize_aspect_ratio_lock_button_manager() {
-      return resize_aspect_ratio_lock_button_manager
-    },
-    get resize_image_button_manager() {
-      return resize_image_button_manager
-    },
-    get is_popover() {
-      return is_popover
-    },
-    get popover_manager() {
-      return popover_manager
-    },
-    init,
-    init_file,
-    on_destroy,
-    set_screen_tab,
-    undo,
-    redo,
-    clear,
-    finish,
-    set_base_image,
-    apply_filters,
-    reset_filters,
-    main_image_transformer,
-    crop_on_up,
-    crop_on_move,
-    crop_on_down,
-    set_crop_box,
-    crop_image,
-    toggle_is_lock_resize_aspect_ratio,
-    set_resize_dimensions,
-    main_image_transformer,
-    file_input_change,
-    download_image,
-    set_file_from_inputs,
-    drop_handler,
-    set_is_popover,
-  }
-}