@atmo-dev/kit 0.4.0 → 0.5.0

package/dist/events/schedule/ConferenceTimetable.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type ScheduleEvent } from './schedule-utils.js';
+import type { EditorAdapter, EditorViewer } from '../editor/adapter.js';
+type VodInfo = {
+    playlistUrl: string;
+    subtitlesUrl?: string;
+};
+type $$ComponentProps = {
+    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;
+};
+declare const ConferenceTimetable: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConferenceTimetable = ReturnType<typeof ConferenceTimetable>;
+export default ConferenceTimetable;

package/dist/events/schedule/DaySchedule.svelte

@@ -0,0 +1,298 @@
+<script lang="ts">
+	import { Icon } from '../../index.js';
+	import { Check, ChevronDown } from '@sketchyicons/svelte';
+	import ScheduleEventCell from './ScheduleEventCell.svelte';
+	import {
+		type ScheduleEvent,
+		type GridData,
+		SLOT,
+		linkableTypes,
+		formatHour,
+		getDayKey,
+		getNowGridRow
+	} from './schedule-utils.js';
+	import type { EditorAdapter, EditorViewer } from '../editor/adapter.js';
+
+	type VodInfo = { playlistUrl: string; subtitlesUrl?: string };
+
+	let {
+		grid,
+		rooms,
+		dayEvents,
+		tz,
+		eventActor,
+		adapter,
+		viewer,
+		activeRoom = $bindable(0),
+		nowKey,
+		nowMinutes,
+		rsvpStatuses = {},
+		rsvpRkeys = {},
+		eventVods = {},
+		dimUnattended = false,
+		onrsvpchange
+	}: {
+		grid: GridData;
+		rooms: string[];
+		dayEvents: ScheduleEvent[];
+		tz: string;
+		eventActor: string;
+		adapter: EditorAdapter;
+		viewer: EditorViewer;
+		activeRoom: number;
+		nowKey: string;
+		nowMinutes: number;
+		rsvpStatuses?: Record<string, string>;
+		rsvpRkeys?: Record<string, string>;
+		eventVods?: Record<string, VodInfo>;
+		dimUnattended?: boolean;
+		onrsvpchange?: (uri: string, status: string | null, rkey?: string) => void;
+	} = $props();
+
+	let dayKey = $derived(dayEvents[0]?.start ? getDayKey(dayEvents[0].start, tz) : '');
+	let nowRow = $derived(getNowGridRow(grid, dayKey, nowKey, nowMinutes));
+
+	// Mobile shows one room at a time, picked from a dropdown (there can be many).
+	let roomMenuOpen = $state(false);
+
+	function isDimmed(event: { uri: string; type: string }): boolean {
+		if (dimUnattended) {
+			if (event.type === 'info') return true;
+			const status = rsvpStatuses[event.uri];
+			return !status || status === 'notgoing';
+		}
+		return false;
+	}
+</script>
+
+<div
+	class="overflow-hidden rounded-xl border border-base-200 bg-base-100/60 dark:border-base-800 dark:bg-base-950/50"
+>
+	<!-- Mobile: room selector (one room shown at a time) -->
+	<div class="relative border-b border-base-200 md:hidden dark:border-base-800">
+		<button
+			type="button"
+			onclick={() => (roomMenuOpen = !roomMenuOpen)}
+			class="flex w-full items-center justify-between gap-2 px-3 py-2.5"
+		>
+			<span
+				class="truncate text-xs font-semibold tracking-wide text-accent-700 uppercase dark:text-accent-300"
+			>
+				{rooms[activeRoom] ?? ''}
+			</span>
+			<span class="flex shrink-0 items-center gap-2 text-base-400 dark:text-base-500">
+				<span class="text-xs tabular-nums">{activeRoom + 1}/{rooms.length}</span>
+				<Icon
+					img={ChevronDown}
+					size={16}
+					class="transition-transform {roomMenuOpen ? 'rotate-180' : ''}"
+				/>
+			</span>
+		</button>
+		{#if roomMenuOpen}
+			<button
+				type="button"
+				class="fixed inset-0 z-[9990] cursor-default"
+				aria-label="Close room menu"
+				onclick={() => (roomMenuOpen = false)}
+			></button>
+			<ul
+				class="absolute inset-x-0 top-full z-[10000] max-h-64 overflow-auto border-b border-line bg-page"
+			>
+				{#each rooms as room, i (room)}
+					<li>
+						<button
+							type="button"
+							onclick={() => {
+								activeRoom = i;
+								roomMenuOpen = false;
+							}}
+							class="flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-xs transition-colors {activeRoom ===
+							i
+								? 'bg-accent-100 font-semibold text-accent-700 dark:bg-accent-900/30 dark:text-accent-300'
+								: 'text-base-600 dark:text-base-300'}"
+						>
+							<span class="truncate">{room}</span>
+							{#if activeRoom === i}
+								<Icon img={Check} size={16} class="shrink-0" />
+							{/if}
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+
+	<!-- Mobile: single room view -->
+	{#each rooms as room, roomIndex (room)}
+		{@const roomEvents = grid.gridEvents.filter((e) => e.type === 'info' || e.room === room)}
+		<div class="md:hidden {activeRoom !== roomIndex ? 'hidden' : ''}">
+			<div class="flex">
+				<div class="w-14 shrink-0 border-r border-base-200 dark:border-base-800"></div>
+				<div class="relative grid flex-auto grid-cols-1 grid-rows-1">
+					<div
+						class="col-start-1 col-end-2 row-start-1 grid divide-y divide-base-200/40 dark:divide-base-800/40"
+						style={grid.timeGridRows}
+					>
+						<div></div>
+						<div></div>
+						{#each Array(grid.totalSlots).keys() as i (i)}
+							<div>
+								{#if (grid.minTime + i * SLOT) % 60 === 0}
+									<div
+										class="sticky left-0 z-[1500] -mt-2 -ml-14 w-14 pr-2 text-right text-[0.65rem] leading-none text-base-400 dark:text-base-500"
+									>
+										{formatHour(grid.minTime + i * SLOT)}
+									</div>
+								{/if}
+							</div>
+						{/each}
+					</div>
+					<ol
+						class="col-start-1 col-end-2 row-start-1 grid divide-y divide-base-200/40 dark:divide-base-800/40"
+						style="grid-template-columns: 1fr; {grid.timeGridRows}"
+					>
+						{#each roomEvents as event (event.uri)}
+							<li
+								class="relative flex min-h-5 p-0.5 transition-opacity {isDimmed(event)
+									? linkableTypes.has(event.type) && event.rkey
+										? 'opacity-30 hover:opacity-80'
+										: 'opacity-30'
+									: ''}"
+								style="grid-row: {event.startRow} / span {event.spanRows}; grid-column: 1; z-index: {event.zIndex}"
+							>
+								<ScheduleEventCell
+									{event}
+									{tz}
+									{eventActor}
+									{adapter}
+									{viewer}
+									{rsvpStatuses}
+									{rsvpRkeys}
+									vodPlaylistUrl={eventVods[event.uri]?.playlistUrl}
+									vodSubtitlesUrl={eventVods[event.uri]?.subtitlesUrl}
+									{onrsvpchange}
+								/>
+							</li>
+						{/each}
+						{#if nowRow}
+							<li
+								data-now-line
+								class="pointer-events-none relative"
+								style="z-index: 9999; grid-row: {nowRow.row}; grid-column: 1"
+							>
+								<div
+									class="absolute inset-x-0 flex items-center"
+									style="top: {nowRow.offsetPercent}%"
+								>
+									<div class="size-2 rounded-full bg-red-500"></div>
+									<div class="h-0.5 flex-1 bg-red-500"></div>
+								</div>
+							</li>
+						{/if}
+					</ol>
+				</div>
+			</div>
+		</div>
+	{/each}
+
+	<!-- Desktop: full grid -->
+	<div class="hidden overflow-x-auto md:block">
+		<div style="min-width: {rooms.length * 10 + 4}rem">
+			<div
+				class="flex border-b border-base-200 bg-base-100/60 dark:border-base-800 dark:bg-base-950/50"
+			>
+				<div class="w-14 shrink-0 border-r border-base-200 dark:border-base-800"></div>
+				<div
+					class="grid flex-auto divide-x divide-base-200 dark:divide-base-800"
+					style="grid-template-columns: repeat({rooms.length}, minmax(0, 1fr))"
+				>
+					{#each rooms as room (room)}
+						<div
+							class="px-2 py-2.5 text-center text-xs font-semibold tracking-wide text-muted uppercase"
+						>
+							{room}
+						</div>
+					{/each}
+				</div>
+			</div>
+
+			<div class="flex">
+				<div class="w-14 shrink-0 border-r border-base-200 dark:border-base-800"></div>
+				<div class="relative grid flex-auto grid-cols-1 grid-rows-1">
+					<div
+						class="col-start-1 col-end-2 row-start-1 grid divide-y divide-base-200/40 dark:divide-base-800/40"
+						style={grid.timeGridRows}
+					>
+						<div></div>
+						<div></div>
+						{#each Array(grid.totalSlots).keys() as i (i)}
+							<div>
+								{#if (grid.minTime + i * SLOT) % 60 === 0}
+									<div
+										class="sticky left-0 z-[1500] -mt-2 -ml-14 w-14 pr-2 text-right text-[0.65rem] leading-none text-base-400 dark:text-base-500"
+									>
+										{formatHour(grid.minTime + i * SLOT)}
+									</div>
+								{/if}
+							</div>
+						{/each}
+					</div>
+
+					<div
+						class="col-start-1 col-end-2 row-start-1 grid grid-rows-1 divide-x divide-base-200/40 dark:divide-base-800/40"
+						style="grid-template-columns: repeat({rooms.length}, minmax(0, 1fr))"
+					>
+						{#each rooms as room (room)}
+							<div class="row-span-full"></div>
+						{/each}
+					</div>
+
+					<ol
+						class="col-start-1 col-end-2 row-start-1 grid divide-y divide-base-200/40 dark:divide-base-800/40"
+						style="grid-template-columns: repeat({rooms.length}, minmax(0, 1fr)); {grid.timeGridRows}"
+					>
+						{#each grid.gridEvents as event (event.uri)}
+							<li
+								class="relative flex min-h-5 p-0.5 transition-opacity {isDimmed(event)
+									? linkableTypes.has(event.type) && event.rkey
+										? 'opacity-30 hover:opacity-80'
+										: 'opacity-30'
+									: ''}"
+								style="grid-row: {event.startRow} / span {event.spanRows}; grid-column: {event.colStart} / span {event.colSpan}; z-index: {event.zIndex}"
+							>
+								<ScheduleEventCell
+									{event}
+									{tz}
+									{eventActor}
+									{adapter}
+									{viewer}
+									{rsvpStatuses}
+									{rsvpRkeys}
+									vodPlaylistUrl={eventVods[event.uri]?.playlistUrl}
+									vodSubtitlesUrl={eventVods[event.uri]?.subtitlesUrl}
+									{onrsvpchange}
+								/>
+							</li>
+						{/each}
+						{#if nowRow}
+							<li
+								data-now-line
+								class="pointer-events-none relative"
+								style="z-index: 9999; grid-row: {nowRow.row}; grid-column: 1 / span {rooms.length}"
+							>
+								<div
+									class="absolute inset-x-0 flex items-center"
+									style="top: {nowRow.offsetPercent}%"
+								>
+									<div class="size-2 rounded-full bg-red-500"></div>
+									<div class="h-0.5 flex-1 bg-red-500"></div>
+								</div>
+							</li>
+						{/if}
+					</ol>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

package/dist/events/schedule/DaySchedule.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type ScheduleEvent, type GridData } from './schedule-utils.js';
+import type { EditorAdapter, EditorViewer } from '../editor/adapter.js';
+type VodInfo = {
+    playlistUrl: string;
+    subtitlesUrl?: string;
+};
+type $$ComponentProps = {
+    grid: GridData;
+    rooms: string[];
+    dayEvents: ScheduleEvent[];
+    tz: string;
+    eventActor: string;
+    adapter: EditorAdapter;
+    viewer: EditorViewer;
+    activeRoom: number;
+    nowKey: string;
+    nowMinutes: number;
+    rsvpStatuses?: Record<string, string>;
+    rsvpRkeys?: Record<string, string>;
+    eventVods?: Record<string, VodInfo>;
+    dimUnattended?: boolean;
+    onrsvpchange?: (uri: string, status: string | null, rkey?: string) => void;
+};
+declare const DaySchedule: import("svelte").Component<$$ComponentProps, {}, "activeRoom">;
+type DaySchedule = ReturnType<typeof DaySchedule>;
+export default DaySchedule;

package/dist/events/schedule/ScheduleEventCell.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import {
+		type GridEvent,
+		linkableTypes,
+		isCompact,
+		getEventColor,
+		formatTime
+	} from './schedule-utils.js';
+	import { Check, Star, Video } from '@sketchyicons/svelte';
+	import { Modal, Button, Icon } from '../../index.js';
+	import EventRsvp from '../EventRsvp.svelte';
+	import VodPlayer from '../VodPlayer.svelte';
+	import type { EditorAdapter, EditorViewer } from '../editor/adapter.js';
+	import type { Snippet } from 'svelte';
+
+	let {
+		event,
+		tz,
+		eventActor,
+		adapter,
+		viewer,
+		rsvpStatuses = {},
+		rsvpRkeys = {},
+		vodPlaylistUrl,
+		vodSubtitlesUrl,
+		onrsvpchange,
+		trigger
+	}: {
+		event: GridEvent;
+		/** Timezone the schedule is laid out in. */
+		tz: string;
+		/** Handle/DID used to build the talk's event-page link. */
+		eventActor: string;
+		adapter: EditorAdapter;
+		viewer: EditorViewer;
+		rsvpStatuses?: Record<string, string>;
+		rsvpRkeys?: Record<string, string>;
+		vodPlaylistUrl?: string;
+		vodSubtitlesUrl?: string;
+		onrsvpchange?: (uri: string, status: string | null, rkey?: string) => void;
+		/** Custom clickable trigger; receives `open` to launch the modal. Defaults
+		 *  to the standard colored grid-cell button. */
+		trigger?: Snippet<[{ open: () => void }]>;
+	} = $props();
+
+	let modalOpen = $state(false);
+
+	let durationMin = $derived(event.endMin - event.startMin);
+	let compact = $derived(isCompact(durationMin, event.type));
+	let initialRsvpStatus = $derived(
+		(rsvpStatuses[event.uri] as 'going' | 'interested' | 'notgoing' | undefined) ?? null
+	);
+	let initialRsvpRkey = $derived(rsvpRkeys[event.uri] ?? null);
+	let isPast = $derived(event.end ? new Date(event.end) < new Date() : false);
+	let eventHref = $derived(`/p/${eventActor}/e/${event.rkey}`);
+</script>
+
+{#if linkableTypes.has(event.type) && event.rkey}
+	{#if trigger}
+		{@render trigger({ open: () => (modalOpen = true) })}
+	{:else}
+		<button
+			onclick={() => (modalOpen = true)}
+			class="relative flex-1 cursor-pointer overflow-hidden rounded-md leading-tight transition-[filter] hover:brightness-95 {getEventColor(
+				event.type
+			)} {event.type === 'info'
+				? 'flex flex-col items-center justify-center px-2 py-1.5 text-center text-xs'
+				: ''} {compact ? 'px-1.5 py-0 text-[0.6rem]' : 'px-2 py-1.5 text-xs'}"
+		>
+			<p class="font-semibold {durationMin <= 30 ? 'line-clamp-1' : ''}">
+				{event.title}
+			</p>
+			{#if event.speakers?.length && !compact}
+				<p class="mt-0.5 opacity-75 {durationMin < 60 ? 'line-clamp-1' : ''}">
+					{event.speakers.map((s) => s.name).join(', ')}
+				</p>
+			{/if}
+			{#if vodPlaylistUrl}
+				<Icon img={Video} size={12} class="absolute top-1 right-1 opacity-60" />
+			{/if}
+			{#if initialRsvpStatus === 'going'}
+				<Icon img={Check} size={12} class="absolute right-1 bottom-1 opacity-60" />
+			{:else if initialRsvpStatus === 'interested'}
+				<Icon img={Star} size={12} class="absolute right-1 bottom-1 opacity-60" />
+			{/if}
+		</button>
+	{/if}
+
+	<Modal bind:open={modalOpen} title={event.title}>
+		<div class="overflow-hidden">
+			{#if event.start}
+				<p class="mt-1 text-sm text-muted">
+					{formatTime(event.start, tz)}{event.end ? ` – ${formatTime(event.end, tz)}` : ''}
+				</p>
+			{/if}
+
+			{#if event.speakers?.length}
+				<p class="mt-1 text-sm text-base-600 dark:text-base-300">
+					{#each event.speakers as s, i (s.id ?? s.name)}{#if s.id}<a
+								href="https://bsky.app/profile/{s.id}"
+								target="_blank"
+								rel="noopener noreferrer"
+								class="text-accent-600 hover:underline dark:text-accent-400">{s.name}</a
+							>{:else}{s.name}{/if}{#if i < event.speakers.length - 1},
+						{/if}{/each}
+				</p>
+			{/if}
+
+			{#if event.description}
+				<p class="mt-3 line-clamp-3 text-sm break-words text-muted">
+					{event.description}
+				</p>
+			{/if}
+
+			{#if !isPast}
+				<EventRsvp
+					eventUri={event.uri}
+					eventCid={event.cid ?? null}
+					rsvpExpected={event.rsvpExpected}
+					{initialRsvpStatus}
+					{initialRsvpRkey}
+					{adapter}
+					{viewer}
+					onlogin={() => (modalOpen = false)}
+					onrsvp={(status, key) => {
+						onrsvpchange?.(event.uri, status, key);
+						modalOpen = false;
+					}}
+					oncancel={() => {
+						onrsvpchange?.(event.uri, null);
+					}}
+				/>
+			{/if}
+
+			{#if vodPlaylistUrl}
+				<div class="mt-3">
+					<VodPlayer
+						playlistUrl={vodPlaylistUrl}
+						title={event.title}
+						subtitlesUrl={vodSubtitlesUrl}
+					/>
+				</div>
+			{/if}
+			<Button href={eventHref} variant="secondary" class="mt-2 w-full">Go to event</Button>
+		</div>
+	</Modal>
+{:else}
+	<div
+		class="flex-1 overflow-hidden rounded-md leading-tight {getEventColor(
+			event.type
+		)} {event.type === 'info'
+			? durationMin <= 30
+				? 'flex items-center justify-center gap-2 px-2 py-0.5 text-center text-xs'
+				: 'flex flex-col items-center justify-center px-2 py-1.5 text-center text-xs'
+			: ''} {compact ? 'px-1.5 py-0 text-[0.6rem]' : 'px-2 py-1.5 text-xs'}"
+	>
+		<p class="font-semibold {durationMin <= 30 ? 'line-clamp-1' : ''}">
+			{event.title}
+		</p>
+		{#if event.start}
+			<p class="{durationMin <= 30 ? '' : 'mt-0.5'} shrink-0 opacity-75">
+				{formatTime(event.start, tz)}{event.end ? ` – ${formatTime(event.end, tz)}` : ''}
+			</p>
+		{/if}
+	</div>
+{/if}

package/dist/events/schedule/ScheduleEventCell.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type GridEvent } from './schedule-utils.js';
+import type { EditorAdapter, EditorViewer } from '../editor/adapter.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    event: GridEvent;
+    /** Timezone the schedule is laid out in. */
+    tz: string;
+    /** Handle/DID used to build the talk's event-page link. */
+    eventActor: string;
+    adapter: EditorAdapter;
+    viewer: EditorViewer;
+    rsvpStatuses?: Record<string, string>;
+    rsvpRkeys?: Record<string, string>;
+    vodPlaylistUrl?: string;
+    vodSubtitlesUrl?: string;
+    onrsvpchange?: (uri: string, status: string | null, rkey?: string) => void;
+    /** Custom clickable trigger; receives `open` to launch the modal. Defaults
+     *  to the standard colored grid-cell button. */
+    trigger?: Snippet<[{
+        open: () => void;
+    }]>;
+};
+declare const ScheduleEventCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScheduleEventCell = ReturnType<typeof ScheduleEventCell>;
+export default ScheduleEventCell;

package/dist/events/schedule/schedule-utils.d.ts

@@ -0,0 +1,44 @@
+import type { ScheduleEvent } from '../conference.js';
+export type { ScheduleEvent };
+export interface GridEvent extends ScheduleEvent {
+    startMin: number;
+    endMin: number;
+    startRow: number;
+    spanRows: number;
+    colStart: number;
+    colSpan: number;
+    zIndex: number;
+}
+export interface GridData {
+    gridEvents: GridEvent[];
+    minTime: number;
+    totalSlots: number;
+    timeGridRows: string;
+}
+export declare const SLOT = 5;
+export declare const SLOT_HEIGHT = "0.6rem";
+export declare const linkableTypes: Set<string>;
+export declare function isLightning(type: string): boolean;
+export declare function isCompact(durationMin: number, type: string): boolean;
+/**
+ * Wall-clock components of an instant as seen in `tz`, returned as a Date built
+ * from those local parts (so getHours()/getMinutes() read the tz time, not the
+ * runtime's). Used to lay the grid out in the conference's own timezone.
+ */
+export declare function toTzDate(iso: string, tz: string): Date;
+export declare function isoToMinutes(iso: string, tz: string): number;
+export declare function formatTime(iso: string, tz: string): string;
+/** Hour label for a "minutes since midnight" value (0–1439). Timezone-agnostic. */
+export declare function formatHour(minutes: number): string;
+export declare function getDayKey(iso: string, tz: string): string;
+export declare function getDayLabel(iso: string, tz: string): string;
+export declare function getDayShortLabel(iso: string, tz: string): string;
+export declare function getEventColor(type: string): string;
+export declare function durationMinutes(start: string, end: string | undefined, tz: string): number;
+/** Rooms present in a set of events, in display order. */
+export declare function getRooms(events: ScheduleEvent[], explicitOrder?: string[]): string[];
+export declare function buildGrid(events: ScheduleEvent[], rooms: string[], tz: string): GridData;
+export declare function getNowGridRow(grid: GridData, dayKey: string, nowKey: string, nowMinutes: number): {
+    row: number;
+    offsetPercent: number;
+} | null;