@atmo-dev/events-ui 0.1.0

package/dist/EventView.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { EditorAdapter, EditorViewer } from './editor/adapter.js';
+type $$ComponentProps = {
+    data: any;
+    adapter: EditorAdapter;
+    viewer: EditorViewer;
+    /** Current page URL — used for the OG image link and the calendar button. */
+    pageUrl: URL;
+    embedMode?: boolean;
+    /** When set, the share modal / Bluesky post embed use this URL instead
+     *  of the canonical atmo.rsvp event URL. Useful for embedders that want
+     *  share links to point at their own event page. */
+    shareUrlOverride?: string;
+};
+declare const EventView: import("svelte").Component<$$ComponentProps, {}, "">;
+type EventView = ReturnType<typeof EventView>;
+export default EventView;

package/dist/ImageDropper.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { Portal } from 'bits-ui';
+
+	let {
+		processImageFile,
+		isDragOver = $bindable()
+	}: {
+		processImageFile: (file: File) => Promise<void>;
+		isDragOver: boolean;
+	} = $props();
+
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		const dt = event.dataTransfer;
+		if (!dt) return;
+
+		let imageCount = 0;
+		if (dt.items) {
+			for (let i = 0; i < dt.items.length; i++) {
+				const item = dt.items[i];
+				if (item && item.kind === 'file' && item.type.startsWith('image/')) {
+					imageCount++;
+				}
+			}
+		} else if (dt.files) {
+			for (let i = 0; i < dt.files.length; i++) {
+				const file = dt.files[i];
+				if (file?.type.startsWith('image/')) {
+					imageCount++;
+				}
+			}
+		}
+
+		isDragOver = imageCount > 0;
+	}
+	function handleDragLeave(event: DragEvent) {
+		event.preventDefault();
+		event.stopPropagation();
+		isDragOver = false;
+	}
+	async function handleDrop(event: DragEvent) {
+		event.preventDefault();
+		event.stopPropagation();
+		isDragOver = false;
+		if (!event.dataTransfer?.files?.length) return;
+		for (const file of event.dataTransfer.files) {
+			if (file?.type.startsWith('image/')) {
+				await processImageFile(file);
+			}
+		}
+	}
+</script>
+
+<svelte:window ondragover={handleDragOver} ondragleave={handleDragLeave} ondrop={handleDrop} />
+
+{#if isDragOver}
+	<Portal>
+		<div
+			class="bg-base-100/80 dark:bg-base-900/80 text-primary dark:text-base-100 pointer-events-none absolute inset-0 z-[1000] flex items-center justify-center text-4xl font-bold backdrop-blur-md"
+		>
+			Drop file to add it to your message
+		</div>
+	</Portal>
+{/if}

package/dist/ImageDropper.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    processImageFile: (file: File) => Promise<void>;
+    isDragOver: boolean;
+};
+declare const ImageDropper: import("svelte").Component<$$ComponentProps, {}, "isDragOver">;
+type ImageDropper = ReturnType<typeof ImageDropper>;
+export default ImageDropper;

package/dist/Map.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { MapLibre, Projection, Marker, AttributionControl } from 'svelte-maplibre-gl';
+	import maplibregl from 'maplibre-gl';
+
+	let { lat, lng, zoom = 11 }: { lat: number; lng: number; zoom?: number } = $props();
+
+	let map: maplibregl.Map | undefined = $state();
+</script>
+
+<MapLibre
+	bind:map
+	class="h-full w-full overflow-hidden rounded-xl"
+	style="https://tiles.openfreemap.org/styles/liberty"
+	{zoom}
+	center={[lng, lat]}
+	attributionControl={false}
+>
+	<AttributionControl position="bottom-left" compact={false} />
+	<Projection type="globe" />
+	<Marker lnglat={[lng, lat]}>
+		{#snippet content()}
+			<div class="from-accent-400 size-10 rounded-full bg-radial via-transparent p-3">
+				<div class="bg-accent-500 size-4 rounded-full ring-2 ring-white"></div>
+			</div>
+		{/snippet}
+	</Marker>
+</MapLibre>

package/dist/Map.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    lat: number;
+    lng: number;
+    zoom?: number;
+};
+declare const Map: import("svelte").Component<$$ComponentProps, {}, "">;
+type Map = ReturnType<typeof Map>;
+export default Map;

package/dist/PostToBlueskyModal.svelte

@@ -0,0 +1,244 @@
+<script lang="ts">
+	import { Modal, Button, Checkbox, Label } from '@foxui/core';
+	import {
+		MicrobloggingPostCreator,
+		editorJsonToBlueskyPost,
+		createBlueskyMentionSearch,
+		LinkCard,
+		type MicrobloggingPostContent
+	} from '@foxui/social';
+	import type { JSONContent, SvelteTiptap } from '@foxui/text';
+	import type { Readable } from 'svelte/store';
+	import { get } from 'svelte/store';
+	import type { EditorAdapter, EditorViewer } from './editor/adapter.js';
+
+	let {
+		open = $bindable(false),
+		canSetEventComments = false,
+		eventDid,
+		eventRkey,
+		eventName,
+		eventUrl,
+		eventDescription,
+		ogImageUrl,
+		initialText,
+		adapter,
+		viewer,
+		onPosted
+	}: {
+		open: boolean;
+		canSetEventComments?: boolean;
+		eventDid: string;
+		eventRkey: string;
+		eventName: string;
+		eventUrl: string;
+		eventDescription?: string;
+		ogImageUrl?: string;
+		initialText: string;
+		adapter: EditorAdapter;
+		viewer: EditorViewer;
+		onPosted?: (ref: { uri: string; cid: string; showComments: boolean }) => void;
+	} = $props();
+
+	function textToDoc(text: string): JSONContent {
+		const lines = text.split('\n');
+		const content = lines.map((line) =>
+			line.length > 0
+				? { type: 'paragraph', content: [{ type: 'text', text: line }] }
+				: { type: 'paragraph' }
+		);
+		return { type: 'doc', content } as JSONContent;
+	}
+
+	const searchMentions = createBlueskyMentionSearch();
+
+	// Seed from the initial prop; the $effect below re-pushes it into the editor
+	// each time the modal opens, so only capturing the initial value is intentional.
+	// svelte-ignore state_referenced_locally
+	let postContent = $state<MicrobloggingPostContent>({
+		text: initialText,
+		json: textToDoc(initialText)
+	});
+	let editorStore = $state<Readable<SvelteTiptap.Editor> | undefined>();
+	let prefilledForOpen = $state(false);
+	let showComments = $state(true);
+	let posting = $state(false);
+	let errorMessage = $state<string | null>(null);
+
+	// Each time the modal opens, push the initial text into the editor once it's
+	// ready. The editor instance arrives via a readable store after PlainTextEditor
+	// has mounted internally, so we subscribe and write content on the first
+	// non-null value we see for this open cycle.
+	$effect(() => {
+		if (!open) {
+			prefilledForOpen = false;
+			showComments = true;
+			errorMessage = null;
+			return;
+		}
+		if (!editorStore || prefilledForOpen) return;
+		const unsub = editorStore.subscribe((ed) => {
+			if (!ed || prefilledForOpen) return;
+			ed.commands.setContent(textToDoc(initialText));
+			prefilledForOpen = true;
+		});
+		return unsub;
+	});
+
+	// Bluesky's external embed accepts a thumb blob up to ~1MB. Fetch the OG
+	// image, upload it to the user's PDS, return a clean blob ref. On any failure
+	// (CORS, large image, network) we fall back to a thumb-less embed rather than
+	// blocking the post.
+	async function fetchAndUploadThumbnail(url: string) {
+		try {
+			const resp = await fetch(url);
+			if (!resp.ok) return null;
+			const blob = await resp.blob();
+			if (!blob.type.startsWith('image/')) return null;
+			if (blob.size > 1_000_000) return null;
+			const result = await adapter.uploadBlob(blob);
+			return {
+				$type: result.$type,
+				ref: result.ref,
+				mimeType: result.mimeType,
+				size: result.size
+			};
+		} catch (err) {
+			console.warn('PostToBlueskyModal: thumbnail upload failed, posting without thumb', err);
+			return null;
+		}
+	}
+
+	async function handlePost() {
+		if (!viewer.did || posting) return;
+
+		// Read the editor's live JSON directly — postContent only updates on the
+		// editor's onupdate callback and can lag behind setContent prefills.
+		const editor = editorStore ? get(editorStore) : undefined;
+		const liveJson: JSONContent = editor
+			? (editor.getJSON() as JSONContent)
+			: postContent.json;
+
+		posting = true;
+		errorMessage = null;
+		try {
+			const { text, facets } = editorJsonToBlueskyPost(liveJson);
+
+			if (!text.trim()) {
+				errorMessage = 'Post text cannot be empty';
+				posting = false;
+				return;
+			}
+
+			const externalEmbed: Record<string, unknown> = {
+				uri: eventUrl,
+				title: eventName,
+				description: eventDescription ?? ''
+			};
+			if (ogImageUrl) {
+				const thumb = await fetchAndUploadThumbnail(ogImageUrl);
+				if (thumb) externalEmbed.thumb = thumb;
+			}
+
+			const postRecord: Record<string, unknown> = {
+				$type: 'app.bsky.feed.post',
+				text,
+				createdAt: new Date().toISOString(),
+				embed: {
+					$type: 'app.bsky.embed.external',
+					external: externalEmbed
+				}
+			};
+			if (facets.length > 0) postRecord.facets = facets;
+
+			const postResp = await adapter.createRecord({
+				collection: 'app.bsky.feed.post',
+				record: postRecord
+			});
+			if (!postResp.uri || !postResp.cid) {
+				console.error('PostToBlueskyModal: PDS response missing uri/cid', postResp);
+				throw new Error(
+					'PDS rejected the post — try logging out and back in to refresh permissions'
+				);
+			}
+			const postUri = postResp.uri;
+			const postCid = postResp.cid;
+
+			if (canSetEventComments) {
+				const fresh = await adapter.getRecord({
+					did: eventDid,
+					collection: 'community.lexicon.calendar.event',
+					rkey: eventRkey
+				});
+				const updatedRecord = {
+					...fresh.value,
+					bskyPostRef: {
+						uri: postUri,
+						cid: postCid,
+						showComments
+					}
+				};
+				await adapter.putRecord({
+					collection: 'community.lexicon.calendar.event',
+					rkey: eventRkey,
+					record: updatedRecord
+				});
+
+				await adapter.notifyUpdate?.(
+					`at://${eventDid}/community.lexicon.calendar.event/${eventRkey}`
+				);
+			}
+
+			onPosted?.({ uri: postUri, cid: postCid, showComments });
+			open = false;
+		} catch (err) {
+			console.error('PostToBlueskyModal: post failed', err);
+			errorMessage = err instanceof Error ? err.message : 'Failed to post';
+		} finally {
+			posting = false;
+		}
+	}
+</script>
+
+<Modal bind:open>
+	<div class="space-y-4">
+		<h2 class="text-base-900 dark:text-base-50 text-xl font-bold">Share to Bluesky</h2>
+
+		<div
+			class="border-base-200 dark:border-base-800 bg-base-50 dark:bg-base-950/30 space-y-3 rounded-xl border p-3"
+		>
+			<MicrobloggingPostCreator
+				bind:editor={editorStore}
+				bind:content={postContent}
+				{searchMentions}
+				maxLength={300}
+				textEditorClass="max-h-48 overflow-y-auto"
+			/>
+			<LinkCard
+				href={eventUrl}
+				meta={{
+					title: eventName,
+					description: eventDescription,
+					image: ogImageUrl
+				}}
+			/>
+		</div>
+
+		{#if canSetEventComments}
+			<Label class="flex items-center gap-2">
+				<Checkbox bind:checked={showComments} />
+				<span class="text-base-700 dark:text-base-300 text-sm">
+					Show comments on event page
+				</span>
+			</Label>
+		{/if}
+
+		{#if errorMessage}
+			<p class="text-red-600 dark:text-red-400 text-sm">{errorMessage}</p>
+		{/if}
+
+		<Button class="w-full" onclick={handlePost} disabled={posting}>
+			{posting ? 'Posting…' : 'Post'}
+		</Button>
+	</div>
+</Modal>

package/dist/PostToBlueskyModal.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { EditorAdapter, EditorViewer } from './editor/adapter.js';
+type $$ComponentProps = {
+    open: boolean;
+    canSetEventComments?: boolean;
+    eventDid: string;
+    eventRkey: string;
+    eventName: string;
+    eventUrl: string;
+    eventDescription?: string;
+    ogImageUrl?: string;
+    initialText: string;
+    adapter: EditorAdapter;
+    viewer: EditorViewer;
+    onPosted?: (ref: {
+        uri: string;
+        cid: string;
+        showComments: boolean;
+    }) => void;
+};
+declare const PostToBlueskyModal: import("svelte").Component<$$ComponentProps, {}, "open">;
+type PostToBlueskyModal = ReturnType<typeof PostToBlueskyModal>;
+export default PostToBlueskyModal;

package/dist/ShareModal.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import { Modal, Button, Avatar } from '@foxui/core';
+	import { LinkCard } from '@foxui/social';
+	import PostToBlueskyModal from './PostToBlueskyModal.svelte';
+	import type { EditorAdapter, EditorViewer } from './editor/adapter.js';
+
+	let {
+		open = $bindable(false),
+		url,
+		title = 'Event created!',
+		shareText,
+		eventName,
+		ogImageUrl,
+		canSetEventComments = false,
+		eventDid,
+		eventRkey,
+		eventDescription,
+		adapter,
+		viewer,
+		onPosted
+	}: {
+		open: boolean;
+		url: string;
+		title?: string;
+		shareText?: string;
+		eventName?: string;
+		ogImageUrl?: string;
+		canSetEventComments?: boolean;
+		eventDid?: string;
+		eventRkey?: string;
+		eventDescription?: string;
+		adapter: EditorAdapter;
+		viewer: EditorViewer;
+		onPosted?: (ref: { uri: string; cid: string; showComments: boolean }) => void;
+	} = $props();
+
+	let copiedUrl = $state(false);
+	let copiedText = $state(false);
+	let showPostModal = $state(false);
+
+	let textBeforeUrl = $derived(shareText ? shareText.replace(url, '').trim() : undefined);
+
+	async function copyUrl() {
+		try {
+			await navigator.clipboard.writeText(url);
+			copiedUrl = true;
+			setTimeout(() => (copiedUrl = false), 2000);
+		} catch {}
+	}
+
+	async function copyText() {
+		if (!shareText) return;
+		try {
+			await navigator.clipboard.writeText(shareText);
+			copiedText = true;
+			setTimeout(() => (copiedText = false), 2000);
+		} catch {}
+	}
+
+	let blueskyButton: HTMLElement | null = $state(null);
+
+	let canPostDirectly = $derived(
+		!!eventDid && !!eventRkey && !!eventName && viewer.isLoggedIn
+	);
+
+	let blueskyIntentUrl = $derived(
+		`https://bsky.app/intent/compose?text=${encodeURIComponent(shareText || url)}`
+	);
+
+	function handleBlueskyClick() {
+		showPostModal = true;
+	}
+
+	function handlePostedFromInner(ref: { uri: string; cid: string; showComments: boolean }) {
+		onPosted?.(ref);
+		open = false;
+	}
+</script>
+
+<Modal
+	bind:open
+	onOpenAutoFocus={(e) => {
+		e.preventDefault();
+		blueskyButton?.focus();
+	}}
+>
+	<div>
+		<h2 class="text-base-900 dark:text-base-50 mb-2 text-xl font-bold">{title}</h2>
+		<p class="text-base-500 dark:text-base-400 mb-4 text-sm">Share it with others!</p>
+
+		<div
+			class="bg-base-200 dark:bg-base-950/30 border-base-400/40 dark:border-base-700 mb-6 overflow-hidden rounded-xl border px-4 py-3 text-left"
+		>
+			{#if viewer.isLoggedIn}
+				<div class="flex items-center gap-2 pb-4">
+					<Avatar src={viewer.avatar} alt="" class="size-6" />
+					<span class="text-base-700 dark:text-base-200 text-sm font-medium"
+						>{viewer.handle ?? viewer.did}</span
+					>
+				</div>
+			{/if}
+			{#if textBeforeUrl}
+				<p class="text-base-700 dark:text-base-200 text-md font-semibold">{textBeforeUrl}</p>
+			{/if}
+			{#if eventName}
+				<LinkCard
+					href={url}
+					meta={{
+						title: eventName,
+						image: ogImageUrl
+					}}
+					class="mb-1"
+				/>
+			{/if}
+		</div>
+
+		<div class="flex flex-col gap-2 sm:flex-row">
+			<Button class="flex-1" variant="secondary" onclick={copyUrl}>
+				{copiedUrl ? 'Copied!' : 'Copy link'}
+			</Button>
+			{#if shareText}
+				<Button class="flex-1" variant="secondary" onclick={copyText}>
+					{copiedText ? 'Copied!' : 'Copy text'}
+				</Button>
+			{/if}
+			{#if canPostDirectly}
+				<Button bind:ref={blueskyButton} class="flex-1" onclick={handleBlueskyClick}>
+					Share to Bluesky
+				</Button>
+			{:else}
+				<Button
+					bind:ref={blueskyButton}
+					class="flex-1"
+					href={blueskyIntentUrl}
+					target="_blank"
+					rel="noopener"
+				>
+					Share to Bluesky
+				</Button>
+			{/if}
+		</div>
+	</div>
+</Modal>
+
+{#if canPostDirectly && eventDid && eventRkey && eventName}
+	<PostToBlueskyModal
+		bind:open={showPostModal}
+		{canSetEventComments}
+		{eventDid}
+		{eventRkey}
+		{eventName}
+		eventUrl={url}
+		{eventDescription}
+		{ogImageUrl}
+		initialText={textBeforeUrl ?? eventName}
+		{adapter}
+		{viewer}
+		onPosted={handlePostedFromInner}
+	/>
+{/if}

package/dist/ShareModal.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { EditorAdapter, EditorViewer } from './editor/adapter.js';
+type $$ComponentProps = {
+    open: boolean;
+    url: string;
+    title?: string;
+    shareText?: string;
+    eventName?: string;
+    ogImageUrl?: string;
+    canSetEventComments?: boolean;
+    eventDid?: string;
+    eventRkey?: string;
+    eventDescription?: string;
+    adapter: EditorAdapter;
+    viewer: EditorViewer;
+    onPosted?: (ref: {
+        uri: string;
+        cid: string;
+        showComments: boolean;
+    }) => void;
+};
+declare const ShareModal: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ShareModal = ReturnType<typeof ShareModal>;
+export default ShareModal;

package/dist/ThemeApply.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { BROWSER as browser } from 'esm-env';
+
+	let {
+		accentColor = 'cyan',
+		baseColor = 'mist'
+	}: {
+		accentColor?: string;
+		baseColor?: string;
+	} = $props();
+
+	const allAccentColors = [
+		'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald',
+		'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple',
+		'fuchsia', 'pink', 'rose'
+	];
+	const allBaseColors = [
+		'gray', 'stone', 'zinc', 'neutral', 'slate', 'mist', 'sand',
+		'olive', 'mauve', 'sage'
+	];
+
+	const allColors = [...allAccentColors, ...allBaseColors];
+
+	const safeJson = (v: string) => JSON.stringify(v).replace(/</g, '\\u003c');
+
+	// SSR: inline script that removes all color classes then adds the correct ones before paint
+	const allColorsJson = JSON.stringify(allColors);
+
+	let script = $derived(
+		`<script>(function(){var e=document.documentElement,r=${allColorsJson};r.forEach(function(c){e.classList.remove(c)});e.classList.add(${safeJson(accentColor)},${safeJson(baseColor)});})()<` +
+			'/script>'
+	);
+
+	// Client: reactive effect for client-side navigations
+	$effect(() => {
+		if (!browser) return;
+		const el = document.documentElement;
+		el.classList.remove(...allColors);
+		el.classList.add(accentColor, baseColor);
+
+		return () => {
+			el.classList.remove(...allColors);
+			el.classList.add('cyan', 'mist');
+		};
+	});
+</script>
+
+<svelte:head>
+	{@html script}
+</svelte:head>

package/dist/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/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/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;