sveltekit-ui 1.0.0

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

@@ -0,0 +1,165 @@
+<script>
+  let { manager } = $props()
+</script>
+
+<svelte:window
+  onmouseup={(e) => manager?.crop_on_up(e)}
+  onlostpointercapture={(e) => manager?.crop_on_up(e)}
+  ontouchend={(e) => manager?.crop_on_up(e)}
+  onmousemove={(e) => manager?.crop_on_move(e)}
+  ontouchmove={(e) => manager?.crop_on_move(e)}
+/>
+
+<div
+  class="crop_square"
+  style="left: {manager?.crop_left}px; top: {manager?.crop_top}px; width: {manager?.crop_width}px; height: {manager?.crop_height}px"
+>
+  <div class="vert_lines" style="z-index: 0;"></div>
+  <div class="horiz_lines" style="z-index: 0;"></div>
+  <div
+    class="crop_area"
+    style="cursor: move;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "main")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "main")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 0; top: 0; cursor: nwse-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "tl")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "tl")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 50%; top: 0; cursor: ns-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "t")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "t")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 100%; top: 0; cursor: nesw-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "tr")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "tr")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 0; top: 100%; cursor: nesw-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "bl")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "bl")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 50%; top: 100%; cursor: ns-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "b")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "b")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 100%; top: 100%; cursor: nwse-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "br")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "br")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 0; top: 50%; cursor: ew-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "l")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "l")}
+  ></div>
+  <div
+    class="drag_dot"
+    style="left: 100%; top: 50%; cursor: ew-resize;"
+    role="button"
+    tabindex="0"
+    onmousedown={(e) => manager?.crop_on_down(e, "r")}
+    ontouchstart={(e) => manager?.crop_on_down(e, "r")}
+  ></div>
+</div>
+
+<style>
+  .crop_square {
+    position: absolute;
+    cursor: pointer;
+  }
+  .crop_area {
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    left: -2px;
+    right: -2px;
+    background: linear-gradient(90deg, #eef 50%, #445 50%), linear-gradient(90deg, #eef 50%, #445 50%),
+      linear-gradient(0deg, #eef 50%, #445 50%), linear-gradient(0deg, #eef 50%, #445 50%);
+    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+    background-size:
+      10px 2px,
+      10px 2px,
+      2px 10px,
+      2px 10px;
+    animation: border-dance 20s infinite linear;
+  }
+  @keyframes border-dance {
+    0% {
+      background-position:
+        0 0,
+        100% 100%,
+        0 100%,
+        100% 0;
+    }
+    100% {
+      background-position:
+        100% 0,
+        0 100%,
+        0 0,
+        100% 100%;
+    }
+  }
+  .vert_lines {
+    position: absolute;
+    left: 33%;
+    right: 33%;
+    top: 0;
+    bottom: 0;
+    border-left: 2px dotted #eef;
+    border-right: 2px dotted #eef;
+  }
+  .horiz_lines {
+    position: absolute;
+    top: 33%;
+    bottom: 33%;
+    left: 0;
+    right: 0;
+    border-top: 2px dotted #eef;
+    border-bottom: 2px dotted #eef;
+  }
+  .drag_dot {
+    position: absolute;
+    z-index: 3;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: linear-gradient(-45deg, var(--g24), var(--g20));
+    box-shadow:
+      0.1rem 0.1rem 0.2rem var(--shadow3),
+      -0.1rem -0.1rem 0.2rem var(--shadow2),
+      inset 0.2rem 0.2rem 0.4rem var(--shadow2),
+      inset -0.2rem -0.2rem 0.4rem var(--shadow2);
+    transform: translate(-50%, -50%);
+  }
+  .drag_dot:hover {
+    background-color: #556;
+  }
+</style>

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

@@ -0,0 +1,104 @@
+<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

@@ -0,0 +1,36 @@
+<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"
+
+  let { manager } = $props()
+</script>
+
+<div>
+  <Dropdown manager={manager?.ai_tab_dropdown_manager} />
+  {#if manager?.ai_tab_dropdown_manager?.val == "text_to_image"}
+    <div style="padding-top: .5rem;">
+      <TextInput manager={manager?.ai_generate_image_from_text_text_input_manager} />
+      <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

@@ -0,0 +1,96 @@
+<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

@@ -0,0 +1,124 @@
+<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

@@ -0,0 +1,74 @@
+<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

@@ -0,0 +1,46 @@
+<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>