@atmo-dev/events-ui 0.1.0

package/dist/VodTranscript.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	type Word = { text: string; start: number; end: number };
+	type Segment = { start: number; end: number; text: string; words: Word[] };
+
+	let {
+		transcriptUrl,
+		currentTime = 0,
+		onseek
+	}: {
+		transcriptUrl: string;
+		currentTime?: number;
+		onseek?: (time: number) => void;
+	} = $props();
+
+	let segments: Segment[] = $state([]);
+	let loaded = $state(false);
+
+	onMount(() => {
+		fetchTranscript();
+	});
+
+	async function fetchTranscript() {
+		try {
+			const res = await fetch(transcriptUrl);
+			segments = await res.json();
+		} catch {
+			segments = [];
+		}
+		loaded = true;
+	}
+
+	function formatTime(seconds: number): string {
+		const m = Math.floor(seconds / 60);
+		const s = Math.floor(seconds % 60);
+		return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+	}
+
+	function wordClass(word: Word): string {
+		if (currentTime >= word.start && currentTime < word.end) {
+			return 'text-accent-500 font-semibold';
+		}
+		if (word.end <= currentTime) {
+			return 'text-base-900 dark:text-base-100';
+		}
+		return 'text-base-400 dark:text-base-500';
+	}
+</script>
+
+{#if loaded && segments.length > 0}
+	<div class="max-h-[400px] overflow-y-auto rounded-xl px-4 py-6">
+		{#each segments as segment, i (segment.start)}
+			<p class="mb-2">
+				<button
+					type="button"
+					onclick={() => onseek?.(segment.start)}
+					class="text-base-400 dark:text-base-500 mr-1 cursor-pointer font-mono text-xs transition-colors hover:text-accent-500"
+				>
+					{formatTime(segment.start)}
+				</button>
+				{#each segment.words as word, wi (`${segment.start}-${wi}`)}
+					<button
+						type="button"
+						onclick={() => onseek?.(word.start)}
+						class="{wordClass(word)} mr-1.5 cursor-pointer text-sm leading-relaxed transition-colors hover:text-accent-500"
+					>{word.text.trim()}</button>
+				{/each}
+			</p>
+		{/each}
+	</div>
+{/if}

package/dist/VodTranscript.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    transcriptUrl: string;
+    currentTime?: number;
+    onseek?: (time: number) => void;
+};
+declare const VodTranscript: import("svelte").Component<$$ComponentProps, {}, "">;
+type VodTranscript = ReturnType<typeof VodTranscript>;
+export default VodTranscript;

package/dist/atproto-helpers.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Pure browser-safe atproto helpers used by the UI components. Does not depend
+ * on any session/client state — those flow through the EditorAdapter.
+ */
+export declare function getCDNImageBlobUrl({ did, blob, format }: {
+    did: string;
+    blob: {
+        $type: 'blob';
+        ref: {
+            $link: string;
+        };
+    };
+    format?: 'webp' | 'jpeg' | 'png';
+}): string;
+export declare function compressImage(file: File | Blob, maxSize?: number, maxDimension?: number): Promise<{
+    blob: Blob;
+    aspectRatio: {
+        width: number;
+        height: number;
+    };
+}>;

package/dist/atproto-helpers.js

@@ -0,0 +1,61 @@
+/**
+ * Pure browser-safe atproto helpers used by the UI components. Does not depend
+ * on any session/client state — those flow through the EditorAdapter.
+ */
+export function getCDNImageBlobUrl({ did, blob, format = 'webp' }) {
+    return `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${blob.ref.$link}@${format}`;
+}
+export function compressImage(file, maxSize = 900 * 1024, maxDimension = 2048) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            if (!e.target?.result) {
+                return reject(new Error('Failed to read file.'));
+            }
+            img.src = e.target.result;
+        };
+        reader.onerror = (err) => reject(err);
+        reader.readAsDataURL(file);
+        img.onload = () => {
+            let width = img.width;
+            let height = img.height;
+            if (file.size <= maxSize) {
+                return resolve({ blob: file, aspectRatio: { width, height } });
+            }
+            if (width > maxDimension || height > maxDimension) {
+                if (width > height) {
+                    height = Math.round((maxDimension / width) * height);
+                    width = maxDimension;
+                }
+                else {
+                    width = Math.round((maxDimension / height) * width);
+                    height = maxDimension;
+                }
+            }
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return reject(new Error('Failed to get canvas context.'));
+            ctx.drawImage(img, 0, 0, width, height);
+            let quality = 0.9;
+            function attemptCompression() {
+                canvas.toBlob((blob) => {
+                    if (!blob)
+                        return reject(new Error('Compression failed.'));
+                    if (blob.size <= maxSize || quality < 0.3) {
+                        resolve({ blob, aspectRatio: { width, height } });
+                    }
+                    else {
+                        quality -= 0.1;
+                        attemptCompression();
+                    }
+                }, 'image/webp', quality);
+            }
+            attemptCompression();
+        };
+        img.onerror = (err) => reject(err);
+    });
+}

package/dist/cal/helper.d.ts

@@ -0,0 +1 @@
+export declare function validateLink(link: string | undefined, tryAdding?: boolean): string | undefined;

package/dist/cal/helper.js

@@ -0,0 +1,20 @@
+export function validateLink(link, tryAdding = true) {
+    if (!link)
+        return;
+    try {
+        new URL(link);
+        return link;
+    }
+    catch {
+        if (!tryAdding)
+            return;
+        try {
+            link = 'https://' + link;
+            new URL(link);
+            return link;
+        }
+        catch {
+            return;
+        }
+    }
+}

package/dist/cal/ical.d.ts

@@ -0,0 +1,22 @@
+import type { EventData } from '../event-types.js';
+export interface ICalAttendee {
+    name: string;
+    status: 'going' | 'interested';
+    url?: string;
+}
+export interface ICalEvent {
+    eventData: EventData;
+    uid: string;
+    url?: string;
+    organizer?: string;
+    imageUrl?: string;
+    attendees?: ICalAttendee[];
+}
+/**
+ * Generate a complete iCal feed from multiple events.
+ */
+export declare function generateICalFeed(events: ICalEvent[], calendarName: string): string;
+/**
+ * Generate iCal content for a single event (for client-side download).
+ */
+export declare function generateICalEvent(eventData: EventData, atUri: string, eventUrl?: string): string;

package/dist/cal/ical.js

@@ -0,0 +1,188 @@
+/**
+ * Escape text for iCal fields (RFC 5545 Section 3.3.11).
+ * Backslashes, semicolons, commas, and newlines must be escaped.
+ */
+function escapeText(text) {
+    return text
+        .replace(/\\/g, '\\\\')
+        .replace(/;/g, '\\;')
+        .replace(/,/g, '\\,')
+        .replace(/\n/g, '\\n');
+}
+/**
+ * Fold long lines per RFC 5545 (max 75 octets per line).
+ * Continuation lines start with a single space.
+ */
+function foldLine(line) {
+    const maxLen = 75;
+    if (line.length <= maxLen)
+        return line;
+    const parts = [];
+    parts.push(line.slice(0, maxLen));
+    let i = maxLen;
+    while (i < line.length) {
+        parts.push(' ' + line.slice(i, i + maxLen - 1));
+        i += maxLen - 1;
+    }
+    return parts.join('\r\n');
+}
+/**
+ * Convert an ISO 8601 date string to iCal DATETIME format (UTC).
+ * e.g. "2026-02-22T15:00:00Z" -> "20260222T150000Z"
+ */
+function toICalDate(isoString) {
+    const d = new Date(isoString);
+    const pad = (n) => n.toString().padStart(2, '0');
+    return (d.getUTCFullYear().toString() +
+        pad(d.getUTCMonth() + 1) +
+        pad(d.getUTCDate()) +
+        'T' +
+        pad(d.getUTCHours()) +
+        pad(d.getUTCMinutes()) +
+        pad(d.getUTCSeconds()) +
+        'Z');
+}
+/**
+ * Extract a location string from event locations array.
+ */
+function getLocationString(locations) {
+    if (!locations || locations.length === 0)
+        return undefined;
+    const loc = locations.find((v) => v.$type === 'community.lexicon.location.address');
+    if (!loc)
+        return undefined;
+    const street = loc.street || undefined;
+    const locality = loc.locality || undefined;
+    const region = loc.region || undefined;
+    const parts = [street, locality, region].filter(Boolean);
+    return parts.length > 0 ? parts.join(', ') : undefined;
+}
+function getModeLabel(mode) {
+    if (mode.includes('virtual'))
+        return 'Virtual';
+    if (mode.includes('hybrid'))
+        return 'Hybrid';
+    if (mode.includes('inperson'))
+        return 'In-Person';
+    return 'Event';
+}
+function toAbsoluteUrl(pathOrUrl, baseUrl) {
+    if (!pathOrUrl)
+        return undefined;
+    try {
+        return new URL(pathOrUrl, baseUrl).toString();
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * Generate a single VEVENT block.
+ */
+function generateVEvent(event) {
+    const { eventData, uid, url, organizer, imageUrl } = event;
+    // Skip events with invalid or missing start dates
+    const startTime = new Date(eventData.startsAt);
+    if (isNaN(startTime.getTime()))
+        return null;
+    const lines = [];
+    lines.push('BEGIN:VEVENT');
+    lines.push(`UID:${escapeText(uid)}`);
+    lines.push(`DTSTART:${toICalDate(eventData.startsAt)}`);
+    if (eventData.endsAt) {
+        lines.push(`DTEND:${toICalDate(eventData.endsAt)}`);
+    }
+    else {
+        // Default to 1 hour duration when no end time is specified
+        const defaultEnd = new Date(startTime.getTime() + 60 * 60 * 1000);
+        lines.push(`DTEND:${toICalDate(defaultEnd.toISOString())}`);
+    }
+    lines.push(`SUMMARY:${escapeText(eventData.name)}`);
+    // Description: text + links
+    const descParts = [];
+    if (eventData.description) {
+        descParts.push(eventData.description);
+    }
+    if (eventData.uris && eventData.uris.length > 0) {
+        descParts.push('');
+        descParts.push('Links:');
+        for (const link of eventData.uris) {
+            descParts.push(link.name ? `${link.name}: ${link.uri}` : link.uri);
+        }
+    }
+    if (url) {
+        descParts.push('');
+        descParts.push(`Event page: ${url}`);
+    }
+    if (descParts.length > 0) {
+        lines.push(`DESCRIPTION:${escapeText(descParts.join('\n'))}`);
+    }
+    const locationParts = [];
+    const room = eventData.additionalData?.room;
+    if (typeof room === 'string' && room && room !== 'none') {
+        locationParts.push(room);
+    }
+    const address = getLocationString(eventData.locations);
+    if (address) {
+        locationParts.push(address);
+    }
+    if (locationParts.length > 0) {
+        lines.push(`LOCATION:${escapeText(locationParts.join(', '))}`);
+    }
+    if (url) {
+        lines.push(`URL:${url}`);
+    }
+    // Categories from event mode
+    if (eventData.mode) {
+        lines.push(`CATEGORIES:${escapeText(getModeLabel(eventData.mode))}`);
+    }
+    // Organizer
+    if (organizer) {
+        const organizerUrl = toAbsoluteUrl(`/${organizer}`, url) ?? url;
+        lines.push(`ORGANIZER;CN=${escapeText(organizer)}:${organizerUrl}`);
+    }
+    // Attendees
+    if (event.attendees) {
+        for (const attendee of event.attendees) {
+            const partstat = attendee.status === 'going' ? 'ACCEPTED' : 'TENTATIVE';
+            const attendeeUrl = toAbsoluteUrl(attendee.url, url) ?? url;
+            if (!attendeeUrl)
+                continue;
+            lines.push(`ATTENDEE;CN=${escapeText(attendee.name)};PARTSTAT=${partstat}:${attendeeUrl}`);
+        }
+    }
+    // Image (supported by Apple Calendar, Google Calendar)
+    if (imageUrl) {
+        lines.push(`IMAGE;VALUE=URI;DISPLAY=BADGE:${imageUrl}`);
+    }
+    lines.push(`DTSTAMP:${toICalDate(new Date().toISOString())}`);
+    // Reminder 15 minutes before
+    lines.push('BEGIN:VALARM');
+    lines.push('TRIGGER:-PT15M');
+    lines.push('ACTION:DISPLAY');
+    lines.push(`DESCRIPTION:${escapeText(eventData.name)}`);
+    lines.push('END:VALARM');
+    lines.push('END:VEVENT');
+    return lines.map(foldLine).join('\r\n');
+}
+/**
+ * Generate a complete iCal feed from multiple events.
+ */
+export function generateICalFeed(events, calendarName) {
+    const lines = [];
+    lines.push('BEGIN:VCALENDAR');
+    lines.push('VERSION:2.0');
+    lines.push('PRODID:-//Blento//Events//EN');
+    lines.push(`X-WR-CALNAME:${escapeText(calendarName)}`);
+    lines.push('CALSCALE:GREGORIAN');
+    lines.push('METHOD:PUBLISH');
+    const vevents = events.map(generateVEvent).filter((v) => v !== null);
+    const result = lines.map(foldLine).join('\r\n') + '\r\n' + vevents.join('\r\n') + '\r\nEND:VCALENDAR\r\n';
+    return result;
+}
+/**
+ * Generate iCal content for a single event (for client-side download).
+ */
+export function generateICalEvent(eventData, atUri, eventUrl) {
+    return generateICalFeed([{ eventData, uid: atUri, url: eventUrl }], eventData.name);
+}

package/dist/cal/sanitize.d.ts

@@ -0,0 +1,3 @@
+export declare function sanitize(dirty: string, config?: {
+    ADD_ATTR?: string[];
+}): string;

package/dist/cal/sanitize.js

@@ -0,0 +1,25 @@
+import { BROWSER } from 'esm-env';
+// Lightweight regex-based sanitizer for SSR where DOMPurify is not available.
+// Strips common XSS vectors.
+function regexSanitize(html) {
+    return html
+        .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script\s*>/gi, '')
+        .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe\s*>/gi, '')
+        .replace(/<object\b[^<]*(?:(?!<\/object>)<[^<]*)*<\/object\s*>/gi, '')
+        .replace(/<embed\b[^>]*\/?>/gi, '')
+        .replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style\s*>/gi, '')
+        .replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+        .replace(/href\s*=\s*["']?\s*javascript\s*:/gi, 'href="')
+        .replace(/src\s*=\s*["']?\s*javascript\s*:/gi, 'src="');
+}
+let _purify = null;
+if (BROWSER) {
+    import('dompurify').then((mod) => {
+        _purify = (html, config) => mod.default.sanitize(html, config);
+    });
+}
+export function sanitize(dirty, config) {
+    if (_purify)
+        return _purify(dirty, config);
+    return regexSanitize(dirty);
+}

package/dist/contrail.d.ts

@@ -0,0 +1,54 @@
+import type { EventData } from './event-types.js';
+/**
+ * Subset of contrail types and helpers needed by the UI package. Server-side
+ * functions (notifyContrailOfUpdate, listEventRecordsFromContrail, etc.) live
+ * in the consumer app, not here.
+ */
+export type FlatEventRecord = EventData & {
+    cid?: string | null;
+    did: string;
+    rkey: string;
+    uri: string;
+    /** Populated when the event was read from a permissioned space. */
+    space?: string;
+    rsvps?: {
+        going?: Array<{
+            did: string;
+            createdAt?: string;
+        }>;
+        interested?: Array<{
+            did: string;
+            createdAt?: string;
+        }>;
+        notgoing?: Array<{
+            did: string;
+            createdAt?: string;
+        }>;
+    };
+    rsvpsCount?: number;
+    rsvpsGoingCount?: number;
+    rsvpsInterestedCount?: number;
+    rsvpsNotgoingCount?: number;
+};
+export type HostProfile = {
+    did: string;
+    handle?: string;
+    displayName?: string;
+    avatar?: string;
+};
+export type AttendeeInfo = {
+    did: string;
+    status: 'going' | 'interested';
+    avatar?: string;
+    name: string;
+    handle?: string;
+    url: string;
+};
+export declare const RSVP_GOING = "community.lexicon.calendar.rsvp#going";
+export declare const RSVP_INTERESTED = "community.lexicon.calendar.rsvp#interested";
+/** Build the canonical path for an event. Private events (those with a `space`
+ *  field) live under `/p/<actor>/e/<rkey>/s/<skey>` so the page knows both
+ *  which event to show and which space to look in. Public events use
+ *  `/p/<actor>/e/<rkey>`. */
+export declare function eventUrl(event: FlatEventRecord, actor?: string): string;
+export declare function isEventOngoing(startsAt: string, endsAt?: string | null): boolean;

package/dist/contrail.js

@@ -0,0 +1,22 @@
+export const RSVP_GOING = 'community.lexicon.calendar.rsvp#going';
+export const RSVP_INTERESTED = 'community.lexicon.calendar.rsvp#interested';
+/** Build the canonical path for an event. Private events (those with a `space`
+ *  field) live under `/p/<actor>/e/<rkey>/s/<skey>` so the page knows both
+ *  which event to show and which space to look in. Public events use
+ *  `/p/<actor>/e/<rkey>`. */
+export function eventUrl(event, actor) {
+    const who = actor || event.did;
+    if (event.space) {
+        const m = event.space.match(/^ats?:\/\/[^/]+\/[^/]+\/([^/]+)$/);
+        const skey = m?.[1];
+        if (skey)
+            return `/p/${who}/e/${event.rkey}/s/${skey}`;
+    }
+    return `/p/${who}/e/${event.rkey}`;
+}
+export function isEventOngoing(startsAt, endsAt) {
+    if (!endsAt)
+        return false;
+    const now = new Date();
+    return new Date(startsAt) <= now && new Date(endsAt) >= now;
+}

package/dist/date-format.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Convert a datetime-local string (e.g. "2026-04-09T22:00") to a UTC ISO string,
+ * interpreting the wall-clock components in the given IANA timezone.
+ */
+export declare function datetimeLocalToISO(dt: string, tz: string): string;
+/**
+ * Convert a UTC ISO string to a datetime-local string ("YYYY-MM-DDTHH:mm") whose
+ * components represent the wall-clock time in the given IANA timezone.
+ */
+export declare function isoToDatetimeLocalInTz(iso: string, tz: string): string;
+/**
+ * Format an ISO timestamp using Intl options, rendered in the event's timezone
+ * when available. Falls back to the viewer's local zone for legacy events that
+ * predate the timezone field.
+ */
+export declare function formatInTz(iso: string, tz: string | undefined, options: Intl.DateTimeFormatOptions, locale?: string): string;
+/**
+ * Returns the parts of an ISO timestamp in the given timezone (or viewer-local
+ * when tz is falsy). Useful when the caller wants numeric components like the
+ * day-of-month rendered in the event's zone.
+ */
+export declare function partsInTz(iso: string, tz: string | undefined, options: Intl.DateTimeFormatOptions, locale?: string): Record<string, string>;

package/dist/date-format.js

@@ -0,0 +1,43 @@
+import { parseAbsolute, parseDateTime } from '@internationalized/date';
+/**
+ * Convert a datetime-local string (e.g. "2026-04-09T22:00") to a UTC ISO string,
+ * interpreting the wall-clock components in the given IANA timezone.
+ */
+export function datetimeLocalToISO(dt, tz) {
+    return parseDateTime(dt).toDate(tz).toISOString();
+}
+/**
+ * Convert a UTC ISO string to a datetime-local string ("YYYY-MM-DDTHH:mm") whose
+ * components represent the wall-clock time in the given IANA timezone.
+ */
+export function isoToDatetimeLocalInTz(iso, tz) {
+    const zdt = parseAbsolute(iso, tz);
+    const pad = (n) => n.toString().padStart(2, '0');
+    return `${zdt.year}-${pad(zdt.month)}-${pad(zdt.day)}T${pad(zdt.hour)}:${pad(zdt.minute)}`;
+}
+/**
+ * Format an ISO timestamp using Intl options, rendered in the event's timezone
+ * when available. Falls back to the viewer's local zone for legacy events that
+ * predate the timezone field.
+ */
+export function formatInTz(iso, tz, options, locale = 'en-US') {
+    const date = new Date(iso);
+    return new Intl.DateTimeFormat(locale, { ...options, timeZone: tz || undefined }).format(date);
+}
+/**
+ * Returns the parts of an ISO timestamp in the given timezone (or viewer-local
+ * when tz is falsy). Useful when the caller wants numeric components like the
+ * day-of-month rendered in the event's zone.
+ */
+export function partsInTz(iso, tz, options, locale = 'en-US') {
+    const date = new Date(iso);
+    const parts = new Intl.DateTimeFormat(locale, {
+        ...options,
+        timeZone: tz || undefined
+    }).formatToParts(date);
+    const out = {};
+    for (const p of parts)
+        if (p.type !== 'literal')
+            out[p.type] = p.value;
+    return out;
+}