@nomideusz/svelte-calendar 0.5.2 → 0.6.3

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

@@ -1,13 +1,14 @@
 import { type Component, type Snippet } from 'svelte';
 import type { CalendarAdapter } from '../adapters/types.js';
 import type { CalendarViewId } from '../engine/view-state.svelte.js';
-import type { TimelineEvent } from '../core/types.js';
+import type { TimelineEvent, BlockedSlot } from '../core/types.js';
+import type { AutoThemeOptions } from '../theme/auto.js';
 /** One view registration */
 export interface CalendarView {
     id: CalendarViewId;
     label: string;
     /** day or week */
-    granularity: 'day' | 'week';
+    mode: 'day' | 'week';
     /** The Svelte component to render */
     component: Component<Record<string, unknown>>;
     /** Extra props to pass through (e.g. hourHeight, specialized settings) */
@@ -18,14 +19,25 @@ interface Props {
     adapter: CalendarAdapter;
     /** Registered views */
     views?: CalendarView[];
-    /** Initial view */
-    defaultView?: CalendarViewId;
+    /** Active view ID (defaults to first registered view) */
+    view?: CalendarViewId;
     /** CSS theme string (--dt-* inline style) */
     theme?: string;
+    /**
+     * Options for the smart auto-theme.
+     * When theme is `auto` (empty string), the calendar probes the host page
+     * and generates matching --dt-* vars automatically.
+     *
+     * Pass `{ mode, accent, font }` to override individual aspects.
+     * Set `autoTheme: false` to disable probing entirely.
+     */
+    autoTheme?: AutoThemeOptions | false;
     /** Start week on Monday */
     mondayStart?: boolean;
-    /** Total height */
-    height?: number;
+    /** Total height. Use `'auto'` to let content determine height (ideal for Agenda views). */
+    height?: number | 'auto';
+    /** Border radius in px (default: 12). Set to 0 for no rounding. */
+    borderRadius?: number;
     /** Text direction: 'ltr' (default), 'rtl', or 'auto' */
     dir?: 'ltr' | 'rtl' | 'auto';
     /** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */
@@ -38,10 +50,45 @@ interface Props {
     initialDate?: Date;
     /** Drag snap interval in minutes (default: 15) */
     snapInterval?: number;
+    /** Show the Day/Week mode pills (default: true) */
+    showModePills?: boolean;
+    /** Show prev/next/today navigation controls (default: true) */
+    showNavigation?: boolean;
+    /** Treat all days equally — no past-day dimming or collapsing (default: false) */
+    equalDays?: boolean;
+    /** Hide date numbers — headers show only day names (Mon, Tue, …). Useful for template/recurring schedules. */
+    showDates?: boolean;
+    /** ISO weekdays to hide (1=Mon … 7=Sun). E.g. [6, 7] hides weekends. */
+    hideDays?: number[];
+    /** Controlled current date — drives which date the calendar focuses on. */
+    currentDate?: Date;
+    /** Blocked/unavailable time slots — rendered as hatched regions, prevent event creation. */
+    blockedSlots?: BlockedSlot[];
+    /** Number of days shown in week mode (default: 7). E.g. 3 for a 3-day view, 5 for workweek. */
+    days?: number;
+    /** Minimum event duration in minutes (enforced during drag-create and click-to-create). */
+    minDuration?: number;
+    /** Maximum event duration in minutes (enforced during drag-create). */
+    maxDuration?: number;
+    /** Specific dates to disable (greyed-out, no event creation). */
+    disabledDates?: Date[];
+    /**
+     * Mobile mode.
+     * - `'auto'` (default): detect via viewport width (< 768 px)
+     * - `true`: always use mobile views
+     * - `false`: never use mobile views
+     */
+    mobile?: 'auto' | boolean;
     /** Custom event rendering snippet */
     event?: Snippet<[TimelineEvent]>;
     /** Content to show when no events are loaded */
     empty?: Snippet;
+    /** Custom day header snippet. Receives { date, isToday, dayName }. */
+    dayHeader?: Snippet<[{
+        date: Date;
+        isToday: boolean;
+        dayName: string;
+    }]>;
     oneventclick?: (event: TimelineEvent) => void;
     oneventcreate?: (range: {
         start: Date;
@@ -49,6 +96,10 @@ interface Props {
     }) => void;
     oneventmove?: (event: TimelineEvent, newStart: Date, newEnd: Date) => void;
     onviewchange?: (viewId: CalendarViewId) => void;
+    /** Called when the focused date changes (navigation, drag-scroll, etc.) */
+    ondatechange?: (date: Date) => void;
+    /** Called when the pointer enters an event (hover). */
+    oneventhover?: (event: TimelineEvent) => void;
 }
 declare const Calendar: Component<Props, {}, "">;
 type Calendar = ReturnType<typeof Calendar>;

package/dist/core/index.d.ts

@@ -5,5 +5,5 @@ export type { DaySegment } from './time.js';
 export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, fmtTime, fmtDuration, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, defaultLabels, setLabels, resetLabels, getLabels, } from './locale.js';
 export type { CalendarLabels } from './locale.js';
 export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
-export type { TimelineEvent, } from './types.js';
-export { generatePalette, VIVID_PALETTE } from './palette.js';
+export type { TimelineEvent, BlockedSlot, } from './types.js';
+export { generatePalette, extractAccent, VIVID_PALETTE } from './palette.js';

package/dist/core/index.js

@@ -8,4 +8,4 @@ export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, fmtTime, fmtD
 // Timezone utilities
 export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 // Palette
-export { generatePalette, VIVID_PALETTE } from './palette.js';
+export { generatePalette, extractAccent, VIVID_PALETTE } from './palette.js';

package/dist/core/locale.js

@@ -183,13 +183,13 @@ export function fmtTime(d, locale) {
     if (is24HourLocale(locale)) {
         const h = d.getHours();
         const m = d.getMinutes();
-        return m === 0 ? String(h) : `${h}:${String(m).padStart(2, '0')}`;
+        return `${h}:${String(m).padStart(2, '0')}`;
     }
     const h = d.getHours();
     const m = d.getMinutes();
     const suffix = h >= 12 ? 'p' : 'a';
     const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
-    return m === 0 ? `${h12}${suffix}` : `${h12}:${String(m).padStart(2, '0')}${suffix}`;
+    return `${h12}:${String(m).padStart(2, '0')}${suffix}`;
 }
 /**
  * Format the duration between two Dates as a compact string.

package/dist/core/palette.d.ts

@@ -9,6 +9,11 @@
  *   generatePalette(undefined, 8)  // falls back to the vivid default
  */
 export declare const VIVID_PALETTE: string[];
+/**
+ * Extract the --dt-accent hex value from a theme CSS string.
+ * Returns undefined if not found.
+ */
+export declare function extractAccent(themeString: string): string | undefined;
 /**
  * Generate `count` visually distinct and theme-harmonious colors
  * by rotating hue evenly from the base accent, keeping saturation

package/dist/core/palette.js

@@ -70,6 +70,14 @@ function hslToHex(h, s, l) {
     const toHex = (v) => Math.round(v * 255).toString(16).padStart(2, '0');
     return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
+/**
+ * Extract the --dt-accent hex value from a theme CSS string.
+ * Returns undefined if not found.
+ */
+export function extractAccent(themeString) {
+    const m = themeString.match(/--dt-accent\s*:\s*(#[0-9a-fA-F]{3,8})/);
+    return m?.[1];
+}
 // ── Palette generation ──────────────────────────────────
 /**
  * Generate `count` visually distinct and theme-harmonious colors

package/dist/core/types.d.ts

@@ -22,3 +22,17 @@ export interface TimelineEvent {
     /** Arbitrary payload from the source app (bookings, attendees, etc.) */
     data?: Record<string, unknown>;
 }
+/**
+ * Represents a blocked/unavailable time slot on the calendar.
+ * Used to mark times when events cannot be created (e.g. lunch break, maintenance).
+ */
+export interface BlockedSlot {
+    /** ISO weekday (1=Mon … 7=Sun). If omitted, applies to all days. */
+    day?: number;
+    /** Start hour (0–24, decimals allowed: 12.5 = 12:30) */
+    start: number;
+    /** End hour (0–24, decimals allowed: 13.5 = 1:30 PM) */
+    end: number;
+    /** Optional label shown on the blocked region */
+    label?: string;
+}

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

@@ -1,20 +1,3 @@
-/**
- * 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 {

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

@@ -1,37 +1,50 @@
+/**
+ * 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 { SvelteMap } from 'svelte/reactivity';
 import { sod, DAY_MS } from '../core/time.js';
 /**
  * Create a reactive event store backed by a CalendarAdapter.
  */
 export function createEventStore(adapter) {
-    let events = $state([]);
+    let eventMap = new SvelteMap();
     let loading = $state(false);
     let error = $state(null);
+    // Derived array view of the map — consumers read this.
+    const eventArray = $derived([...eventMap.values()]);
     // ── 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;
+        if (eventMap.has(id)) {
+            eventMap.set(id, updated);
         }
     }
     function removeEvent(id) {
-        events = events.filter((e) => e.id !== id);
+        eventMap.delete(id);
     }
     function upsertEvent(ev) {
-        const idx = events.findIndex((e) => e.id === ev.id);
-        if (idx >= 0) {
-            events[idx] = ev;
-        }
-        else {
-            events.push(ev);
-        }
+        eventMap.set(ev.id, ev);
     }
     // ── Public API ──
     return {
         get events() {
-            return events;
+            return eventArray;
         },
         get loading() {
             return loading;
@@ -57,22 +70,22 @@ export function createEventStore(adapter) {
             }
         },
         forRange(start, end) {
-            return events.filter((ev) => overlaps(ev, start, end));
+            return eventArray.filter((ev) => overlaps(ev, start, end));
         },
         forDay(date) {
             const dayStart = new Date(sod(date.getTime()));
             const dayEnd = new Date(dayStart.getTime() + DAY_MS);
-            return events.filter((ev) => overlaps(ev, dayStart, dayEnd));
+            return eventArray.filter((ev) => overlaps(ev, dayStart, dayEnd));
         },
         byId(id) {
-            return events.find((e) => e.id === id);
+            return eventMap.get(id);
         },
         async add(eventData) {
             loading = true;
             error = null;
             try {
                 const created = await adapter.createEvent(eventData);
-                events.push(created);
+                upsertEvent(created);
                 return created;
             }
             catch (e) {

package/dist/engine/index.d.ts

@@ -1,7 +1,7 @@
 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, BuiltInViewId, ViewGranularity, } from './view-state.svelte.js';
+export type { ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewMode, } from './view-state.svelte.js';
 export { createSelection } from './selection.svelte.js';
 export type { Selection } from './selection.svelte.js';
 export { createDragState } from './drag.svelte.js';

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

@@ -10,31 +10,36 @@ export type BuiltInViewId = 'day-planner' | 'day-agenda' | 'week-planner' | 'wee
  * custom IDs like 'day-kanban', 'week-resource', etc.
  */
 export type CalendarViewId = string;
-export type ViewGranularity = 'day' | 'week';
+export type ViewMode = 'day' | 'week';
 export interface ViewStateOptions {
-    defaultView?: CalendarViewId;
+    view?: CalendarViewId;
     mondayStart?: boolean;
     /** IANA timezone string (e.g. 'America/New_York'). Defaults to local timezone. */
     timezone?: string;
     /** Initial date to focus on (defaults to today). */
     initialDate?: Date;
+    /** Number of days shown in week mode (default: 7). E.g. 3 for a 3-day view, 5 for workweek. */
+    dayCount?: number;
     /**
-     * Optional resolver for view granularity.
+     * Optional resolver for view mode.
      * Useful for custom IDs that don't follow "day-*" / "week-*" naming.
      */
-    granularityForView?: (viewId: CalendarViewId) => ViewGranularity | undefined;
+    modeForView?: (viewId: CalendarViewId) => ViewMode | undefined;
 }
 export interface ViewState {
     readonly view: CalendarViewId;
     readonly focusDate: Date;
     readonly range: DateRange;
-    readonly granularity: ViewGranularity;
+    readonly mode: ViewMode;
     readonly mondayStart: boolean;
     /** IANA timezone, or undefined for local */
     readonly timezone: string | undefined;
+    /** Number of days shown in week mode */
+    readonly dayCount: number;
     setView(id: CalendarViewId): void;
     setMondayStart(value: boolean): void;
     setFocusDate(date: Date): void;
+    setDayCount(n: number): void;
     next(): void;
     prev(): void;
     goToday(): void;

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

@@ -3,7 +3,7 @@
  * and navigation (prev/next/today).
  *
  * Usage:
- *   const vs = createViewState({ defaultView: 'week-terrain' });
+ *   const vs = createViewState({ view: 'week-terrain' });
  *   vs.view        — current view id
  *   vs.focusDate   — the center date
  *   vs.range       — { start, end } for the current view window
@@ -12,33 +12,43 @@
  *   vs.goToday()   — jump to today
  */
 import { startOfWeek as calcStartOfWeek, addDaysMs, DAY_MS } from '../core/time.js';
-function inferGranularity(view) {
+function inferMode(view) {
     if (view.startsWith('day'))
         return 'day';
     return 'week';
 }
-function computeRange(focus, granularity, mondayStart) {
-    if (granularity === 'day') {
+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);
         return { start, end };
     }
-    // week
-    const ws = calcStartOfWeek(focus.getTime(), mondayStart);
+    // week / custom period
+    if (dayCount === 7) {
+        const ws = calcStartOfWeek(focus.getTime(), mondayStart);
+        return {
+            start: new Date(ws),
+            end: new Date(addDaysMs(ws, 7)),
+        };
+    }
+    // Custom day count: start from sod of focus
+    const start = new Date(focus);
+    start.setHours(0, 0, 0, 0);
     return {
-        start: new Date(ws),
-        end: new Date(addDaysMs(ws, 7)),
+        start,
+        end: new Date(start.getTime() + dayCount * DAY_MS),
     };
 }
 export function createViewState(options = {}) {
-    let view = $state(options.defaultView ?? 'week-planner');
+    let view = $state(options.view ?? 'week-planner');
     let focusDate = $state(options.initialDate ?? new Date());
     let mondayStart = $state(options.mondayStart ?? true);
+    let dayCount = $state(options.dayCount ?? 7);
     const timezone = options.timezone;
-    const granularityResolver = options.granularityForView;
-    const granularity = $derived(granularityResolver?.(view) ?? inferGranularity(view));
-    const range = $derived(computeRange(focusDate, granularity, mondayStart));
+    const modeResolver = options.modeForView;
+    const mode = $derived(modeResolver?.(view) ?? inferMode(view));
+    const range = $derived(computeRange(focusDate, mode, mondayStart, dayCount));
     return {
         get view() {
             return view;
@@ -49,8 +59,8 @@ export function createViewState(options = {}) {
         get range() {
             return range;
         },
-        get granularity() {
-            return granularity;
+        get mode() {
+            return mode;
         },
         get mondayStart() {
             return mondayStart;
@@ -58,6 +68,9 @@ export function createViewState(options = {}) {
         get timezone() {
             return timezone;
         },
+        get dayCount() {
+            return dayCount;
+        },
         setView(id) {
             view = id;
         },
@@ -67,12 +80,15 @@ export function createViewState(options = {}) {
         setFocusDate(date) {
             focusDate = date;
         },
+        setDayCount(n) {
+            dayCount = n;
+        },
         next() {
-            const days = granularity === 'day' ? 1 : 7;
+            const days = mode === 'day' ? 1 : dayCount;
             focusDate = new Date(addDaysMs(focusDate.getTime(), days));
         },
         prev() {
-            const days = granularity === 'day' ? -1 : -7;
+            const days = mode === 'day' ? -1 : -dayCount;
             focusDate = new Date(addDaysMs(focusDate.getTime(), days));
         },
         goToday() {

package/dist/index.d.ts

@@ -1,12 +1,12 @@
-export { Planner, Agenda, AgendaDay, AgendaWeek, } from './views/index.js';
 export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './primitives/index.js';
 export { Calendar } 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, BuiltInViewId, ViewGranularity, Selection, DragState, DragMode, DragPayload, } from './engine/index.js';
+export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewMode, Selection, DragState, DragMode, DragPayload, } from './engine/index.js';
 export { createMemoryAdapter, createRestAdapter, createRecurringAdapter } from './adapters/index.js';
-export type { CalendarAdapter, DateRange, RestAdapterOptions, RecurringEvent, RecurringAdapterOptions, MemoryAdapterOptions, } 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, VIVID_PALETTE, isMultiDay, isAllDay, segmentForDay, } from './core/index.js';
-export type { Clock, TimelineEvent, DaySegment, CalendarLabels, } from './core/index.js';
-export { midnight, neutral, presets } from './theme/index.js';
-export type { PresetName } from './theme/index.js';
+export type { CalendarAdapter, DateRange, RestAdapterOptions, RecurringEvent, RecurringAdapterOptions, } 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, } from './core/index.js';
+export { auto, neutral, midnight, presets } from './theme/index.js';
+export { probeHostTheme, observeHostTheme } from './theme/index.js';
+export type { PresetName, AutoThemeOptions } from './theme/index.js';

package/dist/index.js

@@ -1,5 +1,3 @@
-// ─── Views ──────────────────────────────────────────────
-export { Planner, Agenda, AgendaDay, AgendaWeek, } from './views/index.js';
 // ─── Primitives ─────────────────────────────────────────
 export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './primitives/index.js';
 // ─── Calendar shell ─────────────────────────────────────
@@ -9,6 +7,7 @@ export { createEventStore, createViewState, createSelection, createDragState, }
 // ─── Adapters ───────────────────────────────────────────
 export { createMemoryAdapter, createRestAdapter, createRecurringAdapter } 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, VIVID_PALETTE, isMultiDay, isAllDay, segmentForDay, } from './core/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';
 // ─── Themes ─────────────────────────────────────────────
-export { midnight, neutral, presets } from './theme/index.js';
+export { auto, neutral, midnight, presets } from './theme/index.js';
+export { probeHostTheme, observeHostTheme } from './theme/index.js';