Update Banner

1<script lang="ts" module>
2	import { tv, type VariantProps } from 'tailwind-variants';
3
4	/** Message a waiting service worker must handle to activate immediately. */
5	export const SKIP_WAITING_MESSAGE = { type: 'SKIP_WAITING' };
6
7	export const updateBannerVariants = tv({
8		base: 'z-50 flex items-start gap-3 rounded-lg border bg-popover p-3 text-sm text-popover-foreground shadow-lg',
9		variants: {
10			position: {
11				inline: 'w-full',
12				'bottom-right': 'fixed bottom-4 right-4 w-[min(22rem,calc(100vw-2rem))]',
13				'bottom-left': 'fixed bottom-4 left-4 w-[min(22rem,calc(100vw-2rem))]',
14				'bottom-center': 'fixed bottom-4 left-1/2 -translate-x-1/2 w-[min(28rem,calc(100vw-2rem))]',
15				'top-center': 'fixed top-4 left-1/2 -translate-x-1/2 w-[min(28rem,calc(100vw-2rem))]'
16			}
17		},
18		defaultVariants: { position: 'bottom-right' }
19	});
20
21	export type UpdateBannerPosition = VariantProps<typeof updateBannerVariants>['position'];
22	export type UpdateSource = 'service-worker' | 'manual';
23</script>
24
25<script lang="ts">
26	import { cn } from '$UTILS$';
27	import { onMount, type Snippet } from 'svelte';
28	import { fly } from 'svelte/transition';
29	import { Button } from '$lib/components/ui/button';
30	import { RefreshCw, Sparkles, X } from '@lucide/svelte';
31
32	let {
33		available = $bindable(false),
34		source = 'service-worker',
35		scope,
36		pollInterval = 0,
37		position = 'bottom-right',
38		title = 'A new version is available',
39		description = 'Reload to get the latest version of the app.',
40		reloadLabel = 'Reload',
41		dismissLabel = 'Later',
42		dismissible = true,
43		autoReloadAfter,
44		reloadTimeout = 3000,
45		class: className,
46		onreload,
47		ondismiss,
48		onupdatefound,
49		icon,
50		children,
51		...rest
52	}: {
53		/** Whether an update is waiting. Bindable so you can drive it yourself. */
54		available?: boolean;
55		/** `manual` skips all service worker wiring and only uses `available`. */
56		source?: UpdateSource;
57		/** Service worker scope to look up. Defaults to the closest registration. */
58		scope?: string;
59		/** Milliseconds between `registration.update()` checks. 0 disables polling. */
60		pollInterval?: number;
61		position?: UpdateBannerPosition;
62		title?: string;
63		description?: string;
64		reloadLabel?: string;
65		dismissLabel?: string;
66		dismissible?: boolean;
67		/** Seconds to wait before reloading on its own. Omit to always ask first. */
68		autoReloadAfter?: number;
69// … truncated