sileo-sveltekit 0.1.0

package/dist/SileoToast.svelte

@@ -0,0 +1,654 @@
+<script lang="ts" module>
+	export type SileoState = 'success' | 'error' | 'warning' | 'info' | 'action' | 'loading';
+</script>
+
+<script lang="ts">
+	import { spring } from 'svelte/motion';
+	import { onMount } from 'svelte';
+
+	/* --------------------------------- Types --------------------------------- */
+
+	interface Props {
+		id: string;
+		fill?: string;
+		toastState?: SileoState;
+		title?: string;
+		description?: string;
+		position?: 'left' | 'center' | 'right';
+		expand?: 'top' | 'bottom';
+		roundness?: number;
+		exiting?: boolean;
+		autoExpandDelayMs?: number;
+		autoCollapseDelayMs?: number;
+		canExpand?: boolean;
+		refreshKey?: string;
+		onmouseenter?: (e: MouseEvent) => void;
+		onmouseleave?: (e: MouseEvent) => void;
+		ondismiss?: () => void;
+	}
+
+	/* -------------------------------- Constants ------------------------------- */
+
+	const HEIGHT = 40;
+	const WIDTH = 350;
+	const DEFAULT_ROUNDNESS = 16;
+	const BLUR_RATIO = 0.5;
+	const PILL_PADDING = 10;
+	const MIN_EXPAND_RATIO = 2.25;
+	const HEADER_EXIT_MS = 420; // DURATION_MS * 0.7
+	const SWAP_COLLAPSE_MS = 200;
+	const SWIPE_DISMISS = 30;
+	const SWIPE_MAX = 20;
+
+	/* --------------------------------- Props ---------------------------------- */
+
+	let {
+		id,
+		fill,
+		toastState = 'success',
+		title,
+		description,
+		position = 'right',
+		expand = 'bottom',
+		roundness,
+		exiting = false,
+		autoExpandDelayMs,
+		autoCollapseDelayMs,
+		canExpand = true,
+		refreshKey,
+		onmouseenter,
+		onmouseleave,
+		ondismiss
+	}: Props = $props();
+
+	/* ------------------------------- Resolved -------------------------------- */
+
+	const resolvedRoundness = $derived(Math.max(0, roundness ?? DEFAULT_ROUNDNESS));
+	const blur = $derived(resolvedRoundness * BLUR_RATIO);
+	const filterId = `sileo-gooey-${id}`;
+
+	/* --------------------------------- State ---------------------------------- */
+
+	let isExpanded = $state(false);
+	let ready = $state(false);
+	let contentHeight = $state(0);
+	let pillMeasuredWidth = $state(0);
+
+	// View state (for refresh/swap)
+	let viewState = $state<SileoState>(toastState);
+	let viewTitle = $state(title ?? toastState);
+	let viewDescription = $state(description);
+	let viewFill = $state(fill);
+
+	// Header layer for swap animation
+	let headerCurrent = $state({
+		key: `${toastState}-${title ?? toastState}`,
+		toastState,
+		title: title ?? toastState
+	});
+	let headerPrev = $state<{ key: string; toastState: SileoState; title: string } | null>(null);
+
+	/* ---------------------------------- Refs ---------------------------------- */
+
+	let buttonRef = $state<HTMLButtonElement | null>(null);
+	let headerRef = $state<HTMLDivElement | null>(null);
+	let innerRef = $state<HTMLDivElement | null>(null);
+	let contentRef = $state<HTMLDivElement | null>(null);
+
+	/* ----------------------------- Derived values ----------------------------- */
+
+	const hasDesc = $derived(Boolean(viewDescription));
+	const isLoading = $derived(viewState === 'loading');
+	const open = $derived(hasDesc && isExpanded && !isLoading && !exiting);
+	const allowExpand = $derived(!isLoading && canExpand);
+
+	const minExpanded = HEIGHT * MIN_EXPAND_RATIO;
+	const rawExpanded = $derived(
+		hasDesc ? Math.max(minExpanded, HEIGHT + contentHeight) : minExpanded
+	);
+	const expandedContent = $derived(Math.max(0, rawExpanded - HEIGHT));
+	const resolvedPillWidth = $derived(Math.max(pillMeasuredWidth || HEIGHT, HEIGHT));
+	const pillHeightExpanded = $derived(HEIGHT + blur * 3);
+	const svgHeight = $derived(
+		hasDesc ? Math.max(open ? rawExpanded : minExpanded, minExpanded) : HEIGHT
+	);
+
+	const pillXVal = $derived(
+		position === 'right'
+			? WIDTH - resolvedPillWidth
+			: position === 'center'
+				? (WIDTH - resolvedPillWidth) / 2
+				: 0
+	);
+
+	/* ----------------------------- Spring stores ----------------------------- */
+
+	// Matching Framer Motion: { type: "spring", bounce: 0.25, duration: 0.6 }
+	const SPRING_OPTS = { stiffness: 0.066, damping: 0.53 };
+	const NO_BOUNCE_OPTS = { stiffness: 0.066, damping: 0.88 };
+
+	const sPillX = spring(0, SPRING_OPTS);
+	const sPillW = spring(HEIGHT, SPRING_OPTS);
+	const sPillH = spring(HEIGHT, SPRING_OPTS);
+	const sBodyH = spring(0, SPRING_OPTS);
+	const sBodyO = spring(0, SPRING_OPTS);
+
+	/* ----------------------------- Spring updates ----------------------------- */
+
+	$effect(() => {
+		if (!ready) {
+			sPillX.set(pillXVal, { hard: true });
+			sPillW.set(resolvedPillWidth, { hard: true });
+			sPillH.set(HEIGHT, { hard: true });
+		} else {
+			sPillX.set(pillXVal);
+			sPillW.set(resolvedPillWidth);
+			sPillH.set(open ? pillHeightExpanded : HEIGHT);
+		}
+	});
+
+	$effect(() => {
+		if (open) {
+			sPillH.stiffness = SPRING_OPTS.stiffness;
+			sPillH.damping = SPRING_OPTS.damping;
+			sBodyH.stiffness = SPRING_OPTS.stiffness;
+			sBodyH.damping = SPRING_OPTS.damping;
+			sBodyO.stiffness = SPRING_OPTS.stiffness;
+			sBodyO.damping = SPRING_OPTS.damping;
+			sBodyH.set(expandedContent);
+			sBodyO.set(1);
+		} else {
+			// No bounce on collapse (matching sileo's { ...SPRING, bounce: 0 })
+			sPillH.stiffness = NO_BOUNCE_OPTS.stiffness;
+			sPillH.damping = NO_BOUNCE_OPTS.damping;
+			sBodyH.stiffness = NO_BOUNCE_OPTS.stiffness;
+			sBodyH.damping = NO_BOUNCE_OPTS.damping;
+			sBodyO.stiffness = NO_BOUNCE_OPTS.stiffness;
+			sBodyO.damping = NO_BOUNCE_OPTS.damping;
+			sPillH.set(HEIGHT);
+			sBodyH.set(0);
+			sBodyO.set(0);
+		}
+	});
+
+	/* ----------------------------- Measurements ------------------------------ */
+
+	let headerPadding: number | null = null;
+
+	$effect(() => {
+		if (!innerRef || !headerRef) return;
+
+		if (headerPadding === null) {
+			const cs = getComputedStyle(headerRef);
+			headerPadding = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+		}
+		const pad = headerPadding;
+
+		const measure = () => {
+			if (!innerRef) return;
+			const w = innerRef.scrollWidth + pad + PILL_PADDING;
+			if (w > PILL_PADDING) pillMeasuredWidth = w;
+		};
+		measure();
+
+		const ro = new ResizeObserver(() => {
+			requestAnimationFrame(measure);
+		});
+		ro.observe(innerRef);
+
+		return () => ro.disconnect();
+	});
+
+	$effect(() => {
+		if (!hasDesc || !contentRef) {
+			contentHeight = 0;
+			return;
+		}
+
+		const measure = () => {
+			if (!contentRef) return;
+			contentHeight = contentRef.scrollHeight;
+		};
+		measure();
+
+		const ro = new ResizeObserver(() => {
+			requestAnimationFrame(measure);
+		});
+		ro.observe(contentRef);
+
+		return () => ro.disconnect();
+	});
+
+	/* --------------------------------- Ready --------------------------------- */
+
+	onMount(() => {
+		requestAnimationFrame(() => {
+			ready = true;
+		});
+	});
+
+	/* ----------------------------- Header layer ------------------------------ */
+
+	$effect(() => {
+		const newKey = `${toastState}-${title ?? toastState}`;
+		if (headerCurrent.key !== newKey) {
+			headerPrev = headerCurrent;
+			headerCurrent = { key: newKey, toastState, title: title ?? toastState };
+		}
+	});
+
+	$effect(() => {
+		if (!headerPrev) return;
+		const timer = setTimeout(() => {
+			headerPrev = null;
+		}, HEADER_EXIT_MS);
+		return () => clearTimeout(timer);
+	});
+
+	/* ----------------------------- View refresh ------------------------------ */
+
+	let lastRefreshKey = refreshKey;
+	let pendingSwap: {
+		key: string;
+		toastState: SileoState;
+		title: string;
+		description?: string;
+		fill?: string;
+	} | null = null;
+
+	$effect(() => {
+		if (refreshKey === undefined) {
+			viewState = toastState;
+			viewTitle = title ?? toastState;
+			viewDescription = description;
+			viewFill = fill;
+			pendingSwap = null;
+			lastRefreshKey = refreshKey;
+			return;
+		}
+
+		if (lastRefreshKey === refreshKey) return;
+		lastRefreshKey = refreshKey;
+
+		if (open) {
+			pendingSwap = { key: refreshKey, toastState, title: title ?? toastState, description, fill };
+			isExpanded = false;
+			setTimeout(() => {
+				if (!pendingSwap) return;
+				viewState = pendingSwap.toastState;
+				viewTitle = pendingSwap.title;
+				viewDescription = pendingSwap.description;
+				viewFill = pendingSwap.fill;
+				pendingSwap = null;
+			}, SWAP_COLLAPSE_MS);
+		} else {
+			pendingSwap = null;
+			viewState = toastState;
+			viewTitle = title ?? toastState;
+			viewDescription = description;
+			viewFill = fill;
+		}
+	});
+
+	/* ----------------------------- Auto expand/collapse ---------------------- */
+
+	$effect(() => {
+		if (!hasDesc || exiting || !allowExpand) {
+			if (exiting) isExpanded = false;
+			return;
+		}
+		if (autoExpandDelayMs == null && autoCollapseDelayMs == null) return;
+
+		const expandDelay = autoExpandDelayMs ?? 0;
+		const collapseDelay = autoCollapseDelayMs ?? 0;
+
+		let expandTimer: ReturnType<typeof setTimeout> | undefined;
+		let collapseTimer: ReturnType<typeof setTimeout> | undefined;
+
+		if (expandDelay > 0) {
+			expandTimer = setTimeout(() => {
+				isExpanded = true;
+			}, expandDelay);
+		} else {
+			isExpanded = true;
+		}
+
+		if (collapseDelay > 0) {
+			collapseTimer = setTimeout(() => {
+				isExpanded = false;
+			}, collapseDelay);
+		}
+
+		return () => {
+			if (expandTimer) clearTimeout(expandTimer);
+			if (collapseTimer) clearTimeout(collapseTimer);
+		};
+	});
+
+	/* --------------------------------- Swipe --------------------------------- */
+
+	let pointerStart: number | null = null;
+
+	function handlePointerDown(e: PointerEvent) {
+		if (exiting || !ondismiss) return;
+		const target = e.target as HTMLElement;
+		if (target.closest('[data-sileo-button]')) return;
+		pointerStart = e.clientY;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function handlePointerMove(e: PointerEvent) {
+		if (pointerStart === null || !buttonRef) return;
+		const dy = e.clientY - pointerStart;
+		const sign = dy > 0 ? 1 : -1;
+		const clamped = Math.min(Math.abs(dy), SWIPE_MAX) * sign;
+		buttonRef.style.transform = `translateY(${clamped}px)`;
+	}
+
+	function handlePointerUp(e: PointerEvent) {
+		if (pointerStart === null || !buttonRef) return;
+		const dy = e.clientY - pointerStart;
+		pointerStart = null;
+		buttonRef.style.transform = '';
+		if (Math.abs(dy) > SWIPE_DISMISS) {
+			ondismiss?.();
+		}
+	}
+
+	/* ------------------------------- Handlers -------------------------------- */
+
+	function handleEnter(e: MouseEvent) {
+		onmouseenter?.(e);
+		if (hasDesc && allowExpand) isExpanded = true;
+	}
+
+	function handleLeave(e: MouseEvent) {
+		onmouseleave?.(e);
+		isExpanded = false;
+	}
+
+	/* ----------------------------- Inline styles ----------------------------- */
+
+	const rootStyle = $derived(
+		`--_h: ${open ? rawExpanded : HEIGHT}px; --_pw: ${resolvedPillWidth}px; --_px: ${pillXVal}px; --_ht: translateY(${open ? (expand === 'bottom' ? 3 : -3) : 0}px) scale(${open ? 0.9 : 1}); --_co: ${open ? 1 : 0};`
+	);
+
+	const resolvedFill = $derived(viewFill || 'var(--sileo-fill, #fff)');
+</script>
+
+<button
+	bind:this={buttonRef}
+	type="button"
+	data-sileo-toast
+	data-ready={ready}
+	data-expanded={open}
+	data-exiting={exiting}
+	data-edge={expand}
+	data-position={position}
+	data-state={viewState}
+	style={rootStyle}
+	onmouseenter={handleEnter}
+	onmouseleave={handleLeave}
+	onpointerdown={handlePointerDown}
+	onpointermove={handlePointerMove}
+	onpointerup={handlePointerUp}
+>
+	<!-- SVG Gooey Canvas -->
+	<div data-sileo-canvas data-edge={expand} style="filter: url(#{filterId})">
+		<svg data-sileo-svg width={WIDTH} height={svgHeight} viewBox="0 0 {WIDTH} {svgHeight}">
+			<title>Sileo Notification</title>
+			<defs>
+				<filter
+					id={filterId}
+					x="-20%"
+					y="-20%"
+					width="140%"
+					height="140%"
+					color-interpolation-filters="sRGB"
+				>
+					<feGaussianBlur in="SourceGraphic" stdDeviation={blur} result="blur" />
+					<feColorMatrix
+						in="blur"
+						mode="matrix"
+						values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10"
+						result="goo"
+					/>
+					<feComposite in="SourceGraphic" in2="goo" operator="atop" />
+				</filter>
+			</defs>
+
+			<!-- Pill -->
+			<rect
+				data-sileo-pill
+				x={$sPillX}
+				width={$sPillW}
+				height={$sPillH}
+				rx={resolvedRoundness}
+				ry={resolvedRoundness}
+				fill={resolvedFill}
+			/>
+
+			<!-- Body (expanded area) -->
+			<rect
+				data-sileo-body
+				y={HEIGHT}
+				width={WIDTH}
+				height={$sBodyH}
+				rx={resolvedRoundness}
+				ry={resolvedRoundness}
+				fill={resolvedFill}
+				opacity={$sBodyO}
+			/>
+		</svg>
+	</div>
+
+	<!-- Header (icon + title) -->
+	<div bind:this={headerRef} data-sileo-header data-edge={expand}>
+		<div data-sileo-header-stack>
+			<!-- Current header -->
+			{#key headerCurrent.key}
+				<div bind:this={innerRef} data-sileo-header-inner data-layer="current">
+					<div data-sileo-badge data-state={headerCurrent.toastState}>
+						{#if headerCurrent.toastState === 'success'}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"><title>Success</title><path d="M20 6 9 17l-5-5" /></svg
+							>
+						{:else if headerCurrent.toastState === 'error'}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								><title>Error</title><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg
+							>
+						{:else if headerCurrent.toastState === 'warning'}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								><title>Warning</title><circle cx="12" cy="12" r="10" /><line
+									x1="12"
+									x2="12"
+									y1="8"
+									y2="12"
+								/><line x1="12" x2="12.01" y1="16" y2="16" /></svg
+							>
+						{:else if headerCurrent.toastState === 'info'}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								><title>Info</title><circle cx="12" cy="12" r="10" /><path
+									d="m4.93 4.93 4.24 4.24"
+								/><path d="m14.83 9.17 4.24-4.24" /><path d="m14.83 14.83 4.24 4.24" /><path
+									d="m9.17 14.83-4.24 4.24"
+								/><circle cx="12" cy="12" r="4" /></svg
+							>
+						{:else if headerCurrent.toastState === 'loading'}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								data-sileo-icon="spin"><title>Loading</title><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg
+							>
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								><title>Action</title><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+							>
+						{/if}
+					</div>
+					<span data-sileo-title data-state={headerCurrent.toastState}>{headerCurrent.title}</span
+					>
+				</div>
+			{/key}
+
+			<!-- Previous header (exiting) -->
+			{#if headerPrev}
+				{#key headerPrev.key}
+					<div data-sileo-header-inner data-layer="prev" data-exiting="true">
+						<div data-sileo-badge data-state={headerPrev.toastState}>
+							{#if headerPrev.toastState === 'success'}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="16"
+									height="16"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"><title>Success</title><path d="M20 6 9 17l-5-5" /></svg
+								>
+							{:else if headerPrev.toastState === 'error'}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="16"
+									height="16"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									><title>Error</title><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg
+								>
+							{:else if headerPrev.toastState === 'warning'}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="16"
+									height="16"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									><title>Warning</title><circle cx="12" cy="12" r="10" /><line
+										x1="12"
+										x2="12"
+										y1="8"
+										y2="12"
+									/><line x1="12" x2="12.01" y1="16" y2="16" /></svg
+								>
+							{:else if headerPrev.toastState === 'info'}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="16"
+									height="16"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									><title>Info</title><circle cx="12" cy="12" r="10" /><path
+										d="m4.93 4.93 4.24 4.24"
+									/><path d="m14.83 9.17 4.24-4.24" /><path d="m14.83 14.83 4.24 4.24" /><path
+										d="m9.17 14.83-4.24 4.24"
+									/><circle cx="12" cy="12" r="4" /></svg
+								>
+							{:else if headerPrev.toastState === 'loading'}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="16"
+									height="16"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									data-sileo-icon="spin"
+									><title>Loading</title><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg
+								>
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="16"
+									height="16"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									><title>Action</title><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+								>
+							{/if}
+						</div>
+						<span data-sileo-title data-state={headerPrev.toastState}>{headerPrev.title}</span>
+					</div>
+				{/key}
+			{/if}
+		</div>
+	</div>
+
+	<!-- Content (description) -->
+	{#if hasDesc}
+		<div data-sileo-content data-edge={expand} data-visible={open}>
+			<div bind:this={contentRef} data-sileo-description>
+				{viewDescription}
+			</div>
+		</div>
+	{/if}
+</button>

package/dist/SileoToast.svelte.d.ts

@@ -0,0 +1,22 @@
+export type SileoState = 'success' | 'error' | 'warning' | 'info' | 'action' | 'loading';
+interface Props {
+    id: string;
+    fill?: string;
+    toastState?: SileoState;
+    title?: string;
+    description?: string;
+    position?: 'left' | 'center' | 'right';
+    expand?: 'top' | 'bottom';
+    roundness?: number;
+    exiting?: boolean;
+    autoExpandDelayMs?: number;
+    autoCollapseDelayMs?: number;
+    canExpand?: boolean;
+    refreshKey?: string;
+    onmouseenter?: (e: MouseEvent) => void;
+    onmouseleave?: (e: MouseEvent) => void;
+    ondismiss?: () => void;
+}
+declare const SileoToast: import("svelte").Component<Props, {}, "">;
+type SileoToast = ReturnType<typeof SileoToast>;
+export default SileoToast;