@castlenine/svelte-canvas-confetti 1.1.0 → 5.0.1

package/README.md

@@ -13,13 +13,7 @@ Canvas-based confetti for Svelte 🎉, with no dependencies.
 * Supports image-based confetti.
 * Allows full customization of confetti behavior using the `onCreate` and `onUpdate` hooks.
 
-## Examples
-
-[Simple Demo](https://svelte.dev/repl/84bb431468264dabbfdd0750ef949f9f?version=3.50.1)
-
-[Firework Demo](https://svelte.dev/repl/8d05b7c60c244fe0b7e09b027dd3bc5d?version=3.50.1)
-
-[Advanced Demo](https://svelte.dev/repl/5cefe21763c445d986c6e23ddea1327a?version=3.50.1)
+## 🚀 [Demo](https://svelte-canvas-confetti.vercel.app/)
 
 ## Installation
 
@@ -83,6 +77,43 @@ If no properties are passed in, it will behave the same as **FallingConfetti**.
 <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
@@ -101,7 +132,7 @@ The number of particles to create.
 
 A list of styles used to render particles. Can be any valid HTML color or an `HTMLImageElement`.
 
-**Type:** `ParticleStyle[]`
+**Type:** `readonly ParticleStyle[]`
 **Default value:** `['hotpink', 'gold', 'dodgerblue', 'tomato', 'rebeccapurple', 'lightgreen', 'turquoise']`
 **Example:**
 
@@ -157,7 +188,7 @@ The spread used when creating each particle’s initial direction. The particle'
 <Confetti origin={[100, 100]} spread={45} />
 ```
 
-## onCreate
+### onCreate
 
 This can be used to override the properties of each particle at creation time.
 
@@ -175,7 +206,7 @@ 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.
 
@@ -191,7 +222,27 @@ This can be used to override the properties of each particle at update time.
 />
 ```
 
-## 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 = {

package/dist/Confetti.svelte

@@ -1,81 +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) {
-        const P = particles[i];
-        if (!P.dead && P.life >= P.delay)
-            renderParticle(context, P);
-    }
-};
-const updateParticles = (context, particles, dt, onUpdate) => {
-    const CW = context.canvas.width;
-    const CH = context.canvas.height;
-    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(P, CW, CH))
-                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 DT = Math.min((_t - t) / 1e3, 0.1);
-        const STILL_RUNNING = updateParticles(CONTEXT, PARTICLES, DT, 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.ts"],"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;AA+Q5G,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;;;;;;;;CACc,CAAC;AAC1D,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"}

package/dist/ConfettiBurst.svelte

@@ -1,9 +1,37 @@
-<script>import Confetti from "./Confetti.svelte";
-export let origin;
-export let styles = void 0;
-export let particleCount = 50;
-export let onCreate = void 0;
-export let onUpdate = void 0;
+<!--
+@component
+Confetti burst effect. Spawns particles from a single origin point that explode outward in all directions (360° spread).
+
+&nbsp;
+
+@prop origin {Position} - Origin position [x, y] of the confetti burst. Required.
+@prop styles {readonly ParticleStyle[]} [undefined] - Render styles for confetti. Valid HTML colors or HTMLImageElement.
+@prop particleCount {number} [50] - Number of particles to create.
+@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 lang="ts">
+	import type { OnCreateParticle, OnUpdateParticle, ParticleStyle, Position } from './utils/types';
+
+	import Confetti from './Confetti.svelte';
+
+	const {
+		origin,
+		styles = undefined,
+		particleCount = 50,
+		onCreate = undefined,
+		onUpdate = undefined,
+		onCompleted,
+	} = $props<{
+		origin: Position;
+		styles?: readonly ParticleStyle[];
+		particleCount?: number;
+		onCreate?: OnCreateParticle;
+		onUpdate?: OnUpdateParticle;
+		onCompleted?: () => void;
+	}>();
 </script>
 
-<Confetti {particleCount} {origin} {styles} {onCreate} {onUpdate} on:completed />
+<Confetti {origin} {particleCount} {styles} {onCompleted} {onCreate} {onUpdate} />

package/dist/ConfettiBurst.svelte.d.ts

@@ -1,72 +1,25 @@
-import { SvelteComponentTyped } from "svelte";
 import type { OnCreateParticle, OnUpdateParticle, ParticleStyle, Position } from './utils/types';
-declare const __propDef: {
-    props: {
-        /**
-             * The origin position of the confetti burst.
-             * @required
-             * @example
-             * ```
-             * <ConfettiBurst origin={[50, 50]} />
-             * ```
-             */ origin: Position;
-        /**
-             * 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
-             * ```
-             * <ConfettiBurst colors={['red', '#ff0000', 'hsl(250, 54%, 85%)']} />
-             * ```
-             */ styles?: ParticleStyle[] | undefined;
-        /**
-             * The number of particles to create.
-             * @default 50
-             * @example
-             * ```
-             * <ConfettiBurst particleCount={100} />
-             * ```
-             */ particleCount?: 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
-             * ```
-             * <ConfettiBurst
-             *   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
-             * ```
-             * <ConfettiBurst
-             *   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 = {
+    origin: Position;
+    styles?: readonly ParticleStyle[];
+    particleCount?: number;
+    onCreate?: OnCreateParticle;
+    onUpdate?: OnUpdateParticle;
+    onCompleted?: () => void;
 };
-export type ConfettiBurstProps = typeof __propDef.props;
-export type ConfettiBurstEvents = typeof __propDef.events;
-export type ConfettiBurstSlots = typeof __propDef.slots;
-export default class ConfettiBurst extends SvelteComponentTyped<ConfettiBurstProps, ConfettiBurstEvents, ConfettiBurstSlots> {
-}
-export {};
+/**
+ * Confetti burst effect. Spawns particles from a single origin point that explode outward in all directions (360° spread).
+ *
+ * &nbsp;
+ *
+ * @prop origin {Position} - Origin position [x, y] of the confetti burst. Required.
+ * @prop styles {readonly ParticleStyle[]} [undefined] - Render styles for confetti. Valid HTML colors or HTMLImageElement.
+ * @prop particleCount {number} [50] - Number of particles to create.
+ * @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 ConfettiBurst: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConfettiBurst = ReturnType<typeof ConfettiBurst>;
+export default ConfettiBurst;
 //# sourceMappingURL=ConfettiBurst.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ConfettiBurst.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ConfettiBurst.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA8HjG,QAAA,MAAM,SAAS;;QArDf;;;;;;;eAOI;QACJ;;;;;;;;eAQI,UAAS,aAAa,EAAE,GAAG,SAAS;QACxC;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACc,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"ConfettiBurst.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ConfettiBurst.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIhG,KAAK,gBAAgB,GAAG;IACvB,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAsBH;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}