@nomideusz/svelte-calendar 0.6.9 → 0.7.1

package/dist/views/planner/PlannerWeek.svelte

@@ -10,6 +10,9 @@
 -->
 <script lang="ts">
 	import { onMount, tick, untrack } from 'svelte';
+	import { flip } from 'svelte/animate';
+	import { crossfade } from 'svelte/transition';
+	import { prefersReducedMotion } from 'svelte/motion';
 	import { useCalendarContext } from '../shared/context.svelte.js';
 	import { createClock } from '../../core/clock.svelte.js';
 	import type { TimelineEvent, BlockedSlot } from '../../core/types.js';
@@ -51,11 +54,15 @@
 
 	const ctx = useCalendarContext();
 	const clock = createClock();
+
+	// Drag ghost flies between day cells instead of teleporting.
+	// No fallback: without a counterpart (drag start/end) it appears/disappears instantly.
+	const ANIM = $derived(prefersReducedMotion.current ? 0 : 180);
+	const [previewSend, previewReceive] = crossfade({ duration: () => (prefersReducedMotion.current ? 0 : 160) });
 	const drag = $derived(ctx.drag);
 	const commitDragCtx = $derived(ctx.commitDrag);
 	const viewState = $derived(ctx.viewState);
 	const loadRangeCtx = $derived(ctx.loadRange);
-	const showNav = $derived(ctx.showNav);
 	const equalDays = $derived(ctx.equalDays);
 	const showDates = $derived(ctx.showDates);
 	const hideDays = $derived(ctx.hideDays);
@@ -79,7 +86,6 @@
 	let lastExternalMs = _initMs;
 
 	let el: HTMLDivElement;
-	let scrolled = $state(false);
 
 	function scrollWeekIntoContainer(targetMs?: number, behavior: ScrollBehavior = 'auto') {
 		if (!el) return;
@@ -231,24 +237,31 @@
 		if (ext !== lastExternalMs) {
 			lastExternalMs = ext;
 			internalFocusMs = ext;
-			tick().then(() => scrollWeekIntoContainer(ext, 'smooth'));
+			tick().then(() => scrollWeekIntoContainer(ext));
 		}
 	});
 
-	// ─── Scroll state ─────────────────────────────────────
-	function isCurrentWeekVisible(): boolean {
-		if (!el) return false;
-		const current = el.querySelector<HTMLElement>('.wg-week--current');
-		if (!current) return false;
-		const top = current.offsetTop - el.scrollTop;
-		const bottom = top + current.offsetHeight;
-		return bottom > 0 && top < el.clientHeight;
+	/** Push the week at the viewport centre to viewState (drives the header label + Today button). */
+	function syncFocusFromScroll() {
+		if (!el || !viewState) return;
+		const centerY = el.scrollTop + el.clientHeight / 2;
+		const rows = el.querySelectorAll<HTMLElement>('[data-week]');
+		for (const row of rows) {
+			if (row.offsetTop + row.offsetHeight >= centerY) {
+				const ms = Number(row.dataset.week);
+				if (Number.isFinite(ms) && ms !== lastExternalMs) {
+					lastExternalMs = ms;
+					viewState.setFocusDate(new Date(ms));
+				}
+				return;
+			}
+		}
 	}
 
 	let extending = false;
 
 	function handleUserScroll() {
-		scrolled = !isCurrentWeekVisible();
+		syncFocusFromScroll();
 		if (!el || extending) return;
 		// Extend buffer when user scrolls near the edge
 		if (el.scrollTop < EDGE_PX) {
@@ -268,16 +281,6 @@
 		}
 	}
 
-	function jumpToday() {
-		internalFocusMs = clock.today;
-		lastExternalMs = clock.today;
-		viewState?.goToday();
-		scrolled = false;
-		tick().then(() => {
-			scrollWeekIntoContainer(clock.today, 'smooth');
-		});
-	}
-
 	function handleDayCellClick(ms: number, e: Event) {
 		const target = e.target as HTMLElement;
 		if (target.closest('.wg-ev')) return;
@@ -317,17 +320,27 @@
 		return day.events.filter((ev) => ev.id !== dragPreviewEvent.id);
 	}
 
+	// Crossfade keys for the previews, snapshotted at render time. Transition
+	// params are evaluated lazily at unmount — after the drag payload is
+	// already null — so they must never read the reactive preview directly.
+	// Plain Map (not $state): written during render, read only by transitions.
+	const previewKeySnapshot = new Map<number | 'timed', string>();
+
 	function dragPreviewTimedForDay(dayMs: number): TimelineEvent | null {
 		const ev = dragPreviewEvent;
 		if (!ev || isAllDay(ev) || isMultiDay(ev)) return null;
 		const dayEnd = dayMs + DAY_MS;
-		return ev.start.getTime() < dayEnd && ev.end.getTime() > dayMs ? ev : null;
+		const hit = ev.start.getTime() < dayEnd && ev.end.getTime() > dayMs;
+		if (hit) previewKeySnapshot.set('timed', ev.id);
+		return hit ? ev : null;
 	}
 
 	function dragPreviewSegmentForDay(dayMs: number): DaySegment | null {
 		const ev = dragPreviewEvent;
 		if (!ev || (!isAllDay(ev) && !isMultiDay(ev))) return null;
-		return segmentForDay(ev, dayMs);
+		const seg = segmentForDay(ev, dayMs);
+		if (seg) previewKeySnapshot.set(dayMs, `${ev.id}:${seg.dayIndex}`);
+		return seg;
 	}
 
 	function getCellWidth(): number {
@@ -495,6 +508,9 @@
 									<div class="wg-allday">
 										{#each visibleAllDaySegments as seg (seg.ev.id)}
 											<div
+												animate:flip={{ duration: ANIM }}
+												in:previewReceive={{ key: `${seg.ev.id}:${seg.dayIndex}` }}
+												out:previewSend={{ key: `${seg.ev.id}:${seg.dayIndex}` }}
 												class="wg-ad"
 												class:wg-ad--start={seg.isStart}
 												class:wg-ad--end={seg.isEnd}
@@ -511,6 +527,8 @@
 											</div>
 										{/each}
 										{#if previewSegment}
+											<!-- key by event id + dayIndex: multi-day previews render one segment
+											     per cell, and each pairs with its own real-card counterpart -->
 											<div
 												class="wg-ad wg-ad--drag-preview"
 												class:wg-ad--start={previewSegment.isStart}
@@ -518,6 +536,8 @@
 												class:wg-ad--mid={!previewSegment.isStart && !previewSegment.isEnd}
 												style:--ev-color={previewSegment.ev.color ?? 'var(--dt-accent)'}
 												aria-hidden="true"
+												in:previewReceive={{ key: previewKeySnapshot.get(day.ms) ?? '' }}
+												out:previewSend={{ key: previewKeySnapshot.get(day.ms) ?? '' }}
 											>
 												{@render allDaySegmentContent(previewSegment)}
 											</div>
@@ -528,7 +548,12 @@
 								<!-- Timed events -->
 								<div class="wg-cell-events">
 									{#each visibleTimedEvents.slice(0, MAX_EVENTS_SHOWN) as ev (ev.id)}
+										<!-- send/receive keyed by event id pair the card with the drag ghost:
+										     drag start morphs card → ghost, drop morphs ghost → placed card -->
 										<div
+											animate:flip={{ duration: ANIM }}
+											in:previewReceive={{ key: ev.id }}
+											out:previewSend={{ key: ev.id }}
 											class="wg-ev"
 											class:wg-ev--selected={selectedEventId === ev.id}
 											class:wg-ev--current={ev.start.getTime() <= clock.tick && ev.end.getTime() > clock.tick}
@@ -554,6 +579,8 @@
 											class="wg-ev wg-ev--drag-preview"
 											style:--ev-color={previewTimedEvent.color ?? 'var(--dt-accent)'}
 											aria-hidden="true"
+											in:previewReceive={{ key: previewKeySnapshot.get('timed') ?? '' }}
+											out:previewSend={{ key: previewKeySnapshot.get('timed') ?? '' }}
 										>
 											{@render timedEventContent(previewTimedEvent)}
 										</div>
@@ -570,17 +597,6 @@
 		{/each}
 	</div>
 
-	{#if showNav && scrolled}
-		<nav class="wg-nav" aria-label={L.weekNavigation}>
-			<button
-				class="wg-nav-pill"
-				onclick={jumpToday}
-				aria-label={L.goToToday}
-			>
-				{L.today}
-			</button>
-		</nav>
-	{/if}
 </div>
 
 <style>
@@ -601,9 +617,8 @@
 		overflow-y: auto;
 		overflow-x: hidden;
 		box-sizing: border-box;
-		padding-top: 48px;
 		scrollbar-width: thin;
-		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.08)) transparent;
+		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
 	}
 	.wg--auto .wg-body { overflow-y: visible; }
 
@@ -624,7 +639,7 @@
 	}
 
 	.wg-week--current {
-		background: var(--dt-today-bg, rgba(239, 68, 68, 0.02));
+		background: var(--dt-today-bg, rgba(37, 99, 235, 0.04));
 		border: 2.5px solid var(--dt-accent, #2563eb);
 		box-shadow: 0 0 0 1px color-mix(in srgb, var(--dt-accent, #2563eb) 15%, transparent);
 	}
@@ -648,7 +663,7 @@
 		position: relative;
 		min-height: 170px;
 		padding: 4px 4px 8px;
-		border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.06));
+		border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		cursor: pointer;
 		transition: background 0.15s;
 	}
@@ -656,8 +671,8 @@
 	.wg-cell:last-child { border-right: none; }
 	.wg-cell:hover { background: var(--dt-hover, rgba(0, 0, 0, 0.015)); }
 
-	.wg-cell--today { background: var(--dt-today-bg, rgba(239, 68, 68, 0.03)); }
-	.wg-cell--today:hover { background: rgba(239, 68, 68, 0.05); }
+	.wg-cell--today { background: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
+	.wg-cell--today:hover { background: color-mix(in srgb, var(--dt-accent, #2563eb) 6%, transparent); }
 
 	/* Dim all cells by default; current week overrides to full brightness */
 	.wg-cell { opacity: 0.55; }
@@ -676,8 +691,8 @@
 			45deg,
 			transparent,
 			transparent 6px,
-			var(--dt-border, rgba(0, 0, 0, 0.06)) 6px,
-			var(--dt-border, rgba(0, 0, 0, 0.06)) 7px
+			var(--dt-border, rgba(0, 0, 0, 0.08)) 6px,
+			var(--dt-border, rgba(0, 0, 0, 0.08)) 7px
 		) !important;
 	}
 
@@ -690,8 +705,8 @@
 		border-radius: 3px;
 		background: repeating-linear-gradient(
 			-45deg,
-			color-mix(in srgb, var(--dt-text, rgba(0,0,0,0.85)) 4%, transparent),
-			color-mix(in srgb, var(--dt-text, rgba(0,0,0,0.85)) 4%, transparent) 3px,
+			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent),
+			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 3px,
 			transparent 3px,
 			transparent 6px
 		);
@@ -701,7 +716,7 @@
 
 	.wg-blocked-label {
 		font: 500 8px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.3));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 		white-space: nowrap;
@@ -726,11 +741,11 @@
 		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.04em;
 		text-transform: uppercase;
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.3));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 	}
 
 	.wg-week--current .wg-day-wd {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.5));
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 
 	.wg-cell-hd--today .wg-day-wd {
@@ -740,11 +755,11 @@
 
 	.wg-day-num {
 		font: 700 14px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
 	.wg-week--current .wg-day-num {
-		color: var(--dt-text, rgba(0, 0, 0, 0.95));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
 	.wg-day-num--today {
@@ -762,13 +777,13 @@
 		font: 800 22px / 1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.02em;
 		text-transform: uppercase;
-		color: color-mix(in srgb, var(--dt-text, rgba(255,255,255,0.85)) 4%, transparent);
+		color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent);
 		pointer-events: none;
 		white-space: nowrap;
 	}
 
 	.wg-week--current .wg-cell-month {
-		color: color-mix(in srgb, var(--dt-text, rgba(255,255,255,0.85)) 8%, transparent);
+		color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent);
 	}
 
 	/* ─── All-day / multi-day events ─────────────────── */
@@ -826,7 +841,7 @@
 
 	.wg-ad-title {
 		font: 500 10px / 1.1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -915,14 +930,14 @@
 
 	.wg-ev-time {
 		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.4));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		flex-shrink: 0;
 		white-space: nowrap;
 	}
 
 	.wg-ev-title {
 		font: 500 12px / 1.1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.85));
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -930,7 +945,7 @@
 
 	.wg-ev-loc {
 		font: 400 9px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.35));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -939,56 +954,13 @@
 
 	.wg-ev-more {
 		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.35));
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		padding: 2px 8px;
 		cursor: pointer;
 	}
 
 	.wg-ev-more:hover {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.55));
-	}
-
-	/* ─── Navigation pill ────────────────────────────── */
-	.wg-nav {
-		position: absolute;
-		top: 22px;
-		right: 14px;
-		z-index: 20;
-		display: flex;
-		gap: 2px;
-		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
-		backdrop-filter: blur(6px);
-		-webkit-backdrop-filter: blur(6px);
-		border-radius: 8px;
-		padding: 2px;
-		border: 1px solid var(--dt-border, rgba(148, 163, 184, 0.07));
-		animation: wg-nav-in 200ms ease both;
-	}
-	@keyframes wg-nav-in {
-		from { opacity: 0; transform: translateY(-6px); }
-		to   { opacity: 1; transform: translateY(0); }
-	}
-	.wg-nav-pill {
-		border: none;
-		background: transparent;
-		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
-		cursor: pointer;
-		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
-		padding: 6px 12px;
-		border-radius: 6px;
-		letter-spacing: 0.04em;
-		text-transform: uppercase;
-		transition: background 100ms, color 100ms;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-	}
-	.wg-nav-pill:hover {
-		color: var(--dt-text, rgba(226, 232, 240, 0.85));
-	}
-	.wg-nav-pill:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
-		outline-offset: 2px;
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 
 	/* ─── Focus-visible ──────────────────────────────── */

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

@@ -7,7 +7,6 @@ export interface CalendarContext {
     readonly drag: DragState | undefined;
     readonly commitDrag: (() => void) | undefined;
     readonly snapInterval: number;
-    readonly showNav: boolean;
     readonly equalDays: boolean;
     readonly showDates: boolean;
     readonly hideDays: number[] | undefined;

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

@@ -18,7 +18,6 @@ export function useCalendarContext() {
         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; },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nomideusz/svelte-calendar",
-	"version": "0.6.9",
+	"version": "0.7.1",
 	"description": "A themeable Svelte 5 calendar with Day and Week views — Planner and Agenda.",
 	"type": "module",
 	"license": "MIT",
@@ -34,8 +34,8 @@
 		"test:watch": "vitest"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0",
-		"@chenglou/pretext": "^0.0.5"
+		"@chenglou/pretext": "^0.0.5",
+		"svelte": "^5.0.0"
 	},
 	"peerDependenciesMeta": {
 		"@chenglou/pretext": {
@@ -44,22 +44,22 @@
 	},
 	"devDependencies": {
 		"@chenglou/pretext": "^0.0.5",
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.60.1",
-		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/kit": "^2.69.1",
+		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"@types/node": "^22.0.0",
+		"@types/node": "^22.20.0",
 		"@vercel/analytics": "^1.6.1",
-		"jsdom": "^29.0.0",
-		"marked": "^17.0.3",
-		"svelte": "^5.51.0",
-		"svelte-check": "^4.3.6",
+		"jsdom": "^29.1.1",
+		"marked": "^17.0.6",
+		"svelte": "^5.56.4",
+		"svelte-check": "^4.7.1",
 		"typescript": "^5.9.3",
-		"vite": "^7.3.5",
-		"vitest": "^4.1.0"
+		"vite": "^7.3.6",
+		"vitest": "^4.1.9"
 	},
 	"dependencies": {
-		"date-fns": "^4.1.0",
+		"date-fns": "^4.4.0",
 		"date-fns-tz": "^3.2.0"
 	},
 	"keywords": [