sileo-sveltekit 0.1.0

package/dist/Toaster.svelte

@@ -0,0 +1,719 @@
+<script lang="ts" module>
+	export type SileoPosition =
+		| 'top-left'
+		| 'top-center'
+		| 'top-right'
+		| 'bottom-left'
+		| 'bottom-center'
+		| 'bottom-right';
+
+	export interface SileoOptions {
+		title?: string;
+		description?: string;
+		position?: SileoPosition;
+		duration?: number | null;
+		fill?: string;
+		roundness?: number;
+		autopilot?: boolean | { expand?: number; collapse?: number };
+	}
+
+	export interface SileoToastAPI {
+		show: (opts: SileoOptions) => string;
+		success: (title: string, desc?: string, dur?: number) => string;
+		error: (title: string, desc?: string, dur?: number) => string;
+		warning: (title: string, desc?: string, dur?: number) => string;
+		info: (title: string, desc?: string, dur?: number) => string;
+		action: (title: string, desc?: string, dur?: number) => string;
+		dismiss: (id: string) => void;
+		clear: (position?: SileoPosition) => void;
+	}
+</script>
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import SileoToast, { type SileoState } from './SileoToast.svelte';
+
+	/* --------------------------------- Types --------------------------------- */
+
+	interface SileoItem extends SileoOptions {
+		id: string;
+		instanceId: string;
+		state: SileoState;
+		exiting?: boolean;
+		autoExpandDelayMs?: number;
+		autoCollapseDelayMs?: number;
+	}
+
+	interface Props {
+		position?: SileoPosition;
+	}
+
+	/* -------------------------------- Constants ------------------------------- */
+
+	const DEFAULT_TOAST_DURATION = 6000;
+	const EXIT_DURATION = DEFAULT_TOAST_DURATION * 0.1; // 600ms
+	const AUTO_EXPAND_DELAY = DEFAULT_TOAST_DURATION * 0.025; // 150ms
+	const AUTO_COLLAPSE_DELAY = DEFAULT_TOAST_DURATION - 2000; // 4000ms
+
+	/* --------------------------------- Props --------------------------------- */
+
+	let { position: defaultPosition = 'bottom-right' }: Props = $props();
+
+	/* --------------------------------- State --------------------------------- */
+
+	let toasts = $state<SileoItem[]>([]);
+	let activeId = $state<string | undefined>(undefined);
+	let isHovering = false;
+	let timers = new Map<string, number>();
+	let idCounter = 0;
+
+	/* -------------------------------- Helpers --------------------------------- */
+
+	function generateId() {
+		return `${++idCounter}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+	}
+
+	function timeoutKey(t: SileoItem) {
+		return `${t.id}:${t.instanceId}`;
+	}
+
+	function pillAlign(pos: SileoPosition): 'left' | 'center' | 'right' {
+		if (pos.includes('right')) return 'right';
+		if (pos.includes('center')) return 'center';
+		return 'left';
+	}
+
+	function expandDir(pos: SileoPosition): 'top' | 'bottom' {
+		return pos.startsWith('top') ? 'bottom' : 'top';
+	}
+
+	/* ------------------------------ Dismiss ---------------------------------- */
+
+	function dismissToast(id: string) {
+		const item = toasts.find((t) => t.id === id);
+		if (!item || item.exiting) return;
+
+		toasts = toasts.map((t) => (t.id === id ? { ...t, exiting: true } : t));
+
+		setTimeout(() => {
+			toasts = toasts.filter((t) => t.id !== id);
+		}, EXIT_DURATION);
+	}
+
+	/* ------------------------------ Scheduling ------------------------------- */
+
+	function clearAllTimers() {
+		for (const t of timers.values()) clearTimeout(t);
+		timers.clear();
+	}
+
+	function schedule(items: SileoItem[]) {
+		if (isHovering) return;
+
+		for (const item of items) {
+			if (item.exiting) continue;
+			const key = timeoutKey(item);
+			if (timers.has(key)) continue;
+
+			const dur = item.duration ?? DEFAULT_TOAST_DURATION;
+			if (dur === null || dur <= 0) continue;
+
+			timers.set(key, window.setTimeout(() => dismissToast(item.id), dur));
+		}
+	}
+
+	/* ------------------------------ Autopilot -------------------------------- */
+
+	function resolveAutopilot(
+		opts: SileoOptions & { state?: SileoState },
+		duration: number | null
+	): { expandDelayMs?: number; collapseDelayMs?: number } {
+		if (opts.autopilot === false || !duration || duration <= 0) return {};
+		const cfg = typeof opts.autopilot === 'object' ? opts.autopilot : undefined;
+		const clamp = (v: number) => Math.min(duration, Math.max(0, v));
+		return {
+			expandDelayMs: clamp(cfg?.expand ?? AUTO_EXPAND_DELAY),
+			collapseDelayMs: clamp(cfg?.collapse ?? AUTO_COLLAPSE_DELAY)
+		};
+	}
+
+	/* ------------------------------ Toast API -------------------------------- */
+
+	function createToast(options: SileoOptions & { state?: SileoState }): string {
+		const live = toasts.filter((t) => !t.exiting);
+		const id = 'sileo-' + generateId();
+		const duration = options.duration ?? DEFAULT_TOAST_DURATION;
+		const auto = resolveAutopilot(options, duration);
+
+		const resolvedState = options.state ?? 'success';
+		const item: SileoItem = {
+			...options,
+			id,
+			instanceId: generateId(),
+			state: resolvedState,
+			position: options.position ?? defaultPosition,
+			autoExpandDelayMs: auto.expandDelayMs,
+			autoCollapseDelayMs: auto.collapseDelayMs
+		};
+
+		// Check for duplicate ID
+		const prev = live.find((t) => t.id === id);
+		if (prev) {
+			toasts = toasts.map((t) => (t.id === id ? item : t));
+		} else {
+			toasts = [...toasts.filter((t) => t.id !== id), item];
+		}
+
+		// Schedule auto-dismiss
+		const key = timeoutKey(item);
+		if (!isHovering && duration && duration > 0 && !timers.has(key)) {
+			timers.set(key, window.setTimeout(() => dismissToast(id), duration));
+		}
+
+		return id;
+	}
+
+	/* ----------------------------- Active tracking --------------------------- */
+
+	const latest = $derived.by(() => {
+		for (let i = toasts.length - 1; i >= 0; i--) {
+			if (!toasts[i].exiting) return toasts[i].id;
+		}
+		return undefined;
+	});
+
+	$effect(() => {
+		activeId = latest;
+	});
+
+	// Clean up stale timers and schedule new ones
+	$effect(() => {
+		const toastKeys = new Set(toasts.map(timeoutKey));
+		for (const [key, timer] of timers) {
+			if (!toastKeys.has(key)) {
+				clearTimeout(timer);
+				timers.delete(key);
+			}
+		}
+		schedule(toasts);
+	});
+
+	/* ----------------------------- Group by position ------------------------- */
+
+	const activePositions = $derived.by(() => {
+		const map = new Map<SileoPosition, SileoItem[]>();
+		for (const t of toasts) {
+			const pos = t.position ?? defaultPosition;
+			const arr = map.get(pos);
+			if (arr) {
+				arr.push(t);
+			} else {
+				map.set(pos, [t]);
+			}
+		}
+		return map;
+	});
+
+	/* -------------------------------- Handlers ------------------------------- */
+
+	function handleToastEnter(toastId: string, e: MouseEvent) {
+		activeId = toastId;
+		if (!isHovering) {
+			isHovering = true;
+			clearAllTimers();
+		}
+	}
+
+	function handleToastLeave(toastId: string, e: MouseEvent) {
+		activeId = latest;
+		if (isHovering) {
+			isHovering = false;
+			schedule(toasts);
+		}
+	}
+
+	/* -------------------------------- Mount ---------------------------------- */
+
+	onMount(() => {
+		const api: SileoToastAPI = {
+			show: (opts: SileoOptions) => createToast(opts),
+			success: (title: string, desc?: string, dur?: number) =>
+				createToast({ title, description: desc, duration: dur, state: 'success' }),
+			error: (title: string, desc?: string, dur?: number) =>
+				createToast({ title, description: desc, duration: dur, state: 'error' }),
+			warning: (title: string, desc?: string, dur?: number) =>
+				createToast({ title, description: desc, duration: dur, state: 'warning' }),
+			info: (title: string, desc?: string, dur?: number) =>
+				createToast({ title, description: desc, duration: dur, state: 'info' }),
+			action: (title: string, desc?: string, dur?: number) =>
+				createToast({ title, description: desc, duration: dur, state: 'action' }),
+			dismiss: dismissToast,
+			clear: (pos?: SileoPosition) => {
+				toasts = pos ? toasts.filter((t) => t.position !== pos) : [];
+			}
+		};
+
+		(window as any).toast = api;
+
+		return () => {
+			clearAllTimers();
+		};
+	});
+</script>
+
+<!-- Viewports -->
+{#each [...activePositions] as [pos, items] (pos)}
+	{@const pill = pillAlign(pos)}
+	{@const exp = expandDir(pos)}
+
+	<section data-sileo-viewport data-position={pos} aria-live="polite">
+		{#each items as item (item.id)}
+			<SileoToast
+				id={item.id}
+				toastState={item.state}
+				title={item.title}
+				description={item.description}
+				position={pill}
+				expand={exp}
+				fill={item.fill}
+				roundness={item.roundness}
+				exiting={item.exiting}
+				autoExpandDelayMs={item.autoExpandDelayMs}
+				autoCollapseDelayMs={item.autoCollapseDelayMs}
+				refreshKey={item.instanceId}
+				canExpand={activeId === undefined || activeId === item.id}
+				onmouseenter={(e) => handleToastEnter(item.id, e)}
+				onmouseleave={(e) => handleToastLeave(item.id, e)}
+				ondismiss={() => dismissToast(item.id)}
+			/>
+		{/each}
+	</section>
+{/each}
+
+<style>
+	/* -------------------------------- Variables ------------------------------- */
+
+	:root {
+		--sileo-spring-easing: linear(
+			0,
+			0.002 0.6%,
+			0.007 1.2%,
+			0.015 1.8%,
+			0.026 2.4%,
+			0.041 3.1%,
+			0.06 3.8%,
+			0.108 5.3%,
+			0.157 6.6%,
+			0.214 8%,
+			0.467 13.7%,
+			0.577 16.3%,
+			0.631 17.7%,
+			0.682 19.1%,
+			0.73 20.5%,
+			0.771 21.8%,
+			0.808 23.1%,
+			0.844 24.5%,
+			0.874 25.8%,
+			0.903 27.2%,
+			0.928 28.6%,
+			0.952 30.1%,
+			0.972 31.6%,
+			0.988 33.1%,
+			1.01 35.7%,
+			1.025 38.5%,
+			1.034 41.6%,
+			1.038 45%,
+			1.035 50.1%,
+			1.012 64.2%,
+			1.003 73%,
+			0.999 83.7%,
+			1
+		);
+
+		--sileo-duration: 600ms;
+		--sileo-height: 40px;
+		--sileo-width: 350px;
+		--sileo-fill: #fff;
+
+		--sileo-state-success: oklch(0.723 0.219 142.136);
+		--sileo-state-loading: oklch(0.556 0 0);
+		--sileo-state-error: oklch(0.637 0.237 25.331);
+		--sileo-state-warning: oklch(0.795 0.184 86.047);
+		--sileo-state-info: oklch(0.685 0.169 237.323);
+		--sileo-state-action: oklch(0.623 0.214 259.815);
+	}
+
+	/* -------------------------------- Viewports ------------------------------- */
+
+	:global([data-sileo-viewport]) {
+		position: fixed;
+		z-index: 99999;
+		display: flex;
+		gap: 0.75rem;
+		padding: 0.75rem;
+		pointer-events: none;
+		max-width: calc(100vw - 1.5rem);
+		contain: layout style;
+	}
+
+	/* Vertical edge */
+	:global([data-sileo-viewport][data-position^='top']) {
+		top: 0;
+		flex-direction: column-reverse;
+	}
+
+	:global([data-sileo-viewport][data-position^='bottom']) {
+		bottom: 0;
+		flex-direction: column;
+	}
+
+	/* Horizontal alignment */
+	:global([data-sileo-viewport][data-position$='left']) {
+		left: 0;
+		align-items: flex-start;
+	}
+
+	:global([data-sileo-viewport][data-position$='right']) {
+		right: 0;
+		align-items: flex-end;
+	}
+
+	:global([data-sileo-viewport][data-position$='center']) {
+		left: 50%;
+		transform: translateX(-50%);
+		align-items: center;
+	}
+
+	/* Negative margin entry for stacking */
+	:global(
+			[data-sileo-viewport][data-position^='top'] [data-sileo-toast]:not([data-ready='true'])
+		) {
+		margin-bottom: calc(-1 * (var(--sileo-height) + 0.75rem));
+	}
+
+	:global(
+			[data-sileo-viewport][data-position^='bottom'] [data-sileo-toast]:not([data-ready='true'])
+		) {
+		margin-top: calc(-1 * (var(--sileo-height) + 0.75rem));
+	}
+
+	/* ---------------------------------- Toast --------------------------------- */
+
+	:global([data-sileo-toast]) {
+		position: relative;
+		cursor: pointer;
+		pointer-events: auto;
+		touch-action: none;
+		border: 0;
+		background: transparent;
+		padding: 0;
+		width: var(--sileo-width);
+		height: var(--_h, var(--sileo-height));
+		opacity: 0;
+		transform: translateZ(0) scale(0.95);
+		transform-origin: center;
+		contain: layout style;
+		overflow: visible;
+	}
+
+	:global([data-sileo-toast][data-state='loading']) {
+		cursor: default;
+	}
+
+	:global([data-sileo-toast][data-ready='true']) {
+		opacity: 1;
+		transform: translateZ(0) scale(1);
+		transition:
+			transform calc(var(--sileo-duration) * 0.66) var(--sileo-spring-easing),
+			opacity calc(var(--sileo-duration) * 0.66) var(--sileo-spring-easing),
+			margin-bottom calc(var(--sileo-duration) * 0.66) var(--sileo-spring-easing),
+			margin-top calc(var(--sileo-duration) * 0.66) var(--sileo-spring-easing),
+			height var(--sileo-duration) var(--sileo-spring-easing);
+	}
+
+	/* Entry animation direction */
+	:global(
+			[data-sileo-viewport][data-position^='top'] [data-sileo-toast]:not([data-ready='true'])
+		) {
+		transform: translateY(-6px) scale(0.95);
+	}
+
+	:global(
+			[data-sileo-viewport][data-position^='bottom'] [data-sileo-toast]:not([data-ready='true'])
+		) {
+		transform: translateY(6px) scale(0.95);
+	}
+
+	/* Exit */
+	:global([data-sileo-toast][data-ready='true'][data-exiting='true']) {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	:global(
+			[data-sileo-viewport][data-position^='top']
+				[data-sileo-toast][data-ready='true'][data-exiting='true']
+		) {
+		transform: translateY(-6px) scale(0.95);
+	}
+
+	:global(
+			[data-sileo-viewport][data-position^='bottom']
+				[data-sileo-toast][data-ready='true'][data-exiting='true']
+		) {
+		transform: translateY(6px) scale(0.95);
+	}
+
+	/* ------------------------------- SVG Canvas ------------------------------- */
+
+	:global([data-sileo-canvas]) {
+		position: absolute;
+		left: 0;
+		right: 0;
+		pointer-events: none;
+		transform: translateZ(0);
+		contain: layout style;
+		overflow: visible;
+	}
+
+	:global([data-sileo-canvas][data-edge='top']) {
+		bottom: 0;
+		transform: scaleY(-1) translateZ(0);
+	}
+
+	:global([data-sileo-canvas][data-edge='bottom']) {
+		top: 0;
+	}
+
+	:global([data-sileo-svg]) {
+		overflow: visible;
+	}
+
+	/* --------------------------------- Header --------------------------------- */
+
+	:global([data-sileo-header]) {
+		position: absolute;
+		z-index: 20;
+		display: flex;
+		align-items: center;
+		padding: 0.5rem;
+		height: var(--sileo-height);
+		overflow: hidden;
+		left: var(--_px, 0px);
+		transform: var(--_ht);
+		max-width: var(--_pw);
+	}
+
+	:global([data-sileo-toast][data-ready='true'] [data-sileo-header]) {
+		transition:
+			transform var(--sileo-duration) var(--sileo-spring-easing),
+			left var(--sileo-duration) var(--sileo-spring-easing),
+			max-width var(--sileo-duration) var(--sileo-spring-easing);
+	}
+
+	:global([data-sileo-header][data-edge='top']) {
+		bottom: 0;
+	}
+
+	:global([data-sileo-header][data-edge='bottom']) {
+		top: 0;
+	}
+
+	/* Header inner morphing */
+	:global([data-sileo-header-stack]) {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		height: 100%;
+	}
+
+	:global([data-sileo-header-inner]) {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		white-space: nowrap;
+		opacity: 1;
+		filter: blur(0px);
+		transform: translateZ(0);
+	}
+
+	:global([data-sileo-header-inner][data-layer='current']) {
+		position: relative;
+		z-index: 1;
+		animation: sileo-header-enter var(--sileo-duration) var(--sileo-spring-easing) both;
+	}
+
+	:global([data-sileo-header-inner][data-layer='current']:not(:only-child)),
+	:global([data-sileo-header-inner][data-exiting='true']) {
+		will-change: opacity, filter;
+	}
+
+	:global([data-sileo-header-inner][data-layer='prev']) {
+		position: absolute;
+		left: 0;
+		top: 0;
+		z-index: 0;
+		pointer-events: none;
+	}
+
+	:global([data-sileo-header-inner][data-exiting='true']) {
+		animation: sileo-header-exit calc(var(--sileo-duration) * 0.7) ease forwards;
+	}
+
+	/* ---------------------------------- Badge --------------------------------- */
+
+	:global([data-sileo-badge]) {
+		display: flex;
+		height: 24px;
+		width: 24px;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		padding: 2px;
+		box-sizing: border-box;
+		border-radius: 9999px;
+		color: var(--sileo-tone, currentColor);
+		background-color: var(--sileo-tone-bg, transparent);
+	}
+
+	/* ---------------------------------- Title --------------------------------- */
+
+	:global([data-sileo-title]) {
+		font-size: 0.825rem;
+		line-height: 1rem;
+		font-weight: 500;
+		text-transform: capitalize;
+		color: var(--sileo-tone, currentColor);
+	}
+
+	/* ------------------------------ State Colors ------------------------------ */
+
+	:global(:is([data-sileo-badge], [data-sileo-title], [data-sileo-button])[data-state]) {
+		--_c: var(--sileo-state-success);
+	}
+
+	:global(:is([data-sileo-badge], [data-sileo-title], [data-sileo-button])[data-state='loading']) {
+		--_c: var(--sileo-state-loading);
+	}
+
+	:global(:is([data-sileo-badge], [data-sileo-title], [data-sileo-button])[data-state='error']) {
+		--_c: var(--sileo-state-error);
+	}
+
+	:global(:is([data-sileo-badge], [data-sileo-title], [data-sileo-button])[data-state='warning']) {
+		--_c: var(--sileo-state-warning);
+	}
+
+	:global(:is([data-sileo-badge], [data-sileo-title], [data-sileo-button])[data-state='info']) {
+		--_c: var(--sileo-state-info);
+	}
+
+	:global(:is([data-sileo-badge], [data-sileo-title], [data-sileo-button])[data-state='action']) {
+		--_c: var(--sileo-state-action);
+	}
+
+	:global(:is([data-sileo-badge], [data-sileo-title])[data-state]) {
+		--sileo-tone: var(--_c);
+		--sileo-tone-bg: color-mix(in oklch, var(--_c) 20%, transparent);
+	}
+
+	/* --------------------------------- Content -------------------------------- */
+
+	:global([data-sileo-content]) {
+		position: absolute;
+		left: 0;
+		z-index: 10;
+		width: 100%;
+		pointer-events: none;
+		opacity: var(--_co, 0);
+	}
+
+	:global([data-sileo-content]:not([data-visible='true'])) {
+		content-visibility: hidden;
+	}
+
+	:global([data-sileo-toast][data-ready='true'] [data-sileo-content]) {
+		transition: opacity calc(var(--sileo-duration) * 0.08) ease calc(var(--sileo-duration) * 0.04);
+	}
+
+	:global([data-sileo-content][data-edge='top']) {
+		top: 0;
+	}
+
+	:global([data-sileo-content][data-edge='bottom']) {
+		top: var(--sileo-height);
+	}
+
+	:global([data-sileo-content][data-visible='true']) {
+		pointer-events: auto;
+	}
+
+	:global([data-sileo-toast][data-ready='true'] [data-sileo-content][data-visible='true']) {
+		transition: opacity calc(var(--sileo-duration) * 0.6) ease calc(var(--sileo-duration) * 0.3);
+	}
+
+	:global([data-sileo-description]) {
+		width: 100%;
+		text-align: left;
+		padding: 1rem;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		color: var(--sileo-text, currentColor);
+		font-family: system-ui, -apple-system, sans-serif;
+		contain: layout style paint;
+		content-visibility: auto;
+	}
+
+	/* -------------------------------- Animations ------------------------------ */
+
+	:global([data-sileo-icon='spin']) {
+		animation: sileo-spin 1s linear infinite;
+	}
+
+	@keyframes sileo-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes sileo-header-enter {
+		from {
+			opacity: 0;
+			filter: blur(6px);
+		}
+		to {
+			opacity: 1;
+			filter: blur(0px);
+		}
+	}
+
+	@keyframes sileo-header-exit {
+		from {
+			opacity: 1;
+			filter: blur(0px);
+		}
+		to {
+			opacity: 0;
+			filter: blur(6px);
+		}
+	}
+
+	/* -------------------------------- Reduced motion -------------------------- */
+
+	@media (prefers-reduced-motion: no-preference) {
+		:global([data-sileo-toast][data-ready='true']:hover),
+		:global([data-sileo-toast][data-ready='true'][data-exiting='true']) {
+			will-change: transform, opacity, height;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global(*),
+		:global(*::before),
+		:global(*::after) {
+			animation-duration: 0.01ms !important;
+			animation-iteration-count: 1 !important;
+			transition-duration: 0.01ms !important;
+		}
+	}
+</style>