@nomideusz/svelte-calendar 0.21.0 → 1.0.0

package/dist/views/agenda/AgendaDay.svelte

@@ -12,11 +12,12 @@
 *   Clean numbered schedule list.
 */
 import { createClock } from "../../core/clock.svelte.js";
-import { sod, addDaysMs, dayNum, isAllDay, isMultiDay } from "../../core/time.js";
+import { sod, addDaysMs, dayNum, isAllDay } from "../../core/time.js";
 import { weekdayLong, monthLong } from "../../core/locale.js";
 import { useCalendarContext } from "../shared/context.svelte.js";
 import EventContent from "../shared/EventContent.svelte";
 import { fmtTime, duration, timeUntilMs, progress, groupIntoSlots } from "../shared/format.js";
+import { createSwipe } from "../mobile/swipe.js";
 const ctx = useCalendarContext();
 const L = $derived(ctx.labels);
 const emptySnippet = $derived(ctx.emptySnippet);
@@ -36,28 +37,28 @@ const compact = $derived(ctx.compact);
 const oneventhover = $derived(ctx.oneventhover);
 const disabledSet = $derived(ctx.disabledSet);
 // ── 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;
-}
-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();
+// Touch events, not pointer events: once the browser claims a touch for
+// panning it sends pointercancel and the pointerup never arrives.
+const swipe = createSwipe({
+	disabled: () => !isMobile,
+	onmove: () => {},
+	onend: (dir) => {
+		if (dir > 0) viewState?.prev();
+		else if (dir < 0) viewState?.next();
 	}
+});
+// ── Status suffix (aria) ────────────────────────────
+function statusText(ev) {
+	if (ev.status === "cancelled") return ` (${L.cancelled})`;
+	if (ev.status === "tentative") return ` (${L.tentative})`;
+	if (ev.status === "full") return ` (${L.full})`;
+	if (ev.status === "limited") return ` (${L.limited})`;
+	return "";
 }
-function onPointerCancel() {
-	swipeActive = false;
+/** All-day events and timed ones at least a (wall-clock) day long go to
+*  the all-day strip; a shorter overnight event is listed with its time. */
+function inAllDayStrip(ev) {
+	return isAllDay(ev) || ev.end.getTime() >= addDaysMs(ev.start.getTime(), 1);
 }
 // ── Format helpers (delegated to shared/format.ts) ──
 const fmt = (d) => fmtTime(d, locale);
@@ -78,9 +79,9 @@ const dayEvents = $derived.by(() => {
 	return events.filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > dayMs).sort((a, b) => a.start.getTime() - b.start.getTime());
 });
 /** All-day / multi-day events shown in a separate strip */
-const allDayBanner = $derived(dayEvents.filter((ev) => isAllDay(ev) || isMultiDay(ev)));
+const allDayBanner = $derived(dayEvents.filter(inAllDayStrip));
 /** Timed events (non-all-day) for normal slot rendering */
-const timedDayEvents = $derived(dayEvents.filter((ev) => !isAllDay(ev) && !isMultiDay(ev)));
+const timedDayEvents = $derived(dayEvents.filter((ev) => !inAllDayStrip(ev)));
 const dayCat = $derived.by(() => {
 	const now = clock.tick;
 	const past = [];
@@ -118,7 +119,7 @@ const visibleDone = $derived(showAllDone ? dayCat.past : dayCat.past.slice(-DONE
 const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.length - DONE_VISIBLE));
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions (touch swipe only; no pointer/keyboard role) -->
 <div
 	class="ag ag--day"
 	class:ag--disabled={disabledSet.has(dayMs)}
@@ -126,9 +127,10 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	class:ag--auto={autoHeight}
 	style={style || undefined}
 	style:height={height ? `${height}px` : undefined}
-	onpointerdown={onPointerDown}
-	onpointerup={onPointerUp}
-	onpointercancel={onPointerCancel}
+	ontouchstart={swipe.ontouchstart}
+	ontouchmove={swipe.ontouchmove}
+	ontouchend={swipe.ontouchend}
+	ontouchcancel={swipe.ontouchcancel}
 >
 	<div class="ag-body" role="group" aria-label={L.todaysLineup}>
 		<!-- ─── In-view date header (only when the chrome doesn't label the day) ─── -->
@@ -154,7 +156,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 							class="ag-allday-chip"
 							class:ag-allday-chip--selected={selectedEventId === ev.id}
 							style:--ev-color={ev.color || 'var(--dt-accent)'}
-							aria-label="{ev.title}, {L.allDay}"
+							aria-label="{ev.title}{statusText(ev)}, {L.allDay}"
 							onclick={() => handleClick(ev)}
 							onpointerenter={() => oneventhover?.(ev)}
 						>
@@ -182,7 +184,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 							class:ag-compact-row--cancelled={ev.status === 'cancelled'}
 							class:ag-compact-row--tentative={ev.status === 'tentative'}
 							style:--ev-color={ev.color || 'var(--dt-accent)'}
-							aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
+							aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)}, {duration(ev)}"
 							onclick={() => handleClick(ev)}
 							onpointerenter={() => oneventhover?.(ev)}
 						>
@@ -277,7 +279,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 									class="ag-compact-row ag-compact-row--queue"
 									class:ag-compact-row--selected={selectedEventId === ev.id}
 									style:--ev-color={ev.color || 'var(--dt-accent)'}
-									aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
+									aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)}, {duration(ev)}"
 									onclick={() => handleClick(ev)}
 									onpointerenter={() => oneventhover?.(ev)}
 								>
@@ -298,7 +300,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 								class:ag-card--hero={i === 0}
 								class:ag-card--selected={selectedEventId === ev.id}
 								style:--ev-color={ev.color || 'var(--dt-accent)'}
-								aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
+								aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)}, {duration(ev)}"
 								onclick={() => handleClick(ev)}
 								onpointerenter={() => oneventhover?.(ev)}
 							>
@@ -345,7 +347,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 							class="ag-log-row"
 							class:ag-log-row--selected={selectedEventId === ev.id}
 							style:--ev-color={ev.color || 'var(--dt-accent)'}
-							aria-label="{ev.title}, {fmt(ev.start)} to {fmt(ev.end)}"
+							aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)} – {fmt(ev.end)}"
 							onclick={() => handleClick(ev)}
 							onpointerenter={() => oneventhover?.(ev)}
 						>
@@ -378,7 +380,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 							class:ag-card--full={ev.status === 'full'}
 							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)}"
+							aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)} – {fmt(ev.end)}, {duration(ev)}"
 							onclick={() => handleClick(ev)}
 							onpointerenter={() => oneventhover?.(ev)}
 						>
@@ -767,6 +769,12 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	/* Mobile: stack queue columns vertically — "Up next" (hero) first,
 	   Now/Done status column second */
+	/* Horizontal swipes are ours (day navigation); the browser keeps
+	   vertical scrolling and pinch-zoom. */
+	.ag--mobile,
+	.ag--mobile .ag-body {
+		touch-action: pan-y pinch-zoom;
+	}
 	.ag--mobile .ag-q {
 		grid-template-columns: 1fr;
 		min-height: auto;

package/dist/views/agenda/AgendaWeek.svelte

@@ -14,6 +14,7 @@ import { weekdayLong, monthLong } from "../../core/locale.js";
 import { useCalendarContext } from "../shared/context.svelte.js";
 import EventContent from "../shared/EventContent.svelte";
 import { fmtTime, duration, timeUntilMs, progress, groupIntoSlots } from "../shared/format.js";
+import { createSwipe } from "../mobile/swipe.js";
 const ctx = useCalendarContext();
 const L = $derived(ctx.labels);
 let { mondayStart = true, locale, height, events = [], style = "", focusDate, oneventclick, selectedEventId = null } = $props();
@@ -34,6 +35,28 @@ const disabledSet = $derived(ctx.disabledSet);
 function clickDay(ms) {
 	ondayclick?.(new Date(ms));
 }
+/** Keyboard activation for the day header / empty-day row (role="button").
+*  Keys aimed at a control inside a custom dayHeader snippet stay its own. */
+function dayKeydown(e, ms) {
+	if (e.target !== e.currentTarget) return;
+	if (e.key !== "Enter" && e.key !== " ") return;
+	e.preventDefault();
+	clickDay(ms);
+}
+// ── Status suffix (aria) ────────────────────────────
+function statusText(ev) {
+	if (ev.status === "cancelled") return ` (${L.cancelled})`;
+	if (ev.status === "tentative") return ` (${L.tentative})`;
+	if (ev.status === "full") return ` (${L.full})`;
+	if (ev.status === "limited") return ` (${L.limited})`;
+	return "";
+}
+/** All-day events and timed ones at least a (wall-clock) day long go to
+*  the all-day chips; a shorter overnight event is listed with its time on
+*  each day it touches. */
+function inAllDayStrip(ev) {
+	return isAllDay(ev) || ev.end.getTime() >= addDaysMs(ev.start.getTime(), 1);
+}
 // ── 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
@@ -62,34 +85,24 @@ function onDayDrop(e, day) {
 	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())));
+	// Same wall-clock time on the target day (a fixed ms offset from
+	// midnight is an hour off when a DST change lies between the two).
+	const s = ev.start;
+	const start = new Date(new Date(day.ms).setHours(s.getHours(), s.getMinutes(), s.getSeconds(), s.getMilliseconds()));
 	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;
-}
-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();
+// Touch events, not pointer events: once the browser claims a touch for
+// panning it sends pointercancel and the pointerup never arrives.
+const swipe = createSwipe({
+	disabled: () => !isMobile,
+	onmove: () => {},
+	onend: (dir) => {
+		if (dir > 0) viewState?.prev();
+		else if (dir < 0) viewState?.next();
 	}
-}
-function onPointerCancel() {
-	swipeActive = false;
-}
+});
 // ── Compact-day disclosure ("+N more" → expand) ─────
 let expandedDays = $state([]);
 function toggleDayExpand(ms) {
@@ -121,8 +134,8 @@ const weekDays = $derived.by(() => {
 		const ms = addDaysMs(weekStartMs, i);
 		const dEnd = addDaysMs(ms, 1);
 		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 allDayEvts = dayEvts.filter(inAllDayStrip);
+		const timedEvts = dayEvts.filter((ev) => !inAllDayStrip(ev));
 		const totalMinutes = timedEvts.reduce((sum, ev) => {
 			const s = Math.max(ev.start.getTime(), ms);
 			const e = Math.min(ev.end.getTime(), dEnd);
@@ -186,7 +199,7 @@ const weekDays = $derived.by(() => {
 		class:ag-card--full={ev.status === 'full'}
 		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)}"
+		aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)} – {fmt(ev.end)}, {duration(ev)}"
 		class:ag-card--drag={dragId === String(ev.id)}
 		draggable={canDrag(ev)}
 		ondragstart={(e) => onCardDragStart(e, ev)}
@@ -243,7 +256,7 @@ const weekDays = $derived.by(() => {
 		class:ag-compact--full={ev.status === 'full'}
 		class:ag-compact--limited={ev.status === 'limited'}
 		style:--ev-color={ev.color || 'var(--dt-accent)'}
-		aria-label="{ev.title}{done ? `, ${L.completed}` : ''}, {fmt(ev.start)}, {duration(ev)}"
+		aria-label="{ev.title}{statusText(ev)}{done ? `, ${L.completed}` : ''}, {fmt(ev.start)}, {duration(ev)}"
 		onclick={() => handleClick(ev)}
 		onpointerenter={() => oneventhover?.(ev)}
 	>
@@ -283,7 +296,7 @@ const weekDays = $derived.by(() => {
 	</button>
 {/snippet}
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions (touch swipe only; no pointer/keyboard role) -->
 <div
 	class="ag ag--week"
 	class:ag--mobile={isMobile}
@@ -291,9 +304,10 @@ const weekDays = $derived.by(() => {
 	class:ag--cols={cols}
 	style={style || undefined}
 	style:height={height ? `${height}px` : undefined}
-	onpointerdown={onPointerDown}
-	onpointerup={onPointerUp}
-	onpointercancel={onPointerCancel}
+	ontouchstart={swipe.ontouchstart}
+	ontouchmove={swipe.ontouchmove}
+	ontouchend={swipe.ontouchend}
+	ontouchcancel={swipe.ontouchcancel}
 >
 	<div class="ag-body" role="list" aria-label={L.weekAhead} style:--ag-cols={weekDays.length}>
 		{#each weekDays as day (day.ms)}
@@ -301,11 +315,15 @@ const weekDays = $derived.by(() => {
 			{#if day.tier === 'past'}
 				<!-- Past day: single collapsed line -->
 				<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 -->
+					<!-- role="button" exactly when ondayclick is set (Calendar always sets it) -->
+					<!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
 					<div
 						class="ag-wday-head"
 						class:ag-wday-head--click={!!ondayclick}
+						role={ondayclick ? 'button' : undefined}
+						tabindex={ondayclick ? 0 : undefined}
 						onclick={ondayclick ? () => clickDay(day.ms) : undefined}
+						onkeydown={ondayclick ? (e) => dayKeydown(e, day.ms) : undefined}
 					>
 						<div class="ag-wday-head-left">
 							<span class="ag-wday-name">{day.dayName}</span>
@@ -353,11 +371,15 @@ const weekDays = $derived.by(() => {
 				ondrop={(e) => onDayDrop(e, day)}
 			>
 				<!-- Day header -->
-				<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+				<!-- role="button" exactly when ondayclick is set (Calendar always sets it) -->
+				<!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
 				<div
 					class="ag-wday-head"
 					class:ag-wday-head--click={!!ondayclick}
+					role={ondayclick ? 'button' : undefined}
+					tabindex={ondayclick ? 0 : undefined}
 					onclick={ondayclick ? () => clickDay(day.ms) : undefined}
+					onkeydown={ondayclick ? (e) => dayKeydown(e, day.ms) : undefined}
 				>
 					<div class="ag-wday-head-left">
 						{#if day.isToday}
@@ -400,11 +422,14 @@ const weekDays = $derived.by(() => {
 				{/if}
 
 				{#if day.events.length === 0}
-					<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+					<!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
 					<div
 						class="ag-wday-empty"
 						class:ag-wday-empty--click={!!ondayclick}
+						role={ondayclick ? 'button' : undefined}
+						tabindex={ondayclick ? 0 : undefined}
 						onclick={ondayclick ? () => clickDay(day.ms) : undefined}
+						onkeydown={ondayclick ? (e) => dayKeydown(e, day.ms) : undefined}
 					>{L.noEvents}</div>
 				{:else if compact && !cols}
 					<!-- Compact: minimal dot + time + title rows for all days.
@@ -772,6 +797,12 @@ const weekDays = $derived.by(() => {
 	.ag-wday-empty--click {
 		cursor: pointer;
 	}
+	.ag-wday-head--click:focus-visible,
+	.ag-wday-empty--click:focus-visible {
+		outline: 2px solid var(--dt-accent, #2563eb);
+		outline-offset: -2px;
+		border-radius: 4px;
+	}
 	.ag-wday-head {
 		display: flex;
 		justify-content: space-between;
@@ -1119,6 +1150,12 @@ const weekDays = $derived.by(() => {
 	}
 
 	/* ═══ Mobile adaptations ═══ */
+	/* Horizontal swipes are ours (week navigation); the browser keeps
+	   vertical scrolling and pinch-zoom. */
+	.ag--mobile,
+	.ag--mobile .ag-body {
+		touch-action: pan-y pinch-zoom;
+	}
 	.ag--mobile .ag-wday-head {
 		padding: 12px 16px;
 	}

package/dist/views/index.d.ts

@@ -1,3 +1,5 @@
 export { default as Planner } from './planner/Planner.svelte';
+export { default as PlannerScroll } from './planner/PlannerScroll.svelte';
 export { default as Agenda } from './agenda/Agenda.svelte';
 export { default as Mobile } from './mobile/Mobile.svelte';
+export { default as MonthGrid } from './month/MonthGrid.svelte';

package/dist/views/index.js

@@ -1,3 +1,5 @@
 export { default as Planner } from './planner/Planner.svelte';
+export { default as PlannerScroll } from './planner/PlannerScroll.svelte';
 export { default as Agenda } from './agenda/Agenda.svelte';
 export { default as Mobile } from './mobile/Mobile.svelte';
+export { default as MonthGrid } from './month/MonthGrid.svelte';