@atmo-dev/events-ui 0.1.0

package/dist/event-types.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Structural shape of a `community.lexicon.calendar.event` record, plus the
+ * extensions atmo adds (timezone, media, facets, theme, bskyPostRef).
+ *
+ * Defined permissively so consumers using project-local generated lexicon
+ * types can still pass their records into our components without type
+ * gymnastics. Components inspect specific fields and `$type` strings as
+ * needed; rich variant unions live in the consumer's lexicon types if they
+ * want them.
+ */
+export type EventLocationVariant = {
+    $type: string;
+    [key: string]: unknown;
+};
+export type EventStatus = string;
+export type EventMode = string;
+export interface EventLexiconMain {
+    $type?: 'community.lexicon.calendar.event';
+    createdAt: string;
+    name: string;
+    description?: string;
+    startsAt?: string;
+    endsAt?: string;
+    locations?: EventLocationVariant[];
+    mode?: EventMode;
+    status?: EventStatus;
+}
+export type EventData = EventLexiconMain & {
+    startsAt: string;
+    timezone?: string;
+    /** Atmo stores URIs as objects with optional names rather than bare strings. */
+    uris?: Array<{
+        uri: string;
+        name?: string;
+    }>;
+    media?: Array<{
+        role: string;
+        alt?: string;
+        content: {
+            $type: 'blob';
+            ref: {
+                $link: string;
+            };
+        };
+        [key: string]: unknown;
+    }>;
+    facets?: Array<{
+        index: {
+            byteStart: number;
+            byteEnd: number;
+        };
+        features: Array<{
+            $type: string;
+            did?: string;
+            uri?: string;
+            tag?: string;
+        }>;
+    }>;
+    additionalData?: Record<string, unknown>;
+    theme?: {
+        name: string;
+        accentColor: string;
+        baseColor: string;
+    };
+    bskyPostRef?: {
+        uri: string;
+        cid: string;
+        showComments: boolean;
+    };
+};

package/dist/event-types.js

@@ -0,0 +1,11 @@
+/**
+ * Structural shape of a `community.lexicon.calendar.event` record, plus the
+ * extensions atmo adds (timezone, media, facets, theme, bskyPostRef).
+ *
+ * Defined permissively so consumers using project-local generated lexicon
+ * types can still pass their records into our components without type
+ * gymnastics. Components inspect specific fields and `$type` strings as
+ * needed; rich variant unions live in the consumer's lexicon types if they
+ * want them.
+ */
+export {};

package/dist/event-view/AddToCalendarButton.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { generateICalEvent } from '../cal/ical.js';
+	import type { FlatEventRecord } from '../contrail.js';
+
+	let {
+		eventData,
+		eventUri,
+		pageHref
+	}: { eventData: FlatEventRecord; eventUri: string; pageHref: string } = $props();
+
+	function downloadIcs() {
+		const ical = generateICalEvent(eventData, eventUri, pageHref);
+		const blob = new Blob([ical], { type: 'text/calendar;charset=utf-8' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = `${eventData.name.replace(/[^a-zA-Z0-9]/g, '-')}.ics`;
+		a.click();
+		URL.revokeObjectURL(url);
+	}
+</script>
+
+<button
+	onclick={downloadIcs}
+	class="text-base-700 dark:text-base-300 hover:text-base-900 dark:hover:text-base-100 flex cursor-pointer items-center gap-2 text-sm font-medium transition-colors"
+>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		fill="none"
+		viewBox="0 0 24 24"
+		stroke-width="1.5"
+		stroke="currentColor"
+		class="size-4"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+		/>
+	</svg>
+	Add to Calendar
+</button>

package/dist/event-view/AddToCalendarButton.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { FlatEventRecord } from '../contrail.js';
+type $$ComponentProps = {
+    eventData: FlatEventRecord;
+    eventUri: string;
+    pageHref: string;
+};
+declare const AddToCalendarButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type AddToCalendarButton = ReturnType<typeof AddToCalendarButton>;
+export default AddToCalendarButton;

package/dist/event-view/EventBadges.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Badge } from '@foxui/core';
+	import { getModeColor, getModeLabel } from './format';
+
+	let { mode, isOngoing }: { mode?: string; isOngoing: boolean } = $props();
+</script>
+
+{#if mode || isOngoing}
+	<div class="mb-8 flex items-center gap-2">
+		{#if isOngoing}
+			<Badge size="md" variant="primary">
+				<span class="bg-accent-500 mr-1 inline-block size-1.5 animate-pulse rounded-full"></span>
+				Live
+			</Badge>
+		{/if}
+		{#if mode}
+			<Badge size="md" variant="primary" class={getModeColor(mode)}>{getModeLabel(mode)}</Badge>
+		{/if}
+	</div>
+{/if}

package/dist/event-view/EventBadges.svelte.d.ts

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

package/dist/event-view/EventDateBlock.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Badge } from '@foxui/core';
+	import { formatDay, formatFullDate, formatMonth, formatTime, formatWeekday } from './format';
+
+	let { startDate, endDate }: { startDate: Date; endDate: Date | null } = $props();
+
+	let isSameDay = $derived(
+		endDate &&
+			startDate.getFullYear() === endDate.getFullYear() &&
+			startDate.getMonth() === endDate.getMonth() &&
+			startDate.getDate() === endDate.getDate()
+	);
+</script>
+
+<div class="mb-4 flex items-center gap-4">
+	<div
+		class="border-base-200 dark:border-base-700 bg-base-100 dark:bg-base-950/30 flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-xl border"
+	>
+		<span class="text-base-500 dark:text-base-400 text-[9px] leading-none font-semibold">
+			{formatMonth(startDate)}
+		</span>
+		<span class="text-base-900 dark:text-base-50 text-lg leading-tight font-bold">
+			{formatDay(startDate)}
+		</span>
+	</div>
+	<div>
+		<p class="text-base-900 dark:text-base-50 font-semibold">
+			{formatWeekday(startDate)}, {formatFullDate(startDate)}
+			{#if endDate && !isSameDay}
+				- {formatWeekday(endDate)}, {formatFullDate(endDate)}
+			{/if}
+		</p>
+		<p class="text-base-500 dark:text-base-400 flex flex-wrap items-center gap-2 text-sm">
+			<span>
+				{formatTime(startDate)}
+				{#if endDate && isSameDay}
+					- {formatTime(endDate)}
+				{/if}
+			</span>
+			<Badge size="sm" variant="secondary">local time</Badge>
+		</p>
+	</div>
+</div>

package/dist/event-view/EventDateBlock.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    startDate: Date;
+    endDate: Date | null;
+};
+declare const EventDateBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type EventDateBlock = ReturnType<typeof EventDateBlock>;
+export default EventDateBlock;

package/dist/event-view/EventHostedBy.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { Avatar as FoxAvatar } from '@foxui/core';
+	import type { HostProfile } from '../contrail.js';
+
+	type Speaker = { id?: string; handle?: string; name: string; avatar?: string };
+
+	let {
+		hostProfile,
+		hostUrl,
+		did,
+		speakers = []
+	}: {
+		hostProfile: HostProfile | null | undefined;
+		hostUrl: string;
+		did: string;
+		speakers?: Speaker[];
+	} = $props();
+</script>
+
+<div>
+	<p class="text-base-500 dark:text-base-400 mb-3 text-xs font-semibold tracking-wider uppercase">
+		Hosted By
+	</p>
+	<a
+		href={hostUrl}
+		class="text-base-900 dark:text-base-100 flex items-center gap-2.5 font-medium transition-opacity hover:opacity-80"
+	>
+		<FoxAvatar
+			src={hostProfile?.avatar}
+			alt={hostProfile?.displayName || hostProfile?.handle || did}
+			class="size-8 shrink-0"
+		/>
+		<span class="truncate text-sm">
+			{hostProfile?.displayName || hostProfile?.handle || did}
+		</span>
+	</a>
+</div>
+
+{#if speakers.length > 0}
+	<div>
+		<p class="text-base-500 dark:text-base-400 mb-3 text-xs font-semibold tracking-wider uppercase">
+			Speakers
+		</p>
+		<div class="space-y-2">
+			{#each speakers as speaker, i (speaker.id || i)}
+				{#if speaker.handle}
+					<a
+						href="/p/{speaker.handle}"
+						class="text-base-900 dark:text-base-100 flex items-center gap-2.5 font-medium transition-opacity hover:opacity-80"
+					>
+						<FoxAvatar src={speaker.avatar} alt={speaker.name} class="size-8 shrink-0" />
+						<span class="truncate text-sm">{speaker.name}</span>
+					</a>
+				{:else}
+					<div class="text-base-900 dark:text-base-100 flex items-center gap-2.5 font-medium">
+						<FoxAvatar alt={speaker.name} class="size-8 shrink-0" />
+						<span class="truncate text-sm">{speaker.name}</span>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	</div>
+{/if}

package/dist/event-view/EventHostedBy.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { HostProfile } from '../contrail.js';
+type Speaker = {
+    id?: string;
+    handle?: string;
+    name: string;
+    avatar?: string;
+};
+type $$ComponentProps = {
+    hostProfile: HostProfile | null | undefined;
+    hostUrl: string;
+    did: string;
+    speakers?: Speaker[];
+};
+declare const EventHostedBy: import("svelte").Component<$$ComponentProps, {}, "">;
+type EventHostedBy = ReturnType<typeof EventHostedBy>;
+export default EventHostedBy;

package/dist/event-view/EventLinksList.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	let { uris = [] }: { uris?: Array<{ uri: string; name?: string }> } = $props();
+</script>
+
+{#if uris.length > 0}
+	<div>
+		<p class="text-base-500 dark:text-base-400 mb-4 text-xs font-semibold tracking-wider uppercase">
+			Links
+		</p>
+		<div class="space-y-3">
+			{#each uris as link (link.name + link.uri)}
+				<a
+					href={link.uri}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-base-700 dark:text-base-300 hover:text-base-900 dark:hover:text-base-100 flex items-center gap-1.5 text-sm transition-colors"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="size-3.5 shrink-0"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+						/>
+					</svg>
+					<span class="truncate">{link.name || link.uri.replace(/^https?:\/\//, '')}</span>
+				</a>
+			{/each}
+		</div>
+	</div>
+{/if}

package/dist/event-view/EventLinksList.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    uris?: Array<{
+        uri: string;
+        name?: string;
+    }>;
+};
+declare const EventLinksList: import("svelte").Component<$$ComponentProps, {}, "">;
+type EventLinksList = ReturnType<typeof EventLinksList>;
+export default EventLinksList;

package/dist/event-view/EventLocationBlock.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { LocationData } from './format';
+
+	let { locationData }: { locationData: LocationData | null } = $props();
+</script>
+
+{#if locationData}
+	<a
+		href={locationData.googleMapsUrl}
+		target="_blank"
+		rel="noopener noreferrer"
+		class="mb-6 flex items-center gap-4 transition-opacity hover:opacity-80"
+	>
+		<div
+			class="border-base-200 dark:border-base-700 bg-base-100 dark:bg-base-950/30 flex size-12 shrink-0 items-center justify-center rounded-xl border"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="text-base-900 dark:text-base-200 size-5"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+				/>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
+				/>
+			</svg>
+		</div>
+		<div>
+			{#if locationData.name}
+				<p class="text-base-900 dark:text-base-50 font-semibold">{locationData.name}</p>
+				<p class="text-base-500 dark:text-base-400 text-sm">{locationData.shortAddress}</p>
+			{:else}
+				<p class="text-base-900 dark:text-base-50 font-semibold">
+					{locationData.shortAddress}
+				</p>
+			{/if}
+		</div>
+	</a>
+{/if}

package/dist/event-view/EventLocationBlock.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { LocationData } from './format';
+type $$ComponentProps = {
+    locationData: LocationData | null;
+};
+declare const EventLocationBlock: import("svelte").Component<$$ComponentProps, {}, "">;
+type EventLocationBlock = ReturnType<typeof EventLocationBlock>;
+export default EventLocationBlock;

package/dist/event-view/EventLocationMap.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { Badge } from '@foxui/core';
+	import Map from '../Map.svelte';
+	import type { LocationData, GeoLocation } from './format';
+
+	let {
+		locationData,
+		geoLocation
+	}: {
+		locationData: LocationData | null;
+		geoLocation: GeoLocation | null;
+	} = $props();
+
+	let copied = $state(false);
+
+	async function copyCoords() {
+		if (!geoLocation) return;
+		const text = `${geoLocation.lat.toFixed(5)}, ${geoLocation.lng.toFixed(5)}`;
+		try {
+			await navigator.clipboard.writeText(text);
+			copied = true;
+			setTimeout(() => (copied = false), 2000);
+		} catch {}
+	}
+</script>
+
+{#if geoLocation && locationData}
+	<div class="mt-8 mb-8">
+		<div class="mb-3 flex items-baseline gap-2">
+			<p class="text-base-500 dark:text-base-400 text-xs font-semibold tracking-wider uppercase">
+				Location:
+			</p>
+			<button
+				type="button"
+				onclick={copyCoords}
+				class="ml-auto cursor-pointer transition-opacity active:opacity-60"
+				title="Copy coordinates"
+				aria-label="Copy coordinates"
+			>
+				<Badge size="sm" variant="secondary" class="font-mono">
+					{copied
+						? 'Copied!'
+						: `${geoLocation.lat.toFixed(5)}, ${geoLocation.lng.toFixed(5)}`}
+				</Badge>
+			</button>
+		</div>
+		<div class="h-64 w-full overflow-hidden rounded-xl">
+			<Map lat={geoLocation.lat} lng={geoLocation.lng} />
+		</div>
+		<p class="text-base-700 dark:text-base-200 mt-3 text-sm">{locationData.fullString}</p>
+		<p class="text-base-500 dark:text-base-400 mt-1 text-xs">
+			Open in
+			<a
+				href={geoLocation.googleMapsUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-base-700 dark:text-base-300 hover:underline"
+			>
+				Google Maps
+			</a>
+			|
+			<a
+				href={geoLocation.osmUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-base-700 dark:text-base-300 hover:underline"
+			>
+				OpenStreetMap
+			</a>
+		</p>
+	</div>
+{/if}

package/dist/event-view/EventLocationMap.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { LocationData, GeoLocation } from './format';
+type $$ComponentProps = {
+    locationData: LocationData | null;
+    geoLocation: GeoLocation | null;
+};
+declare const EventLocationMap: import("svelte").Component<$$ComponentProps, {}, "">;
+type EventLocationMap = ReturnType<typeof EventLocationMap>;
+export default EventLocationMap;

package/dist/event-view/ExternalRsvpNotice.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Button } from '@foxui/core';
+
+	// Shown in place of the RSVP controls for imported events whose host opted out
+	// of atmo RSVPs (additionalData.externalSource.rsvpMode === 'external_only').
+	// Directs attendees to the original event page instead.
+	let { url }: { url: string } = $props();
+
+	let host = $derived.by(() => {
+		try {
+			return new URL(url).hostname.replace(/^www\./, '');
+		} catch {
+			return null;
+		}
+	});
+</script>
+
+<div
+	class="border-base-200 dark:border-base-800 bg-base-100 dark:bg-base-950/50 mt-8 mb-2 flex flex-col gap-3 rounded-2xl border p-4 sm:flex-row sm:items-center sm:justify-between"
+>
+	<div class="min-w-0">
+		<p class="text-base-900 dark:text-base-50 text-sm font-semibold">RSVP on the original page</p>
+		<p class="text-base-600 dark:text-base-400 mt-0.5 text-xs">
+			{host
+				? `This event is hosted on ${host}. Head there to RSVP.`
+				: 'This event is hosted elsewhere. Open the original page to RSVP.'}
+		</p>
+	</div>
+	<Button href={url} target="_blank" rel="noopener noreferrer" class="shrink-0">
+		{host ? `RSVP on ${host}` : 'Open original event'}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 20 20"
+			fill="currentColor"
+			aria-hidden="true"
+		>
+			<path
+				fill-rule="evenodd"
+				d="M5.22 14.78a.75.75 0 0 0 1.06 0l7.22-7.22v5.69a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0 0 1.5h5.69l-7.22 7.22a.75.75 0 0 0 0 1.06Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	</Button>
+</div>

package/dist/event-view/ExternalRsvpNotice.svelte.d.ts

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