@nomideusz/svelte-calendar 0.2.3 → 0.3.1

package/README.md

@@ -13,6 +13,7 @@ Switching between Day and Week preserves the active concept.
 | **Timeline** | DayTimeline | — | Horizontal day timeline. Day-only. |
 | **Agenda** | Agenda `mode="day"` | Agenda `mode="week"` | List / feed — Done, Now, Next (day) or grouped-by-day scroll (week). |
 | **Heatmap** | — | WeekHeatmap | Density view — 24 cells per day showing busy/free intensity. Week-only. |
+| **Schedule** | — | WeekSchedule | Zero-config weekly schedule display. Single import convenience wrapper. |
 
 ## Installation
 
@@ -39,8 +40,16 @@ pnpm add @nomideusz/svelte-calendar
   import type { CalendarView, TimelineEvent } from '@nomideusz/svelte-calendar';
 
   const events: TimelineEvent[] = [
-    { id: '1', title: 'Yoga Flow', start: new Date('2025-03-01T09:00'), end: new Date('2025-03-01T10:00'), color: '#818cf8' },
-    { id: '2', title: 'Meditation', start: new Date('2025-03-01T12:00'), end: new Date('2025-03-01T12:45'), color: '#34d399' },
+    {
+      id: '1', title: 'Yoga Flow',
+      start: new Date('2025-03-01T09:00'), end: new Date('2025-03-01T10:00'),
+      color: '#818cf8', subtitle: 'With Anna', tags: ['Beginner'],
+    },
+    {
+      id: '2', title: 'Meditation',
+      start: new Date('2025-03-01T12:00'), end: new Date('2025-03-01T12:45'),
+      color: '#34d399',
+    },
   ];
 
   // Adapters provide the data layer (in-memory, REST, etc.)
@@ -67,6 +76,164 @@ pnpm add @nomideusz/svelte-calendar
 />
 ```
 
+## Recurring Weekly Schedules
+
+Define a weekly schedule once — the adapter auto-projects it onto whatever week the calendar is viewing. No manual date math needed.
+
+```svelte
+<script lang="ts">
+  import { Calendar, WeekGrid, createRecurringAdapter, neutral } from '@nomideusz/svelte-calendar';
+  import type { CalendarView, RecurringEvent } from '@nomideusz/svelte-calendar';
+
+  const schedule: RecurringEvent[] = [
+    { id: '1', title: 'Morning Yoga',  dayOfWeek: 1, startTime: '07:00', endTime: '08:30', color: '#818cf8' },
+    { id: '2', title: 'Pilates',       dayOfWeek: 3, startTime: '18:00', endTime: '19:00', color: '#f472b6' },
+    { id: '3', title: 'Sound Bath',    dayOfWeek: 5, startTime: '19:00', endTime: '20:00', color: '#2dd4bf', subtitle: 'Crystal bowls', tags: ['Relaxing'] },
+  ];
+
+  const adapter = createRecurringAdapter(schedule);
+  const views: CalendarView[] = [
+    { id: 'week-grid', label: 'Grid', granularity: 'week', component: WeekGrid },
+  ];
+</script>
+
+<Calendar {views} {adapter} defaultView="week-grid" theme={neutral} readOnly />
+```
+
+### RecurringEvent
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `id` | `string` | Unique identifier |
+| `title` | `string` | Event title |
+| `dayOfWeek` | `1–7` | ISO weekday (1 = Monday … 7 = Sunday) |
+| `startTime` | `string` | Start time in `"HH:MM"` format |
+| `endTime` | `string` | End time in `"HH:MM"` format |
+| `color` | `string?` | Accent color |
+| `subtitle` | `string?` | Subtitle (rendered below title) |
+| `tags` | `string[]?` | Tag pills |
+| `category` | `string?` | Category for grouping / colorMap |
+| `data` | `Record?` | Arbitrary payload |
+
+## WeekSchedule — Zero-Config Convenience
+
+One import, one component. Pre-wires adapter, views, and toolbar internally:
+
+```svelte
+<script>
+  import { WeekSchedule } from '@nomideusz/svelte-calendar';
+  import { neutral } from '@nomideusz/svelte-calendar';
+
+  const schedule = [
+    { id: '1', title: 'Yoga', dayOfWeek: 1, startTime: '07:00', endTime: '08:30', color: '#818cf8' },
+    { id: '2', title: 'Pilates', dayOfWeek: 3, startTime: '18:00', endTime: '19:00', color: '#f472b6' },
+  ];
+</script>
+
+<WeekSchedule {schedule} theme={neutral} locale="pl-PL" height={560} readOnly />
+```
+
+Works with concrete events too:
+
+```svelte
+<WeekSchedule events={myEvents} theme={neutral} height={560} />
+```
+
+## Read-Only Mode
+
+Pass `readOnly` to disable drag, resize, and click-to-create interactions:
+
+```svelte
+<Calendar {views} {adapter} readOnly />
+```
+
+In read-only mode:
+- Drag handles and resize affordances are disabled
+- Empty-slot creation clicks are suppressed
+- `oneventcreate` and `oneventmove` callbacks are not fired
+- `oneventclick` still works for navigation/display purposes
+
+## Visible Hours
+
+Crop the grid to relevant hours — no more scrolling past empty early morning / late night rows:
+
+```svelte
+<!-- Only show 6 AM to 9 PM -->
+<Calendar {views} {adapter} visibleHours={[6, 21]} />
+
+<!-- Works on WeekSchedule too -->
+<WeekSchedule {schedule} visibleHours={[7, 20]} />
+```
+
+The `visibleHours` prop is a `[startHour, endHour)` tuple. It applies to the WeekHeatmap grid cells and is passed through to all views.
+
+## Subtitle & Tags on Events
+
+`TimelineEvent` supports `subtitle` and `tags` fields — rendered automatically in **all views**:
+
+```ts
+const events: TimelineEvent[] = [
+  {
+    id: '1',
+    title: 'Power Vinyasa',
+    start: new Date('2025-03-01T10:00'),
+    end: new Date('2025-03-01T11:15'),
+    color: '#f472b6',
+    subtitle: 'With Marco',           // shown below the title
+    tags: ['Advanced', 'Hot'],         // rendered as small color pills
+  },
+];
+```
+
+- **subtitle** — secondary text below the title (all views: WeekGrid, DayGrid, DayTimeline, Agenda, EventBlock)
+- **tags** — accent-colored pills after the title (all views)
+- In space-constrained views (DayGrid, DayTimeline), subtitle/tags appear only when the event block is tall/wide enough
+
+## Color Map & Auto-Coloring
+
+Instead of setting `color` on every event, let the adapter assign colors by category or title:
+
+```ts
+// Explicit mapping
+const adapter = createMemoryAdapter(events, {
+  colorMap: {
+    yoga: '#818cf8',
+    wellness: '#34d399',
+  },
+});
+
+// Auto-assign from a built-in 15-color vivid palette
+const adapter = createMemoryAdapter(events, { autoColor: true });
+```
+
+### Theme-Aware Auto-Coloring
+
+Pass the theme's accent hex to `autoColor` and the palette is generated to harmonize with your theme — colors rotate via golden-angle hue spacing from the accent, with lightness adjusted for dark/light backgrounds:
+
+```ts
+// Harmonious palette seeded from indigo accent
+const adapter = createMemoryAdapter(events, { autoColor: '#6366f1' });
+
+// Works with the recurring adapter too
+const adapter = createRecurringAdapter(schedule, { autoColor: '#ef4444' });
+```
+
+| `autoColor` value | Behaviour |
+|---|---|
+| `true` | Original 15-color vivid palette (fixed, theme-independent) |
+| `'#ef4444'` | Golden-angle hue rotation from that accent; lightness adapted to dark/light |
+
+You can also use the palette generator directly:
+
+```ts
+import { generatePalette } from '@nomideusz/svelte-calendar';
+
+generatePalette('#6366f1', 8);  // 8 theme-harmonious hex colors
+generatePalette();               // default vivid 15-color palette
+```
+
+Both `createMemoryAdapter` and `createRecurringAdapter` accept `colorMap` and `autoColor` options. Events with an explicit `color` field always take priority.
+
 ## Settings Panel
 
 The `Settings` component provides a theme picker and dynamic fields for controlling view parameters:
@@ -254,10 +421,10 @@ const viewState = createViewState({
 src/lib/
 ├── core/          # Clock, time utils, locale, types
 ├── engine/        # Reactive state: event-store, view-state, selection, drag
-├── adapters/      # Data layer: memory adapter, REST adapter
+├── adapters/      # Data layer: memory, recurring, REST adapters
 ├── primitives/    # Low-level UI atoms: NowIndicator, EventBlock, TimeGutter...
 ├── calendar/      # Calendar shell, Toolbar
-├── views/         # View components (day/, week/, agenda/, settings/)
+├── views/         # View components (day/, week/, agenda/, schedule/, settings/)
 └── theme/         # Preset themes and token definitions
 ```
 
@@ -281,8 +448,9 @@ import {
 
 | Adapter | Use |
 |---------|-----|
-| `createMemoryAdapter(events)` | In-memory — great for demos and prototyping |
-| `createRestAdapter(options)` | Fetch from a REST API with configurable endpoints |
+| `createMemoryAdapter(events, options?)` | In-memory — great for demos and prototyping. Supports `colorMap` and `autoColor` (including theme-aware). |
+| `createRecurringAdapter(schedule, options?)` | Weekly recurring schedules — auto-projects onto viewed weeks. Read-only. Supports `colorMap` and `autoColor`. |
+| `createRestAdapter(options)` | Fetch from a REST API with configurable endpoints. |
 
 ## Standalone Views
 
@@ -302,6 +470,65 @@ Each view works independently without the Calendar shell:
 <WeekHeatmap style={parchment} events={events} height={320} />
 ```
 
+## Embeddable Widget
+
+Drop a single `<script>` tag into **any** HTML page — no Svelte, no build tools, no npm needed.
+
+### From CDN
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@nomideusz/svelte-calendar/widget/widget.js"></script>
+
+<day-calendar
+  api="https://myschool.com/api/events"
+  theme="neutral"
+  height="600"
+></day-calendar>
+```
+
+That's it. Two lines.
+
+### With inline events (no API)
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@nomideusz/svelte-calendar/widget/widget.js"></script>
+
+<day-calendar
+  theme="midnight"
+  height="500"
+  events='[
+    { "id": "1", "title": "Yoga Flow", "start": "2025-03-01T09:00", "end": "2025-03-01T10:00", "color": "#818cf8" },
+    { "id": "2", "title": "Meditation", "start": "2025-03-01T12:00", "end": "2025-03-01T12:45", "color": "#34d399" }
+  ]'
+></day-calendar>
+```
+
+### Widget attributes
+
+| Attribute | Default | Description |
+|-----------|---------|-------------|
+| `api` | — | REST API base URL — fetches from `{api}/events?start=...&end=...` |
+| `events` | — | JSON string of events (alternative to `api`) |
+| `theme` | `neutral` | Preset: `midnight`, `parchment`, `indigo`, `neutral`, `bare` |
+| `view` | `week-grid` | Default view: `day-grid`, `week-grid`, `day-timeline`, `day-agenda`, `week-agenda`, `week-heatmap` |
+| `height` | `600` | Height in pixels |
+| `locale` | — | BCP 47 locale (`en-US`, `pl-PL`, `ar-SA`, etc.) |
+| `dir` | — | Text direction: `ltr`, `rtl`, `auto` |
+| `mondaystart` | `true` | Start week on Monday (`true`/`false`) |
+| `headers` | — | JSON string of HTTP headers for the REST adapter |
+
+### REST API contract
+
+When using the `api` attribute, the widget expects your endpoint to accept:
+
+```
+GET {api}/events?start={ISO}&end={ISO}
+```
+
+And return either:
+- `[{ id, title, start, end, color? }, ...]`
+- `{ events: [{ id, title, start, end, color? }, ...] }`
+
 ## Development
 
 ```bash
@@ -309,6 +536,7 @@ pnpm install
 pnpm dev             # SvelteKit dev server (demo app)
 pnpm check           # Type check
 pnpm run package     # Build the library into dist/
+pnpm run build:widget # Build standalone widget.js
 ```
 
 ## License

package/dist/adapters/index.d.ts

@@ -1,4 +1,7 @@
 export type { CalendarAdapter, DateRange } from './types.js';
 export { createMemoryAdapter } from './memory.js';
+export type { MemoryAdapterOptions } from './memory.js';
 export { createRestAdapter } from './rest.js';
 export type { RestAdapterOptions } from './rest.js';
+export { createRecurringAdapter } from './recurring.js';
+export type { RecurringEvent, RecurringAdapterOptions } from './recurring.js';

package/dist/adapters/index.js

@@ -1,2 +1,3 @@
 export { createMemoryAdapter } from './memory.js';
 export { createRestAdapter } from './rest.js';
+export { createRecurringAdapter } from './recurring.js';

package/dist/adapters/memory.d.ts

@@ -11,4 +11,15 @@
  */
 import type { TimelineEvent } from '../core/types.js';
 import type { CalendarAdapter } from './types.js';
-export declare function createMemoryAdapter(initial?: TimelineEvent[]): CalendarAdapter;
+export interface MemoryAdapterOptions {
+    /** Map of category/title to color */
+    colorMap?: Record<string, string>;
+    /**
+     * Auto-assign colors to events by category or title.
+     *   true    → use the default vivid palette
+     *   string  → hex accent color (e.g. '#6366f1') to generate a
+     *             theme-harmonious palette via golden-angle hue rotation
+     */
+    autoColor?: boolean | string;
+}
+export declare function createMemoryAdapter(initial?: TimelineEvent[], options?: MemoryAdapterOptions): CalendarAdapter;

package/dist/adapters/memory.js

@@ -1,27 +1,61 @@
+import { generatePalette, VIVID_PALETTE } from '../core/palette.js';
 let counter = 0;
 function uid() {
     return `mem-${Date.now()}-${++counter}`;
 }
-export function createMemoryAdapter(initial = []) {
+/** Default palette for auto-coloring */
+const AUTO_COLORS = VIVID_PALETTE;
+export function createMemoryAdapter(initial = [], options = {}) {
+    const { colorMap, autoColor } = options;
     const events = [...initial];
+    // Resolve palette: vivid default or theme-aware
+    const palette = autoColor
+        ? typeof autoColor === 'string'
+            ? generatePalette(autoColor)
+            : AUTO_COLORS
+        : AUTO_COLORS;
+    // Build auto-color assignments
+    const colorAssignments = new Map();
+    let colorIndex = 0;
+    function resolveColor(ev) {
+        if (ev.color)
+            return ev.color;
+        if (!colorMap && !autoColor)
+            return undefined;
+        const key = ev.category ?? ev.title;
+        if (colorMap?.[key])
+            return colorMap[key];
+        if (autoColor) {
+            if (!colorAssignments.has(key)) {
+                colorAssignments.set(key, palette[colorIndex % palette.length]);
+                colorIndex++;
+            }
+            return colorAssignments.get(key);
+        }
+        return undefined;
+    }
+    function withColor(ev) {
+        const color = resolveColor(ev);
+        return color ? { ...ev, color } : ev;
+    }
     function overlaps(ev, range) {
         return ev.start < range.end && ev.end > range.start;
     }
     return {
         async fetchEvents(range) {
-            return events.filter((ev) => overlaps(ev, range));
+            return events.filter((ev) => overlaps(ev, range)).map(withColor);
         },
         async createEvent(data) {
             const ev = { ...data, id: uid() };
             events.push(ev);
-            return ev;
+            return withColor(ev);
         },
         async updateEvent(id, patch) {
             const idx = events.findIndex((e) => e.id === id);
             if (idx < 0)
                 throw new Error(`Event not found: ${id}`);
             events[idx] = { ...events[idx], ...patch, id };
-            return events[idx];
+            return withColor(events[idx]);
         },
         async deleteEvent(id) {
             const idx = events.findIndex((e) => e.id === id);

package/dist/adapters/recurring.d.ts

@@ -0,0 +1,44 @@
+import type { CalendarAdapter } from './types.js';
+/**
+ * A weekly recurring event definition.
+ */
+export interface RecurringEvent {
+    id: string;
+    title: string;
+    /** ISO weekday: 1 = Monday … 7 = Sunday */
+    dayOfWeek: number;
+    /** Start time in "HH:MM" 24-hour format */
+    startTime: string;
+    /** End time in "HH:MM" 24-hour format */
+    endTime: string;
+    /** Accent color */
+    color?: string;
+    /** Optional subtitle displayed below the title */
+    subtitle?: string;
+    /** Optional tags displayed as small pills */
+    tags?: string[];
+    /** Category for grouping */
+    category?: string;
+    /** Arbitrary payload */
+    data?: Record<string, unknown>;
+}
+export interface RecurringAdapterOptions {
+    /** Start weeks on Monday (default: true) */
+    mondayStart?: boolean;
+    /** Map of category/title to color */
+    colorMap?: Record<string, string>;
+    /**
+     * Auto-assign colors to events by category or title.
+     *   true    → use the default vivid palette
+     *   string  → hex accent color (e.g. '#6366f1') to generate a
+     *             theme-harmonious palette via golden-angle hue rotation
+     */
+    autoColor?: boolean | string;
+}
+/**
+ * Create a CalendarAdapter that projects recurring weekly events
+ * onto concrete dates for whatever range the calendar requests.
+ *
+ * Read-only by default — create/update/delete throw unless custom handlers are provided.
+ */
+export declare function createRecurringAdapter(schedule: RecurringEvent[], options?: RecurringAdapterOptions): CalendarAdapter;

package/dist/adapters/recurring.js

@@ -0,0 +1,120 @@
+import { startOfWeek } from '../core/time.js';
+import { DAY_MS } from '../core/time.js';
+import { generatePalette, VIVID_PALETTE } from '../core/palette.js';
+/** Parse "HH:MM" into [hours, minutes] */
+function parseTime(time) {
+    const [h, m] = time.split(':').map(Number);
+    return [h, m ?? 0];
+}
+/**
+ * Convert ISO weekday (1=Mon…7=Sun) to JS Date weekday offset from Monday.
+ * Monday = 0, Tuesday = 1, … Sunday = 6
+ */
+function isoWeekdayToOffset(dayOfWeek) {
+    return dayOfWeek - 1; // 1→0, 2→1, …, 7→6
+}
+/**
+ * Project a recurring event onto a specific week, returning a concrete TimelineEvent.
+ */
+function projectToWeek(rec, weekStartMs, weekIndex) {
+    const dayOffset = isoWeekdayToOffset(rec.dayOfWeek);
+    const dayMs = weekStartMs + dayOffset * DAY_MS;
+    const dayDate = new Date(dayMs);
+    const [sh, sm] = parseTime(rec.startTime);
+    const [eh, em] = parseTime(rec.endTime);
+    const start = new Date(dayDate.getFullYear(), dayDate.getMonth(), dayDate.getDate(), sh, sm);
+    const end = new Date(dayDate.getFullYear(), dayDate.getMonth(), dayDate.getDate(), eh, em);
+    return {
+        id: `${rec.id}--w${weekIndex}--d${rec.dayOfWeek}`,
+        title: rec.title,
+        start,
+        end,
+        color: rec.color,
+        category: rec.category,
+        data: {
+            ...rec.data,
+            recurringId: rec.id,
+            ...(rec.subtitle ? { subtitle: rec.subtitle } : {}),
+            ...(rec.tags ? { tags: rec.tags } : {}),
+        },
+    };
+}
+/**
+ * Find all weeks that overlap a given date range.
+ * Returns an array of { weekStartMs, weekIndex } objects.
+ */
+function getOverlappingWeeks(range, mondayStart) {
+    const weeks = [];
+    let cursor = startOfWeek(range.start.getTime(), mondayStart);
+    let index = 0;
+    while (cursor < range.end.getTime()) {
+        weeks.push({ weekStartMs: cursor, weekIndex: index });
+        cursor += 7 * DAY_MS;
+        index++;
+    }
+    return weeks;
+}
+/** Default palette for auto-coloring */
+const AUTO_COLORS = VIVID_PALETTE;
+/**
+ * Create a CalendarAdapter that projects recurring weekly events
+ * onto concrete dates for whatever range the calendar requests.
+ *
+ * Read-only by default — create/update/delete throw unless custom handlers are provided.
+ */
+export function createRecurringAdapter(schedule, options = {}) {
+    const { mondayStart = true, colorMap, autoColor } = options;
+    // Resolve palette: vivid default or theme-aware
+    const palette = autoColor
+        ? typeof autoColor === 'string'
+            ? generatePalette(autoColor)
+            : AUTO_COLORS
+        : AUTO_COLORS;
+    // Build auto-color assignments
+    const colorAssignments = new Map();
+    if (autoColor || colorMap) {
+        let colorIndex = 0;
+        for (const rec of schedule) {
+            const key = rec.category ?? rec.title;
+            if (colorMap?.[key]) {
+                colorAssignments.set(key, colorMap[key]);
+            }
+            else if (autoColor && !colorAssignments.has(key)) {
+                colorAssignments.set(key, palette[colorIndex % palette.length]);
+                colorIndex++;
+            }
+        }
+    }
+    function resolveColor(rec) {
+        if (rec.color)
+            return rec.color;
+        const key = rec.category ?? rec.title;
+        return colorAssignments.get(key);
+    }
+    return {
+        async fetchEvents(range) {
+            const weeks = getOverlappingWeeks(range, mondayStart);
+            const events = [];
+            for (const { weekStartMs, weekIndex } of weeks) {
+                for (const rec of schedule) {
+                    const coloredRec = { ...rec, color: resolveColor(rec) };
+                    const ev = projectToWeek(coloredRec, weekStartMs, weekIndex);
+                    // Only include if the event overlaps the requested range
+                    if (ev.start < range.end && ev.end > range.start) {
+                        events.push(ev);
+                    }
+                }
+            }
+            return events;
+        },
+        async createEvent() {
+            throw new Error('createRecurringAdapter is read-only. Use a memory or REST adapter for mutations.');
+        },
+        async updateEvent() {
+            throw new Error('createRecurringAdapter is read-only. Use a memory or REST adapter for mutations.');
+        },
+        async deleteEvent() {
+            throw new Error('createRecurringAdapter is read-only. Use a memory or REST adapter for mutations.');
+        },
+    };
+}

package/dist/calendar/Calendar.svelte

@@ -63,6 +63,10 @@
 		dir?: 'ltr' | 'rtl' | 'auto';
 		/** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */
 		locale?: string;
+		/** Read-only mode: disables drag, resize, empty-slot creation */
+		readOnly?: boolean;
+		/** Visible hour range: [startHour, endHour). Crops the grid to these hours. */
+		visibleHours?: [number, number];
 
 		// ── Callbacks ──
 		oneventclick?: (event: TimelineEvent) => void;
@@ -81,11 +85,17 @@
 		links = [],
 		dir,
 		locale,
+		readOnly = false,
+		visibleHours,
 		oneventclick,
 		oneventcreate,
 		oneventmove,
 	}: Props = $props();
 
+	// In readOnly mode, suppress mutation callbacks
+	const effectiveCreate = $derived(readOnly ? undefined : oneventcreate);
+	const effectiveMove = $derived(readOnly ? undefined : oneventmove);
+
 	import { setDefaultLocale } from '../core/locale.js';
 
 	// ── Set locale when provided ──
@@ -105,6 +115,7 @@
 	// ── Drag commit handler ──
 	// Views call this on pointer-up to process drag results.
 	function commitDrag(): void {
+		if (readOnly) { drag.cancel(); return; }
 		const mode = drag.mode;
 		const payload = drag.commit();
 		if (!payload) return;
@@ -112,9 +123,9 @@
 		if ((mode === 'move' || mode === 'resize-start' || mode === 'resize-end') && payload.eventId) {
 			store.move(payload.eventId, payload.start, payload.end);
 			const ev = store.byId(payload.eventId);
-			if (ev) oneventmove?.(ev, payload.start, payload.end);
+			if (ev) effectiveMove?.(ev, payload.start, payload.end);
 		} else if (mode === 'create') {
-			oneventcreate?.({ start: payload.start, end: payload.end });
+			effectiveCreate?.({ start: payload.start, end: payload.end });
 		}
 	}
 
@@ -130,9 +141,11 @@
 	// always see the latest callback references.
 	setContext('calendar:callbacks', {
 		get oneventclick() { return oneventclick; },
-		get oneventcreate() { return oneventcreate; },
-		get oneventmove() { return oneventmove; },
+		get oneventcreate() { return effectiveCreate; },
+		get oneventmove() { return effectiveMove; },
 	});
+	setContext('calendar:readOnly', { get current() { return readOnly; } });
+	setContext('calendar:visibleHours', { get current() { return visibleHours; } });
 
 	// ── Load events when range changes ──
 	$effect(() => {
@@ -170,7 +183,9 @@
 				mondayStart={viewState.mondayStart}
 				focusDate={viewState.focusDate}
 				oneventclick={oneventclick}
-				oneventcreate={oneventcreate}
+				oneventcreate={effectiveCreate}
+				readOnly={readOnly}
+				visibleHours={visibleHours}
 				selectedEventId={selection.selectedId}
 				{...activeView.props ?? {}}
 			/>

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

@@ -37,6 +37,10 @@ interface Props {
     dir?: 'ltr' | 'rtl' | 'auto';
     /** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */
     locale?: string;
+    /** Read-only mode: disables drag, resize, empty-slot creation */
+    readOnly?: boolean;
+    /** Visible hour range: [startHour, endHour). Crops the grid to these hours. */
+    visibleHours?: [number, number];
     oneventclick?: (event: TimelineEvent) => void;
     oneventcreate?: (range: {
         start: Date;

package/dist/core/index.d.ts

@@ -5,3 +5,4 @@ export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, weekdayShort,
 export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 export type { TimelineEvent, WeekTimelineProps, DayTimelineProps, } from './types.js';
 export { timeToX } from './types.js';
+export { generatePalette, VIVID_PALETTE } from './palette.js';

package/dist/core/index.js

@@ -8,3 +8,5 @@ export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, weekdayShort,
 // Timezone utilities
 export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 export { timeToX } from './types.js';
+// Palette
+export { generatePalette, VIVID_PALETTE } from './palette.js';

package/dist/core/palette.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Smart auto-color palette generator.
+ *
+ * Given a base accent hex (e.g. from `--dt-accent`), generates a
+ * palette of perceptually distinct colors that harmonize with the theme.
+ *
+ * Usage:
+ *   generatePalette('#ef4444', 8)  // 8 theme-harmonious colors
+ *   generatePalette(undefined, 8)  // falls back to the vivid default
+ */
+export declare const VIVID_PALETTE: string[];
+/**
+ * Generate `count` visually distinct and theme-harmonious colors
+ * by rotating hue evenly from the base accent, keeping saturation
+ * and lightness within a pleasant range.
+ *
+ * Dark themes (l < 0.5): bump lightness to 0.55–0.65 so colors pop on dark bg.
+ * Light themes (l ≥ 0.5): pull lightness to 0.38–0.48 so colors read on light bg.
+ *
+ * @param accent  Hex color string (e.g. '#ef4444'). If undefined, returns VIVID_PALETTE.
+ * @param count   Number of colors to generate (default: 15).
+ */
+export declare function generatePalette(accent?: string, count?: number): string[];