@rkosafo/cai.components 0.0.82 → 0.0.83

package/dist/ui/modal/Modal.svelte

@@ -233,7 +233,7 @@
 	<div
 		bind:this={ref}
 		use:focusTrap
-		class="fixed inset-0 z-40 flex items-center justify-center p-4"
+		class="fixed inset-0 z-40 overflow-y-auto p-4"
 		onclick={_onclick}
 		onkeydown={(ev) => {
 			if (ev.key === 'Escape' && !permanent) {
@@ -253,22 +253,22 @@
 				class: clsx(
 					theme?.base,
 					className,
-					'relative z-10',
+					fullscreen ? 'z-10' : 'absolute z-10',
 					!modal && 'shadow-xl'
 				)
 			})}
-		tabindex="-1"
-		onsubmit={_onsubmit}
-		transition:transition|global={paramsOptions as ParamsType}
-		{...restProps}
-	>
-		{#if form}
-			<form method="dialog" class={formCls({ class: clsx(theme?.form) })}>
+			tabindex="-1"
+			onsubmit={_onsubmit}
+			transition:transition|global={paramsOptions as ParamsType}
+			{...restProps}
+		>
+			{#if form}
+				<form method="dialog" class={formCls({ class: clsx(theme?.form) })}>
+					{@render content()}
+				</form>
+			{:else}
 				{@render content()}
-			</form>
-		{:else}
-			{@render content()}
-		{/if}
+			{/if}
 		</div>
 	</div>
 {/if}

package/dist/ui/toast/Toast.svelte

@@ -34,6 +34,15 @@
 	export type CustomToastOptions = ToastOptions;
 	export type ToastTheme = Record<string, never>;
 
+	export type ToastSoundPreset =
+		| 'chime'
+		| 'ding'
+		| 'bell'
+		| 'soft'
+		| 'pop'
+		| 'pulse'
+		| 'airy';
+
 	export interface ToasterProps {
 		position?: ToastPosition;
 		duration?: number;
@@ -43,6 +52,8 @@
 		containerStyle?: string;
 		containerClassName?: string;
 		fireWithSound?: boolean;
+		/** Web Audio preset when `fireWithSound` is true. Default `chime`. */
+		soundPreset?: ToastSoundPreset;
 		// Kept for backward compatibility (no-op in wrapper mode)
 		className?: string;
 		theme?: ToastTheme;
@@ -58,58 +69,188 @@
 
 	let currentDuration = 4000;
 	let currentFireWithSound = false;
+	let currentSoundPreset: ToastSoundPreset = 'chime';
 
-	function playToastSound() {
-		if (!currentFireWithSound || typeof window === 'undefined') return;
+	let sharedAudioContext: AudioContext | null = null;
 
+	function getSharedAudioContext(): AudioContext | null {
+		if (typeof window === 'undefined') return null;
 		try {
-			const AudioContextClass = window.AudioContext || (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
-			if (!AudioContextClass) return;
-
-			const context = new AudioContextClass();
-			const oscillator = context.createOscillator();
-			const gain = context.createGain();
-			oscillator.type = 'sine';
-			oscillator.frequency.setValueAtTime(880, context.currentTime);
-			gain.gain.setValueAtTime(0.0001, context.currentTime);
-			gain.gain.exponentialRampToValueAtTime(0.06, context.currentTime + 0.01);
-			gain.gain.exponentialRampToValueAtTime(0.0001, context.currentTime + 0.18);
-			oscillator.connect(gain);
-			gain.connect(context.destination);
-			oscillator.start();
-			oscillator.stop(context.currentTime + 0.2);
+			if (sharedAudioContext && sharedAudioContext.state !== 'closed') {
+				return sharedAudioContext;
+			}
+			sharedAudioContext = null;
+			const AudioContextClass =
+				window.AudioContext || (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+			if (!AudioContextClass) return null;
+			sharedAudioContext = new AudioContextClass();
+			return sharedAudioContext;
 		} catch {
-			// Ignore audio errors.
+			return null;
+		}
+	}
+
+	function envelopeAttackRelease(
+		gain: GainNode,
+		ctx: AudioContext,
+		t: number,
+		peak: number,
+		attack: number,
+		release: number
+	) {
+		gain.gain.setValueAtTime(0.0001, t);
+		gain.gain.exponentialRampToValueAtTime(peak, t + attack);
+		gain.gain.exponentialRampToValueAtTime(0.0001, t + attack + release);
+	}
+
+	function playPresetSound(ctx: AudioContext, preset: ToastSoundPreset) {
+		const t0 = ctx.currentTime;
+
+		switch (preset) {
+			case 'chime': {
+				const freqs = [523.25, 659.25];
+				for (let i = 0; i < freqs.length; i++) {
+					const start = t0 + i * 0.065;
+					const osc = ctx.createOscillator();
+					const g = ctx.createGain();
+					osc.type = 'sine';
+					osc.frequency.setValueAtTime(freqs[i], start);
+					envelopeAttackRelease(g, ctx, start, 0.07, 0.012, 0.11);
+					osc.connect(g);
+					g.connect(ctx.destination);
+					osc.start(start);
+					osc.stop(start + 0.2);
+				}
+				break;
+			}
+			case 'ding': {
+				const osc = ctx.createOscillator();
+				const g = ctx.createGain();
+				osc.type = 'sine';
+				osc.frequency.setValueAtTime(1046.5, t0);
+				envelopeAttackRelease(g, ctx, t0, 0.08, 0.004, 0.14);
+				osc.connect(g);
+				g.connect(ctx.destination);
+				osc.start(t0);
+				osc.stop(t0 + 0.2);
+				break;
+			}
+			case 'bell': {
+				const osc = ctx.createOscillator();
+				const g = ctx.createGain();
+				osc.type = 'triangle';
+				osc.frequency.setValueAtTime(740, t0);
+				envelopeAttackRelease(g, ctx, t0, 0.06, 0.006, 0.22);
+				osc.connect(g);
+				g.connect(ctx.destination);
+				osc.start(t0);
+				osc.stop(t0 + 0.28);
+				break;
+			}
+			case 'soft': {
+				const osc = ctx.createOscillator();
+				const g = ctx.createGain();
+				osc.type = 'sine';
+				osc.frequency.setValueAtTime(392, t0);
+				envelopeAttackRelease(g, ctx, t0, 0.05, 0.02, 0.2);
+				osc.connect(g);
+				g.connect(ctx.destination);
+				osc.start(t0);
+				osc.stop(t0 + 0.26);
+				break;
+			}
+			case 'pop': {
+				const osc = ctx.createOscillator();
+				const g = ctx.createGain();
+				osc.type = 'sine';
+				osc.frequency.setValueAtTime(320, t0);
+				envelopeAttackRelease(g, ctx, t0, 0.06, 0.002, 0.045);
+				osc.connect(g);
+				g.connect(ctx.destination);
+				osc.start(t0);
+				osc.stop(t0 + 0.08);
+				break;
+			}
+			case 'pulse': {
+				const osc = ctx.createOscillator();
+				const g = ctx.createGain();
+				osc.type = 'sine';
+				osc.frequency.setValueAtTime(620, t0);
+				osc.frequency.exponentialRampToValueAtTime(920, t0 + 0.07);
+				envelopeAttackRelease(g, ctx, t0, 0.07, 0.003, 0.08);
+				osc.connect(g);
+				g.connect(ctx.destination);
+				osc.start(t0);
+				osc.stop(t0 + 0.12);
+				break;
+			}
+			case 'airy':
+			default: {
+				const osc = ctx.createOscillator();
+				const g = ctx.createGain();
+				osc.type = 'sine';
+				osc.frequency.setValueAtTime(1760, t0);
+				envelopeAttackRelease(g, ctx, t0, 0.025, 0.002, 0.07);
+				osc.connect(g);
+				g.connect(ctx.destination);
+				osc.start(t0);
+				osc.stop(t0 + 0.1);
+				break;
+			}
 		}
 	}
 
+	/** Schedules sound after the current frame so the toast paints first; handles suspended AudioContext. */
+	function scheduleToastSound() {
+		if (!currentFireWithSound || typeof window === 'undefined') return;
+
+		queueMicrotask(() => {
+			void (async () => {
+				const ctx = getSharedAudioContext();
+				if (!ctx) return;
+				try {
+					if (ctx.state === 'suspended') await ctx.resume();
+					playPresetSound(ctx, currentSoundPreset);
+				} catch {
+					// Ignore audio errors.
+				}
+			})();
+		});
+	}
+
 	export function updateToastConfig(config: {
 		duration?: number;
 		fireWithSound?: boolean;
+		soundPreset?: ToastSoundPreset;
 		theme?: ToastTheme;
 		richColors?: boolean;
 	}) {
 		if (config.duration !== undefined) currentDuration = config.duration;
 		if (config.fireWithSound !== undefined) currentFireWithSound = config.fireWithSound;
+		if (config.soundPreset !== undefined) currentSoundPreset = config.soundPreset;
 	}
 
 	export const toast = Object.assign(
 		(message: Renderable, options?: ToastOptions) => {
-			playToastSound();
-			return originalToast(message, { duration: currentDuration, ...options });
+			const id = originalToast(message, { duration: currentDuration, ...options });
+			scheduleToastSound();
+			return id;
 		},
 		{
 			success: (message: Renderable, options?: ToastOptions) => {
-				playToastSound();
-				return originalToast.success(message, { duration: currentDuration, ...options });
+				const id = originalToast.success(message, { duration: currentDuration, ...options });
+				scheduleToastSound();
+				return id;
 			},
 			error: (message: Renderable, options?: ToastOptions) => {
-				playToastSound();
-				return originalToast.error(message, { duration: currentDuration, ...options });
+				const id = originalToast.error(message, { duration: currentDuration, ...options });
+				scheduleToastSound();
+				return id;
 			},
 			loading: (message: Renderable, options?: ToastOptions) => {
-				playToastSound();
-				return originalToast.loading(message, { duration: currentDuration, ...options });
+				const id = originalToast.loading(message, { duration: currentDuration, ...options });
+				scheduleToastSound();
+				return id;
 			},
 			promise: <T,>(
 				promise: Promise<T>,
@@ -120,8 +261,9 @@
 				},
 				opts?: DefaultToastOptions
 			) => {
-				playToastSound();
-				return originalToast.promise(promise, msgs, opts);
+				const out = originalToast.promise(promise, msgs, opts);
+				scheduleToastSound();
+				return out;
 			},
 			dismiss: originalToast.dismiss.bind(originalToast),
 			remove: originalToast.remove.bind(originalToast),
@@ -154,7 +296,8 @@
 		expand = false,
 		gap = 8,
 		offset = '32px',
-		fireWithSound = false
+		fireWithSound = false,
+		soundPreset = 'chime'
 	}: ToasterProps = $props();
 
 	$effect(() => {
@@ -162,7 +305,7 @@
 		void theme;
 		void richColors;
 		void customIcons;
-		updateToastConfig({ duration, fireWithSound });
+		updateToastConfig({ duration, fireWithSound, soundPreset });
 	});
 </script>
 

package/dist/ui/toast/Toast.svelte.d.ts

@@ -4,6 +4,7 @@ export { resolveValue };
 export type { DefaultToastOptions, IconTheme, Toast, ToastOptions, ToastPosition, ToastType, Renderable, ValueFunction, ValueOrFunction } from 'svelte-french-toast';
 export type CustomToastOptions = ToastOptions;
 export type ToastTheme = Record<string, never>;
+export type ToastSoundPreset = 'chime' | 'ding' | 'bell' | 'soft' | 'pop' | 'pulse' | 'airy';
 export interface ToasterProps {
     position?: ToastPosition;
     duration?: number;
@@ -13,6 +14,8 @@ export interface ToasterProps {
     containerStyle?: string;
     containerClassName?: string;
     fireWithSound?: boolean;
+    /** Web Audio preset when `fireWithSound` is true. Default `chime`. */
+    soundPreset?: ToastSoundPreset;
     className?: string;
     theme?: ToastTheme;
     richColors?: boolean;
@@ -27,6 +30,7 @@ export interface ToasterProps {
 export declare function updateToastConfig(config: {
     duration?: number;
     fireWithSound?: boolean;
+    soundPreset?: ToastSoundPreset;
     theme?: ToastTheme;
     richColors?: boolean;
 }): void;

package/dist/ui/toast/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Toaster, toast, originalToast, updateToastConfig } from './Toast.svelte';
-export type { ToasterProps, ToastType, CustomToastOptions, ToastTheme, ToastOptions } from './Toast.svelte';
+export type { ToasterProps, ToastSoundPreset, ToastType, CustomToastOptions, ToastTheme, ToastOptions } from './Toast.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.82",
+  "version": "0.0.83",
   "files": [
     "dist",
     "!dist/**/*.test.*",