@nomideusz/svelte-calendar 0.20.1 → 1.0.0

package/dist/engine/view-state.svelte.js

@@ -11,7 +11,8 @@
  *   vs.prev()      — go back one period
  *   vs.goToday()   — jump to today
  */
-import { startOfWeek as calcStartOfWeek, addDaysMs, DAY_MS } from '../core/time.js';
+import { startOfWeek as calcStartOfWeek, addDaysMs } from '../core/time.js';
+import { nowInZone } from '../core/timezone.js';
 function inferMode(view) {
     if (view.startsWith('day'))
         return 'day';
@@ -23,7 +24,7 @@ function computeRange(focus, mode, mondayStart, dayCount = 7) {
     if (mode === 'day') {
         const start = new Date(focus);
         start.setHours(0, 0, 0, 0);
-        const end = new Date(start.getTime() + DAY_MS);
+        const end = new Date(addDaysMs(start.getTime(), 1));
         return { start, end };
     }
     if (mode === 'month') {
@@ -48,15 +49,16 @@ function computeRange(focus, mode, mondayStart, dayCount = 7) {
     start.setHours(0, 0, 0, 0);
     return {
         start,
-        end: new Date(start.getTime() + dayCount * DAY_MS),
+        end: new Date(addDaysMs(start.getTime(), dayCount)),
     };
 }
 export function createViewState(options = {}) {
+    const timezone = options.timezone;
+    const today = () => (timezone ? nowInZone(timezone) : new Date());
     let view = $state(options.view ?? 'week-planner');
-    let focusDate = $state(options.initialDate ?? new Date());
+    let focusDate = $state(options.initialDate ?? today());
     let mondayStart = $state(options.mondayStart ?? true);
     let dayCount = $state(options.dayCount ?? 7);
-    const timezone = options.timezone;
     const modeResolver = options.modeForView;
     const mode = $derived(modeResolver?.(view) ?? inferMode(view));
     const range = $derived(computeRange(focusDate, mode, mondayStart, dayCount));
@@ -112,7 +114,7 @@ export function createViewState(options = {}) {
             focusDate = new Date(addDaysMs(focusDate.getTime(), days));
         },
         goToday() {
-            focusDate = new Date();
+            focusDate = today();
         },
     };
 }

package/dist/headless/create-agenda.svelte.d.ts

@@ -9,6 +9,13 @@ export interface AgendaOptions {
     locale?: string;
     /** Number of days to load ahead of focus date for the upcoming list (default: 7) */
     lookahead?: number;
+    /**
+     * Show the agenda in an IANA timezone (e.g. 'Europe/Warsaw'), as the
+     * Calendar's `timezone` prop does: the day, "now" and every event Date are
+     * wall-clock values in that zone. `initialDate` and `setDate()` take real
+     * instants. Default: the viewer's zone.
+     */
+    timezone?: string;
 }
 export interface HeadlessAgenda {
     /** The focused date */
@@ -29,7 +36,7 @@ export interface HeadlessAgenda {
     readonly dayEvents: TimelineEvent[];
     /** All-day or multi-day events */
     readonly allDay: TimelineEvent[];
-    /** Timed events that have ended (today only; empty for other days) */
+    /** Timed events that have ended — measured against now, so every event of a past day and none of a future one */
     readonly past: TimelineEvent[];
     /** Timed events currently in progress */
     readonly current: TimelineEvent[];

package/dist/headless/create-agenda.svelte.js

@@ -33,33 +33,51 @@
 import { untrack } from 'svelte';
 import { createEventStore } from '../engine/event-store.svelte.js';
 import { createClock } from '../core/clock.svelte.js';
-import { sod, DAY_MS, isAllDay, isMultiDay } from '../core/time.js';
+import { sod, addDaysMs, isAllDay, isMultiDay, overlapsRange } from '../core/time.js';
+import { toZonedTime, wrapAdapterWithTimezone } from '../core/timezone.js';
 import { fmtTime as _fmtTime, fmtDuration } from '../core/locale.js';
 import { timeUntilMs, progress as _progress, groupIntoSlots } from '../views/shared/format.js';
 // ─── Implementation ─────────────────────────────────────
 export function createAgenda(options) {
-    const { initialDate, locale, lookahead = 7, } = options;
-    const resolveAdapter = typeof options.adapter === 'function'
+    const { initialDate, locale, lookahead = 7, timezone, } = options;
+    const rawAdapter = typeof options.adapter === 'function'
         ? options.adapter
         : () => options.adapter;
-    const store = $derived(createEventStore(resolveAdapter()));
-    const clock = createClock();
+    const resolveAdapter = timezone
+        ? () => wrapAdapterWithTimezone(rawAdapter(), timezone)
+        : rawAdapter;
+    /** An instant on the plane the day is drawn on (zoned wall-clock with `timezone`). */
+    const plane = (ms) => (timezone ? toZonedTime(ms, timezone).getTime() : ms);
+    // One store for the agenda's life: a getter adapter that changes identity
+    // reloads it instead of rebuilding it empty (every row blinking out).
+    const store = createEventStore(resolveAdapter);
+    const clock = createClock(timezone);
     // ── Focus date (reactive, writable) ──
-    let focusDayMs = $state(sod(initialDate?.getTime() ?? Date.now()));
+    let focusDayMs = $state(sod(initialDate ? plane(initialDate.getTime()) : clock.tick));
     // ── Load events for focus date range ──
-    $effect(() => {
-        const start = new Date(focusDayMs);
-        const end = new Date(focusDayMs + lookahead * DAY_MS);
-        store.load({ start, end });
+    // Eager initial load for synchronous adapters (the server render holds
+    // the rows); the effect's first run then has nothing new to fetch — a
+    // seeded adapter would otherwise refetch the seed at once.
+    let eagerKey = untrack(() => {
+        if (!resolveAdapter().fetchEventsSync)
+            return '';
+        store.load({ start: new Date(focusDayMs), end: new Date(addDaysMs(focusDayMs, lookahead)) });
+        return `${focusDayMs}`;
     });
-    // Eager initial load
-    untrack(() => {
+    $effect(() => {
+        rawAdapter(); // a new adapter reloads
         const start = new Date(focusDayMs);
-        const end = new Date(focusDayMs + lookahead * DAY_MS);
+        const end = new Date(addDaysMs(focusDayMs, lookahead));
+        const key = `${focusDayMs}`;
+        if (key === eagerKey) {
+            eagerKey = '';
+            return;
+        }
+        eagerKey = '';
         store.load({ start, end });
     });
     // ── Day derivations ──
-    const dayEnd = $derived(focusDayMs + DAY_MS);
+    const dayEnd = $derived(addDaysMs(focusDayMs, 1));
     const isToday = $derived(focusDayMs === clock.today);
     const isPast = $derived(focusDayMs < clock.today);
     const isFuture = $derived(focusDayMs > clock.today);
@@ -70,7 +88,7 @@ export function createAgenda(options) {
     }));
     const dayEvents = $derived.by(() => {
         return store.events
-            .filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > focusDayMs)
+            .filter((ev) => overlapsRange(ev, new Date(focusDayMs), new Date(dayEnd)))
             .sort((a, b) => a.start.getTime() - b.start.getTime());
     });
     const allDay = $derived(dayEvents.filter((ev) => isAllDay(ev) || isMultiDay(ev)));
@@ -93,10 +111,10 @@ export function createAgenda(options) {
         return { past, current, upcoming, upcomingSlots: groupIntoSlots(upcoming) };
     });
     // ── Navigation ──
-    function prev() { focusDayMs = focusDayMs - DAY_MS; }
-    function next() { focusDayMs = focusDayMs + DAY_MS; }
+    function prev() { focusDayMs = addDaysMs(focusDayMs, -1); }
+    function next() { focusDayMs = addDaysMs(focusDayMs, 1); }
     function goToday() { focusDayMs = clock.today; }
-    function setDate(date) { focusDayMs = sod(date.getTime()); }
+    function setDate(date) { focusDayMs = sod(plane(date.getTime())); }
     // ── Format helpers ──
     const fmtTime = (d) => _fmtTime(d, locale);
     const fmtDur = (ev) => fmtDuration(ev.start, ev.end);

package/dist/headless/create-calendar.svelte.js

@@ -43,23 +43,25 @@ import { untrack } from 'svelte';
 import { createEventStore } from '../engine/event-store.svelte.js';
 import { createViewState } from '../engine/view-state.svelte.js';
 import { toZonedTime, fromZonedTime, wrapAdapterWithTimezone } from '../core/timezone.js';
+import { isReadOnlyError, isNotFoundError } from '../adapters/errors.js';
 import { createSelection } from '../engine/selection.svelte.js';
 import { createDragState } from '../engine/drag.svelte.js';
 import { createClock } from '../core/clock.svelte.js';
-import { sod, DAY_MS, HOUR_MS, startOfWeek as sowFn, isAllDay, isMultiDay, segmentForDay, } from '../core/time.js';
-import { monthLong, weekdayLong, weekdayShort } from '../core/locale.js';
+import { sod, addDaysMs, HOUR_MS, startOfWeek as sowFn, isAllDay, isMultiDay, segmentForDay, } from '../core/time.js';
+import { monthLong, weekdayLong, weekdayShort, fmtWeekRange, getDefaultLocale } from '../core/locale.js';
 export function createCalendar(options) {
     const { adapter, mondayStart: initialMondayStart = true, initialDate: rawInitialDate, locale, visibleHours, snapInterval = 15, equalDays = false, hideDays, blockedSlots, disabledDates, days: initialDayCount = 7, readOnly = false, minDuration, maxDuration, oneventclick, oneventcreate, oneventmove, } = options;
     // ── Create engine ────────────────────────────────────
     const timezone = options.timezone;
     const initialDate = rawInitialDate && timezone ? toZonedTime(rawInitialDate, timezone) : rawInitialDate;
-    const store = createEventStore(timezone ? wrapAdapterWithTimezone(adapter, timezone) : adapter);
+    const effectiveAdapter = timezone ? wrapAdapterWithTimezone(adapter, timezone) : adapter;
+    const store = createEventStore(effectiveAdapter);
     const viewState = createViewState({
         view: options.view ?? 'week-planner',
         mondayStart: initialMondayStart,
         initialDate,
         dayCount: initialDayCount,
-        modeForView: (id) => id.startsWith('day-') ? 'day' : 'week',
+        timezone,
     });
     const selection = createSelection();
     const drag = createDragState();
@@ -71,12 +73,25 @@ export function createCalendar(options) {
     const endHour = visibleHours?.[1] ?? 24;
     const hours = Array.from({ length: endHour - startHour }, (_, i) => startHour + i);
     // ── Load events reactively ───────────────────────────
+    // Eager initial load for synchronous adapters (the server render holds the
+    // events); the effect's first run then has nothing new to fetch.
+    let eagerKey = untrack(() => {
+        if (!effectiveAdapter.fetchEventsSync)
+            return '';
+        const { start, end } = viewState.range;
+        store.load({ start, end });
+        return `${start.getTime()}-${end.getTime()}`;
+    });
     $effect(() => {
         const { start, end } = viewState.range;
+        const key = `${start.getTime()}-${end.getTime()}`;
+        if (key === eagerKey) {
+            eagerKey = '';
+            return;
+        }
+        eagerKey = '';
         store.load({ start, end });
     });
-    // Eager initial load
-    untrack(() => store.load({ start: viewState.range.start, end: viewState.range.end }));
     // ── Compute day cells ────────────────────────────────
     const days = $derived.by(() => {
         const { start, end } = viewState.range;
@@ -85,14 +100,14 @@ export function createCalendar(options) {
         const events = store.events;
         const todayMs = clock.today;
         const result = [];
-        for (let ms = startMs; ms < endMs; ms += DAY_MS) {
+        for (let ms = startMs; ms < endMs; ms = addDaysMs(ms, 1)) {
             const date = new Date(ms);
             const jsDay = date.getDay();
             const isoDay = jsDay === 0 ? 7 : jsDay;
             // Skip hidden days
             if (hideDays?.includes(isoDay))
                 continue;
-            const dayEnd = ms + DAY_MS;
+            const dayEnd = addDaysMs(ms, 1);
             const dayEventsAll = events
                 .filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > ms)
                 .sort((a, b) => a.start.getTime() - b.start.getTime());
@@ -134,7 +149,7 @@ export function createCalendar(options) {
             if (chunk.length === 0)
                 continue;
             const periodStart = chunk[0].ms;
-            const periodEnd = periodStart + dayCount * DAY_MS;
+            const periodEnd = addDaysMs(periodStart, dayCount);
             result.push({
                 periodStart,
                 isCurrent: todayMs >= periodStart && todayMs < periodEnd,
@@ -165,21 +180,36 @@ export function createCalendar(options) {
         }
         return { past, current, upcoming };
     });
+    // "Now" on the same (zoned) plane as the range. A month view's range spills
+    // into the neighbouring months, so it compares the focused month instead.
+    function includesToday() {
+        const now = clock.tick;
+        if (viewState.mode === 'month') {
+            const f = viewState.focusDate;
+            const n = new Date(now);
+            return f.getMonth() === n.getMonth() && f.getFullYear() === n.getFullYear();
+        }
+        const { start, end } = viewState.range;
+        return now >= start.getTime() && now < end.getTime();
+    }
     // ── Header context ───────────────────────────────────
     const headerContext = $derived.by(() => {
         const mode = viewState.mode;
         const focus = viewState.focusDate;
-        const now = Date.now();
-        const { start, end } = viewState.range;
-        const isViewOnToday = now >= start.getTime() && now < end.getTime();
+        const isViewOnToday = includesToday();
+        const loc = locale ?? getDefaultLocale();
         let dateLabel;
         if (mode === 'day') {
-            dateLabel = focus.toLocaleDateString(locale, {
+            dateLabel = focus.toLocaleDateString(loc, {
                 weekday: 'long', month: 'short', day: 'numeric',
             });
         }
+        else if (mode === 'week') {
+            const { start, end } = viewState.range;
+            dateLabel = fmtWeekRange(start.getTime(), loc, end.getTime() - 1);
+        }
         else {
-            dateLabel = focus.toLocaleDateString(locale, {
+            dateLabel = focus.toLocaleDateString(loc, {
                 month: 'long', year: 'numeric',
             });
         }
@@ -189,7 +219,16 @@ export function createCalendar(options) {
             modes: ['day', 'week', 'month'],
             switchMode: (m) => {
                 const currentView = viewState.view;
-                const currentLabel = currentView.replace(/^(day|week)-/, '');
+                const currentLabel = currentView.replace(/^(day|week|month)-/, '');
+                // Month has one layout of its own; leaving it lands on the planner.
+                if (m === 'month') {
+                    viewState.setView('month-grid');
+                    return;
+                }
+                if (currentView.startsWith('month-')) {
+                    viewState.setView(`${m}-planner`);
+                    return;
+                }
                 viewState.setView(`${m}-${currentLabel}`);
             },
             prev: () => viewState.prev(),
@@ -200,13 +239,11 @@ export function createCalendar(options) {
         };
     });
     const navigationContext = $derived.by(() => {
-        const { start, end } = viewState.range;
-        const now = Date.now();
         return {
             prev: () => viewState.prev(),
             next: () => viewState.next(),
             goToday: () => viewState.goToday(),
-            isViewOnToday: now >= start.getTime() && now < end.getTime(),
+            isViewOnToday: includesToday(),
             focusDate: viewState.focusDate,
             mode: viewState.mode,
         };
@@ -288,15 +325,14 @@ export function createCalendar(options) {
                     oneventmove?.(ev, unzoneDate(start), unzoneDate(end));
             }
             catch (e) {
-                const msg = e instanceof Error ? e.message : '';
                 // Read-only adapter: the host still gets the callback — it owns
                 // persistence and refetches.
-                if (msg.includes('read-only')) {
+                if (isReadOnlyError(e)) {
                     const ev = store.byId(payload.eventId);
                     if (ev)
                         oneventmove?.(ev, unzoneDate(start), unzoneDate(end));
                 }
-                else if (!msg.includes('not found')) {
+                else if (!isNotFoundError(e)) {
                     console.warn('[calendar] drag commit failed:', e);
                 }
                 return null;

package/dist/headless/create-range-agenda.svelte.d.ts

@@ -12,6 +12,13 @@ export interface RangeAgendaOptions {
     initialDate?: Date;
     /** BCP 47 locale tag (e.g. 'en-US', 'pl-PL') for the format helpers */
     locale?: string;
+    /**
+     * Show the agenda in an IANA timezone (e.g. 'Europe/Warsaw'), as the
+     * Calendar's `timezone` prop does: days, "today" and every event Date are
+     * wall-clock values in that zone (read them with `getHours()`, `getDate()`…).
+     * `initialDate` and `setDate()` take real instants. Default: the viewer's zone.
+     */
+    timezone?: string;
 }
 export interface RangeAgendaDay {
     /** Start-of-day timestamp (ms) */

package/dist/headless/create-range-agenda.svelte.js

@@ -32,33 +32,54 @@
  */
 import { untrack } from 'svelte';
 import { createEventStore } from '../engine/event-store.svelte.js';
-import { sod, DAY_MS } from '../core/time.js';
+import { sod, addDaysMs, overlapsRange } from '../core/time.js';
+import { toZonedTime, nowInZone, wrapAdapterWithTimezone } from '../core/timezone.js';
 import { fmtTime as _fmtTime, fmtDuration } from '../core/locale.js';
 // ─── Implementation ─────────────────────────────────────
 export function createRangeAgenda(options) {
-    const { initialDate, locale, days: dayCount = 7 } = options;
-    const resolveAdapter = typeof options.adapter === 'function'
+    const { initialDate, locale, days: dayCount = 7, timezone } = options;
+    const rawAdapter = typeof options.adapter === 'function'
         ? options.adapter
         : () => options.adapter;
-    const store = $derived(createEventStore(resolveAdapter()));
+    const resolveAdapter = timezone
+        ? () => wrapAdapterWithTimezone(rawAdapter(), timezone)
+        : rawAdapter;
+    /** An instant on the plane the days are drawn on (zoned wall-clock with `timezone`). */
+    const plane = (ms) => (timezone ? toZonedTime(ms, timezone).getTime() : ms);
+    const nowMs = () => (timezone ? nowInZone(timezone).getTime() : Date.now());
+    // One store for the agenda's life: a getter adapter that changes identity
+    // reloads it instead of rebuilding it empty (every row blinking out).
+    const store = createEventStore(resolveAdapter);
     // ── Window start (reactive, writable) ──
-    let startMs = $state(sod(initialDate?.getTime() ?? Date.now()));
-    const endMs = $derived(startMs + dayCount * DAY_MS);
+    let startMs = $state(sod(initialDate ? plane(initialDate.getTime()) : nowMs()));
+    const endMs = $derived(addDaysMs(startMs, dayCount));
     // ── Load events for the window (re-runs on paging / adapter swap) ──
-    $effect(() => {
+    // Eager initial load for synchronous adapters (the server render holds the
+    // rows); the effect's first run then has nothing new to fetch — a seeded
+    // adapter would otherwise send its seed range straight to the network.
+    let eagerKey = untrack(() => {
+        if (!resolveAdapter().fetchEventsSync)
+            return '';
         store.load({ start: new Date(startMs), end: new Date(endMs) });
+        return `${startMs}-${endMs}`;
     });
-    // Eager initial load
-    untrack(() => {
+    $effect(() => {
+        rawAdapter(); // a new adapter reloads
+        const key = `${startMs}-${endMs}`;
+        if (key === eagerKey) {
+            eagerKey = '';
+            return;
+        }
+        eagerKey = '';
         store.load({ start: new Date(startMs), end: new Date(endMs) });
     });
     // ── Day derivations ──
     const days = $derived.by(() => {
-        const todayMs = sod(Date.now());
+        const todayMs = sod(nowMs());
         const events = store.events;
         return Array.from({ length: dayCount }, (_, i) => {
-            const ms = startMs + i * DAY_MS;
-            const dayEnd = ms + DAY_MS;
+            const ms = addDaysMs(startMs, i);
+            const dayEnd = addDaysMs(ms, 1);
             const date = new Date(ms);
             // JS getDay(): 0=Sun … 6=Sat → ISO 1=Mon … 7=Sun
             const weekday = ((date.getDay() + 6) % 7) + 1;
@@ -69,7 +90,7 @@ export function createRangeAgenda(options) {
                 isToday: ms === todayMs,
                 isPast: dayEnd <= todayMs,
                 events: events
-                    .filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > ms)
+                    .filter((ev) => overlapsRange(ev, date, new Date(dayEnd)))
                     .sort((a, b) => a.start.getTime() - b.start.getTime()),
             };
         });
@@ -92,16 +113,16 @@ export function createRangeAgenda(options) {
             return store.error;
         },
         prev() {
-            startMs -= dayCount * DAY_MS;
+            startMs = addDaysMs(startMs, -dayCount);
         },
         next() {
-            startMs += dayCount * DAY_MS;
+            startMs = addDaysMs(startMs, dayCount);
         },
         goToday() {
-            startMs = sod(Date.now());
+            startMs = sod(nowMs());
         },
         setDate(date) {
-            startMs = sod(date.getTime());
+            startMs = sod(plane(date.getTime()));
         },
         refresh() {
             void store.load({ start: new Date(startMs), end: new Date(endMs) });

package/dist/headless/index.d.ts

@@ -4,3 +4,4 @@ export type { AgendaOptions, HeadlessAgenda } from './create-agenda.svelte.js';
 export { createRangeAgenda } from './create-range-agenda.svelte.js';
 export type { RangeAgendaOptions, RangeAgendaDay, HeadlessRangeAgenda, } from './create-range-agenda.svelte.js';
 export type { HeadlessCalendarOptions, HeadlessCalendar, HeadlessDay, HeadlessWeek, TodayQueue, HeaderContext, NavigationContext, } from './types.js';
+export type { TimeSlot } from '../views/shared/format.js';

package/dist/index.d.ts

@@ -1,19 +1,22 @@
 export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, FloatingPanel, } from './primitives/index.js';
-export { Calendar } from './calendar/index.js';
-export { Planner, Agenda, Mobile } from './views/index.js';
-export { default as MonthGrid } from './views/month/MonthGrid.svelte';
-export type { CalendarView } from './calendar/index.js';
+export type { FloatingPanelAnchor, FloatingPanelProps } from './primitives/index.js';
+export { Calendar, defaultViews } from './calendar/index.js';
+export type { CalendarView, CalendarViewProps, CalendarProps } from './calendar/index.js';
+export { Planner, PlannerScroll, Agenda, Mobile, MonthGrid } from './views/index.js';
+export { useCalendarContext } from './views/shared/context.svelte.js';
+export type { CalendarContext } from './views/shared/context.svelte.js';
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
 export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewMode, Selection as CalendarSelection, DragState, DragMode, DragPayload, } from './engine/index.js';
 export { createMemoryAdapter, createRestAdapter, createRecurringAdapter, createMappedAdapter, createCompositeAdapter, createJmapAdapter, withInitialEvents } from './adapters/index.js';
+export { CalendarReadOnlyError, EventNotFoundError, isReadOnlyError, isNotFoundError } from './adapters/index.js';
 export type { CalendarAdapter, WritableCalendarAdapter, DateRange, MemoryAdapterOptions, RestAdapterOptions, RecurringEvent, RecurringAdapterOptions, FieldMapping, MappedAdapterOptions, MutationHandler, CompositeAdapterOptions, JmapClient, JmapCalendarAdapterOptions, } from './adapters/index.js';
-export { createClock, startOfWeek, fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, defaultLabels, setLabels, resetLabels, getLabels, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, generatePalette, extractAccent, VIVID_PALETTE, isMultiDay, isAllDay, segmentForDay, } from './core/index.js';
+export { createClock, sod, startOfWeek, addDaysMs, diffDays, fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, defaultLabels, setLabels, resetLabels, getLabels, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, generatePalette, extractAccent, VIVID_PALETTE, isMultiDay, isAllDay, segmentForDay, } from './core/index.js';
 export type { Clock, TimelineEvent, BlockedSlot, DaySegment, CalendarLabels, EventStatus, } from './core/index.js';
 export { auto, neutral, midnight, presets } from './theme/index.js';
 export { probeHostTheme, observeHostTheme } from './theme/index.js';
 export { wrapAdapterWithTimezone } from './core/timezone.js';
 export type { PresetName, AutoThemeOptions } from './theme/index.js';
 export { createCalendar, createAgenda, createRangeAgenda } from './headless/index.js';
-export type { HeadlessCalendarOptions, HeadlessCalendar, HeadlessDay, HeadlessWeek, TodayQueue, HeaderContext, NavigationContext, AgendaOptions, HeadlessAgenda, RangeAgendaOptions, RangeAgendaDay, HeadlessRangeAgenda, } from './headless/index.js';
+export type { HeadlessCalendarOptions, HeadlessCalendar, HeadlessDay, HeadlessWeek, TodayQueue, HeaderContext, NavigationContext, AgendaOptions, HeadlessAgenda, RangeAgendaOptions, RangeAgendaDay, HeadlessRangeAgenda, TimeSlot, } from './headless/index.js';
 export { fits, lineCount, textHeight, textWidth, pickFit, fontOf, fitLabel, fitParts, breakLines, typeset } from './text-fit.js';
-export type { ChipPart } from './text-fit.js';
+export type { ChipPart, TextLayoutOptions } from './text-fit.js';

package/dist/index.js

@@ -1,16 +1,19 @@
 // ─── Primitives ─────────────────────────────────────────
 export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, FloatingPanel, } from './primitives/index.js';
 // ─── Calendar shell ─────────────────────────────────────
-export { Calendar } from './calendar/index.js';
-// Raw view components — compose your own shell around the engine if needed
-export { Planner, Agenda, Mobile } from './views/index.js';
-export { default as MonthGrid } from './views/month/MonthGrid.svelte';
+export { Calendar, defaultViews } from './calendar/index.js';
+// Raw view components — register them under your own ids, or compose your
+// own shell around the engine. They read the Calendar's context.
+export { Planner, PlannerScroll, Agenda, Mobile, MonthGrid } from './views/index.js';
+// For custom views: the running Calendar's engines, config and labels.
+export { useCalendarContext } from './views/shared/context.svelte.js';
 // ─── Engine (reactive state) ────────────────────────────
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
 // ─── Adapters ───────────────────────────────────────────
 export { createMemoryAdapter, createRestAdapter, createRecurringAdapter, createMappedAdapter, createCompositeAdapter, createJmapAdapter, withInitialEvents } from './adapters/index.js';
+export { CalendarReadOnlyError, EventNotFoundError, isReadOnlyError, isNotFoundError } from './adapters/index.js';
 // ─── Core: clock, time, locale, types ───────────────────
-export { createClock, startOfWeek, fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, defaultLabels, setLabels, resetLabels, getLabels, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, generatePalette, extractAccent, VIVID_PALETTE, isMultiDay, isAllDay, segmentForDay, } from './core/index.js';
+export { createClock, sod, startOfWeek, addDaysMs, diffDays, fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, defaultLabels, setLabels, resetLabels, getLabels, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, generatePalette, extractAccent, VIVID_PALETTE, isMultiDay, isAllDay, segmentForDay, } from './core/index.js';
 // ─── Themes ─────────────────────────────────────────────
 export { auto, neutral, midnight, presets } from './theme/index.js';
 export { probeHostTheme, observeHostTheme } from './theme/index.js';

package/dist/primitives/DayHeader.svelte

@@ -6,7 +6,8 @@
     - Short/long weekday + date number for week views
 -->
 <script lang="ts">import { weekdayShort, weekdayLong, monthShort, fmtDay } from "../core/locale.js";
-let { dayMs, todayMs = Date.now(), format = "short", isToday = false, isPast = false } = $props();
+import { sod } from "../core/time.js";
+let { dayMs, todayMs = sod(Date.now()), format = "short", isToday = false, isPast = false } = $props();
 const dayNum = $derived(new Date(dayMs).getDate());
 </script>
 
@@ -16,7 +17,7 @@ const dayNum = $derived(new Date(dayMs).getDate());
 	class:dh-past={isPast}
 >
 	{#if format === 'relative'}
-		<span class="dh-rel">{fmtDay(dayMs, todayMs)}</span>
+		<span class="dh-rel">{fmtDay(sod(dayMs), sod(todayMs))}</span>
 	{:else if format === 'long'}
 		<span class="dh-name dh-name-long">{weekdayLong(dayMs)}</span>
 		<span class="dh-date">{monthShort(dayMs)} {dayNum}</span>

package/dist/primitives/DayHeader.svelte.d.ts

@@ -1,7 +1,7 @@
 interface Props {
     /** Timestamp (ms) of the day to label */
     dayMs: number;
-    /** Timestamp (ms) of today (for relative labels) */
+    /** Any timestamp (ms) on today, for relative labels — default: now */
     todayMs?: number;
     /** Display format */
     format?: 'relative' | 'short' | 'long';

package/dist/primitives/EmptySlot.svelte

@@ -6,7 +6,10 @@
   between events.
 -->
 <script lang="ts">import { fmtTime, fmtDuration, getLabels } from "../core/locale.js";
-const L = $derived(getLabels());
+import { getContext } from "svelte";
+// Inside a Calendar: its per-instance labels; standalone: the global ones.
+const calendarCtx = getContext("calendar");
+const L = $derived(calendarCtx?.labels ?? getLabels());
 let { start, end, onclick, orientation = "vertical" } = $props();
 const dur = $derived(`${fmtDuration(start, end)} ${L.free}`);
 function handleKeydown(e) {
@@ -26,7 +29,7 @@ function handleKeydown(e) {
 	class:es-h={orientation === 'horizontal'}
 	role="button"
 	tabindex="0"
-	aria-label="{L.createEvent}, {fmtTime(start)} to {fmtTime(end)}, {dur}"
+	aria-label="{L.createEvent}, {fmtTime(start)} – {fmtTime(end)}, {dur}"
 	onclick={() => onclick?.({ start, end })}
 	onkeydown={handleKeydown}
 >