@atmo-dev/kit 0.4.0 → 0.5.0

package/dist/events/editor/location.js

@@ -0,0 +1,50 @@
+import codes from 'i18n-iso-countries/codes.json' with { type: 'json' };
+import english from 'i18n-iso-countries/langs/en.json' with { type: 'json' };
+// Use only the maintained JSON datasets, not the package's CommonJS runtime:
+// Vite's dev SSR module runner cannot evaluate its require() calls as ESM.
+const countryCodes = new Map();
+for (const [alpha2, alpha3] of codes) {
+    countryCodes.set(alpha2, alpha2);
+    countryCodes.set(alpha3, alpha2);
+}
+function countryNameKey(name) {
+    return name.trim().normalize('NFKD').replace(/\p{M}/gu, '').replace(/[‘’]/g, "'").toLowerCase();
+}
+const countryNames = new Map();
+for (const [code, names] of Object.entries(english.countries)) {
+    for (const name of Array.isArray(names) ? names : [names]) {
+        countryNames.set(countryNameKey(name), code);
+    }
+}
+export function normalizeCountryCode(value) {
+    if (typeof value !== 'string')
+        return undefined;
+    const name = value.trim().normalize('NFKC').replace(/[‘’]/g, "'");
+    const code = name.toUpperCase();
+    const alpha2 = countryCodes.get(code);
+    if (alpha2)
+        return alpha2;
+    // UK is a common alias, but GB is the assigned ISO 3166-1 code.
+    if (code === 'UK')
+        return 'GB';
+    return countryNames.get(countryNameKey(name));
+}
+export class LocationValidationError extends Error {
+    constructor() {
+        super('Choose a location with a valid country before publishing. Remove and re-add the location to update it.');
+        this.name = 'LocationValidationError';
+    }
+}
+export function normalizeAddressLocation(location) {
+    const country = normalizeCountryCode(location.country);
+    // country is required by community.lexicon.location.address. Never omit it,
+    // truncate a name, or guess a country when the input cannot be resolved.
+    if (!country)
+        throw new LocationValidationError();
+    return { ...location, country };
+}
+export function normalizeEventLocations(locations) {
+    return locations.map((location) => location.$type === 'community.lexicon.location.address'
+        ? normalizeAddressLocation({ ...location, country: location.country })
+        : location);
+}

package/dist/events/editor/save.d.ts

@@ -0,0 +1,43 @@
+import { type Token } from '@atcute/bluesky-richtext-parser';
+import type { Facet } from '../../index.js';
+import type { FlatEventRecord } from '../contrail.js';
+import type { EventTheme } from '../theme.js';
+import type { EventLocation, EventMode, Visibility } from './types.js';
+export declare function tokensToFacets(tokens: Token[], resolveHandle: (handle: string) => Promise<string>): Promise<Facet[]>;
+/** Render a selected thumbnail preset to a PNG File so it can be uploaded
+ *  as a blob like a user-provided image. Returns null if the preset design
+ *  is missing or the canvas fails to produce a blob. */
+export declare function renderPresetThumbnail(args: {
+    design: string;
+    seed: number;
+    name: string;
+    dateStr: string;
+    accent?: string;
+}): Promise<File | null>;
+export declare function buildThumbnailMedia(args: {
+    isNew: boolean;
+    thumbnailChanged: boolean;
+    thumbnailFile: File | null;
+    existingMedia: Array<Record<string, unknown>>;
+    uploadBlob: (blob: Blob) => Promise<Record<string, unknown>>;
+}): Promise<Array<Record<string, unknown>> | undefined>;
+export declare function buildEventRecord(args: {
+    eventData: FlatEventRecord | null;
+    isNew: boolean;
+    name: string;
+    description: string;
+    startsAt: string;
+    endsAt: string;
+    timezone: string;
+    mode: EventMode;
+    visibility: Visibility;
+    theme: EventTheme;
+    links: Array<{
+        uri: string;
+        name: string;
+    }>;
+    location: EventLocation | null;
+    locationChanged: boolean;
+    media: Array<Record<string, unknown>> | undefined;
+    resolveHandle: (handle: string) => Promise<string>;
+}): Promise<Record<string, unknown>>;

package/dist/events/editor/save.js

@@ -0,0 +1,168 @@
+import { compressImage } from '../atproto-helpers.js';
+import { tokenize } from '@atcute/bluesky-richtext-parser';
+import { datetimeLocalToISO } from '../date-format.js';
+import { designs, resolveAccentColor } from '../thumbnails/designs.js';
+import { normalizeEventLocations } from './location.js';
+import { getEventThumbnail } from '../event-media.js';
+export async function tokensToFacets(tokens, resolveHandle) {
+    const encoder = new TextEncoder();
+    const facets = [];
+    let byteOffset = 0;
+    for (const token of tokens) {
+        const tokenBytes = encoder.encode(token.raw);
+        const byteStart = byteOffset;
+        const byteEnd = byteOffset + tokenBytes.length;
+        if (token.type === 'mention') {
+            try {
+                const did = await resolveHandle(token.handle);
+                if (did) {
+                    facets.push({
+                        index: { byteStart, byteEnd },
+                        features: [{ $type: 'app.bsky.richtext.facet#mention', did }]
+                    });
+                }
+            }
+            catch {
+                // skip unresolvable mentions
+            }
+        }
+        else if (token.type === 'autolink') {
+            facets.push({
+                index: { byteStart, byteEnd },
+                features: [{ $type: 'app.bsky.richtext.facet#link', uri: token.url }]
+            });
+        }
+        else if (token.type === 'topic') {
+            facets.push({
+                index: { byteStart, byteEnd },
+                features: [{ $type: 'app.bsky.richtext.facet#tag', tag: token.name }]
+            });
+        }
+        byteOffset = byteEnd;
+    }
+    return facets;
+}
+/** Render a selected thumbnail preset to a PNG File so it can be uploaded
+ *  as a blob like a user-provided image. Returns null if the preset design
+ *  is missing or the canvas fails to produce a blob. */
+export async function renderPresetThumbnail(args) {
+    const drawer = designs[args.design];
+    if (!drawer)
+        return null;
+    const canvas = document.createElement('canvas');
+    canvas.width = 800;
+    canvas.height = 800;
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        return null;
+    drawer(ctx, 800, 800, args.name.trim() || 'Event', args.dateStr, args.seed, resolveAccentColor(args.accent));
+    const blob = await new Promise((r) => canvas.toBlob(r, 'image/png'));
+    if (!blob)
+        return null;
+    return new File([blob], 'thumbnail.png', { type: 'image/png' });
+}
+export async function buildThumbnailMedia(args) {
+    const { isNew, thumbnailChanged, thumbnailFile, existingMedia, uploadBlob } = args;
+    if (!isNew && !thumbnailChanged) {
+        return existingMedia.length > 0 ? existingMedia : undefined;
+    }
+    // Editing a flyer should preserve its role and leave other media untouched.
+    const role = getEventThumbnail(existingMedia)?.role ?? 'thumbnail';
+    if (!thumbnailFile) {
+        const remaining = existingMedia.filter((m) => m.role !== role);
+        return remaining.length > 0 ? remaining : undefined;
+    }
+    const compressed = await compressImage(thumbnailFile);
+    const blobRef = await uploadBlob(compressed.blob);
+    if (!blobRef)
+        return existingMedia.length > 0 ? existingMedia : undefined;
+    return [
+        ...existingMedia.filter((m) => m.role !== role),
+        {
+            role,
+            content: blobRef,
+            aspect_ratio: {
+                width: compressed.aspectRatio.width,
+                height: compressed.aspectRatio.height
+            }
+        }
+    ];
+}
+export async function buildEventRecord(args) {
+    const { eventData, isNew, name, description, startsAt, endsAt, timezone, mode, visibility, theme, links, location, locationChanged, media, resolveHandle } = args;
+    const createdAt = isNew
+        ? new Date().toISOString()
+        : eventData?.createdAt || new Date().toISOString();
+    // Spread original record to preserve unspecced fields (e.g. additionalData)
+    const record = {
+        ...(eventData ? { ...eventData } : {}),
+        $type: 'community.lexicon.calendar.event',
+        createdWith: 'https://atmo.rsvp',
+        name: name.trim(),
+        mode: `community.lexicon.calendar.event#${mode}`,
+        status: 'community.lexicon.calendar.event#scheduled',
+        startsAt: datetimeLocalToISO(startsAt, timezone),
+        timezone,
+        createdAt,
+        theme
+    };
+    // Remove flattened fields that aren't part of the actual record
+    for (const k of [
+        'cid',
+        'did',
+        'rkey',
+        'uri',
+        'rsvps',
+        'rsvpsCount',
+        'rsvpsGoingCount',
+        'rsvpsInterestedCount',
+        'rsvpsNotgoingCount'
+    ]) {
+        delete record[k];
+    }
+    const trimmedDescription = description.trim();
+    if (trimmedDescription) {
+        record.description = trimmedDescription;
+        const tokens = tokenize(trimmedDescription);
+        const facets = await tokensToFacets(tokens, resolveHandle);
+        if (facets.length > 0)
+            record.facets = facets;
+    }
+    if (endsAt)
+        record.endsAt = datetimeLocalToISO(endsAt, timezone);
+    if (media)
+        record.media = media;
+    else
+        delete record.media;
+    if (links.length > 0)
+        record.uris = links;
+    else
+        delete record.uris;
+    if (isNew || locationChanged) {
+        delete record.locations;
+        if (location) {
+            record.locations = [
+                {
+                    $type: 'community.lexicon.location.address',
+                    ...location
+                }
+            ];
+        }
+        // If changed/new but no location, locations stays undefined (removed/absent)
+    }
+    else if (eventData?.locations && eventData.locations.length > 0) {
+        record.locations = eventData.locations;
+    }
+    // Normalize every address, including unchanged legacy locations and imported
+    // names. Preserve other location variants and address metadata as-is.
+    if (Array.isArray(record.locations)) {
+        record.locations = normalizeEventLocations(record.locations);
+    }
+    const existingPrefs = (record.preferences ??
+        {});
+    record.preferences = {
+        ...existingPrefs,
+        showInDiscovery: visibility !== 'unlisted'
+    };
+    return record;
+}

package/dist/events/editor/types.d.ts

@@ -0,0 +1,39 @@
+export type EventMode = 'inperson' | 'virtual' | 'hybrid';
+export type Visibility = 'public' | 'unlisted';
+export interface EventLocation {
+    street?: string;
+    locality?: string;
+    region?: string;
+    country?: string;
+}
+/**
+ * Optional autofill payload for a brand-new event. EventEditor populates its
+ * fields from this on mount (only when there is no `eventData`), while leaving
+ * `isNew` true so the save path still treats the result as a creation. Use
+ * `additionalData` to carry atmo-specific extras (e.g. an external source link
+ * + rsvp mode) into the saved record.
+ */
+export interface EventEditorPrefill {
+    name?: string;
+    description?: string;
+    /** ISO 8601 string. */
+    startsAt?: string;
+    /** ISO 8601 string. */
+    endsAt?: string;
+    timezone?: string;
+    mode?: EventMode;
+    location?: EventLocation;
+    links?: Array<{
+        uri: string;
+        name: string;
+    }>;
+    additionalData?: Record<string, unknown>;
+    /**
+     * Pre-supplied cover image. When set, the editor uses this instead of
+     * auto-generating a preset thumbnail and the file is uploaded as a blob on
+     * save.
+     */
+    thumbnailFile?: File;
+}
+export declare function stripModePrefix(modeStr: string): EventMode;
+export declare function getLocationDisplayString(loc: EventLocation): string;

package/dist/events/editor/types.js

@@ -0,0 +1,9 @@
+export function stripModePrefix(modeStr) {
+    const stripped = modeStr.replace('community.lexicon.calendar.event#', '');
+    if (stripped === 'virtual' || stripped === 'hybrid' || stripped === 'inperson')
+        return stripped;
+    return 'inperson';
+}
+export function getLocationDisplayString(loc) {
+    return [loc.street, loc.locality, loc.region, loc.country].filter(Boolean).join(', ');
+}

package/dist/events/event-media.d.ts

@@ -0,0 +1,4 @@
+/** Select the event's thumbnail, falling back to a flyer before any header image. */
+export declare function getEventThumbnail<T extends {
+    role?: unknown;
+}>(media: readonly T[] | null | undefined): T | undefined;

package/dist/events/event-media.js

@@ -0,0 +1,4 @@
+/** Select the event's thumbnail, falling back to a flyer before any header image. */
+export function getEventThumbnail(media) {
+    return media?.find((m) => m.role === 'thumbnail') ?? media?.find((m) => m.role === 'flyer');
+}

package/dist/events/event-types.d.ts

@@ -0,0 +1,79 @@
+/**
+ * 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;
+    /** Whether a response is requested from attendees. Only explicit false opts out. */
+    rsvpExpected?: boolean;
+}
+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;
+        aspect_ratio?: {
+            width: number;
+            height: number;
+        };
+        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>;
+    preferences?: {
+        showInDiscovery?: boolean;
+    };
+    theme?: {
+        name: string;
+        accentColor: string;
+        baseColor: string;
+    };
+    bskyPostRef?: {
+        uri: string;
+        cid: string;
+        showComments: boolean;
+    };
+};

package/dist/events/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/events/event-view/AddToCalendarButton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Icon } from '../../index.js';
+	import { CalendarPlus } from '@sketchyicons/svelte';
+	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="flex cursor-pointer items-center gap-2 text-sm font-medium text-base-700 transition-colors hover:text-base-900 dark:text-base-300 dark:hover:text-base-100"
+>
+	<Icon img={CalendarPlus} size={16} />
+	Add to Calendar
+</button>

package/dist/events/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/events/event-view/EventBadges.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Badge } from '../../index.js';
+	import { 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>
+				<span class="mr-1 inline-block size-1.5 animate-pulse rounded-full bg-accent-500"></span>
+				Live
+			</Badge>
+		{/if}
+		{#if mode}
+			<Badge variant="outline">{getModeLabel(mode)}</Badge>
+		{/if}
+	</div>
+{/if}

package/dist/events/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/events/event-view/EventDateBlock.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Badge } from '../../index.js';
+	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="flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-ui bg-recess [box-shadow:var(--ui-recess-shadow)]"
+	>
+		<span class="text-[9px] leading-none font-semibold text-muted">
+			{formatMonth(startDate)}
+		</span>
+		<span class="text-lg leading-tight font-bold text-base-900 dark:text-base-50">
+			{formatDay(startDate)}
+		</span>
+	</div>
+	<div>
+		<p class="font-semibold text-base-900 dark:text-base-50">
+			{formatWeekday(startDate)}, {formatFullDate(startDate)}
+			{#if endDate && !isSameDay}
+				- {formatWeekday(endDate)}, {formatFullDate(endDate)}
+			{/if}
+		</p>
+		<p class="flex flex-wrap items-center gap-2 text-sm text-muted">
+			<span>
+				{formatTime(startDate)}
+				{#if endDate && isSameDay}
+					- {formatTime(endDate)}
+				{/if}
+			</span>
+			<Badge variant="outline">local time</Badge>
+		</p>
+	</div>
+</div>

package/dist/events/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/events/event-view/EventHostedBy.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Avatar } from '../../index.js';
+	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="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Hosted By</p>
+	<a
+		href={hostUrl}
+		class="flex items-center gap-2.5 font-medium text-base-900 transition-opacity hover:opacity-80 dark:text-base-100"
+	>
+		<Avatar
+			src={hostProfile?.avatar}
+			name={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="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Speakers</p>
+		<div class="space-y-2">
+			{#each speakers as speaker, i (speaker.id || i)}
+				{#if speaker.handle}
+					<a
+						href="https://bsky.app/profile/{speaker.handle}"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="flex items-center gap-2.5 font-medium text-base-900 transition-opacity hover:opacity-80 dark:text-base-100"
+					>
+						<Avatar src={speaker.avatar} name={speaker.name} class="size-8 shrink-0" />
+						<span class="truncate text-sm">{speaker.name}</span>
+					</a>
+				{:else}
+					<div class="flex items-center gap-2.5 font-medium text-base-900 dark:text-base-100">
+						<Avatar name={speaker.name} class="size-8 shrink-0" />
+						<span class="truncate text-sm">{speaker.name}</span>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	</div>
+{/if}

package/dist/events/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/events/event-view/EventLinksList.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Icon } from '../../index.js';
+	import { Link } from '@sketchyicons/svelte';
+	let { uris = [] }: { uris?: Array<{ uri: string; name?: string }> } = $props();
+</script>
+
+{#if uris.length}
+	<div>
+		<p class="mb-3 text-xs font-medium text-muted">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="flex items-center gap-2 rounded-sm text-sm text-muted transition-colors hover:text-action"
+					><Icon img={Link} size={15} /><span class="truncate"
+						>{link.name || link.uri.replace(/^https?:\/\//, '')}</span
+					></a
+				>
+			{/each}
+		</div>
+	</div>
+{/if}

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