@nomideusz/svelte-calendar 0.7.5 → 0.9.0

package/dist/views/planner/PlannerWeek.svelte

@@ -8,413 +8,298 @@
   • Events are clean horizontal bars with colour fill, "9AM- 10AM Title" inline.
   • Generous whitespace, thin dividers, minimal chrome.
 -->
-<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';
-	import type { DragState } from '../../engine/drag.svelte.js';
-	import type { ViewState } from '../../engine/view-state.svelte.js';
-	import { DAY_MS, HOUR_MS, sod } from '../../core/time.js';
-	import { startOfWeek as sowFn, fractionalHour, isAllDay, isMultiDay, segmentForDay } from '../../core/time.js';
-	import type { DaySegment } from '../../core/time.js';
-	import { weekdayShort, monthLong, fmtTime as _fmtTime, getLabels } from '../../core/locale.js';
-
-	const L = $derived(getLabels());
-
-	interface Props {
-		mondayStart?: boolean;
-		locale?: string;
-		height?: number | null;
-		events?: TimelineEvent[];
-		style?: string;
-		focusDate?: Date;
-		oneventclick?: (event: TimelineEvent) => void;
-		oneventcreate?: (range: { start: Date; end: Date }) => void;
-		selectedEventId?: string | null;
-		readOnly?: boolean;
-		[key: string]: unknown;
-	}
-
-	let {
-		mondayStart = true,
-		locale,
-		height = 520,
-		events = [],
-		style = '',
-		focusDate,
-		oneventclick,
-		oneventcreate,
-		selectedEventId = null,
-		readOnly = false,
-	}: Props = $props();
-
-	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 equalDays = $derived(ctx.equalDays);
-	const showDates = $derived(ctx.showDates);
-	const hideDays = $derived(ctx.hideDays);
-	const blockedSlots = $derived(ctx.blockedSlots);
-	const dayHeaderSnippet = $derived(ctx.dayHeaderSnippet);
-	const minDuration = $derived(ctx.minDuration);
-	const autoHeight = $derived(ctx.autoHeight);
-	const oneventhover = $derived(ctx.oneventhover);
-	const disabledSet = $derived(ctx.disabledSet);
-
-	// ─── Buffer config ─────────────────────────────
-	const INITIAL_BUFFER = 52;   // ±1 year on load
-	const EXTEND_BY = 26;        // +6 months when user hits edge
-	const EDGE_PX = 200;         // extend when this close to scroll edge
-	let bufferBefore = $state(INITIAL_BUFFER);
-	let bufferAfter = $state(INITIAL_BUFFER);
-	const MAX_EVENTS_SHOWN = 5;
-
-	const _initMs = untrack(() => sod(focusDate?.getTime() ?? Date.now()));
-	let internalFocusMs = $state(_initMs);
-	let lastExternalMs = _initMs;
-
-	let el: HTMLDivElement;
-
-	function scrollWeekIntoContainer(targetMs?: number, behavior: ScrollBehavior = 'auto') {
-		if (!el) return;
-		let target: HTMLElement | null = null;
-		if (targetMs !== undefined) {
-			// Find the week row containing this date
-			const rows = el.querySelectorAll<HTMLElement>('[data-week]');
-			for (const row of rows) {
-				const weekMs = Number(row.dataset.week);
-				if (weekMs <= targetMs && targetMs < weekMs + customDays * DAY_MS) {
-					target = row;
-					break;
-				}
-			}
-		}
-		// Fall back to current week
-		if (!target) target = el.querySelector<HTMLElement>('.wg-week--current');
-		if (!target) return;
-		const targetTop = target.offsetTop - (el.clientHeight - target.offsetHeight) / 2;
-		el.scrollTo({ top: Math.max(0, targetTop), behavior });
-	}
-
-	// ─── Derived ────────────────────────────────────────
-	const todayMs = $derived(clock.today);
-	const customDays = $derived(viewState?.dayCount ?? 7);
-	const anchorPeriodStart = $derived(
-		customDays === 7
-			? sowFn(internalFocusMs, mondayStart)
-			: sod(internalFocusMs)
-	);
-
-	// ─── Declare load range for entire visible buffer ────────
-	// Instead of calling store.load() directly, we tell Calendar
-	// what range we need. Calendar's single $effect handles loading.
-	$effect(() => {
-		if (!loadRangeCtx) return;
-		const rangeStart = new Date(anchorPeriodStart - bufferBefore * customDays * DAY_MS);
-		const rangeEnd = new Date(anchorPeriodStart + (bufferAfter + 1) * customDays * DAY_MS);
-		loadRangeCtx.set({ start: rangeStart, end: rangeEnd });
-		return () => loadRangeCtx.set(null);
-	});
-
-	// ─── Week data ──────────────────────────────────────
-	interface WeekRow {
-		weekStart: number;
-		isCurrent: boolean;
-		monthLabel: string | null;
-		days: DayCell[];
-	}
-
-	interface DayCell {
-		ms: number;
-		dayNum: number;
-		isToday: boolean;
-		isPast: boolean;
-		isWeekend: boolean;
-		isFirstOfMonth: boolean;
-		monthLabel: string | null;
-		events: TimelineEvent[];
-		/** All-day or multi-day event segments for this day */
-		allDaySegments: DaySegment[];
-	}
-
-	const weeks = $derived.by(() => {
-		const result: WeekRow[] = [];
-
-		for (let w = -bufferBefore; w <= bufferAfter; w++) {
-			const periodStart = anchorPeriodStart + w * customDays * DAY_MS;
-			const isCurrent = todayMs >= periodStart && todayMs < periodStart + customDays * DAY_MS;
-			const days: DayCell[] = [];
-
-			for (let d = 0; d < customDays; d++) {
-				const ms = periodStart + d * DAY_MS;
-				const date = new Date(ms);
-				const dayNum = date.getDate();
-				const dow = date.getDay();
-				const isWeekend = dow === 0 || dow === 6;
-				const isToday = ms === todayMs;
-				const isPast = equalDays ? false : ms < todayMs;
-				const isFirstOfMonth = dayNum === 1;
-				const monthLabel = (d === 0 || isFirstOfMonth)
-					? monthLong(ms, locale).toUpperCase()
-					: null;
-
-				const dayEnd = ms + DAY_MS;
-				const dayEventsAll = events
-					.filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > ms)
-					.sort((a, b) => a.start.getTime() - b.start.getTime());
-
-				// Separate all-day / multi-day from timed events
-				const timedEvents: TimelineEvent[] = [];
-				const allDaySegments: DaySegment[] = [];
-				for (const ev of dayEventsAll) {
-					if (isAllDay(ev) || isMultiDay(ev)) {
-						const seg = segmentForDay(ev, ms);
-						if (seg) allDaySegments.push(seg);
-					} else {
-						timedEvents.push(ev);
-					}
-				}
-
-				days.push({ ms, dayNum, isToday, isPast, isWeekend, isFirstOfMonth, monthLabel, events: timedEvents, allDaySegments });
-			}
-
-			// Month label: show when first day of period is day 1-7 (for 7-day), or first day of period (for custom)
-			const startDate = new Date(periodStart);
-			const showMonth = customDays === 7 ? startDate.getDate() <= 7 : startDate.getDate() <= customDays;
-			const monthLabel = showMonth ? monthLong(periodStart, locale).toUpperCase() : null;
-
-			result.push({ weekStart: periodStart, isCurrent, monthLabel, days });
-		}
-
-		// Filter hidden days if hideDays is set
-		if (hideDays?.length) {
-			for (const row of result) {
-				row.days = row.days.filter((d) => {
-					const isoDay = new Date(d.ms).getDay();
-					// Convert JS day (0=Sun) to ISO (7=Sun)
-					const iso = isoDay === 0 ? 7 : isoDay;
-					return !hideDays.includes(iso);
-				});
-			}
-		}
-
-		return result;
-	});
-
-	// ─── Format helpers ─────────────────────────────────
-	function fmtAmPm(d: Date): string {
-		return _fmtTime(d, locale);
-	}
-
-	function fmtNowTime(tick: number): string {
-		return _fmtTime(new Date(tick), locale);
-	}
-
-	// ─── Now indicator fraction ─────────────────────────
-	const nowFrac = $derived(fractionalHour(clock.tick) / 24);
-
-	// ─── Scroll to current week on mount ────────────────
-	onMount(async () => {
-		await tick();
-		scrollWeekIntoContainer();
-	});
-
-	// ─── External navigation (arrows, goToday) ──────────
-	$effect(() => {
-		const ext = focusDate ? sod(focusDate.getTime()) : clock.today;
-		if (ext !== lastExternalMs) {
-			lastExternalMs = ext;
-			internalFocusMs = ext;
-			tick().then(() => scrollWeekIntoContainer(ext));
-		}
-	});
-
-	/** 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() {
-		syncFocusFromScroll();
-		if (!el || extending) return;
-		// Extend buffer when user scrolls near the edge
-		if (el.scrollTop < EDGE_PX) {
-			extending = true;
-			const oldHeight = el.scrollHeight;
-			bufferBefore += EXTEND_BY;
-			// After DOM updates, compensate scroll for prepended content
-			tick().then(() => {
-				el.scrollTop += el.scrollHeight - oldHeight;
-				extending = false;
-			});
-		} else {
-			const bottomRemaining = el.scrollHeight - el.clientHeight - el.scrollTop;
-			if (bottomRemaining < EDGE_PX) {
-				bufferAfter += EXTEND_BY;
-			}
-		}
-	}
-
-	function handleDayCellClick(ms: number, e: Event) {
-		const target = e.target as HTMLElement;
-		if (target.closest('.wg-ev')) return;
-		if (readOnly || !oneventcreate) return;
-		// Check disabled dates
-		if (disabledSet.has(ms)) return;
-		// Check blocked slots (all-day block check: if entire day is blocked, prevent)
-		const durMin = minDuration ? Math.max(60, minDuration) : 60;
-		const start = new Date(ms + 9 * HOUR_MS);
-		const end = new Date(start.getTime() + durMin * 60_000);
-		oneventcreate({ start, end });
-	}
-
-	// ─── Event drag-to-move ───────────────────────────────────────
-	const DRAG_THRESHOLD = 8;
-	let evDragStartX = 0;
-	let evDragStartY = 0;
-	let evDragStarted = false;
-	let evDragging = $state(false);
-	let evDragId = $state<string | null>(null);
-	let evDragEvent: TimelineEvent | null = null;
-
-	const dragPreviewEvent = $derived.by(() => {
-		const payload = drag?.active && drag.mode === 'move' ? drag.payload : null;
-		if (!payload?.eventId) return null;
-		const ev = events.find((event) => event.id === payload.eventId);
-		if (!ev) return null;
-		return { ...ev, start: payload.start, end: payload.end };
-	});
-
-	function isDraggedEvent(eventId: string): boolean {
-		return dragPreviewEvent?.id === eventId;
-	}
-
-	function timedEventsForDay(day: DayCell): TimelineEvent[] {
-		if (!dragPreviewEvent) return day.events;
-		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;
-		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;
-		const seg = segmentForDay(ev, dayMs);
-		if (seg) previewKeySnapshot.set(dayMs, `${ev.id}:${seg.dayIndex}`);
-		return seg;
-	}
-
-	function getCellWidth(): number {
-		const cell = el?.querySelector('.wg-cell');
-		return cell ? cell.getBoundingClientRect().width : 100;
-	}
-
-	function getRowHeight(): number {
-		const row = el?.querySelector('.wg-week');
-		return row ? row.getBoundingClientRect().height + 24 : 200; // 24 ≈ vertical margin between weeks
-	}
-
-	function onEventPointerDown(e: PointerEvent, ev: TimelineEvent) {
-		if (e.button !== 0 || !drag || readOnly || ev.data?.readOnly) return;
-		e.stopPropagation();
-		evDragStartX = e.clientX;
-		evDragStartY = e.clientY;
-		evDragStarted = false;
-		evDragId = ev.id;
-		evDragEvent = ev;
-
-		window.addEventListener('pointermove', onEvWindowPointerMove);
-		window.addEventListener('pointerup', onEvWindowPointerUp, { once: true });
-		window.addEventListener('pointercancel', onEvWindowPointerCancel, { once: true });
-	}
-
-	function onEvWindowPointerMove(e: PointerEvent) {
-		const ev = evDragEvent;
-		if (!drag || !ev || evDragId !== ev.id) return;
-		const dx = e.clientX - evDragStartX;
-		const dy = e.clientY - evDragStartY;
-		if (!evDragStarted && Math.abs(dx) + Math.abs(dy) < DRAG_THRESHOLD) return;
-
-		if (!evDragStarted) {
-			evDragStarted = true;
-			evDragging = true;
-			drag.beginMove(ev.id, ev.start, ev.end);
-		}
-
-		const cellW = getCellWidth();
-		const rowH = getRowHeight();
-		const dayOffset = Math.round(dx / cellW);
-		const weekOffset = Math.round(dy / rowH);
-		const deltaMs = (dayOffset + weekOffset * 7) * DAY_MS;
-		drag.updatePointer(
-			new Date(ev.start.getTime() + deltaMs),
-			new Date(ev.end.getTime() + deltaMs),
-		);
-	}
-
-	function cleanupEvDrag() {
-		window.removeEventListener('pointermove', onEvWindowPointerMove);
-		window.removeEventListener('pointerup', onEvWindowPointerUp);
-		window.removeEventListener('pointercancel', onEvWindowPointerCancel);
-		evDragStarted = false;
-		evDragging = false;
-		evDragId = null;
-		evDragEvent = null;
-	}
-
-	function onEvWindowPointerUp() {
-		if (!drag) { cleanupEvDrag(); return; }
-		if (!evDragStarted) {
-			if (evDragEvent) oneventclick?.(evDragEvent);
-		} else {
-			commitDragCtx?.();
-		}
-		cleanupEvDrag();
-	}
-
-	function onEvWindowPointerCancel() {
-		if (drag && evDragStarted) drag.cancel();
-		cleanupEvDrag();
-	}
+<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 EventContent from "../shared/EventContent.svelte";
+import { createClock } from "../../core/clock.svelte.js";
+import { DAY_MS, HOUR_MS, sod } from "../../core/time.js";
+import { startOfWeek as sowFn, fractionalHour, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
+import { weekdayShort, monthLong, fmtTime as _fmtTime, getLabels } from "../../core/locale.js";
+const L = $derived(getLabels());
+let {
+  mondayStart = true,
+  locale,
+  height = 520,
+  events = [],
+  style = "",
+  focusDate,
+  oneventclick,
+  oneventcreate,
+  selectedEventId = null,
+  readOnly = false
+} = $props();
+const ctx = useCalendarContext();
+const clock = createClock(ctx.timezone);
+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 equalDays = $derived(ctx.equalDays);
+const showDates = $derived(ctx.showDates);
+const hideDays = $derived(ctx.hideDays);
+const blockedSlots = $derived(ctx.blockedSlots);
+const dayHeaderSnippet = $derived(ctx.dayHeaderSnippet);
+const minDuration = $derived(ctx.minDuration);
+const autoHeight = $derived(ctx.autoHeight);
+const oneventhover = $derived(ctx.oneventhover);
+const disabledSet = $derived(ctx.disabledSet);
+const INITIAL_BUFFER = 52;
+const EXTEND_BY = 26;
+const EDGE_PX = 200;
+let bufferBefore = $state(INITIAL_BUFFER);
+let bufferAfter = $state(INITIAL_BUFFER);
+const MAX_EVENTS_SHOWN = 5;
+const _initMs = untrack(() => sod(focusDate?.getTime() ?? Date.now()));
+let internalFocusMs = $state(_initMs);
+let lastExternalMs = _initMs;
+let el;
+function scrollWeekIntoContainer(targetMs, behavior = "auto") {
+  if (!el) return;
+  let target = null;
+  if (targetMs !== void 0) {
+    const rows = el.querySelectorAll("[data-week]");
+    for (const row of rows) {
+      const weekMs = Number(row.dataset.week);
+      if (weekMs <= targetMs && targetMs < weekMs + customDays * DAY_MS) {
+        target = row;
+        break;
+      }
+    }
+  }
+  if (!target) target = el.querySelector(".wg-week--current");
+  if (!target) return;
+  const targetTop = target.offsetTop - (el.clientHeight - target.offsetHeight) / 2;
+  el.scrollTo({ top: Math.max(0, targetTop), behavior });
+}
+const todayMs = $derived(clock.today);
+const customDays = $derived(viewState?.dayCount ?? 7);
+const anchorPeriodStart = $derived(
+  customDays === 7 ? sowFn(internalFocusMs, mondayStart) : sod(internalFocusMs)
+);
+$effect(() => {
+  if (!loadRangeCtx) return;
+  const rangeStart = new Date(anchorPeriodStart - bufferBefore * customDays * DAY_MS);
+  const rangeEnd = new Date(anchorPeriodStart + (bufferAfter + 1) * customDays * DAY_MS);
+  loadRangeCtx.set({ start: rangeStart, end: rangeEnd });
+  return () => loadRangeCtx.set(null);
+});
+const weeks = $derived.by(() => {
+  const result = [];
+  for (let w = -bufferBefore; w <= bufferAfter; w++) {
+    const periodStart = anchorPeriodStart + w * customDays * DAY_MS;
+    const isCurrent = todayMs >= periodStart && todayMs < periodStart + customDays * DAY_MS;
+    const days = [];
+    for (let d = 0; d < customDays; d++) {
+      const ms = periodStart + d * DAY_MS;
+      const date = new Date(ms);
+      const dayNum = date.getDate();
+      const dow = date.getDay();
+      const isWeekend = dow === 0 || dow === 6;
+      const isToday = ms === todayMs;
+      const isPast = equalDays ? false : ms < todayMs;
+      const isFirstOfMonth = dayNum === 1;
+      const monthLabel2 = d === 0 || isFirstOfMonth ? monthLong(ms, locale).toUpperCase() : null;
+      const dayEnd = ms + DAY_MS;
+      const dayEventsAll = events.filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > ms).sort((a, b) => a.start.getTime() - b.start.getTime());
+      const timedEvents = [];
+      const allDaySegments = [];
+      for (const ev of dayEventsAll) {
+        if (isAllDay(ev) || isMultiDay(ev)) {
+          const seg = segmentForDay(ev, ms);
+          if (seg) allDaySegments.push(seg);
+        } else {
+          timedEvents.push(ev);
+        }
+      }
+      days.push({ ms, dayNum, isToday, isPast, isWeekend, isFirstOfMonth, monthLabel: monthLabel2, events: timedEvents, allDaySegments });
+    }
+    const startDate = new Date(periodStart);
+    const showMonth = customDays === 7 ? startDate.getDate() <= 7 : startDate.getDate() <= customDays;
+    const monthLabel = showMonth ? monthLong(periodStart, locale).toUpperCase() : null;
+    result.push({ weekStart: periodStart, isCurrent, monthLabel, days });
+  }
+  if (hideDays?.length) {
+    for (const row of result) {
+      row.days = row.days.filter((d) => {
+        const isoDay = new Date(d.ms).getDay();
+        const iso = isoDay === 0 ? 7 : isoDay;
+        return !hideDays.includes(iso);
+      });
+    }
+  }
+  return result;
+});
+function fmtAmPm(d) {
+  return _fmtTime(d, locale);
+}
+function fmtNowTime(tick2) {
+  return _fmtTime(new Date(tick2), locale);
+}
+const nowFrac = $derived(fractionalHour(clock.tick) / 24);
+onMount(async () => {
+  await tick();
+  scrollWeekIntoContainer();
+});
+$effect(() => {
+  const ext = focusDate ? sod(focusDate.getTime()) : clock.today;
+  if (ext !== lastExternalMs) {
+    lastExternalMs = ext;
+    internalFocusMs = ext;
+    tick().then(() => scrollWeekIntoContainer(ext));
+  }
+});
+function syncFocusFromScroll() {
+  if (!el || !viewState) return;
+  const centerY = el.scrollTop + el.clientHeight / 2;
+  const rows = el.querySelectorAll("[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() {
+  syncFocusFromScroll();
+  if (!el || extending) return;
+  if (el.scrollTop < EDGE_PX) {
+    extending = true;
+    const oldHeight = el.scrollHeight;
+    bufferBefore += EXTEND_BY;
+    tick().then(() => {
+      el.scrollTop += el.scrollHeight - oldHeight;
+      extending = false;
+    });
+  } else {
+    const bottomRemaining = el.scrollHeight - el.clientHeight - el.scrollTop;
+    if (bottomRemaining < EDGE_PX) {
+      bufferAfter += EXTEND_BY;
+    }
+  }
+}
+function handleDayCellClick(ms, e) {
+  const target = e.target;
+  if (target.closest(".wg-ev")) return;
+  if (readOnly || !oneventcreate) return;
+  if (disabledSet.has(ms)) return;
+  const durMin = minDuration ? Math.max(60, minDuration) : 60;
+  const start = new Date(ms + 9 * HOUR_MS);
+  const end = new Date(start.getTime() + durMin * 6e4);
+  oneventcreate({ start, end });
+}
+const DRAG_THRESHOLD = 8;
+let evDragStartX = 0;
+let evDragStartY = 0;
+let evDragStarted = false;
+let evDragging = $state(false);
+let evDragId = $state(null);
+let evDragEvent = null;
+const dragPreviewEvent = $derived.by(() => {
+  const payload = drag?.active && drag.mode === "move" ? drag.payload : null;
+  if (!payload?.eventId) return null;
+  const ev = events.find((event) => event.id === payload.eventId);
+  if (!ev) return null;
+  return { ...ev, start: payload.start, end: payload.end };
+});
+function isDraggedEvent(eventId) {
+  return dragPreviewEvent?.id === eventId;
+}
+function timedEventsForDay(day) {
+  if (!dragPreviewEvent) return day.events;
+  return day.events.filter((ev) => ev.id !== dragPreviewEvent.id);
+}
+const previewKeySnapshot = /* @__PURE__ */ new Map();
+function dragPreviewTimedForDay(dayMs) {
+  const ev = dragPreviewEvent;
+  if (!ev || isAllDay(ev) || isMultiDay(ev)) return null;
+  const dayEnd = dayMs + DAY_MS;
+  const hit = ev.start.getTime() < dayEnd && ev.end.getTime() > dayMs;
+  if (hit) previewKeySnapshot.set("timed", ev.id);
+  return hit ? ev : null;
+}
+function dragPreviewSegmentForDay(dayMs) {
+  const ev = dragPreviewEvent;
+  if (!ev || !isAllDay(ev) && !isMultiDay(ev)) return null;
+  const seg = segmentForDay(ev, dayMs);
+  if (seg) previewKeySnapshot.set(dayMs, `${ev.id}:${seg.dayIndex}`);
+  return seg;
+}
+function getCellWidth() {
+  const cell = el?.querySelector(".wg-cell");
+  return cell ? cell.getBoundingClientRect().width : 100;
+}
+function getRowHeight() {
+  const row = el?.querySelector(".wg-week");
+  return row ? row.getBoundingClientRect().height + 24 : 200;
+}
+function onEventPointerDown(e, ev) {
+  if (e.button !== 0 || !drag || readOnly || ev.data?.readOnly) return;
+  e.stopPropagation();
+  evDragStartX = e.clientX;
+  evDragStartY = e.clientY;
+  evDragStarted = false;
+  evDragId = ev.id;
+  evDragEvent = ev;
+  window.addEventListener("pointermove", onEvWindowPointerMove);
+  window.addEventListener("pointerup", onEvWindowPointerUp, { once: true });
+  window.addEventListener("pointercancel", onEvWindowPointerCancel, { once: true });
+}
+function onEvWindowPointerMove(e) {
+  const ev = evDragEvent;
+  if (!drag || !ev || evDragId !== ev.id) return;
+  const dx = e.clientX - evDragStartX;
+  const dy = e.clientY - evDragStartY;
+  if (!evDragStarted && Math.abs(dx) + Math.abs(dy) < DRAG_THRESHOLD) return;
+  if (!evDragStarted) {
+    evDragStarted = true;
+    evDragging = true;
+    drag.beginMove(ev.id, ev.start, ev.end);
+  }
+  const cellW = getCellWidth();
+  const rowH = getRowHeight();
+  const dayOffset = Math.round(dx / cellW);
+  const weekOffset = Math.round(dy / rowH);
+  const deltaMs = (dayOffset + weekOffset * 7) * DAY_MS;
+  drag.updatePointer(
+    new Date(ev.start.getTime() + deltaMs),
+    new Date(ev.end.getTime() + deltaMs)
+  );
+}
+function cleanupEvDrag() {
+  window.removeEventListener("pointermove", onEvWindowPointerMove);
+  window.removeEventListener("pointerup", onEvWindowPointerUp);
+  window.removeEventListener("pointercancel", onEvWindowPointerCancel);
+  evDragStarted = false;
+  evDragging = false;
+  evDragId = null;
+  evDragEvent = null;
+}
+function onEvWindowPointerUp() {
+  if (!drag) {
+    cleanupEvDrag();
+    return;
+  }
+  if (!evDragStarted) {
+    if (evDragEvent) oneventclick?.(evDragEvent);
+  } else {
+    commitDragCtx?.();
+  }
+  cleanupEvDrag();
+}
+function onEvWindowPointerCancel() {
+  if (drag && evDragStarted) drag.cancel();
+  cleanupEvDrag();
+}
 </script>
 
 {#snippet allDaySegmentContent(seg: DaySegment)}
@@ -430,11 +315,13 @@
 {/snippet}
 
 {#snippet timedEventContent(ev: TimelineEvent)}
-	<span class="wg-ev-time">{fmtAmPm(ev.start)}</span>
-	<span class="wg-ev-title">{ev.title}</span>
-	{#if ev.location}
-		<span class="wg-ev-loc">{ev.location}</span>
-	{/if}
+	<EventContent event={ev}>
+		<span class="wg-ev-time">{fmtAmPm(ev.start)}</span>
+		<span class="wg-ev-title">{ev.title}</span>
+		{#if ev.location}
+			<span class="wg-ev-loc">{ev.location}</span>
+		{/if}
+	</EventContent>
 {/snippet}
 
 <div class="wg" class:wg--auto={autoHeight} style={style || undefined} style:height={autoHeight ? undefined : (height ? `${height}px` : '100%')}>