@atmo-dev/kit 0.4.0 → 0.5.0

package/README.md

@@ -9,6 +9,41 @@ Svelte 5 and Tailwind CSS 4 components for Atmo apps.
 - Releases: `pnpm changeset`, then merge the generated release PR. [Details](.changeset/README.md).
 - License: [MIT](LICENSE).
 
+## Events
+
+The event UI formerly in `@atmo-dev/events-ui` lives in this package:
+
+```svelte
+<script lang="ts">
+	import { EventEditor, EventView, EventCard } from '@atmo-dev/kit/events';
+	import type { EditorAdapter, EditorViewer } from '@atmo-dev/kit/events-data';
+
+	let { adapter, viewer, event, data, pageUrl } = $props();
+</script>
+
+<EventCard {event} />
+<EventEditor {adapter} {viewer} eventData={event} actorDid={event.did} rkey={event.rkey} />
+<EventView {adapter} {viewer} {data} {pageUrl} />
+```
+
+- `@atmo-dev/kit/events`: event cards, views, editor, RSVP/attendee/comment UI, starter-pack actions, conference timetable, VOD player/transcript and date/time/image controls. Event backgrounds and editor sections stay internal.
+- `@atmo-dev/kit/events-data`: structural event types, adapter contracts, conference/date helpers, URL helpers, theme values, linked-record types and thumbnail selection. This entry is safe in plain Node and server routes: no Svelte, CSS, maps or players are loaded. Browser helpers such as `compressImage` only access browser APIs when called.
+- `@atmo-dev/kit/events/editor`: `buildEventRecord` and `buildThumbnailMedia` for hosts that need explicit record construction. This separate entry includes browser-oriented thumbnail code; it is not part of the pure data API.
+
+Apps implement `EditorAdapter` for authentication prompts, repository IO, uploads, save/delete navigation, and optional linked-record transport/indexing notifications. Keep sessions, Cloudflare bindings, app routes, server endpoints, caching and moderation in the app. The editor/view never imports a consumer's app state. Existing `EventView` page-data shape and RSVP behavior are preserved in this migration.
+
+Full event UI requires optional peers (ordinary Kit consumers do not):
+
+```sh
+pnpm add maplibre-gl@^6.16.0 svelte-maplibre-gl@^2.2.1 plyr@^3.8.5
+```
+
+Import `theme.css` as above; it scans the packaged event components too, so no separate Tailwind source path is needed. Event exports are intentionally absent from the main Kit entry.
+
+The initial move preserves legacy defaults: `/p/:actor/e/:rkey` event and `/p/:actor` profile links, `/api/geocoding`, Bluesky's public comments API, the `?created` share flow and RSVP's `createdWith` identifier. Hosts currently need compatible routes/endpoints; `shareUrlOverride` changes outbound share links. These defaults are not a new universal routing contract. Further host-policy extraction can happen independently of the package move.
+
+Event browser tests are in `src/tests/events`; run `pnpm test:unit --run --project events`. `pnpm test:package` checks the actual built server entry and its runtime import graph without Vite aliases.
+
 ## Photos, Grain albums and Streamplace
 
 `PhotoGrid` and `PhotoLightbox` work with provider-neutral `Photo[]` data (`src`, optional `thumbnail`, `alt`, dimensions and `contentWarning`). The grid preserves natural image proportions in responsive masonry columns, with a subtle 2% hover zoom disabled for reduced motion. It gates warned images before mounting them and opens a borderless fullscreen viewer. The viewer has a dimmed backdrop, previous/next arrows, close and a small photo-position counter; native horizontal scrolling with CSS scroll snap makes photos follow your finger or trackpad, with inertia rather than switching only on release. Mouse/pen drags also move the track directly. Swipes loop like the arrows; vertical pans do not navigate and controls are separate from the drag surface. Native pinch zoom, arrow keys, Escape, focus trapping and restoration are preserved; release animations respect reduced motion. `PhotoLightbox` also works independently with `bind:open` and `bind:index`; callers using it directly must first filter or reveal any warned photos. Apps own URL validation and moderation policy.

package/dist/events/DatePicker.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+	// @ts-nocheck
+	import { DatePicker } from 'bits-ui';
+	import { CalendarDate, type DateValue } from '@internationalized/date';
+	import { untrack } from 'svelte';
+	import { Icon } from '../index.js';
+	import { ChevronLeft, ChevronRight } from '@sketchyicons/svelte';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		label = 'Date',
+		minValue = '',
+		locale = 'en',
+		onSelect
+	}: {
+		value: string;
+		required?: boolean;
+		label?: string;
+		minValue?: string;
+		locale?: string;
+		onSelect?: () => void;
+	} = $props();
+
+	let isOpen = $state(false);
+
+	const now = new Date();
+	const currentYear = now.getFullYear();
+	const yearRange = Array.from({ length: 7 }, (_, i) => currentYear - 1 + i);
+	const today = new Date();
+	const todayDay = today.getDate();
+	const todayMonth = today.getMonth() + 1;
+	const todayYear = today.getFullYear();
+
+	let internalValue: CalendarDate | undefined = $state(undefined);
+
+	function parseDateStr(str: string): CalendarDate | undefined {
+		if (!str) return undefined;
+		const [yearStr, monthStr, dayStr] = str.split('-');
+		const year = parseInt(yearStr, 10);
+		const month = parseInt(monthStr, 10);
+		const day = parseInt(dayStr, 10);
+		if (isNaN(year) || isNaN(month) || isNaN(day)) return undefined;
+		return new CalendarDate(year, month, day);
+	}
+
+	function formatDateStr(dt: CalendarDate): string {
+		const y = String(dt.year).padStart(4, '0');
+		const m = String(dt.month).padStart(2, '0');
+		const d = String(dt.day).padStart(2, '0');
+		return `${y}-${m}-${d}`;
+	}
+
+	let internalMinValue: CalendarDate | undefined = $derived.by(() => {
+		return parseDateStr(minValue);
+	});
+
+	$effect(() => {
+		const parsed = parseDateStr(value);
+		untrack(() => {
+			if (parsed) {
+				if (
+					!internalValue ||
+					parsed.year !== internalValue.year ||
+					parsed.month !== internalValue.month ||
+					parsed.day !== internalValue.day
+				) {
+					internalValue = parsed;
+					previousValue = parsed;
+				}
+			} else {
+				internalValue = undefined;
+			}
+		});
+	});
+
+	let previousValue: CalendarDate | undefined = $state(undefined);
+
+	function handleValueChange(newVal: DateValue | undefined) {
+		if (newVal && newVal instanceof CalendarDate) {
+			previousValue = newVal;
+			internalValue = newVal;
+			value = formatDateStr(newVal);
+		} else if (!newVal && previousValue) {
+			// Prevent deselection — restore previous value
+			internalValue = previousValue;
+		}
+	}
+
+	function handleOpenChangeComplete(open: boolean) {
+		if (!open && internalValue) {
+			onSelect?.();
+		}
+	}
+
+	function formatDisplayDate(compact: boolean) {
+		if (!internalValue) return '';
+		const date = new Date(internalValue.year, internalValue.month - 1, internalValue.day);
+		const opts: Intl.DateTimeFormatOptions = {
+			...(compact ? {} : { weekday: 'short' }),
+			month: 'short',
+			day: 'numeric'
+		};
+		if (internalValue.year !== currentYear) {
+			opts.year = 'numeric';
+		}
+		return date.toLocaleDateString(locale, opts);
+	}
+	let displayText = $derived(formatDisplayDate(false));
+	let compactText = $derived(formatDisplayDate(true));
+</script>
+
+<DatePicker.Root
+	bind:value={internalValue}
+	bind:open={isOpen}
+	onValueChange={handleValueChange}
+	onOpenChangeComplete={handleOpenChangeComplete}
+	minValue={internalMinValue}
+	granularity="day"
+	fixedWeeks={true}
+	weekdayFormat="short"
+	{locale}
+	{required}
+>
+	<DatePicker.Trigger
+		aria-label={`${label}: ${displayText || 'Select date'}`}
+		class="flex h-11 min-w-0 flex-1 cursor-pointer items-center rounded-ui border border-line bg-recess px-2 text-xs text-ink shadow-(--ui-recess-shadow) transition-colors hover:border-control-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus min-[360px]:px-3 min-[360px]:text-sm"
+	>
+		<span class="truncate select-none">
+			{#if displayText}
+				<span class="min-[360px]:hidden">{compactText}</span>
+				<span class="hidden min-[360px]:inline">{displayText}</span>
+			{:else}
+				<span class="text-base-400 dark:text-base-500">Select date</span>
+			{/if}
+		</span>
+	</DatePicker.Trigger>
+
+	<DatePicker.Content
+		sideOffset={8}
+		class="z-50 max-w-[calc(100vw-2rem)] rounded-panel border border-line bg-page p-3 text-ink"
+	>
+		<DatePicker.Calendar>
+			{#snippet children({ months, weekdays })}
+				<DatePicker.Header class="flex items-center justify-between">
+					<DatePicker.PrevButton
+						class="inline-flex size-8 items-center justify-center rounded-lg text-base-500 hover:bg-base-200 dark:text-base-400 dark:hover:bg-base-700"
+					>
+						<Icon img={ChevronLeft} size={20} />
+					</DatePicker.PrevButton>
+
+					<div class="flex items-center gap-1.5">
+						<DatePicker.MonthSelect
+							monthFormat="long"
+							class="cursor-pointer border-0 bg-transparent text-sm font-medium text-base-900 outline-none hover:text-accent-500 focus:ring-0 focus:outline-none dark:text-base-100 dark:hover:text-accent-400"
+						/>
+						<DatePicker.YearSelect
+							years={yearRange}
+							class="cursor-pointer border-0 bg-transparent text-sm font-medium text-base-900 outline-none hover:text-accent-500 focus:ring-0 focus:outline-none dark:text-base-100 dark:hover:text-accent-400"
+						/>
+					</div>
+
+					<DatePicker.NextButton
+						class="inline-flex size-8 items-center justify-center rounded-lg text-base-500 hover:bg-base-200 dark:text-base-400 dark:hover:bg-base-700"
+					>
+						<Icon img={ChevronRight} size={20} />
+					</DatePicker.NextButton>
+				</DatePicker.Header>
+
+				{#each months as month (month.value.month)}
+					<DatePicker.Grid class="mt-3 w-full">
+						<DatePicker.GridHead>
+							<DatePicker.GridRow class="flex w-full">
+								{#each weekdays as weekday, i (i)}
+									<DatePicker.HeadCell
+										class="flex-1 text-center text-xs font-medium text-base-400 dark:text-base-500"
+									>
+										{weekday}
+									</DatePicker.HeadCell>
+								{/each}
+							</DatePicker.GridRow>
+						</DatePicker.GridHead>
+
+						<DatePicker.GridBody>
+							{#each month.weeks as week, weekIndex (weekIndex)}
+								<DatePicker.GridRow class="flex w-full">
+									{#each week as day (day.toString())}
+										<DatePicker.Cell date={day} month={month.value} class="flex-1 p-0.5">
+											<DatePicker.Day>
+												{#snippet children({ selected, disabled, day: dayText })}
+													<div
+														class="relative flex size-9 items-center justify-center rounded-lg text-sm
+														{selected
+															? 'bg-accent-400 font-medium text-base-950'
+															: disabled
+																? 'pointer-events-none text-base-300 dark:text-base-600'
+																: day.month !== month.value.month
+																	? 'text-base-300 dark:text-base-600'
+																	: 'text-base-700 hover:bg-base-200 dark:text-base-300 dark:hover:bg-base-700'}"
+													>
+														{dayText}
+														{#if day.day === todayDay && day.month === todayMonth && day.year === todayYear}
+															<span
+																class="absolute bottom-1 left-1/2 size-1 -translate-x-1/2 rounded-full {selected
+																	? 'bg-base-950'
+																	: 'bg-accent-500'}"
+															></span>
+														{/if}
+													</div>
+												{/snippet}
+											</DatePicker.Day>
+										</DatePicker.Cell>
+									{/each}
+								</DatePicker.GridRow>
+							{/each}
+						</DatePicker.GridBody>
+					</DatePicker.Grid>
+				{/each}
+			{/snippet}
+		</DatePicker.Calendar>
+	</DatePicker.Content>
+</DatePicker.Root>

package/dist/events/DatePicker.svelte.d.ts

@@ -0,0 +1,12 @@
+import { DatePicker } from 'bits-ui';
+type $$ComponentProps = {
+    value: string;
+    required?: boolean;
+    label?: string;
+    minValue?: string;
+    locale?: string;
+    onSelect?: () => void;
+};
+declare const DatePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/events/DateTimePicker.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	// @ts-nocheck
+	import DatePickerField from './DatePicker.svelte';
+	import TimePicker from './TimePicker.svelte';
+	import { untrack } from 'svelte';
+	import { BROWSER as browser } from 'esm-env';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		label = '',
+		minValue = '',
+		referenceTime = ''
+	}: {
+		value: string;
+		required?: boolean;
+		label?: string;
+		minValue?: string;
+		referenceTime?: string;
+	} = $props();
+
+	let datePart = $state('');
+	let timePart = $state('00:00');
+	let timeEl: HTMLDivElement | undefined = $state(undefined);
+
+	const locale = browser ? navigator.language || 'en' : 'en';
+	let minDatePart = $derived(minValue ? minValue.split('T')[0] || '' : '');
+	let refTimePart = $derived.by(() => {
+		if (!referenceTime) return '';
+		const [refDate, refTime] = referenceTime.split('T');
+		if (refDate && refDate === datePart && refTime) return refTime;
+		return '';
+	});
+
+	// Default to current date/time rounded up to the next hour when no initial value
+	if (browser && !value) {
+		const now = new Date();
+		// Local calculation only, not component state.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const rounded = new Date(now);
+		rounded.setMinutes(0, 0, 0);
+		rounded.setHours(rounded.getHours() + 1);
+
+		const yyyy = rounded.getFullYear();
+		const mm = String(rounded.getMonth() + 1).padStart(2, '0');
+		const dd = String(rounded.getDate()).padStart(2, '0');
+		const hh = String(rounded.getHours()).padStart(2, '0');
+		const min = String(rounded.getMinutes()).padStart(2, '0');
+
+		const defaultDate = `${yyyy}-${mm}-${dd}`;
+		const defaultTime = `${hh}:${min}`;
+		datePart = defaultDate;
+		timePart = defaultTime;
+		value = `${defaultDate}T${defaultTime}`;
+	}
+
+	// Sync external value -> date/time parts
+	$effect(() => {
+		const v = value;
+		untrack(() => {
+			if (v) {
+				const [d, t] = v.split('T');
+				if (d && d !== datePart) datePart = d;
+				if (t && t !== timePart) timePart = t;
+			}
+		});
+	});
+
+	// Sync date/time parts -> external value
+	$effect(() => {
+		const d = datePart;
+		const t = timePart;
+		untrack(() => {
+			if (d) {
+				const newVal = `${d}T${t || '00:00'}`;
+				if (newVal !== value) value = newVal;
+			}
+		});
+	});
+
+	function focusTime() {
+		// Small delay to let the popover finish closing
+		setTimeout(() => {
+			if (timeEl) {
+				const segment = timeEl.querySelector('[data-segment]');
+				if (segment instanceof HTMLElement) {
+					segment.focus();
+				}
+			}
+		}, 50);
+	}
+</script>
+
+<div class="flex min-w-0 flex-1 items-center gap-2">
+	<DatePickerField
+		bind:value={datePart}
+		label={label ? `${label} date` : 'Date'}
+		{required}
+		minValue={minDatePart}
+		{locale}
+		onSelect={focusTime}
+	/>
+	<div bind:this={timeEl} class="shrink-0">
+		<TimePicker
+			bind:value={timePart}
+			label={label ? `${label} time` : 'Time'}
+			{required}
+			{locale}
+			referenceTime={refTimePart}
+		/>
+	</div>
+</div>

package/dist/events/DateTimePicker.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    value: string;
+    required?: boolean;
+    label?: string;
+    minValue?: string;
+    referenceTime?: string;
+};
+declare const DateTimePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DateTimePicker = ReturnType<typeof DateTimePicker>;
+export default DateTimePicker;

package/dist/events/EventAttendees.svelte

@@ -0,0 +1,199 @@
+<script lang="ts" module>
+	export interface AttendeeCounts {
+		goingCount: number;
+		interestedCount: number;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { AttendeeInfo } from './contrail.js';
+	import { Avatar } from '../index.js';
+	import { scale } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+	import { Modal } from '../index.js';
+
+	let {
+		going = [],
+		interested = [],
+		goingCount: initialGoingCount = going.length,
+		interestedCount: initialInterestedCount = interested.length,
+		footer
+	}: {
+		going?: AttendeeInfo[];
+		interested?: AttendeeInfo[];
+		goingCount?: number;
+		interestedCount?: number;
+		footer?: Snippet<[AttendeeCounts]>;
+	} = $props();
+
+	let goingCountOverride: number | null = $state(null);
+	let interestedCountOverride: number | null = $state(null);
+	let goingAttendeesOverride: AttendeeInfo[] | null = $state(null);
+	let interestedAttendeesOverride: AttendeeInfo[] | null = $state(null);
+
+	let modalOpen = $state(false);
+	let modalGroup: 'going' | 'interested' = $state('going');
+
+	const MAX_AVATARS = 18;
+
+	let goingCount = $derived(goingCountOverride ?? initialGoingCount);
+	let interestedCount = $derived(interestedCountOverride ?? initialInterestedCount);
+	let goingAttendees = $derived(goingAttendeesOverride ?? going);
+	let interestedAttendees = $derived(interestedAttendeesOverride ?? interested);
+
+	let totalCount = $derived(goingCount + interestedCount);
+
+	let goingDisplay = $derived(goingAttendees.slice(0, MAX_AVATARS));
+	let goingOverflow = $derived(goingCount - goingDisplay.length);
+
+	let interestedDisplay = $derived(interestedAttendees.slice(0, MAX_AVATARS));
+	let interestedOverflow = $derived(interestedCount - interestedDisplay.length);
+
+	let modalAttendees = $derived(modalGroup === 'going' ? goingAttendees : interestedAttendees);
+	let modalTitle = $derived(modalGroup === 'going' ? 'Going' : 'Interested');
+
+	function openModal(group: 'going' | 'interested') {
+		modalGroup = group;
+		modalOpen = true;
+	}
+
+	export function addAttendee(attendee: AttendeeInfo) {
+		const wasGoing = goingAttendees.some((a) => a.did === attendee.did);
+		const wasInterested = interestedAttendees.some((a) => a.did === attendee.did);
+		const nextGoing = goingAttendees.filter((a) => a.did !== attendee.did);
+		const nextInterested = interestedAttendees.filter((a) => a.did !== attendee.did);
+
+		// Remove from both lists first (in case of status change)
+		if (attendee.status === 'going') {
+			goingAttendeesOverride = [attendee, ...nextGoing];
+			interestedAttendeesOverride = nextInterested;
+			goingCountOverride = goingCount + (wasGoing ? 0 : 1);
+			interestedCountOverride = interestedCount - (wasInterested ? 1 : 0);
+		} else if (attendee.status === 'interested') {
+			goingAttendeesOverride = nextGoing;
+			interestedAttendeesOverride = [attendee, ...nextInterested];
+			goingCountOverride = goingCount - (wasGoing ? 1 : 0);
+			interestedCountOverride = interestedCount + (wasInterested ? 0 : 1);
+		}
+	}
+
+	function thumbnail(url: string | undefined) {
+		return url?.replace('/avatar/', '/avatar_thumbnail/');
+	}
+
+	export function removeAttendee(did: string) {
+		const wasGoing = goingAttendees.some((a) => a.did === did);
+		const wasInterested = interestedAttendees.some((a) => a.did === did);
+		goingAttendeesOverride = goingAttendees.filter((a) => a.did !== did);
+		interestedAttendeesOverride = interestedAttendees.filter((a) => a.did !== did);
+		if (wasGoing) goingCountOverride = goingCount - 1;
+		if (wasInterested) interestedCountOverride = interestedCount - 1;
+	}
+</script>
+
+{#if totalCount > 0}
+	<div class="mb-2">
+		{#if goingCount > 0}
+			<button
+				type="button"
+				class="-mx-2 block w-full cursor-pointer rounded-xl px-2 py-2 text-left transition-colors hover:bg-base-100 dark:hover:bg-base-800/50"
+				onclick={() => openModal('going')}
+			>
+				<p class="mb-2 text-sm text-base-900 dark:text-base-50">
+					<span class="font-bold">{goingCount}</span>
+					<span class="text-xs font-semibold tracking-wider text-muted uppercase">Going</span>
+				</p>
+				<div class="flex items-center">
+					<div class="flex flex-wrap -space-y-2 -space-x-4 pr-4">
+						{#each goingDisplay as person (person.did)}
+							<div
+								animate:flip={{ duration: 300 }}
+								in:scale={{ duration: 300, start: 0.5 }}
+								out:scale={{ duration: 200, start: 0.5 }}
+							>
+								<Avatar
+									src={thumbnail(person.avatar)}
+									name={person.name}
+									class="size-12 border-2"
+								/>
+							</div>
+						{/each}
+						{#if goingOverflow > 0}
+							<span
+								class="z-10 inline-flex size-12 items-center justify-center rounded-full border-2 border-base-100 bg-base-200 text-sm font-semibold text-base-950 dark:border-base-800 dark:bg-base-800 dark:text-base-100"
+							>
+								+{goingOverflow}
+							</span>
+						{/if}
+					</div>
+				</div>
+			</button>
+		{/if}
+
+		{#if interestedCount > 0}
+			<button
+				type="button"
+				class="-mx-2 mt-4 block w-full cursor-pointer rounded-xl px-2 py-2 text-left transition-colors hover:bg-base-100 dark:hover:bg-base-800/50"
+				onclick={() => openModal('interested')}
+			>
+				<p class="mb-2 text-sm text-base-900 dark:text-base-50">
+					<span class="font-bold">{interestedCount}</span>
+					<span class="text-xs font-semibold tracking-wider text-muted uppercase">Interested</span>
+				</p>
+				<div class="flex items-center">
+					<div class="flex flex-wrap -space-y-2 -space-x-4 pr-4">
+						{#each interestedDisplay as person (person.did)}
+							<div
+								animate:flip={{ duration: 300 }}
+								in:scale={{ duration: 300, start: 0.5 }}
+								out:scale={{ duration: 200, start: 0.5 }}
+							>
+								<Avatar
+									src={thumbnail(person.avatar)}
+									name={person.name}
+									class="size-12 border-2"
+								/>
+							</div>
+						{/each}
+						{#if interestedOverflow > 0}
+							<span
+								class="z-10 inline-flex size-12 items-center justify-center rounded-full border-2 border-base-100 bg-base-200 text-sm font-semibold text-base-950 dark:border-base-800 dark:bg-base-800 dark:text-base-100"
+							>
+								+{interestedOverflow}
+							</span>
+						{/if}
+					</div>
+				</div>
+			</button>
+		{/if}
+		{@render footer?.({ goingCount, interestedCount })}
+	</div>
+{/if}
+
+<Modal bind:open={modalOpen} title={`${modalTitle} (${modalAttendees.length})`}>
+	<div
+		class="mx-4 mb-4 max-h-80 space-y-1 overflow-y-auto rounded-xl bg-base-200/30 p-2 dark:bg-base-900/50"
+	>
+		{#each modalAttendees as person (person.did)}
+			<a
+				href={person.url}
+				target={person.url?.startsWith('/') ? undefined : '_blank'}
+				rel={person.url?.startsWith('/') ? undefined : 'noopener noreferrer'}
+				class="flex items-center gap-3 rounded-xl px-2 py-2 transition-colors hover:bg-base-200 dark:hover:bg-base-900"
+			>
+				<Avatar src={thumbnail(person.avatar)} name={person.name} class="size-10 shrink-0" />
+				<div class="min-w-0">
+					<p class="truncate text-sm font-medium text-base-900 dark:text-base-50">
+						{person.name}
+					</p>
+					{#if person.handle}
+						<p class="truncate text-xs text-muted">
+							@{person.handle}
+						</p>
+					{/if}
+				</div>
+			</a>
+		{/each}
+	</div>
+</Modal>

package/dist/events/EventAttendees.svelte.d.ts

@@ -0,0 +1,19 @@
+export interface AttendeeCounts {
+    goingCount: number;
+    interestedCount: number;
+}
+import type { Snippet } from 'svelte';
+import type { AttendeeInfo } from './contrail.js';
+type $$ComponentProps = {
+    going?: AttendeeInfo[];
+    interested?: AttendeeInfo[];
+    goingCount?: number;
+    interestedCount?: number;
+    footer?: Snippet<[AttendeeCounts]>;
+};
+declare const EventAttendees: import("svelte").Component<$$ComponentProps, {
+    addAttendee: (attendee: AttendeeInfo) => void;
+    removeAttendee: (did: string) => void;
+}, "">;
+type EventAttendees = ReturnType<typeof EventAttendees>;
+export default EventAttendees;