From a1fd61535cfa36326b435c627020c3dceb3239e5 Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Wed, 6 May 2026 19:30:16 +0200
Subject: [PATCH] pt 2

---
 apps/web/package.json                         |   3 +-
 apps/web/src/app.css                          |   2 +
 apps/web/src/lib/atproto/index.ts             |   2 +-
 apps/web/src/lib/components/EventList.svelte  |   2 +-
 apps/web/src/lib/components/editor/adapter.ts | 165 ++++++++----
 apps/web/src/lib/contrail.ts                  |  33 +--
 apps/web/src/lib/event-types.ts               |  47 +---
 apps/web/src/routes/(app)/+page.svelte        |   2 +-
 .../src/routes/(app)/calendar/+page.svelte    |   2 +-
 apps/web/src/routes/(app)/create/+page.svelte |   2 +-
 .../src/routes/(app)/p/[actor]/+page.svelte   |   2 +-
 .../(app)/p/[actor]/e/[rkey]/+page.svelte     |   5 +-
 .../p/[actor]/e/[rkey]/edit/+page.svelte      |   2 +-
 .../p/[actor]/e/[rkey]/og.png/+server.ts      |   2 +-
 .../p/[actor]/e/[rkey]/s/[skey]/+page.svelte  |   4 +-
 .../(app)/p/[actor]/e/calendar/+server.ts     |  12 +-
 .../ScheduleEventCell.svelte                  |   4 +-
 apps/web/src/routes/embed/create/+page.svelte |   4 +-
 .../embed/full/[actor]/[rkey]/+page.svelte    |   5 +-
 apps/web/svelte.config.js                     |   3 +
 packages/ui/package.json                      |  34 ++-
 .../ui/src}/DatePicker.svelte                 |   0
 .../ui/src}/DateTimePicker.svelte             |   2 +-
 .../ui/src}/EventAttendees.svelte             |   2 +-
 .../ui/src}/EventCard.svelte                  |   4 +-
 .../ui/src}/EventComments.svelte              |   0
 .../ui/src}/EventEditor.svelte                |  43 ++--
 .../ui/src}/EventRsvp.svelte                  |  29 ++-
 .../ui/src}/EventView.svelte                  |  30 +--
 .../ui/src}/ImageDropper.svelte               |   0
 .../components => packages/ui/src}/Map.svelte |   0
 .../ui/src}/PostToBlueskyModal.svelte         |  13 +-
 .../ui/src}/ShareModal.svelte                 |   4 +-
 .../ui/src}/ThemeApply.svelte                 |   2 +-
 .../ui/src}/ThemeBackground.svelte            |   2 +-
 .../ui/src}/ThemePicker.svelte                |   2 +-
 .../ui/src}/ThumbnailPresets.svelte           |   0
 .../ui/src}/TimePicker.svelte                 |   0
 .../ui/src}/TimezonePicker.svelte             |   0
 .../ui/src}/VodPlayer.svelte                  |   0
 .../ui/src}/VodTranscript.svelte              |   0
 packages/ui/src/atproto-helpers.ts            |  91 +++++++
 packages/ui/src/cal/helper.ts                 |  19 ++
 packages/ui/src/cal/ical.ts                   | 238 ++++++++++++++++++
 packages/ui/src/cal/sanitize.ts               |  28 +++
 packages/ui/src/contrail.ts                   |  64 +++++
 .../lib => packages/ui/src}/date-format.ts    |   0
 .../ui/src}/editor/LinksSection.svelte        |   2 +-
 .../ui/src}/editor/LocationSection.svelte     |   0
 .../ui/src}/editor/RecurringModal.svelte      |   7 +-
 .../ui/src}/editor/ThemeSection.svelte        |   4 +-
 .../ui/src}/editor/ThumbnailSection.svelte    |   4 +-
 packages/ui/src/editor/adapter.ts             |  76 ++++++
 .../ui/src}/editor/save.ts                    |  29 ++-
 .../ui/src}/editor/types.ts                   |   0
 packages/ui/src/event-types.ts                |  61 +++++
 .../event-view/AddToCalendarButton.svelte     |   4 +-
 .../ui/src}/event-view/EventBadges.svelte     |   0
 .../ui/src}/event-view/EventDateBlock.svelte  |   0
 .../ui/src}/event-view/EventHostedBy.svelte   |   2 +-
 .../ui/src}/event-view/EventLinksList.svelte  |   0
 .../src}/event-view/EventLocationBlock.svelte |   0
 .../src}/event-view/EventLocationMap.svelte   |   2 +-
 .../ui/src}/event-view/InviteShareFlow.svelte |  16 +-
 .../src}/event-view/StreamPlacePlayer.svelte  |   0
 .../ui/src}/event-view/format.ts              |   6 +-
 packages/ui/src/index.ts                      |  57 ++++-
 .../ui/src}/profile-url.ts                    |   0
 packages/ui/src/theme.ts                      |  31 +++
 .../ui/src}/themes/Blobs.svelte               |   0
 .../ui/src}/themes/Butterflies.svelte         |   2 +-
 .../ui/src}/themes/Fireflies.svelte           |   2 +-
 .../ui/src}/themes/Kaleidoscope.svelte        |   2 +-
 .../ui/src}/themes/Matrix.svelte              |   2 +-
 .../ui/src}/themes/Stars.svelte               |   2 +-
 .../ui/src}/thumbnails/designs.ts             |   0
 packages/ui/tsconfig.json                     |  16 +-
 pnpm-lock.yaml                                |  74 +++---
 78 files changed, 1013 insertions(+), 298 deletions(-)
 rename {apps/web/src/lib/components => packages/ui/src}/DatePicker.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/DateTimePicker.svelte (98%)
 rename {apps/web/src/lib/components => packages/ui/src}/EventAttendees.svelte (99%)
 rename {apps/web/src/lib/components => packages/ui/src}/EventCard.svelte (98%)
 rename {apps/web/src/lib/components => packages/ui/src}/EventComments.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/EventEditor.svelte (94%)
 rename {apps/web/src/lib/components => packages/ui/src}/EventRsvp.svelte (91%)
 rename {apps/web/src/lib/components => packages/ui/src}/EventView.svelte (93%)
 rename {apps/web/src/lib/components => packages/ui/src}/ImageDropper.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/Map.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/PostToBlueskyModal.svelte (93%)
 rename {apps/web/src/lib/components => packages/ui/src}/ShareModal.svelte (95%)
 rename {apps/web/src/lib/components => packages/ui/src}/ThemeApply.svelte (96%)
 rename {apps/web/src/lib/components => packages/ui/src}/ThemeBackground.svelte (94%)
 rename {apps/web/src/lib/components => packages/ui/src}/ThemePicker.svelte (98%)
 rename {apps/web/src/lib/components => packages/ui/src}/ThumbnailPresets.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/TimePicker.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/TimezonePicker.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/VodPlayer.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/VodTranscript.svelte (100%)
 create mode 100644 packages/ui/src/atproto-helpers.ts
 create mode 100644 packages/ui/src/cal/helper.ts
 create mode 100644 packages/ui/src/cal/ical.ts
 create mode 100644 packages/ui/src/cal/sanitize.ts
 create mode 100644 packages/ui/src/contrail.ts
 rename {apps/web/src/lib => packages/ui/src}/date-format.ts (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/editor/LinksSection.svelte (98%)
 rename {apps/web/src/lib/components => packages/ui/src}/editor/LocationSection.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/editor/RecurringModal.svelte (97%)
 rename {apps/web/src/lib/components => packages/ui/src}/editor/ThemeSection.svelte (90%)
 rename {apps/web/src/lib/components => packages/ui/src}/editor/ThumbnailSection.svelte (97%)
 create mode 100644 packages/ui/src/editor/adapter.ts
 rename {apps/web/src/lib/components => packages/ui/src}/editor/save.ts (89%)
 rename {apps/web/src/lib/components => packages/ui/src}/editor/types.ts (100%)
 create mode 100644 packages/ui/src/event-types.ts
 rename {apps/web/src/lib/components => packages/ui/src}/event-view/AddToCalendarButton.svelte (91%)
 rename {apps/web/src/lib/components => packages/ui/src}/event-view/EventBadges.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/event-view/EventDateBlock.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/event-view/EventHostedBy.svelte (97%)
 rename {apps/web/src/lib/components => packages/ui/src}/event-view/EventLinksList.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/event-view/EventLocationBlock.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/event-view/EventLocationMap.svelte (97%)
 rename {apps/web/src/lib/components => packages/ui/src}/event-view/InviteShareFlow.svelte (90%)
 rename {apps/web/src/lib/components => packages/ui/src}/event-view/StreamPlacePlayer.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/event-view/format.ts (97%)
 rename {apps/web/src/lib/atproto => packages/ui/src}/profile-url.ts (100%)
 create mode 100644 packages/ui/src/theme.ts
 rename {apps/web/src/lib/components => packages/ui/src}/themes/Blobs.svelte (100%)
 rename {apps/web/src/lib/components => packages/ui/src}/themes/Butterflies.svelte (99%)
 rename {apps/web/src/lib/components => packages/ui/src}/themes/Fireflies.svelte (98%)
 rename {apps/web/src/lib/components => packages/ui/src}/themes/Kaleidoscope.svelte (99%)
 rename {apps/web/src/lib/components => packages/ui/src}/themes/Matrix.svelte (98%)
 rename {apps/web/src/lib/components => packages/ui/src}/themes/Stars.svelte (98%)
 rename {apps/web/src/lib/components => packages/ui/src}/thumbnails/designs.ts (100%)

diff --git a/apps/web/package.json b/apps/web/package.json
index c5657f0..ec35fd8 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -46,7 +46,7 @@
 		"eslint-plugin-svelte": "^3.16.0",
 		"globals": "^17.4.0",
 		"svelte": "^5.55.0",
-		"svelte-check": "^4.4.5",
+		"svelte-check": "^4.4.8",
 		"svelte-tiptap": "^3.0.1",
 		"tailwindcss": "^4.2.2",
 		"tsx": "^4.21.0",
@@ -60,6 +60,7 @@
 		"@atcute/bluesky-richtext-parser": "^2.1.1",
 		"@atcute/jetstream": "^1.1.2",
 		"@atmo-dev/contrail": "^0.5.0",
+		"@atmo-dev/events-ui": "workspace:*",
 		"@ethercorps/sveltekit-og": "^4.2.1",
 		"@foxui/colors": "^0.8.5",
 		"@foxui/core": "^0.9.1",
diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index 9c3a4ce..ebc7cde 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -3,6 +3,8 @@
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/typography';
 @source "../node_modules/@foxui";
+@source "../node_modules/@atmo-dev/events-ui/dist";
+@source "../../../packages/ui/src";
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/apps/web/src/lib/atproto/index.ts b/apps/web/src/lib/atproto/index.ts
index cb5823b..bad3628 100644
--- a/apps/web/src/lib/atproto/index.ts
+++ b/apps/web/src/lib/atproto/index.ts
@@ -1,5 +1,5 @@
 export { user, login, signup, logout } from './auth.svelte';
-export { getProfileUrl } from './profile-url';
+export { getProfileUrl } from '@atmo-dev/events-ui';
 
 export {
 	parseUri,
diff --git a/apps/web/src/lib/components/EventList.svelte b/apps/web/src/lib/components/EventList.svelte
index f9214c6..c1fee09 100644
--- a/apps/web/src/lib/components/EventList.svelte
+++ b/apps/web/src/lib/components/EventList.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { FlatEventRecord } from '$lib/contrail';
 	import { loadMoreEvents } from '$lib/contrail/events.remote';
-	import EventCard from '$lib/components/EventCard.svelte';
+	import { EventCard } from '@atmo-dev/events-ui';
 
 	let {
 		events,
diff --git a/apps/web/src/lib/components/editor/adapter.ts b/apps/web/src/lib/components/editor/adapter.ts
index 2b89ee9..34feed5 100644
--- a/apps/web/src/lib/components/editor/adapter.ts
+++ b/apps/web/src/lib/components/editor/adapter.ts
@@ -1,48 +1,21 @@
 import { goto } from '$app/navigation';
-import { putRecord, createRecord, deleteRecord, uploadBlob } from '$lib/atproto/methods';
+import {
+	putRecord,
+	createRecord,
+	deleteRecord,
+	uploadBlob,
+	getRecord,
+	resolveHandle
+} from '$lib/atproto/methods';
+import { notifyContrailOfUpdate } from '$lib/contrail';
 import { atProtoLoginModalState } from '$lib/components/LoginModal.svelte';
+import type {
+	EditorAdapter,
+	EditorBlobRef,
+	EditorViewer
+} from '@atmo-dev/events-ui';
 
-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>;
-	onSaved(result: { uri: string; rkey: string; isNew: boolean }): void;
-	onDeleted?(): void;
-	requestLogin(): void;
-	createPrivateEvent?(opts: {
-		key: string;
-		record: Record<string, unknown>;
-	}): Promise<{ spaceUri: string; rkey: string; spaceKey: string }>;
-};
+export type { EditorAdapter, EditorBlobRef, EditorViewer };
 
 function handleOrDid(viewer: EditorViewer): string {
 	if (viewer.handle && viewer.handle !== 'handle.invalid') return viewer.handle;
@@ -87,8 +60,26 @@ export function createInAppAdapter(opts: { viewer: EditorViewer }): EditorAdapte
 			};
 			return rest as unknown as EditorBlobRef;
 		},
-		onSaved({ rkey, isNew }) {
-			goto(`/p/${handleOrDid(viewer)}/e/${rkey}${isNew ? '?created=true' : ''}`);
+		async getRecord({ did, collection, rkey }) {
+			const fresh = await getRecord({
+				did: did as `did:${string}:${string}`,
+				collection: collection as Parameters<typeof getRecord>[0]['collection'],
+				rkey
+			});
+			const value = (fresh as { value?: Record<string, unknown> }).value ?? {};
+			return { value };
+		},
+		async resolveHandle(handle: string) {
+			return resolveHandle({ handle: handle as Parameters<typeof resolveHandle>[0]['handle'] });
+		},
+		onSaved({ rkey, isNew, spaceKey }) {
+			const handle = handleOrDid(viewer);
+			const created = isNew ? '?created=true' : '';
+			if (spaceKey) {
+				goto(`/p/${handle}/e/${rkey}/s/${spaceKey}${created}`);
+			} else {
+				goto(`/p/${handle}/e/${rkey}${created}`);
+			}
 		},
 		onDeleted() {
 			goto(`/p/${handleOrDid(viewer)}`);
@@ -96,11 +87,70 @@ export function createInAppAdapter(opts: { viewer: EditorViewer }): EditorAdapte
 		requestLogin() {
 			atProtoLoginModalState.show();
 		},
+		async notifyUpdate(uri) {
+			await notifyContrailOfUpdate(uri);
+		},
 		async createPrivateEvent({ key, record }) {
 			const { createPrivateEvent } = await import('$lib/spaces/server/spaces.remote');
 			const result = await createPrivateEvent({ key, record });
 			const spaceKey = result.spaceUri.split('/').pop() ?? '';
 			return { spaceUri: result.spaceUri, rkey: result.rkey, spaceKey };
+		},
+		async putSpaceRecord({
+			spaceUri,
+			collection,
+			rkey,
+			record
+		}: {
+			spaceUri: string;
+			collection: string;
+			rkey: string;
+			record: Record<string, unknown>;
+		}) {
+			const { putSpaceRecord } = await import('$lib/spaces/server/spaces.remote');
+			const result = await putSpaceRecord({
+				spaceUri,
+				collection: collection as Parameters<typeof putSpaceRecord>[0]['collection'],
+				rkey,
+				record
+			});
+			return { ok: !!result };
+		},
+		async deleteSpaceRecord({
+			spaceUri,
+			collection,
+			rkey
+		}: {
+			spaceUri: string;
+			collection: string;
+			rkey: string;
+		}) {
+			const { deleteSpaceRecord } = await import('$lib/spaces/server/spaces.remote');
+			await deleteSpaceRecord({
+				spaceUri,
+				collection: collection as Parameters<typeof deleteSpaceRecord>[0]['collection'],
+				rkey
+			});
+		},
+		async createSpaceInvite({
+			spaceUri,
+			kind,
+			maxUses,
+			expiresAt
+		}: {
+			spaceUri: string;
+			kind: 'read-join' | 'join';
+			maxUses?: number;
+			expiresAt?: number;
+		}) {
+			const { createInvite } = await import('$lib/spaces/server/spaces.remote');
+			const result = await createInvite({
+				spaceUri,
+				kind,
+				...(maxUses != null ? { maxUses } : {}),
+				...(expiresAt != null ? { expiresAt } : {})
+			});
+			return { token: result.token };
 		}
 	};
 }
@@ -109,13 +159,13 @@ export function createBlentoAdapter(opts: {
 	viewer: EditorViewer;
 	onAfterSave?: (result: { uri: string; rkey: string; isNew: boolean }) => void;
 }): EditorAdapter {
-	const { viewer, onAfterSave } = opts;
+	const { onAfterSave } = opts;
 	function blento(): NonNullable<typeof window.Blento> {
 		const b = typeof window !== 'undefined' ? window.Blento : undefined;
 		if (!b) throw new Error('Blento SDK not available');
 		return b;
 	}
-	return {
+	const adapter: EditorAdapter = {
 		features: { delete: false, recurring: true, privateMode: false },
 		async putRecord({ collection, rkey, record }) {
 			const plain = JSON.parse(JSON.stringify(record)) as Record<string, unknown>;
@@ -130,11 +180,27 @@ export function createBlentoAdapter(opts: {
 		async deleteRecord({ collection, rkey }) {
 			await blento().deleteRecord({ collection, rkey });
 		},
-		async uploadBlob(blob) {
+		async uploadBlob(blob: Blob) {
 			const ref = await blento().uploadBlob(blob);
 			return ref as EditorBlobRef;
 		},
-		onSaved(result) {
+		async getRecord({ did, collection, rkey }) {
+			// Blento SDK doesn't expose reads yet, so we route through atmo's xrpc
+			// proxy (the embed lives inside atmo, so this is always reachable).
+			const params = new URLSearchParams({ repo: did, collection, rkey });
+			const r = await fetch(`/xrpc/com.atproto.repo.getRecord?${params}`);
+			if (!r.ok) throw new Error('getRecord failed');
+			const data = (await r.json()) as { value?: Record<string, unknown> };
+			return { value: data.value ?? {} };
+		},
+		async resolveHandle(handle: string) {
+			const params = new URLSearchParams({ handle });
+			const r = await fetch(`/xrpc/com.atproto.identity.resolveHandle?${params}`);
+			if (!r.ok) throw new Error('resolveHandle failed');
+			const data = (await r.json()) as { did: string };
+			return data.did;
+		},
+		onSaved(result: { uri: string; rkey: string; isNew: boolean }) {
 			try {
 				blento().notify('event-created', result);
 			} catch (e) {
@@ -151,5 +217,6 @@ export function createBlentoAdapter(opts: {
 		},
 		// no createPrivateEvent — privateMode disabled in features
 		// no onDeleted — delete is disabled in features
-	} as EditorAdapter;
+	};
+	return adapter;
 }
diff --git a/apps/web/src/lib/contrail.ts b/apps/web/src/lib/contrail.ts
index 0530b7d..0e3c428 100644
--- a/apps/web/src/lib/contrail.ts
+++ b/apps/web/src/lib/contrail.ts
@@ -1,5 +1,5 @@
 import '../lexicon-types/index.js';
-import { getProfileUrl } from '$lib/atproto/profile-url';
+import { getProfileUrl } from '@atmo-dev/events-ui';
 import type { EventData } from '$lib/event-types';
 import type {
 	RsvpAtmoGetProfile,
@@ -29,35 +29,8 @@ type FlattenableEventRecord = EventListRecord | EventGetOutput | HydratedEventRe
 type EventProfiles = EventProfileEntry[] | EventGetProfileEntry[] | undefined;
 type EventRsvps = EventListRecord['rsvps'] | EventGetOutput['rsvps'];
 
-export type FlatEventRecord = EventData & {
-	cid?: string | null;
-	did: string;
-	rkey: string;
-	uri: string;
-	/** Populated when the event was read from a permissioned space. */
-	space?: string;
-	rsvps?: EventRsvps;
-	rsvpsCount?: number;
-	rsvpsGoingCount?: number;
-	rsvpsInterestedCount?: number;
-	rsvpsNotgoingCount?: number;
-};
-
-export type HostProfile = {
-	did: string;
-	handle?: string;
-	displayName?: string;
-	avatar?: string;
-};
-
-export type AttendeeInfo = {
-	did: string;
-	status: 'going' | 'interested';
-	avatar?: string;
-	name: string;
-	handle?: string;
-	url: string;
-};
+export type { FlatEventRecord, HostProfile, AttendeeInfo } from '@atmo-dev/events-ui';
+import type { FlatEventRecord, HostProfile, AttendeeInfo } from '@atmo-dev/events-ui';
 
 export type EventAttendeesResult = {
 	going: AttendeeInfo[];
diff --git a/apps/web/src/lib/event-types.ts b/apps/web/src/lib/event-types.ts
index 8ee3c47..b7975cd 100644
--- a/apps/web/src/lib/event-types.ts
+++ b/apps/web/src/lib/event-types.ts
@@ -1,45 +1,6 @@
-import type { CommunityLexiconCalendarEvent } from '../lexicon-types';
-
 /**
- * Extended event type that includes fields present on actual records
- * but not yet in the lexicon definition (media, facets).
+ * Re-export of the EventData type from `@atmo-dev/events-ui`. The package owns
+ * the canonical structural type so the UI components and the consumer app
+ * agree on the shape of an event record.
  */
-export type EventData = CommunityLexiconCalendarEvent.Main & {
-	/** startsAt is always present on actual records even though the lexicon marks it optional */
-	startsAt: string;
-	/**
-	 * IANA timezone id (e.g. "Europe/Berlin") in which the event's wall-clock times
-	 * were authored. Not part of the upstream lexicon, but persisted on records we
-	 * write so display code can render startsAt/endsAt in the author's intended zone.
-	 */
-	timezone?: string;
-	media?: Array<{
-		role: string;
-		alt?: string;
-		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>;
-	theme?: {
-		name: string;
-		accentColor: string;
-		baseColor: string;
-	};
-	/**
-	 * Reference to a Bluesky post about this event. When present, the host has
-	 * shared the event to their Bluesky feed; when `showComments` is true, the
-	 * event page renders the post's reply thread as a comments section.
-	 */
-	bskyPostRef?: {
-		uri: string;
-		cid: string;
-		showComments: boolean;
-	};
-};
+export type { EventData } from '@atmo-dev/events-ui';
diff --git a/apps/web/src/routes/(app)/+page.svelte b/apps/web/src/routes/(app)/+page.svelte
index f68d487..269c30c 100644
--- a/apps/web/src/routes/(app)/+page.svelte
+++ b/apps/web/src/routes/(app)/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import EventCard from '$lib/components/EventCard.svelte';
+	import { EventCard } from '@atmo-dev/events-ui';
 	import RecentActivity from '$lib/components/RecentActivity.svelte';
 	import { Button } from '@foxui/core';
 	import { user } from '$lib/atproto/auth.svelte';
diff --git a/apps/web/src/routes/(app)/calendar/+page.svelte b/apps/web/src/routes/(app)/calendar/+page.svelte
index 801c131..5d7fa07 100644
--- a/apps/web/src/routes/(app)/calendar/+page.svelte
+++ b/apps/web/src/routes/(app)/calendar/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import EventCard from '$lib/components/EventCard.svelte';
+	import { EventCard } from '@atmo-dev/events-ui';
 	import { Button, Modal } from '@foxui/core';
 	import { atProtoLoginModalState } from '$lib/components/LoginModal.svelte';
 	import { user } from '$lib/atproto/auth.svelte';
diff --git a/apps/web/src/routes/(app)/create/+page.svelte b/apps/web/src/routes/(app)/create/+page.svelte
index 4c927f3..e862c35 100644
--- a/apps/web/src/routes/(app)/create/+page.svelte
+++ b/apps/web/src/routes/(app)/create/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import EventEditor from '$lib/components/EventEditor.svelte';
+	import { EventEditor } from '@atmo-dev/events-ui';
 	import { page } from '$app/state';
 	import { user } from '$lib/atproto/auth.svelte';
 	import { createInAppAdapter } from '$lib/components/editor/adapter';
diff --git a/apps/web/src/routes/(app)/p/[actor]/+page.svelte b/apps/web/src/routes/(app)/p/[actor]/+page.svelte
index 9f25195..385e5e9 100644
--- a/apps/web/src/routes/(app)/p/[actor]/+page.svelte
+++ b/apps/web/src/routes/(app)/p/[actor]/+page.svelte
@@ -3,7 +3,7 @@
 	import { user, logout } from '$lib/atproto/auth.svelte';
 	import UserProfile from '$lib/components/UserProfile.svelte';
 	import { Button } from '@foxui/core';
-	import EventCard from '$lib/components/EventCard.svelte';
+	import { EventCard } from '@atmo-dev/events-ui';
 
 	let { data } = $props();
 
diff --git a/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/+page.svelte b/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/+page.svelte
index 704e384..d8ca8b8 100644
--- a/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/+page.svelte
+++ b/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-	import EventView from '$lib/components/EventView.svelte';
+	import { EventView } from '@atmo-dev/events-ui';
 	import { user } from '$lib/atproto/auth.svelte';
 	import { createInAppAdapter } from '$lib/components/editor/adapter';
+	import { page } from '$app/state';
 
 	let { data } = $props();
 
@@ -15,4 +16,4 @@
 	let adapter = $derived(createInAppAdapter({ viewer }));
 </script>
 
-<EventView {data} {adapter} {viewer} />
+<EventView {data} {adapter} {viewer} pageUrl={page.url} />
diff --git a/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/edit/+page.svelte b/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/edit/+page.svelte
index 7218394..479ec01 100644
--- a/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/edit/+page.svelte
+++ b/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/edit/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import EventEditor from '$lib/components/EventEditor.svelte';
+	import { EventEditor } from '@atmo-dev/events-ui';
 	import { user } from '$lib/atproto/auth.svelte';
 	import { createInAppAdapter } from '$lib/components/editor/adapter';
 
diff --git a/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/og.png/+server.ts b/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/og.png/+server.ts
index 98a7ae9..ae25e51 100644
--- a/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/og.png/+server.ts
+++ b/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/og.png/+server.ts
@@ -4,7 +4,7 @@ import { error } from '@sveltejs/kit';
 import EventOgImage from './EventOgImage.svelte';
 import { getActor } from '$lib/actor';
 import { flattenEventRecord, getEventRecordFromContrail, getServerClient } from '$lib/contrail';
-import { formatInTz, partsInTz } from '$lib/date-format';
+import { formatInTz, partsInTz } from '@atmo-dev/events-ui';
 import { render } from 'svelte/server';
 
 function formatDate(dateStr: string, tz: string | undefined): string {
diff --git a/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/s/[skey]/+page.svelte b/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/s/[skey]/+page.svelte
index 18ddfc7..10c6d08 100644
--- a/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/s/[skey]/+page.svelte
+++ b/apps/web/src/routes/(app)/p/[actor]/e/[rkey]/s/[skey]/+page.svelte
@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { goto, invalidateAll } from '$app/navigation';
 	import { page } from '$app/state';
-	import EventView from '$lib/components/EventView.svelte';
+	import { EventView } from '@atmo-dev/events-ui';
 	import { redeemInvite } from '$lib/spaces/server/spaces.remote';
 	import { atProtoLoginModalState } from '$lib/components/LoginModal.svelte';
 	import { user } from '$lib/atproto/auth.svelte';
@@ -81,7 +81,7 @@
 			<p class="text-base-500 text-sm">Redeeming invite…</p>
 		</div>
 	{/if}
-	<EventView {data} {adapter} {viewer} />
+	<EventView {data} {adapter} {viewer} pageUrl={page.url} />
 	{#if data.isOwner}
 		<div class="mx-auto max-w-3xl px-4 pb-12">
 			<a
diff --git a/apps/web/src/routes/(app)/p/[actor]/e/calendar/+server.ts b/apps/web/src/routes/(app)/p/[actor]/e/calendar/+server.ts
index e31369f..02e6d44 100644
--- a/apps/web/src/routes/(app)/p/[actor]/e/calendar/+server.ts
+++ b/apps/web/src/routes/(app)/p/[actor]/e/calendar/+server.ts
@@ -45,10 +45,14 @@ export async function GET({ params, platform }) {
 				const imageUrl = thumbnail?.content
 					? getCDNImageBlobUrl({ did, blob: thumbnail.content })
 					: undefined;
-				const attendeeGroups = buildEventAttendees(r.rsvps, response.profiles, {
-					goingCount: r.rsvpsGoingCount,
-					interestedCount: r.rsvpsInterestedCount
-				});
+				const attendeeGroups = buildEventAttendees(
+					r.rsvps as Parameters<typeof buildEventAttendees>[0],
+					response.profiles,
+					{
+						goingCount: r.rsvpsGoingCount,
+						interestedCount: r.rsvpsInterestedCount
+					}
+				);
 				const attendees: ICalAttendee[] = [...attendeeGroups.going, ...attendeeGroups.interested];
 
 				return {
diff --git a/apps/web/src/routes/(app)/p/atmosphereconf.org/ScheduleEventCell.svelte b/apps/web/src/routes/(app)/p/atmosphereconf.org/ScheduleEventCell.svelte
index 888b84a..5d2d483 100644
--- a/apps/web/src/routes/(app)/p/atmosphereconf.org/ScheduleEventCell.svelte
+++ b/apps/web/src/routes/(app)/p/atmosphereconf.org/ScheduleEventCell.svelte
@@ -8,8 +8,8 @@
 		formatTime
 	} from './schedule-utils';
 	import { Modal, Button } from '@foxui/core';
-	import EventRsvp from '$lib/components/EventRsvp.svelte';
-	import VodPlayer from '$lib/components/VodPlayer.svelte';
+	import { EventRsvp } from '@atmo-dev/events-ui';
+	import { VodPlayer } from '@atmo-dev/events-ui';
 	import { user } from '$lib/atproto/auth.svelte';
 	import { createInAppAdapter } from '$lib/components/editor/adapter';
 
diff --git a/apps/web/src/routes/embed/create/+page.svelte b/apps/web/src/routes/embed/create/+page.svelte
index 6ce686f..119064f 100644
--- a/apps/web/src/routes/embed/create/+page.svelte
+++ b/apps/web/src/routes/embed/create/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import EventEditor from '$lib/components/EventEditor.svelte';
+	import { EventEditor } from '@atmo-dev/events-ui';
 	import { onMount } from 'svelte';
 	import { createBlentoAdapter, type EditorViewer } from '$lib/components/editor/adapter';
-	import type { EventTheme } from '$lib/theme';
+	import type { EventTheme } from '@atmo-dev/events-ui';
 
 	let { data } = $props();
 
diff --git a/apps/web/src/routes/embed/full/[actor]/[rkey]/+page.svelte b/apps/web/src/routes/embed/full/[actor]/[rkey]/+page.svelte
index 9016a70..adc225a 100644
--- a/apps/web/src/routes/embed/full/[actor]/[rkey]/+page.svelte
+++ b/apps/web/src/routes/embed/full/[actor]/[rkey]/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-	import EventView from '$lib/components/EventView.svelte';
+	import { EventView } from '@atmo-dev/events-ui';
 	import { onMount } from 'svelte';
 	import { createBlentoAdapter, type EditorViewer } from '$lib/components/editor/adapter';
+	import { page } from '$app/state';
 
 	let { data } = $props();
 
@@ -78,5 +79,5 @@
 		></div>
 	</div>
 {:else}
-	<EventView {data} {adapter} {viewer} embedMode {shareUrlOverride} />
+	<EventView {data} {adapter} {viewer} pageUrl={page.url} embedMode {shareUrlOverride} />
 {/if}
diff --git a/apps/web/svelte.config.js b/apps/web/svelte.config.js
index eb8101d..b0458ae 100644
--- a/apps/web/svelte.config.js
+++ b/apps/web/svelte.config.js
@@ -7,6 +7,9 @@ const config = {
 
 	kit: {
 		adapter: adapter(),
+		alias: {
+			'@atmo-dev/events-ui': '../../packages/ui/src'
+		},
 		experimental: {
 			remoteFunctions: true
 		}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index a221f12..a2b54ba 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -5,7 +5,7 @@
 	"license": "MIT",
 	"type": "module",
 	"scripts": {
-		"package": "svelte-kit sync && svelte-package -i src -o dist && publint dist",
+		"package": "svelte-kit sync && svelte-package -i src -o dist && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"prepublishOnly": "pnpm package"
 	},
@@ -25,22 +25,31 @@
 	},
 	"svelte": "./dist/index.js",
 	"peerDependencies": {
-		"svelte": "^5.0.0",
 		"@foxui/core": "^0.9.0",
 		"@foxui/social": "^0.8.0",
 		"@foxui/text": "^0.8.0",
 		"@foxui/time": "^0.8.0",
 		"@foxui/visual": "^0.8.0",
 		"bits-ui": "^2.16.0",
+		"svelte": "^5.0.0",
 		"tailwindcss": "^4.0.0"
 	},
 	"peerDependenciesMeta": {
-		"maplibre-gl": { "optional": true },
-		"svelte-maplibre-gl": { "optional": true },
-		"hls.js": { "optional": true },
-		"plyr": { "optional": true }
+		"maplibre-gl": {
+			"optional": true
+		},
+		"svelte-maplibre-gl": {
+			"optional": true
+		},
+		"hls.js": {
+			"optional": true
+		},
+		"plyr": {
+			"optional": true
+		}
 	},
 	"dependencies": {
+		"@atcute/bluesky-richtext-parser": "^2.1.1",
 		"@atcute/tid": "^1.1.2",
 		"@atmo-dev/contrail-lexicons": "^0.4.4",
 		"@internationalized/date": "^3.12.0",
@@ -53,12 +62,23 @@
 		"valibot": "^1.3.1"
 	},
 	"devDependencies": {
+		"@foxui/core": "^0.9.1",
+		"@foxui/social": "^0.8.10",
+		"@foxui/text": "^0.8.5",
+		"@foxui/time": "^0.8.5",
+		"@foxui/visual": "^0.8.7",
 		"@sveltejs/kit": "^2.55.0",
 		"@sveltejs/package": "^2.5.5",
 		"@sveltejs/vite-plugin-svelte": "^7.0.0",
+		"bits-ui": "^2.16.3",
+		"hls.js": "^1.6.15",
+		"maplibre-gl": "^5.21.1",
+		"plyr": "^3.8.4",
 		"publint": "^0.3.16",
 		"svelte": "^5.55.0",
-		"svelte-check": "^4.4.5",
+		"svelte-check": "^4.4.8",
+		"svelte-maplibre-gl": "^1.0.3",
+		"tailwindcss": "^4.2.2",
 		"typescript": "^6.0.2",
 		"vite": "^8.0.3"
 	}
diff --git a/apps/web/src/lib/components/DatePicker.svelte b/packages/ui/src/DatePicker.svelte
similarity index 100%
rename from apps/web/src/lib/components/DatePicker.svelte
rename to packages/ui/src/DatePicker.svelte
diff --git a/apps/web/src/lib/components/DateTimePicker.svelte b/packages/ui/src/DateTimePicker.svelte
similarity index 98%
rename from apps/web/src/lib/components/DateTimePicker.svelte
rename to packages/ui/src/DateTimePicker.svelte
index f674b93..09c60c4 100644
--- a/apps/web/src/lib/components/DateTimePicker.svelte
+++ b/packages/ui/src/DateTimePicker.svelte
@@ -3,7 +3,7 @@
 	import DatePickerField from './DatePicker.svelte';
 	import TimePicker from './TimePicker.svelte';
 	import { untrack } from 'svelte';
-	import { browser } from '$app/environment';
+	import { BROWSER as browser } from 'esm-env';
 
 	let {
 		value = $bindable(''),
diff --git a/apps/web/src/lib/components/EventAttendees.svelte b/packages/ui/src/EventAttendees.svelte
similarity index 99%
rename from apps/web/src/lib/components/EventAttendees.svelte
rename to packages/ui/src/EventAttendees.svelte
index d56ef9e..fb0c264 100644
--- a/apps/web/src/lib/components/EventAttendees.svelte
+++ b/packages/ui/src/EventAttendees.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { AttendeeInfo } from '$lib/contrail';
+	import type { AttendeeInfo } from './contrail.js';
 	import { Avatar as FoxAvatar } from '@foxui/core';
 	import { scale } from 'svelte/transition';
 	import { flip } from 'svelte/animate';
diff --git a/apps/web/src/lib/components/EventCard.svelte b/packages/ui/src/EventCard.svelte
similarity index 98%
rename from apps/web/src/lib/components/EventCard.svelte
rename to packages/ui/src/EventCard.svelte
index 00f9fd0..b315870 100644
--- a/apps/web/src/lib/components/EventCard.svelte
+++ b/packages/ui/src/EventCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { getCDNImageBlobUrl } from '$lib/atproto';
-	import { eventUrl, isEventOngoing, type FlatEventRecord } from '$lib/contrail';
+	import { getCDNImageBlobUrl } from './atproto-helpers.js';
+	import { eventUrl, isEventOngoing, type FlatEventRecord } from './contrail.js';
 	import Avatar from 'svelte-boring-avatars';
 
 	let {
diff --git a/apps/web/src/lib/components/EventComments.svelte b/packages/ui/src/EventComments.svelte
similarity index 100%
rename from apps/web/src/lib/components/EventComments.svelte
rename to packages/ui/src/EventComments.svelte
diff --git a/apps/web/src/lib/components/EventEditor.svelte b/packages/ui/src/EventEditor.svelte
similarity index 94%
rename from apps/web/src/lib/components/EventEditor.svelte
rename to packages/ui/src/EventEditor.svelte
index 5840e89..38d0f69 100644
--- a/apps/web/src/lib/components/EventEditor.svelte
+++ b/packages/ui/src/EventEditor.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { getCDNImageBlobUrl } from '$lib/atproto';
-	import { notifyContrailOfUpdate } from '$lib/contrail';
+	import { getCDNImageBlobUrl } from './atproto-helpers.js';
 	import {
 		Avatar as FoxAvatar,
 		Button,
@@ -8,16 +7,16 @@
 		ToggleGroupItem
 	} from '@foxui/core';
 	import { onMount } from 'svelte';
-	import { dev } from '$app/environment';
+	import { DEV as dev } from 'esm-env';
 	import { PlainTextEditor } from '@foxui/text';
-	import DateTimePicker from '$lib/components/DateTimePicker.svelte';
-	import TimezonePicker from '$lib/components/TimezonePicker.svelte';
+	import DateTimePicker from './DateTimePicker.svelte';
+	import TimezonePicker from './TimezonePicker.svelte';
 	import { parseDateTime } from '@internationalized/date';
-	import { isoToDatetimeLocalInTz } from '$lib/date-format';
-	import type { FlatEventRecord } from '$lib/contrail';
-	import ThemeApply from '$lib/components/ThemeApply.svelte';
-	import ThemeBackground from '$lib/components/ThemeBackground.svelte';
-	import { defaultTheme, randomAccentColor, type EventTheme } from '$lib/theme';
+	import { isoToDatetimeLocalInTz } from './date-format.js';
+	import type { FlatEventRecord } from './contrail.js';
+	import ThemeApply from './ThemeApply.svelte';
+	import ThemeBackground from './ThemeBackground.svelte';
+	import { defaultTheme, randomAccentColor, type EventTheme } from './theme.js';
 
 	import type { Readable } from 'svelte/store';
 	import { get } from 'svelte/store';
@@ -240,7 +239,8 @@
 				links,
 				location,
 				locationChanged,
-				media
+				media,
+				resolveHandle: (handle) => adapter.resolveHandle(handle)
 			});
 
 			if (visibility === 'private') {
@@ -248,15 +248,20 @@
 					error = 'Private events are not supported here.';
 					return;
 				}
-				const { rkey: eventRkey, spaceKey } = await adapter.createPrivateEvent({
+				const {
+					spaceUri,
+					rkey: eventRkey,
+					spaceKey
+				} = await adapter.createPrivateEvent({
 					key: rkey,
 					record
 				});
-				const handle =
-					viewer.handle && viewer.handle !== 'handle.invalid' ? viewer.handle : viewer.did;
-				const target = `/p/${handle}/e/${eventRkey}/s/${spaceKey}?created=true`;
-				const { goto } = await import('$app/navigation');
-				goto(target);
+				adapter.onSaved({
+					uri: spaceUri,
+					rkey: eventRkey,
+					isNew: true,
+					spaceKey
+				});
 				return;
 			}
 
@@ -266,7 +271,7 @@
 				record
 			});
 
-			await notifyContrailOfUpdate(result.uri);
+			await adapter.notifyUpdate?.(result.uri);
 			adapter.onSaved({ uri: result.uri, rkey, isNew });
 		} catch (e) {
 			console.error(`Failed to ${isNew ? 'create' : 'save'} event:`, e);
@@ -287,7 +292,7 @@
 				rkey
 			});
 			const eventUri = `at://${viewer.did}/community.lexicon.calendar.event/${rkey}`;
-			await notifyContrailOfUpdate(eventUri);
+			await adapter.notifyUpdate?.(eventUri);
 			adapter.onDeleted?.();
 		} catch (e) {
 			console.error('Failed to delete event:', e);
diff --git a/apps/web/src/lib/components/EventRsvp.svelte b/packages/ui/src/EventRsvp.svelte
similarity index 91%
rename from apps/web/src/lib/components/EventRsvp.svelte
rename to packages/ui/src/EventRsvp.svelte
index e9aac24..f5bbef9 100644
--- a/apps/web/src/lib/components/EventRsvp.svelte
+++ b/packages/ui/src/EventRsvp.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { createTID } from '$lib/atproto/methods';
-	import { notifyContrailOfUpdate } from '$lib/contrail';
+	import * as TID from '@atcute/tid';
 	import { Avatar, Button } from '@foxui/core';
 	import { launchConfetti } from '@foxui/visual';
-	import type { EditorAdapter, EditorViewer } from '$lib/components/editor/adapter';
+	import type { EditorAdapter, EditorViewer } from './editor/adapter.js';
 
 	let {
 		eventUri,
@@ -43,7 +42,7 @@
 		if (!viewer.isLoggedIn || !viewer.did) return;
 		rsvpSubmitting = true;
 		try {
-			const key = rsvpRkey ?? createTID();
+			const key = rsvpRkey ?? TID.now();
 			const record = {
 				$type: 'community.lexicon.calendar.rsvp',
 				createdWith: 'https://atmo.rsvp',
@@ -57,14 +56,17 @@
 
 			let ok = false;
 			if (spaceUri) {
-				const { putSpaceRecord } = await import('$lib/spaces/server/spaces.remote');
-				const result = await putSpaceRecord({
+				if (!adapter.putSpaceRecord) {
+					console.error('putSpaceRecord not supported by this adapter');
+					return;
+				}
+				const result = await adapter.putSpaceRecord({
 					spaceUri,
 					collection: 'community.lexicon.calendar.rsvp',
 					rkey: key,
 					record
 				});
-				ok = !!result;
+				ok = result.ok;
 			} else {
 				try {
 					await adapter.putRecord({
@@ -73,7 +75,9 @@
 						record
 					});
 					ok = true;
-					notifyContrailOfUpdate(`at://${viewer.did}/community.lexicon.calendar.rsvp/${key}`);
+					adapter.notifyUpdate?.(
+						`at://${viewer.did}/community.lexicon.calendar.rsvp/${key}`
+					);
 				} catch (e) {
 					console.error('RSVP putRecord failed:', e);
 				}
@@ -97,8 +101,11 @@
 		rsvpSubmitting = true;
 		try {
 			if (spaceUri) {
-				const { deleteSpaceRecord } = await import('$lib/spaces/server/spaces.remote');
-				await deleteSpaceRecord({
+				if (!adapter.deleteSpaceRecord) {
+					console.error('deleteSpaceRecord not supported by this adapter');
+					return;
+				}
+				await adapter.deleteSpaceRecord({
 					spaceUri,
 					collection: 'community.lexicon.calendar.rsvp',
 					rkey: rsvpRkey
@@ -108,7 +115,7 @@
 					collection: 'community.lexicon.calendar.rsvp',
 					rkey: rsvpRkey
 				});
-				notifyContrailOfUpdate(
+				adapter.notifyUpdate?.(
 					`at://${viewer.did}/community.lexicon.calendar.rsvp/${rsvpRkey}`
 				);
 			}
diff --git a/apps/web/src/lib/components/EventView.svelte b/packages/ui/src/EventView.svelte
similarity index 93%
rename from apps/web/src/lib/components/EventView.svelte
rename to packages/ui/src/EventView.svelte
index 2b895bc..5795740 100644
--- a/apps/web/src/lib/components/EventView.svelte
+++ b/packages/ui/src/EventView.svelte
@@ -1,22 +1,21 @@
 <script lang="ts">
-	import { eventUrl, isEventOngoing, type FlatEventRecord } from '$lib/contrail';
-	import { getCDNImageBlobUrl } from '$lib/atproto';
+	import { eventUrl, isEventOngoing, type FlatEventRecord } from './contrail.js';
+	import { getCDNImageBlobUrl } from './atproto-helpers.js';
 	import { Avatar as FoxAvatar, Button, ToggleGroup, ToggleGroupItem } from '@foxui/core';
-	import ShareModal from '$lib/components/ShareModal.svelte';
-	import EventComments from '$lib/components/EventComments.svelte';
+	import ShareModal from './ShareModal.svelte';
+	import EventComments from './EventComments.svelte';
 	import Avatar from 'svelte-boring-avatars';
-	import EventRsvp from '$lib/components/EventRsvp.svelte';
-	import EventCard from '$lib/components/EventCard.svelte';
+	import EventRsvp from './EventRsvp.svelte';
+	import EventCard from './EventCard.svelte';
 	import EventAttendees from './EventAttendees.svelte';
-	import VodPlayer, { type VodPlayerApi } from '$lib/components/VodPlayer.svelte';
+	import VodPlayer, { type VodPlayerApi } from './VodPlayer.svelte';
 	import StreamPlacePlayer from './event-view/StreamPlacePlayer.svelte';
-	import { page } from '$app/state';
 	import { launchConfetti } from '@foxui/visual';
-	import ThemeBackground from '$lib/components/ThemeBackground.svelte';
-	import ThemeApply from '$lib/components/ThemeApply.svelte';
-	import { defaultTheme, type EventTheme } from '$lib/theme';
+	import ThemeBackground from './ThemeBackground.svelte';
+	import ThemeApply from './ThemeApply.svelte';
+	import { defaultTheme, type EventTheme } from './theme.js';
 	import { onMount } from 'svelte';
-	import type { EditorAdapter, EditorViewer } from '$lib/components/editor/adapter';
+	import type { EditorAdapter, EditorViewer } from './editor/adapter.js';
 
 	import EventBadges from './event-view/EventBadges.svelte';
 	import EventDateBlock from './event-view/EventDateBlock.svelte';
@@ -32,12 +31,15 @@
 		data,
 		adapter,
 		viewer,
+		pageUrl,
 		embedMode = false,
 		shareUrlOverride
 	}: {
 		data: any;
 		adapter: EditorAdapter;
 		viewer: EditorViewer;
+		/** Current page URL — used for the OG image link and the calendar button. */
+		pageUrl: URL;
 		embedMode?: boolean;
 		/** When set, the share modal / Bluesky post embed use this URL instead
 		 *  of the canonical atmo.rsvp event URL. Useful for embedders that want
@@ -142,7 +144,7 @@
 
 	let eventUri = $derived(`at://${did}/community.lexicon.calendar.event/${rkey}`);
 
-	let ogImageUrl = $derived(data.ogImage ?? `${page.url.origin}${page.url.pathname}/og.png`);
+	let ogImageUrl = $derived(data.ogImage ?? `${pageUrl.origin}${pageUrl.pathname}/og.png`);
 
 	let isOwner = $derived(!embedMode && viewer.isLoggedIn && viewer.did === did);
 
@@ -385,7 +387,7 @@
 
 				<EventLinksList uris={eventData.uris} />
 
-				<AddToCalendarButton {eventData} {eventUri} pageHref={page.url.href} />
+				<AddToCalendarButton {eventData} {eventUri} pageHref={pageUrl.href} />
 
 				<EventAttendees
 					bind:this={attendeesRef}
diff --git a/apps/web/src/lib/components/ImageDropper.svelte b/packages/ui/src/ImageDropper.svelte
similarity index 100%
rename from apps/web/src/lib/components/ImageDropper.svelte
rename to packages/ui/src/ImageDropper.svelte
diff --git a/apps/web/src/lib/components/Map.svelte b/packages/ui/src/Map.svelte
similarity index 100%
rename from apps/web/src/lib/components/Map.svelte
rename to packages/ui/src/Map.svelte
diff --git a/apps/web/src/lib/components/PostToBlueskyModal.svelte b/packages/ui/src/PostToBlueskyModal.svelte
similarity index 93%
rename from apps/web/src/lib/components/PostToBlueskyModal.svelte
rename to packages/ui/src/PostToBlueskyModal.svelte
index 472a5c0..a37118f 100644
--- a/apps/web/src/lib/components/PostToBlueskyModal.svelte
+++ b/packages/ui/src/PostToBlueskyModal.svelte
@@ -10,9 +10,7 @@
 	import type { JSONContent, SvelteTiptap } from '@foxui/text';
 	import type { Readable } from 'svelte/store';
 	import { get } from 'svelte/store';
-	import { getRecord } from '$lib/atproto/methods';
-	import { notifyContrailOfUpdate } from '$lib/contrail';
-	import type { EditorAdapter, EditorViewer } from '$lib/components/editor/adapter';
+	import type { EditorAdapter, EditorViewer } from './editor/adapter.js';
 
 	let {
 		open = $bindable(false),
@@ -164,14 +162,13 @@
 			const postCid = postResp.cid;
 
 			if (canSetEventComments) {
-				const fresh = await getRecord({
-					did: eventDid as `did:${string}:${string}`,
+				const fresh = await adapter.getRecord({
+					did: eventDid,
 					collection: 'community.lexicon.calendar.event',
 					rkey: eventRkey
 				});
-				const freshValue = (fresh as { value?: Record<string, unknown> }).value ?? {};
 				const updatedRecord = {
-					...freshValue,
+					...fresh.value,
 					bskyPostRef: {
 						uri: postUri,
 						cid: postCid,
@@ -184,7 +181,7 @@
 					record: updatedRecord
 				});
 
-				await notifyContrailOfUpdate(
+				await adapter.notifyUpdate?.(
 					`at://${eventDid}/community.lexicon.calendar.event/${eventRkey}`
 				);
 			}
diff --git a/apps/web/src/lib/components/ShareModal.svelte b/packages/ui/src/ShareModal.svelte
similarity index 95%
rename from apps/web/src/lib/components/ShareModal.svelte
rename to packages/ui/src/ShareModal.svelte
index c29c670..fcba85d 100644
--- a/apps/web/src/lib/components/ShareModal.svelte
+++ b/packages/ui/src/ShareModal.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Modal, Button, Avatar } from '@foxui/core';
 	import { LinkCard } from '@foxui/social';
-	import PostToBlueskyModal from '$lib/components/PostToBlueskyModal.svelte';
-	import type { EditorAdapter, EditorViewer } from '$lib/components/editor/adapter';
+	import PostToBlueskyModal from './PostToBlueskyModal.svelte';
+	import type { EditorAdapter, EditorViewer } from './editor/adapter.js';
 
 	let {
 		open = $bindable(false),
diff --git a/apps/web/src/lib/components/ThemeApply.svelte b/packages/ui/src/ThemeApply.svelte
similarity index 96%
rename from apps/web/src/lib/components/ThemeApply.svelte
rename to packages/ui/src/ThemeApply.svelte
index 9e0d846..9d4b75b 100644
--- a/apps/web/src/lib/components/ThemeApply.svelte
+++ b/packages/ui/src/ThemeApply.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
+	import { BROWSER as browser } from 'esm-env';
 
 	let {
 		accentColor = 'cyan',
diff --git a/apps/web/src/lib/components/ThemeBackground.svelte b/packages/ui/src/ThemeBackground.svelte
similarity index 94%
rename from apps/web/src/lib/components/ThemeBackground.svelte
rename to packages/ui/src/ThemeBackground.svelte
index 2826418..6eb02ec 100644
--- a/apps/web/src/lib/components/ThemeBackground.svelte
+++ b/packages/ui/src/ThemeBackground.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { EventTheme } from '$lib/theme';
+	import type { EventTheme } from './theme.js';
 	import Blobs from './themes/Blobs.svelte';
 	import Stars from './themes/Stars.svelte';
 	import Matrix from './themes/Matrix.svelte';
diff --git a/apps/web/src/lib/components/ThemePicker.svelte b/packages/ui/src/ThemePicker.svelte
similarity index 98%
rename from apps/web/src/lib/components/ThemePicker.svelte
rename to packages/ui/src/ThemePicker.svelte
index 33b8005..5098e37 100644
--- a/apps/web/src/lib/components/ThemePicker.svelte
+++ b/packages/ui/src/ThemePicker.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { themeBackgrounds, type EventTheme } from '$lib/theme';
+	import { themeBackgrounds, type EventTheme } from './theme.js';
 
 	let {
 		theme = $bindable<EventTheme>({ name: 'minimal', accentColor: 'cyan', baseColor: 'mist' })
diff --git a/apps/web/src/lib/components/ThumbnailPresets.svelte b/packages/ui/src/ThumbnailPresets.svelte
similarity index 100%
rename from apps/web/src/lib/components/ThumbnailPresets.svelte
rename to packages/ui/src/ThumbnailPresets.svelte
diff --git a/apps/web/src/lib/components/TimePicker.svelte b/packages/ui/src/TimePicker.svelte
similarity index 100%
rename from apps/web/src/lib/components/TimePicker.svelte
rename to packages/ui/src/TimePicker.svelte
diff --git a/apps/web/src/lib/components/TimezonePicker.svelte b/packages/ui/src/TimezonePicker.svelte
similarity index 100%
rename from apps/web/src/lib/components/TimezonePicker.svelte
rename to packages/ui/src/TimezonePicker.svelte
diff --git a/apps/web/src/lib/components/VodPlayer.svelte b/packages/ui/src/VodPlayer.svelte
similarity index 100%
rename from apps/web/src/lib/components/VodPlayer.svelte
rename to packages/ui/src/VodPlayer.svelte
diff --git a/apps/web/src/lib/components/VodTranscript.svelte b/packages/ui/src/VodTranscript.svelte
similarity index 100%
rename from apps/web/src/lib/components/VodTranscript.svelte
rename to packages/ui/src/VodTranscript.svelte
diff --git a/packages/ui/src/atproto-helpers.ts b/packages/ui/src/atproto-helpers.ts
new file mode 100644
index 0000000..4f89e27
--- /dev/null
+++ b/packages/ui/src/atproto-helpers.ts
@@ -0,0 +1,91 @@
+/**
+ * Pure browser-safe atproto helpers used by the UI components. Does not depend
+ * on any session/client state — those flow through the EditorAdapter.
+ */
+
+export function getCDNImageBlobUrl({
+	did,
+	blob,
+	format = 'webp'
+}: {
+	did: string;
+	blob: {
+		$type: 'blob';
+		ref: { $link: string };
+	};
+	format?: 'webp' | 'jpeg' | 'png';
+}) {
+	return `https://cdn.bsky.app/img/feed_thumbnail/plain/${did}/${blob.ref.$link}@${format}`;
+}
+
+export function compressImage(
+	file: File | Blob,
+	maxSize: number = 900 * 1024,
+	maxDimension: number = 2048
+): Promise<{
+	blob: Blob;
+	aspectRatio: { width: number; height: number };
+}> {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		const reader = new FileReader();
+
+		reader.onload = (e) => {
+			if (!e.target?.result) {
+				return reject(new Error('Failed to read file.'));
+			}
+			img.src = e.target.result as string;
+		};
+
+		reader.onerror = (err) => reject(err);
+		reader.readAsDataURL(file);
+
+		img.onload = () => {
+			let width = img.width;
+			let height = img.height;
+
+			if (file.size <= maxSize) {
+				return resolve({ blob: file, aspectRatio: { width, height } });
+			}
+
+			if (width > maxDimension || height > maxDimension) {
+				if (width > height) {
+					height = Math.round((maxDimension / width) * height);
+					width = maxDimension;
+				} else {
+					width = Math.round((maxDimension / height) * width);
+					height = maxDimension;
+				}
+			}
+
+			const canvas = document.createElement('canvas');
+			canvas.width = width;
+			canvas.height = height;
+			const ctx = canvas.getContext('2d');
+			if (!ctx) return reject(new Error('Failed to get canvas context.'));
+			ctx.drawImage(img, 0, 0, width, height);
+
+			let quality = 0.9;
+
+			function attemptCompression() {
+				canvas.toBlob(
+					(blob) => {
+						if (!blob) return reject(new Error('Compression failed.'));
+						if (blob.size <= maxSize || quality < 0.3) {
+							resolve({ blob, aspectRatio: { width, height } });
+						} else {
+							quality -= 0.1;
+							attemptCompression();
+						}
+					},
+					'image/webp',
+					quality
+				);
+			}
+
+			attemptCompression();
+		};
+
+		img.onerror = (err) => reject(err);
+	});
+}
diff --git a/packages/ui/src/cal/helper.ts b/packages/ui/src/cal/helper.ts
new file mode 100644
index 0000000..a7cba11
--- /dev/null
+++ b/packages/ui/src/cal/helper.ts
@@ -0,0 +1,19 @@
+export function validateLink(
+	link: string | undefined,
+	tryAdding: boolean = true
+): string | undefined {
+	if (!link) return;
+	try {
+		new URL(link);
+		return link;
+	} catch {
+		if (!tryAdding) return;
+		try {
+			link = 'https://' + link;
+			new URL(link);
+			return link;
+		} catch {
+			return;
+		}
+	}
+}
diff --git a/packages/ui/src/cal/ical.ts b/packages/ui/src/cal/ical.ts
new file mode 100644
index 0000000..931dc91
--- /dev/null
+++ b/packages/ui/src/cal/ical.ts
@@ -0,0 +1,238 @@
+import type { EventData } from '../event-types.js';
+
+/**
+ * Escape text for iCal fields (RFC 5545 Section 3.3.11).
+ * Backslashes, semicolons, commas, and newlines must be escaped.
+ */
+function escapeText(text: string): string {
+	return text
+		.replace(/\\/g, '\\\\')
+		.replace(/;/g, '\\;')
+		.replace(/,/g, '\\,')
+		.replace(/\n/g, '\\n');
+}
+
+/**
+ * Fold long lines per RFC 5545 (max 75 octets per line).
+ * Continuation lines start with a single space.
+ */
+function foldLine(line: string): string {
+	const maxLen = 75;
+	if (line.length <= maxLen) return line;
+
+	const parts: string[] = [];
+	parts.push(line.slice(0, maxLen));
+	let i = maxLen;
+	while (i < line.length) {
+		parts.push(' ' + line.slice(i, i + maxLen - 1));
+		i += maxLen - 1;
+	}
+	return parts.join('\r\n');
+}
+
+/**
+ * Convert an ISO 8601 date string to iCal DATETIME format (UTC).
+ * e.g. "2026-02-22T15:00:00Z" -> "20260222T150000Z"
+ */
+function toICalDate(isoString: string): string {
+	const d = new Date(isoString);
+	const pad = (n: number) => n.toString().padStart(2, '0');
+	return (
+		d.getUTCFullYear().toString() +
+		pad(d.getUTCMonth() + 1) +
+		pad(d.getUTCDate()) +
+		'T' +
+		pad(d.getUTCHours()) +
+		pad(d.getUTCMinutes()) +
+		pad(d.getUTCSeconds()) +
+		'Z'
+	);
+}
+
+/**
+ * Extract a location string from event locations array.
+ */
+function getLocationString(locations: EventData['locations']): string | undefined {
+	if (!locations || locations.length === 0) return undefined;
+
+	const loc = locations.find((v) => v.$type === 'community.lexicon.location.address') as
+		| { street?: string; locality?: string; region?: string }
+		| undefined;
+	if (!loc) return undefined;
+
+	const street = loc.street || undefined;
+	const locality = loc.locality || undefined;
+	const region = loc.region || undefined;
+
+	const parts = [street, locality, region].filter(Boolean);
+	return parts.length > 0 ? parts.join(', ') : undefined;
+}
+
+function getModeLabel(mode: string): string {
+	if (mode.includes('virtual')) return 'Virtual';
+	if (mode.includes('hybrid')) return 'Hybrid';
+	if (mode.includes('inperson')) return 'In-Person';
+	return 'Event';
+}
+
+function toAbsoluteUrl(pathOrUrl: string | undefined, baseUrl?: string): string | undefined {
+	if (!pathOrUrl) return undefined;
+
+	try {
+		return new URL(pathOrUrl, baseUrl).toString();
+	} catch {
+		return undefined;
+	}
+}
+
+export interface ICalAttendee {
+	name: string;
+	status: 'going' | 'interested';
+	url?: string;
+}
+
+export interface ICalEvent {
+	eventData: EventData;
+	uid: string;
+	url?: string;
+	organizer?: string;
+	imageUrl?: string;
+	attendees?: ICalAttendee[];
+}
+
+/**
+ * Generate a single VEVENT block.
+ */
+function generateVEvent(event: ICalEvent): string | null {
+	const { eventData, uid, url, organizer, imageUrl } = event;
+
+	// Skip events with invalid or missing start dates
+	const startTime = new Date(eventData.startsAt);
+	if (isNaN(startTime.getTime())) return null;
+
+	const lines: string[] = [];
+
+	lines.push('BEGIN:VEVENT');
+	lines.push(`UID:${escapeText(uid)}`);
+	lines.push(`DTSTART:${toICalDate(eventData.startsAt)}`);
+
+	if (eventData.endsAt) {
+		lines.push(`DTEND:${toICalDate(eventData.endsAt)}`);
+	} else {
+		// Default to 1 hour duration when no end time is specified
+		const defaultEnd = new Date(startTime.getTime() + 60 * 60 * 1000);
+		lines.push(`DTEND:${toICalDate(defaultEnd.toISOString())}`);
+	}
+
+	lines.push(`SUMMARY:${escapeText(eventData.name)}`);
+
+	// Description: text + links
+	const descParts: string[] = [];
+	if (eventData.description) {
+		descParts.push(eventData.description);
+	}
+	if (eventData.uris && eventData.uris.length > 0) {
+		descParts.push('');
+		descParts.push('Links:');
+		for (const link of eventData.uris) {
+			descParts.push(link.name ? `${link.name}: ${link.uri}` : link.uri);
+		}
+	}
+	if (url) {
+		descParts.push('');
+		descParts.push(`Event page: ${url}`);
+	}
+	if (descParts.length > 0) {
+		lines.push(`DESCRIPTION:${escapeText(descParts.join('\n'))}`);
+	}
+
+	const locationParts: string[] = [];
+	const room = (eventData as { additionalData?: Record<string, unknown> }).additionalData?.room;
+	if (typeof room === 'string' && room && room !== 'none') {
+		locationParts.push(room);
+	}
+	const address = getLocationString(eventData.locations);
+	if (address) {
+		locationParts.push(address);
+	}
+	if (locationParts.length > 0) {
+		lines.push(`LOCATION:${escapeText(locationParts.join(', '))}`);
+	}
+
+	if (url) {
+		lines.push(`URL:${url}`);
+	}
+
+	// Categories from event mode
+	if (eventData.mode) {
+		lines.push(`CATEGORIES:${escapeText(getModeLabel(eventData.mode))}`);
+	}
+
+	// Organizer
+	if (organizer) {
+		const organizerUrl = toAbsoluteUrl(`/${organizer}`, url) ?? url;
+
+		lines.push(
+			`ORGANIZER;CN=${escapeText(organizer)}:${organizerUrl}`
+		);
+	}
+
+	// Attendees
+	if (event.attendees) {
+		for (const attendee of event.attendees) {
+			const partstat = attendee.status === 'going' ? 'ACCEPTED' : 'TENTATIVE';
+			const attendeeUrl = toAbsoluteUrl(attendee.url, url) ?? url;
+
+			if (!attendeeUrl) continue;
+
+			lines.push(
+				`ATTENDEE;CN=${escapeText(attendee.name)};PARTSTAT=${partstat}:${attendeeUrl}`
+			);
+		}
+	}
+
+	// Image (supported by Apple Calendar, Google Calendar)
+	if (imageUrl) {
+		lines.push(`IMAGE;VALUE=URI;DISPLAY=BADGE:${imageUrl}`);
+	}
+
+	lines.push(`DTSTAMP:${toICalDate(new Date().toISOString())}`);
+
+	// Reminder 15 minutes before
+	lines.push('BEGIN:VALARM');
+	lines.push('TRIGGER:-PT15M');
+	lines.push('ACTION:DISPLAY');
+	lines.push(`DESCRIPTION:${escapeText(eventData.name)}`);
+	lines.push('END:VALARM');
+
+	lines.push('END:VEVENT');
+
+	return lines.map(foldLine).join('\r\n');
+}
+
+/**
+ * Generate a complete iCal feed from multiple events.
+ */
+export function generateICalFeed(events: ICalEvent[], calendarName: string): string {
+	const lines: string[] = [];
+
+	lines.push('BEGIN:VCALENDAR');
+	lines.push('VERSION:2.0');
+	lines.push('PRODID:-//Blento//Events//EN');
+	lines.push(`X-WR-CALNAME:${escapeText(calendarName)}`);
+	lines.push('CALSCALE:GREGORIAN');
+	lines.push('METHOD:PUBLISH');
+
+	const vevents = events.map(generateVEvent).filter((v): v is string => v !== null);
+
+	const result =
+		lines.map(foldLine).join('\r\n') + '\r\n' + vevents.join('\r\n') + '\r\nEND:VCALENDAR\r\n';
+	return result;
+}
+
+/**
+ * Generate iCal content for a single event (for client-side download).
+ */
+export function generateICalEvent(eventData: EventData, atUri: string, eventUrl?: string): string {
+	return generateICalFeed([{ eventData, uid: atUri, url: eventUrl }], eventData.name);
+}
diff --git a/packages/ui/src/cal/sanitize.ts b/packages/ui/src/cal/sanitize.ts
new file mode 100644
index 0000000..a069c25
--- /dev/null
+++ b/packages/ui/src/cal/sanitize.ts
@@ -0,0 +1,28 @@
+import { BROWSER } from 'esm-env';
+
+// Lightweight regex-based sanitizer for SSR where DOMPurify is not available.
+// Strips common XSS vectors.
+function regexSanitize(html: string): string {
+	return html
+		.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script\s*>/gi, '')
+		.replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe\s*>/gi, '')
+		.replace(/<object\b[^<]*(?:(?!<\/object>)<[^<]*)*<\/object\s*>/gi, '')
+		.replace(/<embed\b[^>]*\/?>/gi, '')
+		.replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style\s*>/gi, '')
+		.replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+		.replace(/href\s*=\s*["']?\s*javascript\s*:/gi, 'href="')
+		.replace(/src\s*=\s*["']?\s*javascript\s*:/gi, 'src="');
+}
+
+let _purify: ((html: string, config?: { ADD_ATTR?: string[] }) => string) | null = null;
+
+if (BROWSER) {
+	import('dompurify').then((mod) => {
+		_purify = (html, config) => mod.default.sanitize(html, config) as string;
+	});
+}
+
+export function sanitize(dirty: string, config?: { ADD_ATTR?: string[] }): string {
+	if (_purify) return _purify(dirty, config);
+	return regexSanitize(dirty);
+}
diff --git a/packages/ui/src/contrail.ts b/packages/ui/src/contrail.ts
new file mode 100644
index 0000000..ea3c46f
--- /dev/null
+++ b/packages/ui/src/contrail.ts
@@ -0,0 +1,64 @@
+import type { EventData } from './event-types.js';
+
+/**
+ * Subset of contrail types and helpers needed by the UI package. Server-side
+ * functions (notifyContrailOfUpdate, listEventRecordsFromContrail, etc.) live
+ * in the consumer app, not here.
+ */
+
+export type FlatEventRecord = EventData & {
+	cid?: string | null;
+	did: string;
+	rkey: string;
+	uri: string;
+	/** Populated when the event was read from a permissioned space. */
+	space?: string;
+	rsvps?: {
+		going?: Array<{ did: string; createdAt?: string }>;
+		interested?: Array<{ did: string; createdAt?: string }>;
+		notgoing?: Array<{ did: string; createdAt?: string }>;
+	};
+	rsvpsCount?: number;
+	rsvpsGoingCount?: number;
+	rsvpsInterestedCount?: number;
+	rsvpsNotgoingCount?: number;
+};
+
+export type HostProfile = {
+	did: string;
+	handle?: string;
+	displayName?: string;
+	avatar?: string;
+};
+
+export type AttendeeInfo = {
+	did: string;
+	status: 'going' | 'interested';
+	avatar?: string;
+	name: string;
+	handle?: string;
+	url: string;
+};
+
+export const RSVP_GOING = 'community.lexicon.calendar.rsvp#going';
+export const RSVP_INTERESTED = 'community.lexicon.calendar.rsvp#interested';
+
+/** Build the canonical path for an event. Private events (those with a `space`
+ *  field) live under `/p/<actor>/e/<rkey>/s/<skey>` so the page knows both
+ *  which event to show and which space to look in. Public events use
+ *  `/p/<actor>/e/<rkey>`. */
+export function eventUrl(event: FlatEventRecord, actor?: string): string {
+	const who = actor || event.did;
+	if (event.space) {
+		const m = event.space.match(/^ats?:\/\/[^/]+\/[^/]+\/([^/]+)$/);
+		const skey = m?.[1];
+		if (skey) return `/p/${who}/e/${event.rkey}/s/${skey}`;
+	}
+	return `/p/${who}/e/${event.rkey}`;
+}
+
+export function isEventOngoing(startsAt: string, endsAt?: string | null): boolean {
+	if (!endsAt) return false;
+	const now = new Date();
+	return new Date(startsAt) <= now && new Date(endsAt) >= now;
+}
diff --git a/apps/web/src/lib/date-format.ts b/packages/ui/src/date-format.ts
similarity index 100%
rename from apps/web/src/lib/date-format.ts
rename to packages/ui/src/date-format.ts
diff --git a/apps/web/src/lib/components/editor/LinksSection.svelte b/packages/ui/src/editor/LinksSection.svelte
similarity index 98%
rename from apps/web/src/lib/components/editor/LinksSection.svelte
rename to packages/ui/src/editor/LinksSection.svelte
index 045ab91..b17e35d 100644
--- a/apps/web/src/lib/components/editor/LinksSection.svelte
+++ b/packages/ui/src/editor/LinksSection.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button, Input, PopoverContent, PopoverRoot, PopoverTrigger } from '@foxui/core';
-	import { validateLink } from '$lib/cal/helper';
+	import { validateLink } from '../cal/helper.js';
 
 	type Link = { uri: string; name: string };
 
diff --git a/apps/web/src/lib/components/editor/LocationSection.svelte b/packages/ui/src/editor/LocationSection.svelte
similarity index 100%
rename from apps/web/src/lib/components/editor/LocationSection.svelte
rename to packages/ui/src/editor/LocationSection.svelte
diff --git a/apps/web/src/lib/components/editor/RecurringModal.svelte b/packages/ui/src/editor/RecurringModal.svelte
similarity index 97%
rename from apps/web/src/lib/components/editor/RecurringModal.svelte
rename to packages/ui/src/editor/RecurringModal.svelte
index 0b6cfb4..5f202d0 100644
--- a/apps/web/src/lib/components/editor/RecurringModal.svelte
+++ b/packages/ui/src/editor/RecurringModal.svelte
@@ -2,11 +2,10 @@
 	import { Button, Checkbox, Input, Modal, ToggleGroup, ToggleGroupItem } from '@foxui/core';
 	import { parseDateTime } from '@internationalized/date';
 	import * as TID from '@atcute/tid';
-	import { notifyContrailOfUpdate } from '$lib/contrail';
-	import type { FlatEventRecord } from '$lib/contrail';
+	import type { FlatEventRecord } from '../contrail.js';
 	import type { EventLocation, EventMode } from './types';
 	import { buildThumbnailMedia, renderPresetThumbnail } from './save';
-	import { hashSeed } from '$lib/components/thumbnails/designs';
+	import { hashSeed } from '../thumbnails/designs.js';
 	import type { EditorAdapter, EditorViewer } from './adapter';
 
 	let {
@@ -176,7 +175,7 @@
 						rkey: newRkey,
 						record
 					});
-					await notifyContrailOfUpdate(result.uri);
+					await adapter.notifyUpdate?.(result.uri);
 					created = i + 1;
 				} catch {
 					errorMsg = `Failed to create event ${i + 1}. Stopping.`;
diff --git a/apps/web/src/lib/components/editor/ThemeSection.svelte b/packages/ui/src/editor/ThemeSection.svelte
similarity index 90%
rename from apps/web/src/lib/components/editor/ThemeSection.svelte
rename to packages/ui/src/editor/ThemeSection.svelte
index cadf5e4..bbc8d32 100644
--- a/apps/web/src/lib/components/editor/ThemeSection.svelte
+++ b/packages/ui/src/editor/ThemeSection.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Button, Modal } from '@foxui/core';
-	import ThemePicker from '$lib/components/ThemePicker.svelte';
-	import { themeBackgrounds, type EventTheme } from '$lib/theme';
+	import ThemePicker from '../ThemePicker.svelte';
+	import { themeBackgrounds, type EventTheme } from '../theme.js';
 
 	let { theme = $bindable() }: { theme: EventTheme } = $props();
 
diff --git a/apps/web/src/lib/components/editor/ThumbnailSection.svelte b/packages/ui/src/editor/ThumbnailSection.svelte
similarity index 97%
rename from apps/web/src/lib/components/editor/ThumbnailSection.svelte
rename to packages/ui/src/editor/ThumbnailSection.svelte
index e93973f..9774832 100644
--- a/apps/web/src/lib/components/editor/ThumbnailSection.svelte
+++ b/packages/ui/src/editor/ThumbnailSection.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Button, Modal } from '@foxui/core';
 	import Avatar from 'svelte-boring-avatars';
-	import ThumbnailPresets from '$lib/components/ThumbnailPresets.svelte';
-	import { designs, hashSeed, resolveAccentColor } from '$lib/components/thumbnails/designs';
+	import ThumbnailPresets from '../ThumbnailPresets.svelte';
+	import { designs, hashSeed, resolveAccentColor } from '../thumbnails/designs.js';
 
 	let {
 		rkey,
diff --git a/packages/ui/src/editor/adapter.ts b/packages/ui/src/editor/adapter.ts
new file mode 100644
index 0000000..0c9cd51
--- /dev/null
+++ b/packages/ui/src/editor/adapter.ts
@@ -0,0 +1,76 @@
+/**
+ * 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 }>;
+};
diff --git a/apps/web/src/lib/components/editor/save.ts b/packages/ui/src/editor/save.ts
similarity index 89%
rename from apps/web/src/lib/components/editor/save.ts
rename to packages/ui/src/editor/save.ts
index 5bb75a0..8283d4f 100644
--- a/apps/web/src/lib/components/editor/save.ts
+++ b/packages/ui/src/editor/save.ts
@@ -1,14 +1,15 @@
-import { resolveHandle } from '$lib/atproto/methods';
-import { compressImage } from '$lib/atproto/image-helper';
+import { compressImage } from '../atproto-helpers.js';
 import { tokenize, type Token } from '@atcute/bluesky-richtext-parser';
-import type { Handle } from '@atcute/lexicons';
-import { datetimeLocalToISO } from '$lib/date-format';
-import { designs, resolveAccentColor } from '$lib/components/thumbnails/designs';
-import type { FlatEventRecord } from '$lib/contrail';
-import type { EventTheme } from '$lib/theme';
-import type { EventLocation, EventMode, Visibility } from './types';
-
-export async function tokensToFacets(tokens: Token[]): Promise<Record<string, unknown>[]> {
+import { datetimeLocalToISO } from '../date-format.js';
+import { designs, resolveAccentColor } from '../thumbnails/designs.js';
+import type { FlatEventRecord } from '../contrail.js';
+import type { EventTheme } from '../theme.js';
+import type { EventLocation, EventMode, Visibility } from './types.js';
+
+export async function tokensToFacets(
+	tokens: Token[],
+	resolveHandle: (handle: string) => Promise<string>
+): Promise<Record<string, unknown>[]> {
 	const encoder = new TextEncoder();
 	const facets: Record<string, unknown>[] = [];
 	let byteOffset = 0;
@@ -20,7 +21,7 @@ export async function tokensToFacets(tokens: Token[]): Promise<Record<string, un
 
 		if (token.type === 'mention') {
 			try {
-				const did = await resolveHandle({ handle: token.handle as Handle });
+				const did = await resolveHandle(token.handle);
 				if (did) {
 					facets.push({
 						index: { byteStart, byteEnd },
@@ -129,6 +130,7 @@ export async function buildEventRecord(args: {
 	location: EventLocation | null;
 	locationChanged: boolean;
 	media: Array<Record<string, unknown>> | undefined;
+	resolveHandle: (handle: string) => Promise<string>;
 }): Promise<Record<string, unknown>> {
 	const {
 		eventData,
@@ -144,7 +146,8 @@ export async function buildEventRecord(args: {
 		links,
 		location,
 		locationChanged,
-		media
+		media,
+		resolveHandle
 	} = args;
 
 	const createdAt = isNew
@@ -183,7 +186,7 @@ export async function buildEventRecord(args: {
 	if (trimmedDescription) {
 		record.description = trimmedDescription;
 		const tokens = tokenize(trimmedDescription);
-		const facets = await tokensToFacets(tokens);
+		const facets = await tokensToFacets(tokens, resolveHandle);
 		if (facets.length > 0) record.facets = facets;
 	}
 
diff --git a/apps/web/src/lib/components/editor/types.ts b/packages/ui/src/editor/types.ts
similarity index 100%
rename from apps/web/src/lib/components/editor/types.ts
rename to packages/ui/src/editor/types.ts
diff --git a/packages/ui/src/event-types.ts b/packages/ui/src/event-types.ts
new file mode 100644
index 0000000..23c2f20
--- /dev/null
+++ b/packages/ui/src/event-types.ts
@@ -0,0 +1,61 @@
+/**
+ * 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;
+}
+
+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;
+		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>;
+	theme?: {
+		name: string;
+		accentColor: string;
+		baseColor: string;
+	};
+	bskyPostRef?: {
+		uri: string;
+		cid: string;
+		showComments: boolean;
+	};
+};
diff --git a/apps/web/src/lib/components/event-view/AddToCalendarButton.svelte b/packages/ui/src/event-view/AddToCalendarButton.svelte
similarity index 91%
rename from apps/web/src/lib/components/event-view/AddToCalendarButton.svelte
rename to packages/ui/src/event-view/AddToCalendarButton.svelte
index b4ed3f2..d9fc81d 100644
--- a/apps/web/src/lib/components/event-view/AddToCalendarButton.svelte
+++ b/packages/ui/src/event-view/AddToCalendarButton.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { generateICalEvent } from '$lib/cal/ical';
-	import type { FlatEventRecord } from '$lib/contrail';
+	import { generateICalEvent } from '../cal/ical.js';
+	import type { FlatEventRecord } from '../contrail.js';
 
 	let {
 		eventData,
diff --git a/apps/web/src/lib/components/event-view/EventBadges.svelte b/packages/ui/src/event-view/EventBadges.svelte
similarity index 100%
rename from apps/web/src/lib/components/event-view/EventBadges.svelte
rename to packages/ui/src/event-view/EventBadges.svelte
diff --git a/apps/web/src/lib/components/event-view/EventDateBlock.svelte b/packages/ui/src/event-view/EventDateBlock.svelte
similarity index 100%
rename from apps/web/src/lib/components/event-view/EventDateBlock.svelte
rename to packages/ui/src/event-view/EventDateBlock.svelte
diff --git a/apps/web/src/lib/components/event-view/EventHostedBy.svelte b/packages/ui/src/event-view/EventHostedBy.svelte
similarity index 97%
rename from apps/web/src/lib/components/event-view/EventHostedBy.svelte
rename to packages/ui/src/event-view/EventHostedBy.svelte
index 392f09c..1d5b1b7 100644
--- a/apps/web/src/lib/components/event-view/EventHostedBy.svelte
+++ b/packages/ui/src/event-view/EventHostedBy.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Avatar as FoxAvatar } from '@foxui/core';
-	import type { HostProfile } from '$lib/contrail';
+	import type { HostProfile } from '../contrail.js';
 
 	type Speaker = { id?: string; handle?: string; name: string; avatar?: string };
 
diff --git a/apps/web/src/lib/components/event-view/EventLinksList.svelte b/packages/ui/src/event-view/EventLinksList.svelte
similarity index 100%
rename from apps/web/src/lib/components/event-view/EventLinksList.svelte
rename to packages/ui/src/event-view/EventLinksList.svelte
diff --git a/apps/web/src/lib/components/event-view/EventLocationBlock.svelte b/packages/ui/src/event-view/EventLocationBlock.svelte
similarity index 100%
rename from apps/web/src/lib/components/event-view/EventLocationBlock.svelte
rename to packages/ui/src/event-view/EventLocationBlock.svelte
diff --git a/apps/web/src/lib/components/event-view/EventLocationMap.svelte b/packages/ui/src/event-view/EventLocationMap.svelte
similarity index 97%
rename from apps/web/src/lib/components/event-view/EventLocationMap.svelte
rename to packages/ui/src/event-view/EventLocationMap.svelte
index 61497b5..6f23275 100644
--- a/apps/web/src/lib/components/event-view/EventLocationMap.svelte
+++ b/packages/ui/src/event-view/EventLocationMap.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Badge } from '@foxui/core';
-	import Map from '$lib/components/Map.svelte';
+	import Map from '../Map.svelte';
 	import type { LocationData, GeoLocation } from './format';
 
 	let {
diff --git a/apps/web/src/lib/components/event-view/InviteShareFlow.svelte b/packages/ui/src/event-view/InviteShareFlow.svelte
similarity index 90%
rename from apps/web/src/lib/components/event-view/InviteShareFlow.svelte
rename to packages/ui/src/event-view/InviteShareFlow.svelte
index 99708de..2e18f00 100644
--- a/apps/web/src/lib/components/event-view/InviteShareFlow.svelte
+++ b/packages/ui/src/event-view/InviteShareFlow.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { Button, Checkbox, Input, Label, Modal } from '@foxui/core';
-	import DateTimePicker from '$lib/components/DateTimePicker.svelte';
-	import ShareModal from '$lib/components/ShareModal.svelte';
-	import { datetimeLocalToISO } from '$lib/date-format';
-	import type { HostProfile } from '$lib/contrail';
-	import type { EditorAdapter, EditorViewer } from '$lib/components/editor/adapter';
+	import DateTimePicker from '../DateTimePicker.svelte';
+	import ShareModal from '../ShareModal.svelte';
+	import { datetimeLocalToISO } from '../date-format.js';
+	import type { HostProfile } from '../contrail.js';
+	import type { EditorAdapter, EditorViewer } from '../editor/adapter.js';
 
 	let {
 		spaceUri,
@@ -71,8 +71,10 @@
 				expiresAt = ts;
 			}
 
-			const { createInvite } = await import('$lib/spaces/server/spaces.remote');
-			const result = await createInvite({
+			if (!adapter.createSpaceInvite) {
+				throw new Error('createSpaceInvite not supported by this adapter');
+			}
+			const result = await adapter.createSpaceInvite({
 				spaceUri,
 				kind: inviteAllowAnonRead ? 'read-join' : 'join',
 				...(maxUses != null ? { maxUses } : {}),
diff --git a/apps/web/src/lib/components/event-view/StreamPlacePlayer.svelte b/packages/ui/src/event-view/StreamPlacePlayer.svelte
similarity index 100%
rename from apps/web/src/lib/components/event-view/StreamPlacePlayer.svelte
rename to packages/ui/src/event-view/StreamPlacePlayer.svelte
diff --git a/apps/web/src/lib/components/event-view/format.ts b/packages/ui/src/event-view/format.ts
similarity index 97%
rename from apps/web/src/lib/components/event-view/format.ts
rename to packages/ui/src/event-view/format.ts
index d62854d..f7aa444 100644
--- a/apps/web/src/lib/components/event-view/format.ts
+++ b/packages/ui/src/event-view/format.ts
@@ -1,7 +1,7 @@
 import { marked } from 'marked';
-import { sanitize } from '$lib/cal/sanitize';
-import { getProfileUrl } from '$lib/atproto/profile-url';
-import type { FlatEventRecord } from '$lib/contrail';
+import { sanitize } from '../cal/sanitize.js';
+import { getProfileUrl } from '../profile-url.js';
+import type { FlatEventRecord } from '../contrail.js';
 
 export function formatMonth(date: Date): string {
 	return date.toLocaleDateString('en-US', { month: 'short' }).toUpperCase();
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 8683070..1a76e99 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,3 +1,54 @@
-// Public entry point for @atmo-dev/events-ui.
-// Components and types will be re-exported here as they migrate from apps/web.
-export {};
+// Components
+export { default as EventView } from './EventView.svelte';
+export { default as EventEditor } from './EventEditor.svelte';
+export { default as EventCard } from './EventCard.svelte';
+export { default as EventRsvp } from './EventRsvp.svelte';
+export { default as EventComments } from './EventComments.svelte';
+export { default as EventAttendees } from './EventAttendees.svelte';
+export { default as VodPlayer } from './VodPlayer.svelte';
+export { default as VodTranscript } from './VodTranscript.svelte';
+
+// Adapter contract
+export type {
+	EditorAdapter,
+	EditorBlobRef,
+	EditorViewer
+} from './editor/adapter.js';
+
+// Domain types
+export type {
+	FlatEventRecord,
+	HostProfile,
+	AttendeeInfo
+} from './contrail.js';
+export type {
+	EventData,
+	EventLexiconMain,
+	EventLocationVariant,
+	EventStatus,
+	EventMode as EventLexiconMode
+} from './event-types.js';
+export type { EventTheme } from './theme.js';
+
+// Theme values
+export {
+	defaultTheme,
+	themeBackgrounds,
+	randomAccentColor,
+	accentColors
+} from './theme.js';
+
+// Event helpers
+export { eventUrl, isEventOngoing, RSVP_GOING, RSVP_INTERESTED } from './contrail.js';
+
+// Atproto helpers (browser-safe, no client/session state)
+export { getCDNImageBlobUrl, compressImage } from './atproto-helpers.js';
+export { getProfileUrl } from './profile-url.js';
+
+// Date/time helpers
+export {
+	datetimeLocalToISO,
+	isoToDatetimeLocalInTz,
+	formatInTz,
+	partsInTz
+} from './date-format.js';
diff --git a/apps/web/src/lib/atproto/profile-url.ts b/packages/ui/src/profile-url.ts
similarity index 100%
rename from apps/web/src/lib/atproto/profile-url.ts
rename to packages/ui/src/profile-url.ts
diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts
new file mode 100644
index 0000000..efe8503
--- /dev/null
+++ b/packages/ui/src/theme.ts
@@ -0,0 +1,31 @@
+export interface EventTheme {
+	name: string;
+	accentColor: string;
+	baseColor: string;
+}
+
+export const accentColors = [
+	'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald',
+	'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple',
+	'fuchsia', 'pink', 'rose'
+] as const;
+
+export const defaultTheme: EventTheme = {
+	name: 'minimal',
+	accentColor: 'cyan',
+	baseColor: 'mist'
+};
+
+export function randomAccentColor(): string {
+	return accentColors[Math.floor(Math.random() * accentColors.length)];
+}
+
+export const themeBackgrounds: Record<string, string> = {
+	minimal: 'Minimal',
+	blobs: 'Blobs',
+	warp: 'Stars',
+	matrix: 'Matrix',
+	fireflies: 'Fireflies',
+	butterflies: 'Butterflies',
+	kaleidoscope: 'Kaleidoscope'
+};
diff --git a/apps/web/src/lib/components/themes/Blobs.svelte b/packages/ui/src/themes/Blobs.svelte
similarity index 100%
rename from apps/web/src/lib/components/themes/Blobs.svelte
rename to packages/ui/src/themes/Blobs.svelte
diff --git a/apps/web/src/lib/components/themes/Butterflies.svelte b/packages/ui/src/themes/Butterflies.svelte
similarity index 99%
rename from apps/web/src/lib/components/themes/Butterflies.svelte
rename to packages/ui/src/themes/Butterflies.svelte
index 645e2d3..69cc492 100644
--- a/apps/web/src/lib/components/themes/Butterflies.svelte
+++ b/packages/ui/src/themes/Butterflies.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
+	import { BROWSER as browser } from 'esm-env';
 
 	let canvas: HTMLCanvasElement | undefined = $state(undefined);
 
diff --git a/apps/web/src/lib/components/themes/Fireflies.svelte b/packages/ui/src/themes/Fireflies.svelte
similarity index 98%
rename from apps/web/src/lib/components/themes/Fireflies.svelte
rename to packages/ui/src/themes/Fireflies.svelte
index 5082bf8..d0444dc 100644
--- a/apps/web/src/lib/components/themes/Fireflies.svelte
+++ b/packages/ui/src/themes/Fireflies.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
+	import { BROWSER as browser } from 'esm-env';
 
 	let canvas: HTMLCanvasElement | undefined = $state(undefined);
 
diff --git a/apps/web/src/lib/components/themes/Kaleidoscope.svelte b/packages/ui/src/themes/Kaleidoscope.svelte
similarity index 99%
rename from apps/web/src/lib/components/themes/Kaleidoscope.svelte
rename to packages/ui/src/themes/Kaleidoscope.svelte
index d43462c..475fa23 100644
--- a/apps/web/src/lib/components/themes/Kaleidoscope.svelte
+++ b/packages/ui/src/themes/Kaleidoscope.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
+	import { BROWSER as browser } from 'esm-env';
 
 	let canvas: HTMLCanvasElement | undefined = $state(undefined);
 
diff --git a/apps/web/src/lib/components/themes/Matrix.svelte b/packages/ui/src/themes/Matrix.svelte
similarity index 98%
rename from apps/web/src/lib/components/themes/Matrix.svelte
rename to packages/ui/src/themes/Matrix.svelte
index afc58e9..c818195 100644
--- a/apps/web/src/lib/components/themes/Matrix.svelte
+++ b/packages/ui/src/themes/Matrix.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
+	import { BROWSER as browser } from 'esm-env';
 
 	let canvas: HTMLCanvasElement | undefined = $state(undefined);
 
diff --git a/apps/web/src/lib/components/themes/Stars.svelte b/packages/ui/src/themes/Stars.svelte
similarity index 98%
rename from apps/web/src/lib/components/themes/Stars.svelte
rename to packages/ui/src/themes/Stars.svelte
index 1e91c34..902b9e9 100644
--- a/apps/web/src/lib/components/themes/Stars.svelte
+++ b/packages/ui/src/themes/Stars.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
+	import { BROWSER as browser } from 'esm-env';
 
 	let canvas: HTMLCanvasElement | undefined = $state(undefined);
 
diff --git a/apps/web/src/lib/components/thumbnails/designs.ts b/packages/ui/src/thumbnails/designs.ts
similarity index 100%
rename from apps/web/src/lib/components/thumbnails/designs.ts
rename to packages/ui/src/thumbnails/designs.ts
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index c2a35f5..0804a59 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,18 +1,8 @@
 {
+	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
-		"target": "ES2022",
-		"module": "ESNext",
-		"moduleResolution": "Bundler",
 		"strict": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"forceConsistentCasingInFileNames": true,
 		"declaration": true,
-		"declarationMap": false,
-		"sourceMap": true,
-		"types": ["svelte"]
-	},
-	"include": ["src/**/*.ts", "src/**/*.svelte"]
+		"sourceMap": true
+	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 716447c..9c0dca4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@atmo-dev/contrail':
         specifier: ^0.5.0
         version: 0.5.0(wrangler@4.77.0(@cloudflare/workers-types@4.20260317.1))
+      '@atmo-dev/events-ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
       '@ethercorps/sveltekit-og':
         specifier: ^4.2.1
         version: 4.2.1(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))
@@ -157,8 +160,8 @@ importers:
         specifier: ^5.55.0
         version: 5.55.0
       svelte-check:
-        specifier: ^4.4.5
-        version: 4.4.5(picomatch@4.0.4)(svelte@5.55.0)(typescript@6.0.2)
+        specifier: ^4.4.8
+        version: 4.4.8(picomatch@4.0.4)(svelte@5.55.0)(typescript@6.0.2)
       svelte-tiptap:
         specifier: ^3.0.1
         version: 3.0.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/extension-bubble-menu@3.20.5(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5))(@tiptap/extension-floating-menu@3.20.5(@floating-ui/dom@1.7.6)(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5)(svelte@5.55.0)
@@ -183,36 +186,21 @@ importers:
 
   packages/ui:
     dependencies:
+      '@atcute/bluesky-richtext-parser':
+        specifier: ^2.1.1
+        version: 2.1.1
       '@atcute/tid':
         specifier: ^1.1.2
         version: 1.1.2
       '@atmo-dev/contrail-lexicons':
         specifier: ^0.4.4
         version: 0.4.4(wrangler@4.77.0(@cloudflare/workers-types@4.20260317.1))
-      '@foxui/core':
-        specifier: ^0.9.0
-        version: 0.9.1(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(tailwindcss@4.2.2)
-      '@foxui/social':
-        specifier: ^0.8.0
-        version: 0.8.10(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(@tiptap/extension-code-block@3.20.5(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5))(@tiptap/extensions@3.20.5(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5))(highlight.js@11.11.1)(svelte@5.55.0)(tailwindcss@4.2.2)
-      '@foxui/text':
-        specifier: ^0.8.0
-        version: 0.8.5(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(@tiptap/extension-code-block@3.20.5(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5))(@tiptap/extensions@3.20.5(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5))(highlight.js@11.11.1)(svelte@5.55.0)(tailwindcss@4.2.2)
-      '@foxui/time':
-        specifier: ^0.8.0
-        version: 0.8.5(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(tailwindcss@4.2.2)
-      '@foxui/visual':
-        specifier: ^0.8.0
-        version: 0.8.7(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(tailwindcss@4.2.2)
       '@internationalized/date':
         specifier: ^3.12.0
         version: 3.12.0
       '@number-flow/svelte':
         specifier: ^0.4.0
         version: 0.4.0(svelte@5.55.0)
-      bits-ui:
-        specifier: ^2.16.0
-        version: 2.16.3(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)
       dompurify:
         specifier: ^3.3.3
         version: 3.3.3
@@ -228,13 +216,25 @@ importers:
       svelte-tiptap:
         specifier: ^3.0.1
         version: 3.0.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/extension-bubble-menu@3.20.5(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5))(@tiptap/extension-floating-menu@3.20.5(@floating-ui/dom@1.7.6)(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5)(svelte@5.55.0)
-      tailwindcss:
-        specifier: ^4.0.0
-        version: 4.2.2
       valibot:
         specifier: ^1.3.1
         version: 1.3.1(typescript@6.0.2)
     devDependencies:
+      '@foxui/core':
+        specifier: ^0.9.1
+        version: 0.9.1(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(tailwindcss@4.2.2)
+      '@foxui/social':
+        specifier: ^0.8.10
+        version: 0.8.10(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(@tiptap/extension-code-block@3.20.5(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5))(@tiptap/extensions@3.20.5(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5))(highlight.js@11.11.1)(svelte@5.55.0)(tailwindcss@4.2.2)
+      '@foxui/text':
+        specifier: ^0.8.5
+        version: 0.8.5(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(@tiptap/extension-code-block@3.20.5(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5))(@tiptap/extensions@3.20.5(@tiptap/core@3.22.5(@tiptap/pm@3.20.5))(@tiptap/pm@3.20.5))(highlight.js@11.11.1)(svelte@5.55.0)(tailwindcss@4.2.2)
+      '@foxui/time':
+        specifier: ^0.8.5
+        version: 0.8.5(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(tailwindcss@4.2.2)
+      '@foxui/visual':
+        specifier: ^0.8.7
+        version: 0.8.7(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(tailwindcss@4.2.2)
       '@sveltejs/kit':
         specifier: ^2.55.0
         version: 2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0))
@@ -244,6 +244,18 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^7.0.0
         version: 7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0))
+      bits-ui:
+        specifier: ^2.16.3
+        version: 2.16.3(@internationalized/date@3.12.0)(@sveltejs/kit@2.55.0(@sveltejs/vite-plugin-svelte@7.0.0(svelte@5.55.0)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)(typescript@6.0.2)(vite@8.0.3(@types/node@25.0.10)(esbuild@0.27.4)(jiti@2.6.1)(tsx@4.21.0)))(svelte@5.55.0)
+      hls.js:
+        specifier: ^1.6.15
+        version: 1.6.15
+      maplibre-gl:
+        specifier: ^5.21.1
+        version: 5.21.1
+      plyr:
+        specifier: ^3.8.4
+        version: 3.8.4
       publint:
         specifier: ^0.3.16
         version: 0.3.19
@@ -251,8 +263,14 @@ importers:
         specifier: ^5.55.0
         version: 5.55.0
       svelte-check:
-        specifier: ^4.4.5
-        version: 4.4.5(picomatch@4.0.4)(svelte@5.55.0)(typescript@6.0.2)
+        specifier: ^4.4.8
+        version: 4.4.8(picomatch@4.0.4)(svelte@5.55.0)(typescript@6.0.2)
+      svelte-maplibre-gl:
+        specifier: ^1.0.3
+        version: 1.0.3(maplibre-gl@5.21.1)(svelte@5.55.0)
+      tailwindcss:
+        specifier: ^4.2.2
+        version: 4.2.2
       typescript:
         specifier: ^6.0.2
         version: 6.0.2
@@ -2760,8 +2778,8 @@ packages:
   svelte-boring-avatars@1.2.6:
     resolution: {integrity: sha512-8+Z1DhsMUVI/V/5ik00Arw0PgbJcMdhTXq3YGqccBc5bYFeceCtMEMB0aWGhi8xFV+0aqZbWvS89Hcj16LlfHA==}
 
-  svelte-check@4.4.5:
-    resolution: {integrity: sha512-1bSwIRCvvmSHrlK52fOlZmVtUZgil43jNL/2H18pRpa+eQjzGt6e3zayxhp1S7GajPFKNM/2PMCG+DZFHlG9fw==}
+  svelte-check@4.4.8:
+    resolution: {integrity: sha512-67adfgBox5eNSNIvIIwgFizKGdcRrGpiMoNO2obHcYuLz7iTa8Xgm/NGU3ntMFnNm8K1grFOIG6HhMLX/vcN8w==}
     engines: {node: '>= 18.0.0'}
     hasBin: true
     peerDependencies:
@@ -5597,7 +5615,7 @@ snapshots:
 
   svelte-boring-avatars@1.2.6: {}
 
-  svelte-check@4.4.5(picomatch@4.0.4)(svelte@5.55.0)(typescript@6.0.2):
+  svelte-check@4.4.8(picomatch@4.0.4)(svelte@5.55.0)(typescript@6.0.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       chokidar: 4.0.3
-- 
2.51.2