sveltekit-ui 1.1.74 → 1.1.75

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

@@ -286,6 +286,13 @@ export function create_audio_editor_manager(config) {
   let clear_generated_audio_button_manager = $state(null)
   let additional_metatags_dropdown_manager = $state(null)
 
+  let is_destroyed = false
+  let seed_version = 0
+  let generation_version = 0
+  let seed_abort_controller = null
+  let generation_abort_controller = null
+  let success_timeout_id = null
+
   // actually we'll prob do this server stuff diff like call config?.fetch_audio_read_tags() and handle in parent
   let api_prefix = $derived(set_closurable(config?.api_prefix, "https://www.contibase.com/api/v1"))
   let storage_src = $derived(
@@ -298,7 +305,8 @@ export function create_audio_editor_manager(config) {
   let file_prefix = $derived(set_closurable(config?.file_prefix, `${api_prefix}/storage/`))
 
   let account = $derived(set_closurable(config?.account, null))
-  let is_disabled = $derived(set_closurable(config?.is_disabled, false))
+  let is_read_only = $derived(set_closurable(config?.is_read_only, false))
+  let is_disabled = $derived(set_closurable(config?.is_disabled, false) || is_read_only)
   let storage = $derived(set_closurable(config?.storage, null))
   let locally_uploaded_files = $derived(set_closurable(config?.locally_uploaded_files, null))
 
@@ -321,74 +329,112 @@ export function create_audio_editor_manager(config) {
     return Math.ceil(word_count / average_speed)
   }
 
+  function on_destroy() {
+    if (is_destroyed) return
+    is_destroyed = true
+    seed_version++
+    generation_version++
+    seed_abort_controller?.abort()
+    generation_abort_controller?.abort()
+    seed_abort_controller = null
+    generation_abort_controller = null
+    if (success_timeout_id != null) {
+      clearTimeout(success_timeout_id)
+      success_timeout_id = null
+    }
+    is_loading_generate_audio = false
+    audio_storage_picker_manager?.on_destroy?.()
+    image_storage_picker_manager?.on_destroy?.()
+    seed_audio_storage_picker_manager?.on_destroy?.()
+  }
+
   async function seed(input) {
-    if (!input) {
-      file_name_text_input_manager.set_val(null)
+    const current_seed = ++seed_version
+    seed_abort_controller?.abort()
+    seed_abort_controller = typeof AbortController === "undefined" ? null : new AbortController()
+    error_message = null
+    try {
+      if (!input) {
+        file_name_text_input_manager.set_val(null)
+        text_to_audio_text_input_manager.set_val(null)
+        await audio_storage_picker_manager.set_val(null)
+        title_text_input_manager.set_val(null)
+        album_title_text_input_manager.set_val(null)
+        await image_storage_picker_manager.set_val(null)
+        image_description_text_input_manager.set_val(null)
+        artist_text_input_manager.set_val(null)
+        lyrics_text_input_manager.set_val(null)
+        release_year_text_input_manager.set_val(null)
+        language_dropdown_manager.set_val(null)
+        additional_metatags_dropdown_manager?.set_val([])
+        additional_tags_input_prepped = null
+        return
+      }
+      const seed_input = { ...input }
+      if (!seed_input.file && seed_input.id) {
+        let file_src = `${file_prefix}${seed_input.id}`
+        seed_input.file = await url_to_file(file_src, file_name_derived)
+      }
+      if (is_destroyed || current_seed !== seed_version) return
+      is_text_to_audio = false
       text_to_audio_text_input_manager.set_val(null)
-      audio_storage_picker_manager.set_val(null)
-      title_text_input_manager.set_val(null)
-      album_title_text_input_manager.set_val(null)
-      image_storage_picker_manager.set_val(null)
-      image_description_text_input_manager.set_val(null)
-      artist_text_input_manager.set_val(null)
-      lyrics_text_input_manager.set_val(null)
-      release_year_text_input_manager.set_val(null)
-      language_dropdown_manager.set_val(null)
-      additional_tags_input_prepped = null
-      return
-    }
-    if (!input?.file && input?.id) {
-      let file_src = `${file_prefix}${input?.id}`
-      input.file = await url_to_file(file_src, file_name_derived)
-    }
-    is_text_to_audio = false
-    text_to_audio_text_input_manager.set_val(null)
-    if (input.hasOwnProperty("is_text_to_audio")) {
-      is_text_to_audio = input?.is_text_to_audio
-      text_to_audio_text_input_manager.set_val(input?.text_to_audio_input ?? null)
-      voice_id = input?.voice_id ?? null
-    }
-    let cleaned_file_name = clean_file_name(input?.file_name ?? input?.file?.name)
-    let audio_metadata = null
-    if (input?.file) {
-      audio_metadata = await get_audio_metadata(input?.file)
-      audio_storage_picker_manager.set_val(input)
-    }
-    file_name_text_input_manager.set_val(cleaned_file_name)
-    title_text_input_manager.set_val(input?.title ?? input?.tags?.TIT2 ?? audio_metadata?.tags?.TIT2 ?? null)
-    album_title_text_input_manager.set_val(
-      input?.album_title ?? input?.tags?.TALB ?? audio_metadata?.tags?.TALB ?? null
-    )
-    image_storage_picker_manager.set_val({ file_name: "cover", file: input?.image_file ?? audio_metadata?.image?.file })
-    image_description_text_input_manager.set_val(
-      input?.image_description ?? input?.tags?.APIC?.description ?? audio_metadata?.tags?.APIC?.description ?? null
-    )
-    artist_text_input_manager.set_val(input?.artist ?? input?.tags?.TPE1 ?? audio_metadata?.tags?.TPE1 ?? null)
-    lyrics_text_input_manager.set_val(
-      input?.lyrics ?? input?.tags?.USLT?.text ?? audio_metadata?.tags?.USLT?.text ?? null
-    )
-    release_year_text_input_manager.set_val(
-      input?.release_year ?? input?.tags?.TYER ?? audio_metadata?.tags?.TYER ?? null
-    )
-    language_dropdown_manager.set_val(input?.language ?? input?.tags?.TLAN ?? audio_metadata?.tags?.TLAN ?? null)
-    const tags_input = input?.tags ?? audio_metadata?.tags
-    let additonal_tag_keys = []
-    if (
-      tags_input &&
-      typeof tags_input == "object" &&
-      !Array.isArray(tags_input) &&
-      Object.keys(tags_input).length > 0
-    ) {
-      for (let key of Object.keys(tags_input)) {
-        if (!audio_tags_input_base.hasOwnProperty(key)) {
-          additonal_tag_keys.push(key)
+      if (Object.prototype.hasOwnProperty.call(seed_input, "is_text_to_audio")) {
+        is_text_to_audio = seed_input.is_text_to_audio
+        text_to_audio_text_input_manager.set_val(seed_input.text_to_audio_input ?? null)
+        voice_id = seed_input.voice_id ?? null
+      }
+      let cleaned_file_name = clean_file_name(seed_input.file_name ?? seed_input.file?.name)
+      let audio_metadata = null
+      if (seed_input.file) {
+        try {
+          audio_metadata = await get_audio_metadata(seed_input.file, seed_abort_controller?.signal)
+        } catch (error) {
+          if (error?.name === "AbortError") throw error
+          error_message = error?.message ?? "Unable to read audio metadata."
+        }
+        if (is_destroyed || current_seed !== seed_version) return
+        await audio_storage_picker_manager.set_val(seed_input)
+      }
+      if (is_destroyed || current_seed !== seed_version) return
+      file_name_text_input_manager.set_val(cleaned_file_name)
+      title_text_input_manager.set_val(seed_input.title ?? seed_input.tags?.TIT2 ?? audio_metadata?.tags?.TIT2 ?? null)
+      album_title_text_input_manager.set_val(
+        seed_input.album_title ?? seed_input.tags?.TALB ?? audio_metadata?.tags?.TALB ?? null
+      )
+      const cover_file = seed_input.image_file ?? audio_metadata?.image?.file ?? null
+      await image_storage_picker_manager.set_val(cover_file ? { file_name: "cover", file: cover_file } : null)
+      if (is_destroyed || current_seed !== seed_version) return
+      image_description_text_input_manager.set_val(
+        seed_input.image_description ?? seed_input.tags?.APIC?.description ?? audio_metadata?.tags?.APIC?.description ?? null
+      )
+      artist_text_input_manager.set_val(seed_input.artist ?? seed_input.tags?.TPE1 ?? audio_metadata?.tags?.TPE1 ?? null)
+      lyrics_text_input_manager.set_val(
+        seed_input.lyrics ?? seed_input.tags?.USLT?.text ?? audio_metadata?.tags?.USLT?.text ?? null
+      )
+      release_year_text_input_manager.set_val(
+        seed_input.release_year ?? seed_input.tags?.TYER ?? audio_metadata?.tags?.TYER ?? null
+      )
+      language_dropdown_manager.set_val(seed_input.language ?? seed_input.tags?.TLAN ?? audio_metadata?.tags?.TLAN ?? null)
+      const tags_input = seed_input.tags ?? audio_metadata?.tags
+      let additonal_tag_keys = []
+      if (tags_input && typeof tags_input == "object" && !Array.isArray(tags_input) && Object.keys(tags_input).length > 0) {
+        for (let key of Object.keys(tags_input)) {
+          if (!audio_tags_input_base.hasOwnProperty(key)) {
+            additonal_tag_keys.push(key)
+          }
         }
       }
+      additional_metatags_dropdown_manager.set_val(additonal_tag_keys)
+      set_additional_tags_input_prepped(tags_input)
+      popover_manager.open()
+      seed_from_input_popover_manager.close()
+    } catch (error) {
+      if (!is_destroyed && error?.name !== "AbortError") {
+        error_message = error?.message ?? "Unable to seed audio."
+      }
+    } finally {
+      if (current_seed === seed_version) seed_abort_controller = null
     }
-    additional_metatags_dropdown_manager.set_val(additonal_tag_keys)
-    set_additional_tags_input_prepped(tags_input)
-    popover_manager.open()
-    seed_from_input_popover_manager.close()
   }
 
   function set_additional_tags_input_prepped(tags_input) {
@@ -422,41 +468,37 @@ export function create_audio_editor_manager(config) {
     seed(null)
   }
 
-  async function get_audio_metadata(audio_file) {
-    try {
-      let form_data = new FormData()
-      form_data.append("file", audio_file)
-      let response = await fetch(fetch_path_audio_read_tags, {
-        method: "POST",
-        body: form_data,
-      })
-      if (!response.ok) {
-        throw new Error(await response.text())
-      }
-      let res_body = await response.json()
-      let res = {
-        tags: null,
-        image: null,
-      }
-      if (res_body?.raw) {
-        res.tags = { ...audio_tags_input_base, ...res_body?.raw }
-        if (res_body?.raw?.["APIC"]?.imageBuffer) {
-          let buffer_data = res_body?.raw?.["APIC"]?.imageBuffer.data
-          let uint_8_array = new Uint8Array(buffer_data)
-          let blob = new Blob([uint_8_array], { type: res_body?.raw?.["APIC"]?.mime })
-          res.image = {
-            file: blob,
-            type: res_body?.raw?.["APIC"]?.mime,
-            src: URL.createObjectURL(blob),
-            size_kb: Math.ceil(blob.size / 1024),
-            description: res_body?.raw?.["APIC"]?.description,
-          }
+  async function get_audio_metadata(audio_file, signal) {
+    let form_data = new FormData()
+    form_data.append("file", audio_file)
+    let response = await fetch(fetch_path_audio_read_tags, {
+      method: "POST",
+      body: form_data,
+      signal,
+    })
+    if (!response.ok) {
+      throw new Error((await response.text()) || "Unable to read audio metadata.")
+    }
+    let res_body = await response.json()
+    let res = {
+      tags: null,
+      image: null,
+    }
+    if (res_body?.raw) {
+      res.tags = { ...audio_tags_input_base, ...res_body.raw }
+      if (res_body.raw?.["APIC"]?.imageBuffer) {
+        let buffer_data = res_body.raw["APIC"].imageBuffer.data
+        let uint_8_array = new Uint8Array(buffer_data)
+        let blob = new Blob([uint_8_array], { type: res_body.raw["APIC"].mime })
+        res.image = {
+          file: blob,
+          type: res_body.raw["APIC"].mime,
+          size_kb: Math.ceil(blob.size / 1024),
+          description: res_body.raw["APIC"].description,
         }
       }
-      return res
-    } catch (err) {
-      console.error(err)
     }
+    return res
   }
 
   function set_text_to_audio_input(val) {
@@ -469,31 +511,50 @@ export function create_audio_editor_manager(config) {
 
   async function resize_and_convert_image(src, max_width, max_height, output_format) {
     return new Promise((resolve, reject) => {
+      if (!src) {
+        reject(new Error("No cover image was provided."))
+        return
+      }
+      if (typeof Image === "undefined" || typeof document === "undefined") {
+        reject(new Error("Cover images can only be resized in a browser."))
+        return
+      }
       let img = new Image()
       img.crossOrigin = "anonymous"
       img.onload = () => {
-        let canvas = document.createElement("canvas")
-        let ctx = canvas.getContext("2d")
-        let aspect_ratio = img.width / img.height
-        let new_width = max_width
-        let new_height = max_height
-        if (new_width / new_height > aspect_ratio) new_width = new_height * aspect_ratio
-        else new_height = new_width / aspect_ratio
-        canvas.width = new_width
-        canvas.height = new_height
-        ctx.drawImage(img, 0, 0, new_width, new_height)
-        resolve(canvas.toDataURL(output_format))
+        try {
+          if (!img.width || !img.height) throw new Error("The cover image has invalid dimensions.")
+          let canvas = document.createElement("canvas")
+          let ctx = canvas.getContext("2d")
+          if (!ctx) throw new Error("Unable to prepare the cover image.")
+          let aspect_ratio = img.width / img.height
+          let new_width = max_width
+          let new_height = max_height
+          if (new_width / new_height > aspect_ratio) new_width = new_height * aspect_ratio
+          else new_height = new_width / aspect_ratio
+          canvas.width = new_width
+          canvas.height = new_height
+          ctx.drawImage(img, 0, 0, new_width, new_height)
+          resolve(canvas.toDataURL(output_format))
+        } catch (error) {
+          reject(error)
+        }
       }
-      img.onerror = reject
+      img.onerror = () => reject(new Error("Unable to load the cover image."))
       img.src = src
     })
   }
 
   async function generate_new_audio() {
+    if (is_disabled || is_loading_generate_audio || is_destroyed) return
+    const current_generation = ++generation_version
+    generation_abort_controller?.abort()
+    generation_abort_controller = typeof AbortController === "undefined" ? null : new AbortController()
+    let cover_object_url = null
+    is_loading_generate_audio = true
+    error_message = null
+    success_message = null
     try {
-      is_loading_generate_audio = true
-      error_message = null
-      success_message = null
       let form_data = new FormData()
       if (account?.id) {
         form_data.append("account_id", account?.id)
@@ -533,42 +594,42 @@ export function create_audio_editor_manager(config) {
       } else {
         form_data.append("audio", audio_storage_picker_manager?.val?.file)
       }
-      console.log("image_storage_picker_manager?.val", image_storage_picker_manager?.val)
       if (image_storage_picker_manager?.val) {
         let image_src = null
         if (image_storage_picker_manager?.val?.file) {
-          image_src = URL.createObjectURL(image_storage_picker_manager?.val?.file)
+          cover_object_url = URL.createObjectURL(image_storage_picker_manager.val.file)
+          image_src = cover_object_url
         } else if (image_storage_picker_manager?.val?.id) {
           image_src = storage_src.replace("{storage_id}", image_storage_picker_manager?.val?.id)
-          console.log("image_src_replace", image_src)
         }
-        console.log("image_src", image_src)
-        const sized_cover_base_64 = await resize_and_convert_image(image_src, 1000, 1000, "image/png")
-        console.log("sized_cover_base_64", sized_cover_base_64)
-        let sized_cover_file = await url_to_file(sized_cover_base_64, file_name_derived)
-        console.log("sized_cover_file", sized_cover_file)
-        form_data.append("image", sized_cover_file)
+        if (image_src) {
+          const sized_cover_base_64 = await resize_and_convert_image(image_src, 1000, 1000, "image/png")
+          if (is_destroyed || current_generation !== generation_version) return
+          let sized_cover_file = await url_to_file(sized_cover_base_64, file_name_derived)
+          if (is_destroyed || current_generation !== generation_version) return
+          form_data.append("image", sized_cover_file)
+        }
       }
       let response = await fetch(fetch_path_audio_post, {
         method: "POST",
         body: form_data,
+        signal: generation_abort_controller?.signal,
       })
-      console.log("fetch_audio_post_res", response)
       if (!response.ok) {
-        let error_mes = await response.text()
-        is_loading_generate_audio = false
-        error_message = error_mes ?? "Error making audio changes."
-        return
+        throw new Error((await response.text()) || "Error making audio changes.")
       }
       let res_body = await response.json()
-      console.log("res_body1", res_body)
+      if (is_destroyed || current_generation !== generation_version) return
+      if (!res_body?.id) throw new Error("Audio generation returned no file id.")
       // add to new file to client side temporary_storage data
-      let new_audio_src = `${file_prefix}${res_body?.id}`
+      let new_audio_src = `${file_prefix}${res_body.id}`
       let new_audio_file = await url_to_file(new_audio_src, file_name_derived)
-      console.log("new_audio_file", new_audio_file)
-      is_loading_generate_audio = false
+      if (is_destroyed || current_generation !== generation_version) return
       is_alt_content_shown = true
-      setTimeout(() => {
+      if (success_timeout_id != null) clearTimeout(success_timeout_id)
+      success_timeout_id = setTimeout(() => {
+        success_timeout_id = null
+        if (is_destroyed) return
         is_alt_content_shown = false
       }, 1800)
       generated_audio_file_obj = {
@@ -578,32 +639,49 @@ export function create_audio_editor_manager(config) {
         file_name: new_audio_file?.name,
         size_kb: Math.round(new_audio_file?.size * 0.001),
       }
-      seed({ file: new_audio_file })
-      // optional: need third-party library to extract cover image from metadata clientside tbd. Already have working with server request but try and avoid that
       audio_manager = create_audio_manager({
         src: new_audio_src,
       })
-    } catch (err) {
-      is_loading_generate_audio = false
-      error_message = err?.message ?? JSON.stringify(err)
+      success_message = "Successfully generated audio file."
+      await seed({ file: new_audio_file, file_name: new_audio_file?.name })
+    } catch (error) {
+      if (!is_destroyed && error?.name !== "AbortError") {
+        error_message = error?.message ?? "Error making audio changes."
+      }
+    } finally {
+      if (cover_object_url) URL.revokeObjectURL(cover_object_url)
+      if (current_generation === generation_version) {
+        is_loading_generate_audio = false
+        generation_abort_controller = null
+      }
     }
   }
 
   async function download_audio_file() {
-    // file_name_tbd
-    let response = await fetch(generated_audio_file_obj?.src)
-    let blob = await response.blob()
-    let url = URL.createObjectURL(blob)
-    let link = document.createElement("a")
-    link.href = url
-    link.download = file_name_derived
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-    URL.revokeObjectURL(url)
+    if (is_disabled || !generated_audio_file_obj?.src) return
+    let url = null
+    let link = null
+    error_message = null
+    try {
+      let response = await fetch(generated_audio_file_obj.src)
+      if (!response.ok) throw new Error(`Unable to download audio (${response.status}).`)
+      let blob = await response.blob()
+      url = URL.createObjectURL(blob)
+      link = document.createElement("a")
+      link.href = url
+      link.download = file_name_derived
+      document.body.appendChild(link)
+      link.click()
+    } catch (error) {
+      error_message = error?.message ?? "Unable to download audio."
+    } finally {
+      link?.remove()
+      if (url) URL.revokeObjectURL(url)
+    }
   }
 
   function finish() {
+    if (is_disabled) return
     if (typeof config?.on_finish == "function") {
       config?.on_finish(generated_audio_file_obj)
     }
@@ -626,11 +704,12 @@ export function create_audio_editor_manager(config) {
       type: "outlined",
       text: "Clear",
       is_compressed: true,
+      is_disabled: () => is_disabled || is_loading_generate_audio,
       on_click: () => seed(),
     })
     download_audio_file_button_manager = create_button_manager({
       type: "outlined",
-      is_disabled: () => is_disabled,
+      is_disabled: () => is_disabled || !generated_audio_file_obj?.src,
       text: "Download",
       support_icon: "download",
       is_compressed: true,
@@ -641,6 +720,8 @@ export function create_audio_editor_manager(config) {
       is_compressed: true,
       is_loading: () => is_loading_generate_audio,
       is_disabled: () =>
+        is_disabled ||
+        is_loading_generate_audio ||
         (!is_text_to_audio && !audio_storage_picker_manager?.val) ||
         (is_text_to_audio && !text_to_audio_text_input_manager?.val),
       on_click: () => generate_new_audio(),
@@ -659,7 +740,7 @@ export function create_audio_editor_manager(config) {
       text: "Use Text to Audio",
       mr: 1,
       is_compressed: true,
-      is_disabled: () => is_loading_generate_audio,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
       on_click: () => set_is_text_to_audio(true),
     })
     audio_storage_picker_manager = create_storage_picker_manager({
@@ -771,9 +852,9 @@ export function create_audio_editor_manager(config) {
       accept: ["audio/mpeg"],
       is_multiselect: false,
       is_disabled: () => is_loading_generate_audio || is_disabled,
-      on_finish: (input) => {
-        seed(input)
-        seed_audio_storage_picker_manager.set_val(null)
+      on_finish: async (input) => {
+        await seed(input)
+        await seed_audio_storage_picker_manager.set_val(null)
       },
     })
     audio_manager = null
@@ -781,6 +862,7 @@ export function create_audio_editor_manager(config) {
       type: "outlined",
       text: "Clear",
       is_compressed: true,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
       on_click: () => (generated_audio_file_obj = null),
     })
     edit_voice_popover_manager = create_popover_manager({
@@ -794,6 +876,7 @@ export function create_audio_editor_manager(config) {
       text: "Edit",
       support_icon: "edit",
       is_compressed: true,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
       popover_target: () => `popover_${edit_voice_popover_manager?.id}`,
     })
     let voice_options_loc = []
@@ -807,6 +890,7 @@ export function create_audio_editor_manager(config) {
         select_button_manager: create_button_manager({
           type: "outlined",
           text: "Select",
+          is_disabled: () => is_loading_generate_audio || is_disabled,
           selected_type: () => (voice?.id == voice_id ? "selected" : null),
           on_click: () => {
             voice_id = voice_id == voice?.id ? null : voice?.id
@@ -824,6 +908,7 @@ export function create_audio_editor_manager(config) {
       is_clearable: true,
       is_multiselect: true,
       is_button_compressed: true,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
       options: additional_metatag_options,
       on_change: (input) => {
         let tags_input = {}
@@ -847,6 +932,12 @@ export function create_audio_editor_manager(config) {
     get is_text_to_audio() {
       return is_text_to_audio
     },
+    get is_disabled() {
+      return is_disabled
+    },
+    get is_read_only() {
+      return is_read_only
+    },
     get error_message() {
       return error_message
     },
@@ -973,5 +1064,6 @@ export function create_audio_editor_manager(config) {
     set_is_text_to_audio,
     clear,
     finish,
+    on_destroy,
   }
 }

package/dist/Components/AuthCodeInput/index.svelte

@@ -19,6 +19,8 @@
       inputmode="numeric"
       pattern="[0-9]*"
       autocomplete={manager?.autocomplete}
+      aria-label={manager?.aria_label}
+      aria-invalid={manager?.val && !manager?.is_valid ? "true" : undefined}
       value={manager?.val}
       maxlength={6}
       oninput={(e) => manager?.set_val(e?.target?.value)}

package/dist/Components/AuthCodeInput/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

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

@@ -7,6 +7,7 @@ export function create_auth_code_input_manager(config) {
   let is_required = $state(config?.is_required ?? false)
   let is_read_only = $state(config?.is_read_only ?? false)
   let autocomplete = $state(config?.autocomplete ?? "one-time-code")
+  let aria_label = $state(config?.aria_label ?? "Authentication code")
   let is_valid = $state(config?.is_valid)
   let is_disabled = $state(config?.is_disabled ?? false)
   let border_radius = $state(config?.border_radius ?? 1)
@@ -16,31 +17,37 @@ export function create_auth_code_input_manager(config) {
   let mb = $state(config?.mb ?? 0)
 
   function set_val(input) {
-    const cleaned_val = input ? input.replace(/\D+/g, "") : null
+    const cleaned_val = String(input ?? "")
+      .replace(/\D+/g, "")
+      .slice(0, 6)
     val = cleaned_val
-    is_valid = val && val.length == 6
+    is_valid = val.length === 6
     if (config?.on_change) {
       config?.on_change(cleaned_val)
     }
-    if (val.length == 6 && config?.on_sixth) {
+    if (val.length === 6 && config?.on_sixth) {
       config?.on_sixth(cleaned_val)
     }
   }
 
   function set_focus() {
-    let input_el = document?.querySelector(`#auth_code_input_${id}`)
+    if (typeof document === "undefined") return
+    let input_el = document.querySelector(`#auth_code_input_${id}`)
     if (input_el) {
       input_el.focus()
     }
   }
 
   function init(config) {
-    val = config?.val ?? null
+    val = String(config?.val ?? "")
+      .replace(/\D+/g, "")
+      .slice(0, 6)
     name = config?.name ?? "code"
     is_required = config?.is_required ?? false
     is_read_only = config?.is_read_only ?? false
     autocomplete = config?.autocomplete ?? "one-time-code"
-    is_valid = val && val.length == 6
+    aria_label = config?.aria_label ?? "Authentication code"
+    is_valid = val.length === 6
     is_disabled = config?.is_disabled ?? false
     border_radius = config?.border_radius ?? 1
     ml = config?.ml ?? 0
@@ -68,6 +75,9 @@ export function create_auth_code_input_manager(config) {
     get autocomplete() {
       return autocomplete
     },
+    get aria_label() {
+      return aria_label
+    },
     get is_valid() {
       return is_valid
     },

package/dist/Components/Breadcrumbs/index.svelte

@@ -6,7 +6,7 @@
 </script>
 
 {#if Array.isArray(manager?.val) && manager?.val.length > 0}
-  <div class="breadcrumbs">
+  <nav class="breadcrumbs" aria-label="Breadcrumb">
     <Button manager={manager?.back_button_manager} />
     <Button manager={manager?.slash_button_manager} />
     {#if Array.isArray(manager?.breadcrumb_managers) && manager?.breadcrumb_managers.length > 0}
@@ -15,7 +15,7 @@
         <Button manager={manager?.breadcrumb_managers?.[i]?.button_manager} />
       {/each}
     {/if}
-  </div>
+  </nav>
 {/if}
 
 <style>