@castlenine/svelte-canvas-confetti 1.0.0 → 5.0.0

package/{LICENSE → LICENSE.md}

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright (c) 2024 Alexandre "Castlenine"
+Copyright (c) 2024–present Alex "Castlenine"
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -2,28 +2,24 @@
 
 # `@castlenine/svelte-canvas-confetti`
 
-[![npm.badge]][npm] [![download.badge]][download]
+[![npm.badge]][npm] [![download.badge]][download] [![contribution.badge]][contribution]
 
-Canvas-based confetti for Svelte 🎉, without dependencies
+Canvas-based confetti for Svelte 🎉, with no dependencies.
 </div>
 
 ## Features
 
 * Uses a single canvas to render full-screen confetti.
 * Supports image-based confetti.
-* Allows full customization of confetti behavior using `onCreate` and `onUpdate` hooks.
+* Allows full customization of confetti behavior using the `onCreate` and `onUpdate` hooks.
 
-## Examples
+## 🚀 [Demo](https://svelte-canvas-confetti.vercel.app/)
 
-[Simple Demo](https://svelte.dev/repl/84bb431468264dabbfdd0750ef949f9f?version=3.50.1)
+## Installation
 
-[Firework Demo](https://svelte.dev/repl/8d05b7c60c244fe0b7e09b027dd3bc5d?version=3.50.1)
+Use your package manager to install:
 
-[Advanced Demo](https://svelte.dev/repl/5cefe21763c445d986c6e23ddea1327a?version=3.50.1)
-
-## Installing
-
-```bash
+```shell
 npm i @castlenine/svelte-canvas-confetti
 ```
 
@@ -45,7 +41,7 @@ Adds confetti falling from the top of the screen.
 
 ### ConfettiBurst
 
-Adds a confetti burst anywhere on the screen. It requires an origin position.
+Adds a confetti burst anywhere on the screen. Requires an origin position.
 
 ```svelte
 <script>
@@ -57,7 +53,7 @@ Adds a confetti burst anywhere on the screen. It requires an origin position.
 
 ### ConfettiCannon
 
-Adds a confetti cannon that can shoot out directional confetti. It requires an origin position.
+Adds a confetti cannon that can shoot directional confetti. Requires an origin position.
 
 ```svelte
 <script>
@@ -69,9 +65,9 @@ Adds a confetti cannon that can shoot out directional confetti. It requires an o
 
 ### Confetti
 
-Adds any type of confetti. This is the main component that the other three are just simple wrappers around.
+Adds any type of confetti. This is the main component, and the other three are simple wrappers around it.
 
-If no properties are passed in, it will create the same result as **FallingConfetti**.
+If no properties are passed in, it will behave the same as **FallingConfetti**.
 
 ```svelte
 <script>
@@ -81,11 +77,48 @@ If no properties are passed in, it will create the same result as **FallingConfe
 <Confetti />
 ```
 
+## Image Handling
+
+You can use images instead of colors by passing `HTMLImageElement` instances to the `styles` prop. It is recommended to use [Vite's built-in image handling](https://svelte.dev/docs/kit/images#Vite's-built-in-handling) to import images from `$lib/assets` — this ensures proper asset hashing, inlining of small files, and tree-shaking.
+
+```svelte
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import { FallingConfetti } from '@castlenine/svelte-canvas-confetti';
+
+  import SmallLogo from '$lib/assets/logos/logo-small.png';
+
+  let imageLogo = $state<HTMLImageElement | null>(null);
+  let showConfetti = $state(false);
+
+  onMount(() => {
+    imageLogo = new Image();
+    imageLogo.src = SmallLogo;
+
+    imageLogo.onload = () => {
+      showConfetti = true;
+    };
+  });
+</script>
+
+{#if showConfetti && imageLogo}
+  <FallingConfetti
+    particleCount={142}
+    styles={[imageLogo]}
+    onCompleted={() => {
+      showConfetti = false;
+    }} />
+{/if}
+```
+
+The image import path can be placed wherever appropriate in your project, using any alias you prefer (e.g., `$lib/assets/images/`, `$lib/assets/logos/`, `$assets/images/`).
+
 ## Props
 
 ### particleCount
 
-Number of particles to create.
+The number of particles to create.
 
 **Type:** `number`
 **Default value:** `50`
@@ -97,10 +130,10 @@ Number of particles to create.
 
 ### styles
 
-A list of styles used to render particles. Can be any valid HTML color or an HTMLImageElement.
+A list of styles used to render particles. Can be any valid HTML color or an `HTMLImageElement`.
 
-**Type:** `Array<string | HTMLImageElement>`
-**Default value:** `['hotpink','gold','dodgerblue','tomato','rebeccapurple','lightgreen','turquoise']`
+**Type:** `readonly ParticleStyle[]`
+**Default value:** `['hotpink', 'gold', 'dodgerblue', 'tomato', 'rebeccapurple', 'lightgreen', 'turquoise']`
 **Example:**
 
 ```svelte
@@ -109,9 +142,9 @@ A list of styles used to render particles. Can be any valid HTML color or an HTM
 
 ### origin
 
-The origin of the particles. If this is not used, the particles will fall from the top of the screen.
+The origin of the particles. If this is not provided, the particles will fall from the top of the screen.
 
-**Type:** `[number, number]`
+**Type:** `Position`
 **Default value:** `undefined`
 **Example:**
 
@@ -133,7 +166,7 @@ The initial force used to shoot out confetti. This has no effect if `origin` is
 
 ### angle
 
-The angle used to shoot out confetti. This has no effect if `origin` is not used. It can be combined with `spread` to create a "cannon".
+The angle used to shoot out confetti. This has no effect if `origin` is not used. Can be combined with `spread` to create a "cannon" effect.
 
 **Type:** `number`
 **Default value:** 0
@@ -145,7 +178,7 @@ The angle used to shoot out confetti. This has no effect if `origin` is not used
 
 ### spread
 
-The spread used when creating each particles initial direction. The particle's initial direction will be a value between `angle - spread / 2` and `angle + spread / 2`. This has no effect if `origin` is not used.
+The spread used when creating each particle’s initial direction. The particle's initial direction will be a value between `angle - spread / 2` and `angle + spread / 2`. This has no effect if `origin` is not used.
 
 **Type:** `number`
 **Default value:** 360
@@ -155,12 +188,12 @@ The spread used when creating each particles initial direction. The particle's i
 <Confetti origin={[100, 100]} spread={45} />
 ```
 
-## onCreate
+### onCreate
 
 This can be used to override the properties of each particle at creation time.
 
 **Type:** `(particle) => particle`
-**Default value:** undefined
+**Default value:** `undefined`
 **Example:**
 
 ```svelte
@@ -173,27 +206,47 @@ This can be used to override the properties of each particle at creation time.
 />
 ```
 
-## onUpdate
+### onUpdate
 
 This can be used to override the properties of each particle at update time.
 
 **Type:** `(particle, deltaTime) => void`
-**Default value:** undefined
+**Default value:** `undefined`
 **Example:**
 
 ```svelte
 <Confetti
-  onCreate={(particle) => {
+  onUpdate={(particle) => {
     particle.x += Math.random() * 5;
   }}
 />
 ```
 
-## Particle object
+### onCompleted
+
+A callback fired when all particles have exited the screen.
+
+**Type:** `() => void`
+**Default value:** `undefined`
+**Example:**
+
+```svelte
+<script>
+  import { Confetti } from '@castlenine/svelte-canvas-confetti';
+
+  let showConfetti = $state(true);
+</script>
+
+{#if showConfetti}
+  <Confetti onCompleted={() => { showConfetti = false; }} />
+{/if}
+```
+
+## Particle Object
 
 ```typescript
 export type Particle = {
-  // Stop updating/rendering the particle once it is "dead" (ie off screen)
+  // Stop updating/rendering the particle once it is "dead" (i.e., off screen)
   dead: boolean;
 
   // The total time since the particle was created.
@@ -229,7 +282,7 @@ export type Particle = {
   // Vertical gravity.
   gy: number;
 
-  // The "width" of the falling motion. The falling motion is calculated as Math.sin(life * xw)
+  // The "width" of the falling motion. The falling motion is calculated as Math.sin(life * xw).
   xw: number;
 
   // The style of the particle. Either an HTML color or an HTMLImageElement.
@@ -237,6 +290,22 @@ export type Particle = {
 };
 ```
 
+## Exported Types
+
+The following types are exported from the package:
+
+```typescript
+import type { Particle, ParticleStyle, Position, OnCreateParticle, OnUpdateParticle } from '@castlenine/svelte-canvas-confetti';
+```
+
+| Type | Description |
+| --- | --- |
+| `Particle` | The particle object used in `onCreate` and `onUpdate` callbacks. |
+| `ParticleStyle` | `string \| HTMLImageElement` — a valid HTML color or an image element. |
+| `Position` | `[number, number]` — an `[x, y]` coordinate tuple. |
+| `OnCreateParticle` | `(p: Particle) => Particle` — callback to customize particles at creation. |
+| `OnUpdateParticle` | `(p: Particle, dt: number) => void` — callback to modify particles each frame. |
+
 ---
 
 Forked from [andreasmcdermott/svelte-canvas-confetti](https://github.com/andreasmcdermott/svelte-canvas-confetti)
@@ -245,3 +314,5 @@ Forked from [andreasmcdermott/svelte-canvas-confetti](https://github.com/andreas
 [npm.badge]: https://img.shields.io/npm/v/@castlenine/svelte-canvas-confetti
 [download]: https://www.npmjs.com/package/@castlenine/svelte-canvas-confetti
 [download.badge]: https://img.shields.io/npm/d18m/@castlenine/svelte-canvas-confetti
+[contribution]: https://github.com/Castlenine/svelte-aoe
+[contribution.badge]: https://img.shields.io/badge/contributions-welcome-green

package/dist/Confetti.svelte

@@ -1,76 +1,165 @@
-<script context="module">import { COLORS } from "./utils/constants";
-import { createParticle, isOutOfBounds, renderParticle, updateParticle } from "./utils/particle";
-const renderParticles = (context, particles) => {
-    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
-    for (let i = 0; i < particles.length; ++i) {
-        renderParticle(context, particles[i]);
-    }
-};
-const updateParticles = (context, particles, dt, onUpdate) => {
-    let livingParticles = particles.length;
-    for (let i = 0; i < particles.length; ++i) {
-        const P = particles[i];
-        if (P.dead) {
-            livingParticles--;
-        }
-        else {
-            updateParticle(P, dt);
-            if (isOutOfBounds(context, P))
-                P.dead = true;
-            if (onUpdate)
-                onUpdate(P, dt);
-        }
-    }
-    return livingParticles > 0;
-};
-const start = (canvas, onCompleted, particleCount, origin, force, angle, spread, styles, onCreate, onUpdate) => {
-    const CONTEXT = canvas.getContext("2d");
-    if (!CONTEXT)
-        throw new Error("No context?");
-    const PARTICLES = Array.from({ length: particleCount }, () => createParticle(CONTEXT, origin, force, angle, spread, styles, onCreate));
-    let frameId;
-    let t;
-    const run = (_t) => {
-        renderParticles(CONTEXT, PARTICLES);
-        const STILL_RUNNING = updateParticles(CONTEXT, PARTICLES, (_t - t) / 1e3, onUpdate);
-        if (STILL_RUNNING) {
-            t = _t;
-            frameId = requestAnimationFrame(run);
-        }
-        else {
-            onCompleted();
-        }
-    };
-    t = performance.now();
-    frameId = requestAnimationFrame(run);
-    return () => {
-        cancelAnimationFrame(frameId);
-    };
-};
+<!--
+@component
+Full-screen canvas-based confetti renderer. Spawns particles on mount and animates them via `requestAnimationFrame` until all exit the viewport, then fires `onCompleted`. Used internally by `ConfettiBurst`, `ConfettiCannon`, and `FallingConfetti`.
+
+&nbsp;
+
+@prop styles {readonly ParticleStyle[]} [COLORS] - Render styles for confetti. Each particle gets a random value. Valid HTML colors or HTMLImageElement.
+@prop particleCount {number} [50] - Number of particles to create.
+@prop origin {Position} [undefined] - Origin position [x, y]. If omitted, confetti falls from the top.
+@prop force {number} [15] - Burst velocity. Higher = faster/further. No effect without origin.
+@prop angle {number} [0] - Burst direction in degrees. Use with spread for directed bursts. No effect without origin.
+@prop spread {number} [360] - Angular spread in degrees. Use with angle for directed bursts. No effect without origin.
+@prop onCreate {OnCreateParticle} [undefined] - Callback to override initial particle values at creation time.
+@prop onUpdate {OnUpdateParticle} [undefined] - Callback called each frame per particle for custom animation logic.
+@prop onCompleted {() => void} [undefined] - Callback fired when all particles have exited the screen.
+-->
+
+<script module lang="ts">
+	import type { OnCreateParticle, OnUpdateParticle, Particle, ParticleStyle, Position } from './utils/types';
+
+	import { COLORS } from './utils/constants';
+	import { createParticle, isOutOfBounds, renderParticle, updateParticle } from './utils/particle';
+
+	function renderParticles(context: CanvasRenderingContext2D, particles: Particle[]): void {
+		context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+
+		for (let index = 0; index < particles.length; ++index) {
+			const PARTICLE = particles[index];
+
+			if (!PARTICLE.dead && PARTICLE.life >= PARTICLE.delay) renderParticle(context, PARTICLE);
+		}
+	}
+
+	/**
+	 * @returns {boolean} Returns false if no more confettis on the screen.
+	 */
+	function updateParticles(
+		context: CanvasRenderingContext2D,
+		particles: Particle[],
+		dt: number,
+		onUpdate?: OnUpdateParticle,
+	): boolean {
+		const CW = context.canvas.width;
+		const CH = context.canvas.height;
+		let livingParticles = particles.length;
+
+		for (let index = 0; index < particles.length; ++index) {
+			const PARTICLE = particles[index];
+
+			if (PARTICLE.dead) {
+				livingParticles--;
+			} else {
+				updateParticle(PARTICLE, dt);
+
+				if (isOutOfBounds(PARTICLE, CW, CH)) PARTICLE.dead = true;
+				if (onUpdate) onUpdate(PARTICLE, dt);
+			}
+		}
+
+		return livingParticles > 0;
+	}
+
+	interface StartOptions {
+		canvas: HTMLCanvasElement;
+		onCompleted: () => void;
+		particleCount: number;
+		origin: Position | undefined;
+		force: number;
+		angle: number;
+		spread: number;
+		styles: readonly ParticleStyle[];
+		onCreate?: OnCreateParticle;
+		onUpdate?: OnUpdateParticle;
+	}
+
+	function start(options: StartOptions): () => void {
+		const { canvas, onCompleted, particleCount, origin, force, angle, spread, styles, onCreate, onUpdate } = options;
+		const MAYBE_CONTEXT = canvas.getContext('2d');
+
+		if (!MAYBE_CONTEXT) throw new Error('No context?');
+
+		const CONTEXT: CanvasRenderingContext2D = MAYBE_CONTEXT;
+
+		const PARTICLES: Particle[] = Array.from({ length: particleCount }, () =>
+			createParticle({ context: CONTEXT, origin, force, angle, spread, styles, onCreate }),
+		);
+
+		let frameId: number;
+		let timestamp: number;
+
+		function run(currentTimestamp: number): void {
+			renderParticles(CONTEXT, PARTICLES);
+			const DT = Math.min((currentTimestamp - timestamp) / 1e3, 0.1);
+			const STILL_RUNNING = updateParticles(CONTEXT, PARTICLES, DT, onUpdate);
+
+			if (STILL_RUNNING) {
+				timestamp = currentTimestamp;
+				frameId = requestAnimationFrame(run);
+			} else {
+				onCompleted();
+			}
+		}
+
+		timestamp = performance.now();
+		frameId = requestAnimationFrame(run);
+
+		return () => {
+			cancelAnimationFrame(frameId);
+		};
+	}
 </script>
 
-<script>import { onMount, createEventDispatcher } from "svelte";
-export let styles = COLORS;
-export let particleCount = 50;
-export let origin = void 0;
-export let force = 15;
-export let angle = 0;
-export let spread = 360;
-export let onCreate = void 0;
-export let onUpdate = void 0;
-const dispatch = createEventDispatcher();
-let canvas;
-let w;
-let h;
-onMount(() => {
-    canvas.width = w;
-    canvas.height = h;
-    return start(canvas, () => dispatch("completed"), particleCount, origin, force, angle, spread, styles, onCreate, onUpdate);
-});
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	const {
+		styles = COLORS,
+		particleCount = 50,
+		origin = undefined,
+		force = 15,
+		angle = 0,
+		spread = 360,
+		onCreate = undefined,
+		onUpdate = undefined,
+		onCompleted,
+	} = $props<{
+		styles?: readonly ParticleStyle[];
+		particleCount?: number;
+		origin?: Position;
+		force?: number;
+		angle?: number;
+		spread?: number;
+		onCreate?: OnCreateParticle;
+		onUpdate?: OnUpdateParticle;
+		onCompleted?: () => void;
+	}>();
+
+	let canvasWidth: number = $state(0);
+	let canvasHeight: number = $state(0);
+	let canvas: HTMLCanvasElement;
+
+	onMount(() => {
+		canvas.width = canvasWidth;
+		canvas.height = canvasHeight;
+
+		return start({
+			canvas,
+			onCompleted: () => onCompleted?.(),
+			particleCount,
+			origin,
+			force,
+			angle,
+			spread,
+			styles,
+			onCreate,
+			onUpdate,
+		});
+	});
 </script>
 
-<svelte:window bind:innerWidth={w} bind:innerHeight={h} />
-<canvas bind:this={canvas} width={w} height={h} />
+<svelte:window bind:innerHeight={canvasHeight} bind:innerWidth={canvasWidth} />
+<canvas width={canvasWidth} height={canvasHeight} bind:this={canvas}></canvas>
 
 <style>
 	canvas {

package/dist/Confetti.svelte.d.ts

@@ -1,96 +1,31 @@
-import { SvelteComponentTyped } from "svelte";
 import type { OnCreateParticle, OnUpdateParticle, ParticleStyle, Position } from './utils/types';
-declare const __propDef: {
-    props: {
-        /**
-             * A list of render styles to use for the confetti. Each confetti will be assigned a random value from the list.
-             * The values can either be valid HTML colors or an HTMLImageElement.
-             * @default ['hotpink','gold','dodgerblue','tomato','rebeccapurple','lightgreen','turquoise']
-             * @example
-             * ```
-             * <Confetti colors={['red', '#ff0000', 'hsl(250, 54%, 85%)']} />
-             * ```
-             */ styles?: ParticleStyle[] | undefined;
-        /**
-             * The number of particles to create.
-             * @default 50
-             * @example
-             * ```
-             * <Confetti particleCount={100} />
-             * ```
-             */ particleCount?: number | undefined;
-        /**
-             * The origin position of the confetti. If this is not passed in, the confetti will fall from the top of the screen.
-             * @default undefined
-             * @example
-             * ```
-             * <Confetti origin={[50, 50]} />
-             * ```
-             */ origin?: Position | undefined;
-        /**
-             * The force of the burst. A larger number will shoot the confetti faster and further. Has no effect if origin isn't passed in.
-             * @default 15
-             * @example
-             * ```
-             * <Confetti origin={[50, 50]} force={15} />
-             * ```
-             */ force?: number | undefined;
-        /**
-             * Angle in degrees of the burst. This can be used together with spread to create a directed burst. Has no effect if origin isn't passed in.
-             * @default 0
-             * @example
-             * ```
-             * <Confetti origin={[50, 50]} angle={90} />
-             * ```
-             */ angle?: number | undefined;
-        /**
-             * The spread in degrees of the burst. This can be used together with angle to create a directed burst. Has no effect if origin isn't passed in.
-             * @default 360
-             * @example
-             * ```
-             * <Confetti origin={[50, 50]} spread={90} />
-             * ```
-             */ spread?: number | undefined;
-        /**
-             * By default, each particle is created with some random variation. The initial values of each particle can be overridden using the onCreate callback.
-             * @default undefined
-             * @example
-             * ```
-             * <Confetti
-             *   onCreate={(particle) => {
-             *     particle.style = 'blue';
-             *     particle.x = window.innerWidth / 2;
-             *     return particle;
-             * 	 }}
-             * />
-             * ```
-             */ onCreate?: OnCreateParticle | undefined;
-        /**
-             * The onUpdate callback can be used to modify the particle on each frame.
-             * @default undefined
-             * @example
-             * ```
-             * <Confetti
-             *   onUpdate={(particle, deltaTime) => {
-             *     if (particle.angle < 0 && particle.da < 0) {
-             *       particle.da *= -1;
-             * 		 }
-             * 	 }}
-             * />
-             * ```
-             */ onUpdate?: OnUpdateParticle | undefined;
-    };
-    events: {
-        completed: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    styles?: readonly ParticleStyle[];
+    particleCount?: number;
+    origin?: Position;
+    force?: number;
+    angle?: number;
+    spread?: number;
+    onCreate?: OnCreateParticle;
+    onUpdate?: OnUpdateParticle;
+    onCompleted?: () => void;
 };
-export type ConfettiProps = typeof __propDef.props;
-export type ConfettiEvents = typeof __propDef.events;
-export type ConfettiSlots = typeof __propDef.slots;
-export default class Confetti extends SvelteComponentTyped<ConfettiProps, ConfettiEvents, ConfettiSlots> {
-}
-export {};
+/**
+ * Full-screen canvas-based confetti renderer. Spawns particles on mount and animates them via `requestAnimationFrame` until all exit the viewport, then fires `onCompleted`. Used internally by `ConfettiBurst`, `ConfettiCannon`, and `FallingConfetti`.
+ *
+ * &nbsp;
+ *
+ * @prop styles {readonly ParticleStyle[]} [COLORS] - Render styles for confetti. Each particle gets a random value. Valid HTML colors or HTMLImageElement.
+ * @prop particleCount {number} [50] - Number of particles to create.
+ * @prop origin {Position} [undefined] - Origin position [x, y]. If omitted, confetti falls from the top.
+ * @prop force {number} [15] - Burst velocity. Higher = faster/further. No effect without origin.
+ * @prop angle {number} [0] - Burst direction in degrees. Use with spread for directed bursts. No effect without origin.
+ * @prop spread {number} [360] - Angular spread in degrees. Use with angle for directed bursts. No effect without origin.
+ * @prop onCreate {OnCreateParticle} [undefined] - Callback to override initial particle values at creation time.
+ * @prop onUpdate {OnUpdateParticle} [undefined] - Callback called each frame per particle for custom animation logic.
+ * @prop onCompleted {() => void} [undefined] - Callback fired when all particles have exited the screen.
+ */
+declare const Confetti: import("svelte").Component<$$ComponentProps, {}, "">;
+type Confetti = ReturnType<typeof Confetti>;
+export default Confetti;
 //# sourceMappingURL=Confetti.svelte.d.ts.map

package/dist/Confetti.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Confetti.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/Confetti.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAY,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA2Q5G,QAAA,MAAM,SAAS;;QA7Ef;;;;;;;;eAQI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI,UAAS,QAAQ,GAAG,SAAS;QACjC;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACY,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Confetti.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Confetti.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAY,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAgG3G,KAAK,gBAAgB,GAAG;IACvB,MAAM,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAkDH;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}