@nomideusz/svelte-calendar 0.6.3 → 0.6.5

package/dist/core/measure.js

@@ -0,0 +1,195 @@
+/**
+ * Text measurement utilities powered by Pretext.
+ *
+ * Provides DOM-free text measurement for calendar event blocks.
+ * Pretext is an optional peer dependency — if not installed,
+ * these functions degrade gracefully to simple heuristics.
+ *
+ * Usage:
+ *   const m = createTextMeasure({ font: '500 12px Inter' });
+ *   const fits = m.fits('Meeting with team', 120, 16); // width, lineHeight
+ *   const { height, lineCount } = m.measure('Long event title...', 120, 16);
+ *   m.clear(); // release caches
+ */
+const DEFAULTS = {
+    titleFont: '500 12px system-ui, sans-serif',
+    secondaryFont: '400 10px system-ui, sans-serif',
+    tagFont: '500 8px system-ui, sans-serif',
+    titleLineHeight: 16,
+    secondaryLineHeight: 13,
+    contentGap: 3,
+};
+/**
+ * Create a text measure instance.
+ * Lazily loads Pretext on first use. Falls back to char-width heuristics if unavailable.
+ */
+export function createTextMeasure(opts = {}) {
+    const config = { ...DEFAULTS, ...opts };
+    // Pretext module — loaded lazily
+    let pretext = null;
+    let loadAttempted = false;
+    let pretextAvailable = false;
+    // Cache prepared texts (font+text → prepared handle)
+    const cache = new Map();
+    function tryLoadPretext() {
+        if (loadAttempted)
+            return pretextAvailable;
+        loadAttempted = true;
+        try {
+            // Dynamic require/import for optional dependency
+            // This works because Pretext is a synchronous API
+            const mod = globalThis.__pretextModule;
+            if (mod) {
+                pretext = mod;
+                pretextAvailable = true;
+            }
+        }
+        catch {
+            // Not available — that's fine
+        }
+        return pretextAvailable;
+    }
+    function getPrepared(text, font) {
+        const key = `${font}\0${text}`;
+        let prepared = cache.get(key);
+        if (!prepared) {
+            prepared = pretext.prepare(text, font);
+            cache.set(key, prepared);
+        }
+        return prepared;
+    }
+    // Heuristic fallback: estimate chars per line from average char width
+    function heuristicMeasure(text, maxWidth, lineHeight, font) {
+        // Rough average char widths by font size
+        const sizeMatch = font.match(/(\d+)px/);
+        const fontSize = sizeMatch ? parseInt(sizeMatch[1]) : 12;
+        const avgCharWidth = fontSize * 0.55; // rough average for Latin text
+        const charsPerLine = Math.max(1, Math.floor(maxWidth / avgCharWidth));
+        const lineCount = Math.max(1, Math.ceil(text.length / charsPerLine));
+        return { height: lineCount * lineHeight, lineCount };
+    }
+    function measureOne(text, maxWidth, lineHeight, font) {
+        if (!text)
+            return { height: 0, lineCount: 0 };
+        if (pretextAvailable && pretext) {
+            const prepared = getPrepared(text, font);
+            return pretext.layout(prepared, maxWidth, lineHeight);
+        }
+        return heuristicMeasure(text, maxWidth, lineHeight, font);
+    }
+    return {
+        get available() {
+            tryLoadPretext();
+            return pretextAvailable;
+        },
+        measure(text, maxWidth, lineHeight) {
+            tryLoadPretext();
+            return measureOne(text, maxWidth, lineHeight, config.titleFont);
+        },
+        fits(text, maxWidth, lineHeight) {
+            tryLoadPretext();
+            const { lineCount } = measureOne(text, maxWidth, lineHeight, config.titleFont);
+            return lineCount <= 1;
+        },
+        measureStack(items, maxWidth, gap = config.contentGap) {
+            tryLoadPretext();
+            const breakdown = [];
+            let totalHeight = 0;
+            for (const item of items) {
+                if (!item.text) {
+                    breakdown.push({ height: 0, lineCount: 0 });
+                    continue;
+                }
+                const font = item.font ?? config.secondaryFont;
+                const lh = item.lineHeight ?? config.secondaryLineHeight;
+                const result = measureOne(item.text, maxWidth, lh, font);
+                breakdown.push(result);
+                if (result.height > 0) {
+                    totalHeight += (totalHeight > 0 ? gap : 0) + result.height;
+                }
+            }
+            return { height: totalHeight, breakdown };
+        },
+        fitContent(opts) {
+            tryLoadPretext();
+            const { title, subtitle, location, time, tags, maxWidth, maxHeight } = opts;
+            const gap = config.contentGap;
+            // Title always measured
+            const titleResult = measureOne(title, maxWidth, config.titleLineHeight, config.titleFont);
+            let used = titleResult.height;
+            const result = {
+                title: true,
+                titleLines: titleResult.lineCount,
+                subtitle: false,
+                location: false,
+                time: false,
+                tags: false,
+                totalHeight: used,
+            };
+            // Try adding time
+            if (time) {
+                const h = measureOne(time, maxWidth, config.secondaryLineHeight, config.secondaryFont);
+                if (used + gap + h.height <= maxHeight) {
+                    result.time = true;
+                    used += gap + h.height;
+                }
+            }
+            // Try adding subtitle
+            if (subtitle) {
+                const h = measureOne(subtitle, maxWidth, config.secondaryLineHeight, config.secondaryFont);
+                if (used + gap + h.height <= maxHeight) {
+                    result.subtitle = true;
+                    used += gap + h.height;
+                }
+            }
+            // Try adding location
+            if (location) {
+                const h = measureOne(location, maxWidth, config.secondaryLineHeight, config.secondaryFont);
+                if (used + gap + h.height <= maxHeight) {
+                    result.location = true;
+                    used += gap + h.height;
+                }
+            }
+            // Try adding tags
+            if (tags?.length) {
+                const tagText = tags.join('  ');
+                const h = measureOne(tagText, maxWidth, config.secondaryLineHeight, config.tagFont);
+                if (used + gap + h.height <= maxHeight) {
+                    result.tags = true;
+                    used += gap + h.height;
+                }
+            }
+            result.totalHeight = used;
+            return result;
+        },
+        clear() {
+            cache.clear();
+            if (pretextAvailable && pretext) {
+                pretext.clearCache();
+            }
+        },
+    };
+}
+/**
+ * Initialize Pretext for text measurement.
+ * Call this once in your app's entry point (e.g., +layout.svelte onMount).
+ * If not called, measurement falls back to character-width heuristics.
+ *
+ * Usage:
+ *   import { initTextMeasure } from '@nomideusz/svelte-calendar';
+ *   onMount(() => initTextMeasure());
+ */
+export async function initTextMeasure() {
+    try {
+        const mod = await import('@chenglou/pretext');
+        globalThis.__pretextModule = {
+            prepare: mod.prepare,
+            layout: mod.layout,
+            clearCache: mod.clearCache,
+        };
+        return true;
+    }
+    catch {
+        return false;
+    }
+}

package/dist/core/time.js

@@ -95,8 +95,8 @@ export function segmentForDay(ev, dayMs) {
     const firstDayMs = sod(evStart);
     // For end time: if event ends exactly at midnight, last day is the day before
     const lastDayMs = sod(evEnd - 1);
-    const totalDays = Math.round((lastDayMs - firstDayMs) / DAY_MS) + 1;
-    const dayIndex = Math.round((dayStart - firstDayMs) / DAY_MS) + 1;
+    const totalDays = Math.floor((lastDayMs - firstDayMs) / DAY_MS) + 1;
+    const dayIndex = Math.floor((dayStart - firstDayMs) / DAY_MS) + 1;
     return {
         ev,
         start: new Date(Math.max(evStart, dayStart)),

package/dist/core/types.d.ts

@@ -5,6 +5,16 @@
  * Represents an event on the timeline / scheduler.
  * Core interface for all views, adapters, and the event store.
  */
+/**
+ * Event status — universal across scheduling domains.
+ *
+ *   'confirmed'  — default, normal event
+ *   'cancelled'  — visually struck through, still shown on grid
+ *   'tentative'  — e.g. awaiting confirmation
+ *   'full'       — no remaining capacity
+ *   'limited'    — low remaining capacity
+ */
+export type EventStatus = 'confirmed' | 'cancelled' | 'tentative' | 'full' | 'limited';
 export interface TimelineEvent {
     id: string;
     title: string;
@@ -19,6 +29,28 @@ export interface TimelineEvent {
     subtitle?: string;
     /** Tags displayed as small pills (e.g. ["Beginner", "Yoga"]) */
     tags?: string[];
+    /**
+     * Location or room where the event takes place.
+     * Universal across domains: yoga studio, meeting room, classroom, venue.
+     */
+    location?: string;
+    /**
+     * Event status. Defaults to `'confirmed'` when omitted.
+     * Cancelled events are visually distinct but still shown on the grid.
+     */
+    status?: EventStatus;
+    /**
+     * ID from the external / upstream system (e.g. booking platform,
+     * CRM, LMS). Preserved during mapping so the consumer can
+     * cross-reference back to the source.
+     */
+    externalId?: string;
+    /**
+     * Resource this event belongs to — for multi-resource views.
+     * Could be a room ID, instructor ID, court number, etc.
+     * The calendar can group columns/lanes by this value.
+     */
+    resourceId?: string;
     /** Arbitrary payload from the source app (bookings, attendees, etc.) */
     data?: Record<string, unknown>;
 }

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

@@ -30,11 +30,6 @@ export function createEventStore(adapter) {
     function overlaps(ev, start, end) {
         return ev.start < end && ev.end > start;
     }
-    function replaceEvent(id, updated) {
-        if (eventMap.has(id)) {
-            eventMap.set(id, updated);
-        }
-    }
     function removeEvent(id) {
         eventMap.delete(id);
     }
@@ -81,6 +76,8 @@ export function createEventStore(adapter) {
             return eventMap.get(id);
         },
         async add(eventData) {
+            if (!adapter.createEvent)
+                throw new Error('Adapter is read-only: createEvent not implemented');
             loading = true;
             error = null;
             try {
@@ -97,11 +94,13 @@ export function createEventStore(adapter) {
             }
         },
         async update(id, patch) {
+            if (!adapter.updateEvent)
+                throw new Error('Adapter is read-only: updateEvent not implemented');
             loading = true;
             error = null;
             try {
                 const updated = await adapter.updateEvent(id, patch);
-                replaceEvent(id, updated);
+                upsertEvent(updated);
             }
             catch (e) {
                 error = e instanceof Error ? e.message : String(e);
@@ -112,6 +111,8 @@ export function createEventStore(adapter) {
             }
         },
         async remove(id) {
+            if (!adapter.deleteEvent)
+                throw new Error('Adapter is read-only: deleteEvent not implemented');
             loading = true;
             error = null;
             try {
@@ -127,7 +128,21 @@ export function createEventStore(adapter) {
             }
         },
         async move(id, newStart, newEnd) {
-            return this.update(id, { start: newStart, end: newEnd });
+            // Optimistic update: apply locally first so the UI doesn't flash
+            // back to the old position between drag.commit() and adapter response.
+            const existing = eventMap.get(id);
+            if (existing) {
+                upsertEvent({ ...existing, start: newStart, end: newEnd });
+            }
+            try {
+                await this.update(id, { start: newStart, end: newEnd });
+            }
+            catch (e) {
+                // Revert optimistic update on failure
+                if (existing)
+                    upsertEvent(existing);
+                throw e;
+            }
         },
     };
 }

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

@@ -0,0 +1,67 @@
+import type { TimelineEvent } from '../core/types.js';
+import type { CalendarAdapter } from '../adapters/types.js';
+export interface AgendaOptions {
+    /** Data source (required). Can be a getter for reactive adapters. */
+    adapter: CalendarAdapter | (() => CalendarAdapter);
+    /** Initial date to focus on (default: today) */
+    initialDate?: Date;
+    /** BCP 47 locale tag (e.g. 'en-US', 'pl-PL') */
+    locale?: string;
+    /** Number of days to load ahead of focus date for the upcoming list (default: 7) */
+    lookahead?: number;
+}
+export interface HeadlessAgenda {
+    /** The focused date */
+    readonly focusDate: Date;
+    /** Start-of-day ms for focus date */
+    readonly focusDayMs: number;
+    /** Is the focus date today? */
+    readonly isToday: boolean;
+    /** Is the focus date in the past? */
+    readonly isPast: boolean;
+    /** Is the focus date in the future? */
+    readonly isFuture: boolean;
+    /** Formatted date label (e.g. "Monday, April 14") */
+    readonly dateLabel: string;
+    /** Whether the adapter is loading */
+    readonly loading: boolean;
+    /** All events for the focus day, sorted by start */
+    readonly dayEvents: TimelineEvent[];
+    /** All-day or multi-day events */
+    readonly allDay: TimelineEvent[];
+    /** Timed events that have ended (today only; empty for other days) */
+    readonly past: TimelineEvent[];
+    /** Timed events currently in progress */
+    readonly current: TimelineEvent[];
+    /** Timed events coming up */
+    readonly upcoming: TimelineEvent[];
+    /** Grouped upcoming slots (overlapping events merged) */
+    readonly upcomingSlots: import('../views/shared/format.js').TimeSlot[];
+    /** Total event count for the day */
+    readonly count: number;
+    /** Format a Date to locale time string (e.g. "2:30 PM" or "14:30") */
+    fmtTime(date: Date): string;
+    /** Format event duration (e.g. "1h 30m") */
+    fmtDuration(event: TimelineEvent): string;
+    /** Format time range (e.g. "14:00 – 15:30") */
+    fmtRange(event: TimelineEvent): string;
+    /** Time until event starts (e.g. "in 2h 15m") — live, updates every second */
+    eta(event: TimelineEvent): string;
+    /** Progress of an in-progress event (0–1) — live */
+    progress(event: TimelineEvent): number;
+    /** Go to previous day */
+    prev(): void;
+    /** Go to next day */
+    next(): void;
+    /** Go to today */
+    goToday(): void;
+    /** Set focus to a specific date */
+    setDate(date: Date): void;
+    /** Current epoch ms, ticks every second */
+    readonly now: number;
+    /** Formatted current time "HH:MM" */
+    readonly timeLabel: string;
+    /** Today's start-of-day ms */
+    readonly todayMs: number;
+}
+export declare function createAgenda(options: AgendaOptions): HeadlessAgenda;

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

@@ -0,0 +1,139 @@
+/**
+ * createAgenda() — headless single-day agenda state.
+ *
+ * Returns reactive state for rendering a day's events with zero DOM.
+ * Lighter than createCalendar: no view-state, drag, or selection engines.
+ * Manages its own focus date, loads events from the adapter, and categorises
+ * them into past / current / upcoming buckets that update every second.
+ *
+ * Must be called during component initialisation (Svelte 5 rune scope).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createAgenda, createMemoryAdapter } from '@nomideusz/svelte-calendar';
+ *
+ *   const adapter = createMemoryAdapter([...]);
+ *   const agenda = createAgenda({ adapter });
+ * </script>
+ *
+ * <h2>{agenda.dateLabel}</h2>
+ * <button onclick={agenda.prev}>←</button>
+ * <button onclick={agenda.next}>→</button>
+ *
+ * {#each agenda.upcoming as ev}
+ *   <div>
+ *     <span>{agenda.fmtTime(ev.start)}</span>
+ *     <span>{ev.title}</span>
+ *     <span>{agenda.eta(ev)}</span>
+ *   </div>
+ * {/each}
+ * ```
+ */
+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 { 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'
+        ? options.adapter
+        : () => options.adapter;
+    const store = $derived(createEventStore(resolveAdapter()));
+    const clock = createClock();
+    // ── Focus date (reactive, writable) ──
+    let focusDayMs = $state(sod(initialDate?.getTime() ?? Date.now()));
+    // ── 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
+    untrack(() => {
+        const start = new Date(focusDayMs);
+        const end = new Date(focusDayMs + lookahead * DAY_MS);
+        store.load({ start, end });
+    });
+    // ── Day derivations ──
+    const dayEnd = $derived(focusDayMs + DAY_MS);
+    const isToday = $derived(focusDayMs === clock.today);
+    const isPast = $derived(focusDayMs < clock.today);
+    const isFuture = $derived(focusDayMs > clock.today);
+    const dateLabel = $derived(new Date(focusDayMs).toLocaleDateString(locale ?? undefined, {
+        weekday: 'long',
+        month: 'long',
+        day: 'numeric',
+    }));
+    const dayEvents = $derived.by(() => {
+        return store.events
+            .filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > focusDayMs)
+            .sort((a, b) => a.start.getTime() - b.start.getTime());
+    });
+    const allDay = $derived(dayEvents.filter((ev) => isAllDay(ev) || isMultiDay(ev)));
+    const timed = $derived(dayEvents.filter((ev) => !isAllDay(ev) && !isMultiDay(ev)));
+    const categorised = $derived.by(() => {
+        const now = clock.tick;
+        const past = [];
+        const current = [];
+        const upcoming = [];
+        for (const ev of timed) {
+            const s = ev.start.getTime();
+            const e = ev.end.getTime();
+            if (e <= now)
+                past.push(ev);
+            else if (s <= now && e > now)
+                current.push(ev);
+            else
+                upcoming.push(ev);
+        }
+        return { past, current, upcoming, upcomingSlots: groupIntoSlots(upcoming) };
+    });
+    // ── Navigation ──
+    function prev() { focusDayMs = focusDayMs - DAY_MS; }
+    function next() { focusDayMs = focusDayMs + DAY_MS; }
+    function goToday() { focusDayMs = clock.today; }
+    function setDate(date) { focusDayMs = sod(date.getTime()); }
+    // ── Format helpers ──
+    const fmtTime = (d) => _fmtTime(d, locale);
+    const fmtDur = (ev) => fmtDuration(ev.start, ev.end);
+    const fmtRange = (ev) => `${_fmtTime(ev.start, locale)} – ${_fmtTime(ev.end, locale)}`;
+    const eta = (ev) => timeUntilMs(ev.start.getTime(), clock.tick);
+    const progress = (ev) => _progress(ev, clock.tick);
+    return {
+        // State
+        get focusDate() { return new Date(focusDayMs); },
+        get focusDayMs() { return focusDayMs; },
+        get isToday() { return isToday; },
+        get isPast() { return isPast; },
+        get isFuture() { return isFuture; },
+        get dateLabel() { return dateLabel; },
+        get loading() { return store.loading; },
+        // Events
+        get dayEvents() { return dayEvents; },
+        get allDay() { return allDay; },
+        get past() { return categorised.past; },
+        get current() { return categorised.current; },
+        get upcoming() { return categorised.upcoming; },
+        get upcomingSlots() { return categorised.upcomingSlots; },
+        get count() { return dayEvents.length; },
+        // Format helpers
+        fmtTime,
+        fmtDuration: fmtDur,
+        fmtRange,
+        eta,
+        progress,
+        // Navigation
+        prev,
+        next,
+        goToday,
+        setDate,
+        // Clock
+        get now() { return clock.tick; },
+        get timeLabel() { return clock.hm; },
+        get todayMs() { return clock.today; },
+    };
+}

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

@@ -0,0 +1,2 @@
+import type { HeadlessCalendarOptions, HeadlessCalendar } from './types.js';
+export declare function createCalendar(options: HeadlessCalendarOptions): HeadlessCalendar;