@atmo-dev/kit 0.4.0 → 0.5.0

package/dist/events/themes/Kaleidoscope.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 SEGMENTS = 12;
+		const ROTATION_SPEED = 0.06;
+
+		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 accentColor = getComputedStyle(document.documentElement)
+			.getPropertyValue('--color-accent-500')
+			.trim();
+
+		// Animated blobs in normalized 0-1 space
+		const BLOB_COUNT = 20;
+		interface Blob {
+			x: number;
+			y: number;
+			vx: number;
+			vy: number;
+			size: number;
+			hueShift: number;
+			alpha: number;
+		}
+
+		const blobs: (Blob & { sharp?: boolean })[] = [
+			...Array.from({ length: BLOB_COUNT }, (): Blob => ({
+				x: Math.random(),
+				y: Math.random() * 0.8,
+				vx: (Math.random() - 0.5) * 0.04,
+				vy: (Math.random() - 0.5) * 0.04,
+				size: 0.04 + Math.random() * 0.1,
+				hueShift: (Math.random() - 0.5) * 80,
+				alpha: 0.15 + Math.random() * 0.35
+			})),
+			// Small sharp dots
+			...Array.from({ length: 10 }, () => ({
+				x: Math.random(),
+				y: Math.random() * 0.8,
+				vx: (Math.random() - 0.5) * 0.06,
+				vy: (Math.random() - 0.5) * 0.06,
+				size: 0.005 + Math.random() * 0.012,
+				hueShift: (Math.random() - 0.5) * 80,
+				alpha: 0.15 + Math.random() * 0.2,
+				sharp: true
+			}))
+		];
+
+		// Offscreen canvas for one triangle slice
+		const sliceCanvas = document.createElement('canvas');
+		const sliceCtx = sliceCanvas.getContext('2d')!;
+
+		let lastTime = performance.now();
+		let globalRotation = 0;
+
+		function renderSlice(r: number, dt: number) {
+			const segAngle = Math.PI / SEGMENTS; // half of full segment
+			const sliceW = Math.ceil(r);
+			const sliceH = Math.ceil(Math.sin(segAngle) * r);
+
+			sliceCanvas.width = sliceW;
+			sliceCanvas.height = sliceH;
+			sliceCtx.clearRect(0, 0, sliceW, sliceH);
+
+			// Clip to the triangle
+			sliceCtx.save();
+			sliceCtx.beginPath();
+			sliceCtx.moveTo(0, 0);
+			sliceCtx.lineTo(sliceW, 0);
+			sliceCtx.lineTo(Math.cos(segAngle) * r, Math.sin(segAngle) * r);
+			sliceCtx.closePath();
+			sliceCtx.clip();
+
+			for (const b of blobs) {
+				b.x += b.vx * dt;
+				b.y += b.vy * dt;
+				if (b.x < 0 || b.x > 1) b.vx *= -1;
+				if (b.y < 0 || b.y > 1) b.vy *= -1;
+				b.x = Math.max(0, Math.min(1, b.x));
+				b.y = Math.max(0, Math.min(1, b.y));
+
+				const px = b.x * sliceW;
+				const py = b.y * sliceH;
+				const br = b.size * sliceW;
+
+				if (b.sharp) {
+					sliceCtx.fillStyle = accentColor
+						? `oklch(from ${accentColor} calc(l * 1.4) c calc(h + ${b.hueShift}) / ${b.alpha})`
+						: `rgba(230, 210, 255, ${b.alpha})`;
+					sliceCtx.beginPath();
+					sliceCtx.arc(px, py, br, 0, Math.PI * 2);
+					sliceCtx.fill();
+				} else {
+					const g = sliceCtx.createRadialGradient(px, py, 0, px, py, br);
+					g.addColorStop(
+						0,
+						accentColor
+							? `oklch(from ${accentColor} calc(l * 1.2) c calc(h + ${b.hueShift}) / ${b.alpha})`
+							: `rgba(200, 150, 255, ${b.alpha})`
+					);
+					g.addColorStop(
+						0.5,
+						accentColor
+							? `oklch(from ${accentColor} l c calc(h + ${b.hueShift}) / ${b.alpha * 0.3})`
+							: `rgba(200, 150, 255, ${b.alpha * 0.3})`
+					);
+					g.addColorStop(1, 'transparent');
+					sliceCtx.fillStyle = g;
+					sliceCtx.fillRect(px - br, py - br, br * 2, br * 2);
+				}
+			}
+
+			sliceCtx.restore();
+			return { sliceW, sliceH };
+		}
+
+		function draw(now: number) {
+			const dt = Math.min((now - lastTime) / 1000, 0.1);
+			lastTime = now;
+
+			const w = canvas!.width;
+			const h = canvas!.height;
+			const cx = w / 2;
+			const cy = h / 2;
+			const maxR = Math.hypot(cx, cy);
+
+			globalRotation += ROTATION_SPEED * dt;
+
+			renderSlice(maxR, dt);
+
+			ctx.clearRect(0, 0, w, h);
+			ctx.save();
+			ctx.translate(cx, cy);
+			ctx.rotate(globalRotation);
+
+			const segAngle = (Math.PI * 2) / SEGMENTS;
+
+			for (let i = 0; i < SEGMENTS; i++) {
+				ctx.save();
+				ctx.rotate(segAngle * i);
+
+				// Normal slice
+				ctx.drawImage(sliceCanvas, 0, 0);
+
+				// Mirrored slice (flip along x-axis to fill the other half)
+				ctx.scale(1, -1);
+				ctx.drawImage(sliceCanvas, 0, 0);
+
+				ctx.restore();
+			}
+
+			ctx.restore();
+			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/Kaleidoscope.svelte.d.ts

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

package/dist/events/themes/Matrix.svelte

@@ -0,0 +1,153 @@
+<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 fontSize = 14;
+		const chars =
+			'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEF';
+
+		// Speeds in units per second
+		const DROP_SPEED = 8; // rows per second
+		const FADE_RATE = 2; // alpha per second for trail fade
+		const MUTATE_CHANCE = 0.8; // chance per column per second
+
+		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);
+
+		let columns = Math.floor(canvas.width / fontSize);
+		let rows = Math.ceil(canvas.height / fontSize) + 1;
+		let drops = new Array(columns).fill(0).map(() => Math.random() * -100);
+		let grid: string[][] = Array.from({ length: columns }, () =>
+			Array.from({ length: rows }, () => chars[Math.floor(Math.random() * chars.length)])
+		);
+
+		const accentColor = getComputedStyle(document.documentElement)
+			.getPropertyValue('--color-accent-500')
+			.trim();
+
+		let bgColor = '';
+		function readBgColor() {
+			const isDark = document.documentElement.classList.contains('dark');
+			bgColor = getComputedStyle(document.documentElement)
+				.getPropertyValue(isDark ? '--color-base-900' : '--color-base-50')
+				.trim();
+		}
+		readBgColor();
+
+		const themeObserver = new MutationObserver(readBgColor);
+		themeObserver.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['class']
+		});
+
+		let lastResize = canvas.width;
+		let lastTime = performance.now();
+
+		function draw(now: number) {
+			const dt = Math.min((now - lastTime) / 1000, 0.1); // delta in seconds, capped
+			lastTime = now;
+
+			const w = canvas!.width;
+			const h = canvas!.height;
+
+			if (w !== lastResize) {
+				lastResize = w;
+				columns = Math.floor(w / fontSize);
+				rows = Math.ceil(h / fontSize) + 1;
+				drops = new Array(columns).fill(0).map(() => Math.random() * -100);
+				grid = Array.from({ length: columns }, () =>
+					Array.from({ length: rows }, () => chars[Math.floor(Math.random() * chars.length)])
+				);
+			}
+
+			// Randomly mutate characters — framerate independent
+			const mutatePerFrame = MUTATE_CHANCE * dt;
+			for (let m = 0; m < columns; m++) {
+				if (Math.random() < mutatePerFrame) {
+					const row = Math.floor(Math.random() * rows);
+					grid[m][row] = chars[Math.floor(Math.random() * chars.length)];
+				}
+			}
+
+			// Fade trail — framerate independent
+			const fadeAlpha = Math.min(1, FADE_RATE * dt);
+			ctx.fillStyle = bgColor
+				? `oklch(from ${bgColor} l c h / ${fadeAlpha})`
+				: `rgba(0, 0, 0, ${fadeAlpha})`;
+			ctx.fillRect(0, 0, w, h);
+
+			ctx.font = `${fontSize}px monospace`;
+
+			const dropStep = DROP_SPEED * dt;
+
+			for (let i = 0; i < columns; i++) {
+				if (drops[i] * fontSize > h && Math.random() < 0.5 * dt) {
+					drops[i] = 0;
+				}
+
+				if (drops[i] < 0) {
+					drops[i] += dropStep;
+					continue;
+				}
+
+				const row = Math.floor(drops[i]);
+				const y = row * fontSize;
+				const gridRow = ((row % rows) + rows) % rows;
+				const char = grid[i]?.[gridRow] ?? '0';
+
+				// Bright head
+				ctx.fillStyle = accentColor
+					? `oklch(from ${accentColor} calc(l * 1.3) c h / 0.9)`
+					: `rgba(150, 255, 150, 0.9)`;
+				ctx.fillText(char, i * fontSize, y);
+
+				// Dimmer trail chars
+				for (let t = 1; t < 3; t++) {
+					const trailRow = (((gridRow - t) % rows) + rows) % rows;
+					const trailY = y - t * fontSize;
+					if (trailY < 0) break;
+					const trailAlpha = 0.4 - t * 0.12;
+					ctx.fillStyle = accentColor
+						? `oklch(from ${accentColor} l c h / ${trailAlpha})`
+						: `rgba(100, 200, 100, ${trailAlpha})`;
+					ctx.fillText(grid[i]?.[trailRow] ?? '0', i * fontSize, trailY);
+				}
+
+				drops[i] += dropStep;
+			}
+
+			animId = requestAnimationFrame(draw);
+		}
+
+		// Fill initial background
+		ctx.fillStyle = bgColor ? `oklch(from ${bgColor} l c h)` : '#000';
+		ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+		animId = requestAnimationFrame(draw);
+
+		return () => {
+			cancelAnimationFrame(animId);
+			window.removeEventListener('resize', resize);
+			themeObserver.disconnect();
+		};
+	});
+</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-40"></canvas>
+</div>

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

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

package/dist/events/themes/Stars.svelte

@@ -0,0 +1,98 @@
+<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 stars: { x: number; y: number; z: number; pz: number }[] = [];
+		const COUNT = 600;
+		const SPEED = 300; // pixels per second
+
+		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);
+
+		for (let i = 0; i < COUNT; i++) {
+			stars.push({
+				x: (Math.random() - 0.5) * canvas.width,
+				y: (Math.random() - 0.5) * canvas.height,
+				z: Math.random() * canvas.width,
+				pz: 0
+			});
+		}
+		stars.forEach((s) => (s.pz = s.z));
+
+		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;
+			const cx = w / 2;
+			const cy = h / 2;
+			const speed = SPEED * dt;
+
+			ctx.clearRect(0, 0, w, h);
+
+			for (const star of stars) {
+				star.pz = star.z;
+				star.z -= speed;
+
+				if (star.z <= 0) {
+					star.x = (Math.random() - 0.5) * w;
+					star.y = (Math.random() - 0.5) * h;
+					star.z = w;
+					star.pz = w;
+				}
+
+				const sx = (star.x / star.z) * w + cx;
+				const sy = (star.y / star.z) * h + cy;
+				const px = (star.x / star.pz) * w + cx;
+				const py = (star.y / star.pz) * h + cy;
+
+				const size = Math.max(0, (1 - star.z / w) * 4);
+				const alpha = Math.max(0, (1 - star.z / w) * 0.9);
+
+				ctx.beginPath();
+				ctx.moveTo(px, py);
+				ctx.lineTo(sx, sy);
+				ctx.strokeStyle = accentColor
+					? `oklch(from ${accentColor} l c h / ${alpha})`
+					: `rgba(255,255,255,${alpha})`;
+				ctx.lineWidth = size;
+				ctx.stroke();
+			}
+
+			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-80"></canvas>
+</div>

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

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

package/dist/events/thumbnails/designs.d.ts

@@ -0,0 +1,18 @@
+export type ThumbnailRenderer = (ctx: CanvasRenderingContext2D, w: number, h: number, name: string, dateStr: string, seed: number, accent: string) => void;
+export declare const gradientMesh: ThumbnailRenderer;
+export declare const boldType: ThumbnailRenderer;
+export declare const minimal: ThumbnailRenderer;
+export declare const geometric: ThumbnailRenderer;
+export declare const darkGradient: ThumbnailRenderer;
+export declare const waves: ThumbnailRenderer;
+/** Textless gradient-mesh preset — built from 6 overlapping radial hotspots
+ *  placed around a loose 3×2 grid with seeded jitter. Used as the default
+ *  thumbnail for new events. */
+export declare const plainMesh: ThumbnailRenderer;
+export declare const DEFAULT_PRESET = "plain";
+export declare const designs: Record<string, ThumbnailRenderer>;
+export declare function resolveAccentColor(name?: string): string;
+/** Stable non-zero integer seed derived from a string (e.g. an event rkey).
+ *  Same input always produces the same seed, so the picker preview matches
+ *  the uploaded PNG for a given event. */
+export declare function hashSeed(s: string): number;