@atmo-dev/kit 0.8.0 → 0.10.0

package/dist/events/EventCard.svelte

@@ -86,7 +86,7 @@
 
 <a
 	href={eventUrl(event, actor)}
-	class="group grid grid-cols-[5rem_minmax(0,1fr)] gap-3 rounded-ui outline-offset-4 transition-colors focus-visible:outline-2 focus-visible:outline-focus sm:grid-cols-[6rem_minmax(0,1fr)] sm:gap-3.5"
+	class="group grid grid-cols-[5rem_minmax(0,1fr)] gap-3 rounded-ui outline-offset-4 transition-colors focus-visible:outline-2 focus-visible:outline-accent-700 sm:grid-cols-[6rem_minmax(0,1fr)] sm:gap-3.5 dark:focus-visible:outline-accent-300"
 >
 	<div class="w-full">
 		{#if thumbnail}
@@ -94,11 +94,11 @@
 				src={thumbnail.url}
 				alt={thumbnail.alt}
 				loading="lazy"
-				class="block aspect-square w-full rounded-[14px_12px_15px_13px] border border-line object-cover"
+				class="block aspect-square w-full rounded-[14px_12px_15px_13px] border border-base-300 object-cover dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
 			/>
 		{:else}
 			<div
-				class="aspect-square w-full overflow-hidden rounded-[14px_12px_15px_13px] border border-line [&>svg]:h-full [&>svg]:w-full"
+				class="aspect-square w-full overflow-hidden rounded-[14px_12px_15px_13px] border border-base-300 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] [&>svg]:h-full [&>svg]:w-full"
 			>
 				<Avatar
 					size={96}
@@ -112,7 +112,7 @@
 	</div>
 
 	<div class="min-w-0 self-center">
-		<p class="flex items-center gap-1.5 text-xs font-medium text-muted">
+		<p class="flex items-center gap-1.5 text-xs font-medium text-base-600 dark:text-base-400">
 			<Icon img={CalendarDays} size={14} class="shrink-0" />
 			{#if isOngoing && event.endsAt}
 				Ends {formatEndsAt(event.endsAt)}
@@ -132,7 +132,9 @@
 			<span class="line-clamp-2">{event.name}</span>
 		</h3>
 		{#if location || mode}
-			<p class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
+			<p
+				class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-base-600 dark:text-base-400"
+			>
 				{#if location}
 					<span class="inline-flex max-w-full min-w-0 items-center gap-1.5" title={location}>
 						<Icon img={MapPin} size={14} class="shrink-0" />

package/dist/events/EventComments.svelte

@@ -80,11 +80,11 @@
 	{/if}
 
 	{#if loading}
-		<p class="text-sm text-muted">Loading comments…</p>
+		<p class="text-sm text-base-600 dark:text-base-400">Loading comments…</p>
 	{:else if errorMessage}
-		<p class="text-sm text-muted">{errorMessage}</p>
+		<p class="text-sm text-base-600 dark:text-base-400">{errorMessage}</p>
 	{:else if comments.length === 0}
-		<p class="text-sm text-muted">No comments yet.</p>
+		<p class="text-sm text-base-600 dark:text-base-400">No comments yet.</p>
 	{:else}
 		<div class="not-prose comments-no-divider">
 			<NestedComments {comments} {socialClient} />

package/dist/events/EventEditor.svelte

@@ -4,8 +4,8 @@
 	import { Avatar, Button, ToggleGroup, ToggleGroupItem } from '../index.js';
 	import { onMount, untrack } from 'svelte';
 	import { InlineEditor, type Editor } from '../index.js';
-	import DateTimePicker from './DateTimePicker.svelte';
-	import TimezonePicker from './TimezonePicker.svelte';
+	import DateTimePicker from '../components/DateTimePicker.svelte';
+	import TimezonePicker from '../components/TimezonePicker.svelte';
 	import { parseDateTime } from '@internationalized/date';
 	import { isoToDatetimeLocalInTz } from './date-format.js';
 	import type { FlatEventRecord } from './contrail.js';
@@ -386,7 +386,7 @@
 								<ToggleGroupItem value="public">Public</ToggleGroupItem>
 								<ToggleGroupItem value="unlisted">Unlisted</ToggleGroupItem>
 							</ToggleGroup>
-							<div class="mt-1.5 text-xs text-muted">
+							<div class="mt-1.5 text-xs text-base-600 dark:text-base-400">
 								{#if visibility === 'public'}
 									Anyone can view and it appears in discovery.
 								{:else}
@@ -398,11 +398,11 @@
 						<!-- Date row -->
 						<div class="mb-5 grid min-w-0 gap-2">
 							<div class="flex min-w-0 items-center gap-2">
-								<span class="w-9 shrink-0 text-sm text-muted">Start</span>
+								<span class="w-9 shrink-0 text-sm text-base-600 dark:text-base-400">Start</span>
 								<DateTimePicker bind:value={startsAt} label="Start" required />
 							</div>
 							<div class="flex min-w-0 items-center gap-2">
-								<span class="w-9 shrink-0 text-sm text-muted">End</span>
+								<span class="w-9 shrink-0 text-sm text-base-600 dark:text-base-400">End</span>
 								<DateTimePicker
 									bind:value={endsAt}
 									label="End"
@@ -419,7 +419,11 @@
 
 						<!-- About Event -->
 						<div class="mt-8 mb-8">
-							<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">About</p>
+							<p
+								class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+							>
+								About
+							</p>
 							<textarea
 								aria-label="Event description"
 								bind:value={description}
@@ -427,11 +431,14 @@
 								placeholder="What's this event about? @mentions, #hashtags and links will be detected automatically."
 								class="w-full resize-none border-0 bg-transparent px-0 leading-relaxed text-base-700 placeholder:text-base-500 focus:border-0 focus:ring-0 focus:outline-none dark:text-base-300 dark:placeholder:text-base-500"
 								style="field-sizing: content;"></textarea>
-							<p class="mt-2 text-xs text-muted">
+							<p class="mt-2 text-xs text-base-600 dark:text-base-400">
 								Add a hashtag like <span class="font-medium">#webdev</span> or
 								<span class="font-medium">#music</span>
 								to have this event appear under a
-								<a href="/topics" class="text-action underline underline-offset-2">topic</a>.
+								<a
+									href="/topics"
+									class="text-accent-700 underline underline-offset-2 dark:text-accent-300">topic</a
+								>.
 							</p>
 						</div>
 
@@ -462,7 +469,11 @@
 
 					<!-- Hosted By -->
 					<div class="order-3 md:order-0 md:col-start-1">
-						<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Hosted By</p>
+						<p
+							class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+						>
+							Hosted By
+						</p>
 						<div class="flex items-center gap-2.5">
 							<Avatar src={viewer.avatar} name={hostName} class="size-8 shrink-0" />
 							<span class="truncate text-sm font-medium text-base-900 dark:text-base-100">

package/dist/events/EventRsvp.svelte

@@ -98,7 +98,7 @@
 
 {#if rsvpExpected !== false || (viewer.isLoggedIn && rsvpStatus)}
 	<div
-		class="mt-7 mb-2 flex min-h-25 flex-col justify-center rounded-panel bg-recess p-4 [box-shadow:var(--ui-recess-shadow)]"
+		class="mt-7 mb-2 flex min-h-25 flex-col justify-center rounded-panel bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] p-4 shadow-[inset_0_2px_4px_color-mix(in_srgb,var(--base-950)_8%,transparent),inset_0_5px_12px_color-mix(in_srgb,var(--base-950)_2%,transparent)] dark:bg-base-950 dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002]"
 	>
 		{#if !viewer.isLoggedIn}
 			<div class="flex items-center justify-between gap-4">
@@ -114,8 +114,10 @@
 		{:else if rsvpStatus === 'going'}
 			<div class="flex items-center justify-between">
 				<div class="flex items-center gap-3">
-					<div class="flex size-8 items-center justify-center rounded-full bg-accent-soft">
-						<Icon img={Check} size={16} class="text-action" />
+					<div
+						class="flex size-8 items-center justify-center rounded-full bg-accent-50 dark:bg-[color-mix(in_srgb,var(--accent-950)_65%,var(--base-950))]"
+					>
+						<Icon img={Check} size={16} class="text-accent-700 dark:text-accent-300" />
 					</div>
 					<p class="font-semibold text-base-900 dark:text-base-50">You're Going</p>
 				</div>
@@ -124,8 +126,10 @@
 		{:else if rsvpStatus === 'interested'}
 			<div class="flex items-center justify-between">
 				<div class="flex items-center gap-3">
-					<div class="flex size-8 items-center justify-center rounded-full bg-accent-soft">
-						<Icon img={Star} size={16} class="text-action" />
+					<div
+						class="flex size-8 items-center justify-center rounded-full bg-accent-50 dark:bg-[color-mix(in_srgb,var(--accent-950)_65%,var(--base-950))]"
+					>
+						<Icon img={Star} size={16} class="text-accent-700 dark:text-accent-300" />
 					</div>
 					<p class="font-semibold text-base-900 dark:text-base-50">You're Interested</p>
 				</div>
@@ -146,7 +150,7 @@
 		{:else}
 			{#if viewer.isLoggedIn}
 				<div class="mb-4 flex items-center gap-2">
-					<span class="text-sm text-muted">Attend as</span>
+					<span class="text-sm text-base-600 dark:text-base-400">Attend as</span>
 					<Avatar
 						src={viewer.avatar}
 						name={viewer.displayName || viewer.handle || viewer.did || 'Account'}

package/dist/events/EventView.svelte

@@ -260,7 +260,7 @@
 				src={displayImage.url}
 				alt={displayImage.alt}
 				loading="eager"
-				class="mb-8 block w-full rounded-panel border border-line object-cover"
+				class="mb-8 block w-full rounded-panel border border-base-300 object-cover dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
 				style:aspect-ratio={frameAspectRatio}
 			/>
 		{/if}
@@ -277,12 +277,12 @@
 							src={displayImage.url}
 							alt={displayImage.alt}
 							loading="eager"
-							class="block w-full rounded-panel border border-line object-cover"
+							class="block w-full rounded-panel border border-base-300 object-cover dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))]"
 							style:aspect-ratio={frameAspectRatio}
 						/>
 					{:else if !showBanner}
 						<div
-							class="aspect-square w-full overflow-hidden rounded-panel border border-line [&>svg]:h-full [&>svg]:w-full"
+							class="aspect-square w-full overflow-hidden rounded-panel border border-base-300 dark:border-[color-mix(in_srgb,var(--base-800)_80%,var(--base-950))] [&>svg]:h-full [&>svg]:w-full"
 						>
 							<Avatar
 								size={256}
@@ -328,7 +328,11 @@
 					<div
 						class="mt-8 mb-2 justify-center rounded-2xl border border-base-200 bg-base-100 p-4 dark:border-base-800 dark:bg-base-950/50"
 					>
-						<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Part of</p>
+						<p
+							class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+						>
+							Part of
+						</p>
 						<EventCard event={data.parentEvent} actor={parentActor} />
 						<Button
 							href={data.parentScheduleUrl ?? `/p/${parentActor}/e/${data.parentEvent.rkey}`}
@@ -361,7 +365,11 @@
 				<!-- Live stream -->
 				{#if isOngoing && streamPlaceHandle}
 					<div class="mt-8 mb-8">
-						<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Live now</p>
+						<p
+							class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+						>
+							Live now
+						</p>
 						<StreamPlacePlayer handle={streamPlaceHandle} title={eventData.name} />
 					</div>
 				{/if}
@@ -387,7 +395,9 @@
 									>{/each}
 							</ToggleGroup>
 						{:else}
-							<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">
+							<p
+								class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+							>
 								{contentTabs[0].label}
 							</p>
 						{/if}
@@ -423,7 +433,11 @@
 				<!-- Recording -->
 				{#if data.vod}
 					<div class="mt-8 mb-8">
-						<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Recording</p>
+						<p
+							class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400"
+						>
+							Recording
+						</p>
 						<VodPlayer
 							playlistUrl={data.vod.playlistUrl}
 							title={eventData.name}

package/dist/events/StarterPackButton.svelte

@@ -46,13 +46,13 @@
 </script>
 
 <div class="mt-4">
-	<p class="mb-1 text-xs text-muted">Follow attendees on {clientLabel}.</p>
+	<p class="mb-1 text-xs text-base-600 dark:text-base-400">Follow attendees on {clientLabel}.</p>
 	{#if packUrl}
 		<a
 			href={packUrl}
 			target="_blank"
 			rel="noopener noreferrer"
-			class="rounded text-sm text-action underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-focus"
+			class="rounded text-sm text-accent-700 underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent-700 dark:text-accent-300 dark:focus-visible:outline-accent-300"
 			>Starter pack ↗</a
 		>
 	{:else}
@@ -67,6 +67,6 @@
 		</Button>
 	{/if}
 	{#if message}
-		<p role="alert" class="mt-2 text-sm text-muted">{message}</p>
+		<p role="alert" class="mt-2 text-sm text-base-600 dark:text-base-400">{message}</p>
 	{/if}
 </div>

package/dist/events/ThemePicker.svelte

@@ -45,7 +45,7 @@
 <div class="flex flex-col gap-6">
 	<!-- Theme background -->
 	<div>
-		<p class="mb-2 text-xs font-medium text-muted">Background style</p>
+		<p class="mb-2 text-xs font-medium text-base-600 dark:text-base-400">Background style</p>
 		<div class="flex flex-wrap gap-2">
 			{#each bgKeys as key (key)}
 				<button
@@ -66,7 +66,7 @@
 
 	<!-- Accent color -->
 	<div>
-		<p class="mb-2 text-xs font-medium text-muted">Accent color</p>
+		<p class="mb-2 text-xs font-medium text-base-600 dark:text-base-400">Accent color</p>
 		<div class="flex flex-wrap gap-2">
 			{#each accentColors as color (color.label)}
 				<button
@@ -75,8 +75,8 @@
 					aria-pressed={theme.accentColor === color.label}
 					class="size-7 cursor-pointer rounded-full border-2 transition-all {color.cls}
 						{theme.accentColor === color.label
-						? 'border-white ring-2 ring-control-line'
-						: 'border-transparent hover:border-control-line'}"
+						? 'border-white ring-2 ring-base-300 dark:ring-base-800'
+						: 'border-transparent hover:border-base-300 dark:hover:border-base-800'}"
 					onclick={() => (theme = { ...theme, accentColor: color.label })}
 				></button>
 			{/each}
@@ -85,7 +85,7 @@
 
 	<!-- Base color -->
 	<div>
-		<p class="mb-2 text-xs font-medium text-muted">Base color</p>
+		<p class="mb-2 text-xs font-medium text-base-600 dark:text-base-400">Base color</p>
 		<div class="flex flex-wrap gap-2">
 			{#each baseColors as color (color.label)}
 				<button
@@ -94,8 +94,8 @@
 					aria-pressed={theme.baseColor === color.label}
 					class="size-7 cursor-pointer rounded-full border-2 transition-all {color.cls}
 						{theme.baseColor === color.label
-						? 'border-white ring-2 ring-control-line'
-						: 'border-transparent hover:border-control-line'}"
+						? 'border-white ring-2 ring-base-300 dark:ring-base-800'
+						: 'border-transparent hover:border-base-300 dark:hover:border-base-800'}"
 					onclick={() => (theme = { ...theme, baseColor: color.label })}
 				></button>
 			{/each}

package/dist/events/ThumbnailPresets.svelte

@@ -49,7 +49,7 @@
 </script>
 
 <div class="flex flex-col gap-3">
-	<p class="text-xs font-medium text-muted">Preset thumbnails</p>
+	<p class="text-xs font-medium text-base-600 dark:text-base-400">Preset thumbnails</p>
 	<div class="grid grid-cols-3 gap-2" bind:this={containerEl}>
 		{#each presetKeys as key (key)}
 			<button

package/dist/events/VodPlayer.svelte

@@ -136,7 +136,7 @@
 	<div
 		class="flex aspect-video w-full items-center justify-center rounded-xl border border-base-200 bg-base-100 dark:border-base-800 dark:bg-base-900"
 	>
-		<p class="text-sm text-muted">Failed to load video</p>
+		<p class="text-sm text-base-600 dark:text-base-400">Failed to load video</p>
 	</div>
 {:else}
 	<div

package/dist/events/editor/LinksSection.svelte

@@ -65,7 +65,7 @@
 		<Icon
 			img={provider === 'grain' ? Camera : provider === 'stream' ? Video : LinkIcon}
 			size={16}
-			class="shrink-0 text-muted"
+			class="shrink-0 text-base-600 dark:text-base-400"
 		/>
 		<div class="min-w-0 flex-1">
 			<p class="truncate text-sm">
@@ -89,13 +89,17 @@
 
 <div>
 	{#if ordinary.length}
-		<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Links</p>
+		<p class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400">
+			Links
+		</p>
 		<div class="mb-4 space-y-3">
 			{#each ordinary as link, i (i)}{@render row(link)}{/each}
 		</div>
 	{/if}
 	{#if linked.length}
-		<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Linked records</p>
+		<p class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400">
+			Linked records
+		</p>
 		<div class="mb-4 space-y-3">
 			{#each linked as link, i (i)}{@render row(
 					link,

package/dist/events/editor/LocationSection.svelte

@@ -136,7 +136,7 @@
 					<p class="font-medium text-base-900 dark:text-base-50">
 						{getLocationDisplayString(result.location)}
 					</p>
-					<p class="mt-0.5 truncate text-xs text-muted">
+					<p class="mt-0.5 truncate text-xs text-base-600 dark:text-base-400">
 						{result.displayName}
 					</p>
 				</div>

package/dist/events/editor/RecurringModal.svelte

@@ -219,7 +219,9 @@
 </script>
 
 <Modal bind:open title="Recurring events" dismissible={!creating}>
-	<p class="mt-1 text-sm text-muted">Create multiple copies of this event at regular intervals.</p>
+	<p class="mt-1 text-sm text-base-600 dark:text-base-400">
+		Create multiple copies of this event at regular intervals.
+	</p>
 
 	<div class="mt-4 space-y-4">
 		<div>
@@ -276,7 +278,7 @@
 				<Checkbox bind:checked={numberInTitle} disabled={creating} aria-label="Number in title" />
 				<span class="text-sm font-medium text-base-700 dark:text-base-300">Number in title</span>
 			</div>
-			<p class="mt-1 text-xs text-muted">
+			<p class="mt-1 text-xs text-base-600 dark:text-base-400">
 				{#if numberInTitle && detectedStartNumber !== null}
 					Titles will count up from #{detectedStartNumber + 1}
 				{:else if numberInTitle}
@@ -293,13 +295,13 @@
 	{/if}
 
 	{#if creating && created > 0}
-		<p class="mt-4 text-sm text-muted">
+		<p class="mt-4 text-sm text-base-600 dark:text-base-400">
 			Created {created} of {count} events...
 		</p>
 	{/if}
 
 	{#if created > 0 && !creating}
-		<p class="mt-4 text-sm text-action">
+		<p class="mt-4 text-sm text-accent-700 dark:text-accent-300">
 			Successfully created {created} recurring events!
 		</p>
 	{/if}

package/dist/events/editor/ThemeSection.svelte

@@ -10,7 +10,9 @@
 </script>
 
 <div>
-	<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Theme</p>
+	<p class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400">
+		Theme
+	</p>
 	<Button variant="secondary" size="sm" onclick={() => (showModal = true)}>
 		<Icon img={Palette} size={16} />
 		{themeBackgrounds[theme.name] || theme.name}

package/dist/events/event-view/EventDateBlock.svelte

@@ -14,9 +14,9 @@
 
 <div class="mb-4 flex items-center gap-4">
 	<div
-		class="flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-ui bg-recess [box-shadow:var(--ui-recess-shadow)]"
+		class="flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-ui bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] shadow-[inset_0_2px_4px_color-mix(in_srgb,var(--base-950)_8%,transparent),inset_0_5px_12px_color-mix(in_srgb,var(--base-950)_2%,transparent)] dark:bg-base-950 dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002]"
 	>
-		<span class="text-[9px] leading-none font-semibold text-muted">
+		<span class="text-[9px] leading-none font-semibold text-base-600 dark:text-base-400">
 			{formatMonth(startDate)}
 		</span>
 		<span class="text-lg leading-tight font-bold text-base-900 dark:text-base-50">
@@ -30,7 +30,7 @@
 				- {formatWeekday(endDate)}, {formatFullDate(endDate)}
 			{/if}
 		</p>
-		<p class="flex flex-wrap items-center gap-2 text-sm text-muted">
+		<p class="flex flex-wrap items-center gap-2 text-sm text-base-600 dark:text-base-400">
 			<span>
 				{formatTime(startDate)}
 				{#if endDate && isSameDay}

package/dist/events/event-view/EventHostedBy.svelte

@@ -18,7 +18,9 @@
 </script>
 
 <div>
-	<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Hosted By</p>
+	<p class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400">
+		Hosted By
+	</p>
 	<a
 		href={hostUrl}
 		class="flex items-center gap-2.5 font-medium text-base-900 transition-opacity hover:opacity-80 dark:text-base-100"
@@ -36,7 +38,9 @@
 
 {#if speakers.length > 0}
 	<div>
-		<p class="mb-3 text-xs font-semibold tracking-wider text-muted uppercase">Speakers</p>
+		<p class="mb-3 text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400">
+			Speakers
+		</p>
 		<div class="space-y-2">
 			{#each speakers as speaker, i (speaker.id || i)}
 				{#if speaker.handle}

package/dist/events/event-view/EventLinksList.svelte

@@ -1,19 +1,28 @@
 <script lang="ts">
 	import { Icon } from '../../index.js';
 	import { Link } from '@sketchyicons/svelte';
+	import { safeHttpUrl } from '../../urls.js';
 	let { uris = [] }: { uris?: Array<{ uri: string; name?: string }> } = $props();
+	let links = $derived(
+		uris.flatMap((link) => {
+			const uri = safeHttpUrl(link?.uri);
+			return uri ? [{ ...link, uri }] : [];
+		})
+	);
 </script>
 
-{#if uris.length}
+{#if links.length}
 	<div>
-		<p class="mb-3 text-xs font-medium text-muted">Links</p>
+		<p class="mb-3 text-xs font-medium text-base-600 dark:text-base-400">Links</p>
 		<div class="space-y-3">
-			{#each uris as link (link.name + link.uri)}
+			<!-- These rows are stateless; equivalent URLs and exact duplicate entries are valid. -->
+			<!-- eslint-disable-next-line svelte/require-each-key -->
+			{#each links as link}
 				<a
 					href={link.uri}
 					target="_blank"
 					rel="noopener noreferrer"
-					class="flex items-center gap-2 rounded-sm text-sm text-muted transition-colors hover:text-action"
+					class="flex items-center gap-2 rounded-sm text-sm text-base-600 transition-colors hover:text-accent-700 dark:text-base-400 dark:hover:text-accent-300"
 					><Icon img={Link} size={15} /><span class="truncate"
 						>{link.name || link.uri.replace(/^https?:\/\//, '')}</span
 					></a

package/dist/events/event-view/EventLocationBlock.svelte

@@ -13,13 +13,17 @@
 		{#if physicalLines.length}
 			<li class="flex min-w-0 items-center gap-4">
 				<div
-					class="flex size-12 shrink-0 items-center justify-center rounded-ui bg-recess text-muted [box-shadow:var(--ui-recess-shadow)]"
+					class="flex size-12 shrink-0 items-center justify-center rounded-ui bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] text-base-600 shadow-[inset_0_2px_4px_color-mix(in_srgb,var(--base-950)_8%,transparent),inset_0_5px_12px_color-mix(in_srgb,var(--base-950)_2%,transparent)] dark:bg-base-950 dark:text-base-400 dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002]"
 				>
 					<Icon img={MapPin} size={22} />
 				</div>
 				<div class="min-w-0 [overflow-wrap:anywhere]">
 					{#each physicalLines as line, i (i)}
-						<p class={line.muted ? 'text-sm text-muted' : 'font-semibold text-ink'}>
+						<p
+							class={line.muted
+								? 'text-sm text-base-600 dark:text-base-400'
+								: 'font-semibold text-base-950 dark:text-base-50'}
+						>
 							<svelte:element
 								this={line.href ? 'a' : 'span'}
 								href={line.href}
@@ -45,14 +49,14 @@
 						: ''}"
 				>
 					<div
-						class="flex size-12 shrink-0 items-center justify-center rounded-ui bg-recess text-muted [box-shadow:var(--ui-recess-shadow)]"
+						class="flex size-12 shrink-0 items-center justify-center rounded-ui bg-[color-mix(in_srgb,var(--base-100)_75%,var(--base-200))] text-base-600 shadow-[inset_0_2px_4px_color-mix(in_srgb,var(--base-950)_8%,transparent),inset_0_5px_12px_color-mix(in_srgb,var(--base-950)_2%,transparent)] dark:bg-base-950 dark:text-base-400 dark:shadow-[inset_0_2px_4px_#0006,inset_0_5px_12px_#0002]"
 					>
 						<Icon img={Link} size={22} />
 					</div>
 					<div class="min-w-0 [overflow-wrap:anywhere]">
-						<p class="font-semibold text-ink">{location.label}</p>
+						<p class="font-semibold text-base-950 dark:text-base-50">{location.label}</p>
 						{#if location.detail}
-							<p class="text-sm text-muted">{location.detail}</p>
+							<p class="text-sm text-base-600 dark:text-base-400">{location.detail}</p>
 						{/if}
 					</div>
 				</svelte:element>

package/dist/events/event-view/EventLocationMap.svelte

@@ -23,7 +23,9 @@
 {#if geoLocation}
 	<div class="mt-8 mb-8">
 		<div class="mb-3 flex items-baseline gap-2">
-			<p class="text-xs font-semibold tracking-wider text-muted uppercase">Location:</p>
+			<p class="text-xs font-semibold tracking-wider text-base-600 uppercase dark:text-base-400">
+				Location:
+			</p>
 			<button
 				type="button"
 				onclick={copyCoords}
@@ -42,7 +44,7 @@
 		<p class="mt-3 text-sm [overflow-wrap:anywhere] text-base-700 dark:text-base-200">
 			{geoLocation.label}
 		</p>
-		<p class="mt-1 text-xs text-muted">
+		<p class="mt-1 text-xs text-base-600 dark:text-base-400">
 			Open in
 			<a
 				href={geoLocation.googleMapsUrl}

package/dist/events/event-view/ExternalRsvpNotice.svelte

@@ -1,34 +1,38 @@
 <script lang="ts">
 	import { ArrowUpRight } from '@sketchyicons/svelte';
 	import { Button, Icon } from '../../index.js';
+	import { safeHttpUrl } from '../../urls.js';
 
 	// Shown in place of the RSVP controls for imported events whose host opted out
 	// of atmo RSVPs (additionalData.externalSource.rsvpMode === 'external_only').
 	// Directs attendees to the original event page instead.
 	let { url }: { url: string } = $props();
 
+	let href = $derived(safeHttpUrl(url));
 	let host = $derived.by(() => {
 		try {
-			return new URL(url).hostname.replace(/^www\./, '');
+			return new URL(href ?? '').hostname.replace(/^www\./, '');
 		} catch {
 			return null;
 		}
 	});
 </script>
 
-<div
-	class="mt-8 mb-2 flex flex-col gap-3 rounded-2xl border border-base-200 bg-base-100 p-4 sm:flex-row sm:items-center sm:justify-between dark:border-base-800 dark:bg-base-950/50"
->
-	<div class="min-w-0">
-		<p class="text-sm font-semibold text-base-900 dark:text-base-50">RSVP on the original page</p>
-		<p class="mt-0.5 text-xs text-base-600 dark:text-base-400">
-			{host
-				? `This event is hosted on ${host}. Head there to RSVP.`
-				: 'This event is hosted elsewhere. Open the original page to RSVP.'}
-		</p>
+{#if href}
+	<div
+		class="mt-8 mb-2 flex flex-col gap-3 rounded-2xl border border-base-200 bg-base-100 p-4 sm:flex-row sm:items-center sm:justify-between dark:border-base-800 dark:bg-base-950/50"
+	>
+		<div class="min-w-0">
+			<p class="text-sm font-semibold text-base-900 dark:text-base-50">RSVP on the original page</p>
+			<p class="mt-0.5 text-xs text-base-600 dark:text-base-400">
+				{host
+					? `This event is hosted on ${host}. Head there to RSVP.`
+					: 'This event is hosted elsewhere. Open the original page to RSVP.'}
+			</p>
+		</div>
+		<Button {href} target="_blank" rel="noopener noreferrer" class="shrink-0">
+			{host ? `RSVP on ${host}` : 'Open original event'}
+			<Icon img={ArrowUpRight} size={16} class="shrink-0" />
+		</Button>
 	</div>
-	<Button href={url} target="_blank" rel="noopener noreferrer" class="shrink-0">
-		{host ? `RSVP on ${host}` : 'Open original event'}
-		<Icon img={ArrowUpRight} size={16} class="shrink-0" />
-	</Button>
-</div>
+{/if}