@atmo-dev/kit 0.4.0 → 0.6.0

package/dist/events/ThemeApply.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { accentColors, baseColors } from '../index.js';
+	let { accentColor = 'pink', baseColor = 'zinc' }: { accentColor?: string; baseColor?: string } =
+		$props();
+	const bases: readonly string[] = [...baseColors, 'sand', 'sage'];
+	const accents: readonly string[] = accentColors;
+	const allColors = [...bases, ...accents];
+	let accent = $derived(accents.includes(accentColor) ? accentColor : 'pink');
+	let base = $derived(bases.includes(baseColor) ? baseColor : 'zinc');
+	// Values are chosen from the kit's palette names, never interpolated user HTML.
+	let script = $derived(
+		`<script>(function(){var e=document.documentElement,r=${JSON.stringify(allColors)};r.forEach(function(c){e.classList.remove(c)});e.classList.add(${JSON.stringify(accent)},${JSON.stringify(base)});})()<` +
+			'/script>'
+	);
+	$effect(() => {
+		const element = document.documentElement;
+		element.classList.remove(...allColors);
+		element.classList.add(accent, base);
+		return () => {
+			element.classList.remove(...allColors);
+			element.classList.add('pink', 'zinc');
+		};
+	});
+</script>
+
+<svelte:head>
+	<!-- Script values come only from the allowlisted Kit palettes above. -->
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	{@html script}
+</svelte:head>

package/dist/events/ThemeApply.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    accentColor?: string;
+    baseColor?: string;
+};
+declare const ThemeApply: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeApply = ReturnType<typeof ThemeApply>;
+export default ThemeApply;

package/dist/events/ThemeBackground.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { EventTheme } from './theme.js';
+	import Blobs from './themes/Blobs.svelte';
+	import Stars from './themes/Stars.svelte';
+	import Matrix from './themes/Matrix.svelte';
+	import Fireflies from './themes/Fireflies.svelte';
+	import Butterflies from './themes/Butterflies.svelte';
+	import Kaleidoscope from './themes/Kaleidoscope.svelte';
+
+	let {
+		theme
+	}: {
+		theme: EventTheme;
+	} = $props();
+
+	let key = $derived(`${theme.name}-${theme.accentColor}-${theme.baseColor}`);
+</script>
+
+{#key key}
+	{#if theme.name === 'blobs'}
+		<Blobs />
+	{:else if theme.name === 'warp'}
+		<Stars />
+	{:else if theme.name === 'matrix'}
+		<Matrix />
+	{:else if theme.name === 'fireflies'}
+		<Fireflies />
+	{:else if theme.name === 'butterflies'}
+		<Butterflies />
+	{:else if theme.name === 'kaleidoscope'}
+		<Kaleidoscope />
+	{/if}
+{/key}

package/dist/events/ThemeBackground.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { EventTheme } from './theme.js';
+type $$ComponentProps = {
+    theme: EventTheme;
+};
+declare const ThemeBackground: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeBackground = ReturnType<typeof ThemeBackground>;
+export default ThemeBackground;

package/dist/events/ThemePicker.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { defaultTheme, themeBackgrounds, type EventTheme } from './theme.js';
+
+	let {
+		theme = $bindable<EventTheme>({ ...defaultTheme })
+	}: {
+		theme: EventTheme;
+	} = $props();
+
+	const bgKeys = Object.keys(themeBackgrounds);
+
+	const accentColors = [
+		{ label: 'red', cls: 'bg-red-500' },
+		{ label: 'orange', cls: 'bg-orange-500' },
+		{ label: 'amber', cls: 'bg-amber-500' },
+		{ label: 'yellow', cls: 'bg-yellow-500' },
+		{ label: 'lime', cls: 'bg-lime-500' },
+		{ label: 'green', cls: 'bg-green-500' },
+		{ label: 'emerald', cls: 'bg-emerald-500' },
+		{ label: 'teal', cls: 'bg-teal-500' },
+		{ label: 'cyan', cls: 'bg-cyan-500' },
+		{ label: 'sky', cls: 'bg-sky-500' },
+		{ label: 'blue', cls: 'bg-blue-500' },
+		{ label: 'indigo', cls: 'bg-indigo-500' },
+		{ label: 'violet', cls: 'bg-violet-500' },
+		{ label: 'purple', cls: 'bg-purple-500' },
+		{ label: 'fuchsia', cls: 'bg-fuchsia-500' },
+		{ label: 'pink', cls: 'bg-pink-500' },
+		{ label: 'rose', cls: 'bg-rose-500' }
+	];
+
+	const baseColors = [
+		{ label: 'gray', cls: 'bg-gray-500' },
+		{ label: 'stone', cls: 'bg-stone-500' },
+		{ label: 'zinc', cls: 'bg-zinc-500' },
+		{ label: 'neutral', cls: 'bg-neutral-500' },
+		{ label: 'slate', cls: 'bg-slate-500' },
+		{ label: 'olive', cls: 'bg-olive-500' },
+		{ label: 'mauve', cls: 'bg-mauve-500' },
+		{ label: 'mist', cls: 'bg-mist-500' },
+		{ label: 'taupe', cls: 'bg-taupe-500' }
+	];
+</script>
+
+<div class="flex flex-col gap-6">
+	<!-- Theme background -->
+	<div>
+		<p class="mb-2 text-xs font-medium text-muted">Background style</p>
+		<div class="flex flex-wrap gap-2">
+			{#each bgKeys as key (key)}
+				<button
+					type="button"
+					class="relative flex aspect-video w-24 cursor-pointer items-center justify-center overflow-hidden rounded-xl border-2 transition-colors
+						{theme.name === key
+						? 'border-accent-500'
+						: 'border-base-200 hover:border-accent-400 dark:border-base-700 dark:hover:border-accent-500'}"
+					onclick={() => (theme = { ...theme, name: key })}
+				>
+					<span class="text-xs font-medium text-base-600 dark:text-base-400">
+						{themeBackgrounds[key]}
+					</span>
+				</button>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Accent color -->
+	<div>
+		<p class="mb-2 text-xs font-medium text-muted">Accent color</p>
+		<div class="flex flex-wrap gap-2">
+			{#each accentColors as color (color.label)}
+				<button
+					type="button"
+					aria-label="Accent color {color.label}"
+					aria-pressed={theme.accentColor === color.label}
+					class="size-7 cursor-pointer rounded-full border-2 transition-all {color.cls}
+						{theme.accentColor === color.label
+						? 'border-white ring-2 ring-control-line'
+						: 'border-transparent hover:border-control-line'}"
+					onclick={() => (theme = { ...theme, accentColor: color.label })}
+				></button>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Base color -->
+	<div>
+		<p class="mb-2 text-xs font-medium text-muted">Base color</p>
+		<div class="flex flex-wrap gap-2">
+			{#each baseColors as color (color.label)}
+				<button
+					type="button"
+					aria-label="Base color {color.label}"
+					aria-pressed={theme.baseColor === color.label}
+					class="size-7 cursor-pointer rounded-full border-2 transition-all {color.cls}
+						{theme.baseColor === color.label
+						? 'border-white ring-2 ring-control-line'
+						: 'border-transparent hover:border-control-line'}"
+					onclick={() => (theme = { ...theme, baseColor: color.label })}
+				></button>
+			{/each}
+		</div>
+	</div>
+</div>

package/dist/events/ThemePicker.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type EventTheme } from './theme.js';
+type $$ComponentProps = {
+    theme: EventTheme;
+};
+declare const ThemePicker: import("svelte").Component<$$ComponentProps, {}, "theme">;
+type ThemePicker = ReturnType<typeof ThemePicker>;
+export default ThemePicker;

package/dist/events/ThumbnailPresets.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { designs, resolveAccentColor } from './thumbnails/designs';
+	import { tick } from 'svelte';
+
+	let {
+		name = '',
+		dateStr = '',
+		accent = '',
+		seed = 1,
+		selected = $bindable<string | null>(null),
+		onselect
+	}: {
+		name?: string;
+		dateStr?: string;
+		accent?: string;
+		seed?: number;
+		selected?: string | null;
+		onselect?: () => void;
+	} = $props();
+
+	const presetKeys = Object.keys(designs);
+	const previewSize = 200;
+
+	let containerEl: HTMLDivElement | undefined = $state(undefined);
+
+	function renderAll() {
+		if (!containerEl) return;
+		const color = resolveAccentColor(accent);
+		const canvases = containerEl.querySelectorAll<HTMLCanvasElement>('canvas');
+		canvases.forEach((canvas) => {
+			const key = canvas.dataset.key!;
+			const ctx = canvas.getContext('2d');
+			if (!ctx) return;
+			canvas.width = previewSize;
+			canvas.height = previewSize;
+			designs[key](ctx, previewSize, previewSize, name || 'Event', dateStr, seed, color);
+		});
+	}
+
+	$effect(() => {
+		void name;
+		void dateStr;
+		void accent;
+		void seed;
+		void containerEl;
+		tick().then(renderAll);
+	});
+</script>
+
+<div class="flex flex-col gap-3">
+	<p class="text-xs font-medium text-muted">Preset thumbnails</p>
+	<div class="grid grid-cols-3 gap-2" bind:this={containerEl}>
+		{#each presetKeys as key (key)}
+			<button
+				type="button"
+				aria-label="Use {key} preset thumbnail"
+				class="aspect-square cursor-pointer overflow-hidden rounded-xl border-2 transition-colors
+					{selected === key
+					? 'border-accent-500'
+					: 'border-base-200 hover:border-accent-400 dark:border-base-700 dark:hover:border-accent-500'}"
+				onclick={() => {
+					selected = key;
+					onselect?.();
+				}}
+			>
+				<canvas data-key={key} class="h-full w-full"></canvas>
+			</button>
+		{/each}
+	</div>
+</div>

package/dist/events/ThumbnailPresets.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    name?: string;
+    dateStr?: string;
+    accent?: string;
+    seed?: number;
+    selected?: string | null;
+    onselect?: () => void;
+};
+declare const ThumbnailPresets: import("svelte").Component<$$ComponentProps, {}, "selected">;
+type ThumbnailPresets = ReturnType<typeof ThumbnailPresets>;
+export default ThumbnailPresets;

package/dist/events/TimePicker.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import { TimeField } from 'bits-ui';
+	import { Time } from '@internationalized/date';
+	import { untrack } from 'svelte';
+	import { Icon, IconButton, Popover } from '../index.js';
+	import { Clock } from '@sketchyicons/svelte';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		label = 'Time',
+		locale = 'en',
+		referenceTime = ''
+	}: {
+		value: string;
+		required?: boolean;
+		label?: string;
+		locale?: string;
+		referenceTime?: string;
+	} = $props();
+	let isOpen = $state(false);
+	let listEl = $state<HTMLDivElement>();
+	let internalValue = $state<Time>();
+	$effect(() => {
+		const [hour, minute] = value.split(':').map(Number);
+		untrack(() => {
+			if (!value || !Number.isFinite(hour) || !Number.isFinite(minute)) internalValue = undefined;
+			else if (internalValue?.hour !== hour || internalValue?.minute !== minute)
+				internalValue = new Time(hour, minute);
+		});
+	});
+	function handleValueChange(next: Time | undefined) {
+		if (next)
+			value = `${String(next.hour).padStart(2, '0')}:${String(next.minute).padStart(2, '0')}`;
+	}
+	let slots = $derived(
+		Array.from({ length: 48 }, (_, i) => {
+			const h = Math.floor(i / 2),
+				m = i % 2 === 0 ? 0 : 30;
+			return {
+				key: `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`,
+				label: new Date(2000, 0, 1, h, m).toLocaleTimeString(locale, {
+					hour: 'numeric',
+					minute: '2-digit'
+				})
+			};
+		})
+	);
+	function durationLabel(key: string) {
+		if (!referenceTime) return '';
+		const [rh, rm] = referenceTime.split(':').map(Number),
+			[h, m] = key.split(':').map(Number);
+		const diff = h * 60 + m - rh * 60 - rm;
+		if (diff <= 0) return '';
+		const hours = Math.floor(diff / 60),
+			minutes = diff % 60;
+		return hours ? (minutes ? `${hours}h ${minutes}m` : `${hours}h`) : `${minutes}m`;
+	}
+</script>
+
+<div
+	class="flex h-11 items-center gap-1 rounded-ui border border-line bg-recess px-2 text-sm text-ink shadow-(--ui-recess-shadow) focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-focus hover:border-control-hover"
+>
+	<TimeField.Root
+		bind:value={internalValue}
+		onValueChange={handleValueChange}
+		granularity="minute"
+		{locale}
+		{required}
+	>
+		<TimeField.Label class="sr-only">{label}</TimeField.Label>
+		<TimeField.Input class="whitespace-nowrap">
+			{#snippet children({ segments })}{#each segments as segment, i (segment.part + i)}
+					{#if segment.part === 'literal'}<span class="text-muted">{segment.value}</span
+						>{:else}<TimeField.Segment
+							part={segment.part}
+							class="rounded px-0.5 hover:bg-recess focus:bg-accent-soft focus:outline-none"
+							>{segment.value}</TimeField.Segment
+						>{/if}
+				{/each}{/snippet}
+		</TimeField.Input>
+	</TimeField.Root>
+	<Popover
+		bind:open={isOpen}
+		class="max-h-60 overflow-y-auto p-2"
+		aria-label={`Choose ${label.toLowerCase()}`}
+		onOpenAutoFocus={(event) => {
+			const selected = listEl?.querySelector<HTMLButtonElement>('[data-selected]');
+			if (selected) {
+				event.preventDefault();
+				selected.focus();
+				selected.scrollIntoView({ block: 'center' });
+			}
+		}}
+	>
+		{#snippet trigger({ props })}<IconButton
+				{...props}
+				label={`Choose ${label.toLowerCase()}`}
+				class="size-7"><Icon img={Clock} size={15} /></IconButton
+			>{/snippet}
+		<div bind:this={listEl}>
+			{#each slots as slot (slot.key)}<button
+					type="button"
+					class="flex w-full items-center justify-between gap-4 rounded-ui px-3 py-1.5 text-left text-sm text-ink hover:bg-recess aria-pressed:bg-accent-soft aria-pressed:text-action"
+					aria-pressed={value === slot.key}
+					data-selected={value === slot.key ? '' : undefined}
+					onclick={() => {
+						value = slot.key;
+						isOpen = false;
+					}}
+					>{slot.label}{#if durationLabel(slot.key)}<span class="text-xs text-muted"
+							>{durationLabel(slot.key)}</span
+						>{/if}</button
+				>{/each}
+		</div>
+	</Popover>
+</div>

package/dist/events/TimePicker.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    value: string;
+    required?: boolean;
+    label?: string;
+    locale?: string;
+    referenceTime?: string;
+};
+declare const TimePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;

package/dist/events/TimezonePicker.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Button, Icon, Input, Popover } from '../index.js';
+	import { Globe } from '@sketchyicons/svelte';
+	let { value = $bindable('') }: { value: string } = $props();
+	let isOpen = $state(false);
+	let search = $state('');
+	const allTimezones = ['UTC', ...Intl.supportedValuesOf('timeZone')];
+	// Memoized formatting results are not reactive state.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const offsets = new Map<string, string>();
+	function getOffset(tz: string) {
+		if (offsets.has(tz)) return offsets.get(tz)!;
+		try {
+			const result =
+				new Intl.DateTimeFormat('en', { timeZone: tz, timeZoneName: 'shortOffset' })
+					.formatToParts(new Date())
+					.find((part) => part.type === 'timeZoneName')?.value ?? '';
+			offsets.set(tz, result);
+			return result;
+		} catch {
+			return '';
+		}
+	}
+	function getCityName(tz: string) {
+		return (tz.split('/').at(-1) || tz).replace(/_/g, ' ');
+	}
+	let filtered = $derived(
+		allTimezones.filter(
+			(tz) =>
+				!search.trim() ||
+				`${tz} ${getCityName(tz)} ${getOffset(tz)}`.toLowerCase().includes(search.toLowerCase())
+		)
+	);
+</script>
+
+<Popover bind:open={isOpen} class="w-64 p-2" aria-label="Choose timezone">
+	{#snippet trigger({ props })}<Button
+			{...props}
+			variant="secondary"
+			class="min-h-11 w-full justify-start gap-2.5 border-line bg-recess px-3 text-xs shadow-(--ui-recess-shadow) hover:border-control-hover"
+			aria-label={`Timezone: ${value}`}
+		>
+			<Icon img={Globe} size={17} class="text-muted" />
+			<span class="min-w-0 flex-1 truncate text-left">{getCityName(value)}</span>
+			<span class="shrink-0 text-muted">{getOffset(value)}</span>
+		</Button>{/snippet}
+	<Input
+		type="search"
+		bind:value={search}
+		aria-label="Search timezone"
+		placeholder="Search timezone…"
+		class="mb-2"
+	/>
+	<div class="max-h-60 overflow-y-auto">
+		{#each filtered as tz (tz)}<button
+				type="button"
+				class="flex w-full items-center justify-between gap-3 rounded-ui px-3 py-2 text-left text-xs text-ink hover:bg-recess aria-pressed:bg-accent-soft aria-pressed:text-action"
+				aria-pressed={value === tz}
+				onclick={() => {
+					value = tz;
+					isOpen = false;
+					search = '';
+				}}><span>{getCityName(tz)}</span><span class="text-muted">{getOffset(tz)}</span></button
+			>{/each}
+		{#if !filtered.length}<p class="p-3 text-xs text-muted">No results</p>{/if}
+	</div>
+</Popover>

package/dist/events/TimezonePicker.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    value: string;
+};
+declare const TimezonePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TimezonePicker = ReturnType<typeof TimezonePicker>;
+export default TimezonePicker;

package/dist/events/VodPlayer.svelte

@@ -0,0 +1,154 @@
+<script lang="ts" module>
+	export type VodPlayerApi = {
+		seek: (time: number) => void;
+	};
+</script>
+
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import 'plyr/dist/plyr.css';
+	import type HlsType from 'hls.js';
+	import type PlyrType from 'plyr';
+	import { sketchyPlyrIcons } from './event-view/plyr-icons.js';
+
+	let {
+		playlistUrl,
+		title,
+		subtitlesUrl,
+		currentTime = $bindable(0),
+		api = $bindable(undefined)
+	}: {
+		playlistUrl: string;
+		title: string;
+		subtitlesUrl?: string;
+		currentTime?: number;
+		api?: VodPlayerApi;
+	} = $props();
+
+	let videoEl: HTMLVideoElement | undefined = $state();
+	let error = $state(false);
+
+	let hls: HlsType | null = null;
+	let plyr: PlyrType | null = null;
+
+	api = {
+		seek(time: number) {
+			if (plyr) {
+				plyr.currentTime = time;
+				plyr.play();
+			}
+		}
+	};
+
+	onMount(() => {
+		init();
+		return () => {
+			hls?.destroy();
+			plyr?.destroy();
+		};
+	});
+
+	async function init() {
+		if (!videoEl) return;
+
+		try {
+			const [{ default: Plyr }, { default: Hls }] = await Promise.all([
+				import('plyr'),
+				import('hls.js')
+			]);
+
+			if (Hls.isSupported()) {
+				hls = new Hls({ autoStartLoad: false });
+				hls.loadSource(playlistUrl);
+				hls.attachMedia(videoEl);
+				hls.on(Hls.Events.ERROR, (_event, data) => {
+					if (data.fatal) {
+						if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
+							hls?.startLoad();
+						} else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
+							hls?.recoverMediaError();
+						} else {
+							error = true;
+						}
+					}
+				});
+			} else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
+				videoEl.src = playlistUrl;
+			} else {
+				error = true;
+				return;
+			}
+
+			plyr = new Plyr(videoEl, {
+				...sketchyPlyrIcons(),
+				controls: [
+					'play-large',
+					'play',
+					'progress',
+					'current-time',
+					'mute',
+					'volume',
+					'captions',
+					'settings',
+					'fullscreen'
+				],
+				settings: ['captions', 'speed'],
+				speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] },
+				captions: { active: !!subtitlesUrl, language: 'en', update: true },
+				ratio: '16:9'
+			});
+
+			plyr.on('play', () => {
+				hls?.startLoad();
+			});
+
+			plyr.on('timeupdate', () => {
+				currentTime = plyr?.currentTime ?? 0;
+			});
+
+			// Add track after Plyr init and force captions on
+			if (subtitlesUrl) {
+				const media = videoEl;
+				// Remove any existing tracks first
+				media.querySelectorAll('track').forEach((t) => t.remove());
+				// Add fresh track
+				const track = document.createElement('track');
+				track.kind = 'captions';
+				track.label = 'English';
+				track.srclang = 'en';
+				track.src = subtitlesUrl;
+				track.default = true;
+				media.appendChild(track);
+				// Wait for track to load, then activate
+				track.addEventListener('load', () => {
+					plyr!.toggleCaptions(true);
+				});
+				// Also try toggling after a short delay as fallback
+				setTimeout(() => plyr?.toggleCaptions(true), 500);
+			}
+		} catch {
+			error = true;
+		}
+	}
+</script>
+
+{#if error}
+	<div
+		class="flex aspect-video w-full items-center justify-center rounded-xl border border-base-200 bg-base-100 dark:border-base-800 dark:bg-base-900"
+	>
+		<p class="text-sm text-muted">Failed to load video</p>
+	</div>
+{:else}
+	<div
+		class="aspect-video w-full max-w-full overflow-hidden rounded-xl border border-base-300 dark:border-base-400/40"
+	>
+		<video bind:this={videoEl} class="h-full w-full" aria-label={title} crossorigin="anonymous"
+		></video>
+	</div>
+{/if}
+
+<style>
+	* {
+		--plyr-color-main: var(--color-accent-500);
+	}
+</style>

package/dist/events/VodPlayer.svelte.d.ts

@@ -0,0 +1,14 @@
+export type VodPlayerApi = {
+    seek: (time: number) => void;
+};
+import 'plyr/dist/plyr.css';
+type $$ComponentProps = {
+    playlistUrl: string;
+    title: string;
+    subtitlesUrl?: string;
+    currentTime?: number;
+    api?: VodPlayerApi;
+};
+declare const VodPlayer: import("svelte").Component<$$ComponentProps, {}, "currentTime" | "api">;
+type VodPlayer = ReturnType<typeof VodPlayer>;
+export default VodPlayer;