@nomideusz/svelte-calendar 0.21.0 → 1.0.1

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>
 

package/dist/calendar/Calendar.svelte.d.ts

@@ -1,25 +1,57 @@
-import { type Component, type Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import type { CalendarAdapter } from '../adapters/types.js';
 import type { CalendarViewId } from '../engine/view-state.svelte.js';
 import type { TimelineEvent, BlockedSlot } from '../core/types.js';
-import { type CalendarLabels } from '../core/locale.js';
+import type { CalendarLabels } from '../core/locale.js';
 import type { AutoThemeOptions } from '../theme/auto.js';
+import type { HeaderContext, NavigationContext } from '../headless/types.js';
+/**
+ * What the Calendar passes to the active view's component. Engines (store,
+ * view state, drag, labels…) are read from context — `useCalendarContext()`.
+ */
+export interface CalendarViewProps {
+    events: TimelineEvent[];
+    /** The active `--dt-*` theme string */
+    style: string;
+    height: number | null;
+    mode: 'day' | 'week' | 'month';
+    mondayStart: boolean;
+    locale: string | undefined;
+    focusDate: Date;
+    oneventclick: (event: TimelineEvent, anchor?: DOMRect) => void;
+    /** Already gated by `readOnly` and validated; undefined when creating is off */
+    oneventcreate: ((range: {
+        start: Date;
+        end: Date;
+    }) => void) | undefined;
+    onexternaldrop: ((info: {
+        start: Date;
+        dataTransfer: DataTransfer;
+    }) => void) | undefined;
+    readOnly: boolean;
+    visibleHours: [number, number] | undefined;
+    selectedEventId: string | null;
+}
 /** One view registration */
 export interface CalendarView {
     id: CalendarViewId;
+    /** The view-type name shown in the header pills when a mode has several views */
     label: string;
     /** day, week or month */
     mode: 'day' | 'week' | 'month';
-    /** The Svelte component to render */
-    component: Component<Record<string, unknown>>;
-    /** Extra props to pass through (e.g. hourHeight, specialized settings) */
+    /**
+     * The Svelte component to render. It receives `CalendarViewProps` plus
+     * `props`; declare only the ones it uses.
+     */
+    component: Component<any>;
+    /** Extra props passed through to the component */
     props?: Record<string, unknown>;
 }
-interface Props {
+export interface CalendarProps {
     /** Data adapter (required) */
     adapter: CalendarAdapter;
-    /** Registered views */
-    views?: CalendarView[];
+    /** Registered views (default: `defaultViews`) */
+    views?: readonly CalendarView[];
     /** Active view ID (defaults to first registered view) */
     view?: CalendarViewId;
     /** CSS theme string (--dt-* inline style) */
@@ -74,7 +106,10 @@ interface Props {
     showDates?: boolean;
     /** ISO weekdays to hide (1=Mon … 7=Sun). E.g. [6, 7] hides weekends. */
     hideDays?: number[];
-    /** Controlled current date — drives which date the calendar focuses on. */
+    /**
+     * Controlled current date — drives which date the calendar focuses on.
+     * An instant, like `initialDate`: with `timezone` it is read in that zone.
+     */
     currentDate?: Date;
     /** Blocked/unavailable time slots — rendered as hatched regions, prevent event creation. */
     blockedSlots?: BlockedSlot[];
@@ -117,12 +152,12 @@ interface Props {
      * Replace the entire header chrome (date label + mode pills + nav arrows).
      * Receives context: { dateLabel, mode, modes, switchMode, prev, next, goToday, isViewOnToday, focusDate }.
      */
-    header?: Snippet<[import('../headless/types.js').HeaderContext]>;
+    header?: Snippet<[HeaderContext]>;
     /**
      * Replace just the navigation controls (arrows + today button).
      * Receives context: { prev, next, goToday, isViewOnToday, focusDate, mode }.
      */
-    navigation?: Snippet<[import('../headless/types.js').NavigationContext]>;
+    navigation?: Snippet<[NavigationContext]>;
     /** `anchor` is the clicked block's viewport rect where a view has one (planner) — for positioning a FloatingPanel. */
     oneventclick?: (event: TimelineEvent, anchor?: DOMRect) => void;
     oneventcreate?: (range: {
@@ -136,13 +171,25 @@ interface Props {
         start: Date;
         dataTransfer: DataTransfer;
     }) => void;
+    /**
+     * An event was dragged or resized. `newStart`/`newEnd` are real instants.
+     * Fires after the adapter stored the move, or — when the adapter refuses
+     * with a `read-only` error — so the host can store it itself.
+     */
     oneventmove?: (event: TimelineEvent, newStart: Date, newEnd: Date) => void;
+    /** Called with the active view id — once on mount, then on every change. */
     onviewchange?: (viewId: CalendarViewId) => void;
-    /** Called when the focused date changes (navigation, drag-scroll, etc.) */
+    /**
+     * Called with the focused date — once on mount, then whenever it changes
+     * (navigation, scrolling, a tapped day). An instant on the focused day,
+     * like `currentDate` takes, so feeding it back is stable. With `timezone`
+     * read its date in that zone — `formatInTimeZone(d, timezone, …)` or
+     * `toZonedTime(d, timezone)`.
+     */
     ondatechange?: (date: Date) => void;
     /** Called when the pointer enters an event (hover). */
     oneventhover?: (event: TimelineEvent) => void;
-    /** Called when a day cell is clicked (month grid; more views over time). */
+    /** Called when a day cell is clicked (month grid, agenda day heads). An instant, like `ondatechange`. Default: open that day in a day view. */
     ondayclick?: (date: Date) => void;
     /** Surfaced instead of silent console output when loading or mutations fail. */
     onerror?: (error: Error) => void;
@@ -154,6 +201,14 @@ interface Props {
      */
     timezone?: string;
 }
-declare const Calendar: Component<Props, {}, "">;
+/**
+ * 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 declare const defaultViews: readonly CalendarView[];
+declare const Calendar: Component<CalendarProps, {}, "">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/calendar/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Calendar } from './Calendar.svelte';
-export type { CalendarView } from './Calendar.svelte';
+export { default as Calendar, defaultViews } from './Calendar.svelte';
+export type { CalendarView, CalendarViewProps, CalendarProps } from './Calendar.svelte';

package/dist/calendar/index.js

@@ -1,2 +1,2 @@
 // ─── Calendar shell barrel export ───────────────────────
-export { default as Calendar } from './Calendar.svelte';
+export { default as Calendar, defaultViews } from './Calendar.svelte';

package/dist/core/clock.svelte.js

@@ -24,8 +24,9 @@ export function createClock(timezone) {
     // With a timezone, ticks are "zoned wall-clock" epoch ms — the same plane
     // the wrapped adapter shifts event Dates into. Views stay zone-agnostic.
     const now = () => (timezone ? toZonedTime(Date.now(), timezone).getTime() : Date.now());
-    let tick = $state(now());
-    let today = $state(sod(tick));
+    const t0 = now();
+    let tick = $state(t0);
+    let today = $state(sod(t0));
     let intervalId = null;
     function start() {
         intervalId = setInterval(() => {

package/dist/core/locale.d.ts

@@ -20,6 +20,8 @@ export interface CalendarLabels {
     month: string;
     planner: string;
     agenda: string;
+    /** The scrolling-weeks view (`week-scroll`) in the view-type pills */
+    scroll: string;
     now: string;
     free: string;
     allDay: string;
@@ -48,6 +50,10 @@ export interface CalendarLabels {
     full: string;
     /** Event status: limited availability */
     limited: string;
+    /** A blocked slot without a label of its own */
+    unavailable: string;
+    /** Shown when a Calendar has no views to render */
+    noViews: string;
     dayNavigation: string;
     weekNavigation: string;
     dayPlanner: string;
@@ -114,7 +120,11 @@ export declare function fmtDay(ms: number, todayMs: number, opts?: {
     short?: boolean;
 }, locale?: string): string;
 /**
- * Format a week range label: "Feb 17 – 23, 2026" or "Jan 27 – Feb 2, 2026"
+ * Format a date range label in the locale's own order:
+ * "Sep 21 – 27, 2026" (en-US), "21–27 wrz 2026" (pl-PL),
+ * "Dec 28, 2026 – Jan 3, 2027" across a year.
+ *
+ * `weekEndMs` is the last day shown (inclusive); default: six days on.
  */
 export declare function fmtWeekRange(weekStartMs: number, locale?: string, weekEndMs?: number): string;
 /**

package/dist/core/locale.js

@@ -18,6 +18,7 @@ export const defaultLabels = {
     month: 'Month',
     planner: 'Planner',
     agenda: 'Agenda',
+    scroll: 'Scroll',
     now: 'now',
     free: 'free',
     allDay: 'All day',
@@ -42,6 +43,8 @@ export const defaultLabels = {
     tentative: 'tentative',
     full: 'full',
     limited: 'limited',
+    unavailable: 'Unavailable',
+    noViews: 'No views registered.',
     dayNavigation: 'Day navigation',
     weekNavigation: 'Week navigation',
     dayPlanner: 'Day planner',
@@ -165,23 +168,20 @@ export function fmtDay(ms, todayMs, opts, locale) {
     return new Date(ms).toLocaleDateString(loc, { weekday: 'short', month: 'short', day: 'numeric' });
 }
 /**
- * Format a week range label: "Feb 17 – 23, 2026" or "Jan 27 – Feb 2, 2026"
+ * Format a date range label in the locale's own order:
+ * "Sep 21 – 27, 2026" (en-US), "21–27 wrz 2026" (pl-PL),
+ * "Dec 28, 2026 – Jan 3, 2027" across a year.
+ *
+ * `weekEndMs` is the last day shown (inclusive); default: six days on.
  */
 export function fmtWeekRange(weekStartMs, locale, weekEndMs) {
     const loc = locale ?? defaultLocale;
     const s = new Date(weekStartMs);
     const e = new Date(weekEndMs ?? addDaysMs(weekStartMs, 6));
-    const sm = s.toLocaleDateString(loc, { month: 'short' });
-    const em = e.toLocaleDateString(loc, { month: 'short' });
-    const sy = s.getFullYear();
-    const ey = e.getFullYear();
-    if (sy !== ey) {
-        return `${sm} ${s.getDate()}, ${sy} – ${em} ${e.getDate()}, ${ey}`;
-    }
-    if (sm !== em) {
-        return `${sm} ${s.getDate()} – ${em} ${e.getDate()}, ${ey}`;
-    }
-    return `${sm} ${s.getDate()} – ${e.getDate()}, ${ey}`;
+    const fmt = new Intl.DateTimeFormat(loc, { month: 'short', day: 'numeric', year: 'numeric' });
+    // Thin/narrow spaces around the dash vary by engine; plain spaces keep
+    // the label stable across browsers and in tests.
+    return fmt.formatRange(s, e).replace(/[\u2009\u202f]/g, ' ');
 }
 // ─── Shared time / duration formatting ──────────────────
 /**