@atmo-dev/kit 0.3.0 → 0.5.0

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

@@ -0,0 +1,23 @@
+import type { EventViewData } from './view-data.js';
+import { type AttendeeCounts } from './EventAttendees.svelte';
+import { type Snippet } from 'svelte';
+import type { EditorAdapter, EditorViewer } from './editor/adapter.js';
+type $$ComponentProps = {
+    data: EventViewData;
+    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;
+    /** App-owned actions such as private reporting; omitted in embeds. */
+    extraActions?: Snippet;
+    /** App-owned actions below the attendee lists, with current RSVP counts. */
+    attendeeActions?: Snippet<[AttendeeCounts]>;
+};
+declare const EventView: import("svelte").Component<$$ComponentProps, {}, "">;
+type EventView = ReturnType<typeof EventView>;
+export default EventView;

package/dist/events/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="text-primary pointer-events-none absolute inset-0 z-[1000] flex items-center justify-center bg-base-100/80 text-4xl font-bold backdrop-blur-md dark:bg-base-900/80 dark:text-base-100"
+		>
+			Drop file to add it to your message
+		</div>
+	</Portal>
+{/if}

package/dist/events/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/events/Map.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+	import { setWorkerUrl } from 'maplibre-gl';
+	import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?url';
+
+	// Vite moves MapLibre's main module when optimizing dependencies, so its
+	// default relative worker URL breaks. Emit the worker as an explicit asset.
+	setWorkerUrl(workerUrl);
+</script>
+
+<script lang="ts">
+	import { MapLibre, Projection, Marker, AttributionControl } from 'svelte-maplibre-gl';
+	import type { Map as MapLibreMap } from 'maplibre-gl';
+
+	let { lat, lng, zoom = 11 }: { lat: number; lng: number; zoom?: number } = $props();
+
+	let map: MapLibreMap | 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="size-10 rounded-full bg-radial from-accent-400 via-transparent p-3">
+				<div class="size-4 rounded-full bg-accent-500 ring-2 ring-white"></div>
+			</div>
+		{/snippet}
+	</Marker>
+</MapLibre>

package/dist/events/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/events/PostToBlueskyModal.svelte

@@ -0,0 +1,246 @@
+<script lang="ts">
+	import {
+		Modal,
+		Button,
+		Checkbox,
+		Label,
+		PostComposer,
+		editorJsonToBlueskyPost,
+		createActorSearch,
+		LinkCard,
+		textToDoc,
+		graphemeLength,
+		type Editor
+	} from '../index.js';
+	import { tokenize } from '@atcute/bluesky-richtext-parser';
+	import { tokensToFacets } from './editor/save.js';
+	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();
+
+	const searchActors = createActorSearch();
+	let text = $state('');
+	let editor = $state<Editor | null>(null);
+	let prefilledForOpen = $state(false);
+	let showComments = $state(true);
+	let posting = $state(false);
+	let errorMessage = $state<string | null>(null);
+
+	// Seed once per opening, after the lazy editor has mounted.
+	$effect(() => {
+		if (!open) {
+			prefilledForOpen = false;
+			showComments = true;
+			errorMessage = null;
+			return;
+		}
+		if (!editor || prefilledForOpen) return;
+		text = initialText;
+		editor.commands.setContent(textToDoc(initialText));
+		prefilledForOpen = true;
+	});
+
+	// 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 || !viewer.isLoggedIn || viewer.canPostToBluesky !== true || posting) return;
+
+		const liveJson = editor?.getJSON() ?? textToDoc(text);
+
+		posting = true;
+		errorMessage = null;
+		try {
+			const { text, facets } = editorJsonToBlueskyPost(liveJson);
+			if (graphemeLength(text) > 300 || new TextEncoder().encode(text).length > 3000) {
+				errorMessage = 'Posts must be 300 characters or fewer.';
+				return;
+			}
+			// Also recognize handles typed or pasted without selecting a suggestion.
+			const detected = await tokensToFacets(tokenize(text), (handle) =>
+				adapter.resolveHandle(handle)
+			);
+			for (const facet of detected) {
+				const index = facet.index;
+				if (
+					!facets.some(
+						(existing) =>
+							index.byteStart < existing.index.byteEnd && index.byteEnd > existing.index.byteStart
+					)
+				)
+					facets.push(facet);
+			}
+			facets.sort((a, b) => a.index.byteStart - b.index.byteStart);
+
+			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;
+
+			// The grant may have changed while resolving facets or uploading a thumb.
+			if (viewer.canPostToBluesky !== true) return;
+			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 title="Share to Bluesky" dismissible={!posting}>
+	<div class="space-y-4">
+		<div
+			class="space-y-3 rounded-xl border border-base-200 bg-base-50 p-3 dark:border-base-800 dark:bg-base-950/30"
+		>
+			<PostComposer
+				bind:editor
+				bind:value={text}
+				{searchActors}
+				disabled={posting}
+				maxLength={300}
+			/>
+			<LinkCard
+				href={eventUrl}
+				meta={{
+					title: eventName,
+					description: eventDescription,
+					image: ogImageUrl
+				}}
+			/>
+		</div>
+
+		{#if canSetEventComments}
+			<Label class="flex items-center gap-2">
+				<Checkbox bind:checked={showComments} disabled={posting} />
+				<span class="text-sm text-base-700 dark:text-base-300"> Show comments on event page </span>
+			</Label>
+		{/if}
+
+		{#if errorMessage}
+			<p role="alert" class="text-sm text-red-600 dark:text-red-400">{errorMessage}</p>
+		{/if}
+
+		<Button
+			class="w-full"
+			onclick={handlePost}
+			disabled={posting ||
+				!viewer.isLoggedIn ||
+				!viewer.did ||
+				viewer.canPostToBluesky !== true ||
+				!text.trim() ||
+				graphemeLength(text) > 300}
+		>
+			{posting ? 'Posting…' : 'Post'}
+		</Button>
+	</div>
+</Modal>

package/dist/events/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/events/ShareModal.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { Modal, Button, Avatar, LinkCard } from '../index.js';
+	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 {
+			// Clipboard access may be denied; keep the selectable link available.
+		}
+	}
+
+	async function copyText() {
+		if (!shareText) return;
+		try {
+			await navigator.clipboard.writeText(shareText);
+			copiedText = true;
+			setTimeout(() => (copiedText = false), 2000);
+		} catch {
+			// Clipboard access may be denied; sharing remains available.
+		}
+	}
+
+	let blueskyButton = $state<HTMLButtonElement | HTMLAnchorElement | null>(null);
+
+	let canPostDirectly = $derived(
+		!!eventDid &&
+			!!eventRkey &&
+			!!eventName &&
+			viewer.isLoggedIn &&
+			viewer.canPostToBluesky === true
+	);
+
+	$effect(() => {
+		if (!canPostDirectly) showPostModal = false;
+	});
+
+	let blueskyIntentUrl = $derived(
+		`https://bsky.app/intent/compose?text=${encodeURIComponent(shareText || url)}`
+	);
+
+	function handleBlueskyClick() {
+		if (canPostDirectly) showPostModal = true;
+	}
+
+	function handlePostedFromInner(ref: { uri: string; cid: string; showComments: boolean }) {
+		onPosted?.(ref);
+		open = false;
+	}
+</script>
+
+<Modal
+	bind:open
+	{title}
+	description="Share it with others."
+	onOpenAutoFocus={(e) => {
+		e.preventDefault();
+		blueskyButton?.focus();
+	}}
+>
+	<div>
+		<div
+			class="mb-6 overflow-hidden rounded-xl border border-base-400/40 bg-base-200 px-4 py-3 text-left dark:border-base-700 dark:bg-base-950/30"
+		>
+			{#if viewer.isLoggedIn}
+				<div class="flex items-center gap-2 pb-4">
+					<Avatar
+						src={viewer.avatar}
+						name={viewer.displayName || viewer.handle || viewer.did || 'Account'}
+						class="size-6"
+					/>
+					<span class="text-sm font-medium text-base-700 dark:text-base-200"
+						>{viewer.handle ?? viewer.did}</span
+					>
+				</div>
+			{/if}
+			{#if textBeforeUrl}
+				<p class="text-md mb-3 font-semibold text-base-700 dark:text-base-200">{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/events/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/events/StarterPackButton.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { Button } from '../index.js';
+	import { socialClientInfo, type PreferredSocialClient } from '../social.js';
+	import { starterPackClientUrl } from './starter-pack-url.js';
+
+	let {
+		eventUri,
+		openPack,
+		socialClient
+	}: {
+		eventUri: string;
+		socialClient?: PreferredSocialClient | null;
+		/** The host owns account access and creation; this component never writes records. */
+		openPack: (eventUri: string) => Promise<string>;
+	} = $props();
+	let pending = $state(false);
+	let message: string | null = $state(null);
+	let canonicalPackUrl: string | null = $state(null);
+	let packUrl = $derived(
+		canonicalPackUrl ? starterPackClientUrl(canonicalPackUrl, socialClient) : null
+	);
+	let clientLabel = $derived(socialClientInfo(socialClient).label);
+
+	async function open() {
+		if (pending) return;
+		// Open synchronously with the click so async creation doesn't hit popup blockers.
+		const tab = window.open('about:blank', '_blank');
+		if (tab) tab.opener = null;
+		pending = true;
+		message = null;
+		try {
+			const canonicalUrl = await openPack(eventUri);
+			const url = starterPackClientUrl(canonicalUrl, socialClient);
+			if (!url) throw new Error('Invalid starter pack URL');
+			canonicalPackUrl = canonicalUrl;
+			if (tab) {
+				if (!tab.closed) tab.location.replace(url);
+			} else window.location.assign(url);
+		} catch {
+			tab?.close();
+			message = 'Couldn’t open the starter pack. Please try again.';
+		} finally {
+			pending = false;
+		}
+	}
+</script>
+
+<div class="mt-4">
+	<p class="mb-1 text-xs text-muted">Follow attendees on {clientLabel}.</p>
+	{#if packUrl}
+		<a
+			href={packUrl}
+			target="_blank"
+			rel="noopener noreferrer"
+			class="rounded text-sm text-action underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-focus"
+			>Starter pack ↗</a
+		>
+	{:else}
+		<Button
+			variant="link"
+			size="sm"
+			class="min-h-0 p-0 text-sm font-normal"
+			onclick={open}
+			disabled={pending}
+		>
+			{pending ? 'Opening…' : 'Starter pack ↗'}
+		</Button>
+	{/if}
+	{#if message}
+		<p role="alert" class="mt-2 text-sm text-muted">{message}</p>
+	{/if}
+</div>

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

@@ -0,0 +1,10 @@
+import { type PreferredSocialClient } from '../social.js';
+type $$ComponentProps = {
+    eventUri: string;
+    socialClient?: PreferredSocialClient | null;
+    /** The host owns account access and creation; this component never writes records. */
+    openPack: (eventUri: string) => Promise<string>;
+};
+declare const StarterPackButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type StarterPackButton = ReturnType<typeof StarterPackButton>;
+export default StarterPackButton;