@atmo-dev/kit 0.3.0 → 0.5.0

package/dist/events/event-view/locations.js

@@ -0,0 +1,243 @@
+function text(record, key) {
+    const value = record[key];
+    return typeof value === 'string' ? value.trim() || undefined : undefined;
+}
+function coordinates(record) {
+    const latitude = text(record, 'latitude');
+    const longitude = text(record, 'longitude');
+    const decimal = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)$/;
+    if (!latitude || !longitude || !decimal.test(latitude) || !decimal.test(longitude))
+        return;
+    const lat = Number(latitude);
+    const lng = Number(longitude);
+    if (!Number.isFinite(lat) || !Number.isFinite(lng) || Math.abs(lat) > 90 || Math.abs(lng) > 180)
+        return;
+    return { lat, lng };
+}
+function coordinateLabel({ lat, lng }) {
+    return `${lat.toFixed(5)}, ${lng.toFixed(5)}`;
+}
+function mapsUrl(query) {
+    return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(query)}`;
+}
+function webUrl(uri) {
+    try {
+        const url = new URL(uri);
+        if (url.protocol === 'https:' || url.protocol === 'http:')
+            return url.href;
+    }
+    catch {
+        // Invalid URLs render as non-interactive location text.
+    }
+    return undefined;
+}
+function formatLocation(value) {
+    if (!value || typeof value !== 'object')
+        return null;
+    const record = value;
+    const name = text(record, 'name');
+    switch (record.$type) {
+        case 'community.lexicon.location.address': {
+            const locality = text(record, 'locality');
+            const street = text(record, 'street');
+            const address = [
+                street,
+                locality,
+                text(record, 'region'),
+                text(record, 'postalCode'),
+                text(record, 'country')
+            ]
+                .filter(Boolean)
+                .join(', ');
+            const label = name ?? address;
+            if (!label)
+                return null;
+            const fullString = name && address && name !== address ? `${name}, ${address}` : label;
+            return {
+                kind: 'address',
+                name,
+                label,
+                detail: name && address !== name ? address || undefined : undefined,
+                href: mapsUrl(fullString),
+                summary: locality ?? name ?? street,
+                geocodeQuery: fullString
+            };
+        }
+        case 'community.lexicon.location.geo': {
+            const point = coordinates(record);
+            if (!point)
+                return null;
+            const coords = coordinateLabel(point);
+            return {
+                kind: 'geo',
+                name,
+                label: name ?? coords,
+                detail: name ? coords : undefined,
+                href: mapsUrl(`${point.lat},${point.lng}`),
+                summary: name ?? coords,
+                coordinates: point
+            };
+        }
+        case 'community.lexicon.location.fsq': {
+            const id = text(record, 'fsq_place_id');
+            if (!id)
+                return null;
+            return {
+                kind: 'fsq',
+                name,
+                label: name ?? `Foursquare: ${id}`,
+                href: `https://foursquare.com/v/${encodeURIComponent(id)}`,
+                summary: name ?? `Foursquare: ${id}`,
+                coordinates: coordinates(record)
+            };
+        }
+        case 'community.lexicon.location.hthree': {
+            const cell = text(record, 'value');
+            if (!cell)
+                return null;
+            return {
+                kind: 'hthree',
+                name,
+                label: name ?? `H3: ${cell}`,
+                detail: name ? `H3: ${cell}` : undefined,
+                summary: name ?? `H3: ${cell}`,
+                h3Cell: cell
+            };
+        }
+        case 'community.lexicon.calendar.event#uri': {
+            const uri = text(record, 'uri');
+            if (!uri)
+                return null;
+            // AT references describe a place, not a user-facing link. Without a
+            // supplied name there is nothing useful to show until it is resolved.
+            if (uri.startsWith('at://')) {
+                return name ? { kind: 'place', name, label: name, summary: name } : null;
+            }
+            return {
+                kind: 'uri',
+                label: name ?? uri,
+                detail: name && name !== uri ? uri : undefined,
+                href: webUrl(uri),
+                summary: name ?? uri
+            };
+        }
+        default:
+            return null;
+    }
+}
+/** Preserve record order and supported variants, keeping only the first entry for each URI. */
+export function getLocations(locations) {
+    if (!Array.isArray(locations))
+        return [];
+    const seenUris = new Set();
+    return locations.map(formatLocation).filter((location) => {
+        if (!location)
+            return false;
+        if (location.kind !== 'uri')
+            return true;
+        const uri = location.href ?? location.detail ?? location.label;
+        if (seenUris.has(uri))
+            return false;
+        seenUris.add(uri);
+        return true;
+    });
+}
+/** One pin for the place: venue names above addresses, coordinates only as a fallback. */
+export function getPhysicalLocationLines(locations) {
+    const physical = locations.filter((location) => location.kind !== 'uri');
+    const names = physical.filter((location) => location.name);
+    const mapHref = physical.find((location) => location.kind === 'address')?.href ??
+        physical.find((location) => location.coordinates)?.href;
+    const lines = names.map((location) => ({
+        label: location.name,
+        href: location.href ?? (location.kind === 'place' ? mapHref : undefined),
+        muted: false
+    }));
+    const hasDescription = names.length > 0 ||
+        locations.some((location) => location.kind !== 'geo' && location.kind !== 'hthree');
+    const hasAddress = physical.some((location) => location.kind === 'address');
+    for (const location of physical) {
+        if (location.kind === 'address') {
+            const label = location.name ? location.detail : location.label;
+            if (label)
+                lines.push({ label, href: location.href, muted: names.length > 0 });
+        }
+        else if (location.kind === 'fsq' && !location.name && !hasAddress) {
+            lines.push({ label: location.label, href: location.href, muted: false });
+        }
+        else if (!hasDescription && (location.kind === 'geo' || location.kind === 'hthree')) {
+            lines.push({ label: location.label, href: location.href, muted: false });
+        }
+    }
+    return lines.filter((line, index) => lines.findIndex((other) => other.label === line.label) === index);
+}
+/** Cards stay compact: prefer cities, falling back to the other physical variants. */
+export function getLocationSummary(locations) {
+    const physical = locations.filter((location) => location.kind !== 'uri' && location.summary);
+    const cities = physical.filter((location) => location.kind === 'address');
+    const links = locations.filter((location) => location.kind === 'uri');
+    const described = physical.filter((location) => location.name || location.kind === 'fsq');
+    const preferred = cities.length
+        ? cities
+        : described.length
+            ? described.slice(0, 1)
+            : links.length
+                ? []
+                : physical.slice(0, 1);
+    const labels = [...preferred, ...links].map((location) => location.summary);
+    return [...new Set(labels)].filter(Boolean).join(' · ') || undefined;
+}
+function geoLocation(point, label, osmType, osmId) {
+    const { lat, lng } = point;
+    return {
+        ...point,
+        label,
+        googleMapsUrl: mapsUrl(`${lat},${lng}`),
+        osmUrl: (osmType === 'node' || osmType === 'way' || osmType === 'relation') && osmId
+            ? `https://www.openstreetmap.org/${osmType}/${osmId}`
+            : `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lng}#map=17/${lat}/${lng}`
+    };
+}
+/** A single overview map: prefer explicit coordinates; otherwise geocode the first address. */
+export async function resolveGeoLocation(locations) {
+    const explicit = locations.find((location) => location.kind === 'geo' && location.coordinates) ??
+        locations.find((location) => location.coordinates);
+    if (explicit?.coordinates)
+        return geoLocation(explicit.coordinates, explicit.label);
+    const cells = locations.filter((location) => location.h3Cell);
+    if (cells.length) {
+        // H3 decoding is only loaded for events that actually use it, never for cards.
+        try {
+            const { isValidCell, cellToLatLng } = await import('h3-js');
+            for (const location of cells) {
+                if (!isValidCell(location.h3Cell))
+                    continue;
+                const [lat, lng] = cellToLatLng(location.h3Cell);
+                return geoLocation({ lat, lng }, `${location.label} · Approximate area`);
+            }
+        }
+        catch {
+            // Fall back to a geocodable address when H3 decoding is unavailable.
+        }
+    }
+    const address = locations.find((location) => location.geocodeQuery);
+    if (!address?.geocodeQuery)
+        return null;
+    try {
+        const response = await fetch(`/api/geocoding?q=${encodeURIComponent(address.geocodeQuery)}`);
+        if (!response.ok)
+            return null;
+        const data = (await response.json());
+        if (typeof data?.lat !== 'number' ||
+            typeof data.lng !== 'number' ||
+            !Number.isFinite(data.lat) ||
+            !Number.isFinite(data.lng) ||
+            Math.abs(data.lat) > 90 ||
+            Math.abs(data.lng) > 180)
+            return null;
+        return geoLocation({ lat: data.lat, lng: data.lng }, address.geocodeQuery, data.osmType, data.osmId);
+    }
+    catch {
+        return null;
+    }
+}

package/dist/events/event-view/plyr-icons.d.ts

@@ -0,0 +1,3 @@
+import type Plyr from 'plyr';
+/** Called in the browser before constructing either video player. */
+export declare function sketchyPlyrIcons(): Pick<Plyr.Options, 'iconPrefix' | 'iconUrl' | 'loadSprite'>;

package/dist/events/event-view/plyr-icons.js

@@ -0,0 +1,46 @@
+import { Captions, CaptionsOff, Maximize, Minimize, Pause, Play, Settings, Volume2, VolumeX } from '@sketchyicons/svelte';
+const prefix = 'atmo-sketchy-plyr';
+const icons = {
+    play: Play,
+    pause: Pause,
+    volume: Volume2,
+    muted: VolumeX,
+    'captions-on': Captions,
+    'captions-off': CaptionsOff,
+    'enter-fullscreen': Maximize,
+    'exit-fullscreen': Minimize,
+    settings: Settings
+};
+/** Called in the browser before constructing either video player. */
+export function sketchyPlyrIcons() {
+    // One local sprite serves every player, without fetching Plyr's stock CDN icons.
+    if (!document.getElementById(prefix)) {
+        const ns = 'http://www.w3.org/2000/svg';
+        const sprite = document.createElementNS(ns, 'svg');
+        sprite.id = prefix;
+        sprite.setAttribute('width', '0');
+        sprite.setAttribute('height', '0');
+        sprite.setAttribute('aria-hidden', 'true');
+        sprite.setAttribute('focusable', 'false');
+        sprite.style.position = 'absolute';
+        for (const [name, nodes] of Object.entries(icons)) {
+            const symbol = document.createElementNS(ns, 'symbol');
+            symbol.id = `${prefix}-${name}`;
+            symbol.setAttribute('viewBox', '0 0 24 24');
+            symbol.setAttribute('stroke', 'currentColor');
+            symbol.setAttribute('stroke-width', '1.75');
+            symbol.setAttribute('stroke-linecap', 'round');
+            symbol.setAttribute('stroke-linejoin', 'round');
+            for (const [, attributes] of nodes) {
+                const path = document.createElementNS(ns, 'path');
+                path.setAttribute('d', String(attributes.d));
+                path.setAttribute('fill', String(attributes.fill ?? 'none'));
+                symbol.appendChild(path);
+            }
+            sprite.appendChild(symbol);
+        }
+        document.body.appendChild(sprite);
+    }
+    // An empty iconUrl makes Plyr reference the local symbols by fragment only.
+    return { iconPrefix: prefix, iconUrl: '', loadSprite: false };
+}

package/dist/events/linked-records.d.ts

@@ -0,0 +1,18 @@
+import { type GrainClient } from '../grain.js';
+export { parseGrainLink, isLinkedActor } from '../grain.js';
+export { parseStreamplaceLink } from '../streamplace.js';
+export type { GrainReference, GrainAlbum, GrainPhoto, GrainGallery, GrainAlbumPage } from '../grain.js';
+export type EventLink = {
+    uri: string;
+    name?: string;
+};
+export type LinkedRecordsClient = {
+    getGrainGallery: GrainClient['getGallery'];
+    listGrainAlbums: GrainClient['listAlbums'];
+};
+/** Recognize event stream URLs, not arbitrary bare handles in `uris`. */
+export declare function eventStreamLink(uri: string): {
+    actor: string;
+    url: string;
+} | null;
+export declare function isLinkedRecord(link: EventLink): boolean;

package/dist/events/linked-records.js

@@ -0,0 +1,11 @@
+import { parseGrainLink } from '../grain.js';
+import { parseStreamplaceLink } from '../streamplace.js';
+export { parseGrainLink, isLinkedActor } from '../grain.js';
+export { parseStreamplaceLink } from '../streamplace.js';
+/** Recognize event stream URLs, not arbitrary bare handles in `uris`. */
+export function eventStreamLink(uri) {
+    return /^https?:\/\//i.test(uri) ? parseStreamplaceLink(uri) : null;
+}
+export function isLinkedRecord(link) {
+    return !!parseGrainLink(link.uri) || !!eventStreamLink(link.uri);
+}

package/dist/events/profile-url.d.ts

@@ -0,0 +1,3 @@
+/** Profile routes shared by the RSVP app and its event components. */
+export declare function getLocalProfileUrl(handleOrDid: string): string;
+export declare function getProfileUrl(handleOrDid: string): string;

package/dist/events/profile-url.js

@@ -0,0 +1,11 @@
+/** Profile routes shared by the RSVP app and its event components. */
+export function getLocalProfileUrl(handleOrDid) {
+    return `/p/${encodeURIComponent(handleOrDid)}`;
+}
+export function getProfileUrl(handleOrDid) {
+    const lower = handleOrDid.toLowerCase();
+    if (lower.endsWith('.blacksky.team') || lower.endsWith('.blacksky.app')) {
+        return `https://blacksky.community/profile/${handleOrDid}`;
+    }
+    return `https://bsky.app/profile/${handleOrDid}`;
+}

package/dist/events/schedule/ConferenceTimetable.svelte

@@ -0,0 +1,340 @@
+<script lang="ts">
+	import { ArrowDown, Check, Star } from '@sketchyicons/svelte';
+	import { Button, Icon, ToggleGroup, ToggleGroupItem } from '../../index.js';
+	import { onMount } from 'svelte';
+	import DaySchedule from './DaySchedule.svelte';
+	import ScheduleEventCell from './ScheduleEventCell.svelte';
+	import {
+		type ScheduleEvent,
+		type GridEvent,
+		getDayKey,
+		getDayLabel,
+		getDayShortLabel,
+		getRooms,
+		buildGrid,
+		isoToMinutes,
+		formatTime
+	} from './schedule-utils.js';
+	import type { EditorAdapter, EditorViewer } from '../editor/adapter.js';
+
+	type VodInfo = { playlistUrl: string; subtitlesUrl?: string };
+
+	let {
+		scheduleEvents,
+		tz,
+		eventActor,
+		adapter,
+		viewer,
+		rooms: explicitRooms,
+		rsvpStatuses: initialRsvpStatuses = {},
+		rsvpRkeys: initialRsvpRkeys = {},
+		eventVods = {},
+		loggedIn = false
+	}: {
+		scheduleEvents: ScheduleEvent[];
+		tz: string;
+		eventActor: string;
+		adapter: EditorAdapter;
+		viewer: EditorViewer;
+		/** Explicit room ordering from the conference event, if declared. */
+		rooms?: string[];
+		rsvpStatuses?: Record<string, string>;
+		rsvpRkeys?: Record<string, string>;
+		eventVods?: Record<string, VodInfo>;
+		loggedIn?: boolean;
+	} = $props();
+
+	// Writable so RSVPs made from the grid reflect immediately; resets when the props change.
+	let rsvpStatuses = $derived({ ...initialRsvpStatuses });
+	let rsvpRkeys = $derived({ ...initialRsvpRkeys });
+
+	let filterMode = $state('all');
+	let selectedDay = $state('all');
+	let activeRooms: Record<number, number> = $state({});
+
+	let now = $state(new Date());
+	onMount(() => {
+		const interval = setInterval(() => {
+			now = new Date();
+		}, 60_000);
+		return () => clearInterval(interval);
+	});
+
+	let nowIso = $derived(now.toISOString());
+	let nowKey = $derived(getDayKey(nowIso, tz));
+	let nowMinutes = $derived(isoToMinutes(nowIso, tz));
+
+	let dayGroups = $derived.by(() => {
+		// Temporary accumulator; the derived value returns a new array.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const groups = new Map<
+			string,
+			{ key: string; label: string; shortLabel: string; events: ScheduleEvent[] }
+		>();
+		for (const event of scheduleEvents) {
+			const key = getDayKey(event.start, tz);
+			if (!groups.has(key)) {
+				groups.set(key, {
+					key,
+					label: getDayLabel(event.start, tz),
+					shortLabel: getDayShortLabel(event.start, tz),
+					events: []
+				});
+			}
+			groups.get(key)!.events.push(event);
+		}
+		return [...groups.values()];
+	});
+
+	let filteredDayGroups = $derived(
+		selectedDay === 'all' ? dayGroups : dayGroups.filter((d) => d.key === selectedDay)
+	);
+
+	let isDuringConference = $derived.by(() => {
+		if (scheduleEvents.length === 0) return false;
+		const first = scheduleEvents[0].start;
+		const last = scheduleEvents[scheduleEvents.length - 1];
+		const lastEnd = last.end || last.start;
+		return now >= new Date(first) && now <= new Date(lastEnd);
+	});
+
+	// The viewer's RSVP'd talks (going/interested) that haven't ended yet, shown
+	// a few at a time via "Show more".
+	let visibleCount = $state(3);
+	let upNextAll = $derived.by(() => {
+		if (!loggedIn) return [];
+		const nowMs = now.getTime();
+		return scheduleEvents
+			.filter((e) => {
+				const status = rsvpStatuses[e.uri];
+				if (status !== 'going' && status !== 'interested') return false;
+				const endMs = new Date(e.end ?? e.start).getTime();
+				return endMs >= nowMs;
+			})
+			.sort((a, b) => a.start.localeCompare(b.start));
+	});
+	let upNext = $derived(upNextAll.slice(0, visibleCount));
+
+	function whenLabel(ev: ScheduleEvent): { text: string; soon: boolean } {
+		const start = new Date(ev.start);
+		const end = new Date(ev.end ?? ev.start);
+		if (now >= start && now <= end) return { text: 'Now', soon: true };
+		const diffMin = Math.round((start.getTime() - now.getTime()) / 60_000);
+		if (diffMin >= 0 && diffMin < 60) return { text: `in ${diffMin} min`, soon: true };
+		const time = formatTime(ev.start, tz);
+		const sameDay = getDayKey(ev.start, tz) === nowKey;
+		return { text: sameDay ? time : `${getDayShortLabel(ev.start, tz)} ${time}`, soon: false };
+	}
+
+	function subtitle(ev: ScheduleEvent): string {
+		return [
+			ev.room && ev.room !== 'none' ? ev.room : null,
+			ev.speakers?.length ? ev.speakers.map((s) => s.name).join(', ') : null
+		]
+			.filter(Boolean)
+			.join(' · ');
+	}
+
+	// Wrap a schedule event as a GridEvent so ScheduleEventCell can own its modal
+	// (the layout fields are unused; only the start/end-minute span matters).
+	function toGridEvent(ev: ScheduleEvent): GridEvent {
+		const durMin = ev.end
+			? Math.max(
+					0,
+					Math.round((new Date(ev.end).getTime() - new Date(ev.start).getTime()) / 60_000)
+				)
+			: 30;
+		return {
+			...ev,
+			startMin: 0,
+			endMin: durMin,
+			startRow: 1,
+			spanRows: 1,
+			colStart: 1,
+			colSpan: 1,
+			zIndex: 0
+		};
+	}
+
+	let tzLabel = $derived.by(() => {
+		try {
+			const parts = new Intl.DateTimeFormat('en-US', {
+				timeZone: tz,
+				timeZoneName: 'short'
+			}).formatToParts(now);
+			return parts.find((p) => p.type === 'timeZoneName')?.value ?? tz;
+		} catch {
+			return tz;
+		}
+	});
+
+	function handleRsvpChange(uri: string, status: string | null, rkey?: string) {
+		if (status) {
+			rsvpStatuses = { ...rsvpStatuses, [uri]: status };
+			if (rkey) rsvpRkeys = { ...rsvpRkeys, [uri]: rkey };
+		} else {
+			const nextStatuses = { ...rsvpStatuses };
+			delete nextStatuses[uri];
+			rsvpStatuses = nextStatuses;
+			const nextKeys = { ...rsvpRkeys };
+			delete nextKeys[uri];
+			rsvpRkeys = nextKeys;
+		}
+	}
+
+	function scrollToNow() {
+		const els = document.querySelectorAll('[data-now-line]');
+		for (const el of els) {
+			if (el instanceof HTMLElement && el.offsetParent !== null) {
+				el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+				return;
+			}
+		}
+		els[0]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+	}
+</script>
+
+{#if scheduleEvents.length > 0}
+	<div class="mt-8 mb-6 flex items-center justify-between">
+		<h2 class="text-2xl font-bold text-base-900 dark:text-base-50">Schedule</h2>
+		{#if isDuringConference}
+			<Button onclick={scrollToNow} size="sm">
+				<Icon img={ArrowDown} size={16} />
+				Jump to now
+			</Button>
+		{/if}
+	</div>
+
+	<p class="mb-4 text-sm text-muted">All times shown in {tzLabel}.</p>
+
+	{#if upNextAll.length > 0}
+		<div class="mb-8">
+			<h2 class="mb-3 text-xl font-bold text-base-900 dark:text-base-50">Up next</h2>
+			<div class="space-y-2">
+				{#each upNext as ev (ev.uri)}
+					{@const w = whenLabel(ev)}
+					<ScheduleEventCell
+						event={toGridEvent(ev)}
+						{tz}
+						{eventActor}
+						{adapter}
+						{viewer}
+						{rsvpStatuses}
+						{rsvpRkeys}
+						vodPlaylistUrl={eventVods[ev.uri]?.playlistUrl}
+						vodSubtitlesUrl={eventVods[ev.uri]?.subtitlesUrl}
+						onrsvpchange={handleRsvpChange}
+					>
+						{#snippet trigger({ open })}
+							<button
+								onclick={open}
+								class="flex w-full cursor-pointer items-center gap-3 rounded-xl border border-base-200 bg-base-100 px-4 py-3 text-left leading-tight transition-colors hover:border-base-300 dark:border-base-800 dark:bg-base-950/50 dark:hover:border-base-700"
+							>
+								<div class="min-w-0 flex-1">
+									<p class="truncate text-sm font-semibold text-base-900 dark:text-base-100">
+										{ev.title}
+									</p>
+									{#if subtitle(ev)}
+										<p class="mt-0.5 truncate text-xs text-muted">
+											{subtitle(ev)}
+										</p>
+									{/if}
+								</div>
+								<span
+									class="flex shrink-0 items-center gap-1.5 text-xs whitespace-nowrap {w.soon
+										? 'font-semibold text-accent-600 dark:text-accent-400'
+										: 'text-muted'}"
+								>
+									{#if rsvpStatuses[ev.uri] === 'going'}
+										<Icon img={Check} size={14} class="text-action" />
+									{:else}
+										<Icon img={Star} size={14} class="text-action" />
+									{/if}
+									{w.text}
+								</span>
+							</button>
+						{/snippet}
+					</ScheduleEventCell>
+				{/each}
+			</div>
+			{#if upNextAll.length > upNext.length}
+				<button
+					type="button"
+					onclick={() => (visibleCount += 5)}
+					class="mt-2 text-sm font-medium text-accent-600 hover:underline dark:text-accent-400"
+				>
+					Show more
+				</button>
+			{/if}
+		</div>
+	{/if}
+
+	{#if dayGroups.length > 1 || loggedIn}
+		<div class="mb-6 space-y-3">
+			{#if dayGroups.length > 1}
+				<div class="flex items-center gap-3">
+					<span class="w-14 text-xs text-muted">Days</span>
+					<ToggleGroup
+						type="single"
+						bind:value={
+							() => selectedDay,
+							(v) => {
+								if (v) selectedDay = v;
+							}
+						}
+						class="w-fit"
+					>
+						<ToggleGroupItem value="all" size="sm">All</ToggleGroupItem>
+						{#each dayGroups as day (day.key)}
+							<ToggleGroupItem value={day.key} size="sm">{day.shortLabel}</ToggleGroupItem>
+						{/each}
+					</ToggleGroup>
+				</div>
+			{/if}
+			{#if loggedIn}
+				<div class="flex items-center gap-3">
+					<span class="w-14 text-xs text-muted">Events</span>
+					<ToggleGroup
+						type="single"
+						bind:value={
+							() => filterMode,
+							(v) => {
+								if (v) filterMode = v;
+							}
+						}
+						class="w-fit"
+					>
+						<ToggleGroupItem value="all" size="sm">All</ToggleGroupItem>
+						<ToggleGroupItem value="attending" size="sm">Attending</ToggleGroupItem>
+					</ToggleGroup>
+				</div>
+			{/if}
+		</div>
+	{/if}
+
+	{#each filteredDayGroups as day, dayIndex (day.key)}
+		{@const dayRooms = getRooms(day.events, explicitRooms)}
+		{@const grid = buildGrid(day.events, dayRooms, tz)}
+
+		<section class="isolate mb-12">
+			<h3 class="mb-4 text-lg font-bold text-base-900 dark:text-base-50">{day.label}</h3>
+			<DaySchedule
+				{grid}
+				rooms={dayRooms}
+				dayEvents={day.events}
+				{tz}
+				{eventActor}
+				{adapter}
+				{viewer}
+				bind:activeRoom={() => activeRooms[dayIndex] ?? 0, (v) => (activeRooms[dayIndex] = v)}
+				{nowKey}
+				{nowMinutes}
+				{rsvpStatuses}
+				{rsvpRkeys}
+				{eventVods}
+				dimUnattended={filterMode === 'attending'}
+				onrsvpchange={handleRsvpChange}
+			/>
+		</section>
+	{/each}
+{/if}