sveltekit-ui 1.1.74 → 1.1.76

package/{src/lib/Components/Qr/index.svelte.js → dist/Components/Qr/manager.svelte.js}

@@ -1,6 +1,6 @@
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
-import { copy_to_clipboard, create_unique_id, deep_copy, set_closurable, color_to_css } from "$lib/client/index.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
+import { copy_to_clipboard, create_unique_id, deep_copy, color_to_css } from "../../client/index.js"
 import QRCodeStyling from "qr-code-styling"
 
 export function create_qr_manager(config) {
@@ -20,6 +20,7 @@ export function create_qr_manager(config) {
   let data = $state(null)
   let image = $state(null)
   let extension = $state(null)
+  let name = $state("QR code")
   let quality = $state(null)
   let copy_button_manager = $state(null)
   let download_button_manager = $state(null)
@@ -27,11 +28,13 @@ export function create_qr_manager(config) {
   let qr__styling = $state(null)
   let is_loaded = $state(false)
   let error_message = $state(null)
-
-  let is_show_copy = $derived(set_closurable(config?.is_show_copy, false))
-  let is_show_download = $derived(set_closurable(config?.is_show_download, false))
+  let is_show_copy = $state(false)
+  let is_show_download = $state(false)
+  let render_version = 0
+  let is_destroyed = false
 
   let scale = $derived(display_size && size ? display_size / size : 0.25)
+  let aria_label = $derived(`QR code${data ? ` for ${String(data).slice(0, 120)}` : ""}`)
 
   function get_options() {
     // convert "var(--primary-t)" to css the works for qr_ download like oklch(0.67 0.26 203)
@@ -107,28 +110,42 @@ export function create_qr_manager(config) {
   }
 
   function get_css_variable_value(input) {
+    if (typeof document === "undefined") return input
     const element = document.createElement("div")
-    document.body.appendChild(element)
-    element.style.color = input
-    const style = getComputedStyle(element)
-    const value = style.color
-    document.body.removeChild(element)
-    return value
+    try {
+      document.body.appendChild(element)
+      element.style.color = input
+      return getComputedStyle(element).color || input
+    } finally {
+      element.remove()
+    }
   }
 
   async function on_mount() {
+    const current_render_version = ++render_version
+    is_destroyed = false
+    is_loaded = false
     try {
+      if (typeof document === "undefined") return
       error_message = null
       const options = get_options()
-      qr__styling = new QRCodeStyling(deep_copy(options))
-      let qr_el = document?.querySelector(`#qr_${id}`)
-      qr__styling.append(qr_el)
-      qr__styling.update()
+      const qr_el = document.querySelector(`#qr_${id}`)
+      if (!qr_el) throw new Error("QR container is unavailable.")
+      qr_el.replaceChildren()
+      const next_qr_styling = new QRCodeStyling(deep_copy(options))
+      next_qr_styling.append(qr_el)
+      next_qr_styling.update()
+      if (is_destroyed || current_render_version !== render_version) {
+        qr_el.replaceChildren()
+        return
+      }
+      qr__styling = next_qr_styling
       is_loaded = true
     } catch (error) {
-      console.error("QR Code generation error:", error)
-      error_message = "An error occurred."
-      if (error && error.startsWith("code length overflow")) {
+      if (is_destroyed || current_render_version !== render_version) return
+      const error_text = String(error?.message ?? error ?? "")
+      error_message = "The QR code could not be generated."
+      if (error_text.toLowerCase().includes("code length overflow")) {
         error_message +=
           " You may need to decrease the amount of data in the QR code, decrease the repetition of that data (error_correction_level), or decrease the detail of the data (type_number)."
       }
@@ -137,55 +154,72 @@ export function create_qr_manager(config) {
   }
 
   function set_options(input) {
-    margin = input?.margin ?? 10
-    size = input?.size ?? 800
-    display_size = input?.display_size ?? 200
-    image_size = input?.image_size ?? 0.5
-    type_number = input?.type_number ?? 0
-    error_correction_level = input?.error_correction_level ?? "Q"
-    color = color_to_css(input?.color ?? "var(--primary-t)")
-    corner_color = color_to_css(input?.corner_color ?? "color-mix(in oklab, var(--primary-t), var(--bg) 20%)")
-    background_color = color_to_css(input?.background_color ?? "#ffffff00")
-    border_color = color_to_css(input?.border_color ?? "var(--shadow7-t)")
-    border_radius = input?.border_radius ?? (size + 2 * margin) / 100
-    border_width = input?.border_width ?? 1
-    data = input?.data ?? null
-    image =
-      input?.image && input?.image.startsWith("<svg")
-        ? `data:image/svg+xml;utf8,${encodeURIComponent(input?.image)}`
-        : input?.image ?? null
-    extension = input?.extension ?? "svg"
-    quality = input?.quality ?? 0.8
+    const next_input = input && typeof input === "object" ? input : {}
+    margin = next_input?.margin ?? margin ?? 10
+    size = next_input?.size ?? size ?? 800
+    display_size = next_input?.display_size ?? display_size ?? 200
+    image_size = next_input?.image_size ?? image_size ?? 0.5
+    type_number = next_input?.type_number ?? type_number ?? 0
+    error_correction_level = next_input?.error_correction_level ?? error_correction_level ?? "Q"
+    color = next_input?.color != null ? color_to_css(next_input.color) : color ?? color_to_css("var(--primary-t)")
+    corner_color =
+      next_input?.corner_color != null
+        ? color_to_css(next_input.corner_color)
+        : corner_color ?? color_to_css("color-mix(in oklab, var(--primary-t), var(--bg) 20%)")
+    background_color =
+      next_input?.background_color != null
+        ? color_to_css(next_input.background_color)
+        : background_color ?? color_to_css("#ffffff00")
+    border_color =
+      next_input?.border_color != null
+        ? color_to_css(next_input.border_color)
+        : border_color ?? color_to_css("var(--shadow7-t)")
+    border_radius = next_input?.border_radius ?? border_radius ?? (size + 2 * margin) / 100
+    border_width = next_input?.border_width ?? border_width ?? 1
+    if (Object.hasOwn(next_input, "data")) data = next_input.data == null ? null : String(next_input.data)
+    if (Object.hasOwn(next_input, "image")) {
+      const next_image = next_input.image
+      image =
+        typeof next_image === "string" && next_image.trimStart().startsWith("<svg")
+          ? `data:image/svg+xml;utf8,${encodeURIComponent(next_image)}`
+          : next_image ?? null
+    }
+    const requested_extension = next_input?.extension ?? extension ?? "svg"
+    extension = ["svg", "png", "webp", "jpeg"].includes(requested_extension) ? requested_extension : "svg"
+    name = String(next_input?.name ?? name ?? "QR code").trim().slice(0, 100) || "QR code"
+    quality = Math.min(Math.max(Number(next_input?.quality ?? quality ?? 0.8) || 0.8, 0.1), 1)
+    is_show_copy = next_input?.is_show_copy ?? is_show_copy
+    is_show_download = next_input?.is_show_download ?? is_show_download
   }
 
-  function update(input = null) {
+  async function update(input = null) {
     if (input) {
       set_options(input)
     }
+    if (!qr__styling) return on_mount()
     try {
       error_message = null
       const options = get_options()
       qr__styling.update(deep_copy(options))
-    } catch (error) {
-      error_message = "QR Code update error:" + error
+      is_loaded = true
+    } catch {
+      error_message = "The QR code could not be updated."
     }
   }
 
-  function download() {
-    const options = get_options()
-    qr__styling.download({ name: "Qr", extension, ...options }, quality) // Options with extension and name of file (not required),
+  async function download() {
+    if (!qr__styling || !is_loaded) {
+      error_message = "The QR code is not ready to download."
+      return
+    }
+    try {
+      error_message = null
+      await qr__styling.download({ name, extension })
+    } catch {
+      error_message = "The QR code could not be downloaded."
+    }
   }
 
-  // async function get_raw_data() {
-  //   const raw_data = await qr__styling.getRawData(extension)
-  //   console.log("raw_data", raw_data)
-  // }
-
-  // async function to_data_url() {
-  //   const data_url = await qr__styling.toDataUrl(extension, quality) // 'png' 'jpeg' 'webp'
-  //   console.log("data_url", data_url)
-  // }
-
   function init(input) {
     set_options(input)
     copy_button_manager = create_button_manager({
@@ -193,6 +227,8 @@ export function create_qr_manager(config) {
       is_uniform: true,
       is_success_animation: true,
       support_icon: "clipboard",
+      aria_label: "Copy QR code data",
+      is_disabled: () => !data,
       on_click: () => copy_to_clipboard(data),
     })
     download_button_manager = create_button_manager({
@@ -200,6 +236,8 @@ export function create_qr_manager(config) {
       is_uniform: true,
       is_success_animation: true,
       support_icon: "download",
+      aria_label: "Download QR code",
+      is_disabled: () => !is_loaded,
       on_click: () => download(),
     })
     extention_dropdown_manager = create_dropdown_manager({
@@ -217,6 +255,14 @@ export function create_qr_manager(config) {
     })
   }
 
+  function destroy() {
+    is_destroyed = true
+    render_version += 1
+    qr__styling = null
+    is_loaded = false
+    if (typeof document !== "undefined") document.querySelector(`#qr_${id}`)?.replaceChildren()
+  }
+
   init(config)
 
   return {
@@ -227,6 +273,9 @@ export function create_qr_manager(config) {
     get size() {
       return size
     },
+    get display_size() {
+      return display_size
+    },
     get image_size() {
       return image_size
     },
@@ -293,9 +342,13 @@ export function create_qr_manager(config) {
     get scale() {
       return scale
     },
+    get aria_label() {
+      return aria_label
+    },
     init,
     on_mount,
     download,
     update,
+    destroy,
   }
 }

package/dist/Components/QrInput/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/QrInput/manager.svelte.d.ts

@@ -0,0 +1,37 @@
+export function create_qr_input_manager(config: any): {
+    readonly val: {
+        margin: any;
+        size: any;
+        image_size: any;
+        type_number: any;
+        border_radius: any;
+        border_width: any;
+        error_correction_level: any;
+        color: any;
+        corner_color: any;
+        background_color: any;
+        border_color: any;
+        is_show_copy: any;
+        is_show_download: any;
+        data: any;
+        image: any;
+    };
+    readonly margin_slider_manager: null;
+    readonly size_slider_manager: null;
+    readonly image_size_slider_manager: null;
+    readonly type_number_slider_manager: null;
+    readonly border_radius_slider_manager: null;
+    readonly border_width_slider_manager: null;
+    readonly error_correction_level_dropdown_manager: null;
+    readonly color_manager: null;
+    readonly corner_color_manager: null;
+    readonly background_color_manager: null;
+    readonly border_color_manager: null;
+    readonly data_text_input_manager: null;
+    readonly image_text_input_manager: null;
+    readonly is_show_copy_checkbox_manager: null;
+    readonly is_show_download_checkbox_manager: null;
+    readonly set_changes_button_manager: null;
+    readonly qr_manager: null;
+    set_changes: () => Promise<void>;
+};

package/dist/Components/QrInput/{index.svelte.js → manager.svelte.js}

@@ -1,10 +1,10 @@
-import { create_color_input_manager } from "../ColorInput/index.svelte.js"
-import { create_slider_manager } from "../Slider/index.svelte.js"
-import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
-import { create_text_input_manager } from "../TextInput/index.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_qr_manager } from "../Qr/index.svelte.js"
+import { create_color_input_manager } from "../ColorInput/manager.svelte.js"
+import { create_slider_manager } from "../Slider/manager.svelte.js"
+import { create_checkbox_manager } from "../Checkbox/manager.svelte.js"
+import { create_text_input_manager } from "../TextInput/manager.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_qr_manager } from "../Qr/manager.svelte.js"
 
 export function create_qr_input_manager(config) {
   let margin_slider_manager = $state(null)
@@ -43,8 +43,10 @@ export function create_qr_input_manager(config) {
     image: image_text_input_manager?.val,
   })
 
-  function set_changes() {
-    qr_manager.update({ ...val, display_size: 280 })
+  async function set_changes() {
+    const next_val = { ...val, display_size: 280 }
+    await qr_manager.update(next_val)
+    if (typeof config?.on_change === "function") config.on_change({ ...val })
   }
 
   function init(config) {
@@ -214,5 +216,6 @@ export function create_qr_input_manager(config) {
     get qr_manager() {
       return qr_manager
     },
+    set_changes,
   }
 }

package/dist/Components/Slider/index.svelte

@@ -17,10 +17,10 @@
     {#if manager?.label || manager?.error_message}
       <div style="display: inline-flex;">
         {#if manager?.label}
-          <label style="--label_font_size: {manager?.label_font_size}rem;" for={manager?.id}>{manager?.label}:</label>
+          <label style="--label_font_size: {manager?.label_font_size}rem;" for={`input_${manager?.id}`}>{manager?.label}:</label>
         {/if}
         {#if manager?.error_message}
-          <p class="error_text">{manager?.error_message}</p>
+          <p id={`slider_error_${manager?.id}`} class="error_text">{manager?.error_message}</p>
         {/if}
       </div>
     {/if}
@@ -59,15 +59,23 @@
           {#each manager?.working_val as thumb, i}
             <div
               id={`thumb_${i}_${manager?.id}`}
-              role="button"
-              tabindex="0"
+              role="slider"
+              tabindex={manager?.is_disabled ? -1 : 0}
+              aria-label={`${manager?.label ?? manager?.name ?? "Slider"}${manager?.working_val?.length > 1 ? ` ${i + 1}` : ""}`}
+              aria-valuemin={manager?.min}
+              aria-valuemax={manager?.max}
+              aria-valuenow={thumb}
+              aria-disabled={manager?.is_disabled || manager?.loading_i == i}
+              aria-readonly={manager?.is_read_only}
+              aria-invalid={manager?.error_i == i || !!manager?.error_message}
+              aria-describedby={manager?.error_message ? `slider_error_${manager?.id}` : undefined}
               class="thumb"
               class:thumb_hovered={manager?.hovered_i == i || manager?.selected_i == i}
               class:thumb_dark_bg={manager?.is_short}
               class:thumb_disabled={manager?.is_disabled || manager?.loading_i == i}
               class:display_none={thumb == null}
               style="--color: {manager?.color}"
-              onkeydown={(e) => manager?.handle_thumb_keydown(i, e?.key)}
+              onkeydown={(e) => manager?.handle_thumb_keydown(i, e)}
               onfocus={() => manager?.handle_focus(i)}
               onblur={() => manager?.handle_blur(i)}
             >
@@ -81,7 +89,7 @@
                 <div class="thumb_float_icon">
                   <LoadingWheel color={manager?.is_short ? "var(--g4)" : "var(--g3)"} sw={0.2} />
                 </div>
-              {:else if manager?.manager?.loading_i == i}
+              {:else if manager?.error_i == i}
                 <div class="thumb_float_icon">
                   <ErrorX color={manager?.is_short ? "var(--g4)" : "var(--g3)"} sw={42} />
                 </div>
@@ -94,12 +102,12 @@
             tabindex="-1"
             name={manager?.name}
             required={manager?.is_required}
-            readonly={manager?.is_read_only}
+            aria-readonly={manager?.is_read_only}
             onpointerdown={(e) => manager?.handle_pointer_down(e)}
             onpointerenter={(e) => manager?.handle_pointer_enter(e)}
             onpointerleave={(e) => manager?.handle_pointer_leave(e)}
             class="slider"
-            disabled={manager?.is_disabled || manager?.loading_id}
+            disabled={manager?.is_disabled || manager?.is_read_only || manager?.loading_i != null}
             min={manager?.min}
             max={manager?.max}
             step={manager?.step}

package/dist/Components/Slider/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/Slider/manager.svelte.d.ts

@@ -0,0 +1,54 @@
+export function create_slider_manager(config: any): {
+    id: string;
+    readonly name: any;
+    readonly label: any;
+    readonly active_i: null;
+    readonly val: null;
+    readonly is_nullable: any;
+    readonly working_val: null;
+    readonly label_font_size: any;
+    readonly is_required: any;
+    readonly is_read_only: any;
+    readonly error_message: any;
+    readonly min: null;
+    readonly max: null;
+    readonly step: null;
+    readonly font_size: any;
+    readonly is_disabled: any;
+    readonly color: any;
+    readonly closest_i_at_drag_start: number;
+    readonly hovered_i: null;
+    readonly selected_i: null;
+    readonly loading_i: null;
+    readonly error_i: null;
+    readonly is_short: any;
+    readonly is_show_text: any;
+    readonly ml: any;
+    readonly mr: any;
+    readonly mt: any;
+    readonly mb: any;
+    readonly slider_highlight_bg_width: number;
+    readonly slider_highlight_ml: number;
+    readonly left: number;
+    readonly base_height: number;
+    readonly highlight_range_start_percent: any;
+    readonly highlight_range_width_percent: number;
+    readonly toggle_null_button_manager: null;
+    init: (config: any) => void;
+    handle_pointer_enter: (e: any) => void;
+    handle_pointer_leave: (e: any) => void;
+    handle_pointer_down: (e: any) => void;
+    handle_pointer_move: (id_input: any, e: any) => void;
+    handle_pointer_up: (id_input: any, e: any) => void;
+    handle_thumb_keydown: (i: any, key_or_event: any) => void;
+    handle_focus: (i: any) => void;
+    handle_blur: (i: any) => void;
+    set_val: (input: any) => void;
+    set_thumbs: () => void;
+    set_loading_i: (input: any) => void;
+    set_hovered_i: (input: any) => void;
+    set_error_i: (input: any) => void;
+    set_min: (input: any) => void;
+    set_max: (input: any) => void;
+    set_step: (input: any) => void;
+};

package/dist/Components/Slider/{index.svelte.js → manager.svelte.js}

@@ -1,5 +1,5 @@
 import { create_unique_id, deep_copy, set_closurable, set_closurable_color, color_to_css } from "../../client/index.js"
-import { create_button_manager } from "../Button/index.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
 
 export function create_slider_manager(config) {
   const id = create_unique_id(null, 20)
@@ -27,8 +27,9 @@ export function create_slider_manager(config) {
   let label_font_size = $derived(set_closurable(config?.label_font_size, 1.2))
   let is_required = $derived(set_closurable(config?.is_required, false))
   let is_read_only = $derived(set_closurable(config?.is_read_only, false))
+  let error_message = $derived(set_closurable(config?.error_message, null))
   let font_size = $derived(set_closurable(config?.font_size, 1))
-  let is_disabled = $derived(set_closurable(config?.is_disabled || val == null, false))
+  let is_disabled = $derived(set_closurable(config?.is_disabled, false) || val == null)
   let is_nullable = $derived(set_closurable(config?.is_nullable, false))
   let color = $derived(set_closurable_color(config?.color, "var(--primary-t)", true))
   let is_short = $derived(set_closurable(config?.is_short, false))
@@ -45,6 +46,7 @@ export function create_slider_manager(config) {
   function get_e_percentage(e) {
     if (e) {
       let slider_el = document?.querySelector(`#slider_${id}`)
+      if (!slider_el) return null
       const slider_rect = slider_el.getBoundingClientRect()
       const pointer_position = e.clientX
       const slider_start = slider_rect.left
@@ -98,6 +100,7 @@ export function create_slider_manager(config) {
   }
 
   function handle_pointer_down(e) {
+    if (is_disabled || is_read_only || loading_i != null) return
     is_pointer_down = true
     if (e) {
       e.preventDefault()
@@ -167,11 +170,11 @@ export function create_slider_manager(config) {
 
   function handle_pointer_move(id_input, e) {
     if (e && id_input == id) {
-      e.preventDefault()
       if (is_slider_hovered) {
         set_hover(e)
       }
-      if (is_pointer_down) {
+      if (is_pointer_down && !is_disabled && !is_read_only && loading_i == null) {
+        e.preventDefault()
         const percent_decimal = get_e_percentage(e)
         const new_val = clean_val(percent_decimal, true)
         let working_val_loc = deep_copy(working_val)
@@ -209,15 +212,30 @@ export function create_slider_manager(config) {
     }
   }
 
-  function handle_thumb_keydown(i, key) {
-    if (loading_i != null || is_disabled) {
+  function handle_thumb_keydown(i, key_or_event) {
+    if (loading_i != null || is_disabled || is_read_only) {
       return
     }
-    if (key == "ArrowLeft") {
-      working_val[i] = deep_copy(clean_val(working_val[i] - step))
-    } else if (key == "ArrowRight") {
-      working_val[i] = deep_copy(clean_val(working_val[i] + step))
+    const key = typeof key_or_event == "string" ? key_or_event : key_or_event?.key
+    const key_step = step > 0 ? step : (max - min) / 100
+    let next_val = working_val?.[i]
+    if (["ArrowLeft", "ArrowDown"].includes(key)) {
+      next_val = clean_val(next_val - key_step)
+    } else if (["ArrowRight", "ArrowUp"].includes(key)) {
+      next_val = clean_val(next_val + key_step)
+    } else if (key == "Home") {
+      next_val = min
+    } else if (key == "End") {
+      next_val = max
+    } else if (key == "PageDown") {
+      next_val = clean_val(next_val - key_step * 10)
+    } else if (key == "PageUp") {
+      next_val = clean_val(next_val + key_step * 10)
+    } else {
+      return
     }
+    key_or_event?.preventDefault?.()
+    working_val[i] = deep_copy(next_val)
     if (Array.isArray(working_val) && working_val.length > 1) {
       val[i] = deep_copy(working_val[i])
     } else {
@@ -266,10 +284,10 @@ export function create_slider_manager(config) {
     let thumb_dot_el = document?.querySelector(`#thumb_dot_${i}_${id}`)
     if (thumb_dot_el) {
       if (!is_short && is_show_text) {
-        thumb_dot_el.innerHTML = short_val
+        thumb_dot_el.textContent = short_val
       }
       if (error_i != null || is_short) {
-        thumb_dot_el.innerHTML = ""
+        thumb_dot_el.textContent = ""
       }
     }
     let slider_el = document?.querySelector(`#slider_${id}`)
@@ -341,6 +359,7 @@ export function create_slider_manager(config) {
       is_no_wrap: true,
       mr: 0.5,
       text: () => (val == null ? "Select Value" : "Set Null"),
+      is_disabled: () => set_closurable(config?.is_disabled, false) || is_read_only,
       on_click: () => set_val(val == null ? min : null),
     })
   }
@@ -376,6 +395,9 @@ export function create_slider_manager(config) {
     get is_read_only() {
       return is_read_only
     },
+    get error_message() {
+      return error_message
+    },
     get min() {
       return min
     },

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

@@ -0,0 +1,25 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    is_vert?: boolean;
+    ml?: number;
+    mr?: number;
+    mt?: number;
+    mb?: number;
+    sw?: number;
+    color?: string;
+    min_length?: number;
+}, {}, "">;
+type $$ComponentProps = {
+    is_vert?: boolean;
+    ml?: number;
+    mr?: number;
+    mt?: number;
+    mb?: number;
+    sw?: number;
+    color?: string;
+    min_length?: number;
+};

package/dist/Components/StoragePicker/DisplayFile/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/StoragePicker/index.svelte

@@ -5,8 +5,12 @@
   import Breadcrumbs from "../Breadcrumbs/index.svelte"
   import DisplayFile from "./DisplayFile/index.svelte"
   import FileInput from "../FileInput/index.svelte"
+  import InfoBox from "../InfoBox/index.svelte"
+  import { onDestroy } from "svelte"
 
   let { manager } = $props()
+
+  onDestroy(() => manager?.on_destroy?.())
 </script>
 
 <div style="margin-top: {manager?.mt}rem; margin-bottom: {manager?.mb}rem;">
@@ -30,6 +34,7 @@
   <Popover manager={manager?.popover_manager}>
     {#snippet content()}
       <div>
+        <InfoBox message={manager?.error_message} mb={1} />
         {#if manager?.storage_origins.includes("locally_uploaded_files")}
           <h3>Locally Uploaded Files</h3>
           <div>
@@ -163,6 +168,7 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
+    line-clamp: 3;
     overflow: hidden;
     line-height: 2rem;
     font-size: 1.6rem;

package/dist/Components/StoragePicker/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;
+};