@atmo-dev/kit 0.3.0 → 0.5.0

package/dist/events/EventEditor.svelte

@@ -0,0 +1,540 @@
+<script lang="ts">
+	import { getCDNImageBlobUrl } from './atproto-helpers.js';
+	import { getEventThumbnail } from './event-media.js';
+	import { Avatar, Button, ToggleGroup, ToggleGroupItem } from '../index.js';
+	import { onMount } from 'svelte';
+	import { InlineEditor, type Editor } from '../index.js';
+	import DateTimePicker from './DateTimePicker.svelte';
+	import TimezonePicker from './TimezonePicker.svelte';
+	import { parseDateTime } from '@internationalized/date';
+	import { isoToDatetimeLocalInTz } from './date-format.js';
+	import type { FlatEventRecord } from './contrail.js';
+	import ThemeApply from './ThemeApply.svelte';
+	import ThemeBackground from './ThemeBackground.svelte';
+	import { defaultTheme, type EventTheme } from './theme.js';
+
+	import ThumbnailSection from './editor/ThumbnailSection.svelte';
+	import LocationSection from './editor/LocationSection.svelte';
+	import LinksSection from './editor/LinksSection.svelte';
+	import ThemeSection from './editor/ThemeSection.svelte';
+	import RecurringModal from './editor/RecurringModal.svelte';
+	import {
+		stripModePrefix,
+		type EventEditorPrefill,
+		type EventLocation,
+		type EventMode,
+		type Visibility
+	} from './editor/types';
+	import { buildEventRecord, buildThumbnailMedia, renderPresetThumbnail } from './editor/save';
+	import { LocationValidationError } from './editor/location';
+	import { DEFAULT_PRESET, hashSeed } from './thumbnails/designs';
+	import type { EditorAdapter, EditorViewer } from './editor/adapter';
+
+	let {
+		eventData = null,
+		actorDid,
+		rkey,
+		adapter,
+		viewer,
+		initialTheme,
+		prefill = null
+	}: {
+		eventData: FlatEventRecord | null;
+		actorDid: string;
+		rkey: string;
+		adapter: EditorAdapter;
+		viewer: EditorViewer;
+		/** Override default theme for new events (e.g. inherit embedder's palette). */
+		initialTheme?: Partial<EventTheme>;
+		/** Autofill payload for new events (e.g. imported from Luma/Meetup). */
+		prefill?: EventEditorPrefill | null;
+	} = $props();
+
+	let isNew = $derived(eventData === null);
+
+	// svelte-ignore state_referenced_locally
+	let thumbnailChanged = $state(eventData === null && (prefill?.thumbnailFile ?? null) !== null);
+
+	// Initial values: prefer prefill (only honored for brand-new events) so the
+	// title editor and date inputs see the imported values on their first render
+	// — TipTap reads `content` only once at mount.
+	// svelte-ignore state_referenced_locally
+	const initialPrefill = eventData === null ? prefill : null;
+	const initialTimezone =
+		initialPrefill?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+	// svelte-ignore state_referenced_locally
+	let name = $state(initialPrefill?.name ?? eventData?.name ?? '');
+	let description = $state(initialPrefill?.description ?? '');
+	let startsAt = $state(
+		initialPrefill?.startsAt ? isoToDatetimeLocalInTz(initialPrefill.startsAt, initialTimezone) : ''
+	);
+	let endsAt = $state(
+		initialPrefill?.endsAt ? isoToDatetimeLocalInTz(initialPrefill.endsAt, initialTimezone) : ''
+	);
+	let timezone = $state(initialTimezone);
+	let mode: EventMode = $state(initialPrefill?.mode ?? 'inperson');
+	let visibility: Visibility = $state('public');
+	// svelte-ignore state_referenced_locally
+	let eventTheme: EventTheme = $state(
+		eventData === null
+			? {
+					...defaultTheme,
+					accentColor: initialTheme?.accentColor ?? defaultTheme.accentColor,
+					...(initialTheme?.baseColor ? { baseColor: initialTheme.baseColor } : {})
+				}
+			: { ...defaultTheme }
+	);
+	const initialThumbnailFile = initialPrefill?.thumbnailFile ?? null;
+	let thumbnailFile: File | null = $state(initialThumbnailFile);
+	let thumbnailPreview: string | null = $state(
+		initialThumbnailFile ? URL.createObjectURL(initialThumbnailFile) : null
+	);
+	// svelte-ignore state_referenced_locally
+	let selectedPreset: string | null = $state(
+		initialThumbnailFile ? null : eventData === null ? DEFAULT_PRESET : null
+	);
+	let submitting = $state(false);
+	let error: string | null = $state(null);
+	let titleEditor = $state<Editor | null>(null);
+
+	let location: EventLocation | null = $state(
+		initialPrefill?.location ? { ...initialPrefill.location } : null
+	);
+	let locationChanged = $state(initialPrefill?.location != null);
+
+	let links: Array<{ uri: string; name: string }> = $state(
+		initialPrefill?.links ? initialPrefill.links.map((l) => ({ ...l })) : []
+	);
+
+	let showRecurringModal = $state(false);
+
+	function populateLocationFromEventData() {
+		if (!eventData) return;
+		if (eventData.locations && eventData.locations.length > 0) {
+			const loc = eventData.locations.find(
+				(v) => v.$type === 'community.lexicon.location.address'
+			) as { street?: string; locality?: string; region?: string; country?: string } | undefined;
+			if (loc) {
+				const street = loc.street || undefined;
+				const locality = loc.locality || undefined;
+				const region = loc.region || undefined;
+				const country = loc.country || undefined;
+				location = {
+					...(street && { street }),
+					...(locality && { locality }),
+					...(region && { region }),
+					...(country && { country })
+				};
+			}
+		}
+		locationChanged = false;
+	}
+
+	function populateThumbnailFromEventData() {
+		if (!eventData) return;
+		if (eventData.media && eventData.media.length > 0) {
+			const media = getEventThumbnail(eventData.media);
+			if (media?.content) {
+				const url = getCDNImageBlobUrl({ did: actorDid, blob: media.content });
+				if (url) {
+					thumbnailPreview = url;
+					thumbnailChanged = false;
+				}
+			}
+		}
+	}
+
+	function populateFromEventData() {
+		if (!eventData) return;
+		name = eventData.name || '';
+		description = eventData.description || '';
+		// Restore the event's authored timezone first so the wall-clock fields we
+		// populate below land in that zone (not the viewer's browser zone).
+		if (eventData.timezone) timezone = eventData.timezone;
+		startsAt = eventData.startsAt ? isoToDatetimeLocalInTz(eventData.startsAt, timezone) : '';
+		endsAt = eventData.endsAt ? isoToDatetimeLocalInTz(eventData.endsAt, timezone) : '';
+		mode = eventData.mode ? stripModePrefix(eventData.mode) : 'inperson';
+		const prefs = (eventData as unknown as { preferences?: { showInDiscovery?: boolean } })
+			.preferences;
+		if (prefs && prefs.showInDiscovery === false) visibility = 'unlisted';
+		else visibility = 'public';
+		links = eventData.uris ? eventData.uris.map((l) => ({ uri: l.uri, name: l.name || '' })) : [];
+		if (eventData.theme) eventTheme = { ...eventData.theme };
+		populateLocationFromEventData();
+		populateThumbnailFromEventData();
+	}
+
+	onMount(() => {
+		if (!isNew) populateFromEventData();
+		titleEditor?.commands.focus();
+	});
+
+	let hostName = $derived(viewer.displayName || viewer.handle || viewer.did || '');
+
+	let thumbnailDateStr = $derived.by(() => {
+		if (!startsAt) return '';
+		const d = new Date(startsAt);
+		if (isNaN(d.getTime())) return '';
+		return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+	});
+
+	// Trim a CalendarDateTime.toString() ("YYYY-MM-DDTHH:mm:ss[.sss]") down to
+	// the "YYYY-MM-DDTHH:mm" shape that <input type="datetime-local"> expects.
+	function cdtToDatetimeLocal(s: string): string {
+		return s.slice(0, 16);
+	}
+
+	// Auto-set end date to 1 hour after start if empty
+	$effect(() => {
+		if (startsAt && !endsAt) {
+			endsAt = cdtToDatetimeLocal(parseDateTime(startsAt).add({ hours: 1 }).toString());
+		}
+	});
+
+	// Auto-adjust end date if start moves past it
+	$effect(() => {
+		if (startsAt && endsAt) {
+			const s = parseDateTime(startsAt);
+			const e = parseDateTime(endsAt);
+			if (s.compare(e) >= 0) {
+				endsAt = cdtToDatetimeLocal(s.add({ hours: 1 }).toString());
+			}
+		}
+	});
+
+	async function handleSubmit() {
+		error = null;
+
+		if (!name.trim()) return void (error = 'Name is required.');
+		if (!startsAt) return void (error = 'Start date is required.');
+		if (!endsAt) return void (error = 'End date is required.');
+		if (!viewer.isLoggedIn || !viewer.did) return void (error = 'You must be logged in.');
+
+		submitting = true;
+
+		try {
+			// Generate thumbnail from preset if selected and no custom upload
+			if (selectedPreset && !thumbnailFile) {
+				const rendered = await renderPresetThumbnail({
+					design: selectedPreset,
+					seed: hashSeed(rkey),
+					name,
+					dateStr: thumbnailDateStr,
+					accent: eventTheme.accentColor
+				});
+				if (rendered) {
+					thumbnailFile = rendered;
+					thumbnailChanged = true;
+				}
+			}
+
+			const existingMedia = (eventData?.media ?? []) as Array<Record<string, unknown>>;
+			const media = await buildThumbnailMedia({
+				isNew,
+				thumbnailChanged,
+				thumbnailFile,
+				existingMedia,
+				uploadBlob: (blob) =>
+					adapter.uploadBlob(blob) as unknown as Promise<Record<string, unknown>>
+			});
+
+			const record = await buildEventRecord({
+				eventData,
+				isNew,
+				name,
+				description,
+				startsAt,
+				endsAt,
+				timezone,
+				mode,
+				visibility,
+				theme: eventTheme,
+				links,
+				location,
+				locationChanged,
+				media,
+				resolveHandle: (handle) => adapter.resolveHandle(handle)
+			});
+
+			if (isNew && prefill?.additionalData) {
+				const existing = (record.additionalData ?? {}) as Record<string, unknown>;
+				record.additionalData = { ...existing, ...prefill.additionalData };
+			}
+
+			const result = await adapter.putRecord({
+				collection: 'community.lexicon.calendar.event',
+				rkey,
+				record
+			});
+
+			await adapter.notifyUpdate?.(result.uri);
+			adapter.onSaved({ uri: result.uri, rkey, isNew });
+		} catch (e) {
+			console.error(`Failed to ${isNew ? 'create' : 'save'} event:`, e);
+			error =
+				e instanceof LocationValidationError
+					? e.message
+					: `Failed to ${isNew ? 'create' : 'save'} event. Please try again.`;
+		} finally {
+			submitting = false;
+		}
+	}
+
+	let showDeleteConfirm = $state(false);
+	let deleting = $state(false);
+
+	async function handleDelete() {
+		deleting = true;
+		try {
+			await adapter.deleteRecord({
+				collection: 'community.lexicon.calendar.event',
+				rkey
+			});
+			const eventUri = `at://${viewer.did}/community.lexicon.calendar.event/${rkey}`;
+			await adapter.notifyUpdate?.(eventUri);
+			adapter.onDeleted?.();
+		} catch (e) {
+			console.error('Failed to delete event:', e);
+			error = 'Failed to delete event. Please try again.';
+		} finally {
+			deleting = false;
+			showDeleteConfirm = false;
+		}
+	}
+</script>
+
+<ThemeApply accentColor={eventTheme.accentColor} baseColor={eventTheme.baseColor} />
+<div class="motion-reduce:hidden"><ThemeBackground theme={eventTheme} /></div>
+
+<div class="px-6 py-12 sm:py-12">
+	<div class="mx-auto max-w-3xl">
+		{#if !viewer.isLoggedIn}
+			<div
+				class="rounded-2xl border border-base-200 bg-base-100 p-8 text-center dark:border-base-800 dark:bg-base-900/50"
+			>
+				<p class="mb-4 text-base-600 dark:text-base-400">
+					Log in to {isNew ? 'create an event' : 'edit this event'}.
+				</p>
+				<Button onclick={() => adapter.requestLogin()}>Log in</Button>
+			</div>
+		{:else}
+			<form
+				onsubmit={(e) => {
+					e.preventDefault();
+					handleSubmit();
+				}}
+			>
+				<!-- Two-column layout mirroring detail page -->
+				<div
+					class="grid grid-cols-1 gap-8 md:grid-cols-[14rem_1fr] md:gap-x-10 md:gap-y-6 lg:grid-cols-[16rem_1fr]"
+				>
+					<ThumbnailSection
+						{rkey}
+						{name}
+						dateStr={thumbnailDateStr}
+						accent={eventTheme.accentColor}
+						bind:thumbnailFile
+						bind:thumbnailPreview
+						bind:thumbnailChanged
+						bind:selectedPreset
+					/>
+
+					<!-- Right column: event details -->
+					<div class="order-2 min-w-0 md:order-0 md:col-start-2 md:row-span-5 md:row-start-1">
+						<!-- Name -->
+						<div class="mb-2 min-h-14">
+							<InlineEditor
+								bind:value={name}
+								bind:editor={titleEditor}
+								label="Event name"
+								singleLine
+								placeholder="Event name"
+								class="w-full text-3xl leading-tight font-semibold tracking-tight text-base-900 placeholder:text-base-500 focus-within:outline-none focus:outline-none sm:text-4xl dark:text-base-50 dark:placeholder:text-base-500"
+							/>
+						</div>
+
+						<!-- Mode toggle -->
+						<div class="mb-3">
+							<ToggleGroup
+								type="single"
+								bind:value={
+									() => mode,
+									(val) => {
+										if (val) mode = val;
+									}
+								}
+								class="w-fit"
+								size="xs"
+							>
+								<ToggleGroupItem value="inperson">In Person</ToggleGroupItem>
+								<ToggleGroupItem value="virtual">Virtual</ToggleGroupItem>
+								<ToggleGroupItem value="hybrid">Hybrid</ToggleGroupItem>
+							</ToggleGroup>
+						</div>
+
+						<!-- Visibility toggle -->
+						<div class="mb-8">
+							<ToggleGroup
+								type="single"
+								bind:value={
+									() => visibility,
+									(val) => {
+										if (val) visibility = val as Visibility;
+									}
+								}
+								class="w-fit"
+								size="xs"
+							>
+								<ToggleGroupItem value="public">Public</ToggleGroupItem>
+								<ToggleGroupItem value="unlisted">Unlisted</ToggleGroupItem>
+							</ToggleGroup>
+							<div class="mt-1.5 text-xs text-muted">
+								{#if visibility === 'public'}
+									Anyone can view and it appears in discovery.
+								{:else}
+									Public to anyone with the link, but hidden from discovery.
+								{/if}
+							</div>
+						</div>
+
+						<!-- Date row -->
+						<div class="mb-5 grid min-w-0 gap-2">
+							<div class="flex min-w-0 items-center gap-2">
+								<span class="w-9 shrink-0 text-sm text-muted">Start</span>
+								<DateTimePicker bind:value={startsAt} label="Start" required />
+							</div>
+							<div class="flex min-w-0 items-center gap-2">
+								<span class="w-9 shrink-0 text-sm text-muted">End</span>
+								<DateTimePicker
+									bind:value={endsAt}
+									label="End"
+									minValue={startsAt}
+									referenceTime={startsAt}
+								/>
+							</div>
+							<div class="min-w-0 pl-11">
+								<TimezonePicker bind:value={timezone} />
+							</div>
+						</div>
+
+						<LocationSection bind:location bind:locationChanged />
+
+						<!-- About Event -->
+						<div class="mt-8 mb-8">
+							<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">About</p>
+							<textarea
+								aria-label="Event description"
+								bind:value={description}
+								rows={4}
+								placeholder="What's this event about? @mentions, #hashtags and links will be detected automatically."
+								class="w-full resize-none border-0 bg-transparent px-0 leading-relaxed text-base-700 placeholder:text-base-500 focus:border-0 focus:ring-0 focus:outline-none dark:text-base-300 dark:placeholder:text-base-500"
+								style="field-sizing: content;"></textarea>
+							<p class="mt-2 text-xs text-muted">
+								Add a hashtag like <span class="font-medium">#webdev</span> or
+								<span class="font-medium">#music</span>
+								to have this event appear under a
+								<a href="/topics" class="text-action underline underline-offset-2">topic</a>.
+							</p>
+						</div>
+
+						{#if error}
+							<p class="mb-4 text-sm text-red-600 dark:text-red-400">{error}</p>
+						{/if}
+
+						<Button type="submit" disabled={submitting || !name.trim() || !startsAt || !endsAt}>
+							{submitting
+								? isNew
+									? 'Publishing...'
+									: 'Saving...'
+								: isNew
+									? 'Publish Event'
+									: 'Save Changes'}
+						</Button>
+						{#if !isNew && adapter.features.recurring}
+							<Button
+								type="button"
+								variant="secondary"
+								disabled={submitting || !name.trim() || !startsAt || !endsAt}
+								onclick={() => (showRecurringModal = true)}
+							>
+								Add recurring events
+							</Button>
+						{/if}
+					</div>
+
+					<!-- Hosted By -->
+					<div class="order-3 md:order-0 md:col-start-1">
+						<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Hosted By</p>
+						<div class="flex items-center gap-2.5">
+							<Avatar src={viewer.avatar} name={hostName} class="size-8 shrink-0" />
+							<span class="truncate text-sm font-medium text-base-900 dark:text-base-100">
+								{hostName}
+							</span>
+						</div>
+					</div>
+
+					<div class="order-4 space-y-6 md:order-0 md:col-start-1">
+						<LinksSection bind:links {adapter} {viewer} />
+						<ThemeSection bind:theme={eventTheme} />
+					</div>
+				</div>
+
+				{#if !isNew && adapter.features.delete}
+					<div class="mt-12 border-t border-base-200 pt-8 dark:border-base-800">
+						{#if showDeleteConfirm}
+							<div class="flex items-center gap-3">
+								<p class="text-sm text-red-600 dark:text-red-400">
+									Are you sure? This cannot be undone.
+								</p>
+								<Button
+									variant="secondary"
+									size="sm"
+									onclick={() => (showDeleteConfirm = false)}
+									disabled={deleting}
+								>
+									Cancel
+								</Button>
+								<Button
+									size="sm"
+									onclick={handleDelete}
+									disabled={deleting}
+									variant="primary"
+									class="red"
+								>
+									{deleting ? 'Deleting...' : 'Delete'}
+								</Button>
+							</div>
+						{:else}
+							<Button variant="primary" class="red" onclick={() => (showDeleteConfirm = true)}
+								>Delete event</Button
+							>
+						{/if}
+					</div>
+				{/if}
+			</form>
+		{/if}
+	</div>
+</div>
+
+<RecurringModal
+	bind:open={showRecurringModal}
+	{rkey}
+	{eventData}
+	{isNew}
+	{name}
+	{startsAt}
+	{endsAt}
+	{mode}
+	{timezone}
+	{description}
+	{links}
+	{location}
+	{thumbnailDateStr}
+	{thumbnailFile}
+	{thumbnailChanged}
+	{selectedPreset}
+	{adapter}
+	{viewer}
+	accent={eventTheme.accentColor}
+/>

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

@@ -0,0 +1,18 @@
+import type { FlatEventRecord } from './contrail.js';
+import { type EventTheme } from './theme.js';
+import { type EventEditorPrefill } from './editor/types';
+import type { EditorAdapter, EditorViewer } from './editor/adapter';
+type $$ComponentProps = {
+    eventData: FlatEventRecord | null;
+    actorDid: string;
+    rkey: string;
+    adapter: EditorAdapter;
+    viewer: EditorViewer;
+    /** Override default theme for new events (e.g. inherit embedder's palette). */
+    initialTheme?: Partial<EventTheme>;
+    /** Autofill payload for new events (e.g. imported from Luma/Meetup). */
+    prefill?: EventEditorPrefill | null;
+};
+declare const EventEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type EventEditor = ReturnType<typeof EventEditor>;
+export default EventEditor;