@atmo-dev/kit 0.4.0 → 0.5.0

package/dist/events/event-view/EventLocationBlock.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { Icon } from '../../index.js';
+	import { Link, MapPin } from '@sketchyicons/svelte';
+	import { getPhysicalLocationLines, type LocationData } from './locations.js';
+
+	let { locations }: { locations: LocationData[] } = $props();
+	let physicalLines = $derived(getPhysicalLocationLines(locations));
+	let links = $derived(locations.filter((location) => location.kind === 'uri'));
+</script>
+
+{#if physicalLines.length || links.length}
+	<ul class="mb-6 space-y-4" aria-label="Event locations">
+		{#if physicalLines.length}
+			<li class="flex min-w-0 items-center gap-4">
+				<div
+					class="flex size-12 shrink-0 items-center justify-center rounded-ui bg-recess text-muted [box-shadow:var(--ui-recess-shadow)]"
+				>
+					<Icon img={MapPin} size={22} />
+				</div>
+				<div class="min-w-0 [overflow-wrap:anywhere]">
+					{#each physicalLines as line, i (i)}
+						<p class={line.muted ? 'text-sm text-muted' : 'font-semibold text-ink'}>
+							<svelte:element
+								this={line.href ? 'a' : 'span'}
+								href={line.href}
+								target={line.href ? '_blank' : undefined}
+								rel={line.href ? 'noopener noreferrer' : undefined}
+								class={line.href ? 'transition-opacity hover:opacity-80' : undefined}
+								>{line.label}</svelte:element
+							>
+						</p>
+					{/each}
+				</div>
+			</li>
+		{/if}
+		{#each links as location, i (i)}
+			<li>
+				<svelte:element
+					this={location.href ? 'a' : 'div'}
+					href={location.href}
+					target={location.href ? '_blank' : undefined}
+					rel={location.href ? 'noopener noreferrer' : undefined}
+					class="flex min-w-0 items-center gap-4 rounded-ui {location.href
+						? 'transition-opacity hover:opacity-80'
+						: ''}"
+				>
+					<div
+						class="flex size-12 shrink-0 items-center justify-center rounded-ui bg-recess text-muted [box-shadow:var(--ui-recess-shadow)]"
+					>
+						<Icon img={Link} size={22} />
+					</div>
+					<div class="min-w-0 [overflow-wrap:anywhere]">
+						<p class="font-semibold text-ink">{location.label}</p>
+						{#if location.detail}
+							<p class="text-sm text-muted">{location.detail}</p>
+						{/if}
+					</div>
+				</svelte:element>
+			</li>
+		{/each}
+	</ul>
+{/if}

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

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

package/dist/events/event-view/EventLocationMap.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { Badge } from '../../index.js';
+	import Map from '../Map.svelte';
+	import type { GeoLocation } from './locations.js';
+
+	let { geoLocation }: { 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 {
+			// Clipboard access is optional; the coordinates remain visible.
+		}
+	}
+</script>
+
+{#if geoLocation}
+	<div class="mt-8 mb-8">
+		<div class="mb-3 flex items-baseline gap-2">
+			<p class="text-xs font-semibold tracking-wider text-muted 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 variant="outline" 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="mt-3 text-sm [overflow-wrap:anywhere] text-base-700 dark:text-base-200">
+			{geoLocation.label}
+		</p>
+		<p class="mt-1 text-xs text-muted">
+			Open in
+			<a
+				href={geoLocation.googleMapsUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-base-700 hover:underline dark:text-base-300"
+			>
+				Google Maps
+			</a>
+			|
+			<a
+				href={geoLocation.osmUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-base-700 hover:underline dark:text-base-300"
+			>
+				OpenStreetMap
+			</a>
+		</p>
+	</div>
+{/if}

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

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

package/dist/events/event-view/ExternalRsvpNotice.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { ArrowUpRight } from '@sketchyicons/svelte';
+	import { Button, Icon } from '../../index.js';
+
+	// 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="mt-8 mb-2 flex flex-col gap-3 rounded-2xl border border-base-200 bg-base-100 p-4 sm:flex-row sm:items-center sm:justify-between dark:border-base-800 dark:bg-base-950/50"
+>
+	<div class="min-w-0">
+		<p class="text-sm font-semibold text-base-900 dark:text-base-50">RSVP on the original page</p>
+		<p class="mt-0.5 text-xs text-base-600 dark:text-base-400">
+			{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'}
+		<Icon img={ArrowUpRight} size={16} class="shrink-0" />
+	</Button>
+</div>

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

package/dist/events/event-view/StreamPlacePlayer.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Icon } from '../../index.js';
+	import { ExternalLink } from '@sketchyicons/svelte';
+	import 'plyr/dist/plyr.css';
+	import type PlyrType from 'plyr';
+	import { sketchyPlyrIcons } from './plyr-icons.js';
+
+	let {
+		handle,
+		title
+	}: {
+		handle: string;
+		title: string;
+	} = $props();
+
+	let videoEl: HTMLVideoElement | undefined = $state();
+	let overlayEl: HTMLAnchorElement | undefined = $state();
+	let error = $state(false);
+	let controlsVisible = $state(true);
+
+	let pc: RTCPeerConnection | null = null;
+	let plyr: PlyrType | null = null;
+
+	const posterUrl = $derived(
+		`https://stream.place/api/playback/${encodeURIComponent(handle)}/stream.jpg`
+	);
+
+	onMount(() => {
+		init();
+		return () => {
+			if (pc) {
+				pc.close();
+				pc = null;
+			}
+			if (videoEl) {
+				videoEl.srcObject = null;
+			}
+			plyr?.destroy();
+		};
+	});
+
+	function waitForIceGathering(peer: RTCPeerConnection, timeoutMs = 2000): Promise<void> {
+		return new Promise((resolve) => {
+			if (peer.iceGatheringState === 'complete') {
+				resolve();
+				return;
+			}
+
+			let done = false;
+			const finish = () => {
+				if (done) return;
+				done = true;
+				peer.removeEventListener('icegatheringstatechange', onStateChange);
+				clearTimeout(timer);
+				resolve();
+			};
+
+			const onStateChange = () => {
+				if (peer.iceGatheringState === 'complete') {
+					finish();
+				}
+			};
+
+			peer.addEventListener('icegatheringstatechange', onStateChange);
+			const timer = setTimeout(finish, timeoutMs);
+		});
+	}
+
+	async function init() {
+		if (!videoEl) return;
+
+		try {
+			pc = new RTCPeerConnection({
+				iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
+				bundlePolicy: 'max-bundle'
+			});
+
+			pc.addTransceiver('video', { direction: 'recvonly' });
+			pc.addTransceiver('audio', { direction: 'recvonly' });
+
+			pc.addEventListener('track', (event) => {
+				if (!videoEl) return;
+				if (event.streams && event.streams[0]) {
+					videoEl.srcObject = event.streams[0];
+				} else {
+					let stream = videoEl.srcObject as MediaStream | null;
+					if (!stream) {
+						stream = new MediaStream();
+						videoEl.srcObject = stream;
+					}
+					stream.addTrack(event.track);
+				}
+			});
+
+			const offer = await pc.createOffer();
+			await pc.setLocalDescription(offer);
+			await waitForIceGathering(pc, 2000);
+
+			const sdp = pc.localDescription?.sdp;
+			if (!sdp) {
+				error = true;
+				pc.close();
+				pc = null;
+				return;
+			}
+
+			const response = await fetch(
+				`https://stream.place/api/playback/${encodeURIComponent(handle)}/webrtc?rendition=source`,
+				{
+					method: 'POST',
+					headers: { 'Content-Type': 'application/sdp' },
+					body: sdp
+				}
+			);
+
+			if (!response.ok) {
+				error = true;
+				pc.close();
+				pc = null;
+				return;
+			}
+
+			const answerSdp = await response.text();
+			await pc.setRemoteDescription({ type: 'answer', sdp: answerSdp });
+
+			const { default: Plyr } = await import('plyr');
+
+			plyr = new Plyr(videoEl, {
+				...sketchyPlyrIcons(),
+				controls: ['play', 'mute', 'volume', 'fullscreen'],
+				settings: [],
+				ratio: '16:9'
+			});
+
+			plyr.on('controlshidden', () => {
+				controlsVisible = false;
+			});
+			plyr.on('controlsshown', () => {
+				controlsVisible = true;
+			});
+
+			// Move the overlay link inside Plyr's container so mousemove over the
+			// button bubbles into Plyr's activity tracker — otherwise hovering it
+			// hides the controls, which hides the button, which reactivates Plyr
+			// (a flicker loop).
+			const plyrEl = videoEl.closest('.plyr');
+			if (plyrEl && overlayEl) plyrEl.appendChild(overlayEl);
+		} catch {
+			error = true;
+			if (pc) {
+				pc.close();
+				pc = null;
+			}
+		}
+	}
+</script>
+
+{#snippet watchOnStreamPlace(hidden = false)}
+	<a
+		bind:this={overlayEl}
+		href="https://stream.place/{handle}"
+		target="_blank"
+		rel="noopener noreferrer"
+		onclick={() => plyr?.pause()}
+		class="absolute top-3 right-3 z-10 inline-flex items-center gap-1.5 rounded-full bg-black/55 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm transition-opacity duration-200 hover:bg-black/75 {hidden
+			? 'pointer-events-none opacity-0'
+			: 'opacity-100'}"
+	>
+		Watch on stream.place
+		<Icon img={ExternalLink} size={12} />
+	</a>
+{/snippet}
+
+{#if error}
+	<div
+		class="relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-xl border border-base-200 bg-base-100 dark:border-base-800 dark:bg-base-900"
+	>
+		<div
+			class="absolute inset-0 bg-cover bg-center"
+			style="background-image: url({posterUrl});"
+		></div>
+		<div class="absolute inset-0 bg-black/60"></div>
+		{@render watchOnStreamPlace()}
+		<p class="relative text-sm text-base-100">Stream is offline</p>
+	</div>
+{:else}
+	<div
+		class="relative aspect-video w-full max-w-full overflow-hidden rounded-xl border border-base-300 dark:border-base-400/40"
+	>
+		{@render watchOnStreamPlace(!controlsVisible)}
+		<video
+			bind:this={videoEl}
+			class="h-full w-full"
+			aria-label={title}
+			poster={posterUrl}
+			autoplay
+			playsinline
+			muted
+			crossorigin="anonymous"
+		></video>
+	</div>
+{/if}
+
+<style>
+	* {
+		--plyr-color-main: var(--color-accent-500);
+	}
+</style>

package/dist/events/event-view/StreamPlacePlayer.svelte.d.ts

@@ -0,0 +1,8 @@
+import 'plyr/dist/plyr.css';
+type $$ComponentProps = {
+    handle: string;
+    title: string;
+};
+declare const StreamPlacePlayer: import("svelte").Component<$$ComponentProps, {}, "">;
+type StreamPlacePlayer = ReturnType<typeof StreamPlacePlayer>;
+export default StreamPlacePlayer;

package/dist/events/event-view/format.d.ts

@@ -0,0 +1,10 @@
+import { type PreferredSocialClient } from '../../social.js';
+export declare function formatMonth(date: Date): string;
+export declare function formatDay(date: Date): number;
+export declare function formatWeekday(date: Date): string;
+export declare function formatFullDate(date: Date): string;
+export declare function formatTime(date: Date): string;
+export declare function getModeLabel(mode: string): string;
+/** Optional local accent class for an event mode. */
+export declare function getModeColor(mode: string): string;
+export declare function buildDescriptionHtml(description: string | undefined, facets: unknown, socialClient?: PreferredSocialClient | null): string | null;

package/dist/events/event-view/format.js

@@ -0,0 +1,112 @@
+import { marked } from 'marked';
+import { tokenize } from '@atcute/bluesky-richtext-parser';
+import { sanitize } from '../cal/sanitize.js';
+import { getLocalProfileUrl } from '../profile-url.js';
+import { socialHashtagUrl } from '../../social.js';
+export function formatMonth(date) {
+    return date.toLocaleDateString('en-US', { month: 'short' }).toUpperCase();
+}
+export function formatDay(date) {
+    return date.getDate();
+}
+export function formatWeekday(date) {
+    return date.toLocaleDateString('en-US', { weekday: 'long' });
+}
+export function formatFullDate(date) {
+    const options = { month: 'long', day: 'numeric' };
+    if (date.getFullYear() !== new Date().getFullYear()) {
+        options.year = 'numeric';
+    }
+    return date.toLocaleDateString('en-US', options);
+}
+export function formatTime(date) {
+    return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+}
+export function getModeLabel(mode) {
+    if (mode.includes('virtual'))
+        return 'Virtual';
+    if (mode.includes('hybrid'))
+        return 'Hybrid';
+    if (mode.includes('inperson'))
+        return 'In-Person';
+    return 'Event';
+}
+/** Optional local accent class for an event mode. */
+export function getModeColor(mode) {
+    if (mode.includes('virtual'))
+        return 'cyan';
+    if (mode.includes('hybrid'))
+        return 'purple';
+    if (mode.includes('inperson'))
+        return 'amber';
+    return '';
+}
+const renderer = new marked.Renderer();
+renderer.link = ({ href, text }) => {
+    const attributes = href.startsWith('/')
+        ? ''
+        : ' target="_blank" rel="noopener noreferrer nofollow"';
+    const safeHref = href.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+    return `<a${attributes} href="${safeHref}" class="text-accent-600 dark:text-accent-400 hover:underline">${text}</a>`;
+};
+function renderDescription(text, facets, socialClient) {
+    let result = text;
+    // Imported descriptions may have no facets. Keep existing Markdown links and
+    // code intact; only turn detected standalone mentions and hashtags into links.
+    if (!facets?.length) {
+        result = tokenize(text)
+            .map((token) => {
+            if (token.type === 'mention')
+                return `[${token.raw}](${getLocalProfileUrl(token.handle)})`;
+            if (token.type === 'topic')
+                return `[${token.raw}](<${socialHashtagUrl(token.name, socialClient)}>)`;
+            return token.raw;
+        })
+            .join('');
+    }
+    if (facets && facets.length > 0) {
+        const encoded = new TextEncoder().encode(text);
+        const decoder = new TextDecoder();
+        const sorted = [...facets].sort((a, b) => a.index.byteStart - b.index.byteStart);
+        const parts = [];
+        let cursor = 0;
+        for (const facet of sorted) {
+            const feature = facet.features?.[0];
+            if (!feature)
+                continue;
+            if (facet.index.byteStart < cursor)
+                continue;
+            const segmentText = decoder.decode(encoded.slice(facet.index.byteStart, facet.index.byteEnd));
+            let mdLink = null;
+            switch (feature.$type) {
+                case 'app.bsky.richtext.facet#mention': {
+                    const handle = segmentText.startsWith('@') ? segmentText.slice(1) : segmentText;
+                    mdLink = `[${segmentText}](${getLocalProfileUrl(feature.did || handle)})`;
+                    break;
+                }
+                case 'app.bsky.richtext.facet#link':
+                    mdLink = `[${segmentText}](${feature.uri})`;
+                    break;
+                case 'app.bsky.richtext.facet#tag':
+                    if (feature.tag)
+                        mdLink = `[${segmentText}](<${socialHashtagUrl(feature.tag, socialClient)}>)`;
+                    break;
+            }
+            if (mdLink) {
+                parts.push(decoder.decode(encoded.slice(cursor, facet.index.byteStart)));
+                parts.push(mdLink);
+                cursor = facet.index.byteEnd;
+            }
+        }
+        parts.push(decoder.decode(encoded.slice(cursor)));
+        result = parts.join('');
+    }
+    return marked.parse(result, { renderer });
+}
+export function buildDescriptionHtml(description, facets, socialClient) {
+    if (!description)
+        return null;
+    return sanitize(renderDescription(description, facets, socialClient), {
+        ADD_ATTR: ['target']
+    });
+}

package/dist/events/event-view/locations.d.ts

@@ -0,0 +1,36 @@
+import type { EventLocationVariant } from '../event-types.js';
+export type Coordinates = {
+    lat: number;
+    lng: number;
+};
+export type LocationData = {
+    kind: 'address' | 'geo' | 'fsq' | 'hthree' | 'place' | 'uri';
+    name?: string;
+    label: string;
+    detail?: string;
+    href?: string;
+    /** Compact label for event cards; addresses keep the existing city-only treatment. */
+    summary?: string;
+    coordinates?: Coordinates;
+    h3Cell?: string;
+    /** Only street addresses may be sent to the geocoder. */
+    geocodeQuery?: string;
+};
+/** Preserve record order and supported variants, keeping only the first entry for each URI. */
+export declare function getLocations(locations: EventLocationVariant[] | undefined): LocationData[];
+export type LocationLine = {
+    label: string;
+    href?: string;
+    muted: boolean;
+};
+/** One pin for the place: venue names above addresses, coordinates only as a fallback. */
+export declare function getPhysicalLocationLines(locations: LocationData[]): LocationLine[];
+/** Cards stay compact: prefer cities, falling back to the other physical variants. */
+export declare function getLocationSummary(locations: LocationData[]): string | undefined;
+export type GeoLocation = Coordinates & {
+    label: string;
+    googleMapsUrl: string;
+    osmUrl: string;
+};
+/** A single overview map: prefer explicit coordinates; otherwise geocode the first address. */
+export declare function resolveGeoLocation(locations: LocationData[]): Promise<GeoLocation | null>;