@atmo-dev/events-ui 0.1.0

package/dist/editor/ThemeSection.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Button, Modal } from '@foxui/core';
+	import ThemePicker from '../ThemePicker.svelte';
+	import { themeBackgrounds, type EventTheme } from '../theme.js';
+
+	let { theme = $bindable() }: { theme: EventTheme } = $props();
+
+	let showModal = $state(false);
+</script>
+
+<div>
+	<p class="text-base-500 dark:text-base-400 mb-3 text-xs font-semibold tracking-wider uppercase">
+		Theme
+	</p>
+	<Button variant="secondary" size="sm" onclick={() => (showModal = true)}>
+		<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="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z"
+			/>
+		</svg>
+		{themeBackgrounds[theme.name] || theme.name}
+	</Button>
+</div>
+
+<Modal bind:open={showModal}>
+	<p class="text-base-900 dark:text-base-50 text-lg font-semibold">Event theme</p>
+	<div class="mt-4">
+		<ThemePicker bind:theme />
+	</div>
+</Modal>

package/dist/editor/ThemeSection.svelte.d.ts

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

package/dist/editor/ThumbnailSection.svelte

@@ -0,0 +1,219 @@
+<script lang="ts">
+	import { Button, Modal } from '@foxui/core';
+	import Avatar from 'svelte-boring-avatars';
+	import ThumbnailPresets from '../ThumbnailPresets.svelte';
+	import { designs, hashSeed, resolveAccentColor } from '../thumbnails/designs.js';
+
+	let {
+		rkey,
+		name,
+		dateStr,
+		accent,
+		thumbnailFile = $bindable(),
+		thumbnailPreview = $bindable(),
+		thumbnailChanged = $bindable(),
+		selectedPreset = $bindable()
+	}: {
+		rkey: string;
+		name: string;
+		dateStr: string;
+		accent: string;
+		thumbnailFile: File | null;
+		thumbnailPreview: string | null;
+		thumbnailChanged: boolean;
+		selectedPreset: string | null;
+	} = $props();
+
+	let fileInput: HTMLInputElement | undefined = $state();
+	let presetPreviewCanvas: HTMLCanvasElement | undefined = $state();
+	let showModal = $state(false);
+	let isDragOver = $state(false);
+
+	const seed = $derived(hashSeed(rkey));
+
+	function setThumbnail(file: File) {
+		thumbnailFile = file;
+		thumbnailChanged = true;
+		selectedPreset = null;
+		if (thumbnailPreview) URL.revokeObjectURL(thumbnailPreview);
+		thumbnailPreview = URL.createObjectURL(file);
+	}
+
+	function onFileChange(e: Event) {
+		const input = e.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file) return;
+		setThumbnail(file);
+		showModal = false;
+	}
+
+	function onDragOver(e: DragEvent) {
+		e.preventDefault();
+		isDragOver = true;
+	}
+
+	function onDragLeave(e: DragEvent) {
+		e.preventDefault();
+		isDragOver = false;
+	}
+
+	function onDrop(e: DragEvent) {
+		e.preventDefault();
+		isDragOver = false;
+		const file = e.dataTransfer?.files?.[0];
+		if (file?.type.startsWith('image/')) {
+			setThumbnail(file);
+		}
+	}
+
+	function removeThumbnail() {
+		thumbnailFile = null;
+		thumbnailChanged = true;
+		selectedPreset = null;
+		if (thumbnailPreview) {
+			URL.revokeObjectURL(thumbnailPreview);
+			thumbnailPreview = null;
+		}
+		if (fileInput) fileInput.value = '';
+	}
+
+	// Render preset preview canvas whenever the selection, name, date, or accent changes.
+	$effect(() => {
+		if (selectedPreset && presetPreviewCanvas && designs[selectedPreset]) {
+			const ctx = presetPreviewCanvas.getContext('2d');
+			if (!ctx) return;
+			presetPreviewCanvas.width = 800;
+			presetPreviewCanvas.height = 800;
+			designs[selectedPreset](
+				ctx,
+				800,
+				800,
+				name || 'Event',
+				dateStr,
+				seed,
+				resolveAccentColor(accent)
+			);
+		}
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="order-1 max-w-sm md:order-0 md:col-start-1 md:max-w-none"
+	ondragover={onDragOver}
+	ondragleave={onDragLeave}
+	ondrop={onDrop}
+>
+	<input
+		bind:this={fileInput}
+		type="file"
+		accept="image/*"
+		onchange={onFileChange}
+		class="hidden"
+	/>
+	<div class="group relative">
+		{#if thumbnailPreview}
+			<img
+				src={thumbnailPreview}
+				alt="Thumbnail preview"
+				class="border-base-200 dark:border-base-800 aspect-square w-full rounded-2xl border object-cover"
+			/>
+		{:else if selectedPreset && designs[selectedPreset]}
+			<div
+				class="border-base-200 dark:border-base-800 aspect-square w-full overflow-hidden rounded-2xl border"
+			>
+				<canvas bind:this={presetPreviewCanvas} class="h-full w-full"></canvas>
+			</div>
+		{:else}
+			<div
+				class="bg-base-100 dark:bg-base-900 aspect-square w-full overflow-hidden rounded-2xl [&>svg]:h-full [&>svg]:w-full"
+			>
+				<Avatar
+					size={400}
+					name={rkey}
+					variant="marble"
+					colors={['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']}
+					square
+				/>
+			</div>
+		{/if}
+		<button
+			type="button"
+			onclick={() => (showModal = true)}
+			class="absolute inset-0 flex cursor-pointer flex-col items-center justify-center gap-1.5 rounded-2xl bg-black/0 text-white/0 transition-colors group-hover:bg-black/40 group-hover:text-white/90 {isDragOver
+				? 'bg-black/40 text-white/90'
+				: ''}"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="size-6"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0 0 22.5 18.75V5.25A2.25 2.25 0 0 0 20.25 3H3.75A2.25 2.25 0 0 0 1.5 5.25v13.5A2.25 2.25 0 0 0 3.75 21Z"
+				/>
+			</svg>
+			<span class="text-sm font-medium">Change thumbnail</span>
+		</button>
+		{#if thumbnailPreview || selectedPreset}
+			<Button
+				variant="ghost"
+				size="iconSm"
+				onclick={removeThumbnail}
+				class="bg-base-900/70 absolute top-2 right-2 text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-red-600"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="size-3.5"
+				>
+					<path
+						d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+					/>
+				</svg>
+			</Button>
+		{/if}
+	</div>
+</div>
+
+<Modal bind:open={showModal}>
+	<p class="text-base-900 dark:text-base-50 text-lg font-semibold">Choose thumbnail</p>
+	<div class="mt-4 flex max-h-[70vh] flex-col gap-6 overflow-y-auto">
+		<Button variant="secondary" class="w-full" onclick={() => fileInput?.click()}>
+			<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="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"
+				/>
+			</svg>
+			Upload own thumbnail
+		</Button>
+		<ThumbnailPresets
+			{name}
+			{dateStr}
+			{accent}
+			{seed}
+			bind:selected={selectedPreset}
+			onselect={() => {
+				showModal = false;
+				thumbnailPreview = null;
+				thumbnailFile = null;
+				thumbnailChanged = true;
+			}}
+		/>
+	</div>
+</Modal>

package/dist/editor/ThumbnailSection.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    rkey: string;
+    name: string;
+    dateStr: string;
+    accent: string;
+    thumbnailFile: File | null;
+    thumbnailPreview: string | null;
+    thumbnailChanged: boolean;
+    selectedPreset: string | null;
+};
+declare const ThumbnailSection: import("svelte").Component<$$ComponentProps, {}, "thumbnailFile" | "thumbnailPreview" | "thumbnailChanged" | "selectedPreset">;
+type ThumbnailSection = ReturnType<typeof ThumbnailSection>;
+export default ThumbnailSection;

package/dist/editor/adapter.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Adapter contract for `EventEditor`, `EventView` and their child components.
+ *
+ * The package never reaches into atproto/session/navigation directly. Consumers
+ * implement this interface (typically with their own atcute client + router)
+ * and pass it in as a prop. The atmo app provides `createInAppAdapter`; other
+ * hosts (e.g. blento) provide their own.
+ */
+export type EditorBlobRef = {
+    $type: 'blob';
+    ref: {
+        $link: string;
+    };
+    mimeType: string;
+    size: number;
+};
+export type EditorViewer = {
+    isLoggedIn: boolean;
+    did: string | null;
+    handle?: string;
+    displayName?: string;
+    avatar?: string;
+};
+export type EditorAdapter = {
+    features: {
+        delete: boolean;
+        recurring: boolean;
+        privateMode: boolean;
+    };
+    putRecord(opts: {
+        collection: string;
+        rkey: string;
+        record: Record<string, unknown>;
+    }): Promise<{
+        uri: string;
+    }>;
+    createRecord(opts: {
+        collection: string;
+        rkey?: string;
+        record: Record<string, unknown>;
+    }): Promise<{
+        uri: string;
+        cid?: string;
+    }>;
+    deleteRecord(opts: {
+        collection: string;
+        rkey: string;
+    }): Promise<void>;
+    uploadBlob(blob: Blob): Promise<EditorBlobRef>;
+    getRecord(opts: {
+        did: string;
+        collection: string;
+        rkey: string;
+    }): Promise<{
+        value: Record<string, unknown>;
+    }>;
+    resolveHandle(handle: string): Promise<string>;
+    onSaved(result: {
+        uri: string;
+        rkey: string;
+        isNew: boolean;
+        spaceKey?: string;
+    }): void;
+    onDeleted?(): void;
+    requestLogin(): void;
+    notifyUpdate?(uri: string): Promise<void>;
+    createPrivateEvent?(opts: {
+        key: string;
+        record: Record<string, unknown>;
+    }): Promise<{
+        spaceUri: string;
+        rkey: string;
+        spaceKey: string;
+    }>;
+    /** Put a record inside a permissioned space. Required for RSVPs to private events. */
+    putSpaceRecord?(opts: {
+        spaceUri: string;
+        collection: string;
+        rkey: string;
+        record: Record<string, unknown>;
+    }): Promise<{
+        ok: boolean;
+    }>;
+    deleteSpaceRecord?(opts: {
+        spaceUri: string;
+        collection: string;
+        rkey: string;
+    }): Promise<void>;
+    /** Mint an invite token for a private space. */
+    createSpaceInvite?(opts: {
+        spaceUri: string;
+        kind: 'read-join' | 'join';
+        maxUses?: number;
+        expiresAt?: number;
+    }): Promise<{
+        token: string;
+    }>;
+};

package/dist/editor/adapter.js

@@ -0,0 +1,9 @@
+/**
+ * Adapter contract for `EventEditor`, `EventView` and their child components.
+ *
+ * The package never reaches into atproto/session/navigation directly. Consumers
+ * implement this interface (typically with their own atcute client + router)
+ * and pass it in as a prop. The atmo app provides `createInAppAdapter`; other
+ * hosts (e.g. blento) provide their own.
+ */
+export {};

package/dist/editor/save.d.ts

@@ -0,0 +1,42 @@
+import { type Token } from '@atcute/bluesky-richtext-parser';
+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<Record<string, unknown>[]>;
+/** 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/editor/save.js

@@ -0,0 +1,154 @@
+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';
+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;
+    }
+    if (!thumbnailFile) {
+        const remaining = existingMedia.filter((m) => m.role !== 'thumbnail');
+        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 !== 'thumbnail'),
+        {
+            role: 'thumbnail',
+            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;
+    if (links.length > 0)
+        record.uris = links;
+    if (isNew || locationChanged) {
+        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;
+    }
+    const existingPrefs = (record.preferences ??
+        {});
+    record.preferences = {
+        ...existingPrefs,
+        showInDiscovery: visibility !== 'unlisted'
+    };
+    return record;
+}

package/dist/editor/types.d.ts

@@ -0,0 +1,39 @@
+export type EventMode = 'inperson' | 'virtual' | 'hybrid';
+export type Visibility = 'public' | 'private' | '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/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(', ');
+}