@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/src/components/message-dialog/message-dialog-state.ts

@@ -5,26 +5,26 @@ export type DialogMessageType = 'error' | 'success' | 'info' | 'warning';
 export type { HugeiconsIconDefinition };
 
 export interface ShowMessageDialogOptions {
-    type?: DialogMessageType;
-    title?: string;
-    message: string;
-    closeText?: string;
-    icon?: HugeiconsIconDefinition | null;
-    closeButtonIcon?: HugeiconsIconDefinition | null;
+	type?: DialogMessageType;
+	title?: string;
+	message: string;
+	closeText?: string;
+	icon?: HugeiconsIconDefinition | null;
+	closeButtonIcon?: HugeiconsIconDefinition | null;
 }
 
 interface MessageDialogRequest {
-    id: number;
-    options: Omit<ShowMessageDialogOptions, 'icon' | 'closeButtonIcon'> & {
-        icon: HugeiconsIconDefinition | null;
-        closeButtonIcon: HugeiconsIconDefinition | null;
-    };
-    resolve: () => void;
+	id: number;
+	options: Omit<ShowMessageDialogOptions, 'icon' | 'closeButtonIcon'> & {
+		icon: HugeiconsIconDefinition | null;
+		closeButtonIcon: HugeiconsIconDefinition | null;
+	};
+	resolve: () => void;
 }
 
 interface MessageDialogState {
-    current: MessageDialogRequest | null;
-    isOpen: boolean;
+	current: MessageDialogRequest | null;
+	isOpen: boolean;
 }
 
 const messageDialogQueue: MessageDialogRequest[] = [];
@@ -37,8 +37,8 @@ const MESSAGE_DIALOG_ROOT_ID = 'ui-vintage-message-dialog-root';
 
 // Shared message dialog state
 export const messageDialogState: MessageDialogState = reactive({
-    current: null,
-    isOpen: false
+	current: null,
+	isOpen: false
 });
 
 // Keep icon definitions non-reactive
@@ -46,121 +46,121 @@ const markIcon = (icon: HugeiconsIconDefinition | null | undefined) => icon ? ma
 
 // Mount the dialog once on demand
 const ensureMessageDialogMounted = () => {
-    // Skip mounting during SSR
-    if (typeof document === 'undefined') {
-        return Promise.resolve();
-    }
-
-    // Reuse the existing mount root
-    const existingRoot = document.getElementById(MESSAGE_DIALOG_ROOT_ID);
-    if (existingRoot) {
-        return Promise.resolve();
-    }
-
-    // Reuse the in-flight mount
-    if (messageDialogMountPromise) {
-        return messageDialogMountPromise;
-    }
-
-    // Start the lazy mount
-    messageDialogMountPromise = (async () => {
-        // Load the component only when needed
-        const { default: MessageDialog } = await import('./MessageDialog.vue');
-
-        // Guard against a concurrent mount
-        if (document.getElementById(MESSAGE_DIALOG_ROOT_ID)) {
-            return;
-        }
-
-        // Create the host element and render the component
-        const container = document.createElement('div');
-        container.id = MESSAGE_DIALOG_ROOT_ID;
-        document.body.appendChild(container);
-        render(h(MessageDialog), container);
-    })().finally(() => {
-        messageDialogMountPromise = null;
-    });
-
-    // Let callers await the mount
-    return messageDialogMountPromise;
+	// Skip mounting during SSR
+	if (typeof document === 'undefined') {
+		return Promise.resolve();
+	}
+
+	// Reuse the existing mount root
+	const existingRoot = document.getElementById(MESSAGE_DIALOG_ROOT_ID);
+	if (existingRoot) {
+		return Promise.resolve();
+	}
+
+	// Reuse the in-flight mount
+	if (messageDialogMountPromise) {
+		return messageDialogMountPromise;
+	}
+
+	// Start the lazy mount
+	messageDialogMountPromise = (async () => {
+		// Load the component only when needed
+		const { default: MessageDialog } = await import('./MessageDialog.vue');
+
+		// Guard against a concurrent mount
+		if (document.getElementById(MESSAGE_DIALOG_ROOT_ID)) {
+			return;
+		}
+
+		// Create the host element and render the component
+		const container = document.createElement('div');
+		container.id = MESSAGE_DIALOG_ROOT_ID;
+		document.body.appendChild(container);
+		render(h(MessageDialog), container);
+	})().finally(() => {
+		messageDialogMountPromise = null;
+	});
+
+	// Let callers await the mount
+	return messageDialogMountPromise;
 };
 
 // Show the next queued dialog
 const openNextMessageDialog = () => {
-    const nextDialog = messageDialogQueue.shift() ?? null;
-    messageDialogState.current = nextDialog;
-    messageDialogState.isOpen = Boolean(nextDialog);
+	const nextDialog = messageDialogQueue.shift() ?? null;
+	messageDialogState.current = nextDialog;
+	messageDialogState.isOpen = Boolean(nextDialog);
 };
 
 // Queue a new dialog request
 const enqueueMessageDialog = (request: MessageDialogRequest) => {
-    messageDialogQueue.push(request);
-    if (!messageDialogState.current) {
-        openNextMessageDialog();
-    }
+	messageDialogQueue.push(request);
+	if (!messageDialogState.current) {
+		openNextMessageDialog();
+	}
 };
 
 // Clear the active dialog and continue the queue
 const clearCurrentMessageDialog = () => {
-    messageDialogState.isOpen = false;
-    messageDialogState.current = null;
-    openNextMessageDialog();
+	messageDialogState.isOpen = false;
+	messageDialogState.current = null;
+	openNextMessageDialog();
 };
 
 // Close the current dialog after the leave transition
 const scheduleCloseCurrentMessageDialog = () => {
-    // Guard against missing or already closing dialogs
-    if (!messageDialogState.current || !messageDialogState.isOpen) {
-        return;
-    }
-
-    // Start the close transition
-    messageDialogState.isOpen = false;
-    if (closeTimer) {
-        clearTimeout(closeTimer);
-    }
-
-    // Schedule the dialog to be cleared after the transition
-    closeTimer = setTimeout(() => {
-        closeTimer = null;
-        clearCurrentMessageDialog();
-    }, DIALOG_CLOSE_DURATION_MS);
+	// Guard against missing or already closing dialogs
+	if (!messageDialogState.current || !messageDialogState.isOpen) {
+		return;
+	}
+
+	// Start the close transition
+	messageDialogState.isOpen = false;
+	if (closeTimer) {
+		clearTimeout(closeTimer);
+	}
+
+	// Schedule the dialog to be cleared after the transition
+	closeTimer = setTimeout(() => {
+		closeTimer = null;
+		clearCurrentMessageDialog();
+	}, DIALOG_CLOSE_DURATION_MS);
 };
 
 // Resolve the dialog as closed
 export const closeMessageDialog = () => {
-    const current = messageDialogState.current;
-    if (!current || !messageDialogState.isOpen) return;
-    current.resolve();
-    scheduleCloseCurrentMessageDialog();
+	const current = messageDialogState.current;
+	if (!current || !messageDialogState.isOpen) return;
+	current.resolve();
+	scheduleCloseCurrentMessageDialog();
 };
 
 // Resolve the active message dialog
 export const resolveActiveMessageDialog = () => {
-    const current = messageDialogState.current;
-    if (!current || !messageDialogState.isOpen) return;
-    current.resolve();
-    scheduleCloseCurrentMessageDialog();
+	const current = messageDialogState.current;
+	if (!current || !messageDialogState.isOpen) return;
+	current.resolve();
+	scheduleCloseCurrentMessageDialog();
 };
 
 // Queue and show a message dialog
 export const showMessageDialog = (options: ShowMessageDialogOptions) => {
-    // Ensure the renderer exists before queuing work
-    void ensureMessageDialogMounted();
-
-    // Return a promise that resolves when the dialog is closed
-    return new Promise<void>((resolve) => {
-        enqueueMessageDialog({
-            id: nextMessageDialogId += 1,
-            options: {
-                type: options.type ?? 'info',
-                title: options.title ?? '',
-                message: options.message,
-                closeText: options.closeText ?? '',
-                icon: markIcon(options.icon),
-                closeButtonIcon: markIcon(options.closeButtonIcon)
-            },
-            resolve
-        });
-    });
+	// Ensure the renderer exists before queuing work
+	void ensureMessageDialogMounted();
+
+	// Return a promise that resolves when the dialog is closed
+	return new Promise<void>((resolve) => {
+		enqueueMessageDialog({
+			id: nextMessageDialogId += 1,
+			options: {
+				type: options.type ?? 'info',
+				title: options.title ?? '',
+				message: options.message,
+				closeText: options.closeText ?? '',
+				icon: markIcon(options.icon),
+				closeButtonIcon: markIcon(options.closeButtonIcon)
+			},
+			resolve
+		});
+	});
 };

package/src/components/message-toast/MessageToast.vue

@@ -26,25 +26,25 @@ const regionAriaLabel = computed(() => getUiVintageRuntimeMessage('uiVintage.toa
 
 // Resolve the icon for each toast type
 const getToastIcon = (toast: MessageToastItem) => {
-    if (toast.icon) return toast.icon;
-    if (toast.type === 'success') return CheckmarkCircle02Icon;
-    return toast.type === 'info' ? InformationCircleIcon : AlertCircleIcon;
+	if (toast.icon) return toast.icon;
+	if (toast.type === 'success') return CheckmarkCircle02Icon;
+	return toast.type === 'info' ? InformationCircleIcon : AlertCircleIcon;
 };
 
 // Resolve the tinted icon tile classes for each toast type
 const toneClasses: Record<MessageToastType, string> = {
-    success: 'border-success/25 bg-success/10 text-success',
-    info: 'border-info/25 bg-info/10 text-info',
-    warning: 'border-warning/25 bg-warning/10 text-warning',
-    error: 'border-destructive/25 bg-destructive/10 text-destructive'
+	success: 'border-success/25 bg-success/10 text-success',
+	info: 'border-info/25 bg-info/10 text-info',
+	warning: 'border-warning/25 bg-warning/10 text-warning',
+	error: 'border-destructive/25 bg-destructive/10 text-destructive'
 };
 
 // Progress bar color for each toast type
 const progressClasses: Record<MessageToastType, string> = {
-    success: 'bg-success',
-    info: 'bg-info',
-    warning: 'bg-warning',
-    error: 'bg-destructive'
+	success: 'bg-success',
+	info: 'bg-info',
+	warning: 'bg-warning',
+	error: 'bg-destructive'
 };
 
 const toasts = computed(() => messageToastState.toasts);
@@ -52,41 +52,41 @@ const frontHeight = computed(() => (toasts.value[0] && heights.get(toasts.value[
 
 // Height of the stack container so the hover area always matches what is visible
 const containerHeight = computed(() => {
-    const visible = toasts.value.slice(0, VISIBLE_TOASTS);
-    if (!visible.length) return 0;
-    if (expanded.value) {
-        return visible.reduce((total, toast) => total + (heights.get(toast.id) || 0), 0) + STACK_GAP_PX * (visible.length - 1);
-    }
-    return frontHeight.value + STACK_OFFSET_PX * (visible.length - 1);
+	const visible = toasts.value.slice(0, VISIBLE_TOASTS);
+	if (!visible.length) return 0;
+	if (expanded.value) {
+		return visible.reduce((total, toast) => total + (heights.get(toast.id) || 0), 0) + STACK_GAP_PX * (visible.length - 1);
+	}
+	return frontHeight.value + STACK_OFFSET_PX * (visible.length - 1);
 });
 
 // Compute the stacked position of a toast from its index (0 = newest)
 const getToastStyle = (toast: MessageToastItem, index: number) => {
-    const isSwiping = swipe.id === toast.id;
-    let offset = 0;
-    let scale = 1;
-
-    // Expanded: toasts sit on top of each other with a gap
-    if (expanded.value) {
-        for (const previous of toasts.value.slice(0, index)) {
-            offset += (heights.get(previous.id) || 0) + STACK_GAP_PX;
-        }
-    } else {
-        // Collapsed: toasts peek out behind the front one
-        offset = index * STACK_OFFSET_PX;
-        scale = 1 - index * 0.05;
-    }
-
-    return {
-        '--uv-toast-leave-x': `${(leaveDirection.get(toast.id) ?? 1) * 110}%`,
-        zIndex: String(100 - index),
-        translate: `${isSwiping ? swipe.deltaX : 0}px ${-offset}px`,
-        scale: String(scale),
-        opacity: index >= VISIBLE_TOASTS ? '0' : isSwiping ? String(1 - Math.min(Math.abs(swipe.deltaX) / 240, 0.6)) : '1',
-        height: !expanded.value && index > 0 && frontHeight.value ? `${frontHeight.value}px` : undefined,
-        pointerEvents: index >= VISIBLE_TOASTS ? 'none' as const : undefined,
-        transition: isSwiping ? 'none' : undefined
-    };
+	const isSwiping = swipe.id === toast.id;
+	let offset = 0;
+	let scale = 1;
+
+	// Expanded: toasts sit on top of each other with a gap
+	if (expanded.value) {
+		for (const previous of toasts.value.slice(0, index)) {
+			offset += (heights.get(previous.id) || 0) + STACK_GAP_PX;
+		}
+	} else {
+		// Collapsed: toasts peek out behind the front one
+		offset = index * STACK_OFFSET_PX;
+		scale = 1 - index * 0.05;
+	}
+
+	return {
+		'--uv-toast-leave-x': `${(leaveDirection.get(toast.id) ?? 1) * 110}%`,
+		zIndex: String(100 - index),
+		translate: `${isSwiping ? swipe.deltaX : 0}px ${-offset}px`,
+		scale: String(scale),
+		opacity: index >= VISIBLE_TOASTS ? '0' : isSwiping ? String(1 - Math.min(Math.abs(swipe.deltaX) / 240, 0.6)) : '1',
+		height: !expanded.value && index > 0 && frontHeight.value ? `${frontHeight.value}px` : undefined,
+		pointerEvents: index >= VISIBLE_TOASTS ? 'none' as const : undefined,
+		transition: isSwiping ? 'none' : undefined
+	};
 };
 
 // Toast content elements currently watched by the observer, by toast id
@@ -94,172 +94,172 @@ const observedElements = new Map<number, HTMLElement>();
 
 // Measure toast content heights so the stack can lay itself out
 const resizeObserver = typeof ResizeObserver !== 'undefined'
-    ? new ResizeObserver((entries) => {
-        for (const entry of entries) {
-            const id = Number((entry.target as HTMLElement).dataset.toastId);
+	? new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			const id = Number((entry.target as HTMLElement).dataset.toastId);
 
-            // Skip late notifications for toasts that already left
-            if (observedElements.get(id) !== entry.target) continue;
-            heights.set(id, (entry.target as HTMLElement).offsetHeight);
-        }
-    })
-    : null;
+			// Skip late notifications for toasts that already left
+			if (observedElements.get(id) !== entry.target) continue;
+			heights.set(id, (entry.target as HTMLElement).offsetHeight);
+		}
+	})
+	: null;
 
 // Register toast content elements with the observer
 const observeToast = (element: unknown) => {
-    if (element instanceof HTMLElement && resizeObserver) {
-        const id = Number(element.dataset.toastId);
-        if (observedElements.get(id) === element) return;
-        heights.set(id, element.offsetHeight);
-        observedElements.set(id, element);
-        resizeObserver.observe(element);
-    }
+	if (element instanceof HTMLElement && resizeObserver) {
+		const id = Number(element.dataset.toastId);
+		if (observedElements.get(id) === element) return;
+		heights.set(id, element.offsetHeight);
+		observedElements.set(id, element);
+		resizeObserver.observe(element);
+	}
 };
 
 // Expand the stack and pause timers while the user interacts with it
 const handleEnter = () => {
-    expanded.value = true;
-    pauseMessageToasts();
+	expanded.value = true;
+	pauseMessageToasts();
 };
 
 // Collapse the stack and resume timers
 const handleLeave = () => {
-    expanded.value = false;
-    resumeMessageToasts();
+	expanded.value = false;
+	resumeMessageToasts();
 };
 
 // Begin a horizontal swipe gesture
 const handlePointerDown = (event: PointerEvent, toast: MessageToastItem) => {
-    if (!toast.dismissible || event.button !== 0 || (event.target as HTMLElement).closest('button')) return;
-    swipe.id = toast.id;
-    swipe.startX = event.clientX;
-    swipe.deltaX = 0;
-    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+	if (!toast.dismissible || event.button !== 0 || (event.target as HTMLElement).closest('button')) return;
+	swipe.id = toast.id;
+	swipe.startX = event.clientX;
+	swipe.deltaX = 0;
+	(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
 };
 
 // Follow the pointer while swiping
 const handlePointerMove = (event: PointerEvent) => {
-    if (swipe.id === null) return;
-    swipe.deltaX = event.clientX - swipe.startX;
+	if (swipe.id === null) return;
+	swipe.deltaX = event.clientX - swipe.startX;
 };
 
 // Dismiss the toast when swiped far enough, otherwise spring back
 const handlePointerUp = () => {
-    if (swipe.id === null) return;
-    const id = swipe.id;
-    const deltaX = swipe.deltaX;
-    swipe.id = null;
-    swipe.deltaX = 0;
-    if (Math.abs(deltaX) > SWIPE_THRESHOLD_PX) {
-        leaveDirection.set(id, Math.sign(deltaX));
-        closeMessageToast(id);
-    }
+	if (swipe.id === null) return;
+	const id = swipe.id;
+	const deltaX = swipe.deltaX;
+	swipe.id = null;
+	swipe.deltaX = 0;
+	if (Math.abs(deltaX) > SWIPE_THRESHOLD_PX) {
+		leaveDirection.set(id, Math.sign(deltaX));
+		closeMessageToast(id);
+	}
 };
 
 // Run a toast action and dismiss it
 const handleAction = async (toast: MessageToastItem) => {
-    closeMessageToast(toast.id);
-    await toast.action?.onClick();
+	closeMessageToast(toast.id);
+	await toast.action?.onClick();
 };
 
 // Forget measurements of removed toasts
 const handleAfterLeave = (element: Element) => {
-    const id = Number((element as HTMLElement).dataset.toastId);
-    const content = observedElements.get(id);
-    if (content) {
-        resizeObserver?.unobserve(content);
-        observedElements.delete(id);
-    }
-    heights.delete(id);
-    leaveDirection.delete(id);
+	const id = Number((element as HTMLElement).dataset.toastId);
+	const content = observedElements.get(id);
+	if (content) {
+		resizeObserver?.unobserve(content);
+		observedElements.delete(id);
+	}
+	heights.delete(id);
+	leaveDirection.delete(id);
 };
 
 // Reset the interaction state once the stack is empty (mouseleave never fires on a collapsed region)
 watch(() => toasts.value.length, (length) => {
-    if (length === 0 && expanded.value) {
-        handleLeave();
-    }
+	if (length === 0 && expanded.value) {
+		handleLeave();
+	}
 });
 
 // Stop observing on unmount
 onBeforeUnmount(() => {
-    resizeObserver?.disconnect();
-    observedElements.clear();
+	resizeObserver?.disconnect();
+	observedElements.clear();
 });
 </script>
 
 <template>
-    <section :aria-label="regionAriaLabel" class="pointer-events-none fixed inset-x-3 bottom-3 z-60 sm:inset-x-auto sm:right-6 sm:bottom-6 sm:w-[380px]">
-        <ol class="pointer-events-auto relative transition-[height] duration-300 ease-out-expo" :style="{ height: `${containerHeight}px` }" @mouseenter="handleEnter" @mouseleave="handleLeave" @focusin="handleEnter" @focusout="handleLeave">
-            <TransitionGroup name="uv-toast" @after-leave="handleAfterLeave">
-                <li v-for="(toast, index) in toasts" :key="toast.id" :data-toast-id="toast.id" :data-front="index === 0 ? '' : undefined" role="status" :aria-live="toast.type === 'error' || toast.type === 'warning' ? 'assertive' : 'polite'" aria-atomic="true" class="uv-toast absolute inset-x-0 bottom-0 origin-bottom touch-pan-y select-none overflow-hidden rounded border border-border bg-card text-card-foreground shadow-elevated-lg" :style="getToastStyle(toast, index)" @pointerdown="handlePointerDown($event, toast)" @pointermove="handlePointerMove" @pointerup="handlePointerUp" @pointercancel="handlePointerUp">
-                    <!-- Measured content -->
-                    <div :ref="observeToast" :data-toast-id="toast.id" :class="cn('flex items-start gap-3 p-4 transition-opacity duration-200', !expanded && index > 0 && 'opacity-0')">
-                        <!-- Leading type icon -->
-                        <div :class="cn('flex size-8 shrink-0 items-center justify-center rounded border', toneClasses[toast.type])">
-                            <HugeiconsIcon :icon="getToastIcon(toast)" :stroke-width="1.8" class="size-4.5 animate-uv-pop [animation-delay:120ms]" />
-                        </div>
-
-                        <!-- Title and message -->
-                        <div class="min-w-0 flex-1 self-center">
-                            <p v-if="toast.title" class="m-0 text-sm font-semibold leading-5">
-                                {{ toast.title }}
-                            </p>
-                            <p :class="cn('m-0 text-sm leading-5 wrap-break-word', toast.title && 'text-xs text-muted-foreground sm:text-[13px]')">
-                                {{ toast.message }}
-                            </p>
-                        </div>
-
-                        <!-- Action button -->
-                        <button v-if="toast.action" type="button" class="shrink-0 self-center rounded border border-border bg-secondary px-2.5 py-1.5 text-xs font-semibold shadow-elevated-sm outline-none transition-[background-color,border-color,transform] duration-150 hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/45 active:scale-95" @click="handleAction(toast)">
-                            {{ toast.action.label }}
-                        </button>
-
-                        <!-- Dismiss button -->
-                        <button v-if="toast.dismissible" type="button" :aria-label="closeAriaLabel" class="group/close -me-1 -mt-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45" @click="closeMessageToast(toast.id)">
-                            <HugeiconsIcon :icon="Cancel01Icon" class="size-4 transition-transform duration-300 ease-spring group-hover/close:rotate-90" />
-                        </button>
-                    </div>
-
-                    <!-- Countdown bar -->
-                    <div v-if="toast.duration > 0" class="absolute inset-x-0 bottom-0 h-0.5 bg-transparent">
-                        <div :class="cn('h-full origin-left opacity-60', progressClasses[toast.type])" :style="{ animation: `uv-toast-countdown ${toast.duration}ms linear forwards`, animationPlayState: messageToastState.paused ? 'paused' : 'running' }" />
-                    </div>
-                </li>
-            </TransitionGroup>
-        </ol>
-    </section>
+	<section :aria-label="regionAriaLabel" class="pointer-events-none fixed inset-x-3 bottom-3 z-60 sm:inset-x-auto sm:right-6 sm:bottom-6 sm:w-[380px]">
+		<ol class="pointer-events-auto relative transition-[height] duration-300 ease-out-expo" :style="{ height: `${containerHeight}px` }" @mouseenter="handleEnter" @mouseleave="handleLeave" @focusin="handleEnter" @focusout="handleLeave">
+			<TransitionGroup name="uv-toast" @after-leave="handleAfterLeave">
+				<li v-for="(toast, index) in toasts" :key="toast.id" :data-toast-id="toast.id" :data-front="index === 0 ? '' : undefined" role="status" :aria-live="toast.type === 'error' || toast.type === 'warning' ? 'assertive' : 'polite'" aria-atomic="true" class="uv-toast absolute inset-x-0 bottom-0 origin-bottom touch-pan-y select-none overflow-hidden rounded border border-border bg-card text-card-foreground shadow-elevated-lg" :style="getToastStyle(toast, index)" @pointerdown="handlePointerDown($event, toast)" @pointermove="handlePointerMove" @pointerup="handlePointerUp" @pointercancel="handlePointerUp">
+					<!-- Measured content -->
+					<div :ref="observeToast" :data-toast-id="toast.id" :class="cn('flex items-start gap-3 p-4 transition-opacity duration-200', !expanded && index > 0 && 'opacity-0')">
+						<!-- Leading type icon -->
+						<div :class="cn('flex size-8 shrink-0 items-center justify-center rounded border', toneClasses[toast.type])">
+							<HugeiconsIcon :icon="getToastIcon(toast)" :stroke-width="1.8" class="size-4.5 animate-uv-pop [animation-delay:120ms]" />
+						</div>
+
+						<!-- Title and message -->
+						<div class="min-w-0 flex-1 self-center">
+							<p v-if="toast.title" class="m-0 text-sm font-semibold leading-5">
+								{{ toast.title }}
+							</p>
+							<p :class="cn('m-0 text-sm leading-5 wrap-break-word', toast.title && 'text-xs text-muted-foreground sm:text-[13px]')">
+								{{ toast.message }}
+							</p>
+						</div>
+
+						<!-- Action button -->
+						<button v-if="toast.action" type="button" class="shrink-0 self-center rounded border border-border bg-secondary px-2.5 py-1.5 text-xs font-semibold shadow-elevated-sm outline-none transition-[background-color,border-color,transform] duration-150 hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/45 active:scale-95" @click="handleAction(toast)">
+							{{ toast.action.label }}
+						</button>
+
+						<!-- Dismiss button -->
+						<button v-if="toast.dismissible" type="button" :aria-label="closeAriaLabel" class="group/close -me-1 -mt-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45" @click="closeMessageToast(toast.id)">
+							<HugeiconsIcon :icon="Cancel01Icon" class="size-4 transition-transform duration-300 ease-spring group-hover/close:rotate-90" />
+						</button>
+					</div>
+
+					<!-- Countdown bar -->
+					<div v-if="toast.duration > 0" class="absolute inset-x-0 bottom-0 h-0.5 bg-transparent">
+						<div :class="cn('h-full origin-left opacity-60', progressClasses[toast.type])" :style="{ animation: `uv-toast-countdown ${toast.duration}ms linear forwards`, animationPlayState: messageToastState.paused ? 'paused' : 'running' }" />
+					</div>
+				</li>
+			</TransitionGroup>
+		</ol>
+	</section>
 </template>
 
 <style>
 .uv-toast {
-    transition:
-        translate 480ms var(--ease-spring),
-        scale 480ms var(--ease-spring),
-        opacity 250ms var(--ease-out-expo),
-        height 300ms var(--ease-out-expo),
-        transform 480ms var(--ease-spring);
-    will-change: translate, scale;
+	transition:
+		translate 480ms var(--ease-spring),
+		scale 480ms var(--ease-spring),
+		opacity 250ms var(--ease-out-expo),
+		height 300ms var(--ease-out-expo),
+		transform 480ms var(--ease-spring);
+	will-change: translate, scale;
 }
 
 .uv-toast-enter-from {
-    opacity: 0 !important;
-    transform: translateY(110%) scale(0.92);
+	opacity: 0 !important;
+	transform: translateY(110%) scale(0.92);
 }
 
 .uv-toast-leave-active {
-    transition:
-        transform 260ms var(--ease-snappy),
-        opacity 200ms var(--ease-snappy) !important;
+	transition:
+		transform 260ms var(--ease-snappy),
+		opacity 200ms var(--ease-snappy) !important;
 }
 
 .uv-toast-leave-to {
-    opacity: 0 !important;
-    transform: translateX(var(--uv-toast-leave-x, 110%));
+	opacity: 0 !important;
+	transform: translateX(var(--uv-toast-leave-x, 110%));
 }
 
 @keyframes uv-toast-countdown {
-    from { transform: scaleX(1); }
-    to { transform: scaleX(0); }
+	from { transform: scaleX(1); }
+	to { transform: scaleX(0); }
 }
 </style>