@nomideusz/svelte-calendar 0.20.1 → 1.0.0

package/dist/adapters/recurring.js

@@ -1,5 +1,6 @@
-import { startOfWeek, DAY_MS } from '../core/time.js';
+import { startOfWeek, addDaysMs, diffDays, DAY_MS, overlapsRange } from '../core/time.js';
 import { VIVID_PALETTE } from '../core/palette.js';
+import { CalendarReadOnlyError, EventNotFoundError } from './errors.js';
 // ── Helpers ─────────────────────────────────────────────
 /** Parse "HH:MM" into [hours, minutes] */
 function parseTime(time) {
@@ -30,16 +31,23 @@ function parseDate(str) {
         throw new Error(`Invalid date "${str}"`);
     return date;
 }
-/** ISO weekday offset from Monday: 1→0, 2→1, … 7→6 */
-function isoWeekdayToOffset(dayOfWeek) {
-    return dayOfWeek - 1;
+/**
+ * Days from the start of the week to an ISO weekday (1=Mon … 7=Sun).
+ * Monday weeks: 1→0 … 7→6. Sunday weeks: 7→0, 1→1 … 6→6.
+ */
+function isoWeekdayToOffset(dayOfWeek, mondayStart) {
+    return mondayStart ? dayOfWeek - 1 : dayOfWeek % 7;
 }
-/** Normalize `dayOfWeek` to a sorted array */
-function normalizeDays(value) {
+/**
+ * Normalize `dayOfWeek` to an array in week order — the projection walks it
+ * in order and stops at the first day past its bound, so Sunday must come
+ * first in a Sunday week.
+ */
+function normalizeDays(value, mondayStart) {
     if (value == null)
         return [];
     const arr = Array.isArray(value) ? [...value] : [value];
-    return arr.sort((a, b) => a - b);
+    return arr.sort((a, b) => isoWeekdayToOffset(a, mondayStart) - isoWeekdayToOffset(b, mondayStart));
 }
 /** Clamp day to last day of month (e.g. 31 → 28 in Feb) */
 function clampDayOfMonth(year, month, day) {
@@ -58,7 +66,9 @@ function createConcreteEvent(rec, date) {
     const [sh, sm] = parseTime(rec.startTime);
     const [eh, em] = parseTime(rec.endTime);
     const start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), sh, sm);
-    const end = new Date(date.getFullYear(), date.getMonth(), date.getDate(), eh, em);
+    // An end before the start runs past midnight (22:00–02:00).
+    const overnight = eh * 60 + em < sh * 60 + sm;
+    const end = new Date(date.getFullYear(), date.getMonth(), date.getDate() + (overnight ? 1 : 0), eh, em);
     return {
         id: `${rec.id}--${dateKey(date)}`,
         title: rec.title,
@@ -91,7 +101,7 @@ function computeUntilFromCount(rec, startDateObj, mondayStart) {
             return d;
         }
         case 'weekly': {
-            const days = normalizeDays(rec.dayOfWeek);
+            const days = normalizeDays(rec.dayOfWeek, mondayStart);
             if (days.length === 0)
                 return undefined;
             const startMs = startDateObj.getTime();
@@ -100,20 +110,24 @@ function computeUntilFromCount(rec, startDateObj, mondayStart) {
             const maxCycles = Math.ceil(count / days.length) + 2;
             for (let c = 0; c < maxCycles; c++) {
                 for (const day of days) {
-                    const dayMs = weekMs + isoWeekdayToOffset(day) * DAY_MS;
+                    const dayMs = addDaysMs(weekMs, isoWeekdayToOffset(day, mondayStart));
                     if (dayMs >= startMs) {
                         remaining--;
                         if (remaining === 0)
                             return new Date(dayMs);
                     }
                 }
-                weekMs += interval * 7 * DAY_MS;
+                weekMs = addDaysMs(weekMs, interval * 7);
             }
             return undefined;
         }
         case 'monthly': {
+            // The start month counts only if its occurrence is on or after
+            // startDate (20 Jan with dayOfMonth 15 begins in February).
+            const first = clampDayOfMonth(startDateObj.getFullYear(), startDateObj.getMonth(), rec.dayOfMonth ?? 1);
             const totalMonths = startDateObj.getFullYear() * 12 +
                 startDateObj.getMonth() +
+                (first < startDateObj ? interval : 0) +
                 (count - 1) * interval;
             const y = Math.floor(totalMonths / 12);
             const m = totalMonths % 12;
@@ -150,7 +164,7 @@ function projectDaily(rec, range, startDate, effectiveUntil, out) {
 }
 function projectWeekly(rec, range, startDate, effectiveUntil, mondayStart, out) {
     const interval = rec.interval ?? 1;
-    const days = normalizeDays(rec.dayOfWeek);
+    const days = normalizeDays(rec.dayOfWeek, mondayStart);
     if (days.length === 0)
         return;
     const startDateMs = startDate?.getTime();
@@ -165,16 +179,16 @@ function projectWeekly(rec, range, startDate, effectiveUntil, mondayStart, out)
         weekMs = anchorWeekMs;
     }
     else {
-        const weeksBetween = Math.floor((rangeStartMs - anchorWeekMs) / (7 * DAY_MS));
+        const weeksBetween = Math.floor(diffDays(rangeStartMs, anchorWeekMs) / 7);
         const skip = Math.floor(weeksBetween / interval);
-        weekMs = anchorWeekMs + skip * interval * 7 * DAY_MS;
-        if (weekMs + 7 * DAY_MS <= rangeStartMs) {
-            weekMs += interval * 7 * DAY_MS;
+        weekMs = addDaysMs(anchorWeekMs, skip * interval * 7);
+        if (addDaysMs(weekMs, 7) <= rangeStartMs) {
+            weekMs = addDaysMs(weekMs, interval * 7);
         }
     }
     while (weekMs < rangeEndMs) {
         for (const day of days) {
-            const dayMs = weekMs + isoWeekdayToOffset(day) * DAY_MS;
+            const dayMs = addDaysMs(weekMs, isoWeekdayToOffset(day, mondayStart));
             if (startDateMs != null && dayMs < startDateMs)
                 continue;
             if (dayMs >= rangeEndMs)
@@ -187,7 +201,7 @@ function projectWeekly(rec, range, startDate, effectiveUntil, mondayStart, out)
                 out.push(ev);
             }
         }
-        weekMs += interval * 7 * DAY_MS;
+        weekMs = addDaysMs(weekMs, interval * 7);
     }
 }
 function projectMonthly(rec, range, startDate, effectiveUntil, out) {
@@ -210,7 +224,7 @@ function projectMonthly(rec, range, startDate, effectiveUntil, out) {
             break;
         if (effectiveUntil && date > effectiveUntil)
             break;
-        if (date >= range.start && (!startDate || date >= startDate)) {
+        if (!startDate || date >= startDate) {
             const ev = createConcreteEvent(rec, date);
             if (ev.start < range.end && ev.end > range.start) {
                 out.push(ev);
@@ -254,6 +268,10 @@ export function createRecurringAdapter(schedule, options = {}) {
     }
     const fetchEventsSync = (range) => {
         const events = [];
+        // Project from a day earlier: an occurrence that runs past midnight
+        // (22:00–02:00) overlaps the range from the day before it. The
+        // overlap filter below trims back to the requested range.
+        const projected = { start: new Date(addDaysMs(range.start.getTime(), -1)), end: range.end };
         for (const rec of schedule) {
             const colored = { ...rec, color: resolveColor(rec) };
             const freq = rec.frequency ?? 'weekly';
@@ -272,13 +290,13 @@ export function createRecurringAdapter(schedule, options = {}) {
             }
             switch (freq) {
                 case 'daily':
-                    projectDaily(colored, range, sd, effectiveUntil, events);
+                    projectDaily(colored, projected, sd, effectiveUntil, events);
                     break;
                 case 'weekly':
-                    projectWeekly(colored, range, sd, effectiveUntil, mondayStart, events);
+                    projectWeekly(colored, projected, sd, effectiveUntil, mondayStart, events);
                     break;
                 case 'monthly':
-                    projectMonthly(colored, range, sd, effectiveUntil, events);
+                    projectMonthly(colored, projected, sd, effectiveUntil, events);
                     break;
             }
         }
@@ -288,7 +306,7 @@ export function createRecurringAdapter(schedule, options = {}) {
             for (const d of rec.excludeDates ?? [])
                 skipped.add(`${rec.id}--${d.replace(/-/g, '')}`);
         }
-        const kept = skipped.size ? events.filter((e) => !skipped.has(e.id)) : events;
+        const kept = events.filter((e) => !skipped.has(e.id) && overlapsRange(e, range.start, range.end));
         return movable ? kept : kept.map((e) => ({ ...e, data: { ...e.data, readOnly: true } }));
     };
     return {
@@ -303,9 +321,9 @@ export function createRecurringAdapter(schedule, options = {}) {
         async updateEvent(id) {
             const ruleId = id.split('--')[0];
             if (!schedule.some((rec) => rec.id === ruleId)) {
-                throw new Error(`Event not found: ${id}`);
+                throw new EventNotFoundError(id);
             }
-            throw new Error(`read-only: ${id} is a projected occurrence. Add its date to the rule's excludeDates and store the change yourself.`);
+            throw new CalendarReadOnlyError(`read-only: ${id} is a projected occurrence. Add its date to the rule's excludeDates and store the change yourself.`);
         },
     };
 }

package/dist/adapters/rest.d.ts

@@ -12,9 +12,9 @@ export interface RestAdapterOptions {
     baseUrl: string;
     /** Custom headers (e.g. Authorization) */
     headers?: Record<string, string>;
-    /** Map API response to TimelineEvent[] */
+    /** Map API response to TimelineEvent[] (default: the body is an array of events, `start`/`end` parsed into Dates) */
     mapEvents?: (data: unknown) => TimelineEvent[];
-    /** Map API response to a single TimelineEvent */
+    /** Map API response to a single TimelineEvent (default: the body is the event, `start`/`end` parsed into Dates) */
     mapEvent?: (data: unknown) => TimelineEvent;
 }
 export declare function createRestAdapter(options: RestAdapterOptions): CalendarAdapter;

package/dist/adapters/rest.js

@@ -1,7 +1,12 @@
+/** JSON carries dates as strings; the calendar needs Date objects. */
+function reviveEvent(data) {
+    const ev = data;
+    return { ...ev, start: new Date(ev.start), end: new Date(ev.end) };
+}
 export function createRestAdapter(options) {
     const { baseUrl, headers = {} } = options;
-    const mapEvents = options.mapEvents ?? ((data) => data);
-    const mapEvent = options.mapEvent ?? ((data) => data);
+    const mapEvents = options.mapEvents ?? ((data) => data.map(reviveEvent));
+    const mapEvent = options.mapEvent ?? reviveEvent;
     async function request(path, init) {
         const res = await fetch(`${baseUrl}${path}`, {
             ...init,
@@ -40,14 +45,14 @@ export function createRestAdapter(options) {
             return mapEvent(data);
         },
         async updateEvent(id, patch) {
-            const data = await request(`/events/${id}`, {
+            const data = await request(`/events/${encodeURIComponent(id)}`, {
                 method: 'PATCH',
                 body: JSON.stringify(patch),
             });
             return mapEvent(data);
         },
         async deleteEvent(id) {
-            await request(`/events/${id}`, { method: 'DELETE' });
+            await request(`/events/${encodeURIComponent(id)}`, { method: 'DELETE' });
         },
     };
 }

package/dist/calendar/Calendar.svelte

@@ -17,25 +17,19 @@
       oneventcreate={handleCreate}
     />
 -->
-<script lang="ts">import { setContext, untrack } from "svelte";
-import { createEventStore } from "../engine/event-store.svelte.js";
-import { createViewState } from "../engine/view-state.svelte.js";
-import { createSelection } from "../engine/selection.svelte.js";
-import { createDragState } from "../engine/drag.svelte.js";
-import { onMount } from "svelte";
-import { getLabels, fmtWeekRange } from "../core/locale.js";
-import { auto } from "../theme/presets.js";
-import { probeHostTheme, observeHostTheme } from "../theme/auto.js";
-import Planner from "../views/planner/Planner.svelte";
+<script module lang="ts">import Planner from "../views/planner/Planner.svelte";
 import PlannerScroll from "../views/planner/PlannerScroll.svelte";
 import Agenda from "../views/agenda/Agenda.svelte";
 import Mobile from "../views/mobile/Mobile.svelte";
 import MonthGrid from "../views/month/MonthGrid.svelte";
-import { wrapAdapterWithTimezone, toZonedTime, fromZonedTime } from "../core/timezone.js";
-/** Breakpoint (px) at which auto-mobile activates */
-const MOBILE_BREAKPOINT = 768;
-// ── Built-in views (used when no custom views are provided) ──
-const DEFAULT_VIEWS = [
+/**
+* The built-in views — the registry a Calendar uses without a `views` prop.
+* Spread it to add your own view and keep these:
+* `views={[...defaultViews, { id: 'day-kanban', ... }]}`.
+* On phones (`mobile: 'auto'`), every view except `*-agenda` and `*-mobile`
+* swaps to the registered `{mode}-mobile` view, when there is one.
+*/
+export const defaultViews = [
 	{
 		id: "day-planner",
 		label: "Planner",
@@ -85,10 +79,29 @@ const DEFAULT_VIEWS = [
 		component: MonthGrid
 	}
 ];
-let { adapter, views = DEFAULT_VIEWS, view: activeViewId, theme = auto, autoTheme, mondayStart = true, height: heightProp = 600, borderRadius = 12, dir, locale, labels: labelsProp, readOnly = false, visibleHours, initialDate, snapInterval = 15, minColumnWidth = 110, showModePills = true, showNavigation = true, equalDays = false, showDates = true, hideDays, currentDate, blockedSlots, days, minDuration, maxDuration, disabledDates, compact = false, columns = false, mobile: mobileProp = "auto", event: eventSnippet, empty: emptySnippet, dayHeader: dayHeaderSnippet, header: headerSnippet, navigation: navigationSnippet, oneventclick, oneventcreate, onexternaldrop, oneventmove, onviewchange, ondatechange, oneventhover, ondayclick, onerror, timezone } = $props();
+</script>
+
+<script lang="ts">import { setContext, untrack } from "svelte";
+import { createEventStore } from "../engine/event-store.svelte.js";
+import { createViewState } from "../engine/view-state.svelte.js";
+import { createSelection } from "../engine/selection.svelte.js";
+import { createDragState } from "../engine/drag.svelte.js";
+import { onMount } from "svelte";
+import { getLabels, getDefaultLocale, fmtWeekRange } from "../core/locale.js";
+import { createClock } from "../core/clock.svelte.js";
+import { auto } from "../theme/presets.js";
+import { observeHostTheme } from "../theme/auto.js";
+import { wrapAdapterWithTimezone, toZonedTime, fromZonedTime } from "../core/timezone.js";
+import { isReadOnlyError, isNotFoundError } from "../adapters/errors.js";
+/** Breakpoint (px) at which auto-mobile activates */
+const MOBILE_BREAKPOINT = 768;
+let { adapter, views = defaultViews, view: activeViewId, theme = auto, autoTheme, mondayStart = true, height: heightProp = 600, borderRadius = 12, dir, locale, labels: labelsProp, readOnly = false, visibleHours, initialDate, snapInterval = 15, minColumnWidth = 110, showModePills = true, showNavigation = true, equalDays = false, showDates = true, hideDays, currentDate, blockedSlots, days, minDuration, maxDuration, disabledDates, compact = false, columns = false, mobile: mobileProp = "auto", event: eventSnippet, empty: emptySnippet, dayHeader: dayHeaderSnippet, header: headerSnippet, navigation: navigationSnippet, oneventclick, oneventcreate, onexternaldrop, oneventmove, onviewchange, ondatechange, oneventhover, ondayclick, onerror, timezone } = $props();
 // In readOnly mode, suppress mutation callbacks. With a timezone, the
 // drag plane is zoned wall-clock — hosts always receive real instants.
 const unzone = (d) => timezone ? fromZonedTime(d, timezone) : d;
+// Dates handed IN (initialDate, currentDate) are instants; the views work on
+// the zoned wall-clock plane.
+const zoneIn = (d) => d && timezone ? toZonedTime(d, timezone) : d;
 const effectiveCreate = $derived(readOnly || !oneventcreate ? undefined : (range) => oneventcreate({
 	start: unzone(range.start),
 	end: unzone(range.end)
@@ -105,9 +118,11 @@ function handleEventClick(ev, anchor) {
 	oneventclick?.(ev, anchor);
 }
 // ── Mobile detection (container-based, not viewport) ──
-// Seeded from viewport width so the first client paint doesn't flash the
-// desktop chrome on phones; the ResizeObserver measurement takes over on mount.
-let containerWidth = $state(typeof window !== "undefined" && window.matchMedia?.(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches ? window.innerWidth : 0);
+// Starts unmeasured on server AND client: the first client render must be
+// the markup the server sent, or hydration fails (a phone reload of an SSR
+// page used to throw in the mobile branch). onMount measures before the
+// next paint; a page without SSR renders the right layout at once.
+let containerWidth = $state(0);
 const isMobileContainer = $derived(containerWidth > 0 && containerWidth < MOBILE_BREAKPOINT);
 const useMobile = $derived(mobileProp === "auto" ? isMobileContainer : Boolean(mobileProp));
 // Below this container width the mobile header can't fit pills + nav + a
@@ -154,24 +169,15 @@ const viewState = createViewState(untrack(() => ({
 	view: activeViewId ?? views[0]?.id,
 	mondayStart,
 	// Focus lives on the zoned plane too — day boundaries follow the zone.
-	initialDate: initialDate && timezone ? toZonedTime(initialDate, timezone) : initialDate,
+	// A controlled currentDate wins, so the server renders the right period.
+	initialDate: zoneIn(currentDate ?? initialDate),
 	dayCount: days,
 	timezone,
 	modeForView: (viewId) => views.find((v) => v.id === viewId)?.mode
 })));
 const selection = createSelection();
 const drag = createDragState();
-// ── Drag commit handler ──
-// Views call this on pointer-up to process drag results.
-async function commitDrag() {
-	if (readOnly) {
-		drag.cancel();
-		return;
-	}
-	const mode = drag.mode;
-	const payload = drag.commit();
-	if (!payload) return;
-	let { start, end } = payload;
+function validateRange(mode, start, end) {
 	// Enforce min/max duration for create and resize
 	if (mode === "create" || mode === "resize-start" || mode === "resize-end") {
 		// Defensive floor: never accept a zero/negative duration, even when
@@ -181,24 +187,14 @@ async function commitDrag() {
 			if (mode === "resize-start") start = new Date(end.getTime() - floorMs);
 			else end = new Date(start.getTime() + floorMs);
 		}
-		const durationMs = end.getTime() - start.getTime();
-		const durationMin = durationMs / 6e4;
-		if (minDuration && durationMin < minDuration) {
-			if (mode === "resize-start") {
-				start = new Date(end.getTime() - minDuration * 6e4);
-			} else {
-				end = new Date(start.getTime() + minDuration * 6e4);
-			}
-		}
-		if (maxDuration && durationMin > maxDuration) {
-			if (mode === "resize-start") {
-				start = new Date(end.getTime() - maxDuration * 6e4);
-			} else {
-				end = new Date(start.getTime() + maxDuration * 6e4);
-			}
+		const durationMin = (end.getTime() - start.getTime()) / 6e4;
+		const clampTo = minDuration && durationMin < minDuration ? minDuration : maxDuration && durationMin > maxDuration ? maxDuration : null;
+		if (clampTo !== null) {
+			if (mode === "resize-start") start = new Date(end.getTime() - clampTo * 6e4);
+			else end = new Date(start.getTime() + clampTo * 6e4);
 		}
 	}
-	// Reject if target lands on a disabled date
+	// Reject if the range touches a disabled date
 	if (disabledDates?.length) {
 		const startDay = new Date(start);
 		startDay.setHours(0, 0, 0, 0);
@@ -208,10 +204,10 @@ async function commitDrag() {
 			const dt = new Date(dd);
 			dt.setHours(0, 0, 0, 0);
 			const ts = dt.getTime();
-			if (ts >= startDay.getTime() && ts <= endDay.getTime()) return;
+			if (ts >= startDay.getTime() && ts <= endDay.getTime()) return null;
 		}
 	}
-	// Reject if target overlaps a blocked slot
+	// Reject if the range overlaps a blocked slot
 	if (blockedSlots?.length) {
 		const startH = start.getHours() + start.getMinutes() / 60;
 		const endH = end.getHours() + end.getMinutes() / 60 + (end.getDate() !== start.getDate() ? 24 : 0);
@@ -219,25 +215,51 @@ async function commitDrag() {
 		const isoDay = jsDay === 0 ? 7 : jsDay;
 		for (const slot of blockedSlots) {
 			if (slot.day && slot.day !== isoDay) continue;
-			if (startH < slot.end && endH > slot.start) return;
+			if (startH < slot.end && endH > slot.start) return null;
 		}
 	}
+	return {
+		start,
+		end
+	};
+}
+// What views call for a click-to-create: the same checks a drag gets.
+const checkedCreate = $derived.by(() => {
+	const create = effectiveCreate;
+	if (!create) return undefined;
+	return (range) => {
+		const ok = validateRange("create", range.start, range.end);
+		if (ok) create(ok);
+	};
+});
+// ── Drag commit handler ──
+// Views call this on pointer-up to process drag results.
+async function commitDrag() {
+	if (readOnly) {
+		drag.cancel();
+		return;
+	}
+	const mode = drag.mode;
+	const payload = drag.commit();
+	if (!payload || mode === "none") return;
+	const checked = validateRange(mode, payload.start, payload.end);
+	if (!checked) return;
+	const { start, end } = checked;
 	if ((mode === "move" || mode === "resize-start" || mode === "resize-end") && payload.eventId) {
 		try {
 			await store.move(payload.eventId, start, end);
 			const ev = store.byId(payload.eventId);
 			if (ev) effectiveMove?.(ev, start, end);
 		} catch (e) {
-			const msg = e instanceof Error ? e.message : "";
 			// Read-only adapter: the store can't persist, but the HOST still
 			// gets the callback — it owns persistence (e.g. scheduler RPC) and
 			// refetches. Missing event stays silent; real failures surface.
-			if (msg.includes("read-only")) {
+			if (isReadOnlyError(e)) {
 				const ev = store.byId(payload.eventId);
 				if (ev) effectiveMove?.(ev, start, end);
-			} else if (!msg.includes("not found")) {
-				if (onerror) onerror(e instanceof Error ? e : new Error(String(e)));
-				else console.warn("[calendar] drag commit failed:", e);
+			} else if (!isNotFoundError(e) && !onerror) {
+				// With onerror, the store.error effect below reports it — once.
+				console.warn("[calendar] drag commit failed:", e);
 			}
 		}
 	} else if (mode === "create") {
@@ -282,7 +304,7 @@ setContext("calendar", {
 		return handleEventClick;
 	},
 	get oneventcreate() {
-		return effectiveCreate;
+		return checkedCreate;
 	},
 	get oneventmove() {
 		return effectiveMove;
@@ -291,7 +313,7 @@ setContext("calendar", {
 		return oneventhover;
 	},
 	get ondayclick() {
-		return ondayclick ?? defaultDayClick;
+		return ondayclick ? (d) => ondayclick(unzone(d)) : defaultDayClick;
 	},
 	get timezone() {
 		return timezone;
@@ -370,19 +392,27 @@ $effect(() => {
 		end: range.end
 	});
 });
-// Eager initial load — $effect runs after paint, but for sync adapters
-// (memory, recurring) this resolves in the same microtask.
-untrack(() => store.load({
-	start: viewState.range.start,
-	end: viewState.range.end
-}));
+// Eager initial load for adapters that answer synchronously (memory,
+// recurring, seeded): the server render and the first paint hold the
+// events. An async adapter waits for the effect — by then the view has
+// declared its wider load range, so it is fetched once, not twice.
+untrack(() => {
+	if (effectiveAdapter.fetchEventsSync) store.load({
+		start: viewState.range.start,
+		end: viewState.range.end
+	});
+});
 // Keep active view in sync when external view prop changes after mount.
 $effect(() => {
 	if (activeViewId) viewState.setView(activeViewId);
 });
 // Sync controlled currentDate prop → viewState
 $effect(() => {
-	if (currentDate) viewState.setFocusDate(currentDate);
+	const d = zoneIn(currentDate);
+	// Compared by time: the host often hands back what ondatechange gave it.
+	if (d && untrack(() => viewState.focusDate.getTime()) !== d.getTime()) {
+		untrack(() => viewState.setFocusDate(d));
+	}
 });
 // Sync days prop → viewState.dayCount
 $effect(() => {
@@ -390,8 +420,10 @@ $effect(() => {
 });
 // Notify host when focusDate changes
 $effect(() => {
-	const d = viewState.focusDate;
-	ondatechange?.(d);
+	// An instant, like currentDate takes — so a host that feeds it back
+	// (currentDate={d} ondatechange={(x) => d = x}) gets the same day back.
+	const d = unzone(viewState.focusDate);
+	untrack(() => ondatechange?.(d));
 });
 // Keep view state's week-start rule in sync with incoming prop changes.
 $effect(() => {
@@ -417,7 +449,7 @@ const resolvedView = $derived.by(() => {
 	// Already a mobile view? Keep it.
 	if (requested.id.endsWith("-mobile")) return requested;
 	// Agenda views: keep as-is (they adapt internally via mobile context).
-	if (requested.label === "Agenda") return requested;
+	if (requested.component === Agenda || requested.id.endsWith("-agenda")) return requested;
 	// Planner / other views: remap to mobile variant with the same mode.
 	const mobileVariant = views.find((v) => v.id === `${requested.mode}-mobile`);
 	return mobileVariant ?? requested;
@@ -432,7 +464,7 @@ const dateLabel = $derived.by(() => {
 		return "";
 	}
 	if (viewState.mode === "day") {
-		return viewState.focusDate.toLocaleDateString(locale, {
+		return viewState.focusDate.toLocaleDateString(locale ?? getDefaultLocale(), {
 			weekday: "long",
 			month: "short",
 			day: "numeric"
@@ -442,7 +474,7 @@ const dateLabel = $derived.by(() => {
 		// The actual visible span — respects custom day counts (3/5-day views).
 		return fmtWeekRange(viewState.range.start.getTime(), locale, viewState.range.end.getTime() - 1);
 	}
-	return viewState.focusDate.toLocaleDateString(locale, {
+	return viewState.focusDate.toLocaleDateString(locale ?? getDefaultLocale(), {
 		month: "long",
 		year: "numeric"
 	});
@@ -482,6 +514,13 @@ const labelsForMode = $derived.by(() => {
 	}
 	return seen;
 });
+/** Built-in view-type names are shown in the calendar's language. */
+function viewLabel(label) {
+	if (label === "Planner") return L.planner;
+	if (label === "Agenda") return L.agenda;
+	if (label === "Scroll") return L.scroll;
+	return label;
+}
 function switchLabel(label) {
 	const target = desktopViews.find((v) => v.mode === viewState.mode && v.label === label);
 	if (target) viewState.setView(target.id);
@@ -498,8 +537,11 @@ const defaultDayClick = $derived.by(() => {
 	};
 });
 /** True when the current view range already includes today. */
+// Ticks on the zoned plane, so "today" is today in `timezone` and the
+// Today button re-enables when the day rolls over.
+const clock = createClock(untrack(() => timezone));
 const viewIncludesToday = $derived.by(() => {
-	const now = new Date();
+	const now = new Date(clock.tick);
 	if (viewState.mode === "month") {
 		// The month grid's range is week-aligned and includes adjacent-month
 		// spill days — compare against the focused month instead.
@@ -528,15 +570,17 @@ function handleShortcuts(e) {
 	if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.altKey) return;
 	const t = e.target;
 	if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+	// Arrows inside a radio group move between its options, not the period.
+	const inRadio = t?.getAttribute("role") === "radio";
+	// Arrows follow the reading direction: in RTL, ← is "later".
+	const rtl = !!calEl && getComputedStyle(calEl).direction === "rtl";
 	if (e.key === "t" || e.key === "T") {
 		e.preventDefault();
 		viewState.goToday();
-	} else if (e.key === "ArrowLeft") {
-		e.preventDefault();
-		viewState.prev();
-	} else if (e.key === "ArrowRight") {
+	} else if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && !inRadio) {
 		e.preventDefault();
-		viewState.next();
+		if (e.key === "ArrowRight" !== rtl) viewState.next();
+		else viewState.prev();
 	}
 }
 /** Header context for custom header snippet */
@@ -674,7 +718,7 @@ const navCtx = $derived({
 								aria-checked={activeView?.label === label}
 								onclick={() => switchLabel(label)}
 							>
-								{label}
+								{viewLabel(label)}
 							</button>
 						{/each}
 					</div>
@@ -711,7 +755,7 @@ const navCtx = $derived({
 				{locale}
 				focusDate={viewState.focusDate}
 				oneventclick={handleEventClick}
-				oneventcreate={effectiveCreate}
+				oneventcreate={checkedCreate}
 				onexternaldrop={effectiveExternalDrop}
 				readOnly={readOnly}
 				visibleHours={visibleHours}
@@ -719,7 +763,7 @@ const navCtx = $derived({
 				{...activeView.props ?? {}}
 			/>
 		{:else}
-			<div class="cal-empty">No views registered.</div>
+			<div class="cal-empty">{L.noViews}</div>
 		{/if}
 	</div>