@joewinke/jatui 0.41.0 → 0.42.0

package/dist/components/EventCalendar.svelte

@@ -0,0 +1,1324 @@
+<script lang="ts" generics="E extends CalendarEventItem = CalendarEventItem">
+	/**
+	 * EventCalendar — month / week / day / agenda event calendar.
+	 *
+	 * The engine is upstreamed from MOS `CalendarGrid` (jatui-lfxyy): one lane
+	 * allocator (`monthPacking`) places every bar and chip in a month row so they
+	 * can't collide, lane capacity is measured from the row height, and timed
+	 * events in week/day view split concurrent blocks side by side (`dayOverlap`).
+	 * The skin takes clean-room ideas from BoardUI Pro's public calendar page:
+	 * per-hue event token triplets (`--jatui-event-N{,-bg,-fg}`), a "+N more" that
+	 * expands the week in place instead of navigating, a month-switcher pill that
+	 * reuses the date-picker panel, and an agenda list.
+	 *
+	 * The host owns the events. Callbacks are all optional; each one switches a
+	 * behaviour on (click to create, drag to move, drag/Shift-select a range).
+	 * `onRangeChange` reports the visible range so a host can load just that.
+	 *
+	 * Keyboard (month): one tab stop on the grid; arrows / Home / End move the day,
+	 * PageUp/PageDown change month (Shift = year), Enter creates (or opens the
+	 * day), Shift+arrows extend a range when `onRangeSelect` is set. Event chips
+	 * are buttons; Escape closes the details popover.
+	 */
+	import type { Snippet } from 'svelte';
+	import { tick } from 'svelte';
+	import { floating } from '../actions/floating';
+	import MonthGrid from './calendar/MonthGrid.svelte';
+	import CalendarHeader from './calendar/CalendarHeader.svelte';
+	import IconButton from './IconButton.svelte';
+	import {
+		addMonths,
+		formatLongDate,
+		formatMonthYear,
+		isSameDay,
+		isSameMonth,
+		nextFocusDate,
+		resolveWeekStart,
+		startOfDay,
+		startOfMonth,
+		toIsoDate,
+		weekdayLabels,
+		type Weekday
+	} from './calendar/calendarGrid';
+	import { computeVisibility, packWeek, parseLocalDate, type WeekSegment } from './calendar/monthPacking';
+	import { layoutDay } from './calendar/dayOverlap';
+	import {
+		agendaDays,
+		buildMonthWeeks,
+		buildTimeGridDays,
+		chipTime,
+		eventColorStyle,
+		eventWhen,
+		hourLabel,
+		stepDate,
+		viewTitle,
+		visibleRange,
+		weekDates,
+		type CalendarEventItem,
+		type EventCalendarView
+	} from './calendar/eventCalendar';
+	import { localeHourCycle, type HourCycle } from './calendar/timeSlots';
+
+	interface Props {
+		events: E[];
+		/** Current view (bindable). */
+		view?: EventCalendarView;
+		/** The focus date — which month / week / day is shown (bindable). */
+		date?: Date;
+		/** Views offered in the toolbar switcher. */
+		views?: EventCalendarView[];
+		weekStart?: Weekday | 'locale';
+		locale?: string;
+		hourCycle?: HourCycle;
+		/** First and last (exclusive) hour of the week/day time grid. */
+		dayStartHour?: number;
+		dayEndHour?: number;
+		/** Pixel height of one hour in week/day view. */
+		hourHeight?: number;
+		/** Hour the time grid scrolls to on first show. */
+		scrollToHour?: number;
+		/** CSS height of the calendar body. */
+		height?: string;
+		toolbar?: boolean;
+		/** Extra toolbar content (filters, a "New event" button). */
+		toolbarEnd?: Snippet;
+		/** Custom chip content. */
+		eventContent?: Snippet<[E, { view: EventCalendarView; time: string }]>;
+		/** Details popover content, opened by clicking a chip. Gets the event and a close fn. */
+		eventDetails?: Snippet<[E, () => void]>;
+		/** `expand` (default): "+N more" grows the week in place. `day`: open day view. */
+		moreAction?: 'expand' | 'day';
+		onEventClick?: (ev: E, e: MouseEvent) => void;
+		/** Day number clicked. Defaults to opening day view when it is offered. */
+		onDayClick?: (date: Date) => void;
+		/** Empty cell / hour slot activated — the host opens its create flow. */
+		onCreate?: (date: Date, hour: number | undefined, e: MouseEvent | KeyboardEvent) => void;
+		/** Chip dropped on a day (and hour, in week/day view). Turns drag-to-move on. */
+		onEventMove?: (ev: E, target: { date: Date; hour?: number; allDay: boolean }) => void;
+		/** Month cells dragged (or Shift+arrowed) across. */
+		onRangeSelect?: (start: Date, end: Date) => void;
+		/** The visible range changed — load events for it. */
+		onRangeChange?: (range: { start: Date; end: Date }, view: EventCalendarView) => void;
+		ariaLabel?: string;
+		class?: string;
+	}
+
+	let {
+		events,
+		view = $bindable('month'),
+		date = $bindable(startOfDay(new Date())),
+		views = ['month', 'week', 'day', 'agenda'],
+		weekStart = 'locale',
+		locale,
+		hourCycle,
+		dayStartHour = 6,
+		dayEndHour = 23,
+		hourHeight = 48,
+		scrollToHour = 8,
+		height = '40rem',
+		toolbar = true,
+		toolbarEnd,
+		eventContent,
+		eventDetails,
+		moreAction = 'expand',
+		onEventClick,
+		onDayClick,
+		onCreate,
+		onEventMove,
+		onRangeSelect,
+		onRangeChange,
+		ariaLabel = 'Calendar',
+		class: className = ''
+	}: Props = $props();
+
+	const VIEW_LABEL: Record<EventCalendarView, string> = { month: 'Month', week: 'Week', day: 'Day', agenda: 'Agenda' };
+	const uid = `jec-${Math.random().toString(36).slice(2, 8)}`;
+
+	const firstDay = $derived(resolveWeekStart(weekStart, locale));
+	const cycle = $derived<HourCycle>(hourCycle ?? localeHourCycle(locale));
+	const title = $derived(viewTitle(view, date, firstDay, locale));
+	const dayNames = $derived(weekdayLabels(firstDay, locale, 'short'));
+
+	// Host data loading follows the visible range.
+	$effect(() => {
+		onRangeChange?.(visibleRange(view, date, firstDay), view);
+	});
+
+	// Clock for the now-line and "past" dimming.
+	let now = $state(new Date());
+	$effect(() => {
+		const id = setInterval(() => (now = new Date()), 60_000);
+		return () => clearInterval(id);
+	});
+	const today = $derived(startOfDay(now));
+
+	function go(dir: -1 | 1) {
+		date = stepDate(view, date, dir);
+		focusedDay = date;
+	}
+	function goToday() {
+		date = startOfDay(new Date());
+		focusedDay = date;
+	}
+	function openDay(d: Date) {
+		if (onDayClick) return onDayClick(d);
+		if (views.includes('day')) {
+			date = startOfDay(d);
+			view = 'day';
+		}
+	}
+
+	// ── Details popover ────────────────────────────────────────────────────
+	let details = $state<{ ev: E; anchor: HTMLElement } | null>(null);
+	function closeDetails() {
+		details = null;
+	}
+	function handleEventClick(ev: E, e: MouseEvent) {
+		e.stopPropagation();
+		onEventClick?.(ev, e);
+		if (eventDetails) details = { ev, anchor: e.currentTarget as HTMLElement };
+	}
+
+	// ── Drag to move ───────────────────────────────────────────────────────
+	let draggingId = $state<string | null>(null);
+	let dragOverKey = $state<string | null>(null);
+	const canDrag = (ev: E) => !!onEventMove && ev.draggable !== false;
+
+	function onChipDragStart(ev: E, e: DragEvent) {
+		if (!canDrag(ev) || !e.dataTransfer) return;
+		draggingId = ev.id;
+		closeDetails();
+		e.dataTransfer.setData('text/plain', ev.id);
+		e.dataTransfer.effectAllowed = 'move';
+	}
+	function endDrag() {
+		draggingId = null;
+		dragOverKey = null;
+	}
+	function onCellDragOver(key: string, e: DragEvent) {
+		if (!draggingId) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+		dragOverKey = key;
+	}
+	function onCellDrop(target: { date: Date; hour?: number; allDay: boolean }, e: DragEvent) {
+		e.preventDefault();
+		const ev = events.find((x) => x.id === draggingId);
+		endDrag();
+		if (ev) onEventMove?.(ev, target);
+	}
+
+	// ── Month view ─────────────────────────────────────────────────────────
+	const DAY_NUM_H = 26;
+	const LANE_H = 22;
+	const ROW_PAD_B = 4;
+
+	const weeks = $derived(buildMonthWeeks(date, firstDay, events));
+	const packed = $derived(weeks.map((w) => packWeek(w, now)));
+	let weeksBoxH = $state(0);
+	const laneCapacity = $derived.by(() => {
+		const rowH = weeks.length > 0 ? weeksBoxH / weeks.length : 0;
+		return rowH > 0 ? Math.max(1, Math.floor((rowH - DAY_NUM_H - ROW_PAD_B) / LANE_H)) : 3;
+	});
+	/** Weeks (keyed by their first day) whose "+N more" is expanded in place. */
+	let expanded = $state(new Set<string>());
+
+	function weekVis(wi: number) {
+		const p = packed[wi];
+		const vis = computeVisibility(p.segments, Math.min(laneCapacity, Math.max(1, p.laneCount)));
+		const key = toIsoDate(weeks[wi][0].date);
+		if (!expanded.has(key)) return { vis, open: false, foldedMore: vis.moreCounts };
+		const full = computeVisibility(p.segments, Math.max(1, p.laneCount));
+		return { vis: full, open: true, foldedMore: vis.moreCounts };
+	}
+
+	function toggleWeek(wi: number, d: Date) {
+		if (moreAction === 'day') return openDay(d);
+		const key = toIsoDate(weeks[wi][0].date);
+		const next = new Set(expanded);
+		if (next.has(key)) next.delete(key);
+		else next.add(key);
+		expanded = next;
+	}
+
+	// svelte-ignore state_referenced_locally
+	let focusedDay = $state(startOfDay(date));
+	let monthEl = $state<HTMLDivElement | null>(null);
+	const focusIso = $derived.by(() => {
+		const f = toIsoDate(focusedDay);
+		const all = weeks.flat();
+		if (all.some((d) => d.inMonth && toIsoDate(d.date) === f)) return f;
+		return toIsoDate(startOfMonth(date));
+	});
+
+	// Range selection (pointer drag or Shift+arrows).
+	let selAnchor = $state<Date | null>(null);
+	let selEnd = $state<Date | null>(null);
+	let selPointer = false;
+	let selMoved = false;
+	const selRange = $derived.by(() => {
+		if (!selAnchor || !selEnd) return null;
+		return selAnchor <= selEnd ? [selAnchor, selEnd] : [selEnd, selAnchor];
+	});
+	const inSel = (d: Date) => !!selRange && d >= selRange[0] && d <= selRange[1];
+	function clearSel() {
+		selAnchor = null;
+		selEnd = null;
+		selPointer = false;
+		selMoved = false;
+	}
+
+	function cellPointerDown(d: Date, e: PointerEvent) {
+		if (e.button !== 0 || !(onRangeSelect || onCreate) || draggingId) return;
+		selPointer = true;
+		selMoved = false;
+		selAnchor = d;
+		selEnd = d;
+	}
+	function cellPointerEnter(d: Date) {
+		if (!selPointer || !selEnd) return;
+		if (!isSameDay(selEnd, d)) {
+			selEnd = d;
+			selMoved = true;
+		}
+	}
+	function cellPointerUp(d: Date, e: PointerEvent) {
+		if (!selPointer) return;
+		const range = selRange;
+		const moved = selMoved;
+		clearSel();
+		if (moved && range && onRangeSelect) onRangeSelect(range[0], range[1]);
+		else if (onCreate) onCreate(d, undefined, e);
+	}
+
+	async function focusMonthCell(d: Date) {
+		await tick();
+		monthEl?.querySelector<HTMLElement>(`[data-day="${toIsoDate(d)}"]`)?.focus();
+	}
+
+	function cellKeydown(d: Date, e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			if (selRange && onRangeSelect && !isSameDay(selRange[0], selRange[1])) {
+				const [s, end] = selRange;
+				clearSel();
+				onRangeSelect(s, end);
+			} else if (onCreate) onCreate(d, undefined, e);
+			else openDay(d);
+			return;
+		}
+		if (e.key === 'Escape' && selAnchor) {
+			e.preventDefault();
+			clearSel();
+			return;
+		}
+		if (e.altKey || e.ctrlKey || e.metaKey) return;
+		const isPage = e.key === 'PageUp' || e.key === 'PageDown';
+		const next = nextFocusDate(d, e.key, { weekStart: firstDay, shiftKey: isPage && e.shiftKey });
+		if (!next) return;
+		e.preventDefault();
+		if (e.shiftKey && !isPage && onRangeSelect) {
+			if (!selAnchor) selAnchor = d;
+			selEnd = next;
+		} else if (!e.shiftKey) clearSel();
+		focusedDay = next;
+		if (!isSameMonth(next, date)) date = startOfMonth(next);
+		void focusMonthCell(next);
+	}
+
+	function dayLabel(d: Date, count: number): string {
+		return `${formatLongDate(d, locale)}, ${count ? `${count} event${count === 1 ? '' : 's'}` : 'no events'}`;
+	}
+
+	/** Grid placement + shape for a bar. `col`/`row` offset it (the week view has a time gutter). */
+	function segStyle(seg: WeekSegment<E>, lane: number, opts: { col?: number; row?: number; lastCol?: number } = {}): string {
+		const { col = 1, row = 2, lastCol = 6 } = opts;
+		const r = 'var(--radius-selector, 0.375rem)';
+		const endCol = Math.min(seg.endCol, lastCol);
+		return [
+			`grid-column: ${seg.startCol + col} / span ${endCol - seg.startCol + 1}`,
+			`grid-row: ${lane + row}`,
+			`margin-inline-start: ${seg.continuesLeft ? 0 : 3}px`,
+			`margin-inline-end: ${seg.continuesRight ? 0 : 3}px`,
+			`border-start-start-radius: ${seg.continuesLeft ? 0 : r}`,
+			`border-end-start-radius: ${seg.continuesLeft ? 0 : r}`,
+			`border-start-end-radius: ${seg.continuesRight ? 0 : r}`,
+			`border-end-end-radius: ${seg.continuesRight ? 0 : r}`,
+			eventColorStyle(seg.ev.color)
+		].join('; ');
+	}
+
+	// ── Week / day view ────────────────────────────────────────────────────
+	const gridDays = $derived(view === 'day' ? [startOfDay(date)] : weekDates(date, firstDay));
+	const timeDays = $derived(buildTimeGridDays(gridDays, events));
+	const allDayPacked = $derived.by(() => {
+		if (view !== 'week' && view !== 'day') return null;
+		// The 7-column packer works for a single day too: pad to a week and use column 0.
+		const week = Array.from({ length: 7 }, (_, i) => timeDays[i] ?? { date: new Date(0), inMonth: false, events: [] });
+		return packWeek(week as typeof timeDays, now);
+	});
+	const hours = $derived(Array.from({ length: Math.max(1, dayEndHour - dayStartHour) }, (_, i) => dayStartHour + i));
+	const gridMinutes = $derived((dayEndHour - dayStartHour) * 60);
+
+	function timedBlocks(day: (typeof timeDays)[number]) {
+		const startMin = dayStartHour * 60;
+		const endMin = dayEndHour * 60;
+		return layoutDay(day.timed)
+			.filter((p) => p.endMin > startMin && p.startMin < endMin)
+			.map((p) => {
+				const top = Math.max(p.startMin, startMin) - startMin;
+				const bottom = Math.min(p.endMin, endMin) - startMin;
+				return {
+					p,
+					style: [
+						`top: ${(top / 60) * hourHeight}px`,
+						`height: ${Math.max(((bottom - top) / 60) * hourHeight - 2, 18)}px`,
+						`inset-inline-start: calc(${p.leftPct}% + 2px)`,
+						`width: calc(${p.widthPct}% - 4px)`,
+						eventColorStyle(p.ev.color)
+					].join('; ')
+				};
+			});
+	}
+
+	const nowTop = $derived.by(() => {
+		const m = now.getHours() * 60 + now.getMinutes() - dayStartHour * 60;
+		return m >= 0 && m <= gridMinutes ? (m / 60) * hourHeight : null;
+	});
+
+	let scrollEl = $state<HTMLDivElement | null>(null);
+	let scrolledFor = '';
+	$effect(() => {
+		const key = view;
+		if (!scrollEl || (view !== 'week' && view !== 'day') || scrolledFor === key) return;
+		scrolledFor = key;
+		scrollEl.scrollTop = Math.max(0, (scrollToHour - dayStartHour) * hourHeight);
+	});
+
+	function slotKey(d: Date, hour?: number) {
+		return hour == null ? toIsoDate(d) : `${toIsoDate(d)}:${hour}`;
+	}
+
+	// ── Agenda ─────────────────────────────────────────────────────────────
+	const agenda = $derived.by(() => {
+		if (view !== 'agenda') return [];
+		const r = visibleRange('agenda', date, firstDay);
+		return agendaDays(events, r.start, r.end);
+	});
+
+	// ── Month switcher ─────────────────────────────────────────────────────
+	let switcherOpen = $state(false);
+	let switcherEl = $state<HTMLButtonElement | null>(null);
+	let switcherPop = $state<HTMLDivElement | null>(null);
+	let switcherMonth = $state(startOfMonth(new Date()));
+	let switcherFocus = $state(startOfDay(new Date()));
+	let switcherDismissedAt = 0;
+	async function openSwitcher() {
+		if (switcherOpen) return closeSwitcher();
+		if (performance.now() - switcherDismissedAt < 250) return;
+		switcherMonth = startOfMonth(date);
+		switcherFocus = startOfDay(date);
+		switcherOpen = true;
+		await tick();
+		switcherPop?.querySelector<HTMLElement>('.jatui-month-grid__day[tabindex="0"]')?.focus();
+	}
+	function closeSwitcher() {
+		switcherOpen = false;
+		switcherDismissedAt = performance.now();
+	}
+	function pickFromSwitcher(d: Date) {
+		date = startOfDay(d);
+		focusedDay = date;
+		closeSwitcher();
+	}
+</script>
+
+<svelte:document ondragend={endDrag} onpointerup={() => selPointer && clearSel()} />
+
+<div class="jatui-ec {className}" role="region" aria-label={ariaLabel}>
+	{#if toolbar}
+		<div class="jatui-ec__toolbar">
+			<div class="jatui-ec__nav">
+				<button type="button" class="btn btn-sm btn-ghost" onclick={goToday}>Today</button>
+				<IconButton label="Previous {VIEW_LABEL[view].toLowerCase()}" size="sm" shape="circle" onclick={() => go(-1)}>
+					<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" class="jatui-ec__chev"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
+				</IconButton>
+				<IconButton label="Next {VIEW_LABEL[view].toLowerCase()}" size="sm" shape="circle" onclick={() => go(1)}>
+					<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" class="jatui-ec__chev"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+				</IconButton>
+				<button
+					bind:this={switcherEl}
+					type="button"
+					class="jatui-ec__title"
+					aria-haspopup="dialog"
+					aria-expanded={switcherOpen}
+					onclick={openSwitcher}
+				>
+					<span aria-live="polite">{title}</span>
+					<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
+				</button>
+			</div>
+			<div class="jatui-ec__tools">
+				{#if toolbarEnd}{@render toolbarEnd()}{/if}
+				{#if views.length > 1}
+					<div class="join" role="group" aria-label="View">
+						{#each views as v (v)}
+							<button
+								type="button"
+								class="join-item btn btn-sm {view === v ? 'btn-active' : 'btn-ghost'}"
+								aria-pressed={view === v}
+								onclick={() => (view = v)}>{VIEW_LABEL[v]}</button
+							>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	{#snippet chipBody(ev: E, time: string)}
+		{#if eventContent}
+			{@render eventContent(ev, { view, time })}
+		{:else}
+			{#if time}<span class="jatui-ec__time">{time}</span>{/if}
+			<span class="jatui-ec__label">{ev.title}</span>
+		{/if}
+	{/snippet}
+
+	{#snippet monthSegments(segments: WeekSegment<E>[], hidden: Set<string>, overrides: Map<string, number>, wi: number)}
+		{#each segments as seg (seg.ev.id + ':' + wi)}
+			{#if !hidden.has(seg.ev.id)}
+				{@const time = seg.filled ? '' : chipTime(seg.ev, cycle)}
+				<button
+					type="button"
+					class="jatui-ec__seg"
+					class:is-filled={seg.filled}
+					class:is-past={seg.past}
+					class:is-dragging={draggingId === seg.ev.id}
+					class:is-inert={!!draggingId && draggingId !== seg.ev.id}
+					style={segStyle(seg, overrides.get(seg.ev.id) ?? seg.lane)}
+					aria-label="{seg.ev.title}, {eventWhen(seg.ev, { hourCycle: cycle, locale })}"
+					aria-haspopup={eventDetails ? 'dialog' : undefined}
+					draggable={canDrag(seg.ev)}
+					data-event-id={seg.ev.id}
+					onclick={(e) => handleEventClick(seg.ev, e)}
+					ondragstart={(e) => onChipDragStart(seg.ev, e)}
+					ondragend={endDrag}
+				>
+					{#if seg.continuesLeft}<span class="jatui-ec__cont" aria-hidden="true">‹</span>{/if}
+					{#if !seg.filled}<span class="jatui-ec__dot" aria-hidden="true"></span>{/if}
+					{@render chipBody(seg.ev, time)}
+					{#if seg.continuesRight}<span class="jatui-ec__cont jatui-ec__cont--end" aria-hidden="true">›</span>{/if}
+				</button>
+			{/if}
+		{/each}
+	{/snippet}
+
+	{#if view === 'month'}
+		<div class="jatui-ec__month" role="grid" aria-label={formatMonthYear(date, locale)} style="height: {height}" bind:this={monthEl}>
+			<div class="jatui-ec__weekdays" role="row">
+				{#each dayNames as d (d.long)}
+					<div role="columnheader" class="jatui-ec__weekday" aria-label={d.long}>{d.short}</div>
+				{/each}
+			</div>
+			<div class="jatui-ec__weeks" bind:clientHeight={weeksBoxH}>
+				{#each weeks as week, wi (toIsoDate(week[0].date))}
+					{@const w = weekVis(wi)}
+					<div
+						class="jatui-ec__week"
+						class:is-open={w.open}
+						role="row"
+						style="grid-template-rows: {DAY_NUM_H}px repeat({w.vis.visibleLanes}, {LANE_H}px) {w.open ? 'auto' : ''} minmax(0, 1fr);"
+					>
+						{#each week as day, ci (toIsoDate(day.date))}
+							{@const iso = toIsoDate(day.date)}
+							{@const isToday = isSameDay(day.date, today)}
+							<div role="gridcell" class="jatui-ec__cell" aria-selected={inSel(day.date) ? 'true' : undefined}>
+								<div
+									class="jatui-ec__day"
+									role="button"
+									class:is-outside={!day.inMonth}
+									class:is-selecting={inSel(day.date)}
+									class:is-drop={dragOverKey === iso}
+									class:is-actionable={!!(onCreate || onRangeSelect)}
+									style="grid-column: {ci + 1}; grid-row: 1 / -1;"
+									data-day={iso}
+									tabindex={iso === focusIso ? 0 : -1}
+									aria-label={dayLabel(day.date, day.events.length)}
+									onpointerdown={(e) => e.target === e.currentTarget && cellPointerDown(day.date, e)}
+									onpointerenter={() => cellPointerEnter(day.date)}
+									onpointerup={(e) => cellPointerUp(day.date, e)}
+									onkeydown={(e) => cellKeydown(day.date, e)}
+									onfocus={() => (focusedDay = day.date)}
+									ondragover={(e) => onCellDragOver(iso, e)}
+									ondragleave={() => (dragOverKey = null)}
+									ondrop={(e) => onCellDrop({ date: day.date, allDay: true }, e)}
+								></div>
+								<div class="jatui-ec__daynum" style="grid-column: {ci + 1}; grid-row: 1;">
+									<button
+										type="button"
+										class="jatui-ec__num"
+										class:is-today={isToday}
+										class:is-past={day.date < today}
+										tabindex="-1"
+										aria-label="Open {formatLongDate(day.date, locale)}"
+										onclick={(e) => {
+											e.stopPropagation();
+											openDay(day.date);
+										}}
+									>
+										{day.date.getDate() === 1
+											? new Intl.DateTimeFormat(locale, { month: 'short', day: 'numeric' }).format(day.date)
+											: day.date.getDate()}
+									</button>
+								</div>
+								{@render monthSegments(
+									packed[wi].segments.filter((s) => s.startCol === ci),
+									w.vis.hiddenIds,
+									w.vis.laneOverrides,
+									wi
+								)}
+								{#if !w.open && w.vis.moreCounts[ci] > 0}
+									<button
+										type="button"
+										class="jatui-ec__more"
+										class:is-inert={!!draggingId}
+										style="grid-column: {ci + 1}; grid-row: {w.vis.visibleLanes + 1};"
+										aria-expanded={moreAction === 'expand' ? false : undefined}
+										aria-label="Show {w.vis.moreCounts[ci]} more event{w.vis.moreCounts[ci] === 1 ? '' : 's'} on {formatLongDate(day.date, locale)}"
+										onclick={(e) => {
+											e.stopPropagation();
+											toggleWeek(wi, day.date);
+										}}>+{w.vis.moreCounts[ci]} more</button
+									>
+								{:else if w.open && w.foldedMore[ci] > 0}
+									<button
+										type="button"
+										class="jatui-ec__more"
+										style="grid-column: {ci + 1}; grid-row: {w.vis.visibleLanes + 2};"
+										aria-expanded="true"
+										aria-label="Show fewer events this week"
+										onclick={(e) => {
+											e.stopPropagation();
+											toggleWeek(wi, day.date);
+										}}>Show less</button
+									>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				{/each}
+			</div>
+		</div>
+	{:else if view === 'week' || view === 'day'}
+		{@const cols = gridDays.length}
+		<div class="jatui-ec__tg" style="height: {height}; --cols: {cols}; --hour-h: {hourHeight}px">
+			<div class="jatui-ec__tg-head">
+				<div class="jatui-ec__gutter" aria-hidden="true"></div>
+				{#each gridDays as d (toIsoDate(d))}
+					<div class="jatui-ec__tg-day">
+						<button type="button" class="jatui-ec__tg-daybtn" onclick={() => openDay(d)} aria-label="Open {formatLongDate(d, locale)}" disabled={view === 'day'}>
+							<span class="jatui-ec__tg-wd">{new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(d)}</span>
+							<span class="jatui-ec__tg-dn" class:is-today={isSameDay(d, today)}>{d.getDate()}</span>
+						</button>
+					</div>
+				{/each}
+			</div>
+			{#if allDayPacked && allDayPacked.laneCount > 0}
+				<div class="jatui-ec__allday" style="grid-template-rows: repeat({allDayPacked.laneCount}, {LANE_H}px);">
+					<div class="jatui-ec__gutter jatui-ec__allday-label" style="grid-row: 1 / -1;">All day</div>
+					{#each gridDays as d, ci (toIsoDate(d))}
+						<div
+							class="jatui-ec__allday-cell"
+							class:is-drop={dragOverKey === toIsoDate(d)}
+							style="grid-column: {ci + 2}; grid-row: 1 / -1;"
+							role="presentation"
+							ondragover={(e) => onCellDragOver(toIsoDate(d), e)}
+							ondragleave={() => (dragOverKey = null)}
+							ondrop={(e) => onCellDrop({ date: d, allDay: true }, e)}
+						></div>
+					{/each}
+					{#each allDayPacked.segments.filter((s) => s.startCol < cols) as seg (seg.ev.id)}
+						<button
+							type="button"
+							class="jatui-ec__seg is-filled"
+							class:is-inert={!!draggingId && draggingId !== seg.ev.id}
+							style={segStyle(seg, seg.lane, { col: 2, row: 1, lastCol: cols - 1 })}
+							aria-label="{seg.ev.title}, {eventWhen(seg.ev, { hourCycle: cycle, locale })}"
+							aria-haspopup={eventDetails ? 'dialog' : undefined}
+							draggable={canDrag(seg.ev)}
+							onclick={(e) => handleEventClick(seg.ev, e)}
+							ondragstart={(e) => onChipDragStart(seg.ev, e)}
+							ondragend={endDrag}
+						>
+							{@render chipBody(seg.ev, '')}
+						</button>
+					{/each}
+				</div>
+			{/if}
+			<div class="jatui-ec__tg-scroll" bind:this={scrollEl}>
+				<div class="jatui-ec__tg-body" style="height: {(gridMinutes / 60) * hourHeight}px">
+					<div class="jatui-ec__gutter jatui-ec__hours" aria-hidden="true">
+						{#each hours as h (h)}
+							<div class="jatui-ec__hour-label" style="top: {(h - dayStartHour) * hourHeight}px">{h === dayStartHour ? '' : hourLabel(h, cycle)}</div>
+						{/each}
+					</div>
+					{#each timeDays as day (toIsoDate(day.date))}
+						<div class="jatui-ec__tg-col" class:is-today={isSameDay(day.date, today)} role="group" aria-label={formatLongDate(day.date, locale)}>
+							{#each hours as h (h)}
+								{@const key = slotKey(day.date, h)}
+								{#if onCreate}
+									<button
+										type="button"
+										class="jatui-ec__slot"
+										class:is-drop={dragOverKey === key}
+										aria-label="Create at {hourLabel(h, cycle)}, {formatLongDate(day.date, locale)}"
+										tabindex="-1"
+										onclick={(e) => onCreate?.(day.date, h, e)}
+										ondragover={(e) => onCellDragOver(key, e)}
+										ondragleave={() => (dragOverKey = null)}
+										ondrop={(e) => onCellDrop({ date: day.date, hour: h, allDay: false }, e)}
+									></button>
+								{:else}
+									<div
+										class="jatui-ec__slot"
+										class:is-drop={dragOverKey === key}
+										role="presentation"
+										ondragover={(e) => onCellDragOver(key, e)}
+										ondragleave={() => (dragOverKey = null)}
+										ondrop={(e) => onCellDrop({ date: day.date, hour: h, allDay: false }, e)}
+									></div>
+								{/if}
+							{/each}
+							{#each timedBlocks(day) as b (b.p.ev.id)}
+								<button
+									type="button"
+									class="jatui-ec__block"
+									class:is-past={parseLocalDate(b.p.ev.end ?? b.p.ev.start) < now}
+									class:is-dragging={draggingId === b.p.ev.id}
+									class:is-inert={!!draggingId && draggingId !== b.p.ev.id}
+									style={b.style}
+									aria-label="{b.p.ev.title}, {eventWhen(b.p.ev, { hourCycle: cycle, locale })}"
+									aria-haspopup={eventDetails ? 'dialog' : undefined}
+									draggable={canDrag(b.p.ev)}
+									onclick={(e) => handleEventClick(b.p.ev, e)}
+									ondragstart={(e) => onChipDragStart(b.p.ev, e)}
+									ondragend={endDrag}
+								>
+									{#if eventContent}
+										{@render eventContent(b.p.ev, { view, time: chipTime(b.p.ev, cycle) })}
+									{:else}
+										<span class="jatui-ec__block-title">{b.p.ev.title}</span>
+										<span class="jatui-ec__time">{chipTime(b.p.ev, cycle)}</span>
+									{/if}
+								</button>
+							{/each}
+							{#if nowTop !== null && isSameDay(day.date, today)}
+								<div class="jatui-ec__now" style="top: {nowTop}px" aria-hidden="true"></div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+	{:else}
+		<div class="jatui-ec__agenda" style="max-height: {height}">
+			{#if agenda.length === 0}
+				<p class="jatui-ec__empty">No events in {formatMonthYear(date, locale)}.</p>
+			{:else}
+				{#each agenda as group (toIsoDate(group.date))}
+					<section class="jatui-ec__agenda-day" aria-labelledby="{uid}-{toIsoDate(group.date)}">
+						<h3 id="{uid}-{toIsoDate(group.date)}" class="jatui-ec__agenda-date" class:is-today={isSameDay(group.date, today)}>
+							{new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric' }).format(group.date)}
+						</h3>
+						<ul class="jatui-ec__agenda-list">
+							{#each group.events as ev (ev.id)}
+								<li>
+									<button
+										type="button"
+										class="jatui-ec__agenda-item"
+										style={eventColorStyle(ev.color)}
+										aria-haspopup={eventDetails ? 'dialog' : undefined}
+										onclick={(e) => handleEventClick(ev, e)}
+									>
+										<span class="jatui-ec__dot" aria-hidden="true"></span>
+										<span class="jatui-ec__agenda-time">{ev.allDay ? 'All day' : chipTime(ev, cycle)}</span>
+										<span class="jatui-ec__label">{ev.title}</span>
+										{#if ev.location}<span class="jatui-ec__agenda-loc">{ev.location}</span>{/if}
+									</button>
+								</li>
+							{/each}
+						</ul>
+					</section>
+				{/each}
+			{/if}
+		</div>
+	{/if}
+</div>
+
+{#if details && eventDetails}
+	<div
+		class="jatui-ec__details bg-base-100 rounded-box border border-base-300"
+		role="dialog"
+		aria-label={details.ev.title}
+		style={eventColorStyle(details.ev.color)}
+		use:floating={{ anchor: details.anchor, placement: 'bottom-start', offset: 6, onDismiss: closeDetails }}
+	>
+		{@render eventDetails(details.ev, closeDetails)}
+	</div>
+{/if}
+
+{#if switcherOpen}
+	<div
+		bind:this={switcherPop}
+		class="jatui-ec__switcher bg-base-100 rounded-box border border-base-300"
+		role="dialog"
+		aria-label="Jump to date"
+		data-calendar-root
+		use:floating={{ anchor: switcherEl, placement: 'bottom-start', offset: 6, onDismiss: closeSwitcher }}
+	>
+		<CalendarHeader
+			label={formatMonthYear(switcherMonth, locale)}
+			onPrev={() => (switcherMonth = addMonths(switcherMonth, -1))}
+			onNext={() => (switcherMonth = addMonths(switcherMonth, 1))}
+			size="sm"
+		/>
+		<MonthGrid
+			month={switcherMonth}
+			focusedDate={switcherFocus}
+			weekStart={firstDay}
+			{locale}
+			selected={date}
+			size="sm"
+			fixedWeeks
+			onSelect={pickFromSwitcher}
+			onFocusDate={(d) => {
+				switcherFocus = d;
+				if (!isSameMonth(d, switcherMonth)) switcherMonth = startOfMonth(d);
+			}}
+		/>
+	</div>
+{/if}
+
+<style>
+	.jatui-ec {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		min-width: 0;
+	}
+	.jatui-ec__toolbar {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+	.jatui-ec__nav,
+	.jatui-ec__tools {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+	.jatui-ec__tools {
+		gap: 0.5rem;
+	}
+	:global([dir='rtl']) .jatui-ec__chev {
+		transform: scaleX(-1);
+	}
+	/* Month-switcher pill. */
+	.jatui-ec__title {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		margin-inline-start: 0.25rem;
+		padding: 0.25rem 0.75rem;
+		border-radius: 9999px;
+		font-size: 1rem;
+		font-weight: 600;
+		cursor: pointer;
+	}
+	.jatui-ec__title:hover {
+		background: var(--jatui-hover-bg, color-mix(in oklab, var(--color-base-content) 7%, transparent));
+	}
+	.jatui-ec__title:focus-visible,
+	.jatui-ec__day:focus-visible,
+	.jatui-ec__seg:focus-visible,
+	.jatui-ec__block:focus-visible,
+	.jatui-ec__more:focus-visible,
+	.jatui-ec__agenda-item:focus-visible,
+	.jatui-ec__tg-daybtn:focus-visible,
+	.jatui-ec__num:focus-visible {
+		outline: var(--jatui-focus-ring-width, 2px) solid var(--jatui-focus-ring, var(--color-primary));
+		outline-offset: -2px;
+	}
+
+	/* ── Month ── */
+	.jatui-ec__month {
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		border: 1px solid var(--jatui-separator, var(--color-base-300));
+		border-radius: var(--radius-box, 0.75rem);
+		overflow: hidden;
+	}
+	.jatui-ec__weekdays {
+		display: grid;
+		grid-template-columns: repeat(7, minmax(0, 1fr));
+		border-block-end: 1px solid var(--jatui-separator, var(--color-base-300));
+		background: color-mix(in oklab, var(--color-base-200) 40%, transparent);
+	}
+	.jatui-ec__weekday {
+		padding-block: 0.375rem;
+		text-align: center;
+		font-size: 0.6875rem;
+		font-weight: 600;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+	}
+	.jatui-ec__weeks {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		min-height: 0;
+		overflow-y: auto;
+	}
+	.jatui-ec__week {
+		display: grid;
+		flex: 1;
+		grid-template-columns: repeat(7, minmax(0, 1fr));
+		/* No min-height: 0 — a row never shrinks below its lanes; the weeks box scrolls. */
+		border-block-end: 1px solid var(--jatui-separator, var(--color-base-300));
+	}
+	.jatui-ec__week:last-child {
+		border-block-end: 0;
+	}
+	/* An expanded week sizes to its lanes; the weeks box scrolls instead of clipping. */
+	.jatui-ec__week.is-open {
+		flex: none;
+		min-height: fit-content;
+	}
+	/* Each gridcell's parts are items of the week's grid, so a bar can span columns. */
+	.jatui-ec__cell {
+		display: contents;
+	}
+	.jatui-ec__day {
+		z-index: 0;
+		border-inline-end: 1px solid var(--jatui-separator, var(--color-base-300));
+		transition: background-color var(--motion-fast, 120ms) var(--motion-standard, ease);
+	}
+	.jatui-ec__cell:last-child .jatui-ec__day {
+		border-inline-end: 0;
+	}
+	.jatui-ec__day.is-outside {
+		background: color-mix(in oklab, var(--color-base-content) 4%, transparent);
+	}
+	.jatui-ec__day.is-actionable {
+		cursor: pointer;
+	}
+	.jatui-ec__day.is-actionable:hover {
+		background: var(--jatui-hover-bg, color-mix(in oklab, var(--color-base-content) 5%, transparent));
+	}
+	.jatui-ec__day.is-selecting {
+		background: var(--jatui-selection-bg, color-mix(in oklab, var(--color-primary) 14%, transparent));
+		box-shadow: inset 0 0 0 1px var(--jatui-selection-edge, color-mix(in oklab, var(--color-primary) 55%, transparent));
+	}
+	.jatui-ec__day.is-drop,
+	.jatui-ec__allday-cell.is-drop,
+	.jatui-ec__slot.is-drop {
+		background: var(--jatui-selection-bg, color-mix(in oklab, var(--color-primary) 14%, transparent));
+		box-shadow: inset 0 0 0 1px var(--jatui-selection-edge, color-mix(in oklab, var(--color-primary) 55%, transparent));
+	}
+	.jatui-ec__daynum {
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding-inline: 0.25rem;
+		pointer-events: none;
+	}
+	.jatui-ec__num {
+		pointer-events: auto;
+		min-width: 1.375rem;
+		height: 1.375rem;
+		padding-inline: 0.25rem;
+		border-radius: 9999px;
+		font-size: 0.75rem;
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+		color: color-mix(in oklab, var(--color-base-content) 85%, transparent);
+		cursor: pointer;
+	}
+	.jatui-ec__num.is-past {
+		color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+	}
+	.jatui-ec__num:hover {
+		background: var(--color-base-300);
+	}
+	.jatui-ec__num.is-today {
+		background: var(--jatui-selection-solid, var(--color-primary));
+		color: var(--jatui-selection-solid-fg, var(--color-primary-content));
+	}
+	.jatui-ec__day.is-outside ~ .jatui-ec__daynum .jatui-ec__num:not(.is-today) {
+		color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
+	}
+	.jatui-ec__seg {
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		min-width: 0;
+		height: 20px;
+		padding-inline: 0.25rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		line-height: 1;
+		text-align: start;
+		color: var(--color-base-content);
+		cursor: pointer;
+		transition:
+			background-color var(--motion-fast, 120ms) var(--motion-standard, ease),
+			opacity var(--motion-fast, 120ms) var(--motion-standard, ease);
+	}
+	.jatui-ec__seg:hover {
+		background: var(--jatui-hover-bg, color-mix(in oklab, var(--color-base-content) 7%, transparent));
+	}
+	.jatui-ec__seg.is-filled {
+		background: var(--ev-bg);
+		box-shadow: inset 3px 0 0 var(--ev);
+	}
+	:global([dir='rtl']) .jatui-ec__seg.is-filled {
+		box-shadow: inset -3px 0 0 var(--ev);
+	}
+	.jatui-ec__seg.is-filled:hover {
+		background: color-mix(in oklab, var(--ev) 26%, var(--color-base-100));
+	}
+	.jatui-ec__seg.is-past,
+	.jatui-ec__block.is-past {
+		opacity: 0.7;
+	}
+	.jatui-ec__seg.is-dragging,
+	.jatui-ec__block.is-dragging {
+		opacity: 0.35;
+	}
+	.is-inert {
+		pointer-events: none;
+	}
+	.jatui-ec__seg[draggable='true'],
+	.jatui-ec__block[draggable='true'] {
+		cursor: grab;
+	}
+	.jatui-ec__dot {
+		flex-shrink: 0;
+		width: 0.375rem;
+		height: 0.375rem;
+		border-radius: 9999px;
+		background: var(--ev);
+	}
+	.jatui-ec__time {
+		flex-shrink: 0;
+		font-variant-numeric: tabular-nums;
+		color: var(--ev-fg, color-mix(in oklab, var(--color-base-content) 60%, transparent));
+	}
+	.jatui-ec__label {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.jatui-ec__cont {
+		flex-shrink: 0;
+		opacity: 0.7;
+	}
+	.jatui-ec__cont--end {
+		margin-inline-start: auto;
+	}
+	.jatui-ec__more {
+		z-index: 1;
+		min-width: 0;
+		height: 20px;
+		margin-inline: 3px;
+		padding-inline: 0.25rem;
+		border-radius: var(--radius-selector, 0.375rem);
+		font-size: 0.75rem;
+		font-weight: 500;
+		text-align: start;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+		cursor: pointer;
+	}
+	.jatui-ec__more:hover {
+		color: var(--color-base-content);
+		background: var(--jatui-hover-bg, color-mix(in oklab, var(--color-base-content) 7%, transparent));
+	}
+
+	/* ── Week / day ── */
+	.jatui-ec__tg {
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		border: 1px solid var(--jatui-separator, var(--color-base-300));
+		border-radius: var(--radius-box, 0.75rem);
+		overflow: hidden;
+	}
+	.jatui-ec__tg-head,
+	.jatui-ec__allday,
+	.jatui-ec__tg-body {
+		display: grid;
+		grid-template-columns: 3.5rem repeat(var(--cols), minmax(0, 1fr));
+	}
+	.jatui-ec__tg-head {
+		border-block-end: 1px solid var(--jatui-separator, var(--color-base-300));
+	}
+	.jatui-ec__tg-day {
+		border-inline-start: 1px solid var(--jatui-separator, var(--color-base-300));
+		text-align: center;
+	}
+	.jatui-ec__tg-daybtn {
+		display: inline-flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.125rem;
+		padding-block: 0.375rem;
+		width: 100%;
+		cursor: pointer;
+	}
+	.jatui-ec__tg-daybtn:disabled {
+		cursor: default;
+	}
+	.jatui-ec__tg-wd {
+		font-size: 0.6875rem;
+		font-weight: 600;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+	}
+	.jatui-ec__tg-dn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.75rem;
+		height: 1.75rem;
+		border-radius: 9999px;
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+	.jatui-ec__tg-dn.is-today {
+		background: var(--jatui-selection-solid, var(--color-primary));
+		color: var(--jatui-selection-solid-fg, var(--color-primary-content));
+	}
+	.jatui-ec__allday {
+		padding-block: 2px;
+		border-block-end: 1px solid var(--jatui-separator, var(--color-base-300));
+	}
+	.jatui-ec__allday .jatui-ec__seg {
+		align-self: center;
+	}
+	.jatui-ec__allday-label {
+		grid-column: 1;
+		align-self: center;
+		padding-inline-end: 0.375rem;
+		font-size: 0.6875rem;
+		text-align: end;
+		color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+	}
+	.jatui-ec__allday-cell {
+		border-inline-start: 1px solid var(--jatui-separator, var(--color-base-300));
+	}
+	.jatui-ec__tg-scroll {
+		position: relative;
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+	}
+	.jatui-ec__tg-body {
+		position: relative;
+	}
+	.jatui-ec__hours {
+		position: relative;
+	}
+	.jatui-ec__hour-label {
+		position: absolute;
+		inset-inline-end: 0.375rem;
+		transform: translateY(-50%);
+		font-size: 0.6875rem;
+		font-variant-numeric: tabular-nums;
+		color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
+	}
+	.jatui-ec__tg-col {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		border-inline-start: 1px solid var(--jatui-separator, var(--color-base-300));
+	}
+	.jatui-ec__tg-col.is-today {
+		background: color-mix(in oklab, var(--color-primary) 3%, transparent);
+	}
+	.jatui-ec__slot {
+		flex: none;
+		height: var(--hour-h);
+		border-block-end: 1px solid color-mix(in oklab, var(--jatui-separator, var(--color-base-300)) 70%, transparent);
+	}
+	button.jatui-ec__slot {
+		cursor: pointer;
+	}
+	button.jatui-ec__slot:hover {
+		background: var(--jatui-hover-bg, color-mix(in oklab, var(--color-base-content) 5%, transparent));
+	}
+	.jatui-ec__block {
+		position: absolute;
+		z-index: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 1px;
+		overflow: hidden;
+		padding: 0.125rem 0.375rem;
+		border-radius: var(--radius-selector, 0.375rem);
+		background: var(--ev-bg);
+		box-shadow:
+			inset 3px 0 0 var(--ev),
+			0 0 0 1px var(--color-base-100);
+		font-size: 0.75rem;
+		line-height: 1.2;
+		text-align: start;
+		color: var(--color-base-content);
+		cursor: pointer;
+	}
+	:global([dir='rtl']) .jatui-ec__block {
+		box-shadow:
+			inset -3px 0 0 var(--ev),
+			0 0 0 1px var(--color-base-100);
+	}
+	.jatui-ec__block:hover {
+		background: color-mix(in oklab, var(--ev) 26%, var(--color-base-100));
+	}
+	.jatui-ec__block-title {
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: 600;
+	}
+	.jatui-ec__now {
+		position: absolute;
+		inset-inline: 0;
+		z-index: 2;
+		height: 2px;
+		background: var(--color-error);
+		pointer-events: none;
+	}
+	.jatui-ec__now::before {
+		content: '';
+		position: absolute;
+		inset-inline-start: -4px;
+		top: -3px;
+		width: 8px;
+		height: 8px;
+		border-radius: 9999px;
+		background: var(--color-error);
+	}
+
+	/* ── Agenda ── */
+	.jatui-ec__agenda {
+		overflow-y: auto;
+		border: 1px solid var(--jatui-separator, var(--color-base-300));
+		border-radius: var(--radius-box, 0.75rem);
+	}
+	.jatui-ec__agenda-day {
+		display: grid;
+		grid-template-columns: 7rem minmax(0, 1fr);
+		gap: 0.75rem;
+		padding: 0.625rem 0.75rem;
+		border-block-end: 1px solid var(--jatui-separator, var(--color-base-300));
+	}
+	.jatui-ec__agenda-day:last-child {
+		border-block-end: 0;
+	}
+	.jatui-ec__agenda-date {
+		margin: 0;
+		padding-block-start: 0.25rem;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+	}
+	.jatui-ec__agenda-date.is-today {
+		color: var(--jatui-selection-solid, var(--color-primary));
+	}
+	.jatui-ec__agenda-list {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.jatui-ec__agenda-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		padding: 0.25rem 0.375rem;
+		border-radius: var(--radius-selector, 0.375rem);
+		font-size: 0.875rem;
+		text-align: start;
+		cursor: pointer;
+	}
+	.jatui-ec__agenda-item:hover {
+		background: var(--jatui-hover-bg, color-mix(in oklab, var(--color-base-content) 7%, transparent));
+	}
+	.jatui-ec__agenda-time {
+		flex-shrink: 0;
+		width: 4rem;
+		font-size: 0.8125rem;
+		font-variant-numeric: tabular-nums;
+		color: var(--ev-fg);
+	}
+	.jatui-ec__agenda-loc {
+		margin-inline-start: auto;
+		font-size: 0.75rem;
+		color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+	}
+	.jatui-ec__empty {
+		margin: 0;
+		padding: 2rem;
+		text-align: center;
+		font-size: 0.875rem;
+		color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+	}
+	@media (max-width: 40rem) {
+		.jatui-ec__agenda-day {
+			grid-template-columns: minmax(0, 1fr);
+			gap: 0.25rem;
+		}
+	}
+
+	/* ── Popovers ── */
+	.jatui-ec__details {
+		z-index: 60;
+		width: 18rem;
+		max-width: calc(100vw - 1rem);
+		padding: 0.75rem;
+		box-shadow: inset 3px 0 0 var(--ev);
+	}
+	.jatui-ec__switcher {
+		z-index: 60;
+		width: max-content;
+		min-width: 17rem;
+		padding: 0.75rem;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-ec__day,
+		.jatui-ec__seg {
+			transition: none;
+		}
+	}
+	:global([data-motion='calm']) .jatui-ec__day,
+	:global([data-motion='calm']) .jatui-ec__seg {
+		transition-duration: 0ms;
+	}
+</style>