@atmo-dev/kit 0.3.0 → 0.5.0

package/dist/events/editor/RecurringModal.svelte

@@ -0,0 +1,313 @@
+<script lang="ts">
+	import { Button, Checkbox, Input, Modal, ToggleGroup, ToggleGroupItem } from '../../index.js';
+	import { parseDateTime } from '@internationalized/date';
+	import * as TID from '@atcute/tid';
+	import type { FlatEventRecord } from '../contrail.js';
+	import type { EventLocation, EventMode } from './types';
+	import { LocationValidationError, normalizeAddressLocation } from './location';
+	import { buildThumbnailMedia, renderPresetThumbnail } from './save';
+	import { hashSeed } from '../thumbnails/designs.js';
+	import type { EditorAdapter, EditorViewer } from './adapter';
+
+	let {
+		open = $bindable(),
+		rkey,
+		eventData,
+		isNew,
+		name,
+		startsAt,
+		endsAt,
+		mode,
+		timezone,
+		description,
+		links,
+		location,
+		thumbnailDateStr,
+		thumbnailFile,
+		thumbnailChanged,
+		selectedPreset,
+		accent,
+		adapter,
+		viewer
+	}: {
+		open: boolean;
+		rkey: string;
+		eventData: FlatEventRecord | null;
+		isNew: boolean;
+		name: string;
+		startsAt: string;
+		endsAt: string;
+		mode: EventMode;
+		timezone: string;
+		description: string;
+		links: Array<{ uri: string; name: string }>;
+		location: EventLocation | null;
+		thumbnailDateStr: string;
+		thumbnailFile: File | null;
+		thumbnailChanged: boolean;
+		selectedPreset: string | null;
+		accent: string;
+		adapter: EditorAdapter;
+		viewer: EditorViewer;
+	} = $props();
+
+	let interval = $state(1);
+	let unit: 'days' | 'weeks' | 'months' | 'years' = $state('weeks');
+	let count = $state(4);
+	let numberInTitle = $state(false);
+	let creating = $state(false);
+	let errorMsg: string | null = $state(null);
+	let created = $state(0);
+	let validRecurrence = $derived(
+		Number.isInteger(count) &&
+			count >= 1 &&
+			count <= 52 &&
+			Number.isInteger(interval) &&
+			interval >= 1 &&
+			interval <= 99
+	);
+
+	let titleNumberMatch = $derived(name.match(/#?(\d+)\s*$/));
+	let detectedStartNumber = $derived(titleNumberMatch ? parseInt(titleNumberMatch[1]) : null);
+
+	$effect(() => {
+		if (detectedStartNumber !== null) numberInTitle = true;
+	});
+
+	async function handleCreate() {
+		if (
+			creating ||
+			!validRecurrence ||
+			!name.trim() ||
+			!startsAt ||
+			!viewer.isLoggedIn ||
+			!viewer.did
+		)
+			return;
+		const copies = count;
+		const period = interval;
+
+		creating = true;
+		errorMsg = null;
+		created = 0;
+
+		try {
+			const normalizedLocation = location ? normalizeAddressLocation(location) : null;
+			// Recurring instances advance by wall-clock duration (e.g. "every week
+			// at 10am"), so operate on CalendarDateTime — not absolute instants —
+			// to preserve the wall time across DST transitions.
+			const baseStart = parseDateTime(startsAt);
+			const baseEnd = endsAt ? parseDateTime(endsAt) : null;
+			const durationMs = baseEnd
+				? baseEnd.toDate(timezone).getTime() - baseStart.toDate(timezone).getTime()
+				: 0;
+			const baseName =
+				numberInTitle && titleNumberMatch ? name.replace(/#?\d+\s*$/, '').trimEnd() : name.trim();
+			const startNum = detectedStartNumber ?? 1;
+			const hasHash = titleNumberMatch ? titleNumberMatch[0].includes('#') : false;
+
+			// Generate thumbnail from preset if selected and no custom upload.
+			let fileForUpload = thumbnailFile;
+			let hasNewThumbnail = thumbnailChanged;
+			if (selectedPreset && !fileForUpload) {
+				const rendered = await renderPresetThumbnail({
+					design: selectedPreset,
+					seed: hashSeed(rkey),
+					name,
+					dateStr: thumbnailDateStr,
+					accent
+				});
+				if (rendered) {
+					fileForUpload = rendered;
+					hasNewThumbnail = true;
+				}
+			}
+
+			const existingMedia = (eventData?.media ?? []) as Array<Record<string, unknown>>;
+			const media = await buildThumbnailMedia({
+				isNew,
+				thumbnailChanged: hasNewThumbnail,
+				thumbnailFile: fileForUpload,
+				existingMedia,
+				uploadBlob: (blob) =>
+					adapter.uploadBlob(blob) as unknown as Promise<Record<string, unknown>>
+			});
+
+			const parentUri = `at://${viewer.did}/community.lexicon.calendar.event/${rkey}`;
+
+			for (let i = 0; i < copies; i++) {
+				const offset = i + 1;
+				const step = offset * period;
+				const eventStart =
+					unit === 'days'
+						? baseStart.add({ days: step })
+						: unit === 'weeks'
+							? baseStart.add({ weeks: step })
+							: unit === 'months'
+								? baseStart.add({ months: step })
+								: baseStart.add({ years: step });
+
+				const eventStartIso = eventStart.toDate(timezone).toISOString();
+				// Preserve the original absolute duration (handles events that
+				// span midnight or odd wall-clock lengths correctly).
+				const eventEndIso = durationMs
+					? new Date(eventStart.toDate(timezone).getTime() + durationMs).toISOString()
+					: null;
+
+				let eventName = baseName;
+				if (numberInTitle) {
+					const num = startNum + (i + 1);
+					eventName = hasHash ? `${baseName} #${num}` : `${baseName} ${num}`;
+				}
+
+				const newRkey = TID.now();
+				const record: Record<string, unknown> = {
+					$type: 'community.lexicon.calendar.event',
+					createdWith: 'https://atmo.rsvp',
+					name: eventName,
+					mode: `community.lexicon.calendar.event#${mode}`,
+					status: 'community.lexicon.calendar.event#scheduled',
+					startsAt: eventStartIso,
+					timezone,
+					createdAt: new Date().toISOString(),
+					recurringEventOf: parentUri
+				};
+
+				const trimmedDescription = description.trim();
+				if (trimmedDescription) record.description = trimmedDescription;
+				if (eventEndIso) record.endsAt = eventEndIso;
+				if (media) record.media = media;
+				if (links.length > 0) record.uris = links;
+				if (normalizedLocation) {
+					record.locations = [
+						{
+							$type: 'community.lexicon.location.address',
+							...normalizedLocation
+						}
+					];
+				}
+
+				try {
+					const result = await adapter.putRecord({
+						collection: 'community.lexicon.calendar.event',
+						rkey: newRkey,
+						record
+					});
+					await adapter.notifyUpdate?.(result.uri);
+					created = i + 1;
+				} catch {
+					errorMsg = `Failed to create event ${i + 1}. Stopping.`;
+					return;
+				}
+			}
+
+			open = false;
+		} catch (e) {
+			console.error('Failed to create recurring events:', e);
+			errorMsg =
+				e instanceof LocationValidationError
+					? e.message
+					: 'Failed to create recurring events. Please try again.';
+		} finally {
+			creating = false;
+		}
+	}
+</script>
+
+<Modal bind:open title="Recurring events" dismissible={!creating}>
+	<p class="mt-1 text-sm text-muted">Create multiple copies of this event at regular intervals.</p>
+
+	<div class="mt-4 space-y-4">
+		<div>
+			<!-- svelte-ignore a11y_label_has_associated_control -->
+			<label class="mb-1 block text-sm font-medium text-base-700 dark:text-base-300">
+				Number of events to create
+			</label>
+			<Input
+				type="number"
+				aria-label="Number of events to create"
+				bind:value={count}
+				disabled={creating}
+				min={1}
+				max={52}
+				class="w-24"
+			/>
+		</div>
+
+		<div>
+			<!-- svelte-ignore a11y_label_has_associated_control -->
+			<label class="mb-1 block text-sm font-medium text-base-700 dark:text-base-300">
+				Repeat every
+			</label>
+			<div class="flex items-center gap-2">
+				<Input
+					type="number"
+					aria-label="Repeat interval"
+					bind:value={interval}
+					disabled={creating}
+					min={1}
+					max={99}
+					class="w-20"
+				/>
+				<ToggleGroup
+					type="single"
+					disabled={creating}
+					bind:value={
+						() => unit,
+						(value) => {
+							if (value) unit = value as typeof unit;
+						}
+					}
+				>
+					<ToggleGroupItem value="days">days</ToggleGroupItem>
+					<ToggleGroupItem value="weeks">weeks</ToggleGroupItem>
+					<ToggleGroupItem value="months">months</ToggleGroupItem>
+					<ToggleGroupItem value="years">years</ToggleGroupItem>
+				</ToggleGroup>
+			</div>
+		</div>
+
+		<div>
+			<div class="flex items-center gap-2">
+				<Checkbox bind:checked={numberInTitle} disabled={creating} aria-label="Number in title" />
+				<span class="text-sm font-medium text-base-700 dark:text-base-300">Number in title</span>
+			</div>
+			<p class="mt-1 text-xs text-muted">
+				{#if numberInTitle && detectedStartNumber !== null}
+					Titles will count up from #{detectedStartNumber + 1}
+				{:else if numberInTitle}
+					A number will be appended to each title
+				{:else}
+					Append a number to each event title
+				{/if}
+			</p>
+		</div>
+	</div>
+
+	{#if errorMsg}
+		<p role="alert" class="mt-4 text-sm text-red-600 dark:text-red-400">{errorMsg}</p>
+	{/if}
+
+	{#if creating && created > 0}
+		<p class="mt-4 text-sm text-muted">
+			Created {created} of {count} events...
+		</p>
+	{/if}
+
+	{#if created > 0 && !creating}
+		<p class="mt-4 text-sm text-action">
+			Successfully created {created} recurring events!
+		</p>
+	{/if}
+
+	<div class="mt-4 flex justify-end gap-2">
+		<Button variant="secondary" onclick={() => (open = false)} disabled={creating}>
+			{created > 0 && !creating ? 'Close' : 'Cancel'}
+		</Button>
+		{#if !created || creating}
+			<Button onclick={handleCreate} disabled={creating || !validRecurrence}>
+				{creating ? `Creating...` : `Create ${count} event${count === 1 ? '' : 's'}`}
+			</Button>
+		{/if}
+	</div>
+</Modal>

package/dist/events/editor/RecurringModal.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { FlatEventRecord } from '../contrail.js';
+import type { EventLocation, EventMode } from './types';
+import type { EditorAdapter, EditorViewer } from './adapter';
+type $$ComponentProps = {
+    open: boolean;
+    rkey: string;
+    eventData: FlatEventRecord | null;
+    isNew: boolean;
+    name: string;
+    startsAt: string;
+    endsAt: string;
+    mode: EventMode;
+    timezone: string;
+    description: string;
+    links: Array<{
+        uri: string;
+        name: string;
+    }>;
+    location: EventLocation | null;
+    thumbnailDateStr: string;
+    thumbnailFile: File | null;
+    thumbnailChanged: boolean;
+    selectedPreset: string | null;
+    accent: string;
+    adapter: EditorAdapter;
+    viewer: EditorViewer;
+};
+declare const RecurringModal: import("svelte").Component<$$ComponentProps, {}, "open">;
+type RecurringModal = ReturnType<typeof RecurringModal>;
+export default RecurringModal;

package/dist/events/editor/ThemeSection.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Palette } from '@sketchyicons/svelte';
+	import { Button, Icon, Modal } from '../../index.js';
+	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="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Theme</p>
+	<Button variant="secondary" size="sm" onclick={() => (showModal = true)}>
+		<Icon img={Palette} size={16} />
+		{themeBackgrounds[theme.name] || theme.name}
+	</Button>
+</div>
+
+<Modal bind:open={showModal} title="Event theme">
+	<div class="mt-4">
+		<ThemePicker bind:theme />
+	</div>
+</Modal>

package/dist/events/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/events/editor/ThumbnailSection.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import { Image, Upload, X } from '@sketchyicons/svelte';
+	import { Button, Icon, Modal, InsetImage } from '../../index.js';
+	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}
+			<InsetImage src={thumbnailPreview} alt="Thumbnail preview" class="w-full rounded-panel" />
+		{:else if selectedPreset && designs[selectedPreset]}
+			<div
+				class="aspect-square w-full overflow-hidden rounded-2xl border border-base-200 dark:border-base-800"
+			>
+				<canvas bind:this={presetPreviewCanvas} class="h-full w-full"></canvas>
+			</div>
+		{:else}
+			<div
+				class="aspect-square w-full overflow-hidden rounded-2xl bg-base-100 dark:bg-base-900 [&>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'
+				: ''}"
+		>
+			<Icon img={Image} size={24} />
+			<span class="text-sm font-medium">Change thumbnail</span>
+		</button>
+		{#if thumbnailPreview || selectedPreset}
+			<Button
+				variant="ghost"
+				size="icon"
+				aria-label="Remove thumbnail"
+				onclick={removeThumbnail}
+				class="absolute top-2 right-2 bg-base-900/70 text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-red-600 focus-visible:opacity-100"
+			>
+				<Icon img={X} size={14} />
+			</Button>
+		{/if}
+	</div>
+</div>
+
+<Modal bind:open={showModal} title="Choose thumbnail">
+	<div class="mt-4 flex max-h-[70vh] flex-col gap-6 overflow-y-auto">
+		<Button variant="secondary" class="w-full" onclick={() => fileInput?.click()}>
+			<Icon img={Upload} size={16} />
+			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/events/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/events/editor/adapter.d.ts

@@ -0,0 +1,73 @@
+/**
+ * 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.
+ */
+import type { PreferredSocialClient } from '../../social.js';
+import type { LinkedRecordsClient } from '../linked-records.js';
+export type EditorBlobRef = {
+    $type: 'blob';
+    ref: {
+        $link: string;
+    };
+    mimeType: string;
+    size: number;
+};
+export type EditorViewer = {
+    isLoggedIn: boolean;
+    /** Explicit capability from the host's token grant; absent means denied. */
+    canPostToBluesky?: boolean;
+    /** The viewer's public social-client selection; absent defaults to Bluesky. */
+    preferredSocialClient?: PreferredSocialClient | null;
+    did: string | null;
+    handle?: string;
+    displayName?: string;
+    avatar?: string;
+};
+export type EditorAdapter = {
+    /** Optional public read transport, supplied by the host (also used in embeds). */
+    linkedRecords?: LinkedRecordsClient;
+    features: {
+        delete: boolean;
+        recurring: 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;
+    }): void;
+    onDeleted?(): void;
+    requestLogin(): void;
+    notifyUpdate?(uri: string): Promise<void>;
+};

package/dist/events/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/events/editor/location.d.ts

@@ -0,0 +1,16 @@
+import type { EventData } from '../event-types.js';
+export declare function normalizeCountryCode(value: unknown): string | undefined;
+export declare class LocationValidationError extends Error {
+    constructor();
+}
+export declare function normalizeAddressLocation<T extends {
+    country?: unknown;
+}>(location: T): T & {
+    country: string;
+};
+export declare function normalizeEventLocations(locations: NonNullable<EventData['locations']>): (import("../event-types.js").EventLocationVariant | ({
+    country: unknown;
+    $type: string;
+} & {
+    country: string;
+}))[];