@nomideusz/svelte-calendar 0.6.0 → 0.6.4

package/dist/views/shared/context.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+import type { TimelineEvent, BlockedSlot } from '../../core/types.js';
+import type { DragState } from '../../engine/drag.svelte.js';
+import type { ViewState } from '../../engine/view-state.svelte.js';
+export interface CalendarContext {
+    readonly viewState: ViewState | undefined;
+    readonly drag: DragState | undefined;
+    readonly commitDrag: (() => void) | undefined;
+    readonly snapInterval: number;
+    readonly showNav: boolean;
+    readonly equalDays: boolean;
+    readonly showDates: boolean;
+    readonly hideDays: number[] | undefined;
+    readonly isMobile: boolean;
+    readonly autoHeight: boolean;
+    readonly compact: boolean;
+    readonly readOnly: boolean;
+    readonly blockedSlots: BlockedSlot[] | undefined;
+    readonly dayHeaderSnippet: Snippet<[{
+        date: Date;
+        isToday: boolean;
+        dayName: string;
+    }]> | undefined;
+    readonly minDuration: number | undefined;
+    readonly maxDuration: number | undefined;
+    readonly oneventhover: ((event: TimelineEvent) => void) | undefined;
+    readonly disabledDates: Date[] | undefined;
+    readonly disabledSet: Set<number>;
+    readonly loadRange: {
+        current: {
+            start: Date;
+            end: Date;
+        } | null;
+        set: (r: {
+            start: Date;
+            end: Date;
+        } | null) => void;
+    } | undefined;
+    readonly eventSnippet: Snippet<[TimelineEvent]> | undefined;
+    readonly emptySnippet: Snippet | undefined;
+}
+/**
+ * Read the calendar context.
+ * Call at component init time (top-level script).
+ * Returns an object with getters that delegate to the raw context.
+ */
+export declare function useCalendarContext(): CalendarContext;

package/dist/views/shared/context.svelte.js

@@ -0,0 +1,47 @@
+/**
+ * Shared context reader for calendar views.
+ *
+ * Calendar.svelte sets a single 'calendar' context with reactive getters.
+ * This module reads it and returns a typed interface for views.
+ */
+import { getContext } from 'svelte';
+import { sod } from '../../core/time.js';
+/**
+ * Read the calendar context.
+ * Call at component init time (top-level script).
+ * Returns an object with getters that delegate to the raw context.
+ */
+export function useCalendarContext() {
+    const raw = getContext('calendar');
+    return {
+        get viewState() { return raw?.viewState; },
+        get drag() { return raw?.drag; },
+        get commitDrag() { return raw?.commitDrag; },
+        get snapInterval() { return raw?.snapInterval ?? 15; },
+        get showNav() { return raw?.showNavigation ?? true; },
+        get equalDays() { return raw?.equalDays ?? false; },
+        get showDates() { return raw?.showDates ?? true; },
+        get hideDays() { return raw?.hideDays; },
+        get isMobile() { return raw?.mobile ?? false; },
+        get autoHeight() { return raw?.autoHeight ?? false; },
+        get compact() { return raw?.compact ?? false; },
+        get readOnly() { return raw?.readOnly ?? false; },
+        get blockedSlots() { return raw?.blockedSlots; },
+        get dayHeaderSnippet() { return raw?.dayHeaderSnippet; },
+        get minDuration() { return raw?.minDuration; },
+        get maxDuration() { return raw?.maxDuration; },
+        get oneventhover() { return raw?.oneventhover; },
+        get disabledDates() { return raw?.disabledDates; },
+        get disabledSet() { return new Set(raw?.disabledDates?.map(d => sod(d.getTime())) ?? []); },
+        get loadRange() {
+            if (!raw)
+                return undefined;
+            return {
+                get current() { return raw.loadRange; },
+                set: (r) => raw.setLoadRange(r),
+            };
+        },
+        get eventSnippet() { return raw?.eventSnippet; },
+        get emptySnippet() { return raw?.emptySnippet; },
+    };
+}

package/dist/views/shared/format.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared format helpers for agenda views.
+ * Extracted from duplicated code in AgendaDay and AgendaWeek.
+ */
+import type { TimelineEvent } from '../../core/types.js';
+export declare function fmtTime(d: Date, locale?: string): string;
+export declare function duration(ev: TimelineEvent): string;
+export declare function timeUntilMs(ms: number, now: number): string;
+export declare function progress(ev: TimelineEvent, now: number): number;
+/**
+ * Group overlapping events into time slots.
+ * Used by both AgendaDay and AgendaWeek.
+ */
+export interface TimeSlot {
+    startMs: number;
+    endMs: number;
+    events: TimelineEvent[];
+}
+export declare function groupIntoSlots(evts: TimelineEvent[]): TimeSlot[];

package/dist/views/shared/format.js

@@ -0,0 +1,46 @@
+import { fmtTime as _fmtTime, fmtDuration, getLabels } from '../../core/locale.js';
+export function fmtTime(d, locale) {
+    return _fmtTime(d, locale);
+}
+export function duration(ev) {
+    return fmtDuration(ev.start, ev.end);
+}
+export function timeUntilMs(ms, now) {
+    const L = getLabels();
+    const diff = ms - now;
+    if (diff <= 0)
+        return L.now;
+    const tMins = Math.floor(diff / 60000);
+    if (tMins < 60)
+        return `in ${tMins}m`;
+    const hrs = Math.floor(tMins / 60);
+    const rm = tMins % 60;
+    if (hrs < 24)
+        return rm > 0 ? `in ${hrs}h ${rm}m` : `in ${hrs}h`;
+    const days = Math.floor(hrs / 24);
+    return `in ${days}d`;
+}
+export function progress(ev, now) {
+    const s = ev.start.getTime();
+    const e = ev.end.getTime();
+    return Math.min(1, Math.max(0, (now - s) / (e - s)));
+}
+export function groupIntoSlots(evts) {
+    const sorted = [...evts].sort((a, b) => a.start.getTime() - b.start.getTime());
+    const slots = [];
+    for (const ev of sorted) {
+        const last = slots[slots.length - 1];
+        if (last && ev.start.getTime() < last.endMs) {
+            last.events.push(ev);
+            last.endMs = Math.max(last.endMs, ev.end.getTime());
+        }
+        else {
+            slots.push({
+                startMs: ev.start.getTime(),
+                endMs: ev.end.getTime(),
+                events: [ev],
+            });
+        }
+    }
+    return slots;
+}

package/dist/views/shared/index.d.ts

@@ -0,0 +1,4 @@
+export { useCalendarContext } from './context.svelte.js';
+export type { CalendarContext } from './context.svelte.js';
+export { fmtTime, duration, timeUntilMs, progress, groupIntoSlots } from './format.js';
+export type { TimeSlot } from './format.js';

package/dist/views/shared/index.js

@@ -0,0 +1,2 @@
+export { useCalendarContext } from './context.svelte.js';
+export { fmtTime, duration, timeUntilMs, progress, groupIntoSlots } from './format.js';

package/dist/widget/CalendarWidget.svelte

@@ -1,142 +1,142 @@
-<!--
-  CalendarWidget — self-contained calendar for embedding via <day-calendar> custom element.
-
-  Accepts simple HTML attributes and wires up the full Calendar with sensible defaults.
-  Designed for non-Svelte sites (plain HTML, WordPress, Squarespace, etc.).
-
-  Usage as custom element:
-    <day-calendar
-      api="https://myschool.com/api/events"
-      theme="neutral"
-      view="week-planner"
-      height="600"
-      locale="en-US"
-    ></day-calendar>
--->
-<script lang="ts">
-	import Calendar from '../calendar/Calendar.svelte';
-	import { createRestAdapter } from '../adapters/rest.js';
-	import { createMemoryAdapter } from '../adapters/memory.js';
-	import { presets } from '../theme/presets.js';
-	import type { PresetName } from '../theme/presets.js';
-	import type { TimelineEvent } from '../core/types.js';
-
-	interface Props {
-		/** REST API base URL — if provided, fetches events from this endpoint */
-		api?: string;
-		/** JSON string of events for static/inline data (alternative to api) */
-		events?: string;
-		/** Theme preset name: midnight, neutral */
-		theme?: string;
-		/** Default view ID */
-		view?: string;
-		/** Calendar height in pixels */
-		height?: string;
-		/** BCP 47 locale tag (e.g. 'en-US', 'pl-PL') */
-		locale?: string;
-		/** Text direction: ltr, rtl, auto */
-		dir?: string;
-		/** Start week on Monday (default: true) */
-		mondaystart?: string;
-		/** Custom HTTP headers as JSON string for REST adapter */
-		headers?: string;
-	}
-
-	let {
-		api,
-		events,
-		theme = 'neutral',
-		view = 'week-planner',
-		height = '600',
-		locale,
-		dir,
-		mondaystart = 'true',
-		headers,
-	}: Props = $props();
-
-	// ── Parse attributes ──
-	const heightPx = $derived(parseInt(height, 10) || 600);
-	const isMondayStart = $derived(mondaystart !== 'false');
-	const themeStyle = $derived(
-		(presets as Record<string, string>)[theme] || presets.neutral
-	);
-	const dirValue = $derived(
-		(dir === 'rtl' || dir === 'ltr' || dir === 'auto') ? dir as 'ltr' | 'rtl' | 'auto' : undefined
-	);
-
-	// ── Parse static events from JSON attribute ──
-	function parseHeaders(json?: string): Record<string, string> | undefined {
-		if (!json) return undefined;
-		try {
-			const parsed = JSON.parse(json) as Record<string, unknown>;
-			const out: Record<string, string> = {};
-			for (const [k, v] of Object.entries(parsed)) {
-				out[k] = String(v);
-			}
-			return out;
-		} catch {
-			console.warn('[day-calendar] Failed to parse headers JSON:', json);
-			return undefined;
-		}
-	}
-
-	function toEvent(raw: Record<string, unknown>, fallbackId: string): TimelineEvent | null {
-		const start = new Date(String(raw.start ?? ''));
-		const end = new Date(String(raw.end ?? ''));
-		if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime()) || end <= start) {
-			return null;
-		}
-		return {
-			id: String(raw.id ?? fallbackId),
-			title: String(raw.title ?? 'Untitled'),
-			start,
-			end,
-			color: raw.color ? String(raw.color) : undefined,
-		};
-	}
-
-	function parseEvents(json?: string): TimelineEvent[] {
-		if (!json) return [];
-		try {
-			const raw = JSON.parse(json) as Array<Record<string, unknown>>;
-			const parsed = raw
-				.map((e, idx) => toEvent(e, `inline-${idx}`))
-				.filter((ev): ev is TimelineEvent => ev !== null);
-			if (parsed.length !== raw.length) {
-				console.warn(`[day-calendar] Ignored ${raw.length - parsed.length} invalid event(s) from events JSON.`);
-			}
-			return parsed;
-		} catch {
-			console.warn('[day-calendar] Failed to parse events JSON:', json);
-			return [];
-		}
-	}
-
-	// ── Create adapter ──
-	const adapter = $derived.by(() => {
-		if (api) {
-			const parsedHeaders = parseHeaders(headers);
-			return createRestAdapter({
-				baseUrl: api,
-				headers: parsedHeaders,
-				mapEvents: (data: unknown) => {
-					const arr = Array.isArray(data) ? data : (data as Record<string, unknown>).events as unknown[] ?? [];
-					return arr
-						.map((e: unknown, idx) => toEvent(e as Record<string, unknown>, `api-${idx}`))
-						.filter((ev): ev is TimelineEvent => ev !== null);
-				},
-			});
-		}
-		return createMemoryAdapter(parseEvents(events));
-	});
-</script>
-
-<Calendar
-	{adapter}
-	{view}
-	theme={themeStyle}
-	height={heightPx}
-	mondayStart={isMondayStart}
-	dir={dirValue}
-	{locale}
-/>
+<!--
+  CalendarWidget — self-contained calendar for embedding via <day-calendar> custom element.
+
+  Accepts simple HTML attributes and wires up the full Calendar with sensible defaults.
+  Designed for non-Svelte sites (plain HTML, WordPress, Squarespace, etc.).
+
+  Usage as custom element:
+    <day-calendar
+      api="https://myschool.com/api/events"
+      theme="neutral"
+      view="week-planner"
+      height="600"
+      locale="en-US"
+    ></day-calendar>
+-->
+<script lang="ts">
+	import Calendar from '../calendar/Calendar.svelte';
+	import { createRestAdapter } from '../adapters/rest.js';
+	import { createMemoryAdapter } from '../adapters/memory.js';
+	import { presets } from '../theme/presets.js';
+	import type { PresetName } from '../theme/presets.js';
+	import type { TimelineEvent } from '../core/types.js';
+
+	interface Props {
+		/** REST API base URL — if provided, fetches events from this endpoint */
+		api?: string;
+		/** JSON string of events for static/inline data (alternative to api) */
+		events?: string;
+		/** Theme preset name: midnight, neutral */
+		theme?: string;
+		/** Default view ID */
+		view?: string;
+		/** Calendar height in pixels */
+		height?: string;
+		/** BCP 47 locale tag (e.g. 'en-US', 'pl-PL') */
+		locale?: string;
+		/** Text direction: ltr, rtl, auto */
+		dir?: string;
+		/** Start week on Monday (default: true) */
+		mondaystart?: string;
+		/** Custom HTTP headers as JSON string for REST adapter */
+		headers?: string;
+	}
+
+	let {
+		api,
+		events,
+		theme = 'neutral',
+		view = 'week-planner',
+		height = '600',
+		locale,
+		dir,
+		mondaystart = 'true',
+		headers,
+	}: Props = $props();
+
+	// ── Parse attributes ──
+	const heightPx = $derived(parseInt(height, 10) || 600);
+	const isMondayStart = $derived(mondaystart !== 'false');
+	const themeStyle = $derived(
+		(presets as Record<string, string>)[theme] || presets.neutral
+	);
+	const dirValue = $derived(
+		(dir === 'rtl' || dir === 'ltr' || dir === 'auto') ? dir as 'ltr' | 'rtl' | 'auto' : undefined
+	);
+
+	// ── Parse static events from JSON attribute ──
+	function parseHeaders(json?: string): Record<string, string> | undefined {
+		if (!json) return undefined;
+		try {
+			const parsed = JSON.parse(json) as Record<string, unknown>;
+			const out: Record<string, string> = {};
+			for (const [k, v] of Object.entries(parsed)) {
+				out[k] = String(v);
+			}
+			return out;
+		} catch {
+			console.warn('[day-calendar] Failed to parse headers JSON:', json);
+			return undefined;
+		}
+	}
+
+	function toEvent(raw: Record<string, unknown>, fallbackId: string): TimelineEvent | null {
+		const start = new Date(String(raw.start ?? ''));
+		const end = new Date(String(raw.end ?? ''));
+		if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime()) || end <= start) {
+			return null;
+		}
+		return {
+			id: String(raw.id ?? fallbackId),
+			title: String(raw.title ?? 'Untitled'),
+			start,
+			end,
+			color: raw.color ? String(raw.color) : undefined,
+		};
+	}
+
+	function parseEvents(json?: string): TimelineEvent[] {
+		if (!json) return [];
+		try {
+			const raw = JSON.parse(json) as Array<Record<string, unknown>>;
+			const parsed = raw
+				.map((e, idx) => toEvent(e, `inline-${idx}`))
+				.filter((ev): ev is TimelineEvent => ev !== null);
+			if (parsed.length !== raw.length) {
+				console.warn(`[day-calendar] Ignored ${raw.length - parsed.length} invalid event(s) from events JSON.`);
+			}
+			return parsed;
+		} catch {
+			console.warn('[day-calendar] Failed to parse events JSON:', json);
+			return [];
+		}
+	}
+
+	// ── Create adapter ──
+	const adapter = $derived.by(() => {
+		if (api) {
+			const parsedHeaders = parseHeaders(headers);
+			return createRestAdapter({
+				baseUrl: api,
+				headers: parsedHeaders,
+				mapEvents: (data: unknown) => {
+					const arr = Array.isArray(data) ? data : (data as Record<string, unknown>).events as unknown[] ?? [];
+					return arr
+						.map((e: unknown, idx) => toEvent(e as Record<string, unknown>, `api-${idx}`))
+						.filter((ev): ev is TimelineEvent => ev !== null);
+				},
+			});
+		}
+		return createMemoryAdapter(parseEvents(events));
+	});
+</script>
+
+<Calendar
+	{adapter}
+	{view}
+	theme={themeStyle}
+	height={heightPx}
+	mondayStart={isMondayStart}
+	dir={dirValue}
+	{locale}
+/>

package/package.json

@@ -1,72 +1,77 @@
 {
-	"name": "@nomideusz/svelte-calendar",
-	"version": "0.6.0",
-	"description": "A themeable Svelte 5 calendar with Day and Week views — Planner and Agenda.",
-	"type": "module",
-	"license": "MIT",
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js",
-			"default": "./dist/index.js"
-		},
-		"./widget": "./widget/widget.js"
-	},
-	"files": [
-		"dist",
-		"widget",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"package": "svelte-kit sync && svelte-package",
-		"build:widget": "vite build --config vite.config.widget.ts",
-		"prepublishOnly": "npm run package",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test": "vitest run",
-		"test:watch": "vitest"
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.50.2",
-		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"@types/node": "^22.0.0",
-		"@vercel/analytics": "^1.6.1",
-		"jsdom": "^28.1.0",
-		"marked": "^17.0.3",
-		"svelte": "^5.51.0",
-		"svelte-check": "^4.3.6",
-		"typescript": "^5.9.3",
-		"vite": "^7.3.1",
-		"vitest": "^4.0.18"
-	},
-	"dependencies": {
-		"date-fns": "^4.1.0",
-		"date-fns-tz": "^3.2.0"
-	},
-	"keywords": [
-		"svelte",
-		"calendar",
-		"scheduler",
-		"timeline",
-		"week",
-		"day",
-		"booking",
-		"svelte5"
-	],
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/nomideusz/svelte-calendar"
-	}
-}
+  "name": "@nomideusz/svelte-calendar",
+  "version": "0.6.4",
+  "description": "A themeable Svelte 5 calendar with Day and Week views — Planner and Agenda.",
+  "type": "module",
+  "license": "MIT",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./widget": "./widget/widget.js"
+  },
+  "files": [
+    "dist",
+    "widget",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0",
+    "@chenglou/pretext": "^0.0.4"
+  },
+  "peerDependenciesMeta": {
+    "@chenglou/pretext": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@chenglou/pretext": "^0.0.4",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.50.2",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@types/node": "^22.0.0",
+    "@vercel/analytics": "^1.6.1",
+    "jsdom": "^28.1.0",
+    "marked": "^17.0.3",
+    "svelte": "^5.51.0",
+    "svelte-check": "^4.3.6",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0"
+  },
+  "keywords": [
+    "svelte",
+    "calendar",
+    "scheduler",
+    "timeline",
+    "week",
+    "day",
+    "booking",
+    "svelte5"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nomideusz/svelte-calendar"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "package": "svelte-kit sync && svelte-package",
+    "build:widget": "vite build --config vite.config.widget.ts",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}