sveltekit-ui 1.1.16 → 1.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",

package/dist/Components/ArrowToggle/index.svelte

@@ -1,62 +0,0 @@
-<script>
-  let { direction = "up", is_open = false, color_one = "var(--g6-t)" } = $props()
-
-  const map = { left: 270, right: 90, down: 180 }
-  let r_deg = $derived(map?.[direction] ? map?.[direction] : 0)
-</script>
-
-<div class="side_bar_toggle" style="--r_deg: {r_deg}deg; --color_one: {color_one};">
-  <div class="arrow_container">
-    <span class="bar_base" class:left_line={is_open} class:left_line_opp={!is_open}></span>
-    <span class="bar_base right_line" class:right_line={is_open} class:right_line_opp={!is_open}></span>
-  </div>
-</div>
-
-<style>
-  .side_bar_toggle {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    outline: none;
-    padding: 0;
-    pointer-events: initial;
-    width: 1.2rem;
-    transform: rotate(var(--r_deg));
-  }
-  .arrow_container {
-    position: relative;
-    height: 1rem;
-  }
-  .bar_base {
-    background: linear-gradient(to left, var(--color_one) 50%, var(--g6-t) 50%) right;
-    background-size: 200%;
-    background-position: left;
-    position: absolute;
-    width: 0.8rem;
-    border-radius: 0.1rem;
-    transition: 0.4s ease;
-    height: 0.2rem;
-    transform-origin: center right;
-    transform: rotate(0);
-    left: 0;
-  }
-  .left_line {
-    top: 0;
-    transform-origin: center right;
-    transform: translateX(0.05rem) rotate(-45deg);
-  }
-  .left_line_opp {
-    top: calc(100% - 0.1rem);
-    background-position: right;
-    transform: translateX(0.05rem) rotate(45deg);
-  }
-  .right_line {
-    top: 0;
-    transform: translateX(-0.05rem) rotate(225deg);
-  }
-  .right_line_opp {
-    top: calc(100% - 0.1rem);
-    background-position: right;
-    transform: translateX(-0.05rem) rotate(135deg);
-  }
-</style>

package/dist/Components/Attachment/index.svelte

@@ -1,77 +0,0 @@
-<script>
-  import Button from "../Button/index.svelte"
-  import Popover from "../Popover/index.svelte"
-  import Image from "../Image/index.svelte"
-  import Audio from "../Audio/index.svelte"
-  import Json from "../Json/index.svelte"
-  import Icon from "../Icon/index.svelte"
-
-  let { manager } = $props()
-</script>
-
-{#snippet display_content()}
-  {#if ["image/webp", "image/jpeg", "image/png", "image/gif"].includes(manager?.val_prepped?.content_type)}
-    <Image manager={manager?.val_prepped?.image_manager} />
-  {:else if ["audio/mpeg", "audio/wav", "audio/ogg", "audio/aac"].includes(manager?.val_prepped?.content_type)}
-    <Audio manager={manager?.val_prepped?.audio_manager} />
-  {:else if ["application/json"].includes(manager?.val_prepped?.content_type)}
-    <Json manager={manager?.val_prepped?.json_manager} />
-  {/if}
-{/snippet}
-
-<div class="container">
-  <div style="display: flex; flex: 1; gap: 1rem; justify-content: space-between;">
-    <div style="display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0;">
-      <Icon manager={manager?.val_prepped?.icon_manager} />
-      <div class="text_container">
-        <p class="file_name">{manager?.val_prepped?.name}</p>
-        <p style="margin-top: 0; line-height: 1.4rem; color: var(--g10-t); font-size: 1.2rem;">
-          {manager?.val_prepped?.content_type}
-          <span style="color: var(--g6-t); font-size: 1.2rem; margin-left: 1rem;"
-            >{manager?.val_prepped?.content
-              ? `${Math.round(((manager?.val_prepped?.content.length * 3) / 4) * 0.001)}KB`
-              : ""}</span
-          >
-        </p>
-      </div>
-    </div>
-    <div style="display: flex; gap: .5rem; flex-shrink: 0;">
-      <Button manager={manager?.download_button_manager} />
-      {#if ["image/webp", "image/jpeg", "image/png", "image/gif", "audio/mpeg", "audio/wav", "audio/ogg", "audio/aac", "application/json"].includes(manager?.val_prepped?.content_type)}
-        <Button manager={manager?.show_content_button_manager} />
-      {/if}
-    </div>
-  </div>
-  {#if manager?.is_show_content}
-    {@render display_content()}
-  {/if}
-</div>
-
-<Popover manager={manager?.show_content_popover_manager}>
-  {#snippet content()}
-    {@render display_content()}
-  {/snippet}
-</Popover>
-
-<style>
-  .container {
-    border-radius: 1.5rem;
-    padding: 0.5rem 1rem;
-    border: 1px solid var(--shadow5-t);
-  }
-  .file_name {
-    margin: 0;
-    line-height: 1.4rem;
-    font-weight: bold;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-  }
-  .text_container {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    min-width: 0;
-  }
-</style>

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

@@ -1,119 +0,0 @@
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_image_manager } from "../Image/index.svelte.js"
-import { create_audio_manager } from "../Audio/index.svelte.js"
-import { create_json_manager } from "../Json/index.svelte.js"
-import { create_icon_manager } from "../Icon/index.svelte.js"
-import { set_closurable } from "../../client/index.js"
-
-export function create_attachment_manager(config) {
-  let val_prepped = $state(null)
-  let show_content_popover_manager = $state(null)
-  let show_content_button_manager = $state(null)
-  let download_button_manager = $state(null)
-  let is_show_content = $derived(set_closurable(config?.is_show_content, false))
-
-  function set_val_prepped(input) {
-    if (!input || typeof input != "object" || Array.isArray(input)) {
-      val_prepped = null
-      return
-    }
-    let val_prepped_loc = {
-      ...input,
-    }
-    if (["image/webp", "image/jpeg", "image/png", "image/gif"].includes(input?.content_type)) {
-      val_prepped_loc.image_manager = create_image_manager({
-        src: `data:${input.content_type};base64,${input.content}`,
-        mime_type: input?.content_type,
-        display_max_height: 280,
-        display_max_width: 380,
-        bg_img_blur: 20,
-        bg_img_opacity: 0.01,
-      })
-      val_prepped_loc.icon_manager = create_icon_manager({
-        icon_id: "photo",
-        sw: 30,
-      })
-    } else if (["audio/mpeg", "audio/wav", "audio/ogg", "audio/aac"].includes(input?.content_type)) {
-      val_prepped_loc.audio_manager = create_audio_manager({
-        // ui_type: "short",
-        src: `data:${input.content_type};base64,${input.content}`,
-        type: input?.content_type,
-      })
-      val_prepped_loc.icon_manager = create_icon_manager({
-        icon_id: "file", // tbd
-        sw: 30,
-      })
-    } else if (["application/json"].includes(input?.content_type)) {
-      const decoded_content = atob(input.content)
-      const extracted_json = JSON.parse(decoded_content)
-      val_prepped_loc.json_manager = create_json_manager({
-        is_edit_mode: false,
-        is_popover: false,
-        is_show_buttons: true,
-        val: extracted_json,
-      })
-      val_prepped_loc.icon_manager = create_icon_manager({
-        icon_id: "file", // tbd
-        sw: 30,
-      })
-    } else {
-      val_prepped_loc.icon_manager = create_icon_manager({
-        icon_id: "file",
-        sw: 30,
-      })
-    }
-    val_prepped = val_prepped_loc
-  }
-
-  function download_attachment(input) {
-    const data_url = `data:${input.content_type};base64,${input.content}`
-    const link = document.createElement("a")
-    link.href = data_url
-    link.download = input.name
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
-
-  function init(config) {
-    set_val_prepped(config?.attachment)
-    show_content_popover_manager = create_popover_manager({
-      header: "Attachment",
-      target_width: 400,
-      target_height: 340,
-    })
-    download_button_manager = create_button_manager({
-      type: "outlined",
-      is_uniform: true,
-      support_icon: "download",
-      on_click: () => download_attachment(config?.attachment),
-    })
-    show_content_button_manager = create_button_manager({
-      type: "outlined",
-      text: "View",
-      is_compressed: true,
-      popover_target: () => `popover_${show_content_popover_manager?.id}`,
-    })
-  }
-
-  init(config)
-
-  return {
-    get val_prepped() {
-      return val_prepped
-    },
-    get show_content_popover_manager() {
-      return show_content_popover_manager
-    },
-    get show_content_button_manager() {
-      return show_content_button_manager
-    },
-    get download_button_manager() {
-      return download_button_manager
-    },
-    get is_show_content() {
-      return is_show_content
-    },
-  }
-}

package/dist/Components/AudioEditor/index.svelte

@@ -1,252 +0,0 @@
-<script>
-  import Popover from "../Popover/index.svelte"
-  import Button from "../Button/index.svelte"
-  import InfoBox from "../InfoBox/index.svelte"
-  import HorizScrollBox from "../HorizScrollBox/index.svelte"
-  import LabeledItem from "../LabeledItem/index.svelte"
-  import Spacer from "../Spacer/index.svelte"
-  import Audio from "../Audio/index.svelte"
-  import FileInput from "../FileInput/index.svelte"
-  import TextInput from "../TextInput/index.svelte"
-  import Dropdown from "../Dropdown/index.svelte"
-  import StoragePicker from "../StoragePicker/index.svelte"
-
-  let { manager, extra_buttons } = $props()
-</script>
-
-{#snippet audio_input()}
-  <div style="padding-bottom: 20rem;">
-    {#if manager?.account?.id}
-      <p style="margin-bottom: 1rem;">
-        Generated files will be saved to {manager?.account?.name} ({manager?.account?.id})'s temporary storage
-      </p>
-    {:else}
-      <p>No account being used</p>
-    {/if}
-    <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
-      <Button manager={manager?.clear_button_manager} />
-      <div>
-        <Button manager={manager?.seed_from_input_popover_button_manager} />
-        <Popover manager={manager?.seed_from_input_popover_manager}>
-          {#snippet content()}
-            <StoragePicker manager={manager?.seed_audio_storage_picker_manager} />
-          {/snippet}
-        </Popover>
-      </div>
-      {#if extra_buttons}
-        {@render extra_buttons()}
-      {/if}
-      <Button manager={manager?.generate_audio_changes_button_manager} />
-    </div>
-    {#if manager?.is_loading_generate_audio && manager?.is_text_to_audio && manager?.text_to_audio_text_input_manager && manager?.text_to_audio_text_input_manager.length > 10}
-      <p>
-        This should take around {manager?.text_to_audio_time_in_minutes} minutes.
-      </p>
-    {/if}
-    <InfoBox message={manager?.error_message} mt={0.5} mb={0.5} />
-    {#if manager?.generated_audio_file_obj}
-      <div class="card" style="margin: 1rem 0;">
-        <h3>Generated Audio</h3>
-        <p>type: {manager?.generated_audio_file_obj?.type}</p>
-        <p>file name: {manager?.generated_audio_file_obj?.file_name}</p>
-        <p>size: {manager?.generated_audio_file_obj?.size_kb}KB</p>
-        <p style="font-size: 1.2rem; color: var(--g10-t); margin-bottom: 1rem">
-          Note: Currently, our interface does not support extracting cover images directly from the metadata of audio
-          sources. We may add this feature in the future. At present, displaying images in the Audio component requires
-          a separate image URL. However, if a cover image is embedded in the audio file's metadata, it can still be
-          viewed in other applications, such as Apple Finder.
-        </p>
-        <Audio manager={manager?.audio_manager} />
-        <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem;">
-          <Button manager={manager?.clear_generated_audio_button_manager} />
-          <Button manager={manager?.download_audio_file_button_manager} />
-          <Button manager={manager?.finish_button_manager} />
-        </div>
-      </div>
-    {/if}
-    <Spacer mt={1} mb={1} />
-    <LabeledItem
-      is_disabled={manager?.is_loading_generate_audio || manager?.is_disabled}
-      label={!manager?.audio_file_obj?.src && manager?.is_text_to_audio ? "Audio Generation" : "Audio File"}
-      mt={1}
-      content_min_width={35}
-      content_max_width={60}
-    >
-      {#if !manager?.is_text_to_audio}
-        <div style="display: flex; margin-bottom: 1rem;">
-          {#if !manager?.audio_file_obj?.src}
-            <Button manager={manager?.use_text_to_audio_button_manager} />
-            <Button manager={manager?.select_file_from_storage_button_manager} />
-          {/if}
-        </div>
-        <StoragePicker manager={manager?.audio_storage_picker_manager} />
-      {:else}
-        <Button manager={manager?.use_mp3_file_button_manager} />
-        <TextInput manager={manager?.text_to_audio_text_input_manager} />
-      {/if}
-    </LabeledItem>
-    {#if manager?.is_text_to_audio}
-      <LabeledItem
-        label="Voice"
-        content_min_width={35}
-        content_max_width={60}
-        mt={1}
-        is_disabled={manager?.title_text_input_manager?.is_disabled}
-      >
-        {#if Array.isArray(manager?.voice_options) && manager?.voice_options.length > 0}
-          <div style="display: flex; gap: 1rem;">
-            <div>
-              <p>{manager?.voice_options.find((h) => h?.id == (manager?.voice_id ?? "alloy"))?.name ?? "-"}</p>
-              <Button manager={manager?.edit_voice_button_manager} />
-            </div>
-            <Audio
-              manager={manager?.voice_options.find((h) => h?.id == (manager?.voice_id ?? "alloy"))?.audio_manager}
-            />
-          </div>
-          <Popover manager={manager?.edit_voice_popover_manager}>
-            {#snippet content()}
-              <div>
-                {#each manager?.voice_options as voice, i}
-                  <div style="padding: 1rem;">
-                    <div style="display: flex; justify-content: space-between; gap: 1rem;">
-                      <p>{voice?.name}{voice?.id == "alloy" ? "(default)" : ""}</p>
-                      {#if Array.isArray(voice?.labels) && voice.labels.length > 0}
-                        <HorizScrollBox>
-                          <div style="display: flex; gap: .5rem;">
-                            {#each voice?.labels as label}
-                              <div
-                                style="border: 1px solid var(--shadow5-t); border-radius: .5rem; padding: .2rem .4rem"
-                              >
-                                <p style="font-size: 1.4rem; white-space: nowrap;">{label}</p>
-                              </div>
-                            {/each}
-                          </div>
-                        </HorizScrollBox>
-                      {/if}
-                    </div>
-                    <div style="display: flex; justify-content: space-between; margin-top: .5rem;">
-                      <Audio manager={voice?.audio_manager} />
-                      <Button manager={voice?.select_button_manager} />
-                    </div>
-                  </div>
-                  {#if i < manager?.voice_options.length - 1}
-                    <Spacer />
-                  {/if}
-                {/each}
-              </div>
-            {/snippet}
-          </Popover>
-        {:else}
-          No voice options found
-        {/if}
-      </LabeledItem>
-    {/if}
-    <LabeledItem
-      is_disabled={manager?.is_loading_generate_audio || manager?.is_disabled}
-      label="File Name"
-      mt={1}
-      content_min_width={35}
-      content_max_width={60}
-    >
-      <TextInput manager={manager?.file_name_text_input_manager} />
-    </LabeledItem>
-    <Spacer mt={1} />
-    <h3 style="margin: 0; margin-top: 1rem; font-size: 1.6rem;">Metatags (optional)</h3>
-    <LabeledItem
-      label="Title"
-      content_min_width={35}
-      content_max_width={60}
-      mt={1}
-      is_disabled={manager?.title_text_input_manager?.is_disabled}
-    >
-      <TextInput manager={manager?.title_text_input_manager} />
-    </LabeledItem>
-    <LabeledItem
-      label="Album Title"
-      content_min_width={35}
-      content_max_width={60}
-      mt={1}
-      is_disabled={manager?.album_title_text_input_manager?.is_disabled}
-    >
-      <TextInput manager={manager?.album_title_text_input_manager} />
-    </LabeledItem>
-    <LabeledItem
-      label="Cover Image"
-      content_min_width={35}
-      content_max_width={60}
-      mt={1}
-      is_disabled={manager?.image_storage_picker_manager?.is_disabled}
-    >
-      <StoragePicker manager={manager?.image_storage_picker_manager} />
-      <TextInput manager={manager?.image_description_text_input_manager} />
-    </LabeledItem>
-    <LabeledItem
-      label="Artist"
-      content_min_width={35}
-      content_max_width={60}
-      mt={1}
-      is_disabled={manager?.artist_text_input_manager?.is_disabled}
-    >
-      <TextInput manager={manager?.artist_text_input_manager} />
-    </LabeledItem>
-    <LabeledItem
-      label="Lyrics"
-      content_min_width={35}
-      content_max_width={60}
-      mt={1}
-      is_disabled={manager?.lyrics_text_input_manager?.is_disabled}
-    >
-      <TextInput manager={manager?.lyrics_text_input_manager} />
-    </LabeledItem>
-    <LabeledItem
-      label="Release Year"
-      content_min_width={35}
-      content_max_width={60}
-      mt={1}
-      is_disabled={manager?.release_year_text_input_manager?.is_disabled}
-    >
-      <TextInput manager={manager?.release_year_text_input_manager} />
-    </LabeledItem>
-    <LabeledItem
-      label="Language"
-      content_min_width={35}
-      content_max_width={60}
-      mt={1}
-      is_disabled={manager?.language_dropdown_manager?.is_disabled}
-    >
-      <Dropdown manager={manager?.language_dropdown_manager} />
-    </LabeledItem>
-    <Spacer mt={1} mb={1} />
-    <p style="font-size: 1.4rem; color: var(--g8-t); margin-bottom: .5rem;">Additional Metatags</p>
-    <Dropdown manager={manager?.additional_metatags_dropdown_manager} />
-    {#if Array.isArray(manager?.additional_tag_keys_ordered) && manager?.additional_tag_keys_ordered.length > 0}
-      {#each manager?.additional_tag_keys_ordered as tag_key}
-        <LabeledItem
-          is_disabled={manager?.is_loading_generate_audio || manager?.is_disabled}
-          label={manager?.additional_tags_input_prepped?.[tag_key]?.name}
-          mt={1}
-          content_min_width={35}
-          content_max_width={60}
-        >
-          {#if manager?.additional_tags_input_prepped?.[tag_key]?.key == "tbd"}
-            <!-- tbd -->
-          {:else}
-            <TextInput manager={manager?.additional_tags_input_prepped?.[tag_key]?.text_input_manager} />
-          {/if}
-        </LabeledItem>
-      {/each}
-    {/if}
-  </div>
-{/snippet}
-
-{#if !manager?.is_popover}
-  {@render audio_input()}
-{:else}
-  <Popover manager={manager.popover_manager}>
-    {#snippet content()}
-      <div>
-        {@render audio_input()}
-      </div>
-    {/snippet}
-  </Popover>
-{/if}