@atmo-dev/kit 0.4.0 → 0.5.0

package/dist/events/schedule/schedule-utils.js

@@ -0,0 +1,166 @@
+export const SLOT = 5;
+export const SLOT_HEIGHT = '0.6rem';
+export const linkableTypes = new Set([
+    'talk',
+    'presentation',
+    'workshop',
+    'lightning-talk',
+    'panel'
+]);
+export function isLightning(type) {
+    return type === 'lightning-talk';
+}
+export function isCompact(durationMin, type) {
+    return type === 'lightning-talk' || durationMin <= 15;
+}
+/**
+ * Wall-clock components of an instant as seen in `tz`, returned as a Date built
+ * from those local parts (so getHours()/getMinutes() read the tz time, not the
+ * runtime's). Used to lay the grid out in the conference's own timezone.
+ */
+export function toTzDate(iso, tz) {
+    const date = new Date(iso);
+    const parts = new Intl.DateTimeFormat('en-US', {
+        timeZone: tz,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false
+    }).formatToParts(date);
+    const get = (type) => parseInt(parts.find((p) => p.type === type)?.value ?? '0');
+    return new Date(get('year'), get('month') - 1, get('day'), get('hour'), get('minute'));
+}
+export function isoToMinutes(iso, tz) {
+    const d = toTzDate(iso, tz);
+    return d.getHours() * 60 + d.getMinutes();
+}
+export function formatTime(iso, tz) {
+    return new Date(iso).toLocaleTimeString('en-US', {
+        hour: 'numeric',
+        minute: '2-digit',
+        hour12: true,
+        timeZone: tz
+    });
+}
+/** Hour label for a "minutes since midnight" value (0–1439). Timezone-agnostic. */
+export function formatHour(minutes) {
+    const h = Math.floor(minutes / 60) % 24;
+    const p = h >= 12 ? 'PM' : 'AM';
+    const display = h % 12 === 0 ? 12 : h % 12;
+    return `${display}${p}`;
+}
+export function getDayKey(iso, tz) {
+    const d = toTzDate(iso, tz);
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+export function getDayLabel(iso, tz) {
+    return new Date(iso).toLocaleDateString('en-US', {
+        timeZone: tz,
+        weekday: 'long',
+        month: 'long',
+        day: 'numeric'
+    });
+}
+export function getDayShortLabel(iso, tz) {
+    return new Date(iso).toLocaleDateString('en-US', { weekday: 'short', timeZone: tz });
+}
+export function getEventColor(type) {
+    switch (type) {
+        case 'info':
+            return 'bg-base-200 dark:bg-base-800 text-base-700 dark:text-base-300';
+        case 'workshop':
+            return 'bg-cyan-100 dark:bg-cyan-950 text-cyan-900 dark:text-cyan-200';
+        case 'lightning-talk':
+            return 'bg-sky-100 dark:bg-sky-950 text-sky-900 dark:text-sky-200';
+        case 'panel':
+            return 'bg-violet-100 dark:bg-violet-950 text-violet-900 dark:text-violet-200';
+        case 'activity':
+            return 'bg-emerald-100 dark:bg-emerald-950 text-emerald-900 dark:text-emerald-200';
+        default:
+            return 'bg-teal-100 dark:bg-teal-950 text-teal-900 dark:text-teal-200';
+    }
+}
+export function durationMinutes(start, end, tz) {
+    if (!end)
+        return 30;
+    return isoToMinutes(end, tz) - isoToMinutes(start, tz);
+}
+/** Rooms present in a set of events, in display order. */
+export function getRooms(events, explicitOrder) {
+    const present = new Set();
+    for (const e of events) {
+        if (e.room && e.room !== 'none' && e.type !== 'info')
+            present.add(e.room);
+    }
+    if (explicitOrder?.length) {
+        // Honour the declared order, then append any rooms not in the list.
+        const ordered = explicitOrder.filter((r) => present.has(r));
+        const extra = [...present].filter((r) => !explicitOrder.includes(r)).sort();
+        return [...ordered, ...extra];
+    }
+    return [...present].sort();
+}
+export function buildGrid(events, rooms, tz) {
+    const parsed = events
+        .filter((e) => e.start && e.title?.trim())
+        .map((e) => {
+        const startMin = isoToMinutes(e.start, tz);
+        const endMin = e.end ? isoToMinutes(e.end, tz) : startMin + 30;
+        return { ...e, startMin, endMin };
+    });
+    const gridRelevant = parsed.filter((e) => e.type === 'info' || rooms.includes(e.room || ''));
+    if (gridRelevant.length === 0)
+        return { gridEvents: [], minTime: 0, totalSlots: 0, timeGridRows: '' };
+    const minTime = Math.floor(Math.min(...gridRelevant.map((e) => e.startMin)) / SLOT) * SLOT;
+    const maxTime = Math.ceil(Math.max(...gridRelevant.map((e) => e.endMin)) / SLOT) * SLOT;
+    const totalSlots = (maxTime - minTime) / SLOT;
+    // Collapse duplicate "doors open"-style info rows that share a start time
+    // with another info event, so they don't stack on top of each other.
+    const infoStartTimes = new Map();
+    for (const e of gridRelevant) {
+        if (e.type === 'info')
+            infoStartTimes.set(e.startMin, (infoStartTimes.get(e.startMin) ?? 0) + 1);
+    }
+    const filteredRelevant = gridRelevant.filter((e) => {
+        if (e.type === 'info' &&
+            /doors\s*open/i.test(e.title) &&
+            (infoStartTimes.get(e.startMin) ?? 0) > 1)
+            return false;
+        return true;
+    });
+    // Trim each info banner's end so consecutive ones don't overlap.
+    const infoEvents = filteredRelevant
+        .filter((e) => e.type === 'info')
+        .sort((a, b) => a.startMin - b.startMin);
+    for (let i = 0; i < infoEvents.length - 1; i++) {
+        const next = infoEvents[i + 1];
+        if (infoEvents[i].endMin > next.startMin) {
+            infoEvents[i].endMin = next.startMin;
+        }
+    }
+    const gridEvents = filteredRelevant.map((e) => {
+        const fullWidth = e.type === 'info';
+        return {
+            ...e,
+            startRow: Math.round((e.startMin - minTime) / SLOT) + 2,
+            spanRows: Math.max(1, Math.round((e.endMin - e.startMin) / SLOT)),
+            colStart: fullWidth ? 1 : rooms.indexOf(e.room) + 1,
+            colSpan: fullWidth ? rooms.length : 1,
+            zIndex: fullWidth ? 0 : e.startMin
+        };
+    });
+    const timeGridRows = `grid-template-rows: 0.5rem repeat(${totalSlots}, ${SLOT_HEIGHT})`;
+    return { gridEvents, minTime, totalSlots, timeGridRows };
+}
+export function getNowGridRow(grid, dayKey, nowKey, nowMinutes) {
+    if (grid.totalSlots === 0 || nowKey !== dayKey)
+        return null;
+    const exactSlot = (nowMinutes - grid.minTime) / SLOT;
+    const row = Math.floor(exactSlot) + 2;
+    const offsetPercent = (exactSlot - Math.floor(exactSlot)) * 100;
+    if (row < 2 || row > grid.totalSlots + 2)
+        return null;
+    return { row, offsetPercent };
+}

package/dist/events/starter-pack-url.d.ts

@@ -0,0 +1,3 @@
+import { type PreferredSocialClient } from '../social.js';
+/** The pack service returns canonical Bluesky links; navigation is viewer-specific. */
+export declare function starterPackClientUrl(canonicalUrl: string, socialClient?: PreferredSocialClient | null): string | null;

package/dist/events/starter-pack-url.js

@@ -0,0 +1,16 @@
+import { socialClientInfo } from '../social.js';
+/** The pack service returns canonical Bluesky links; navigation is viewer-specific. */
+export function starterPackClientUrl(canonicalUrl, socialClient) {
+    try {
+        const url = new URL(canonicalUrl);
+        if (url.origin !== 'https://bsky.app' ||
+            url.username ||
+            url.password ||
+            !/^\/starter-pack\/[^/]+\/[^/]+$/.test(url.pathname))
+            return null;
+        return `${socialClientInfo(socialClient).url}${url.pathname}${url.search}${url.hash}`;
+    }
+    catch {
+        return null;
+    }
+}

package/dist/events/theme.d.ts

@@ -0,0 +1,9 @@
+export interface EventTheme {
+    name: string;
+    accentColor: string;
+    baseColor: string;
+}
+export declare const accentColors: readonly ["red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
+export declare const defaultTheme: EventTheme;
+export declare function randomAccentColor(): string;
+export declare const themeBackgrounds: Record<string, string>;

package/dist/events/theme.js

@@ -0,0 +1,36 @@
+export const accentColors = [
+    'red',
+    'orange',
+    'amber',
+    'yellow',
+    'lime',
+    'green',
+    'emerald',
+    'teal',
+    'cyan',
+    'sky',
+    'blue',
+    'indigo',
+    'violet',
+    'purple',
+    'fuchsia',
+    'pink',
+    'rose'
+];
+export const defaultTheme = {
+    name: 'minimal',
+    accentColor: 'pink',
+    baseColor: 'zinc'
+};
+export function randomAccentColor() {
+    return accentColors[Math.floor(Math.random() * accentColors.length)];
+}
+export const themeBackgrounds = {
+    minimal: 'Minimal',
+    blobs: 'Blobs',
+    warp: 'Stars',
+    matrix: 'Matrix',
+    fireflies: 'Fireflies',
+    butterflies: 'Butterflies',
+    kaleidoscope: 'Kaleidoscope'
+};

package/dist/events/themes/Blobs.svelte

@@ -0,0 +1,64 @@
+<script lang="ts"></script>
+
+<div class="pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-base-50 dark:bg-base-900">
+	<div
+		class="blob-1 absolute rounded-full bg-accent-500 opacity-30 blur-3xl"
+		style="width: 40vw; height: 40vw; top: -10%; left: -5%;"
+	></div>
+	<div
+		class="blob-2 absolute rounded-full bg-accent-500 opacity-20 blur-3xl"
+		style="width: 35vw; height: 35vw; bottom: -5%; right: -10%;"
+	></div>
+	<div
+		class="blob-3 absolute rounded-full bg-accent-400 opacity-15 blur-3xl"
+		style="width: 25vw; height: 25vw; top: 40%; left: 50%;"
+	></div>
+</div>
+
+<style>
+	@keyframes blob-float-1 {
+		0%,
+		100% {
+			transform: translate(0, 0) scale(1);
+		}
+		33% {
+			transform: translate(5vw, 8vh) scale(1.1);
+		}
+		66% {
+			transform: translate(-3vw, 4vh) scale(0.95);
+		}
+	}
+	@keyframes blob-float-2 {
+		0%,
+		100% {
+			transform: translate(0, 0) scale(1);
+		}
+		33% {
+			transform: translate(-6vw, -5vh) scale(1.05);
+		}
+		66% {
+			transform: translate(4vw, -8vh) scale(1.1);
+		}
+	}
+	@keyframes blob-float-3 {
+		0%,
+		100% {
+			transform: translate(0, 0) scale(1);
+		}
+		33% {
+			transform: translate(8vw, -4vh) scale(1.15);
+		}
+		66% {
+			transform: translate(-5vw, 6vh) scale(0.9);
+		}
+	}
+	.blob-1 {
+		animation: blob-float-1 20s ease-in-out infinite;
+	}
+	.blob-2 {
+		animation: blob-float-2 25s ease-in-out infinite;
+	}
+	.blob-3 {
+		animation: blob-float-3 22s ease-in-out infinite;
+	}
+</style>

package/dist/events/themes/Blobs.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Blobs: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Blobs = InstanceType<typeof Blobs>;
+export default Blobs;

package/dist/events/themes/Butterflies.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	import { BROWSER as browser } from 'esm-env';
+
+	let canvas: HTMLCanvasElement | undefined = $state(undefined);
+
+	$effect(() => {
+		if (!canvas || !browser) return;
+
+		const ctx = canvas.getContext('2d')!;
+		let animId: number;
+
+		const COUNT = 22;
+		const DRIFT_SPEED = 45; // px/sec forward flight
+		const DART_RATE = 0.15; // darts per second per butterfly
+		const ROTATION_EASE = 4; // rad/sec — how fast body turns toward heading
+
+		interface Butterfly {
+			x: number;
+			y: number;
+			heading: number; // radians — current direction of travel
+			rotation: number; // body orientation, lags heading slightly
+			turnRate: number; // radians/sec of random-walk steering
+			flapPhase: number;
+			flapRate: number; // Hz-ish
+			depthPhase: number; // slow "closer/further" scaling
+			depthRate: number; // Hz of depth oscillation
+			size: number;
+			hueShift: number;
+			alpha: number;
+		}
+
+		let lastWidth = 0;
+		function resize() {
+			const w = window.innerWidth;
+			if (w === lastWidth) return;
+			lastWidth = w;
+			canvas!.width = w;
+			canvas!.height = window.screen.height;
+		}
+		resize();
+		window.addEventListener('resize', resize);
+
+		function spawn(): Butterfly {
+			const angle = Math.random() * Math.PI * 2;
+			return {
+				x: Math.random() * canvas!.width,
+				y: Math.random() * canvas!.height,
+				heading: angle,
+				rotation: angle,
+				turnRate: 0.8 + Math.random() * 1.2, // 0.8–2 rad/√s of wander
+				flapPhase: Math.random() * Math.PI * 2,
+				flapRate: 1.5 + Math.random() * 1.5, // 1.5–3 flaps/sec
+				depthPhase: Math.random() * Math.PI * 2,
+				depthRate: 0.08 + Math.random() * 0.08, // 1/12s to 1/6s — 6–12s period
+				size: 10 + Math.random() * 18,
+				hueShift: (Math.random() - 0.5) * 40,
+				alpha: 0.35 + Math.random() * 0.4
+			};
+		}
+
+		const butterflies: Butterfly[] = Array.from({ length: COUNT }, spawn);
+
+		const accentColor = getComputedStyle(document.documentElement)
+			.getPropertyValue('--color-accent-500')
+			.trim();
+
+		// Right wing: top + bottom lobe drawn as a single path so their overlap
+		// fills once (no alpha accumulation). Positioned so the inner edge sits
+		// at +x ≈ 0.05, keeping the two wings from bleeding into each other at
+		// the body axis.
+		function drawWing(s: number) {
+			ctx.beginPath();
+			ctx.ellipse(s * 0.65, -s * 0.3, s * 0.6, s * 0.5, -0.25, 0, Math.PI * 2);
+			ctx.ellipse(s * 0.55, s * 0.35, s * 0.5, s * 0.4, 0.2, 0, Math.PI * 2);
+			ctx.fill();
+		}
+
+		function drawButterfly(b: Butterfly) {
+			// Smooth 0→1 flap at the natural flapRate (Hz)
+			const flap = (Math.sin(b.flapPhase) + 1) / 2;
+			const wingScaleX = 0.45 + 0.55 * flap; // 0.45 (folded) → 1.0 (open)
+
+			// Combined scale: slow "depth" breathing (±25% over ~10s) plus a tiny
+			// bump synced to each wing flap so peak-open wings read as closer.
+			const depth = 1 + 0.25 * Math.sin(b.depthPhase);
+			const flapBump = 1 + 0.08 * flap;
+			const scale = depth * flapBump;
+
+			ctx.save();
+			ctx.translate(b.x, b.y);
+			ctx.scale(scale, scale);
+			ctx.rotate(b.rotation + Math.PI / 2); // body points along velocity
+
+			const fill = accentColor
+				? `oklch(from ${accentColor} l c calc(h + ${b.hueShift}) / ${b.alpha})`
+				: `rgba(80, 140, 240, ${b.alpha})`;
+			ctx.fillStyle = fill;
+
+			// Right wing
+			ctx.save();
+			ctx.scale(wingScaleX, 1);
+			drawWing(b.size);
+			ctx.restore();
+
+			// Left wing (mirrored)
+			ctx.save();
+			ctx.scale(-wingScaleX, 1);
+			drawWing(b.size);
+			ctx.restore();
+
+			// Tiny body — slightly darker tint of the accent
+			ctx.fillStyle = accentColor
+				? `oklch(from ${accentColor} calc(l * 0.55) c calc(h + ${b.hueShift}) / ${Math.min(1, b.alpha + 0.2)})`
+				: `rgba(30, 40, 80, ${Math.min(1, b.alpha + 0.2)})`;
+			ctx.beginPath();
+			ctx.ellipse(0, 0, b.size * 0.08, b.size * 0.55, 0, 0, Math.PI * 2);
+			ctx.fill();
+
+			ctx.restore();
+		}
+
+		let lastTime = performance.now();
+
+		function draw(now: number) {
+			const dt = Math.min((now - lastTime) / 1000, 0.1);
+			lastTime = now;
+
+			const w = canvas!.width;
+			const h = canvas!.height;
+
+			ctx.clearRect(0, 0, w, h);
+
+			// Framerate-independent turn-toward-heading easing factor.
+			const rotationBlend = 1 - Math.exp(-ROTATION_EASE * dt);
+			const sqrtDt = Math.sqrt(dt);
+
+			for (const b of butterflies) {
+				b.flapPhase += b.flapRate * 2 * Math.PI * dt;
+				b.depthPhase += b.depthRate * 2 * Math.PI * dt;
+
+				// Heading random walk — sqrt(dt) keeps the per-second angular
+				// variance constant regardless of framerate (Brownian scaling).
+				b.heading += (Math.random() - 0.5) * 2 * b.turnRate * sqrtDt;
+
+				// Occasional sharp dart, as a Poisson process at DART_RATE/sec.
+				if (Math.random() < DART_RATE * dt) {
+					b.heading += (Math.random() - 0.5) * Math.PI;
+				}
+
+				b.x += Math.cos(b.heading) * DRIFT_SPEED * dt;
+				b.y += Math.sin(b.heading) * DRIFT_SPEED * dt;
+
+				// Body orientation eases toward heading with constant time constant.
+				let delta = b.heading - b.rotation;
+				while (delta > Math.PI) delta -= Math.PI * 2;
+				while (delta < -Math.PI) delta += Math.PI * 2;
+				b.rotation += delta * rotationBlend;
+
+				const margin = b.size * 2;
+				if (b.x < -margin) b.x = w + margin;
+				if (b.x > w + margin) b.x = -margin;
+				if (b.y < -margin) b.y = h + margin;
+				if (b.y > h + margin) b.y = -margin;
+
+				drawButterfly(b);
+			}
+
+			animId = requestAnimationFrame(draw);
+		}
+
+		animId = requestAnimationFrame(draw);
+
+		return () => {
+			cancelAnimationFrame(animId);
+			window.removeEventListener('resize', resize);
+		};
+	});
+</script>
+
+<div class="pointer-events-none fixed inset-0 -z-10 bg-base-50 dark:bg-base-900">
+	<canvas bind:this={canvas} class="absolute inset-0 h-full w-full opacity-60 blur-[1.5px]"
+	></canvas>
+</div>

package/dist/events/themes/Butterflies.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Butterflies: import("svelte").Component<Record<string, never>, {}, "">;
+type Butterflies = ReturnType<typeof Butterflies>;
+export default Butterflies;

package/dist/events/themes/Fireflies.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { BROWSER as browser } from 'esm-env';
+
+	let canvas: HTMLCanvasElement | undefined = $state(undefined);
+
+	$effect(() => {
+		if (!canvas || !browser) return;
+
+		const ctx = canvas.getContext('2d')!;
+		let animId: number;
+
+		const COUNT = 50;
+		const DRIFT_SPEED = 15;
+		const PULSE_SPEED = 0.6;
+
+		interface Firefly {
+			x: number;
+			y: number;
+			vx: number;
+			vy: number;
+			phase: number;
+			pulseRate: number;
+			size: number;
+			hueShift: number;
+		}
+
+		let lastWidth = 0;
+		function resize() {
+			const w = window.innerWidth;
+			if (w === lastWidth) return;
+			lastWidth = w;
+			canvas!.width = w;
+			canvas!.height = window.screen.height;
+		}
+		resize();
+		window.addEventListener('resize', resize);
+
+		const flies: Firefly[] = Array.from({ length: COUNT }, () => ({
+			x: Math.random() * canvas!.width,
+			y: Math.random() * canvas!.height,
+			vx: (Math.random() - 0.5) * 2,
+			vy: (Math.random() - 0.5) * 2,
+			phase: Math.random() * Math.PI * 2,
+			pulseRate: PULSE_SPEED * (0.6 + Math.random() * 0.8),
+			size: 3 + Math.random() * 5,
+			hueShift: (Math.random() - 0.5) * 60 // -30 to +30 degrees
+		}));
+
+		const accentColor = getComputedStyle(document.documentElement)
+			.getPropertyValue('--color-accent-500')
+			.trim();
+
+		let lastTime = performance.now();
+
+		function draw(now: number) {
+			const dt = Math.min((now - lastTime) / 1000, 0.1);
+			lastTime = now;
+
+			const w = canvas!.width;
+			const h = canvas!.height;
+
+			ctx.clearRect(0, 0, w, h);
+
+			for (const fly of flies) {
+				fly.phase += fly.pulseRate * dt;
+				fly.x += fly.vx * DRIFT_SPEED * dt;
+				fly.y += fly.vy * DRIFT_SPEED * dt;
+
+				fly.vx += (Math.random() - 0.5) * 2 * dt;
+				fly.vy += (Math.random() - 0.5) * 2 * dt;
+				const len = Math.sqrt(fly.vx * fly.vx + fly.vy * fly.vy);
+				if (len > 1) {
+					fly.vx /= len;
+					fly.vy /= len;
+				}
+
+				if (fly.x < -40) fly.x = w + 40;
+				if (fly.x > w + 40) fly.x = -40;
+				if (fly.y < -40) fly.y = h + 40;
+				if (fly.y > h + 40) fly.y = -40;
+
+				const glow = (Math.sin(fly.phase) + 1) / 2;
+				const alpha = 0.05 + glow * 0.5;
+				const radius = fly.size * (0.5 + glow * 0.5);
+				const glowRadius = radius * 12;
+				const h_shift = fly.hueShift;
+
+				// Large soft glow
+				const gradient = ctx.createRadialGradient(fly.x, fly.y, 0, fly.x, fly.y, glowRadius);
+				gradient.addColorStop(
+					0,
+					accentColor
+						? `oklch(from ${accentColor} l c calc(h + ${h_shift}) / ${alpha * 0.4})`
+						: `rgba(255, 200, 50, ${alpha * 0.4})`
+				);
+				gradient.addColorStop(
+					0.4,
+					accentColor
+						? `oklch(from ${accentColor} l c calc(h + ${h_shift}) / ${alpha * 0.15})`
+						: `rgba(255, 200, 50, ${alpha * 0.15})`
+				);
+				gradient.addColorStop(
+					1,
+					accentColor
+						? `oklch(from ${accentColor} l c calc(h + ${h_shift}) / 0)`
+						: `rgba(255, 200, 50, 0)`
+				);
+				ctx.fillStyle = gradient;
+				ctx.fillRect(fly.x - glowRadius, fly.y - glowRadius, glowRadius * 2, glowRadius * 2);
+
+				// Bright core
+				ctx.beginPath();
+				ctx.arc(fly.x, fly.y, radius, 0, Math.PI * 2);
+				ctx.fillStyle = accentColor
+					? `oklch(from ${accentColor} calc(l * 1.4) c calc(h + ${h_shift}) / ${alpha})`
+					: `rgba(255, 230, 100, ${alpha})`;
+				ctx.fill();
+			}
+
+			animId = requestAnimationFrame(draw);
+		}
+
+		animId = requestAnimationFrame(draw);
+
+		return () => {
+			cancelAnimationFrame(animId);
+			window.removeEventListener('resize', resize);
+		};
+	});
+</script>
+
+<div class="pointer-events-none fixed inset-0 -z-10 bg-base-50 dark:bg-base-900">
+	<canvas bind:this={canvas} class="absolute inset-0 h-full w-full opacity-50"></canvas>
+</div>

package/dist/events/themes/Fireflies.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Fireflies: import("svelte").Component<Record<string, never>, {}, "">;
+type Fireflies = ReturnType<typeof Fireflies>;
+export default Fireflies;