@nomideusz/svelte-calendar 0.15.2 → 0.16.0

package/README.md

@@ -759,6 +759,8 @@ Small helpers used by the built-in views, exported for custom rendering:
 | `isAllDay(ev)` / `isMultiDay(ev)` | Event classification |
 | `segmentForDay(ev, dayMs)` | The slice of a multi-day event that falls on one day |
 | `createClock()` | Reactive clock (`tick`, `today`) driving now-lines and relative labels |
+| `typeset(text)` / `breakLines(text, font, width)` | Knuth-Plass paragraph breaking over the text's own spaces and soft hyphens, measured with pretext. `<p {@attach typeset(text)}>` sets justified block-span lines, re-done on resize; if the browser disagrees with the measure the plain text goes back. Progressive — SSR text stays. |
+| `fitLabel([long, short])` / `pickFit` / `fits` / `textHeight` | Text fitting via [pretext](https://github.com/chenglou/pretext) — measure before render, no layout thrash. `<span class="eb-title" {@attach fitLabel([ev.title, ev.short])}>` keeps the longest label that fits. Browser-only. |
 
 ## Embeddable Widget
 

package/dist/adapters/index.d.ts

@@ -8,6 +8,7 @@ export type { RecurringEvent, RecurringAdapterOptions } from './recurring.js';
 export { createMappedAdapter } from './mapped.js';
 export type { FieldMapping, MappedAdapterOptions, MutationHandler } from './mapped.js';
 export { createCompositeAdapter } from './composite.js';
+export { withInitialEvents } from './seeded.js';
 export type { CompositeAdapterOptions } from './composite.js';
 export { createJmapAdapter } from './jmap.js';
 export type { JmapClient, JmapCalendarAdapterOptions } from './jmap.js';

package/dist/adapters/index.js

@@ -3,4 +3,5 @@ export { createRestAdapter } from './rest.js';
 export { createRecurringAdapter } from './recurring.js';
 export { createMappedAdapter } from './mapped.js';
 export { createCompositeAdapter } from './composite.js';
+export { withInitialEvents } from './seeded.js';
 export { createJmapAdapter } from './jmap.js';

package/dist/adapters/memory.js

@@ -26,9 +26,11 @@ export function createMemoryAdapter(initial = [], options) {
     function overlaps(ev, range) {
         return ev.start < range.end && ev.end > range.start;
     }
+    const fetchEventsSync = (range) => events.filter((ev) => overlaps(ev, range)).map(withColor);
     return {
+        fetchEventsSync,
         async fetchEvents(range) {
-            return events.filter((ev) => overlaps(ev, range)).map(withColor);
+            return fetchEventsSync(range);
         },
         async createEvent(data) {
             const ev = { ...data, id: uid() };

package/dist/adapters/recurring.js

@@ -252,38 +252,42 @@ export function createRecurringAdapter(schedule, options = {}) {
         const key = rec.category ?? rec.title;
         return colorAssignments.get(key);
     }
+    const fetchEventsSync = (range) => {
+        const events = [];
+        for (const rec of schedule) {
+            const colored = { ...rec, color: resolveColor(rec) };
+            const freq = rec.frequency ?? 'weekly';
+            // Parse bounds
+            const sd = rec.startDate ? parseDate(rec.startDate) : undefined;
+            const untilDate = rec.until ? parseDate(rec.until) : undefined;
+            const countUntil = sd
+                ? computeUntilFromCount(rec, sd, mondayStart)
+                : undefined;
+            // Effective until = tighter of the two bounds
+            let effectiveUntil = untilDate;
+            if (countUntil) {
+                effectiveUntil = effectiveUntil
+                    ? countUntil < effectiveUntil ? countUntil : effectiveUntil
+                    : countUntil;
+            }
+            switch (freq) {
+                case 'daily':
+                    projectDaily(colored, range, sd, effectiveUntil, events);
+                    break;
+                case 'weekly':
+                    projectWeekly(colored, range, sd, effectiveUntil, mondayStart, events);
+                    break;
+                case 'monthly':
+                    projectMonthly(colored, range, sd, effectiveUntil, events);
+                    break;
+            }
+        }
+        return events;
+    };
     return {
+        fetchEventsSync,
         async fetchEvents(range) {
-            const events = [];
-            for (const rec of schedule) {
-                const colored = { ...rec, color: resolveColor(rec) };
-                const freq = rec.frequency ?? 'weekly';
-                // Parse bounds
-                const sd = rec.startDate ? parseDate(rec.startDate) : undefined;
-                const untilDate = rec.until ? parseDate(rec.until) : undefined;
-                const countUntil = sd
-                    ? computeUntilFromCount(rec, sd, mondayStart)
-                    : undefined;
-                // Effective until = tighter of the two bounds
-                let effectiveUntil = untilDate;
-                if (countUntil) {
-                    effectiveUntil = effectiveUntil
-                        ? countUntil < effectiveUntil ? countUntil : effectiveUntil
-                        : countUntil;
-                }
-                switch (freq) {
-                    case 'daily':
-                        projectDaily(colored, range, sd, effectiveUntil, events);
-                        break;
-                    case 'weekly':
-                        projectWeekly(colored, range, sd, effectiveUntil, mondayStart, events);
-                        break;
-                    case 'monthly':
-                        projectMonthly(colored, range, sd, effectiveUntil, events);
-                        break;
-                }
-            }
-            return events;
+            return fetchEventsSync(range);
         },
         // Read-only adapter: CRUD methods intentionally omitted.
         // Use createMemoryAdapter or createRestAdapter for mutations.

package/dist/adapters/seeded.d.ts

@@ -0,0 +1,9 @@
+import type { CalendarAdapter } from './types.js';
+import type { TimelineEvent } from '../core/types.js';
+/**
+ * An adapter that answers its first load synchronously with events the
+ * server already had — so the server render carries the rows and the client
+ * hydrates the same ones — and every later load, including a refresh(), goes
+ * to the real adapter. The seed is meant for the range the page opens on.
+ */
+export declare function withInitialEvents(adapter: CalendarAdapter, events: TimelineEvent[]): CalendarAdapter;

package/dist/adapters/seeded.js

@@ -0,0 +1,17 @@
+/**
+ * An adapter that answers its first load synchronously with events the
+ * server already had — so the server render carries the rows and the client
+ * hydrates the same ones — and every later load, including a refresh(), goes
+ * to the real adapter. The seed is meant for the range the page opens on.
+ */
+export function withInitialEvents(adapter, events) {
+    let seed = events;
+    return {
+        ...adapter,
+        fetchEventsSync(range) {
+            const s = seed;
+            seed = undefined;
+            return s ?? adapter.fetchEventsSync?.(range);
+        },
+    };
+}

package/dist/adapters/types.d.ts

@@ -14,6 +14,11 @@ export interface DateRange {
 export interface CalendarAdapter {
     /** Fetch events that overlap the given date range */
     fetchEvents(range: DateRange): Promise<TimelineEvent[]>;
+    /** Same answer, synchronously — for adapters whose data is already in
+     *  memory. The store prefers it, so a server render carries the events
+     *  and the client hydrates the same rows instead of a loading state.
+     *  Return undefined to send this call down the async path. */
+    fetchEventsSync?(range: DateRange): TimelineEvent[] | undefined;
     /** Create a new event, return it with a server-assigned ID */
     createEvent?(event: Omit<TimelineEvent, 'id'>): Promise<TimelineEvent>;
     /** Update an event, return the full updated event */

package/dist/engine/event-store.svelte.js

@@ -16,6 +16,7 @@
  *   // store.load()       — fetch from adapter for a range
  */
 import { SvelteMap } from 'svelte/reactivity';
+import { untrack } from 'svelte';
 import { sod, DAY_MS } from '../core/time.js';
 /**
  * Create a reactive event store backed by a CalendarAdapter.
@@ -45,6 +46,18 @@ export function createEventStore(adapter) {
     function upsertEvent(ev) {
         eventMap.set(ev.id, ev);
     }
+    // Merge: upsert fetched, don't blow away events outside this range.
+    // Inside the range the adapter is authoritative — drop what it no
+    // longer returns, or deleted/moved events linger until remount.
+    function merge(fetched, range) {
+        const keep = new Set(fetched.map((ev) => ev.id));
+        for (const ev of [...eventMap.values()]) {
+            if (!keep.has(ev.id) && overlaps(ev, range.start, range.end))
+                removeEvent(ev.id);
+        }
+        for (const ev of fetched)
+            upsertEvent(ev);
+    }
     // ── Public API ──
     return {
         get events() {
@@ -58,23 +71,24 @@ export function createEventStore(adapter) {
         },
         async load(range) {
             const seq = ++loadSeq;
+            const adapter = getAdapter();
+            // In-memory adapters answer at once: no loading state, and a server
+            // render already holds the events.
+            const sync = adapter.fetchEventsSync?.(range);
+            if (sync) {
+                error = null;
+                // Callers load from an effect; reading the map here would make that
+                // effect depend on what it writes.
+                untrack(() => merge(sync, range));
+                return;
+            }
             loading = true;
             error = null;
             try {
-                const fetched = await getAdapter().fetchEvents(range);
+                const fetched = await adapter.fetchEvents(range);
                 if (seq !== loadSeq)
                     return; // superseded by a newer load
-                // Merge: upsert fetched, don't blow away events outside this range.
-                // Inside the range the adapter is authoritative — drop what it no
-                // longer returns, or deleted/moved events linger until remount.
-                const keep = new Set(fetched.map((ev) => ev.id));
-                for (const ev of [...eventMap.values()]) {
-                    if (!keep.has(ev.id) && overlaps(ev, range.start, range.end))
-                        removeEvent(ev.id);
-                }
-                for (const ev of fetched) {
-                    upsertEvent(ev);
-                }
+                merge(fetched, range);
             }
             catch (e) {
                 error = e instanceof Error ? e.message : String(e);

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

@@ -52,6 +52,8 @@ export interface HeadlessRangeAgenda {
     goToday(): void;
     /** Set the window start to a specific date */
     setDate(date: Date): void;
+    /** Load the current window again — after a seeded first render, or a write elsewhere */
+    refresh(): void;
     /** Format a Date to locale time string (e.g. "14:30") */
     fmtTime(date: Date): string;
     /** Format event duration (e.g. "1h 30m") */

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

@@ -103,6 +103,9 @@ export function createRangeAgenda(options) {
         setDate(date) {
             startMs = sod(date.getTime());
         },
+        refresh() {
+            void store.load({ start: new Date(startMs), end: new Date(endMs) });
+        },
         fmtTime: (d) => _fmtTime(d, locale),
         fmtDuration: (ev) => fmtDuration(ev.start, ev.end),
         fmtRange: (ev) => `${_fmtTime(ev.start, locale)} – ${_fmtTime(ev.end, locale)}`,

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { default as MonthGrid } from './views/month/MonthGrid.svelte';
 export type { CalendarView } from './calendar/index.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 } from './adapters/index.js';
+export { createMemoryAdapter, createRestAdapter, createRecurringAdapter, createMappedAdapter, createCompositeAdapter, createJmapAdapter, withInitialEvents } 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 type { Clock, TimelineEvent, BlockedSlot, DaySegment, CalendarLabels, EventStatus, } from './core/index.js';
@@ -15,3 +15,4 @@ 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 { fits, lineCount, textHeight, pickFit, fontOf, fitLabel, breakLines, typeset } from './text-fit.js';

package/dist/index.js

@@ -8,7 +8,7 @@ export { default as MonthGrid } from './views/month/MonthGrid.svelte';
 // ─── Engine (reactive state) ────────────────────────────
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
 // ─── Adapters ───────────────────────────────────────────
-export { createMemoryAdapter, createRestAdapter, createRecurringAdapter, createMappedAdapter, createCompositeAdapter, createJmapAdapter } from './adapters/index.js';
+export { createMemoryAdapter, createRestAdapter, createRecurringAdapter, createMappedAdapter, createCompositeAdapter, createJmapAdapter, withInitialEvents } 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';
 // ─── Themes ─────────────────────────────────────────────
@@ -17,3 +17,5 @@ export { probeHostTheme, observeHostTheme } from './theme/index.js';
 export { wrapAdapterWithTimezone } from './core/timezone.js';
 // ─── Headless API ───────────────────────────────────────
 export { createCalendar, createAgenda, createRangeAgenda } from './headless/index.js';
+// ─── Text fitting (pretext) ─────────────────────────────
+export { fits, lineCount, textHeight, pickFit, fontOf, fitLabel, breakLines, typeset } from './text-fit.js';

package/dist/text-fit.d.ts

@@ -0,0 +1,26 @@
+import { type PrepareOptions } from '@chenglou/pretext';
+import type { Attachment } from 'svelte/attachments';
+export declare function lineCount(text: string, font: string, width: number, options?: PrepareOptions): number;
+export declare function fits(text: string, font: string, width: number, lines?: number): boolean;
+/** Height the text will take at `width`, before it is in the DOM. */
+export declare function textHeight(text: string, font: string, width: number, lineHeight: number): number;
+/** Longest candidate (in given order) that fits in `lines`; the last one if none does. */
+export declare function pickFit(candidates: readonly string[], font: string, width: number, lines?: number): string;
+/** The element's computed font as a canvas font string. */
+export declare function fontOf(el: Element): string;
+/**
+ * `{@attach fitLabel([title, short, initials])}` — keeps the element's text at
+ * the longest candidate that fits its content box. The element needs a width
+ * that does not come from its own text (block, or a flex item with min-width: 0).
+ */
+export declare function fitLabel(candidates: readonly string[], lines?: number): Attachment<HTMLElement>;
+export declare function breakLines(text: string, font: string, width: number): string[];
+/**
+ * `<p {@attach typeset(text)}>` — sets the paragraph as justified Knuth-Plass
+ * lines, one block span per line, re-done on resize and after webfonts load.
+ * Progressive: the server-rendered text is what crawlers and no-JS get; if the
+ * browser's own measure disagrees with ours (a line overflows), the plain
+ * text goes back and the browser breaks it. Pass the text, not the DOM — the
+ * span rebuild replaces the framework's text node.
+ */
+export declare function typeset(text: string): Attachment<HTMLElement>;

package/dist/text-fit.js

@@ -0,0 +1,170 @@
+// Text measurement without layout thrash — a thin wrapper over @chenglou/pretext.
+// Browser-only (Canvas 2D + Intl.Segmenter): call from effects, attachments or
+// event handlers, never during SSR. `font` is a canvas font string, e.g.
+// "500 12px Inter" — name a real family; bare `system-ui` measures wrong on macOS.
+import { prepare, layout, prepareWithSegments, measureNaturalWidth } from '@chenglou/pretext';
+export function lineCount(text, font, width, options) {
+    return layout(prepare(text, font, options), width, 1).lineCount;
+}
+export function fits(text, font, width, lines = 1) {
+    return lineCount(text, font, width) <= lines;
+}
+/** Height the text will take at `width`, before it is in the DOM. */
+export function textHeight(text, font, width, lineHeight) {
+    return layout(prepare(text, font), width, lineHeight).height;
+}
+/** Longest candidate (in given order) that fits in `lines`; the last one if none does. */
+export function pickFit(candidates, font, width, lines = 1) {
+    return candidates.find((c) => fits(c, font, width, lines)) ?? candidates.at(-1) ?? '';
+}
+/** The element's computed font as a canvas font string. */
+export function fontOf(el) {
+    const s = getComputedStyle(el);
+    return `${s.fontStyle} ${s.fontWeight} ${s.fontSize} ${s.fontFamily}`;
+}
+/**
+ * `{@attach fitLabel([title, short, initials])}` — keeps the element's text at
+ * the longest candidate that fits its content box. The element needs a width
+ * that does not come from its own text (block, or a flex item with min-width: 0).
+ */
+export function fitLabel(candidates, lines = 1) {
+    return (el) => {
+        const font = fontOf(el);
+        let width = 0;
+        const apply = () => { el.textContent = pickFit(candidates, font, width, lines); };
+        const ro = new ResizeObserver(([entry]) => { width = entry.contentRect.width; apply(); });
+        ro.observe(el);
+        document.fonts?.ready.then(apply); // webfont swap changes widths without a resize
+        return () => ro.disconnect();
+    };
+}
+// ─── Paragraph breaking (Knuth-Plass, simplified) ────────────────────────
+// The browser breaks greedily: fill a line, break, repeat. This scores every
+// feasible set of breaks by how much each line would have to stretch and
+// keeps the cheapest — the lines come out even instead of one loose line
+// paying for the next. Break opportunities are the text's own: spaces and
+// soft hyphens (U+00AD, typeset server-side). No-break spaces stay glued.
+// Scoring is TeX's: badness = 100·(slack / stretch)³ where each interword
+// space may stretch by half its width, capped at 10000; a line costs
+// (10 + badness)² plus 50² for ending inside a word, plus 10000 when the line
+// above did too. ponytail: no fitness classes, no shrink; O(n·k).
+const SHY = '­';
+export function breakLines(text, font, width) {
+    const measure = (s) => measureNaturalWidth(prepareWithSegments(s, font));
+    const boxes = [];
+    const glue = []; // glue[i] sits between boxes[i] and boxes[i + 1]
+    const words = text.split(' ').filter(Boolean);
+    words.forEach((w, wi) => {
+        const frags = w.split(SHY);
+        frags.forEach((f, fi) => {
+            boxes.push(f);
+            if (fi < frags.length - 1)
+                glue.push('shy');
+        });
+        if (wi < words.length - 1)
+            glue.push('space');
+    });
+    const n = boxes.length;
+    if (n === 0)
+        return [];
+    const bw = boxes.map(measure);
+    const space = measure('a a') - measure('aa');
+    const hyphen = measure('-');
+    const badness = (slackPx, spaces) => {
+        const r = slackPx / (Math.max(spaces, 1) * space * 0.5);
+        return Math.min(10000, 100 * r * r * r);
+    };
+    // best[h][k]: cheapest way to set boxes[0..k) with a break after, h = 1 when
+    // that last line ended inside a word; prev[h][k]: [start of that line, its h].
+    const best = [new Array(n + 1).fill(Infinity), new Array(n + 1).fill(Infinity)];
+    const prev = [new Array(n + 1), new Array(n + 1)];
+    best[0][0] = 0;
+    for (let i = 0; i < n; i++) {
+        for (const ph of [0, 1]) {
+            if (best[ph][i] === Infinity)
+                continue;
+            let w = 0;
+            let spaces = 0;
+            for (let j = i; j < n; j++) {
+                w += bw[j];
+                const last = j === n - 1;
+                const h = !last && glue[j] === 'shy' ? 1 : 0;
+                const lineW = h ? w + hyphen : w;
+                if (lineW > width) {
+                    if (w > width)
+                        break;
+                    continue; // only the hyphen overflows — try the next box
+                }
+                const b = last ? 0 : badness(width - lineW, spaces);
+                const cost = last ? 0 : (10 + b) ** 2 + (h ? 50 ** 2 : 0) + (h && ph ? 10000 : 0);
+                if (best[ph][i] + cost < best[h][j + 1]) {
+                    best[h][j + 1] = best[ph][i] + cost;
+                    prev[h][j + 1] = [i, ph];
+                }
+                if (!last && glue[j] === 'space') {
+                    w += space;
+                    spaces++;
+                }
+            }
+        }
+    }
+    let h = best[0][n] <= best[1][n] ? 0 : 1;
+    if (best[h][n] === Infinity)
+        return [text]; // a box wider than the column: let the browser cope
+    const lines = [];
+    for (let k = n; k > 0;) {
+        const [i, ph] = prev[h][k];
+        let line = '';
+        for (let b = i; b < k; b++)
+            line += boxes[b] + (b < k - 1 && glue[b] === 'space' ? ' ' : '');
+        if (h)
+            line += '-';
+        lines.unshift(line);
+        k = i;
+        h = ph;
+    }
+    return lines;
+}
+/**
+ * `<p {@attach typeset(text)}>` — sets the paragraph as justified Knuth-Plass
+ * lines, one block span per line, re-done on resize and after webfonts load.
+ * Progressive: the server-rendered text is what crawlers and no-JS get; if the
+ * browser's own measure disagrees with ours (a line overflows), the plain
+ * text goes back and the browser breaks it. Pass the text, not the DOM — the
+ * span rebuild replaces the framework's text node.
+ */
+export function typeset(text) {
+    return (el) => {
+        if (getComputedStyle(el).whiteSpace !== 'normal')
+            return;
+        const font = fontOf(el);
+        let width = 0;
+        const apply = () => {
+            if (!width)
+                return;
+            const lines = breakLines(text, font, width);
+            el.replaceChildren(...lines.map((l, i) => {
+                const s = document.createElement('span');
+                s.style.display = 'block';
+                s.style.textAlign = 'justify';
+                s.style.textAlignLast = i === lines.length - 1 ? 'auto' : 'justify';
+                s.textContent = l;
+                return s;
+            }));
+            for (const s of el.children)
+                if (s.scrollWidth > s.clientWidth + 1) {
+                    el.textContent = text;
+                    return;
+                }
+        };
+        const ro = new ResizeObserver(([e]) => {
+            if (e.contentRect.width === width)
+                return;
+            width = e.contentRect.width;
+            apply();
+        });
+        ro.observe(el);
+        document.fonts?.ready.then(apply);
+        return () => ro.disconnect();
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomideusz/svelte-calendar",
-  "version": "0.15.2",
+  "version": "0.16.0",
   "description": "A themeable Svelte 5 calendar with Day and Week views — Planner and Agenda.",
   "type": "module",
   "sideEffects": [
@@ -61,6 +61,7 @@
     "vitest": "^4.1.10"
   },
   "dependencies": {
+    "@chenglou/pretext": "^0.0.9",
     "date-fns": "^4.4.0",
     "date-fns-tz": "^3.2.0"
   },

package/widget/widget.d.ts

@@ -0,0 +1 @@
+export {};

package/widget/widget.js

@@ -5684,6 +5684,11 @@ createHTML: (html) => {
 		function upsertEvent(ev) {
 			eventMap.set(ev.id, ev);
 		}
+		function merge(fetched, range) {
+			const keep = new Set(fetched.map((ev) => ev.id));
+			for (const ev of [...eventMap.values()]) if (!keep.has(ev.id) && overlaps(ev, range.start, range.end)) removeEvent(ev.id);
+			for (const ev of fetched) upsertEvent(ev);
+		}
 		return {
 			get events() {
 				return get(eventArray);
@@ -5696,14 +5701,19 @@ createHTML: (html) => {
 			},
 			async load(range) {
 				const seq = ++loadSeq;
+				const adapter = getAdapter();
+				const sync = adapter.fetchEventsSync?.(range);
+				if (sync) {
+					set(error, null);
+					untrack(() => merge(sync, range));
+					return;
+				}
 				set(loading, true);
 				set(error, null);
 				try {
-					const fetched = await getAdapter().fetchEvents(range);
+					const fetched = await adapter.fetchEvents(range);
 					if (seq !== loadSeq) return;
-					const keep = new Set(fetched.map((ev) => ev.id));
-					for (const ev of [...eventMap.values()]) if (!keep.has(ev.id) && overlaps(ev, range.start, range.end)) removeEvent(ev.id);
-					for (const ev of fetched) upsertEvent(ev);
+					merge(fetched, range);
 				} catch (e) {
 					set(error, e instanceof Error ? e.message : String(e), true);
 				} finally {
@@ -12493,9 +12503,11 @@ createHTML: (html) => {
 		function overlaps(ev, range) {
 			return ev.start < range.end && ev.end > range.start;
 		}
+		const fetchEventsSync = (range) => events.filter((ev) => overlaps(ev, range)).map(withColor);
 		return {
+			fetchEventsSync,
 			async fetchEvents(range) {
-				return events.filter((ev) => overlaps(ev, range)).map(withColor);
+				return fetchEventsSync(range);
 			},
 			async createEvent(data) {
 				const ev = {