sveltekit-ui 1.1.74 → 1.1.76

package/src/lib/Components/ImageEditor/Image/index.svelte

@@ -1,104 +0,0 @@
-<script>
-  import FileInput from "$lib/Components/FileInput/index.svelte"
-  import ImageSlider from "$lib/Components/ImageSlider/index.svelte"
-  import CropBox from "./CropBox/index.svelte"
-  import { onMount } from "svelte"
-
-  let { manager } = $props()
-
-  onMount(() => {
-    manager?.set_base_image(manager?.selected_image_source)
-  })
-</script>
-
-<div
-  class="workspace_container"
-  class:workspace_bg={manager?.image_sources && manager?.image_sources.length > 0}
-  style="padding: {!manager?.image_sources ||
-  (Array.isArray(manager?.image_sources) && manager?.image_sources.length < 1)
-    ? 0
-    : '1rem'};"
-  ondrop={(e) => manager?.drop_handler(e)}
-  ondragover={(e) => e.preventDefault()}
-  role="application"
->
-  <div
-    class="edit_image_container"
-    id="{manager?.id}_edit_image_container_el"
-    class:display_none={!manager?.image_sources || manager?.image_sources.length < 1}
-  >
-    <div
-      class="canvas_container"
-      id="{manager?.id}_canvas_container_el"
-      class:hide={manager?.screen_tab == "ai" && manager?.is_show_img_slider && manager?.image_sources.length > 1}
-    >
-      <canvas id="{manager?.id}_canvas_el"></canvas>
-      {#if manager?.image_sources && manager?.image_sources.length > 0 && manager?.screen_tab == "crop" && manager?.crop_left > -1 && manager?.crop_top > -1 && manager?.crop_width > -1 && manager?.crop_height > -1}
-        <CropBox {manager} />
-      {/if}
-    </div>
-    {#if manager?.screen_tab == "ai" && manager?.is_show_img_slider && manager?.image_sources.length > 1}
-      <div style="height: 100%; max-height: min(50vh,40rem); width: 100%; z-index: 5;">
-        <ImageSlider
-          src1={manager?.image_sources?.[manager?.image_source_index]}
-          src2={manager?.image_sources?.[manager?.image_source_index + 1]}
-        />
-      </div>
-    {/if}
-  </div>
-</div>
-
-{#if !manager?.image_sources || (Array.isArray(manager?.image_sources) && manager?.image_sources.length < 1)}
-  <div class="upload_container">
-    <FileInput manager={manager?.file_input_manager} />
-  </div>
-{/if}
-
-<style>
-  .workspace_container {
-    border-radius: 1rem;
-  }
-  .workspace_bg {
-    box-shadow: 0 0 1px var(--g9-t);
-    background-image: linear-gradient(to right, var(--g18-t) 1px, transparent 1px),
-      linear-gradient(to bottom, var(--g18-t) 1px, transparent 1px);
-    background-size: 10px 10px;
-    background-position: -1px -1px;
-  }
-  .edit_image_container {
-    min-height: 30vh;
-    height: 36rem;
-    max-height: 65vh;
-    padding: 0;
-    line-height: 0;
-    display: grid;
-    place-items: center;
-  }
-  .canvas_container {
-    position: relative;
-  }
-  canvas {
-    object-fit: contain;
-    max-height: clamp(30vh, 36rem, 65vh);
-    max-width: 100%;
-    min-height: 100%;
-    min-width: 100%;
-    margin: auto;
-  }
-  .display_none {
-    display: none;
-  }
-  .hide {
-    width: 0;
-    height: 0;
-  }
-  .upload_container {
-    min-height: 30vh;
-    height: 38rem;
-    max-height: 65vh;
-    background-color: var(--g21-t);
-    border: 1px solid var(--g18-t);
-    border-radius: 3rem;
-    padding: 1rem;
-  }
-</style>

package/src/lib/Components/ImageEditor/Panels/AI/index.svelte

@@ -1,44 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import InfoBox from "$lib/Components/InfoBox/index.svelte"
-  import Dropdown from "$lib/Components/Dropdown/index.svelte"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-  import FileInput from "$lib/Components/FileInput/index.svelte"
-  import Checkbox from "$lib/Components/Checkbox/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<div>
-  <Dropdown manager={manager?.ai_tab_dropdown_manager} />
-  {#if manager?.ai_tab_dropdown_manager?.val == "image_generator"}
-    <div style="padding-top: .5rem;">
-      <TextInput manager={manager?.ai_generate_image_from_text_text_input_manager} />
-      <div style="display: flex; gap: 1rem;">
-        <FileInput manager={manager?.ai_generate_image_images_prompt_file_input_manager} />
-        {#if manager?.selected_image_source}
-          <Checkbox manager={manager?.ai_generate_image_include_workspace_in_images_prompt_checkbox_manager} />
-        {/if}
-      </div>
-      <Button manager={manager?.ai_generate_image_from_text_button_manager} />
-    </div>
-  {:else if manager?.ai_tab_dropdown_manager?.val == "remove_background"}
-    <Button manager={manager?.ai_remove_bg_button_manager} />
-  {:else if manager?.ai_tab_dropdown_manager?.val == "restore_resolution"}
-    <Button manager={manager?.ai_restore_resolution_button_manager} />
-  {:else if manager?.ai_tab_dropdown_manager?.val == "restore_face"}
-    <Button manager={manager?.ai_restore_face_button_manager} />
-  {/if}
-  <div>
-    <p class="helper_text">Expect around 15 seconds to 2 minutes of loading.</p>
-  </div>
-</div>
-<InfoBox message={manager?.ai_error_message} mt={1} />
-
-<style>
-  .helper_text {
-    margin: 0.5rem 1rem;
-    font-size: clamp(1.6rem, 3vw, 1.8rem);
-    color: var(--g8-t);
-  }
-</style>

package/src/lib/Components/ImageEditor/Panels/Crop/index.svelte

@@ -1,96 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import HorizScrollBox from "$lib/Components/HorizScrollBox/index.svelte"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<div class="container">
-  <div class="current_container">
-    <p class="cur_spacer">Width: {manager?.current_image_width ?? "-"}px</p>
-    <p class="cur_spacer">Height: {manager?.current_image_height ?? "-"}px</p>
-    <p class="cur_spacer">Crop Width: {manager?.image_pixels_crop_width ?? "-"}px</p>
-    <p class="cur_spacer">Crop Height: {manager?.image_pixels_crop_height ?? "-"}px</p>
-    <p>Aspect Ratio: {manager?.current_image_ar ?? "-"}</p>
-  </div>
-  <div class="horiz_scroll_container">
-    <div class="header_container">
-      <h3 class="header" style="color: {manager?.is_disabled ? 'var(--g9-t)' : 'var(--g3-t)'}">Aspect Ratio</h3>
-    </div>
-    <HorizScrollBox>
-      <Button manager={manager?.crop_free_button_manager} />
-      <Button manager={manager?.crop_one_to_one_button_manager} />
-      <Button manager={manager?.crop_four_to_three_button_manager} />
-      <Button manager={manager?.crop_three_to_two_button_manager} />
-      <Button manager={manager?.crop_sixteen_to_nine_button_manager} />
-      <Button manager={manager?.crop_three_to_four_button_manager} />
-      <Button manager={manager?.crop_two_to_three_button_manager} />
-      <Button manager={manager?.crop_nine_to_sixteen_button_manager} />
-    </HorizScrollBox>
-  </div>
-  <div class="custom_container">
-    <div style="width: 18rem;">
-      <TextInput manager={manager?.crop_width_ratio_text_input_manager} />
-    </div>
-    <div style="width: 18rem;">
-      <TextInput manager={manager?.crop_height_ratio_text_input_manager} />
-    </div>
-    <p class="proposed_ar" style="color: {manager?.is_disabled ? 'var(--g8-t)' : 'var(--primary-t)'};">
-      {manager?.crop_aspect_ratio ??
-        (manager?.image_pixels_crop_width && manager?.image_pixels_crop_height
-          ? parseFloat((manager?.image_pixels_crop_width / manager?.image_pixels_crop_height).toPrecision(3))
-          : null) ??
-        "-"} AR
-    </p>
-    <Button manager={manager?.crop_image_button_manager} />
-  </div>
-</div>
-
-<style>
-  .container {
-    padding: 0 1rem;
-    max-width: 100%;
-  }
-  .horiz_scroll_container {
-    display: flex;
-    flex: 1;
-    align-items: center;
-  }
-  .header_container {
-    display: flex;
-    align-items: center;
-    padding-right: 1rem;
-    margin: 0.5rem 0;
-    border-right: 2px solid var(--shadow3-t);
-  }
-  .header {
-    font-size: 1.6rem;
-  }
-  .current_container {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .current_container p {
-    color: var(--g10-t);
-  }
-  .cur_spacer {
-    border-right: 2px solid var(--shadow3-t);
-    padding-right: 1rem;
-    margin-right: 1rem;
-  }
-  .custom_container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
-  .proposed_ar {
-    width: 10rem;
-    height: 3.6rem;
-    text-align: center;
-    border: 1px solid var(--shadow3-t);
-    border-radius: 1rem;
-    padding: 0.8rem 0.3rem;
-    margin-top: 0.5rem;
-  }
-</style>

package/src/lib/Components/ImageEditor/Panels/File/QualityPicker/index.svelte

@@ -1,124 +0,0 @@
-<script>
-  import Slider from "$lib/Components/Slider/index.svelte"
-  import LoadingWheel from "$lib/Components/LoadingWheel/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-{#if manager?.mime_type_input == "image/png"}
-  <div class="png_container">
-    <p class="png_cur_num" style="color: {manager?.is_disabled ? 'var(--g9-t)' : 'var(--primary-t)'}">
-      {manager?.file_size_kb ?? "-"} KB
-    </p>
-    <h4 class="png_sub">File Size</h4>
-    <p style="color: var(--g8-t);">(PNGs do not allow custom quality)</p>
-  </div>
-{:else}
-  <div class="container">
-    <div class="chart_container">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 38" height="100%" width="100%">
-        <defs>
-          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-            <stop
-              offset="0%"
-              stop-color={manager?.is_disabled
-                ? "var(--g9-t)"
-                : "oklch(from var(--primary-t) calc(l - 3 * var(--l-shift-t)) c h)"}
-            />
-            <stop offset="100%" stop-color={manager?.is_disabled ? "var(--g9-t)" : "var(--primary-t)"} />
-          </linearGradient>
-        </defs>
-        <path
-          d={manager?.shown_file_size_data?.chart_path}
-          stroke-width="3"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          fill="none"
-          stroke="url(#gradient)"
-        />
-      </svg>
-      {#if manager?.shown_file_size_data?.max_file_size_kb}
-        <p class="max_num" style="color: {manager?.is_disabled ? 'var(--g11-t)' : 'var(--g8-t)'};">
-          {manager?.shown_file_size_data?.max_file_size_kb} KB
-        </p>
-      {/if}
-      {#if manager?.shown_file_size_data?.min_file_size_kb}
-        <p class="min_num" style="color: {manager?.is_disabled ? 'var(--g11-t)' : 'var(--g8-t)'};">
-          {manager?.shown_file_size_data?.min_file_size_kb} KB
-        </p>
-      {/if}
-      <p class="cur_num" style="color: {manager?.is_disabled ? 'var(--g10-t)' : 'var(--primary-t)'};">
-        {manager?.file_size_kb ?? "-"} KB
-      </p>
-      {#if manager?.selected_image_source && (!manager?.shown_file_size_data || manager?.shown_file_size_data?.is_loading)}
-        <div class="loading_container">
-          <div>
-            <LoadingWheel />
-          </div>
-        </div>
-      {/if}
-    </div>
-    <Slider manager={manager?.file_quality_slider_manager} />
-    <p class="subtitle" style="color: {manager?.is_disabled ? 'var(--g10-t)' : 'var(--g7-t)'};">
-      Quality/File Size Selector
-    </p>
-  </div>
-{/if}
-
-<style>
-  .container {
-    max-width: 28rem;
-    margin: auto;
-  }
-  .chart_container {
-    position: relative;
-  }
-  .max_num {
-    position: absolute;
-    top: 1rem;
-    right: 2.5rem;
-    color: var(--g5-t);
-  }
-  .min_num {
-    position: absolute;
-    bottom: 2.3rem;
-    left: 1rem;
-    color: var(--g5-t);
-  }
-  .cur_num {
-    position: absolute;
-    top: 2.5rem;
-    left: 6rem;
-    font-size: 3rem;
-    font-weight: 700;
-    color: var(--primary-t);
-  }
-  .png_container {
-    padding: 1rem;
-    width: 28rem;
-    text-align: center;
-    display: grid;
-    place-items: center;
-  }
-  .png_cur_num {
-    margin-bottom: 1rem;
-    font-size: 3rem;
-    font-weight: 700;
-  }
-  .png_sub {
-    color: var(--g6-t);
-    margin: 0;
-  }
-  .loading_container {
-    position: absolute;
-    top: 2rem;
-    left: 9rem;
-  }
-  .loading_container div {
-    aspect-ratio: 1;
-    width: 8rem;
-  }
-  .subtitle {
-    text-align: center;
-  }
-</style>

package/src/lib/Components/ImageEditor/Panels/File/index.svelte

@@ -1,74 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-  import InfoBox from "$lib/Components/InfoBox/index.svelte"
-  import QualityPicker from "./QualityPicker/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<div class="info_container">
-  <p class="info_spacer">Width: {manager?.current_image_width ?? "-"}px</p>
-  <p class="info_spacer">Height: {manager?.current_image_height ?? "-"}px</p>
-  <p class="info_spacer">Size: {manager?.file_size_kb ?? "-"}KB</p>
-  <p>{manager?.file_name_derived_with_extension}</p>
-</div>
-<div class="container">
-  <div class="box_one">
-    <div>
-      <TextInput manager={manager?.file_name_text_input_manager} />
-    </div>
-    <div class="mime_type_buttons_container">
-      <Button manager={manager?.mime_type_webp_button_manager} />
-      <Button manager={manager?.mime_type_jpeg_button_manager} />
-      <Button manager={manager?.mime_type_png_button_manager} />
-    </div>
-    <div class="buttons_container">
-      <Button manager={manager?.download_image_button_manager} />
-      <Button manager={manager?.set_file_changes_button_manager} />
-    </div>
-    <InfoBox message={manager?.error_message} />
-  </div>
-  <div>
-    <QualityPicker {manager} />
-  </div>
-</div>
-
-<style>
-  .info_container {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .info_container p {
-    color: var(--g10-t);
-  }
-  .info_spacer {
-    border-right: 2px solid var(--shadow3-t);
-    padding-right: 1rem;
-    margin-right: 1rem;
-    max-height: 2.5rem;
-  }
-  .container {
-    max-width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
-  .box_one {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 30rem;
-  }
-  .mime_type_buttons_container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1rem;
-  }
-  .buttons_container {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1rem;
-    margin-top: 1rem;
-  }
-</style>

package/src/lib/Components/ImageEditor/Panels/Filters/index.svelte

@@ -1,46 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import Slider from "$lib/Components/Slider/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<div class="filters_container">
-  <div class="filter_box">
-    <Slider manager={manager?.filter_brightness_slider_manager} />
-    <Slider manager={manager?.filter_contrast_slider_manager} />
-    <Slider manager={manager?.filter_saturation_slider_manager} />
-    <Slider manager={manager?.filter_grayscale_slider_manager} />
-  </div>
-  <div class="filter_box">
-    <Slider manager={manager?.filter_hue_slider_manager} />
-    <Slider manager={manager?.filter_red_slider_manager} />
-    <Slider manager={manager?.filter_green_slider_manager} />
-    <Slider manager={manager?.filter_blue_slider_manager} />
-  </div>
-  <div class="filter_box">
-    <Slider manager={manager?.filter_blur_slider_manager} />
-    <Slider manager={manager?.filter_opacity_slider_manager} />
-    <p style="margin: 1rem 0;">Some filters are not supported by some browsers</p>
-    <div class="buttons_box">
-      <Button manager={manager?.filters_set_default_button_manager} />
-      <Button manager={manager?.filters_apply_filters_button_manager} />
-    </div>
-  </div>
-</div>
-
-<style>
-  .filters_container {
-    width: 100%;
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(clamp(20%, 28rem, 100%), 1fr));
-    max-height: 40rem;
-    overflow-y: scroll;
-  }
-  .buttons_box {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-  }
-</style>

package/src/lib/Components/ImageEditor/Panels/Resize/index.svelte

@@ -1,58 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import TextInput from "$lib/Components/TextInput/index.svelte"
-  import Dropdown from "$lib/Components/Dropdown/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-<div class="container">
-  <div class="current_container">
-    <p class="cur_spacer">Width: {manager?.current_image_width ?? "-"}px</p>
-    <p class="cur_spacer">Height: {manager?.current_image_height ?? "-"}px</p>
-    <p>Aspect Ratio: {manager?.current_image_ar ?? "-"}</p>
-  </div>
-  <div class="horiz_select_container">
-    <Dropdown manager={manager?.resize_width_dropdown_manager} />
-    <Dropdown manager={manager?.resize_height_dropdown_manager} />
-    <div class="custom_container">
-      <div style="width: 18rem">
-        <TextInput manager={manager?.resize_width_text_input_manager} />
-      </div>
-      <div style="width: 18rem">
-        <TextInput manager={manager?.resize_height_text_input_manager} />
-      </div>
-      <Button manager={manager?.resize_aspect_ratio_lock_button_manager} />
-      <Button manager={manager?.resize_image_button_manager} />
-    </div>
-  </div>
-</div>
-
-<style>
-  .container {
-    padding: 0 1rem;
-    max-width: 100%;
-  }
-  .current_container {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .current_container p {
-    color: var(--g10-t);
-  }
-  .cur_spacer {
-    border-right: 2px solid var(--shadow3-t);
-    padding-right: 1rem;
-    margin-right: 1rem;
-  }
-  .horiz_select_container {
-    max-width: 100%;
-  }
-  .custom_container {
-    display: flex;
-    flex-wrap: wrap;
-    flex: 0;
-    align-items: center;
-    gap: 1rem;
-  }
-</style>

package/src/lib/Components/ImageEditor/index.svelte

@@ -1,93 +0,0 @@
-<script>
-  import Button from "$lib/Components/Button/index.svelte"
-  import Popover from "$lib/Components/Popover/index.svelte"
-  import HorizScrollBox from "$lib/Components/HorizScrollBox/index.svelte"
-  import Image from "./Image/index.svelte"
-  import FiltersPanel from "./Panels/Filters/index.svelte"
-  import CropPanel from "./Panels/Crop/index.svelte"
-  import ResizePanel from "./Panels/Resize/index.svelte"
-  import AIPanel from "./Panels/AI/index.svelte"
-  import FilePanel from "./Panels/File/index.svelte"
-  import { onDestroy } from "svelte"
-  import { browser } from "$app/environment"
-
-  let { manager } = $props()
-
-  onDestroy(() => {
-    if (browser && typeof manager?.on_destroy == "function") {
-      manager?.on_destroy()
-    }
-  })
-</script>
-
-{#snippet image_input()}
-  <div style="margin: 0;">
-    <div class="main_buttons_container">
-      <HorizScrollBox>
-        <Button manager={manager?.screen_tab_filters_button_manager} />
-        <Button manager={manager?.screen_tab_crop_button_manager} />
-        <Button manager={manager?.screen_tab_resize_button_manager} />
-        <Button manager={manager?.screen_tab_ai_button_manager} />
-        <Button manager={manager?.screen_tab_file_button_manager} />
-      </HorizScrollBox>
-      <div>
-        <HorizScrollBox>
-          <Button manager={manager?.undo_button_manager} />
-          <Button manager={manager?.redo_button_manager} />
-          <Button manager={manager?.clear_button_manager} />
-          {#if manager?.is_popover}
-            <Button manager={manager?.finish_button_manager} />
-          {/if}
-        </HorizScrollBox>
-      </div>
-    </div>
-    <div class="panel_container">
-      {#if manager?.screen_tab == "filters"}
-        <FiltersPanel {manager} />
-      {:else if manager?.screen_tab == "crop"}
-        <CropPanel {manager} />
-      {:else if manager?.screen_tab == "resize"}
-        <ResizePanel {manager} />
-      {:else if manager?.screen_tab == "ai"}
-        <AIPanel {manager} />
-      {:else if manager?.screen_tab == "file"}
-        <FilePanel {manager} />
-      {:else}
-        <p>Tab not found</p>
-      {/if}
-    </div>
-    <Image {manager} />
-  </div>
-{/snippet}
-
-{#if !manager?.is_popover}
-  {@render image_input()}
-{:else}
-  <Popover manager={manager.popover_manager}>
-    {#snippet content()}
-      <div>
-        {@render image_input()}
-      </div>
-    {/snippet}
-  </Popover>
-{/if}
-
-<style>
-  .panel_container {
-    min-height: 22rem;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-  .main_buttons_container {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-  @media (min-width: 900px) {
-    .main_buttons_container {
-      flex: 1;
-      flex-direction: row;
-      justify-content: space-between;
-    }
-  }
-</style>