@rkosafo/cai.components 0.0.80 → 0.0.81

package/dist/ui/modal/Modal.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" module>
+	let openModalCount = 0;
+</script>
+
 <script lang="ts">
 	import clsx, { type ClassValue } from 'clsx';
 	import { sineIn } from 'svelte/easing';
@@ -64,57 +68,52 @@
 		close: closeCls
 	} = $derived(modalStyle({ placement, size }));
 
-	const close = (dlg: HTMLDialogElement) => (open = false);
-	// @ts-expect-error: dlg.requestClose may not be supported
-	const cancel = (dlg: HTMLDialogElement) =>
-		typeof dlg.requestClose === 'function' ? dlg.requestClose() : close();
-
-	function _oncancel(ev: Event & { currentTarget: HTMLDialogElement }) {
-		if (ev.target !== ev.currentTarget) {
-			return; // ignore if not on dialog
-		}
+	const close = () => (open = false);
 
-		// this event gets called when user canceled the dialog:
-		// pressesed ESC key, clicked outside, pressed submit button with no 'value' like close button
+	function _oncancel(ev: Event) {
 		oncancel?.(ev);
 		if (ev.defaultPrevented) return;
-
-		ev.preventDefault(); // prevent anyway, we need clean close
-		if (!permanent) close(ev.currentTarget);
+		ev.preventDefault();
+		if (!permanent) close();
 	}
 
-	function _onclick(ev: Event & { currentTarget: HTMLDialogElement }) {
-		const dlg: HTMLDialogElement = ev.currentTarget;
-		if (outsideclose && ev.target === dlg) {
-			return cancel(dlg);
+	function _onclick(ev: MouseEvent) {
+		const target = ev.target as HTMLElement;
+		if (outsideclose && target.dataset.modalBackdrop === 'true') {
+			const cancelEvent = new Event('cancel', { cancelable: true });
+			oncancel?.(cancelEvent);
+			if (!cancelEvent.defaultPrevented && !permanent) {
+				close();
+			}
+			return;
 		}
 
-		if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
-			return close(dlg);
+		if (autoclose && target instanceof HTMLButtonElement && !permanent) {
+			close();
 		}
 	}
 
-	function _onsubmit(ev: SubmitEvent & { currentTarget: HTMLDialogElement }) {
+	function _onsubmit(ev: SubmitEvent & { currentTarget: HTMLFormElement }) {
 		// When dialog contains the <form method="dialog"> and when child with type="submit" was pressed
 
 		onsubmit?.(ev);
 		if (ev.defaultPrevented) return;
 
-		ev.preventDefault(); // stop dialog.close()
-
-		const dlg: HTMLDialogElement = ev.currentTarget;
+		ev.preventDefault();
+		const panel: HTMLElement = ref as HTMLElement;
 
 		if (ev.submitter instanceof HTMLButtonElement || ev.submitter instanceof HTMLInputElement) {
-			dlg.returnValue = ev.submitter.value;
+			panel.dataset.returnValue = ev.submitter.value;
 		}
 
-		if (!dlg.returnValue) {
-			return cancel(dlg); // if no action - treat that as cancel
+		const returnValue = panel.dataset.returnValue ?? '';
+		if (!returnValue) {
+			return _oncancel(new Event('cancel', { cancelable: true }));
 		}
 
 		// MAIN APPROACH: Use only the first nested form's data
 		let formData: FormData;
-		const nestedForms = dlg.querySelectorAll('form');
+		const nestedForms = panel.querySelectorAll('form');
 
 		if (nestedForms.length > 0) {
 			// Use the first nested form (assuming it contains the input fields)
@@ -127,7 +126,7 @@
 		// ALTERNATIVE APPROACH: Combine data from all nested forms (uncomment to use)
 
 		const combinedFormData = new FormData();
-		const allForms = dlg.querySelectorAll('form');
+		const allForms = panel.querySelectorAll('form');
 
 		allForms.forEach((form) => {
 			new FormData(form).forEach((value, key) => {
@@ -141,26 +140,40 @@
 		// explicit false from onaction blocks the form closing
 		if (
 			typeof onaction === 'function' &&
-			onaction({ action: dlg.returnValue, data: formData }) === false
+			onaction({ action: returnValue, data: formData }) === false
 		)
 			return;
 
-		close(dlg);
-	}
-
-	function _ontoggle(ev: ToggleEvent & { currentTarget: HTMLDialogElement }) {
-		ontoggle?.(ev);
-		open = ev.newState === 'open'; // for cases when toggle by other means
-	}
-
-	function init(dlg: HTMLDialogElement) {
-		modal ? dlg.showModal() : dlg.show();
-		return () => dlg.close();
+		close();
 	}
 
 	const focusTrap = (node: HTMLElement) => (focustrap ? trapFocus(node) : undefined);
 
-	let ref: HTMLDialogElement | undefined = $state(undefined);
+	let ref: HTMLDivElement | undefined = $state(undefined);
+
+	let previousOpen = false;
+	$effect(() => {
+		if (open && !previousOpen) {
+			openModalCount += 1;
+			if (modal) document.body.style.overflow = 'hidden';
+			ontoggle?.({ newState: 'open', oldState: 'closed' } as ToggleEvent);
+		}
+		if (!open && previousOpen) {
+			openModalCount = Math.max(0, openModalCount - 1);
+			if (modal && openModalCount === 0) document.body.style.overflow = '';
+			ontoggle?.({ newState: 'closed', oldState: 'open' } as ToggleEvent);
+		}
+		previousOpen = open;
+	});
+
+	$effect(() => {
+		return () => {
+			if (previousOpen) {
+				openModalCount = Math.max(0, openModalCount - 1);
+				if (modal && openModalCount === 0) document.body.style.overflow = '';
+			}
+		};
+	});
 
 	function close_handler(ev: MouseEvent) {
 		if (form) {
@@ -168,7 +181,9 @@
 			return;
 		}
 
-		ref?.dispatchEvent(new Event('cancel', { bubbles: true, cancelable: true }));
+		const cancelEvent = new Event('cancel', { cancelable: true });
+		oncancel?.(cancelEvent);
+		if (!cancelEvent.defaultPrevented && !permanent) close();
 	}
 
 	createDismissableContext(close_handler);
@@ -180,7 +195,14 @@
 			{#if title}
 				<h3>{title}</h3>
 				{#if dismissable && !permanent}
-					<CloseButton type="submit" formnovalidate class={clsx(styling.close)} />
+					<CloseButton
+						type={form ? 'submit' : 'button'}
+						formnovalidate
+						class={clsx(styling.close)}
+						onclick={() => {
+							if (!form) close();
+						}}
+					/>
 				{/if}
 			{:else if header}
 				{@render header()}
@@ -197,24 +219,46 @@
 	{/if}
 	{#if dismissable && !permanent && !title}
 		<CloseButton
-			type="submit"
+			type={form ? 'submit' : 'button'}
 			formnovalidate
 			class={closeCls({ class: clsx(theme?.close, styling.close) })}
+			onclick={() => {
+				if (!form) close();
+			}}
 		/>
 	{/if}
 {/snippet}
 
 {#if open}
-	<dialog
-		{@attach init}
+	<div
 		bind:this={ref}
 		use:focusTrap
-		class={base({ fullscreen, class: clsx(theme?.base, className) })}
+		class="fixed inset-0 z-40 flex items-center justify-center p-4"
+		onclick={_onclick}
+		onkeydown={(ev) => {
+			if (ev.key === 'Escape' && !permanent) {
+				_oncancel(new Event('cancel', { cancelable: true }));
+			}
+		}}
+		tabindex="-1"
+		aria-modal={modal ? 'true' : undefined}
+		role="dialog"
+	>
+		{#if modal}
+			<div class="absolute inset-0 bg-black/80" data-modal-backdrop="true"></div>
+		{/if}
+		<div
+			class={base({
+				fullscreen,
+				class: clsx(
+					theme?.base,
+					className,
+					'relative z-10',
+					!modal && 'shadow-xl'
+				)
+			})}
 		tabindex="-1"
 		onsubmit={_onsubmit}
-		oncancel={_oncancel}
-		onclick={_onclick}
-		ontoggle={_ontoggle}
 		transition:transition|global={paramsOptions as ParamsType}
 		{...restProps}
 	>
@@ -225,7 +269,8 @@
 		{:else}
 			{@render content()}
 		{/if}
-	</dialog>
+		</div>
+	</div>
 {/if}
 
 <!--

package/dist/ui/toast/Toast.svelte

@@ -1,337 +1,176 @@
 <script lang="ts" module>
-	export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading' | 'custom';
-	export type ToastPosition =
-		| 'top-left'
-		| 'top-center'
-		| 'top-right'
-		| 'bottom-left'
-		| 'bottom-center'
-		| 'bottom-right';
-
-	export interface CustomToastOptions extends ToastOptions {
-		icon?: string;
-		showProgress?: boolean;
-		progressColor?: string;
-		borderColor?: string;
-		backgroundColor?: string;
-		textColor?: string;
-		iconColor?: string;
-		style?: any;
-		action?: {
-			label: string | boolean;
-			onClick: () => void;
-			buttonStyle?: string;
-		};
-	}
-
-	export interface ToastTheme {
-		success?: Partial<CustomToastOptions>;
-		error?: Partial<CustomToastOptions>;
-		warning?: Partial<CustomToastOptions>;
-		info?: Partial<CustomToastOptions>;
-		loading?: Partial<CustomToastOptions>;
-		custom?: Partial<CustomToastOptions>;
-	}
+	import {
+		toast as originalToast,
+		type DefaultToastOptions,
+		type Renderable,
+		resolveValue,
+		type ToastOptions,
+		type ToastPosition,
+		type ToastType,
+		type ValueOrFunction
+	} from 'svelte-french-toast';
+	export {
+		CheckmarkIcon,
+		ErrorIcon,
+		LoaderIcon,
+		ToastBar,
+		ToastIcon,
+		useToaster,
+		useToasterStore
+	} from 'svelte-french-toast';
+	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 interface ToasterProps {
 		position?: ToastPosition;
 		duration?: number;
-		theme?: ToastTheme;
+		toastOptions?: DefaultToastOptions;
+		reverseOrder?: boolean;
+		gutter?: number;
+		containerStyle?: string;
+		containerClassName?: string;
+		fireWithSound?: boolean;
+		// Kept for backward compatibility (no-op in wrapper mode)
 		className?: string;
-		toastOptions?: ToastOptions;
+		theme?: ToastTheme;
 		richColors?: boolean;
 		customIcons?: boolean;
 		closeButton?: boolean;
 		pauseOnHover?: boolean;
-		reverseOrder?: boolean;
 		visibleToasts?: number;
 		expand?: boolean;
 		gap?: number;
 		offset?: number | string;
 	}
-	// Default theme configuration
-	const defaultTheme: ToastTheme = {
-		success: {
-			icon: '✅',
-			borderColor: '#22c55e',
-			backgroundColor: '#f0fdf4',
-			textColor: '#166534',
-			iconColor: '#16a34a',
-			progressColor: '#22c55e'
-		},
-		error: {
-			icon: '❌',
-			borderColor: '#ef4444',
-			backgroundColor: '#fef2f2',
-			textColor: '#991b1b',
-			iconColor: '#dc2626',
-			progressColor: '#ef4444'
-		},
-		warning: {
-			icon: '⚠️',
-			borderColor: '#f59e0b',
-			backgroundColor: '#fffbeb',
-			textColor: '#92400e',
-			iconColor: '#d97706',
-			progressColor: '#f59e0b'
-		},
-		info: {
-			icon: 'ℹ️',
-			borderColor: '#3b82f6',
-			backgroundColor: '#eff6ff',
-			textColor: '#1e40af',
-			iconColor: '#2563eb',
-			progressColor: '#3b82f6'
-		},
-		loading: {
-			icon: '⏳',
-			borderColor: '#6b7280',
-			backgroundColor: '#f9fafb',
-			textColor: '#374151',
-			iconColor: '#6b7280',
-			progressColor: '#6b7280'
-		}
-	};
 
 	let currentDuration = 4000;
-	let currentTheme: ToastTheme = {};
-	let currentRichColors = false;
-
-	function buildToastStyle(
-		theme: Partial<CustomToastOptions>,
-		options?: CustomToastOptions,
-		type?: ToastType,
-		richColors?: boolean
-	): string {
-		if (options?.style) return options.style;
-
-		const baseStyle = `
-			border: 1px solid ${options?.borderColor || theme.borderColor || '#e5e7eb'};
-			background: ${options?.backgroundColor || theme.backgroundColor || '#ffffff'};
-			color: ${options?.textColor || theme.textColor || '#1f2937'};
-			padding: 12px 16px;
-			border-radius: 8px;
-			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-			font-size: 14px;
-			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-			display: flex;
-			align-items: center;
-			gap: 8px;
-		`;
-
-		if (richColors && type && defaultTheme[type]) {
-			const richTheme = defaultTheme[type]!;
-			return `
-				${baseStyle}
-				border-color: ${options?.borderColor || richTheme.borderColor}!important;
-				background: ${options?.backgroundColor || richTheme.backgroundColor}!important;
-				color: ${options?.textColor || richTheme.textColor}!important;
-			`;
+	let currentFireWithSound = false;
+
+	function playToastSound() {
+		if (!currentFireWithSound || typeof window === 'undefined') return;
+
+		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);
+		} catch {
+			// Ignore audio errors.
 		}
-
-		return baseStyle;
 	}
 
-	export const toast = {
-		success: (message: string, options?: CustomToastOptions) => {
-			const themeOptions = currentTheme?.success || defaultTheme.success || {};
-			const style = buildToastStyle(themeOptions, options, 'success');
-
-			return originalToast.success(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon
-			});
-		},
-
-		error: (message: string, options?: CustomToastOptions) => {
-			const themeOptions = currentTheme?.error || defaultTheme.error || {};
-			const style = buildToastStyle(themeOptions, options, 'error');
-
-			return originalToast.error(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon
-			});
-		},
-
-		warning: (message: string, options?: CustomToastOptions) => {
-			const themeOptions = currentTheme?.warning || defaultTheme.warning || {};
-			const style = buildToastStyle(themeOptions, options, 'warning');
-
-			return originalToast(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon
-			});
-		},
-
-		info: (message: string, options?: CustomToastOptions) => {
-			const themeOptions = currentTheme?.info || defaultTheme.info || {};
-			const style = buildToastStyle(themeOptions, options, 'info');
-
-			return originalToast(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon
-			});
-		},
-
-		loading: (message: string, options?: CustomToastOptions) => {
-			const themeOptions = currentTheme?.loading || defaultTheme.loading || {};
-			const style = buildToastStyle(themeOptions, options, 'loading');
-
-			return originalToast.loading(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon
-			});
-		},
-
-		promise: <T,>(
-			promise: Promise<T>,
-			messages: { loading: string; success: string; error: string },
-			options?: {
-				loading?: CustomToastOptions;
-				success?: CustomToastOptions;
-				error?: CustomToastOptions;
-			}
-		) => {
-			const loadingTheme = currentTheme?.loading || defaultTheme.loading || {};
-			const successTheme = currentTheme?.success || defaultTheme.success || {};
-			const errorTheme = currentTheme?.error || defaultTheme.error || {};
-
-			return originalToast.promise(promise, messages, {
-				loading: {
-					...loadingTheme,
-					...options?.loading,
-					style: buildToastStyle(loadingTheme, options?.loading, 'loading'),
-					icon: options?.loading?.icon || loadingTheme.icon
-				},
-				success: {
-					...successTheme,
-					...options?.success,
-					style: buildToastStyle(successTheme, options?.success, 'success'),
-					icon: options?.success?.icon || successTheme.icon
-				},
-				error: {
-					...errorTheme,
-					...options?.error,
-					style: buildToastStyle(errorTheme, options?.error, 'error'),
-					icon: options?.error?.icon || errorTheme.icon
-				}
-			});
-		},
-
-		// Custom toast with complete control
-		custom: (message: string, type: ToastType = 'info', options?: CustomToastOptions) => {
-			const themeOptions = currentTheme?.[type] || defaultTheme[type] || defaultTheme.info || {};
-			const style = buildToastStyle(themeOptions, options, type);
-
-			return originalToast(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon
-			});
-		},
-
-		// Action toast with button
-		action: (
-			message: string,
-			action: { label: string; onClick: () => void },
-			options?: CustomToastOptions
-		) => {
-			const themeOptions = currentTheme?.info || defaultTheme.info || {};
-			const style = buildToastStyle(themeOptions, options, 'info');
-
-			return originalToast(message, {
-				duration: currentDuration,
-				...themeOptions,
-				...options,
-				style,
-				icon: options?.icon || themeOptions.icon,
-				action: {
-					label: action.label,
-					onClick: action.onClick,
-					buttonStyle:
-						options?.action?.buttonStyle ||
-						'background: #3b82f6; color: white; border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer;'
-				}
-			});
-		},
-
-		// Dismiss specific toast or all toasts
-		dismiss: (toastId?: string) => {
-			return originalToast.dismiss(toastId);
-		},
-
-		// Remove specific toast
-		remove: (toastId?: string) => {
-			return originalToast.remove(toastId);
-		}
-	};
-
 	export function updateToastConfig(config: {
 		duration?: number;
+		fireWithSound?: boolean;
 		theme?: ToastTheme;
 		richColors?: boolean;
 	}) {
 		if (config.duration !== undefined) currentDuration = config.duration;
-		if (config.theme !== undefined) currentTheme = config.theme;
-		if (config.richColors !== undefined) currentRichColors = config.richColors;
+		if (config.fireWithSound !== undefined) currentFireWithSound = config.fireWithSound;
 	}
 
+	export const toast = Object.assign(
+		(message: Renderable, options?: ToastOptions) => {
+			playToastSound();
+			return originalToast(message, { duration: currentDuration, ...options });
+		},
+		{
+			success: (message: Renderable, options?: ToastOptions) => {
+				playToastSound();
+				return originalToast.success(message, { duration: currentDuration, ...options });
+			},
+			error: (message: Renderable, options?: ToastOptions) => {
+				playToastSound();
+				return originalToast.error(message, { duration: currentDuration, ...options });
+			},
+			loading: (message: Renderable, options?: ToastOptions) => {
+				playToastSound();
+				return originalToast.loading(message, { duration: currentDuration, ...options });
+			},
+			promise: <T,>(
+				promise: Promise<T>,
+				msgs: {
+					loading: Renderable;
+					success: ValueOrFunction<Renderable, T>;
+					error: ValueOrFunction<Renderable, any>;
+				},
+				opts?: DefaultToastOptions
+			) => {
+				playToastSound();
+				return originalToast.promise(promise, msgs, opts);
+			},
+			dismiss: originalToast.dismiss.bind(originalToast),
+			remove: originalToast.remove.bind(originalToast),
+			custom: originalToast.custom.bind(originalToast)
+		}
+	);
+
 	export { originalToast };
 	export type { ToastOptions };
 </script>
 
 <script lang="ts">
-	import { Toaster, toast as originalToast, type ToastOptions } from 'svelte-french-toast';
+	import { Toaster } from 'svelte-french-toast';
 
 	let {
 		position = 'top-center',
 		duration = 4000,
-		theme = {},
-		className = '',
 		toastOptions = {},
+		reverseOrder = false,
+		gutter = 8,
+		containerStyle,
+		containerClassName,
+		className = '',
+		theme = {},
 		richColors = false,
 		customIcons = true,
 		closeButton = true,
 		pauseOnHover = true,
-		reverseOrder = false,
 		visibleToasts = 3,
 		expand = false,
 		gap = 8,
-		offset = '32px'
+		offset = '32px',
+		fireWithSound = false
 	}: ToasterProps = $props();
 
 	$effect(() => {
-		updateToastConfig({ duration, theme, richColors });
+		// theme/richColors/customIcons are intentionally ignored in wrapper mode.
+		void theme;
+		void richColors;
+		void customIcons;
+		updateToastConfig({ duration, fireWithSound });
 	});
 </script>
 
 <Toaster
 	{position}
-	{duration}
-	{className}
 	{toastOptions}
-	{closeButton}
-	{pauseOnHover}
 	{reverseOrder}
-	{visibleToasts}
-	{expand}
-	{gap}
-	{offset}
+	{gutter}
+	{containerStyle}
+	containerClassName={containerClassName || className}
 />