sveltekit-ui 1.1.17 → 1.1.19

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

@@ -0,0 +1,104 @@
+<script>
+  import FileInput from "../../FileInput/index.svelte"
+  import ImageSlider from "../../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/dist/Components/ImageEditor/Panels/AI/index.svelte

@@ -0,0 +1,44 @@
+<script>
+  import Button from "../../../Button/index.svelte"
+  import InfoBox from "../../../InfoBox/index.svelte"
+  import Dropdown from "../../../Dropdown/index.svelte"
+  import TextInput from "../../../TextInput/index.svelte"
+  import FileInput from "../../../FileInput/index.svelte"
+  import Checkbox from "../../../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/dist/Components/ImageEditor/Panels/Crop/index.svelte

@@ -0,0 +1,96 @@
+<script>
+  import Button from "../../../Button/index.svelte"
+  import HorizScrollBox from "../../../HorizScrollBox/index.svelte"
+  import TextInput from "../../../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/dist/Components/ImageEditor/Panels/File/QualityPicker/index.svelte

@@ -0,0 +1,124 @@
+<script>
+  import Slider from "../../../../Slider/index.svelte"
+  import LoadingWheel from "../../../../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/dist/Components/ImageEditor/Panels/File/index.svelte

@@ -0,0 +1,74 @@
+<script>
+  import Button from "../../../Button/index.svelte"
+  import TextInput from "../../../TextInput/index.svelte"
+  import InfoBox from "../../../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/dist/Components/ImageEditor/Panels/Filters/index.svelte

@@ -0,0 +1,46 @@
+<script>
+  import Button from "../../../Button/index.svelte"
+  import Slider from "../../../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/dist/Components/ImageEditor/Panels/Resize/index.svelte

@@ -0,0 +1,58 @@
+<script>
+  import Button from "../../../Button/index.svelte"
+  import TextInput from "../../../TextInput/index.svelte"
+  import Dropdown from "../../../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/dist/Components/ImageEditor/index.svelte

@@ -0,0 +1,93 @@
+<script>
+  import Button from "../Button/index.svelte"
+  import Popover from "../Popover/index.svelte"
+  import HorizScrollBox from "../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>