@atmo-dev/kit 0.3.0 → 0.5.0

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

package/dist/events/editor/LinkedRecordsPicker.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import { Button, Icon, Popover, GrainAlbumPicker, StreamplacePicker } from '../../index.js';
+	import { Camera, Plus, Video } from '@sketchyicons/svelte';
+	import type { GrainAlbum } from '../../grain.js';
+	import type { EditorAdapter, EditorViewer } from './adapter.js';
+	import { eventStreamLink, parseGrainLink } from '../linked-records.js';
+
+	let {
+		links = $bindable(),
+		adapter,
+		viewer
+	}: {
+		links: Array<{ uri: string; name: string }>;
+		adapter: EditorAdapter;
+		viewer: EditorViewer;
+	} = $props();
+	let menuOpen = $state(false);
+	let grainOpen = $state(false);
+	let streamOpen = $state(false);
+	let session = 0;
+	let stream = $derived(links.find((link) => eventStreamLink(link.uri)));
+	function added(album: GrainAlbum) {
+		return links.some((link) => {
+			const ref = parseGrainLink(link.uri);
+			return (
+				ref?.atUri === album.uri ||
+				(ref?.actor === viewer.handle &&
+					album.creator.did === viewer.did &&
+					ref?.rkey === parseGrainLink(album.uri)?.rkey)
+			);
+		});
+	}
+	async function attachAlbum(album: GrainAlbum) {
+		const current = session;
+		for (const link of links) {
+			const ref = parseGrainLink(link.uri);
+			if (!ref) continue;
+			if (ref.atUri === album.uri) return 'This album is already added.';
+			if (ref.rkey === parseGrainLink(album.uri)?.rkey && !ref.actor.startsWith('did:')) {
+				try {
+					if (
+						`at://${await adapter.resolveHandle(ref.actor)}/social.grain.gallery/${ref.rkey}` ===
+						album.uri
+					)
+						return 'This album is already added.';
+				} catch {
+					/* An unrelated legacy link must not prevent attaching another album. */
+				}
+			}
+		}
+		if (current !== session || !grainOpen) return;
+		links = [...links, { uri: album.url, name: album.title }];
+	}
+</script>
+
+<Popover
+	bind:open={menuOpen}
+	side="bottom"
+	sideOffset={8}
+	class="w-56 p-1"
+	aria-label="Add linked record"
+>
+	{#snippet trigger({ props })}<Button {...props} size="sm"
+			><Icon img={Plus} size={16} />Add linked record</Button
+		>{/snippet}
+	<Button
+		variant="ghost"
+		class="w-full justify-start"
+		onclick={() => {
+			session++;
+			menuOpen = false;
+			grainOpen = true;
+		}}><Icon img={Camera} size={16} />Grain.social album</Button
+	>
+	<Button
+		variant="ghost"
+		class="w-full justify-start"
+		onclick={() => {
+			menuOpen = false;
+			streamOpen = true;
+		}}><Icon img={Video} size={16} />Streamplace stream</Button
+	>
+</Popover>
+
+<GrainAlbumPicker
+	bind:open={grainOpen}
+	actor={viewer.did}
+	listAlbums={adapter.linkedRecords?.listGrainAlbums}
+	loadAlbum={adapter.linkedRecords?.getGrainGallery}
+	isSelected={added}
+	onselect={attachAlbum}
+/>
+<StreamplacePicker
+	bind:open={streamOpen}
+	actor={viewer.handle && viewer.handle !== 'handle.invalid' ? viewer.handle : viewer.did}
+	replacing={!!stream}
+	resolveHandle={adapter.resolveHandle}
+	onselect={(selected) => {
+		links = [
+			...links.filter((link) => !eventStreamLink(link.uri)),
+			{ uri: selected.url, name: `Streamplace · ${selected.actor}` }
+		];
+	}}
+/>

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

@@ -0,0 +1,12 @@
+import type { EditorAdapter, EditorViewer } from './adapter.js';
+type $$ComponentProps = {
+    links: Array<{
+        uri: string;
+        name: string;
+    }>;
+    adapter: EditorAdapter;
+    viewer: EditorViewer;
+};
+declare const LinkedRecordsPicker: import("svelte").Component<$$ComponentProps, {}, "links">;
+type LinkedRecordsPicker = ReturnType<typeof LinkedRecordsPicker>;
+export default LinkedRecordsPicker;

package/dist/events/editor/LinksSection.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import { Camera, Link as LinkIcon, Plus, Video, X } from '@sketchyicons/svelte';
+	import { Button, Icon, Input, Popover } from '../../index.js';
+	import { validateLink } from '../cal/helper.js';
+	import { eventStreamLink, isLinkedRecord, parseGrainLink } from '../linked-records.js';
+	import type { EditorAdapter, EditorViewer } from './adapter.js';
+	import LinkedRecordsPicker from './LinkedRecordsPicker.svelte';
+
+	type Link = { uri: string; name: string };
+	let {
+		links = $bindable(),
+		adapter,
+		viewer
+	}: { links: Link[]; adapter: EditorAdapter; viewer: EditorViewer } = $props();
+	let showPopup = $state(false);
+	let newUri = $state('');
+	let newName = $state('');
+	let error = $state('');
+	let ordinary = $derived(links.filter((l) => !isLinkedRecord(l)));
+	let linked = $derived(links.filter(isLinkedRecord));
+
+	function addLink() {
+		const raw = newUri.trim();
+		if (!raw) return;
+		const uri = validateLink(raw);
+		if (!uri) {
+			error = 'Please enter a valid URL';
+			return;
+		}
+		if (links.some((link) => link.uri === uri)) {
+			error = 'This link is already added.';
+			return;
+		}
+		const grain = parseGrainLink(uri),
+			stream = eventStreamLink(uri);
+		// Keep one stream even when it was added through the generic URL input.
+		if (stream && links.some((l) => eventStreamLink(l.uri))) {
+			error = 'Use the Streamplace picker to replace the current stream.';
+			return;
+		}
+		links = [
+			...links,
+			{
+				uri,
+				name:
+					newName.trim() ||
+					(grain ? 'Grain photo album' : stream ? `Streamplace · ${stream.actor}` : '')
+			}
+		];
+		cancel();
+	}
+	function removeLink(link: Link) {
+		links = links.filter((l) => l !== link);
+	}
+	function cancel() {
+		showPopup = false;
+		error = '';
+		newUri = '';
+		newName = '';
+	}
+</script>
+
+{#snippet row(link: Link, provider?: 'grain' | 'stream')}
+	<div class="group flex items-center gap-2">
+		<Icon
+			img={provider === 'grain' ? Camera : provider === 'stream' ? Video : LinkIcon}
+			size={16}
+			class="shrink-0 text-muted"
+		/>
+		<div class="min-w-0 flex-1">
+			<p class="truncate text-sm">
+				{link.name ||
+					(provider === 'grain'
+						? 'Grain photo album'
+						: provider === 'stream'
+							? eventStreamLink(link.uri)?.actor
+							: link.uri.replace(/^https?:\/\//, ''))}
+			</p>
+		</div>
+		<Button
+			variant="ghost"
+			size="icon"
+			onclick={() => removeLink(link)}
+			aria-label={`Remove ${link.name || link.uri}`}
+			class="shrink-0"><Icon img={X} size={14} /></Button
+		>
+	</div>
+{/snippet}
+
+<div>
+	{#if ordinary.length}
+		<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Links</p>
+		<div class="mb-4 space-y-3">
+			{#each ordinary as link, i (i)}{@render row(link)}{/each}
+		</div>
+	{/if}
+	{#if linked.length}
+		<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Linked records</p>
+		<div class="mb-4 space-y-3">
+			{#each linked as link, i (i)}{@render row(
+					link,
+					parseGrainLink(link.uri) ? 'grain' : 'stream'
+				)}{/each}
+		</div>
+	{/if}
+	<div class="flex flex-wrap gap-2">
+		<Popover
+			bind:open={showPopup}
+			side="bottom"
+			sideOffset={8}
+			class="w-64 p-3"
+			aria-label="Add event link"
+		>
+			{#snippet trigger({ props })}<Button {...props} size="sm"
+					><Icon img={Plus} size={16} />Add link</Button
+				>{/snippet}
+			<Input
+				type="url"
+				bind:value={newUri}
+				placeholder="https://..."
+				aria-label="Link URL"
+				class="mb-2"
+				onkeydown={(e) => {
+					if (e.key === 'Enter') {
+						e.preventDefault();
+						addLink();
+					}
+				}}
+			/>
+			<Input
+				type="text"
+				bind:value={newName}
+				placeholder="Label (optional)"
+				aria-label="Link label"
+				class="mb-2"
+				onkeydown={(e) => {
+					if (e.key === 'Enter') {
+						e.preventDefault();
+						addLink();
+					}
+				}}
+			/>
+			{#if error}<p class="mb-2 text-xs text-red-500" role="alert">{error}</p>{/if}
+			<div class="flex justify-end gap-2">
+				<Button variant="ghost" size="sm" onclick={cancel}>Cancel</Button><Button
+					onclick={addLink}
+					size="sm"
+					disabled={!newUri.trim()}>Add</Button
+				>
+			</div>
+		</Popover>
+		<LinkedRecordsPicker bind:links {adapter} {viewer} />
+	</div>
+</div>

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

@@ -0,0 +1,13 @@
+import type { EditorAdapter, EditorViewer } from './adapter.js';
+type Link = {
+    uri: string;
+    name: string;
+};
+type $$ComponentProps = {
+    links: Link[];
+    adapter: EditorAdapter;
+    viewer: EditorViewer;
+};
+declare const LinksSection: import("svelte").Component<$$ComponentProps, {}, "links">;
+type LinksSection = ReturnType<typeof LinksSection>;
+export default LinksSection;

package/dist/events/editor/LocationSection.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+	import { MapPin, X } from '@sketchyicons/svelte';
+	import { Button, Icon, Input, Modal } from '../../index.js';
+	import { getLocationDisplayString, type EventLocation } from './types';
+
+	let {
+		location = $bindable(),
+		locationChanged = $bindable()
+	}: {
+		location: EventLocation | null;
+		locationChanged: boolean;
+	} = $props();
+
+	let showModal = $state(false);
+	let searchText = $state('');
+	let searching = $state(false);
+	let error = $state('');
+	let result: { displayName: string; location: EventLocation } | null = $state(null);
+
+	async function search() {
+		const q = searchText.trim();
+		if (!q) return;
+		error = '';
+		searching = true;
+		result = null;
+
+		try {
+			const response = await fetch('/api/geocoding?q=' + encodeURIComponent(q));
+			if (!response.ok) throw new Error('response not ok');
+			const data: Record<string, unknown> = await response.json();
+			if (!data || data.error) throw new Error('no results');
+
+			const addr = (data.address || {}) as Record<string, string>;
+			const road = addr.road || '';
+			const houseNumber = addr.house_number || '';
+			const street = road ? (houseNumber ? `${road} ${houseNumber}` : road) : '';
+			const locality =
+				addr.city || addr.town || addr.village || addr.municipality || addr.hamlet || '';
+			const region = addr.state || addr.county || '';
+			const country = addr.country_code || addr.country || '';
+
+			result = {
+				displayName: (data.label as string) || q,
+				location: {
+					...(street && { street }),
+					...(locality && { locality }),
+					...(region && { region }),
+					...(country && { country })
+				}
+			};
+		} catch {
+			error = "Couldn't find that location.";
+		} finally {
+			searching = false;
+		}
+	}
+
+	function confirm() {
+		if (result) {
+			location = result.location;
+			locationChanged = true;
+		}
+		showModal = false;
+		searchText = '';
+		result = null;
+		error = '';
+	}
+
+	function remove() {
+		location = null;
+		locationChanged = true;
+	}
+</script>
+
+{#if location}
+	<div class="mb-6 flex items-center gap-4">
+		<div
+			class="flex size-12 shrink-0 items-center justify-center rounded-xl border border-base-200 bg-base-100 dark:border-base-700 dark:bg-base-950/30"
+		>
+			<Icon img={MapPin} size={20} class="text-base-900 dark:text-base-200" />
+		</div>
+		<p class="flex-1 font-semibold text-base-900 dark:text-base-50">
+			{getLocationDisplayString(location)}
+		</p>
+		<Button
+			variant="ghost"
+			size="icon"
+			aria-label="Remove location"
+			onclick={remove}
+			class="shrink-0"
+		>
+			<Icon img={X} size={14} />
+		</Button>
+	</div>
+{:else}
+	<div class="mb-6">
+		<Button variant="secondary" onclick={() => (showModal = true)}>
+			<Icon img={MapPin} size={16} />
+			Add location
+		</Button>
+	</div>
+{/if}
+
+<Modal bind:open={showModal} title="Event location">
+	<form
+		onsubmit={(e) => {
+			e.preventDefault();
+			search();
+		}}
+		class="mt-2"
+	>
+		<div class="flex gap-2">
+			<Input
+				type="text"
+				aria-label="Search location"
+				class="min-w-0 flex-1"
+				bind:value={searchText}
+			/>
+			<Button type="submit" disabled={searching || !searchText.trim()}>
+				{searching ? 'Searching...' : 'Search'}
+			</Button>
+		</div>
+	</form>
+
+	{#if error}
+		<p class="mt-3 text-sm text-red-600 dark:text-red-400">{error}</p>
+	{/if}
+
+	{#if result}
+		<div
+			class="mt-4 overflow-hidden rounded-xl border border-base-200 bg-base-50 p-4 dark:border-base-700 dark:bg-base-900"
+		>
+			<div class="flex items-start gap-3">
+				<Icon img={MapPin} size={20} class="mt-0.5 shrink-0 text-base-500" />
+				<div class="min-w-0 flex-1">
+					<p class="font-medium text-base-900 dark:text-base-50">
+						{getLocationDisplayString(result.location)}
+					</p>
+					<p class="mt-0.5 truncate text-xs text-muted">
+						{result.displayName}
+					</p>
+				</div>
+			</div>
+			<div class="mt-4 flex justify-end">
+				<Button onclick={confirm}>Use this location</Button>
+			</div>
+		</div>
+	{/if}
+
+	<p class="mt-4 text-xs text-base-400 dark:text-base-500">
+		Geocoding by <a
+			href="https://nominatim.openstreetmap.org/"
+			class="underline hover:text-base-600 dark:hover:text-base-400"
+			target="_blank">Nominatim</a
+		>
+		/ &copy;
+		<a
+			href="https://www.openstreetmap.org/copyright"
+			class="underline hover:text-base-600 dark:hover:text-base-400"
+			target="_blank">OpenStreetMap contributors</a
+		>
+	</p>
+</Modal>

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

@@ -0,0 +1,8 @@
+import { type EventLocation } from './types';
+type $$ComponentProps = {
+    location: EventLocation | null;
+    locationChanged: boolean;
+};
+declare const LocationSection: import("svelte").Component<$$ComponentProps, {}, "location" | "locationChanged">;
+type LocationSection = ReturnType<typeof LocationSection>;
+export default LocationSection;