@nomideusz/svelte-calendar 0.20.1 → 1.0.0

package/dist/views/planner/PlannerScroll.svelte

@@ -7,8 +7,10 @@
   Modelled after Hey Calendar's week view:
   • Weeks stack vertically. Scroll up = past, down = future.
   • Day headers in each week row: "MON 23", "TUE 24", with accent pill for today.
-  • Month label in left gutter, vertical bottom-to-top.
-  • Events are clean horizontal bars with colour fill, "9AM- 10AM Title" inline.
+  • Month label in left gutter, vertical bottom-to-top; a month that begins
+    mid-week is labelled, with its year, in the column where it begins.
+  • Events are clean horizontal bars with colour fill, "9AM- 10AM Title" inline,
+    each at the height of its start time in the day.
   • Generous whitespace, thin dividers, minimal chrome.
 -->
 <script lang="ts">import { onMount, tick, untrack } from "svelte";
@@ -18,13 +20,14 @@ 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, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
-import { weekdayShort, monthLong, fmtTime as _fmtTime, getLabels } from "../../core/locale.js";
+import { HOUR_MS, sod, addDaysMs, diffDays } from "../../core/time.js";
+import { startOfWeek as sowFn, isAllDay, segmentForDay } from "../../core/time.js";
+import { weekdayShort, monthLong, fmtTime as _fmtTime } from "../../core/locale.js";
 import { createChipFit } from "../shared/chip-fit.svelte.js";
-const L = $derived(getLabels());
 let { mondayStart = true, locale, height = 520, events = [], style = "", focusDate, oneventclick, oneventcreate, onexternaldrop, selectedEventId = null, readOnly = false, visibleHours } = $props();
 const ctx = useCalendarContext();
+/** Per-instance labels (Calendar's `labels` prop over the globals). */
+const L = $derived(ctx.labels);
 const clock = createClock(ctx.timezone);
 // Drag ghost flies between day cells instead of teleporting.
 // No fallback: without a counterpart (drag start/end) it appears/disappears instantly.
@@ -61,12 +64,84 @@ const MAX_EVENTS_SHOWN = 5;
 // mount re-centres once the events have landed.
 const CHIP_H = 22;
 const CHIP_GAP = 3;
-const ROW_MIN = 120;
+/** The day's hours at their floor height — a quiet week is short, a busy
+*  day grows its row. Chips sit on this axis by start time. */
+const TIME_H = 120;
 const ROW_MARGIN = 12;
 /** Distance between two rows' tops; only a fallback now. */
 function rowPitch() {
 	const rows = el?.querySelectorAll("[data-week]");
-	return rows && rows.length > 1 ? rows[1].offsetTop - rows[0].offsetTop : ROW_MIN + ROW_MARGIN;
+	return rows && rows.length > 1 ? rows[1].offsetTop - rows[0].offsetTop : TIME_H + ROW_MARGIN;
+}
+// ─── Wall-clock helpers ─────────────────────────
+// The axis is wall-clock hours. A DST day is 23 or 25 hours long, so
+// `dayMs + h * HOUR_MS` is an hour off after the change: convert through
+// the local calendar instead.
+/** Fractional wall-clock hour `hour` on the day starting at `dayMs` → epoch ms. */
+function atHour(dayMs, hour) {
+	// MakeTime sums the fields in local time, so this may pass 24h.
+	return new Date(dayMs).setHours(0, 0, 0, Math.round(hour * HOUR_MS));
+}
+/** Epoch ms → fractional wall-clock hour counted from the day at `dayMs`. */
+function hourOf(ms, dayMs) {
+	const d = new Date(ms);
+	return diffDays(ms, dayMs) * 24 + d.getHours() + d.getMinutes() / 60 + d.getSeconds() / 3600 + d.getMilliseconds() / HOUR_MS;
+}
+/** All-day events and timed ones a (wall-clock) day or longer are bars;
+*  a shorter overnight event is a chip on the day it starts. */
+function inAllDayStrip(ev) {
+	return isAllDay(ev) || ev.end.getTime() >= addDaysMs(ev.start.getTime(), 1);
+}
+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 "";
+}
+// ─── Time axis ──────────────────────────────────
+// Without visibleHours the axis spans the hours the loaded events start in:
+// a timetable of 7:00–21:00 classes spread over 24 hours bunches them up.
+const eventHours = $derived.by(() => {
+	let lo = 24;
+	let hi = -1;
+	for (const ev of events) {
+		if (inAllDayStrip(ev)) continue;
+		const h = ev.start.getHours() + ev.start.getMinutes() / 60;
+		lo = Math.min(lo, h);
+		hi = Math.max(hi, h);
+	}
+	return hi < 0 ? [0, 24] : [Math.floor(lo), Math.min(24, Math.floor(hi) + 1)];
+});
+const startHour = $derived(visibleHours?.[0] ?? eventHours[0]);
+const endHour = $derived(visibleHours?.[1] ?? eventHours[1]);
+/** Where a chip starting this many wall-clock hours into the day sits, px
+*  from the axis top. A chip at the last hour still ends inside the floor height. */
+function timeTop(hoursIntoDay) {
+	const f = (hoursIntoDay - startHour) / Math.max(1, endHour - startHour);
+	return Math.min(Math.max(f, 0), 1) * (TIME_H - CHIP_H);
+}
+/** Each chip at its start time, or just under the chip before it when that
+*  one is in the way: the order is time, the height is time, nothing overlaps. */
+function chipTops(list, dayMs) {
+	const tops = [];
+	let min = 0;
+	for (const ev of list) {
+		const top = Math.max(timeTop(hourOf(ev.start.getTime(), dayMs)), min);
+		tops.push(top);
+		min = top + CHIP_H + CHIP_GAP;
+	}
+	return tops;
+}
+/** The now-line: at the clock's height (pinned to the axis ends outside
+*  it), but never above a chip that has already started — pushed-down
+*  chips would read as still to come. */
+function nowTop(list, tops, dayMs) {
+	let y = timeTop(hourOf(clock.tick, dayMs));
+	list.forEach((ev, i) => {
+		if (ev.start.getTime() <= clock.tick) y = Math.max(y, tops[i] + CHIP_H + CHIP_GAP / 2);
+	});
+	return y;
 }
 const _initMs = untrack(() => sod(focusDate?.getTime() ?? Date.now()));
 let internalFocusMs = $state(_initMs);
@@ -80,7 +155,7 @@ function scrollWeekIntoContainer(targetMs, behavior = "auto") {
 		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) {
+			if (weekMs <= targetMs && targetMs < addDaysMs(weekMs, customDays)) {
 				target = row;
 				break;
 			}
@@ -104,8 +179,8 @@ const anchorPeriodStart = $derived(customDays === 7 ? sowFn(internalFocusMs, mon
 // 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);
+	const rangeStart = new Date(addDaysMs(anchorPeriodStart, -bufferBefore * customDays));
+	const rangeEnd = new Date(addDaysMs(anchorPeriodStart, (bufferAfter + 1) * customDays));
 	loadRangeCtx.set({
 		start: rangeStart,
 		end: rangeEnd
@@ -115,29 +190,31 @@ $effect(() => {
 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;
+		// Calendar days, not 24 h steps: past a DST change a sum of DAY_MS
+		// lands at 23:00 the day before, and every later row shifts a day.
+		const periodStart = addDaysMs(anchorPeriodStart, w * customDays);
+		const isCurrent = todayMs >= periodStart && todayMs < addDaysMs(periodStart, customDays);
 		const days = [];
 		for (let d = 0; d < customDays; d++) {
-			const ms = periodStart + d * DAY_MS;
+			const ms = addDaysMs(periodStart, d);
 			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 dayEnd = addDaysMs(ms, 1);
+			// A zero-length event counts where it sits (even at midnight)
+			const dayEventsAll = events.filter((ev) => ev.start.getTime() < dayEnd && (ev.end.getTime() > ms || ev.start.getTime() >= ms)).sort((a, b) => a.start.getTime() - b.start.getTime());
+			// Separate all-day / day-long from timed events. A timed event that
+			// runs past midnight (22:00–01:00) is a chip on its start day only.
 			const timedEvents = [];
 			const allDaySegments = [];
 			for (const ev of dayEventsAll) {
-				if (isAllDay(ev) || isMultiDay(ev)) {
+				if (inAllDayStrip(ev)) {
 					const seg = segmentForDay(ev, ms);
 					if (seg) allDaySegments.push(seg);
-				} else {
+				} else if (ev.start.getTime() >= ms && ev.end.getTime() >= ev.start.getTime()) {
 					timedEvents.push(ev);
 				}
 			}
@@ -147,20 +224,16 @@ const weeks = $derived.by(() => {
 				isToday,
 				isPast,
 				isWeekend,
-				isFirstOfMonth,
-				monthLabel,
+				monthLabel: null,
 				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,
+			monthLabel: "",
+			monthStart: false,
 			days
 		});
 	}
@@ -175,6 +248,24 @@ const weeks = $derived.by(() => {
 			});
 		}
 	}
+	// Month labels, from the days actually shown — a hidden 1st hands its
+	// label to the next shown day. The gutter names the row's month; a month
+	// that begins after the row's first day is named where it begins.
+	for (const row of result) {
+		let prev = new Date(addDaysMs(row.weekStart, -1)).getMonth();
+		row.days.forEach((day, i) => {
+			const date = new Date(day.ms);
+			const starts = date.getMonth() !== prev;
+			prev = date.getMonth();
+			const label = monthLong(day.ms, locale).toUpperCase() + (starts ? ` ${date.getFullYear()}` : "");
+			if (i === 0) {
+				row.monthLabel = label;
+				row.monthStart = starts;
+			} else if (starts) {
+				day.monthLabel = label;
+			}
+		});
+	}
 	return result;
 });
 // ─── Format helpers ─────────────────────────────────
@@ -184,7 +275,15 @@ function fmtAmPm(d) {
 // ─── Scroll to current week on mount ────────────────
 onMount(() => {
 	tick().then(() => scrollWeekIntoContainer());
-	return () => cancelAnimationFrame(syncRaf);
+	return () => {
+		cancelAnimationFrame(syncRaf);
+		// Unmounted mid-gesture (a view switch between pointerdown and
+		// pointerup): drop the window listeners and the auto-scroll frame,
+		// and the half-made drag with them.
+		const live = evDragStarted;
+		cleanupEvDrag();
+		if (live && drag?.active) drag.cancel();
+	};
 });
 // Rows grow when their events arrive, which moves every row below them —
 // including the one we centred on an empty grid. Centre once more when the
@@ -285,31 +384,47 @@ function handleUserScroll() {
 		}
 	}
 }
-/** Where a new thing lands on this day, or null when the day refuses it.
-*  A cell is a whole day here — there is no time axis to drop onto — so
-*  everything starts at the first visible hour. One rule, so an empty-cell
-*  click and a drop from outside can never disagree about a day. */
-function dayDropStart(ms) {
+/** The time at a pointer's height on a day's axis — timeTop read backwards,
+*  the pointer at the chip's middle. Half hours: the whole day is ~100px.
+*  Wall-clock ms into the local day; dayDropStart makes it an instant. */
+function pointerTime(cell, clientY) {
+	const area = cell.querySelector(".wg-cell-events");
+	if (!area) return startHour * HOUR_MS;
+	// The result is wall-clock time into the day (ms), rounded to half hours
+	// of the local day — dayDropStart turns it into an instant.
+	const y = clientY - area.getBoundingClientRect().top - CHIP_H / 2;
+	const f = Math.min(Math.max(y / (TIME_H - CHIP_H), 0), 1);
+	const hours = startHour + f * Math.max(1, endHour - startHour);
+	return Math.round(hours * 2) * (HOUR_MS / 2);
+}
+/** Where a new thing lands on this day, or null when the day (or that hour
+*  of it) refuses it. `at` is the pointer's time into the day; without one
+*  (the keyboard) it is the first hour of the axis. One rule, so an
+*  empty-cell click and a drop from outside can never disagree. */
+function dayDropStart(ms, at = startHour * HOUR_MS) {
 	if (disabledSet.has(ms)) return null;
-	const startHour = visibleHours?.[0] ?? 9;
+	const hour = at / HOUR_MS;
 	if (blockedSlots?.length) {
 		const jsDay = new Date(ms).getDay();
 		const isoDay = jsDay === 0 ? 7 : jsDay;
 		const blocked = blockedSlots.some((slot) => {
 			if (slot.day && slot.day !== isoDay) return false;
-			return startHour >= slot.start && startHour < slot.end;
+			return hour >= slot.start && hour < slot.end;
 		});
 		if (blocked) return null;
 	}
-	return new Date(ms + startHour * HOUR_MS);
+	return new Date(atHour(ms, hour));
 }
 function handleDayCellClick(ms, e) {
 	const target = e.target;
 	if (target.closest(".wg-ev, .wg-ad, .wg-ev-more")) return;
 	if (readOnly || !oneventcreate) return;
-	const start = dayDropStart(ms);
+	const at = e instanceof MouseEvent ? pointerTime(e.currentTarget, e.clientY) : undefined;
+	const start = dayDropStart(ms, at);
 	if (!start) return;
-	const durMin = minDuration ? Math.max(60, minDuration) : 60;
+	// An hour, or the minimum duration when that is longer. Blocked-slot and
+	// max-duration validation is Calendar's (ctx.oneventcreate), not ours.
+	const durMin = Math.max(60, minDuration ?? 0);
 	oneventcreate({
 		start,
 		end: new Date(start.getTime() + durMin * 6e4)
@@ -317,21 +432,31 @@ function handleDayCellClick(ms, e) {
 }
 // ─── External drop (HTML5 DnD) ──────────────────────
 // A class chip dragged in from outside the calendar; the cell it is over
-// lights up so the day it would land on is never in doubt.
-let dropDayMs = $state(null);
+// lights up and a line on its axis says the time it would land at.
+let drop = $state(null);
 function onCellDragOver(e, ms) {
-	if (!onexternaldrop || readOnly || !dayDropStart(ms)) return;
+	if (!onexternaldrop || readOnly) return;
+	const at = pointerTime(e.currentTarget, e.clientY);
+	if (!dayDropStart(ms, at)) {
+		drop = null;
+		return;
+	}
 	e.preventDefault();
 	if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
-	dropDayMs = ms;
+	if (drop?.day !== ms || drop.at !== at) drop = {
+		day: ms,
+		at
+	};
 }
-function onCellDragLeave(ms) {
-	if (dropDayMs === ms) dropDayMs = null;
+function onCellDragLeave(e, ms) {
+	// Leaving for a chip inside the same cell is not leaving the cell.
+	if (e.currentTarget.contains(e.relatedTarget)) return;
+	if (drop?.day === ms) drop = null;
 }
 function onCellDrop(e, ms) {
-	dropDayMs = null;
+	drop = null;
 	if (!onexternaldrop || readOnly || !e.dataTransfer) return;
-	const start = dayDropStart(ms);
+	const start = dayDropStart(ms, pointerTime(e.currentTarget, e.clientY));
 	if (!start) return;
 	e.preventDefault();
 	onexternaldrop({
@@ -359,6 +484,11 @@ let evCellW = 100;
 *  step is the row under the pointer, found by hit-test, not by division.
 *  Held as a timestamp: an extension can renumber rows mid-drag. */
 let evStartWeekMs = 0;
+/** The day cell the press landed in; the drag moves the event by the days
+*  between it and the cell now under the pointer. */
+let evPressDayMs = 0;
+/** The grid runs right-to-left (`dir="rtl"`): a rightward drag goes back. */
+let evRtl = false;
 const dragPreviewEvent = $derived.by(() => {
 	const payload = drag?.active && drag.mode === "move" ? drag.payload : null;
 	if (!payload?.eventId) return null;
@@ -384,15 +514,16 @@ function timedEventsForDay(day) {
 const previewKeySnapshot = 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 (!ev || inAllDayStrip(ev)) return null;
+	// Where the chip would sit: its start day (as in the week rows)
+	const dayEnd = addDaysMs(dayMs, 1);
+	const hit = ev.start.getTime() >= dayMs && ev.start.getTime() < dayEnd;
 	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;
+	if (!ev || !inAllDayStrip(ev)) return null;
 	const seg = segmentForDay(ev, dayMs);
 	if (seg) previewKeySnapshot.set(dayMs, `${ev.id}:${seg.dayIndex}`);
 	return seg;
@@ -415,7 +546,9 @@ const fit = createChipFit({
 		room: ".wg-probe .wg-ev-loc"
 	}
 });
-function chipParts(ev) {
+/** A cell that carries a month label is this much narrower (.wg-cell--month). */
+const MONTH_INSET = 22;
+function chipParts(ev, inset = 0) {
 	return fit.parts([
 		{
 			key: "time",
@@ -437,7 +570,7 @@ function chipParts(ev) {
 			priority: 1,
 			extra: CHIP_GAP_X
 		}
-	], CHIP_PAD_X);
+	], CHIP_PAD_X + inset);
 }
 function getCellWidth() {
 	const cell = el?.querySelector(".wg-cell");
@@ -468,20 +601,46 @@ function onEventPointerDown(e, ev) {
 	evDragStarted = false;
 	evDragId = ev.id;
 	evDragEvent = ev;
+	const cellMs = Number(e.currentTarget.closest("[data-day]")?.dataset.day);
+	evPressDayMs = Number.isFinite(cellMs) ? cellMs : sod(ev.start.getTime());
 	window.addEventListener("pointermove", onEvWindowPointerMove);
 	window.addEventListener("pointerup", onEvWindowPointerUp, { once: true });
 	window.addEventListener("pointercancel", onEvWindowPointerCancel, { once: true });
 }
+/** The day `cols` rendered columns away from the press cell, in the row
+*  whose start is `rowMs`. Columns are counted over the days actually shown
+*  (hideDays leaves gaps in the dates, not in the columns); running off a
+*  row's end carries into the neighbouring row. */
+function dayAtColumn(rowMs, cols) {
+	const startRow = weeks.findIndex((w) => w.weekStart === evStartWeekMs);
+	let r = weeks.findIndex((w) => w.weekStart === rowMs);
+	if (startRow < 0 || r < 0) return null;
+	const pressCol = weeks[startRow].days.findIndex((d) => d.ms === evPressDayMs);
+	if (pressCol < 0) return null;
+	let col = pressCol + cols;
+	while (col < 0 && r > 0) {
+		r--;
+		col += weeks[r].days.length;
+	}
+	while (col >= weeks[r].days.length && r < weeks.length - 1) {
+		col -= weeks[r].days.length;
+		r++;
+	}
+	const days = weeks[r].days;
+	if (!days.length) return null;
+	return days[Math.max(0, Math.min(days.length - 1, col))].ms;
+}
 /** Where the dragged event sits for the pointer's current offset. */
 function updateDragFromPointer() {
 	const ev = evDragEvent;
 	if (!drag || !ev) return;
-	const dayOffset = Math.round((evLastX - evDragStartX) / evCellW);
+	const dx = (evLastX - evDragStartX) * (evRtl ? -1 : 1);
+	const colOffset = Math.round(dx / evCellW);
 	const nowWeekMs = weekMsAtY(evLastY);
-	// A vertical row step spans one period (customDays), not always 7 days
-	const weekOffset = evStartWeekMs && nowWeekMs ? Math.round((nowWeekMs - evStartWeekMs) / (customDays * DAY_MS)) : 0;
-	const deltaMs = (dayOffset + weekOffset * customDays) * DAY_MS;
-	drag.updatePointer(new Date(ev.start.getTime() + deltaMs), new Date(ev.end.getTime() + deltaMs));
+	const target = evStartWeekMs && nowWeekMs ? dayAtColumn(nowWeekMs, colOffset) : null;
+	// Without a mapped cell (the rows are mid-rebuild) keep the press day
+	const deltaDays = target === null ? 0 : diffDays(target, evPressDayMs);
+	drag.updatePointer(new Date(addDaysMs(ev.start.getTime(), deltaDays)), new Date(addDaysMs(ev.end.getTime(), deltaDays)));
 }
 // ─── Auto-scroll under a drag ───────────────────────
 // Weeks the target is in may be off-screen — without this, moving an event
@@ -526,6 +685,7 @@ function onEvWindowPointerMove(e) {
 		evDragging = true;
 		evCellW = getCellWidth();
 		evStartWeekMs = weekMsAtY(evDragStartY);
+		evRtl = !!el && getComputedStyle(el).direction === "rtl";
 		drag.beginMove(ev.id, ev.start, ev.end);
 	}
 	setAutoScroll(e.clientY);
@@ -543,6 +703,8 @@ function cleanupEvDrag() {
 	evAnchor = undefined;
 	evDragMovable = false;
 	evStartWeekMs = 0;
+	evPressDayMs = 0;
+	evRtl = false;
 }
 function onEvWindowPointerUp() {
 	if (!evDragStarted) {
@@ -567,9 +729,28 @@ function onWindowKeydown(e) {
 // ─── "+N more" per-cell expansion ───────────────────
 let expandedCells = $state({});
 // ─── Roving tabindex for grid cells ─────────────────
-// One tabbable cell (last focused, else today); arrows move focus.
+// One tabbable cell (last focused, else today, else the first shown day of
+// the anchor week — today may be a hidden day or outside the buffer, and
+// the grid must never drop out of the tab order); arrows move focus.
 let focusedCellMs = $state(null);
-const tabbableCellMs = $derived(focusedCellMs ?? todayMs);
+const tabbableCellMs = $derived.by(() => {
+	let fallback = null;
+	let anchorFirst = null;
+	let focusedShown = false;
+	let todayShown = false;
+	for (const w of weeks) {
+		if (!w.days.length) continue;
+		fallback ??= w.days[0].ms;
+		if (w.weekStart === anchorPeriodStart) anchorFirst = w.days[0].ms;
+		for (const d of w.days) {
+			if (d.ms === focusedCellMs) focusedShown = true;
+			if (d.ms === todayMs) todayShown = true;
+		}
+	}
+	if (focusedShown) return focusedCellMs;
+	if (todayShown) return todayMs;
+	return anchorFirst ?? fallback;
+});
 function onCellKeydown(e, ms) {
 	if (e.key === "Enter" || e.key === " ") {
 		e.preventDefault();
@@ -577,15 +758,15 @@ function onCellKeydown(e, ms) {
 		return;
 	}
 	let step = 0;
-	if (e.key === "ArrowRight") step = DAY_MS;
-	else if (e.key === "ArrowLeft") step = -DAY_MS;
-	else if (e.key === "ArrowDown") step = customDays * DAY_MS;
-	else if (e.key === "ArrowUp") step = -customDays * DAY_MS;
+	if (e.key === "ArrowRight") step = 1;
+	else if (e.key === "ArrowLeft") step = -1;
+	else if (e.key === "ArrowDown") step = customDays;
+	else if (e.key === "ArrowUp") step = -customDays;
 	if (step === 0) return;
 	e.preventDefault();
 	// Walk in the step direction until a rendered cell is found
 	// (skips hidden days; bails at the buffer edge).
-	let target = ms + step;
+	let target = addDaysMs(ms, step);
 	for (let i = 0; i < 7; i++) {
 		const cell = el?.querySelector(`[data-day="${target}"]`);
 		if (cell) {
@@ -594,7 +775,7 @@ function onCellKeydown(e, ms) {
 			cell.scrollIntoView({ block: "nearest" });
 			return;
 		}
-		target += step < 0 ? -DAY_MS : DAY_MS;
+		target = addDaysMs(target, step < 0 ? -1 : 1);
 	}
 }
 </script>
@@ -611,8 +792,8 @@ function onCellKeydown(e, ms) {
 	{/if}
 {/snippet}
 
-{#snippet timedEventContent(ev: TimelineEvent)}
-	{@const parts = chipParts(ev)}
+{#snippet timedEventContent(ev: TimelineEvent, inset: number)}
+	{@const parts = chipParts(ev, inset)}
 	<EventContent event={ev}>
 		{#if parts.time}<span class="wg-ev-time">{fmtAmPm(ev.start)}</span>{/if}
 		<span class="wg-ev-title">{ev.title}</span>
@@ -624,7 +805,7 @@ function onCellKeydown(e, ms) {
 
 <svelte:window onkeydown={onWindowKeydown} />
 
-<div class="wg" class:wg--auto={autoHeight} style={style || undefined} style:height={autoHeight ? undefined : (height ? `${height}px` : '100%')} style:--wg-row-min="{ROW_MIN}px" style:--wg-chip-h="{CHIP_H}px" style:--wg-chip-gap="{CHIP_GAP}px" style:--wg-row-margin="{ROW_MARGIN}px">
+<div class="wg" class:wg--auto={autoHeight} style={style || undefined} style:height={autoHeight ? undefined : (height ? `${height}px` : '100%')} style:--wg-time-h="{TIME_H}px" style:--wg-month-inset="{MONTH_INSET}px" style:--wg-chip-h="{CHIP_H}px" style:--wg-chip-gap="{CHIP_GAP}px" style:--wg-row-margin="{ROW_MARGIN}px">
 	<div
 		class="wg-body"
 		bind:this={el}
@@ -641,6 +822,8 @@ function onCellKeydown(e, ms) {
 		</div>
 		{#each weeks as week (week.weekStart)}
 			<div class="wg-week" class:wg-week--current={week.isCurrent} data-week={week.weekStart} role="presentation">
+				<!-- Each cell's aria-label already names its date -->
+				<div class="wg-month" class:wg-month--start={week.monthStart} aria-hidden="true">{week.monthLabel}</div>
 				<div class="wg-week-body" role="presentation">
 					<!-- Day columns (header inside each cell) -->
 					<div class="wg-days" role="row">
@@ -652,33 +835,39 @@ function onCellKeydown(e, ms) {
 							{@const hiddenCount = Math.max(0, visibleTimedEvents.length - timedCap)}
 							{@const previewTimedEvent = dragPreviewTimedForDay(day.ms)}
 							{@const previewSegment = dragPreviewSegmentForDay(day.ms)}
+							{@const shownTimed = visibleTimedEvents.slice(0, isExpanded ? visibleTimedEvents.length : timedCap)}
+							{@const tops = chipTops(shownTimed, day.ms)}
+							{@const nowY = day.isToday ? nowTop(shownTimed, tops, day.ms) : null}
+							{@const inset = day.monthLabel ? MONTH_INSET : 0}
 							<div
 								class="wg-cell"
+								class:wg-cell--month={!!day.monthLabel}
 								class:wg-cell--today={day.isToday}
 								class:wg-cell--past={day.isPast}
 								class:wg-cell--weekend={day.isWeekend}
 								class:wg-cell--disabled={disabledSet.has(day.ms)}
 								class:wg-cell--expanded={isExpanded}
-								class:wg-cell--drop={dropDayMs === day.ms}
+								class:wg-cell--drop={drop?.day === day.ms}
 								role="gridcell"
 								data-day={day.ms}
 								tabindex={day.ms === tabbableCellMs ? 0 : -1}
 								aria-label="{new Date(day.ms).toLocaleDateString(locale ?? 'en-US', { weekday: 'long', month: 'short', day: 'numeric' })}{day.isToday ? ` (${L.today.toLowerCase()})` : ''}, {L.nEvents(day.events.length + day.allDaySegments.length)}"
 								onclick={(e) => handleDayCellClick(day.ms, e)}
 								ondragover={(e) => onCellDragOver(e, day.ms)}
-								ondragleave={() => onCellDragLeave(day.ms)}
+								ondragleave={(e) => onCellDragLeave(e, day.ms)}
 								ondrop={(e) => onCellDrop(e, day.ms)}
 								onfocus={() => { focusedCellMs = day.ms; }}
 								onkeydown={(e) => onCellKeydown(e, day.ms)}
 							>
-								<!-- Day label in top-right corner -->
+								{#if day.monthLabel}
+									<div class="wg-month wg-month--start wg-month--inset" aria-hidden="true">{day.monthLabel}</div>
+								{/if}
+								<!-- Day label in top-right corner: "MON 23", a pill today -->
 								<div class="wg-cell-hd" class:wg-cell-hd--today={day.isToday}>
+									<span class="wg-day-wd">{weekdayShort(day.ms, locale)}</span>
 									{#if showDates}
-										<span class="wg-day-num" class:wg-day-num--today={day.isToday}>
-											{day.dayNum}
-										</span>
+										<span class="wg-day-num">{day.dayNum}</span>
 									{/if}
-									<span class="wg-day-wd">{weekdayShort(day.ms, locale)}</span>
 								</div>
 
 								<!-- Custom day header snippet -->
@@ -688,27 +877,94 @@ function onCellKeydown(e, ms) {
 									</div>
 								{/if}
 
-								<!-- Blocked slots indicator -->
-								{#if blockedSlots?.length}
-									{@const jsDay = new Date(day.ms).getDay()}
-									{@const isoDay = jsDay === 0 ? 7 : jsDay}
-									{#each blockedSlots as slot, i (i)}
-										{#if !slot.day || slot.day === isoDay}
-											{@const slotRange = `${_fmtTime(new Date(day.ms + slot.start * HOUR_MS), locale)} – ${_fmtTime(new Date(day.ms + slot.end * HOUR_MS), locale)}`}
-											<div
-												class="wg-blocked"
-												title="{slot.label ? `${slot.label}, ` : ''}{slotRange}"
-												aria-label="{slot.label || 'Unavailable'}, {slotRange}"
-											>
-												{#if slot.label}
-													<span class="wg-blocked-label">{slot.label}</span>
-												{/if}
-											</div>
-										{/if}
+								<!-- Timed events, on the day's time axis -->
+								<div class="wg-cell-events">
+									{#if blockedSlots?.length}
+										{@const jsDay = new Date(day.ms).getDay()}
+										{@const isoDay = jsDay === 0 ? 7 : jsDay}
+										{#each blockedSlots as slot, i (i)}
+											{#if (!slot.day || slot.day === isoDay) && slot.end > startHour && slot.start < endHour}
+												{@const slotRange = `${_fmtTime(new Date(atHour(day.ms, slot.start)), locale)} – ${_fmtTime(new Date(atHour(day.ms, slot.end)), locale)}`}
+												{@const bandTop = timeTop(slot.start)}
+												{@const bandH = Math.max(14, timeTop(slot.end) - bandTop)}
+												<!-- A chip over the band would cut its label in half: the title keeps it -->
+												{@const covered = tops.some((t) => t < bandTop + bandH && t + CHIP_H > bandTop)}
+												<div
+													class="wg-blocked"
+													style:top="{bandTop}px"
+													style:height="{bandH}px"
+													title="{slot.label ? `${slot.label}, ` : ''}{slotRange}"
+													aria-label="{slot.label || L.unavailable}, {slotRange}"
+												>
+													{#if slot.label && !covered}
+														<span class="wg-blocked-label">{slot.label}</span>
+													{/if}
+												</div>
+											{/if}
+										{/each}
+									{/if}
+									{#each shownTimed as ev, i (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}
+											class:wg-ev--dragging={evDragging && evDragId === ev.id}
+											class:wg-ev--readonly={ev.data?.readOnly}
+											class:wg-ev--cancelled={ev.status === 'cancelled'}
+											class:wg-ev--tentative={ev.status === 'tentative'}
+											class:wg-ev--full={ev.status === 'full'}
+											class:wg-ev--limited={ev.status === 'limited'}
+											style:--ev-color={ev.color ?? 'var(--dt-accent)'}
+											style:margin-top="{tops[i] - (i ? tops[i - 1] + CHIP_H : 0)}px"
+											role="button"
+											tabindex="0"
+											aria-label="{ev.title}, {fmtAmPm(ev.start)} – {fmtAmPm(ev.end)}{statusText(ev)}{ev.start.getTime() <= clock.tick && ev.end.getTime() > clock.tick ? ` (${L.inProgress})` : ''}"
+											onpointerdown={(e) => onEventPointerDown(e, ev)}
+											onpointerenter={() => oneventhover?.(ev)}
+											onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(ev, e.currentTarget.getBoundingClientRect()); } }}
+										>
+											{@render timedEventContent(ev, inset)}
+										</div>
 									{/each}
-								{/if}
+									{#if hiddenCount > 0}
+										<button
+											type="button"
+											class="wg-ev-more"
+											aria-expanded={isExpanded}
+											onclick={(e) => { e.stopPropagation(); expandedCells[day.ms] = !isExpanded; }}
+										>{isExpanded ? L.showLess : L.nMore(hiddenCount)}</button>
+									{/if}
+									{#if previewTimedEvent}
+										<!-- The ghost floats at its own time; it pushes nothing aside -->
+										<div
+											class="wg-ev wg-ev--drag-preview"
+											style:--ev-color={previewTimedEvent.color ?? 'var(--dt-accent)'}
+											style:top="{timeTop(hourOf(previewTimedEvent.start.getTime(), day.ms))}px"
+											aria-hidden="true"
+											in:previewReceive={{ key: previewKeySnapshot.get('timed') ?? '' }}
+											out:previewSend={{ key: previewKeySnapshot.get('timed') ?? '' }}
+										>
+											{@render timedEventContent(previewTimedEvent, inset)}
+										</div>
+									{/if}
+									{#if drop?.day === day.ms}
+										<div class="wg-now wg-drop" style:top="{timeTop(drop.at / HOUR_MS) + CHIP_H / 2}px" aria-hidden="true">
+											<span class="wg-now-time">{fmtAmPm(new Date(atHour(day.ms, drop.at / HOUR_MS)))}</span>
+										</div>
+									{/if}
+									{#if nowY !== null}
+										<div class="wg-now" style:top="{nowY}px" aria-hidden="true">
+											<span class="wg-now-time">{fmtAmPm(new Date(clock.tick))}</span>
+										</div>
+									{/if}
+								</div>
 
-								<!-- All-day / multi-day events -->
+								<!-- All-day / multi-day events, under the day (as Hey) -->
 								{#if visibleAllDaySegments.length > 0 || previewSegment}
 									<div class="wg-allday">
 										{#each visibleAllDaySegments as seg (seg.ev.id)}
@@ -749,56 +1005,6 @@ function onCellKeydown(e, ms) {
 										{/if}
 									</div>
 								{/if}
-
-								<!-- Timed events -->
-								<div class="wg-cell-events">
-									{#each visibleTimedEvents.slice(0, isExpanded ? visibleTimedEvents.length : timedCap) 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}
-											class:wg-ev--dragging={evDragging && evDragId === ev.id}
-											class:wg-ev--readonly={ev.data?.readOnly}
-											class:wg-ev--cancelled={ev.status === 'cancelled'}
-											class:wg-ev--tentative={ev.status === 'tentative'}
-											class:wg-ev--full={ev.status === 'full'}
-											class:wg-ev--limited={ev.status === 'limited'}
-											style:--ev-color={ev.color ?? 'var(--dt-accent)'}
-											role="button"
-											tabindex="0"
-											aria-label="{ev.title}, {fmtAmPm(ev.start)} – {fmtAmPm(ev.end)}{ev.status === 'cancelled' ? ` (cancelled)` : ''}{ev.status === 'tentative' ? ` (tentative)` : ''}{ev.status === 'full' ? ` (full)` : ''}{ev.status === 'limited' ? ` (limited)` : ''}{ev.start.getTime() <= clock.tick && ev.end.getTime() > clock.tick ? ` (${L.inProgress})` : ''}"
-											onpointerdown={(e) => onEventPointerDown(e, ev)}
-											onpointerenter={() => oneventhover?.(ev)}
-											onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(ev, e.currentTarget.getBoundingClientRect()); } }}
-										>
-											{@render timedEventContent(ev)}
-										</div>
-									{/each}
-									{#if previewTimedEvent}
-										<div
-											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>
-									{/if}
-								</div>
-								{#if hiddenCount > 0}
-									<button
-										type="button"
-										class="wg-ev-more"
-										aria-expanded={isExpanded}
-										onclick={(e) => { e.stopPropagation(); expandedCells[day.ms] = !isExpanded; }}
-									>{isExpanded ? L.showLess : L.nMore(hiddenCount)}</button>
-								{/if}
 							</div>
 						{/each}
 					</div>
@@ -887,7 +1093,6 @@ function onCellKeydown(e, ms) {
 		display: flex;
 		flex-direction: column;
 		min-width: 90px;
-		min-height: var(--wg-row-min, 170px);
 		box-sizing: border-box;
 		padding: 4px 4px 8px;
 		border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
@@ -896,6 +1101,34 @@ function onCellKeydown(e, ms) {
 	}
 
 	.wg-cell:last-child { border-right: none; }
+	/* The inset is on the contents, not the cell's padding: flex adds padding
+	   to a basis-0 cell, and that one column would come out wider. */
+	.wg-cell--month .wg-cell-events,
+	.wg-cell--month .wg-allday { margin-left: var(--wg-month-inset, 22px); }
+
+	/* ─── Month labels (vertical, read bottom-to-top) ─── */
+	.wg-month {
+		flex: 0 0 22px;
+		writing-mode: vertical-rl;
+		transform: rotate(180deg);
+		text-align: end; /* the rotation puts the end at the top */
+		padding: 6px 0;
+		font: 700 11px / 22px var(--dt-sans, system-ui, sans-serif);
+		letter-spacing: 0.08em;
+		white-space: nowrap;
+		overflow: hidden;
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+	}
+	.wg-week--current .wg-month,
+	.wg-month--start {
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+	}
+	.wg-month--inset {
+		position: absolute;
+		top: 0;
+		left: 2px;
+		pointer-events: none;
+	}
 	.wg-cell:hover { background: var(--dt-hover, rgba(0, 0, 0, 0.015)); }
 
 	.wg-cell--today { background: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
@@ -933,9 +1166,15 @@ function onCellKeydown(e, ms) {
 	}
 
 	/* ─── Blocked slot indicator ─────────────────────── */
+	/* A band on the time axis, behind the chips */
 	.wg-blocked {
+		position: absolute;
+		left: 0;
+		right: 0;
+		box-sizing: border-box;
+		overflow: hidden;
 		display: flex;
-		align-items: center;
+		align-items: flex-start;
 		gap: 3px;
 		padding: 2px 4px;
 		border-radius: 3px;
@@ -946,8 +1185,6 @@ function onCellKeydown(e, ms) {
 			transparent 3px,
 			transparent 6px
 		);
-		margin-bottom: 2px;
-		min-height: 14px;
 	}
 
 	.wg-blocked-label {
@@ -965,12 +1202,13 @@ function onCellKeydown(e, ms) {
 
 	/* ─── Cell header (day label top-right) ──────────── */
 	.wg-cell-hd {
+		align-self: flex-end;
 		display: flex;
-		align-items: center;
-		justify-content: flex-end;
+		align-items: baseline;
 		gap: 4px;
-		padding: 4px 5px 2px 0;
-		margin-bottom: 2px;
+		padding: 3px 7px;
+		margin: 1px 0 2px;
+		border-radius: 999px;
 	}
 
 	.wg-day-wd {
@@ -984,11 +1222,6 @@ function onCellKeydown(e, ms) {
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 
-	.wg-cell-hd--today .wg-day-wd {
-		color: var(--dt-accent, #2563eb);
-		font-weight: 600;
-	}
-
 	.wg-day-num {
 		font: 700 14px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
@@ -998,9 +1231,13 @@ function onCellKeydown(e, ms) {
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 	}
 
-	.wg-day-num--today {
-		color: var(--dt-accent, #2563eb);
-		font-weight: 900;
+	/* Today's pill — after the week rules above, which it must beat */
+	.wg-cell-hd--today {
+		background: var(--dt-accent, #2563eb);
+	}
+	.wg-cell-hd--today .wg-day-wd,
+	.wg-cell-hd--today .wg-day-num {
+		color: var(--dt-btn-text, #fff);
 	}
 
 	/* ─── All-day / multi-day events ─────────────────── */
@@ -1008,7 +1245,7 @@ function onCellKeydown(e, ms) {
 		display: flex;
 		flex-direction: column;
 		gap: var(--wg-chip-gap, 3px);
-		margin-bottom: var(--wg-chip-gap, 3px);
+		margin-top: var(--wg-chip-gap, 3px);
 		flex-shrink: 0;
 	}
 
@@ -1085,14 +1322,49 @@ function onCellKeydown(e, ms) {
 	}
 
 	/* ─── Events ─────────────────────────────────────── */
+	/* The day's time axis: chips carry their own margin-top (chipTops), and
+	   the area fills the cell, so the all-day bars line up at the bottom. */
 	.wg-cell-events {
 		position: relative;
 		display: flex;
 		flex-direction: column;
-		gap: var(--wg-chip-gap, 3px);
+		flex: 1 0 auto;
+		min-height: var(--wg-time-h, 100px);
+	}
+
+	.wg-now {
+		position: absolute;
+		left: 0;
+		right: 0;
+		z-index: 2;
+		display: flex;
+		align-items: center;
+		gap: 3px;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
+	.wg-now::after {
+		content: '';
+		flex: 1;
+		border-top: 1px dashed var(--dt-accent, #2563eb);
+	}
+	.wg-now-time {
+		font: 500 9px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-accent, #2563eb);
+	}
+	/* Where a dragged-in class would land: the now-line's shape, solid */
+	.wg-drop {
+		z-index: 3;
+	}
+	.wg-drop::after {
+		border-top-style: solid;
+	}
+	.wg-drop .wg-now-time {
+		font-weight: 600;
 	}
 
 	.wg-ev {
+		position: relative; /* above the blocked bands */
 		display: flex;
 		align-items: center;
 		flex-wrap: nowrap;
@@ -1113,7 +1385,9 @@ function onCellKeydown(e, ms) {
 	}
 
 	.wg-ev--drag-preview {
-		position: relative;
+		position: absolute;
+		left: 0;
+		right: 0;
 		z-index: 8;
 		opacity: 0.95;
 		pointer-events: none;