@nomideusz/svelte-calendar 0.14.0 → 0.15.1

package/dist/views/agenda/AgendaWeek.svelte

@@ -1,4 +1,14 @@
-<script lang="ts">import { createClock } from "../../core/clock.svelte.js";
+<script lang="ts">/**
+* AgendaWeek — rolling N-day agenda view.
+*
+* "The Week Ahead":
+*   Today + tomorrow expanded with time slots/countdowns.
+*   Future days compact (dot + time + title).
+*   Past days dimmed.
+*
+* Answers: "What's coming up and when do I need to be ready?"
+*/
+import { createClock } from "../../core/clock.svelte.js";
 import { sod, DAY_MS, startOfWeek, dayNum, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
 import { weekdayLong, monthLong } from "../../core/locale.js";
 import { useCalendarContext } from "../shared/context.svelte.js";
@@ -6,16 +16,7 @@ import EventContent from "../shared/EventContent.svelte";
 import { fmtTime, duration, timeUntilMs, progress, groupIntoSlots } from "../shared/format.js";
 const ctx = useCalendarContext();
 const L = $derived(ctx.labels);
-let {
-  mondayStart = true,
-  locale,
-  height,
-  events = [],
-  style = "",
-  focusDate,
-  oneventclick,
-  selectedEventId = null
-} = $props();
+let { mondayStart = true, locale, height, events = [], style = "", focusDate, oneventclick, selectedEventId = null } = $props();
 const clock = createClock(ctx.timezone);
 const viewState = $derived(ctx.viewState);
 const equalDays = $derived(ctx.equalDays);
@@ -24,110 +25,153 @@ const hideDays = $derived(ctx.hideDays);
 const isMobile = $derived(ctx.isMobile);
 const autoHeight = $derived(ctx.autoHeight);
 const compact = $derived(ctx.compact);
+// Timetable layout is a desktop affordance — stacked list stays on mobile.
 const cols = $derived(ctx.columns && !isMobile);
 const dayHeaderSnippet = $derived(ctx.dayHeaderSnippet);
 const oneventhover = $derived(ctx.oneventhover);
+const ondayclick = $derived(ctx.ondayclick);
 const disabledSet = $derived(ctx.disabledSet);
+function clickDay(ms) {
+	ondayclick?.(new Date(ms));
+}
+// ── Day-to-day card drag (timetable columns) ────────
+// This view has no hour axis, so a drag can only choose a DAY: the card
+// keeps its time of day. Wired through the same oneventmove the planner
+// uses (readOnly-gated and timezone-unzoned at the Calendar layer);
+// per-event data.readOnly opts out — same convention as PlannerWeek.
+const oneventmove = $derived(ctx.oneventmove);
+let dragId = $state(null);
+let dropDay = $state(null);
+const canDrag = (ev) => cols && !!oneventmove && !ev.data?.readOnly && !isAllDay(ev) && !isMultiDay(ev);
+/** Valid drop day for the card in flight: not past, not closed. */
+const isDropDay = (day) => dragId !== null && day.tier !== "past" && !disabledSet.has(day.ms);
+function onCardDragStart(e, ev) {
+	dragId = String(ev.id);
+	if (e.dataTransfer) {
+		e.dataTransfer.effectAllowed = "move";
+		e.dataTransfer.setData("text/plain", String(ev.id));
+	}
+}
+function onDayDrop(e, day) {
+	if (!isDropDay(day)) return;
+	e.preventDefault();
+	e.stopPropagation();
+	const ev = events.find((x) => String(x.id) === dragId);
+	dragId = null;
+	dropDay = null;
+	if (!ev) return;
+	// Same-day drop is a no-op, not a zero-minute "move" for the host to reject.
+	if (sod(ev.start.getTime()) === day.ms) return;
+	const start = new Date(day.ms + (ev.start.getTime() - sod(ev.start.getTime())));
+	const end = new Date(start.getTime() + (ev.end.getTime() - ev.start.getTime()));
+	oneventmove?.(ev, start, end);
+}
+// ── Swipe navigation (mobile, touch only) ──────────
 let swipeStartX = 0;
 let swipeStartY = 0;
 let swipeActive = false;
 const SWIPE_THRESHOLD = 50;
 function onPointerDown(e) {
-  if (!isMobile || e.pointerType !== "touch") return;
-  swipeActive = true;
-  swipeStartX = e.clientX;
-  swipeStartY = e.clientY;
+	if (!isMobile || e.pointerType !== "touch") return;
+	swipeActive = true;
+	swipeStartX = e.clientX;
+	swipeStartY = e.clientY;
 }
 function onPointerUp(e) {
-  if (!swipeActive || e.pointerType !== "touch") return;
-  swipeActive = false;
-  const dx = e.clientX - swipeStartX;
-  const dy = e.clientY - swipeStartY;
-  if (Math.abs(dx) > SWIPE_THRESHOLD && Math.abs(dx) > Math.abs(dy) * 1.4) {
-    if (dx > 0) viewState?.prev();
-    else viewState?.next();
-  }
+	if (!swipeActive || e.pointerType !== "touch") return;
+	swipeActive = false;
+	const dx = e.clientX - swipeStartX;
+	const dy = e.clientY - swipeStartY;
+	if (Math.abs(dx) > SWIPE_THRESHOLD && Math.abs(dx) > Math.abs(dy) * 1.4) {
+		if (dx > 0) viewState?.prev();
+		else viewState?.next();
+	}
 }
 function onPointerCancel() {
-  swipeActive = false;
+	swipeActive = false;
 }
+// ── Compact-day disclosure ("+N more" → expand) ─────
 let expandedDays = $state([]);
 function toggleDayExpand(ms) {
-  expandedDays = expandedDays.includes(ms) ? expandedDays.filter((m) => m !== ms) : [...expandedDays, ms];
+	expandedDays = expandedDays.includes(ms) ? expandedDays.filter((m) => m !== ms) : [...expandedDays, ms];
 }
+// ── Completed-events disclosure ("✓ N completed" → expand) ─────
 let expandedPast = $state([]);
 function togglePastExpand(ms) {
-  expandedPast = expandedPast.includes(ms) ? expandedPast.filter((m) => m !== ms) : [...expandedPast, ms];
+	expandedPast = expandedPast.includes(ms) ? expandedPast.filter((m) => m !== ms) : [...expandedPast, ms];
 }
+// ── Format helpers (delegated to shared/format.ts) ──
+// fmtTime, duration, groupIntoSlots imported at top
+// Thin wrappers that bind locale / clock.tick:
 const fmt = (d) => fmtTime(d, locale);
 const eta = (ms) => timeUntilMs(ms, clock.tick, L);
 const prog = (ev) => progress(ev, clock.tick);
+// ── Event handlers ──────────────────────────────────
 function handleClick(ev) {
-  oneventclick?.(ev);
+	oneventclick?.(ev);
 }
-const weekStartMs = $derived(
-  focusDate ? viewState?.dayCount === 7 ? startOfWeek(sod(focusDate.getTime()), mondayStart) : sod(focusDate.getTime()) : viewState?.dayCount === 7 ? startOfWeek(clock.today, mondayStart) : clock.today
-);
+const weekStartMs = $derived(focusDate ? viewState?.dayCount === 7 ? startOfWeek(sod(focusDate.getTime()), mondayStart) : sod(focusDate.getTime()) : viewState?.dayCount === 7 ? startOfWeek(clock.today, mondayStart) : clock.today);
 const customDays = $derived(viewState?.dayCount ?? 7);
 const weekDays = $derived.by(() => {
-  const now = clock.tick;
-  const todayMs = clock.today;
-  const tomorrowMs = todayMs + DAY_MS;
-  const out = [];
-  for (let i = 0; i < customDays; i++) {
-    const ms = weekStartMs + i * DAY_MS;
-    const dEnd = ms + DAY_MS;
-    const dayEvts = events.filter((ev) => ev.start.getTime() < dEnd && ev.end.getTime() > ms).sort((a, b) => a.start.getTime() - b.start.getTime());
-    const allDayEvts = dayEvts.filter((ev) => isAllDay(ev) || isMultiDay(ev));
-    const timedEvts = dayEvts.filter((ev) => !isAllDay(ev) && !isMultiDay(ev));
-    const totalMinutes = timedEvts.reduce((sum, ev) => {
-      const s = Math.max(ev.start.getTime(), ms);
-      const e = Math.min(ev.end.getTime(), dEnd);
-      return sum + (e - s) / 6e4;
-    }, 0);
-    const pastEvents = [];
-    const currentEvents = [];
-    const upcomingEvents = [];
-    for (const ev of timedEvts) {
-      if (ev.end.getTime() <= now) pastEvents.push(ev);
-      else if (ev.start.getTime() <= now && ev.end.getTime() > now) currentEvents.push(ev);
-      else upcomingEvents.push(ev);
-    }
-    let tier;
-    if (equalDays) {
-      tier = "upcoming";
-    } else if (ms === todayMs) {
-      tier = "today";
-    } else if (ms === tomorrowMs) {
-      tier = "tomorrow";
-    } else if (ms < todayMs) {
-      tier = "past";
-    } else {
-      tier = "upcoming";
-    }
-    out.push({
-      ms,
-      dayName: weekdayLong(ms, locale),
-      dateLabel: `${monthLong(ms, locale)} ${dayNum(ms)}`,
-      tier,
-      isToday: ms === todayMs,
-      events: dayEvts,
-      allDayEvents: allDayEvts,
-      timedEvents: timedEvts,
-      pastEvents,
-      currentEvents,
-      upcomingEvents,
-      totalHours: Math.round(totalMinutes / 60 * 10) / 10
-    });
-  }
-  if (hideDays?.length) {
-    return out.filter((d) => {
-      const jsDay = new Date(d.ms).getDay();
-      const iso = jsDay === 0 ? 7 : jsDay;
-      return !hideDays.includes(iso);
-    });
-  }
-  return out;
+	const now = clock.tick;
+	const todayMs = clock.today;
+	const tomorrowMs = todayMs + DAY_MS;
+	const out = [];
+	for (let i = 0; i < customDays; i++) {
+		const ms = weekStartMs + i * DAY_MS;
+		const dEnd = ms + DAY_MS;
+		const dayEvts = events.filter((ev) => ev.start.getTime() < dEnd && ev.end.getTime() > ms).sort((a, b) => a.start.getTime() - b.start.getTime());
+		const allDayEvts = dayEvts.filter((ev) => isAllDay(ev) || isMultiDay(ev));
+		const timedEvts = dayEvts.filter((ev) => !isAllDay(ev) && !isMultiDay(ev));
+		const totalMinutes = timedEvts.reduce((sum, ev) => {
+			const s = Math.max(ev.start.getTime(), ms);
+			const e = Math.min(ev.end.getTime(), dEnd);
+			return sum + (e - s) / 6e4;
+		}, 0);
+		const pastEvents = [];
+		const currentEvents = [];
+		const upcomingEvents = [];
+		for (const ev of timedEvts) {
+			if (ev.end.getTime() <= now) pastEvents.push(ev);
+			else if (ev.start.getTime() <= now && ev.end.getTime() > now) currentEvents.push(ev);
+			else upcomingEvents.push(ev);
+		}
+		let tier;
+		if (equalDays) {
+			tier = "upcoming";
+		} else if (ms === todayMs) {
+			tier = "today";
+		} else if (ms === tomorrowMs) {
+			tier = "tomorrow";
+		} else if (ms < todayMs) {
+			tier = "past";
+		} else {
+			tier = "upcoming";
+		}
+		out.push({
+			ms,
+			dayName: weekdayLong(ms, locale),
+			dateLabel: `${monthLong(ms, locale)} ${dayNum(ms)}`,
+			tier,
+			isToday: ms === todayMs,
+			events: dayEvts,
+			allDayEvents: allDayEvts,
+			timedEvents: timedEvts,
+			pastEvents,
+			currentEvents,
+			upcomingEvents,
+			totalHours: Math.round(totalMinutes / 60 * 10) / 10
+		});
+	}
+	// Filter hidden days if hideDays is set
+	if (hideDays?.length) {
+		return out.filter((d) => {
+			const jsDay = new Date(d.ms).getDay();
+			const iso = jsDay === 0 ? 7 : jsDay;
+			return !hideDays.includes(iso);
+		});
+	}
+	return out;
 });
 </script>
 
@@ -143,6 +187,10 @@ const weekDays = $derived.by(() => {
 		class:ag-card--limited={ev.status === 'limited'}
 		style:--ev-color={ev.color || 'var(--dt-accent)'}
 		aria-label="{ev.title}{ev.status === 'cancelled' ? ' (cancelled)' : ''}{ev.status === 'tentative' ? ' (tentative)' : ''}{ev.status === 'full' ? ' (full)' : ''}{ev.status === 'limited' ? ' (limited)' : ''}, {fmt(ev.start)} to {fmt(ev.end)}, {duration(ev)}"
+		class:ag-card--drag={dragId === String(ev.id)}
+		draggable={canDrag(ev)}
+		ondragstart={(e) => onCardDragStart(e, ev)}
+		ondragend={() => ((dragId = null), (dropDay = null))}
 		onclick={() => handleClick(ev)}
 		onpointerenter={() => oneventhover?.(ev)}
 	>
@@ -252,8 +300,13 @@ const weekDays = $derived.by(() => {
 			{@const expanded = day.tier === 'today' || day.tier === 'tomorrow'}
 			{#if day.tier === 'past'}
 				<!-- Past day: single collapsed line -->
-				<div class="ag-wday ag-wday--past" class:ag-wday--disabled={disabledSet.has(day.ms)} role="listitem">
-					<div class="ag-wday-head">
+				<div class="ag-wday ag-wday--past" class:ag-wday--disabled={disabledSet.has(day.ms)} data-day={day.ms} role="listitem">
+					<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+					<div
+						class="ag-wday-head"
+						class:ag-wday-head--click={!!ondayclick}
+						onclick={ondayclick ? () => clickDay(day.ms) : undefined}
+					>
 						<div class="ag-wday-head-left">
 							<span class="ag-wday-name">{day.dayName}</span>
 							{#if showDates}<span class="ag-wday-date">{day.dateLabel}</span>{/if}
@@ -278,16 +331,34 @@ const weekDays = $derived.by(() => {
 					{/if}
 				</div>
 			{:else}
+			<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 			<div
 				class="ag-wday"
 				class:ag-wday--today={day.tier === 'today'}
 				class:ag-wday--tomorrow={day.tier === 'tomorrow'}
 				class:ag-wday--equal={equalDays}
 				class:ag-wday--disabled={disabledSet.has(day.ms)}
+				class:ag-wday--drop={dropDay === day.ms && isDropDay(day)}
+				data-day={day.ms}
 				role="listitem"
+				ondragover={(e) => {
+					if (!isDropDay(day)) return;
+					e.preventDefault();
+					dropDay = day.ms;
+					if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+				}}
+				ondragleave={() => {
+					if (dropDay === day.ms) dropDay = null;
+				}}
+				ondrop={(e) => onDayDrop(e, day)}
 			>
 				<!-- Day header -->
-				<div class="ag-wday-head">
+				<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+				<div
+					class="ag-wday-head"
+					class:ag-wday-head--click={!!ondayclick}
+					onclick={ondayclick ? () => clickDay(day.ms) : undefined}
+				>
 					<div class="ag-wday-head-left">
 						{#if day.isToday}
 						<span class="ag-wday-badge">{L.today}</span>
@@ -329,7 +400,12 @@ const weekDays = $derived.by(() => {
 				{/if}
 
 				{#if day.events.length === 0}
-					<div class="ag-wday-empty">{L.noEvents}</div>
+					<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+					<div
+						class="ag-wday-empty"
+						class:ag-wday-empty--click={!!ondayclick}
+						onclick={ondayclick ? () => clickDay(day.ms) : undefined}
+					>{L.noEvents}</div>
 				{:else if compact && !cols}
 					<!-- Compact: minimal dot + time + title rows for all days.
 					     Ignored in columns mode — single-line rows truncate to
@@ -692,6 +768,10 @@ const weekDays = $derived.by(() => {
 		padding: 2px 0 4px;
 	}
 
+	.ag-wday-head--click,
+	.ag-wday-empty--click {
+		cursor: pointer;
+	}
 	.ag-wday-head {
 		display: flex;
 		justify-content: space-between;
@@ -984,6 +1064,15 @@ const weekDays = $derived.by(() => {
 		border-radius: 4px;
 	}
 
+	/* ═══ Day-drop drag ═══ */
+	.ag-card--drag {
+		opacity: 0.4;
+	}
+	.ag-wday--drop {
+		background: color-mix(in srgb, var(--dt-accent, #2563eb) 6%, transparent);
+		box-shadow: inset 0 0 0 1px var(--dt-accent, #2563eb);
+	}
+
 	/* ═══ Timetable columns (desktop) ═══ */
 	.ag--cols .ag-body {
 		display: grid;