@nomideusz/svelte-calendar 0.1.0

package/dist/core/types.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Shared TypeScript types for the timeline design system.
+ */
+/**
+ * Represents an event on the timeline / scheduler.
+ * Core interface for all views, adapters, and the event store.
+ */
+export interface TimelineEvent {
+    id: string;
+    title: string;
+    start: Date;
+    end: Date;
+    color?: string;
+    /** All-day event (renders as a banner, not a timed block) */
+    allDay?: boolean;
+    /** Category for grouping (e.g. "wellness", "work", "life") */
+    category?: string;
+    /** Recurrence rule — iCalendar RRULE string (e.g. "FREQ=WEEKLY;BYDAY=MO") */
+    recurrence?: string;
+    /** Whether this event can be moved / resized by the user */
+    editable?: boolean;
+    /** Arbitrary payload from the source app (bookings, attendees, etc.) */
+    data?: Record<string, unknown>;
+}
+/**
+ * Shared props contract for all WeekTimeline variants.
+ * Every variant MUST accept this exact interface so they can be
+ * hot-swapped without changing bindings.
+ */
+export interface WeekTimelineProps {
+    /** Week offset: 0 = this week, -1 = last, +1 = next (ignored when focusDate is set) */
+    weekOffset?: number;
+    /** Start on Monday (true) or Sunday (false) */
+    mondayStart?: boolean;
+    /** Pixel height of one hour row */
+    hourHeight?: number;
+    /** Pixel width of each day column (0 = equal flex) */
+    dayWidth?: number;
+    /** Where "now" sits vertically (0 = top edge, 1 = bottom edge) */
+    nowPosition?: number;
+    /** Total visible height of the component */
+    height?: number;
+    /** Events to render */
+    events?: TimelineEvent[];
+    /** Inline style for CSS variable overrides (theme) */
+    style?: string;
+    /** The date to centre this view on. Overrides weekOffset when set. */
+    focusDate?: Date;
+    /** Called when the user clicks an event */
+    oneventclick?: (event: TimelineEvent) => void;
+    /** Called when the user clicks an empty time slot */
+    oneventcreate?: (range: {
+        start: Date;
+        end: Date;
+    }) => void;
+    /** Currently selected event ID (for highlight) */
+    selectedEventId?: string | null;
+}
+/**
+ * Shared props contract for the DayTimeline component.
+ */
+export interface DayTimelineProps {
+    /** Number of past days visible */
+    pastDays?: number;
+    /** Number of future days visible */
+    futureDays?: number;
+    /** Pixel width of one hour */
+    hourWidth?: number;
+    /** Where "now" sits in the viewport (0 = left edge, 1 = right edge) */
+    nowPosition?: number;
+    /** Events to render */
+    events?: TimelineEvent[];
+    /** Inline style for CSS custom property overrides */
+    style?: string;
+    /** The date to centre this view on */
+    focusDate?: Date;
+    /** Called when the user clicks an event */
+    oneventclick?: (event: TimelineEvent) => void;
+    /** Called when the user clicks an empty time slot */
+    oneventcreate?: (range: {
+        start: Date;
+        end: Date;
+    }) => void;
+    /** Currently selected event ID (for highlight) */
+    selectedEventId?: string | null;
+}
+/**
+ * Convert a Date (or timestamp) to a pixel offset on the timeline.
+ * Useful for external apps that need to position overlays.
+ */
+export declare function timeToX(time: Date | number, rangeStartMs: number, hourWidth: number): number;

package/dist/core/types.js

@@ -0,0 +1,11 @@
+/**
+ * Shared TypeScript types for the timeline design system.
+ */
+/**
+ * Convert a Date (or timestamp) to a pixel offset on the timeline.
+ * Useful for external apps that need to position overlays.
+ */
+export function timeToX(time, rangeStartMs, hourWidth) {
+    const ms = typeof time === 'number' ? time : time.getTime();
+    return ((ms - rangeStartMs) / 3_600_000) * hourWidth;
+}

package/dist/engine/drag.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Reactive drag state — tracks drag-to-create, drag-to-move, and resize operations.
+ *
+ * This is a state machine, not actual DOM event handling.
+ * View components use Svelte `use:` actions (from actions/) to wire
+ * pointer events → this state. The engine reads this state and commits
+ * changes to the event store on drop.
+ */
+export type DragMode = 'none' | 'create' | 'move' | 'resize-start' | 'resize-end';
+export interface DragPayload {
+    /** The event being dragged (null for create) */
+    eventId: string | null;
+    /** Current tentative start */
+    start: Date;
+    /** Current tentative end */
+    end: Date;
+    /** Which day column / row is the pointer over */
+    dayIndex: number;
+}
+export interface DragState {
+    readonly mode: DragMode;
+    readonly payload: DragPayload | null;
+    readonly active: boolean;
+    beginCreate(start: Date, end: Date, dayIndex?: number): void;
+    beginMove(eventId: string, start: Date, end: Date): void;
+    beginResize(eventId: string, edge: 'start' | 'end', start: Date, end: Date): void;
+    updatePointer(start: Date, end: Date, dayIndex?: number): void;
+    commit(): DragPayload | null;
+    cancel(): void;
+}
+export declare function createDragState(): DragState;

package/dist/engine/drag.svelte.js

@@ -0,0 +1,58 @@
+/**
+ * Reactive drag state — tracks drag-to-create, drag-to-move, and resize operations.
+ *
+ * This is a state machine, not actual DOM event handling.
+ * View components use Svelte `use:` actions (from actions/) to wire
+ * pointer events → this state. The engine reads this state and commits
+ * changes to the event store on drop.
+ */
+export function createDragState() {
+    let mode = $state('none');
+    let payload = $state(null);
+    const active = $derived(mode !== 'none');
+    function reset() {
+        mode = 'none';
+        payload = null;
+    }
+    return {
+        get mode() {
+            return mode;
+        },
+        get payload() {
+            return payload;
+        },
+        get active() {
+            return active;
+        },
+        beginCreate(start, end, dayIndex = 0) {
+            mode = 'create';
+            payload = { eventId: null, start, end, dayIndex };
+        },
+        beginMove(eventId, start, end) {
+            mode = 'move';
+            payload = { eventId, start, end, dayIndex: 0 };
+        },
+        beginResize(eventId, edge, start, end) {
+            mode = edge === 'start' ? 'resize-start' : 'resize-end';
+            payload = { eventId, start, end, dayIndex: 0 };
+        },
+        updatePointer(start, end, dayIndex) {
+            if (!payload)
+                return;
+            payload = {
+                ...payload,
+                start,
+                end,
+                ...(dayIndex !== undefined ? { dayIndex } : {}),
+            };
+        },
+        commit() {
+            const result = payload;
+            reset();
+            return result;
+        },
+        cancel() {
+            reset();
+        },
+    };
+}

package/dist/engine/event-store.svelte.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Reactive event store — the CRUD brain of the calendar.
+ *
+ * Wraps a CalendarAdapter and exposes Svelte 5 rune-mode reactive state.
+ * All mutations go through the adapter first, then update local state.
+ *
+ * Usage:
+ *   const store = createEventStore(adapter);
+ *   // store.events       — all loaded events (reactive)
+ *   // store.forRange()   — query by date range
+ *   // store.forDay()     — query single day
+ *   // store.add()        — create event
+ *   // store.update()     — patch event
+ *   // store.remove()     — delete event
+ *   // store.move()       — drag-move shorthand
+ *   // store.load()       — fetch from adapter for a range
+ */
+import type { TimelineEvent } from '../core/types.js';
+import type { CalendarAdapter, DateRange } from '../adapters/types.js';
+export interface EventStore {
+    /** All currently loaded events (reactive) */
+    readonly events: TimelineEvent[];
+    /** Whether a load/mutation is in-flight */
+    readonly loading: boolean;
+    /** Last error, if any */
+    readonly error: string | null;
+    /** Load events from the adapter for a date range */
+    load(range: DateRange): Promise<void>;
+    /** Get events overlapping a date range (client-side filter) */
+    forRange(start: Date, end: Date): TimelineEvent[];
+    /** Get events for a single day */
+    forDay(date: Date): TimelineEvent[];
+    /** Get a single event by ID */
+    byId(id: string): TimelineEvent | undefined;
+    /** Create a new event */
+    add(event: Omit<TimelineEvent, 'id'>): Promise<TimelineEvent>;
+    /** Patch an existing event */
+    update(id: string, patch: Partial<TimelineEvent>): Promise<void>;
+    /** Delete an event */
+    remove(id: string): Promise<void>;
+    /** Move an event to a new time range (drag shorthand) */
+    move(id: string, newStart: Date, newEnd: Date): Promise<void>;
+}
+/**
+ * Create a reactive event store backed by a CalendarAdapter.
+ */
+export declare function createEventStore(adapter: CalendarAdapter): EventStore;

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

@@ -0,0 +1,120 @@
+import { sod } from '../core/time.js';
+/**
+ * Create a reactive event store backed by a CalendarAdapter.
+ */
+export function createEventStore(adapter) {
+    let events = $state([]);
+    let loading = $state(false);
+    let error = $state(null);
+    // ── Internal helpers ──
+    function overlaps(ev, start, end) {
+        return ev.start < end && ev.end > start;
+    }
+    function replaceEvent(id, updated) {
+        const idx = events.findIndex((e) => e.id === id);
+        if (idx >= 0) {
+            events[idx] = updated;
+        }
+    }
+    function removeEvent(id) {
+        events = events.filter((e) => e.id !== id);
+    }
+    function upsertEvent(ev) {
+        const idx = events.findIndex((e) => e.id === ev.id);
+        if (idx >= 0) {
+            events[idx] = ev;
+        }
+        else {
+            events.push(ev);
+        }
+    }
+    // ── Public API ──
+    return {
+        get events() {
+            return events;
+        },
+        get loading() {
+            return loading;
+        },
+        get error() {
+            return error;
+        },
+        async load(range) {
+            loading = true;
+            error = null;
+            try {
+                const fetched = await adapter.fetchEvents(range);
+                // Merge: upsert fetched, don't blow away events outside this range
+                for (const ev of fetched) {
+                    upsertEvent(ev);
+                }
+            }
+            catch (e) {
+                error = e instanceof Error ? e.message : String(e);
+            }
+            finally {
+                loading = false;
+            }
+        },
+        forRange(start, end) {
+            return events.filter((ev) => overlaps(ev, start, end));
+        },
+        forDay(date) {
+            const dayStart = new Date(sod(date.getTime()));
+            const dayEnd = new Date(dayStart.getTime() + 86_400_000);
+            return events.filter((ev) => overlaps(ev, dayStart, dayEnd));
+        },
+        byId(id) {
+            return events.find((e) => e.id === id);
+        },
+        async add(eventData) {
+            loading = true;
+            error = null;
+            try {
+                const created = await adapter.createEvent(eventData);
+                events.push(created);
+                return created;
+            }
+            catch (e) {
+                error = e instanceof Error ? e.message : String(e);
+                throw e;
+            }
+            finally {
+                loading = false;
+            }
+        },
+        async update(id, patch) {
+            loading = true;
+            error = null;
+            try {
+                const updated = await adapter.updateEvent(id, patch);
+                replaceEvent(id, updated);
+            }
+            catch (e) {
+                error = e instanceof Error ? e.message : String(e);
+                throw e;
+            }
+            finally {
+                loading = false;
+            }
+        },
+        async remove(id) {
+            loading = true;
+            error = null;
+            try {
+                await adapter.deleteEvent(id);
+                removeEvent(id);
+            }
+            catch (e) {
+                error = e instanceof Error ? e.message : String(e);
+                throw e;
+            }
+            finally {
+                loading = false;
+            }
+        },
+        async move(id, newStart, newEnd) {
+            return this.update(id, { start: newStart, end: newEnd });
+        },
+    };
+}

package/dist/engine/index.d.ts

@@ -0,0 +1,8 @@
+export { createEventStore } from './event-store.svelte.js';
+export type { EventStore } from './event-store.svelte.js';
+export { createViewState } from './view-state.svelte.js';
+export type { ViewState, ViewStateOptions, CalendarViewId, ViewGranularity, DateRange as ViewDateRange, } from './view-state.svelte.js';
+export { createSelection } from './selection.svelte.js';
+export type { Selection } from './selection.svelte.js';
+export { createDragState } from './drag.svelte.js';
+export type { DragState, DragMode, DragPayload } from './drag.svelte.js';

package/dist/engine/index.js

@@ -0,0 +1,5 @@
+// ─── Engine barrel export ───────────────────────────────
+export { createEventStore } from './event-store.svelte.js';
+export { createViewState } from './view-state.svelte.js';
+export { createSelection } from './selection.svelte.js';
+export { createDragState } from './drag.svelte.js';

package/dist/engine/selection.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Reactive selection state — tracks selected and hovered events.
+ *
+ * Usage:
+ *   const sel = createSelection();
+ *   sel.selectedId   — currently selected event ID (or null)
+ *   sel.hoveredId    — currently hovered event ID (or null)
+ *   sel.selectedIds  — Set of selected IDs (multi-select)
+ *   sel.select(id)   — select one event (clears multi)
+ *   sel.toggle(id)   — toggle in multi-select
+ *   sel.clear()      — deselect all
+ */
+export interface Selection {
+    readonly selectedId: string | null;
+    readonly hoveredId: string | null;
+    readonly selectedIds: ReadonlySet<string>;
+    select(id: string): void;
+    deselect(): void;
+    toggle(id: string): void;
+    clear(): void;
+    hover(id: string | null): void;
+    isSelected(id: string): boolean;
+}
+export declare function createSelection(): Selection;

package/dist/engine/selection.svelte.js

@@ -0,0 +1,58 @@
+/**
+ * Reactive selection state — tracks selected and hovered events.
+ *
+ * Usage:
+ *   const sel = createSelection();
+ *   sel.selectedId   — currently selected event ID (or null)
+ *   sel.hoveredId    — currently hovered event ID (or null)
+ *   sel.selectedIds  — Set of selected IDs (multi-select)
+ *   sel.select(id)   — select one event (clears multi)
+ *   sel.toggle(id)   — toggle in multi-select
+ *   sel.clear()      — deselect all
+ */
+export function createSelection() {
+    let selectedId = $state(null);
+    let hoveredId = $state(null);
+    let selectedIds = $state(new Set());
+    return {
+        get selectedId() {
+            return selectedId;
+        },
+        get hoveredId() {
+            return hoveredId;
+        },
+        get selectedIds() {
+            return selectedIds;
+        },
+        select(id) {
+            selectedId = id;
+            selectedIds = new Set([id]);
+        },
+        deselect() {
+            selectedId = null;
+            selectedIds = new Set();
+        },
+        toggle(id) {
+            const next = new Set(selectedIds);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            selectedIds = next;
+            selectedId = next.size === 1 ? [...next][0] : null;
+        },
+        clear() {
+            selectedId = null;
+            hoveredId = null;
+            selectedIds = new Set();
+        },
+        hover(id) {
+            hoveredId = id;
+        },
+        isSelected(id) {
+            return selectedIds.has(id);
+        },
+    };
+}

package/dist/engine/view-state.svelte.d.ts

@@ -0,0 +1,24 @@
+/** All registered view IDs. Add new ones here as variants are created. */
+export type CalendarViewId = 'day-grid' | 'day-agenda' | 'week-grid' | 'week-agenda' | 'week-heatmap';
+export type ViewGranularity = 'day' | 'week';
+export interface ViewStateOptions {
+    defaultView?: CalendarViewId;
+    mondayStart?: boolean;
+}
+export interface DateRange {
+    start: Date;
+    end: Date;
+}
+export interface ViewState {
+    readonly view: CalendarViewId;
+    readonly focusDate: Date;
+    readonly range: DateRange;
+    readonly granularity: ViewGranularity;
+    readonly mondayStart: boolean;
+    setView(id: CalendarViewId): void;
+    setFocusDate(date: Date): void;
+    next(): void;
+    prev(): void;
+    goToday(): void;
+}
+export declare function createViewState(options?: ViewStateOptions): ViewState;

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

@@ -0,0 +1,74 @@
+/**
+ * Reactive view state — tracks which view is active, the current date range,
+ * and navigation (prev/next/today).
+ *
+ * Usage:
+ *   const vs = createViewState({ defaultView: 'week-terrain' });
+ *   vs.view        — current view id
+ *   vs.focusDate   — the center date
+ *   vs.range       — { start, end } for the current view window
+ *   vs.next()      — advance one period (day/week depending on view)
+ *   vs.prev()      — go back one period
+ *   vs.goToday()   — jump to today
+ */
+import { startOfWeek as calcStartOfWeek, addDaysMs, DAY_MS } from '../core/time.js';
+function granularityFor(view) {
+    if (view.startsWith('day'))
+        return 'day';
+    return 'week';
+}
+function computeRange(focus, granularity, mondayStart) {
+    if (granularity === 'day') {
+        const start = new Date(focus);
+        start.setHours(0, 0, 0, 0);
+        const end = new Date(start.getTime() + DAY_MS);
+        return { start, end };
+    }
+    // week
+    const ws = calcStartOfWeek(focus.getTime(), mondayStart);
+    return {
+        start: new Date(ws),
+        end: new Date(addDaysMs(ws, 7)),
+    };
+}
+export function createViewState(options = {}) {
+    let view = $state(options.defaultView ?? 'week-grid');
+    let focusDate = $state(new Date());
+    let mondayStart = $state(options.mondayStart ?? true);
+    const granularity = $derived(granularityFor(view));
+    const range = $derived(computeRange(focusDate, granularity, mondayStart));
+    return {
+        get view() {
+            return view;
+        },
+        get focusDate() {
+            return focusDate;
+        },
+        get range() {
+            return range;
+        },
+        get granularity() {
+            return granularity;
+        },
+        get mondayStart() {
+            return mondayStart;
+        },
+        setView(id) {
+            view = id;
+        },
+        setFocusDate(date) {
+            focusDate = date;
+        },
+        next() {
+            const days = granularity === 'day' ? 1 : 7;
+            focusDate = new Date(addDaysMs(focusDate.getTime(), days));
+        },
+        prev() {
+            const days = granularity === 'day' ? -1 : -7;
+            focusDate = new Date(addDaysMs(focusDate.getTime(), days));
+        },
+        goToday() {
+            focusDate = new Date();
+        },
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { DayGrid, DayTimeline, WeekGrid, WeekHeatmap, Agenda, Settings, } from './views/index.js';
+export type { SettingsField } from './views/index.js';
+export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './primitives/index.js';
+export { Calendar, Toolbar } from './calendar/index.js';
+export type { CalendarView } from './calendar/index.js';
+export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
+export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, ViewGranularity, ViewDateRange, Selection, DragState, DragMode, DragPayload, } from './engine/index.js';
+export { createMemoryAdapter, createRestAdapter } from './adapters/index.js';
+export type { CalendarAdapter, DateRange, RestAdapterOptions } from './adapters/index.js';
+export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, timeToX, } from './core/index.js';
+export type { Clock, TimelineEvent, WeekTimelineProps, DayTimelineProps, } from './core/index.js';
+export { midnight, parchment, indigo, presets, stageBg } from './theme/index.js';
+export type { PresetName } from './theme/index.js';

package/dist/index.js

@@ -0,0 +1,14 @@
+// ─── Views ──────────────────────────────────────────────
+export { DayGrid, DayTimeline, WeekGrid, WeekHeatmap, Agenda, Settings, } from './views/index.js';
+// ─── Primitives ─────────────────────────────────────────
+export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './primitives/index.js';
+// ─── Calendar shell ─────────────────────────────────────
+export { Calendar, Toolbar } from './calendar/index.js';
+// ─── Engine (reactive state) ────────────────────────────
+export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
+// ─── Adapters ───────────────────────────────────────────
+export { createMemoryAdapter, createRestAdapter } from './adapters/index.js';
+// ─── Core: clock, time, locale, types ───────────────────
+export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, timeToX, } from './core/index.js';
+// ─── Themes ─────────────────────────────────────────────
+export { midnight, parchment, indigo, presets, stageBg } from './theme/index.js';