sveltekit-ui 1.1.74 → 1.1.76

package/dist/Components/ColorInput/ColorPalette/index.svelte

@@ -11,28 +11,32 @@
   >
     {#each manager?.l_options as l_option}
       {#each manager?.h_options as h_option}
-        <div
+        <button
+          type="button"
           id={`lightness_hue_square_${manager?.id}_${l_option}_${h_option}`}
           class="color_box"
           class:is_selected={manager?.val?.l == l_option && manager?.val?.h == h_option}
-          role="button"
           tabindex={manager?.val?.l == l_option && manager?.val?.h == h_option ? 0 : -1}
+          aria-label={`Lightness ${l_option}, hue ${h_option}`}
+          aria-pressed={manager?.val?.l == l_option && manager?.val?.h == h_option}
           style="--bg_col: {`${color_var(l_option, manager?.val?.c ?? manager?.val_base?.c, h_option, 24, false)}`}"
           onclick={() => manager?.set_lightness_and_hue(l_option, h_option)}
           onkeydown={(event) => {
-            if (event.key === "Enter" || event.key === " ") {
-              manager?.set_lightness_and_hue(l_option, h_option)
-            } else if (event.key === "ArrowRight") {
-              manager?.set_lightness_and_hue(l_option, h_option + 1)
+            if (event.key === "ArrowRight") {
+              event.preventDefault()
+              manager?.set_lightness_and_hue(l_option, h_option, 0, 1)
             } else if (event.key === "ArrowLeft") {
-              manager?.set_lightness_and_hue(l_option, h_option - 1)
+              event.preventDefault()
+              manager?.set_lightness_and_hue(l_option, h_option, 0, -1)
             } else if (event.key === "ArrowDown") {
-              manager?.set_lightness_and_hue(l_option + 1, h_option)
+              event.preventDefault()
+              manager?.set_lightness_and_hue(l_option, h_option, 1, 0)
             } else if (event.key === "ArrowUp") {
-              manager?.set_lightness_and_hue(l_option - 1, h_option)
+              event.preventDefault()
+              manager?.set_lightness_and_hue(l_option, h_option, -1, 0)
             }
           }}
-        ></div>
+        ></button>
       {/each}
     {/each}
   </div>
@@ -54,6 +58,9 @@
     aspect-ratio: 1;
     align-items: center;
     justify-content: center;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
   }
   .is_selected {
     outline: 1px solid var(--g24);

package/dist/Components/ColorInput/ColorPalette/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/ColorInput/OpacityPicker/index.svelte

@@ -12,23 +12,25 @@
         <div class="color_grid_container" style="--columns: {manager?.o_options.length};">
           {#each manager?.o_options as o_option}
             <div class="opacity_bg" class:is_selected={manager?.val?.o == o_option}>
-              <div
+              <button
+                type="button"
                 id={`opacity_square_${manager?.id}_${o_option}`}
                 class="color_box"
-                role="button"
                 tabindex={manager?.val?.o == o_option ? 0 : -1}
+                aria-label={`Opacity ${o_option}`}
+                aria-pressed={manager?.val?.o == o_option}
                 style="--bg_col: {`${color_var(manager?.val?.l ?? manager?.val_base?.l, manager?.val?.c?? manager?.val_base?.c, manager?.val?.h?? manager?.val_base?.h, o_option, false)}`}"
                 onclick={() => manager?.set_opacity(o_option)}
                 onkeydown={(event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    manager?.set_opacity(o_option)
-                  } else if (event.key === "ArrowRight") {
-                    manager?.set_opacity(o_option + 1)
+                  if (event.key === "ArrowRight") {
+                    event.preventDefault()
+                    manager?.set_opacity(o_option, 1)
                   } else if (event.key === "ArrowLeft") {
-                    manager?.set_opacity(o_option - 1)
+                    event.preventDefault()
+                    manager?.set_opacity(o_option, -1)
                   }
                 }}
-              ></div>
+              ></button>
             </div>
           {/each}
         </div>
@@ -44,7 +46,7 @@
     overflow: hidden;
   }
   .color_grid_container {
-    background-color: none;
+    background-color: transparent;
     display: grid;
     grid-template-columns: repeat(var(--columns), 1fr);
   }
@@ -60,6 +62,9 @@
     background-color: var(--bg_col);
     height: 100%;
     width: 100%;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
   }
   .is_selected {
     outline: 1px solid var(--g24);

package/dist/Components/ColorInput/OpacityPicker/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/ColorInput/ShowcasePicker/index.svelte

@@ -13,11 +13,11 @@
       <div
         class="color_overlay"
         style="--bg_col: {`${color_var(
-          manager?.val?.l,
-          manager?.val?.c,
-          manager?.val?.h,
-          manager?.val?.o,
-          manager?.val?.is_dark_theme_invert
+          manager?.val?.l ?? manager?.val_base?.l,
+          manager?.val?.c ?? manager?.val_base?.c,
+          manager?.val?.h ?? manager?.val_base?.h,
+          manager?.val?.o ?? manager?.val_base?.o,
+          manager?.val?.is_dark_theme_invert ?? manager?.val_base?.is_dark_theme_invert
         )}`}"
       ></div>
     {/snippet}
@@ -29,17 +29,25 @@
       <div class="swatch_bg" style="background-color: var(--g24); border: 1px solid var(--shadow5-t);">
         <div
           class="swatch"
-          style="--bg_col: {`${color_var(manager?.val?.l, manager?.val?.c, manager?.val?.h, manager?.val?.o, false)}`}"
+          style="--bg_col: {`${color_var(
+            manager?.val?.l ?? manager?.val_base?.l,
+            manager?.val?.c ?? manager?.val_base?.c,
+            manager?.val?.h ?? manager?.val_base?.h,
+            manager?.val?.o ?? manager?.val_base?.o,
+            false
+          )}`}"
         ></div>
       </div>
       <div class="swatch_bg" style="background-color: var(--g1); border: 1px solid var(--shadow5-t);">
         <div
           class="swatch"
           style="--bg_col: {`${color_var(
-            manager?.val?.is_dark_theme_invert ? 25 - manager?.val?.l : manager?.val?.l,
-            manager?.val?.c,
-            manager?.val?.h,
-            manager?.val?.o,
+            (manager?.val?.is_dark_theme_invert ?? manager?.val_base?.is_dark_theme_invert)
+              ? 25 - (manager?.val?.l ?? manager?.val_base?.l)
+              : manager?.val?.l ?? manager?.val_base?.l,
+            manager?.val?.c ?? manager?.val_base?.c,
+            manager?.val?.h ?? manager?.val_base?.h,
+            manager?.val?.o ?? manager?.val_base?.o,
             false
           )}`}"
         ></div>

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

@@ -0,0 +1,41 @@
+export function create_color_input_manager(config: any): {
+    id: string;
+    readonly val_base: {
+        l: number;
+        c: number;
+        h: number;
+        o: number;
+        is_dark_theme_invert: boolean;
+    };
+    readonly val: null;
+    readonly label: any;
+    readonly css_val: string;
+    readonly is_show_opacity: any;
+    readonly l_options: number[];
+    readonly c_options: number[];
+    readonly h_options: number[];
+    readonly o_options: number[];
+    readonly popover_manager: null;
+    readonly is_dark_theme_invert_checkbox_manager: null;
+    readonly toggle_button_manager: null;
+    readonly finish_button_manager: null;
+    readonly lightness_up_button_manager: null;
+    readonly lightness_down_button_manager: null;
+    readonly chroma_up_button_manager: null;
+    readonly chroma_down_button_manager: null;
+    readonly hue_up_button_manager: null;
+    readonly hue_down_button_manager: null;
+    readonly opacity_up_button_manager: null;
+    readonly opacity_down_button_manager: null;
+    readonly set_null_button_manager: null;
+    init: (config: any) => void;
+    set_val: (input: any) => void;
+    set_chroma: (c: any, change?: number) => void;
+    set_hue: (h: any, change?: number, is_ignore_on_change?: boolean) => void;
+    set_lightness: (l: any, change?: number, is_ignore_on_change?: boolean) => void;
+    set_opacity: (o: any, change?: number) => void;
+    set_lightness_and_hue: (l_input: any, h_input: any, l_change?: number, h_change?: number) => void;
+    set_is_dark_theme_invert: (input: any) => void;
+    set_null: () => void;
+    finish: () => void;
+};

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

@@ -1,7 +1,7 @@
 import { deep_copy, create_unique_id, set_closurable } from "../../client/index.js"
-import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_checkbox_manager } from "../Checkbox/manager.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_popover_manager } from "../Popover/manager.svelte.js"
 
 export function create_color_input_manager(config) {
   const base_range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
@@ -39,9 +39,10 @@ export function create_color_input_manager(config) {
   function order_num_options(input) {
     let res = deep_copy(input)
     if (Array.isArray(res)) {
-      return res.sort((a, b) => a - b)
+      const normalized_options = [...new Set(res.map(Number).filter(Number.isFinite))].sort((a, b) => a - b)
+      if (normalized_options.length) return normalized_options
     }
-    return null
+    return [...base_range]
   }
 
   let css_val = $derived(
@@ -82,8 +83,9 @@ export function create_color_input_manager(config) {
   }
 
   function get_value_in_range(value, custom_range, index_change = 1) {
+    if (!Array.isArray(custom_range) || custom_range.length === 0) return value
     const index = custom_range.findIndex((h) => h === value)
-    const new_index = index + index_change
+    const new_index = (index < 0 ? 0 : index) + index_change
     if (new_index > -1 && new_index < custom_range.length) {
       return custom_range[new_index]
     } else {
@@ -118,7 +120,7 @@ export function create_color_input_manager(config) {
       }
     }
     is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
-    let chroma_square_el = document?.querySelector(`#chroma_square_${id}_${c_to_use}`)
+    let chroma_square_el = typeof document !== "undefined" ? document.querySelector(`#chroma_square_${id}_${c_to_use}`) : null
     if (chroma_square_el) {
       chroma_square_el.focus()
     }
@@ -138,7 +140,7 @@ export function create_color_input_manager(config) {
       }
     }
     is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
-    if (config?.on_change && is_ignore_on_change) {
+    if (config?.on_change && !is_ignore_on_change) {
       config?.on_change(val)
     }
   }
@@ -154,7 +156,8 @@ export function create_color_input_manager(config) {
       }
     }
     is_dark_theme_invert_checkbox_manager.set_val(val?.is_dark_theme_invert)
-    let opacity_square_el = document?.querySelector(`#opacity_square_${id}_${o_to_use}`)
+    let opacity_square_el =
+      typeof document !== "undefined" ? document.querySelector(`#opacity_square_${id}_${o_to_use}`) : null
     if (opacity_square_el) {
       opacity_square_el.focus()
     }
@@ -163,10 +166,13 @@ export function create_color_input_manager(config) {
     }
   }
 
-  function set_lightness_and_hue(l_input, h_input) {
-    set_lightness(l_input, 0, true)
-    set_hue(h_input, 0, true)
-    let color_square_el = document?.querySelector(`#lightness_hue_square_${id}_${val?.l}_${val?.h}`)
+  function set_lightness_and_hue(l_input, h_input, l_change = 0, h_change = 0) {
+    set_lightness(l_input, l_change, true)
+    set_hue(h_input, h_change, true)
+    let color_square_el =
+      typeof document !== "undefined"
+        ? document.querySelector(`#lightness_hue_square_${id}_${val?.l}_${val?.h}`)
+        : null
     if (color_square_el) {
       color_square_el.focus()
     }
@@ -182,10 +188,16 @@ export function create_color_input_manager(config) {
     }
   }
 
+  function set_null() {
+    val = null
+    is_dark_theme_invert_checkbox_manager.set_val(val_base?.is_dark_theme_invert)
+    if (typeof config?.on_change === "function") config.on_change(null)
+  }
+
   function init(config) {
-    val_base.is_dark_theme_invert = config?.is_dark_theme_invert
+    val_base.is_dark_theme_invert = config?.is_dark_theme_invert ?? true
     is_dark_theme_invert_checkbox_manager = create_checkbox_manager({
-      val: config?.is_dark_theme_invert,
+      val: config?.is_dark_theme_invert ?? true,
       type: "toggle",
       on_change: (input) => set_is_dark_theme_invert(input),
     })
@@ -202,6 +214,7 @@ export function create_color_input_manager(config) {
       is_compressed: true,
       pl: 0.3,
       pr: 0.3,
+      aria_label: "Choose color",
       popover_target: () => `popover_${popover_manager?.id}`,
     })
     finish_button_manager = create_button_manager({
@@ -219,6 +232,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Increase lightness",
       on_click: () => set_lightness(val?.l ?? val_base?.l, 1),
     })
     lightness_down_button_manager = create_button_manager({
@@ -230,6 +244,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Decrease lightness",
       on_click: () => set_lightness(val?.l ?? val_base?.l, -1),
     })
     chroma_up_button_manager = create_button_manager({
@@ -240,6 +255,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Increase chroma",
       on_click: () => set_chroma(val?.c ?? val_base?.c, 1),
     })
     chroma_down_button_manager = create_button_manager({
@@ -251,6 +267,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Decrease chroma",
       on_click: () => set_chroma(val?.c ?? val_base?.c, -1),
     })
     hue_up_button_manager = create_button_manager({
@@ -261,6 +278,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Increase hue",
       on_click: () => set_hue(val?.h ?? val_base?.h, 1),
     })
     hue_down_button_manager = create_button_manager({
@@ -272,6 +290,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Decrease hue",
       on_click: () => set_hue(val?.h ?? val_base?.h, -1),
     })
     opacity_up_button_manager = create_button_manager({
@@ -282,6 +301,7 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Increase opacity",
       on_click: () => set_opacity(val?.o ?? val_base?.o, 1),
     })
     opacity_down_button_manager = create_button_manager({
@@ -293,13 +313,14 @@ export function create_color_input_manager(config) {
       pt: 0,
       g_base: 8,
       icon_sw: 40,
+      aria_label: "Decrease opacity",
       on_click: () => set_opacity(val?.o ?? val_base?.o, -1),
     })
     set_null_button_manager = create_button_manager({
       type: "outlined",
       text: "Set null",
       font_size: 1.2,
-      on_click: () => (val = null),
+      on_click: () => set_null(),
     })
     set_val(config?.val)
   }
@@ -381,6 +402,7 @@ export function create_color_input_manager(config) {
     set_opacity,
     set_lightness_and_hue,
     set_is_dark_theme_invert,
+    set_null,
     finish,
   }
 }

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

@@ -0,0 +1,16 @@
+export function create_conditions_input_manager(config: any): {
+    readonly val: null;
+    readonly conditions: null;
+    readonly predicate_options: {
+        key: string;
+        name: string;
+        input: string;
+    }[];
+    readonly popover_manager: null;
+    readonly popover_toggle_button_manager: null;
+    readonly operator_dropdown_manager: null;
+    readonly finish_button_manager: null;
+    readonly add_condition_button_manager: null;
+    add_condition: () => void;
+    finish: () => void;
+};

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

@@ -1,8 +1,8 @@
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
-// import { create_time_input_manager } from "../TimeInput/index.svelte.js"
-import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { create_popover_manager } from "../Popover/manager.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/manager.svelte.js"
+// import { create_time_input_manager } from "../TimeInput/manager.svelte.js"
+import { create_text_input_manager } from "../TextInput/manager.svelte.js"
 
 export function create_conditions_input_manager(config) {
   let val = $state(null)
@@ -70,7 +70,6 @@ export function create_conditions_input_manager(config) {
     if (val?.type == "operator" && Array.isArray(val?.conditions) && val?.conditions.length > 0) {
       for (let i = 0; i < val?.conditions.length; i++) {
         const input_type = predicate_options.find((h) => h?.key == val?.conditions?.[i]?.predicate)?.input
-        console.log("predicate_options", predicate_options, input_type)
         conditions_loc.push({
           input_type: input_type,
           x_button_manager: create_button_manager({
@@ -115,7 +114,6 @@ export function create_conditions_input_manager(config) {
   }
 
   function add_condition() {
-    console.log("add_condition", val)
     val.conditions = [
       ...val?.conditions,
       {
@@ -125,7 +123,6 @@ export function create_conditions_input_manager(config) {
       },
     ]
     set_conditions()
-    console.log("add_condition2", val)
   }
 
   function init(config) {

package/dist/Components/Confetti/index.svelte

@@ -1,11 +1,17 @@
 <script>
   let { manager } = $props()
+
+  $effect(() => {
+    const current_manager = manager
+    return () => current_manager?.destroy?.()
+  })
 </script>
 
 {#if manager?.is_show}
   <div
     class="container"
     class:full={manager?.type == "full"}
+    aria-hidden="true"
     style="
     --border_radius: {manager?.border_radius}rem;
     --fall_distance: {manager?.fall_distance};
@@ -13,7 +19,7 @@
     --transition_duration: {manager?.transition_duration}ms;
     --x_spread: {manager?.x_spread}"
   >
-    {#each manager?.confetti_prepped as item}
+    {#each manager?.confetti_prepped as item, i (`${item?.rotation_xyz}_${i}`)}
       <div
         class="item"
         style="
@@ -34,6 +40,7 @@
   .container {
     position: relative;
     z-index: 100;
+    pointer-events: none;
   }
   .full {
     position: fixed;
@@ -95,4 +102,11 @@
     animation: rotate var(--transition_duration) var(--transition_delay) 1 linear;
     border-radius: var(--border_radius);
   }
+  @media (prefers-reduced-motion: reduce) {
+    .item,
+    .item::before {
+      animation-duration: 1ms;
+      animation-delay: 0ms;
+    }
+  }
 </style>

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

@@ -0,0 +1,12 @@
+export function create_confetti_manager(config: any): {
+    readonly type: any;
+    readonly confetti_prepped: any[];
+    readonly is_show: boolean;
+    readonly border_radius: any;
+    readonly fall_distance: any;
+    readonly size: any;
+    readonly transition_duration: any;
+    readonly x_spread: any;
+    show_confetti: () => Promise<void>;
+    destroy: () => void;
+};

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

@@ -15,7 +15,9 @@ export function create_confetti_manager(config) {
   let border_radius = $derived(set_closurable(config?.border_radius, 0.1))
 
   let is_show = $state(false)
-  let confetti_prepped = $state(null)
+  let confetti_prepped = $state([])
+  let hide_timeout_id = null
+  let show_version = 0
 
   function random_between(min, max) {
     return (Math.random() * (max - min) + min).toPrecision(4)
@@ -32,7 +34,8 @@ export function create_confetti_manager(config) {
 
   function prep_confetti() {
     let confetti_prepped_loc = []
-    for (let i = 0; i < amount; i++) {
+    const safe_amount = Math.min(Math.max(Number.isFinite(Number(amount)) ? Math.floor(Number(amount)) : 0, 0), 500)
+    for (let i = 0; i < safe_amount; i++) {
       const item_bg = get_item_bg()
       confetti_prepped_loc.push({
         item_bg: item_bg,
@@ -49,13 +52,18 @@ export function create_confetti_manager(config) {
   }
 
   async function show_confetti() {
+    const current_show_version = ++show_version
+    if (hide_timeout_id) clearTimeout(hide_timeout_id)
     is_show = false
     prep_confetti()
     await tick()
+    if (current_show_version !== show_version) return
     is_show = true
-    setTimeout(() => {
-      is_show = false
-    }, duration + time_range)
+    const hide_after = Math.max(0, Number(duration) || 0) + Math.max(0, Number(time_range) || 0)
+    hide_timeout_id = setTimeout(() => {
+      if (current_show_version === show_version) is_show = false
+      hide_timeout_id = null
+    }, hide_after)
   }
 
   function init(config) {
@@ -64,6 +72,14 @@ export function create_confetti_manager(config) {
 
   init(config)
 
+  function destroy() {
+    show_version += 1
+    if (hide_timeout_id) clearTimeout(hide_timeout_id)
+    hide_timeout_id = null
+    is_show = false
+    confetti_prepped = []
+  }
+
   return {
     get type() {
       return type
@@ -90,5 +106,6 @@ export function create_confetti_manager(config) {
       return x_spread
     },
     show_confetti,
+    destroy,
   }
 }