@nomideusz/svelte-calendar 1.2.0 → 1.4.0

package/dist/views/planner/PlannerWeek.svelte

@@ -21,7 +21,8 @@ import { createClock } from "../../core/clock.svelte.js";
 import { fitParts } from "../../text-fit.js";
 import { HOUR_MS, sod, addDaysMs, diffDays } from "../../core/time.js";
 import { startOfWeek as sowFn, isAllDay, segmentForDay } from "../../core/time.js";
-import { fmtHParts, fmtTime, fmtDuration, weekdayShort, weekdayLong } from "../../core/locale.js";
+import { fmtHParts, fmtTime, fmtDuration, fmtWeekRange, weekdayShort, weekdayLong } from "../../core/locale.js";
+import { dateLong } from "../shared/format.js";
 let { mode = "week", mondayStart = true, locale, height = 520, events = [], style = "", focusDate, oneventclick, oneventcreate, onexternaldrop, selectedEventId = null, readOnly = false, visibleHours } = $props();
 // ── Context ────────────────────────────────────────
 const ctx = useCalendarContext();
@@ -122,6 +123,7 @@ const dayCols = $derived.by(() => {
 		cols.push({
 			ms,
 			isToday: ms === todayMs,
+			markToday: showDates && ms === todayMs,
 			isPast: equalDays ? false : ms < todayMs,
 			isWeekend: dow === 0 || dow === 6,
 			isDisabled: disabledSet.has(ms),
@@ -301,8 +303,12 @@ const weekIsEmpty = $derived(!events.some((ev) => ev.start.getTime() < weekEndMs
 // Week with today → current time minus ~1h of context; otherwise the
 // visibleHours start or 08:00, whichever is later. Lands on a whole hour,
 // with room for its label (centred on the line) below the sticky top.
+// An event running across that hour line would be sliced under the sticky
+// top, so the scroll starts at that event's hour instead.
 $effect(() => {
 	void weekStartMs;
+	void startHour;
+	void endHour;
 	const el = scrollEl;
 	if (!el) return;
 	untrack(() => {
@@ -313,7 +319,26 @@ $effect(() => {
 		} else {
 			targetHour = Math.max(startHour, Math.min(8, endHour - 1));
 		}
-		el.scrollTop = Math.max(0, (Math.floor(targetHour) - startHour) * HOUR_H - LABEL_ROOM);
+		let hour = Math.floor(targetHour);
+		// Moving up can slice an earlier event on another day, so repeat
+		// until no block crosses the line.
+		// ponytail: looks back at most 2 h, so a long block can't drag the view to dawn.
+		const floorY = (hour - 2 - startHour) * HOUR_H;
+		for (let moved = true; moved;) {
+			moved = false;
+			const line = (hour - startHour) * HOUR_H;
+			for (const day of layoutByDay.values()) {
+				for (const p of day) {
+					if (p.top < line && p.top + p.height > line && p.top >= floorY) {
+						hour = Math.floor(startHour + p.top / HOUR_H);
+						moved = true;
+						break;
+					}
+				}
+				if (moved) break;
+			}
+		}
+		el.scrollTop = Math.max(0, (hour - startHour) * HOUR_H - LABEL_ROOM);
 	});
 });
 // ── Pointer coalescing ─────────────────────────────
@@ -389,11 +414,12 @@ function clampToDayBand(ms, dayMs) {
 	return Math.max(atHour(dayMs, startHour), Math.min(atHour(dayMs, endHour), ms));
 }
 // ── Blocked slot helpers ───────────────────────────
+/** The blocked slot covering `hour` on the day, if any (truthy = blocked). */
 function isBlockedAt(dayMs, hour) {
-	if (!blockedSlots?.length) return false;
+	if (!blockedSlots?.length) return undefined;
 	const jsDay = new Date(dayMs).getDay();
 	const isoDay = jsDay === 0 ? 7 : jsDay;
-	return blockedSlots.some((slot) => {
+	return blockedSlots.find((slot) => {
 		if (slot.day && slot.day !== isoDay) return false;
 		return hour >= slot.start && hour < slot.end;
 	});
@@ -640,11 +666,14 @@ function onColKeydown(e, i) {
 	const day = dayCols[i];
 	if (e.key === "Enter" || e.key === " ") {
 		e.preventDefault();
-		if (!oneventcreate || readOnly || day.isDisabled) return;
+		if (!oneventcreate || readOnly) return;
+		// Say why nothing was created, through the calendar's status line.
+		if (day.isDisabled) return ctx.announce(`${dateLong(day.ms, locale)}, ${L.unavailable}`);
 		const step = Math.max(1, ctx.snapInterval) / 60;
 		const want = day.isToday ? snapHour(nowFracHour, "floor") + step : 9;
 		const hour = Math.min(Math.max(want, startHour), endHour - step);
-		if (isBlockedAt(day.ms, hour)) return;
+		const slot = isBlockedAt(day.ms, hour);
+		if (slot) return ctx.announce(`${slot.label || L.unavailable}, ${blockedRangeLabel(day.ms, slot.start, slot.end)}`);
 		const startMs = atHour(day.ms, hour);
 		oneventcreate({
 			start: new Date(startMs),
@@ -899,7 +928,9 @@ function onWindowKeydown(e) {
 	style:--tw-col-min="{MIN_COL_W}px"
 	style:height={autoHeight ? undefined : (height ? `${height}px` : '100%')}
 	role="region"
-	aria-label={L.weekAhead}
+	aria-label="{singleDay ? L.dayPlanner : L.weekAhead}{dayCols.length
+		? `, ${singleDay ? dateLong(dayCols[0].ms, locale) : fmtWeekRange(dayCols[0].ms, locale, dayCols[dayCols.length - 1].ms)}`
+		: ''}"
 >
 	<div class="tw-scroll" bind:this={scrollEl}>
 		<div class="tw-inner" style:min-width="{innerMinWidth}px">
@@ -912,12 +943,12 @@ function onWindowKeydown(e) {
 					{#each dayCols as day (day.ms)}
 						<div
 							class="tw-hd"
-							class:tw-hd--today={day.isToday}
-							aria-current={day.isToday ? 'date' : undefined}
+							class:tw-hd--today={day.markToday}
+							aria-current={day.markToday ? 'date' : undefined}
 						>
 							<span class="tw-hd-wd">{singleDay ? weekdayLong(day.ms, locale) : weekdayShort(day.ms, locale)}</span>
 							{#if showDates}
-								<span class="tw-hd-num" class:tw-hd-num--today={day.isToday}>{day.dayNum}</span>
+								<span class="tw-hd-num" class:tw-hd-num--today={day.markToday}>{day.dayNum}</span>
 							{/if}
 							{#if dayHeaderSnippet}
 								<div class="tw-hd-custom">
@@ -938,7 +969,7 @@ function onWindowKeydown(e) {
 							{@const segs = allDayByDay.get(day.ms) ?? []}
 							{@const isExpanded = adExpanded[day.ms] ?? false}
 							{@const shown = isExpanded ? segs : segs.slice(0, ALLDAY_MAX)}
-							<div class="tw-ad-cell" class:tw-ad-cell--today={day.isToday}>
+							<div class="tw-ad-cell" class:tw-ad-cell--today={day.markToday}>
 								{#each shown as seg (seg.ev.id)}
 									{@render allDayChip(seg)}
 								{/each}
@@ -1011,14 +1042,14 @@ function onWindowKeydown(e) {
 						<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 						<div
 							class="tw-col"
-							class:tw-col--today={day.isToday}
+							class:tw-col--today={day.markToday}
 							class:tw-col--past={day.isPast}
 							class:tw-col--weekend={day.isWeekend}
 							class:tw-col--disabled={day.isDisabled}
 							data-day={day.ms}
 							role={colsCreate ? 'group' : undefined}
-							aria-label={colsCreate ? `${weekdayLong(day.ms, locale)} ${day.dayNum}, ${L.createEvent}` : undefined}
-							aria-keyshortcuts={colsCreate ? 'Enter' : undefined}
+							aria-label={colsCreate ? `${dateLong(day.ms, locale)}, ${day.isDisabled ? L.unavailable : L.createEvent}` : undefined}
+							aria-keyshortcuts={colsCreate && !day.isDisabled ? 'Enter' : undefined}
 							tabindex={colsCreate ? (day.ms === tabbableColMs ? 0 : -1) : undefined}
 							onfocusin={() => (focusedColMs = day.ms)}
 							onkeydown={colsCreate ? (e) => onColKeydown(e, di) : undefined}
@@ -1064,6 +1095,7 @@ function onWindowKeydown(e) {
 									class:tw-ev--past={p.ev.end.getTime() < clock.tick}
 									class:tw-ev--short={p.height < 44}
 									class:tw-ev--compact={p.height < 34}
+									class:tw-ev--on-now={weekHasToday && nowY !== null && p.top < nowY && p.top + p.height > nowY}
 									style:top="{p.top}px"
 									style:height="{p.height}px"
 									style:left="calc({(p.col / p.totalCols) * 100}% + 1px)"
@@ -1121,8 +1153,8 @@ function onWindowKeydown(e) {
 									style:top="{ghost.top}px"
 									style:height="{ghost.height}px"
 									style:--ev-color={ghost.create
-										? 'var(--dt-accent, #2563eb)'
-										: (movingEvent?.color ?? 'var(--dt-accent, #2563eb)')}
+										? 'var(--dt-accent, #1d4fd7)'
+										: (movingEvent?.color ?? 'var(--dt-event, var(--dt-accent))')}
 									aria-hidden="true"
 								>
 									{#if ghost.showTime}
@@ -1138,9 +1170,8 @@ function onWindowKeydown(e) {
 
 							<!-- Now line (today's column only) -->
 							{#if day.isToday && nowY !== null}
-								<div class="tw-now" style:top="{nowY}px" aria-label={L.currentTime}>
-									<span class="tw-now-dot" aria-hidden="true"></span>
-								</div>
+								<div class="tw-now" style:top="{nowY}px" aria-label={L.currentTime}></div>
+								<span class="tw-now-dot" style:top="{nowY}px" aria-hidden="true"></span>
 							{/if}
 						</div>
 					{/each}
@@ -1166,7 +1197,7 @@ function onWindowKeydown(e) {
 		overflow: hidden;
 		user-select: none;
 		font-variant-numeric: tabular-nums;
-		background: var(--dt-paper, none), var(--dt-bg, #ffffff);
+		background: var(--dt-paper, none), var(--dt-bg, #efebe9);
 		-webkit-tap-highlight-color: transparent;
 	}
 	.tw--auto { overflow: visible; }
@@ -1183,12 +1214,12 @@ function onWindowKeydown(e) {
 		overscroll-behavior-x: contain;
 		overscroll-behavior-y: auto;
 		scrollbar-width: thin;
-		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
+		scrollbar-color: var(--dt-scrollbar, rgba(15, 15, 15, 0.1)) transparent;
 	}
 	.tw--auto .tw-scroll { overflow-y: visible; }
 	.tw-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
 	.tw-scroll::-webkit-scrollbar-thumb {
-		background: var(--dt-scrollbar, rgba(0, 0, 0, 0.1));
+		background: var(--dt-scrollbar, rgba(15, 15, 15, 0.1));
 		border-radius: 4px;
 	}
 	.tw-scroll::-webkit-scrollbar-track { background: transparent; }
@@ -1204,8 +1235,8 @@ function onWindowKeydown(e) {
 		position: sticky;
 		top: 0;
 		z-index: 30;
-		background: var(--dt-paper, none), var(--dt-bg, #ffffff);
-		border-bottom: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		background: var(--dt-paper, none), var(--dt-bg, #efebe9);
+		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 	}
 
 	/* ─── Day header row ─────────────────────────────── */
@@ -1218,7 +1249,7 @@ function onWindowKeydown(e) {
 		position: sticky;
 		left: 0;
 		z-index: 2;
-		background: var(--dt-paper, none), var(--dt-bg, #ffffff);
+		background: var(--dt-paper, none), var(--dt-bg, #efebe9);
 	}
 
 	.tw-hd {
@@ -1229,17 +1260,17 @@ function onWindowKeydown(e) {
 		align-items: center;
 		gap: 4px;
 		padding: 14px 4px 12px;
-		border-left: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-left: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 	}
 
 	.tw-hd-wd {
 		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.tw-hd--today .tw-hd-wd {
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 
 	/* The day number is the typography of the grid: large, regular weight. */
@@ -1250,11 +1281,11 @@ function onWindowKeydown(e) {
 		font: 400 40px/1 var(--dt-sans, system-ui, sans-serif);
 		font-stretch: 90%;
 		letter-spacing: -0.02em;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 	}
 	/* Today: the numeral in the accent, nothing else. */
 	.tw-hd-num--today {
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 	}
 
 	.tw-hd-custom {
@@ -1265,7 +1296,7 @@ function onWindowKeydown(e) {
 	/* ─── All-day strip ──────────────────────────────── */
 	.tw-allday {
 		display: flex;
-		border-top: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-top: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 	}
 
 	.tw-ad-gutter {
@@ -1276,15 +1307,16 @@ function onWindowKeydown(e) {
 		position: sticky;
 		left: 0;
 		z-index: 2;
-		background: var(--dt-paper, none), var(--dt-bg, #ffffff);
+		background: var(--dt-paper, none), var(--dt-bg, #efebe9);
 		display: flex;
 		align-items: flex-start;
 		justify-content: flex-end;
 		padding: 6px 8px 6px 0;
 	}
 	.tw-ad-gutter-lb {
-		font: 500 10px/1.2 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);
+		letter-spacing: 0.08em;
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 		text-align: right;
 	}
 
@@ -1295,9 +1327,9 @@ function onWindowKeydown(e) {
 		flex-direction: column;
 		gap: 2px;
 		padding: 4px 0 5px;
-		border-left: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-left: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 	}
-	.tw-ad-cell--today { background: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
+	.tw-ad-cell--today { background: var(--dt-today-bg, rgba(29, 79, 215, 0.04)); }
 
 	.tw-ad {
 		appearance: none;
@@ -1333,11 +1365,11 @@ function onWindowKeydown(e) {
 		text-decoration: line-through;
 	}
 	.tw-ad--cancelled {
-		background: color-mix(in srgb, var(--ev-color) 55%, var(--dt-bg, #fff));
+		background: color-mix(in srgb, var(--ev-color) 55%, var(--dt-bg, #efebe9));
 	}
 	.tw-ad:focus-visible {
 		outline: none;
-		box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: inset 0 0 0 2px var(--dt-btn-text, #fff), 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 
 	.tw-ad-title {
@@ -1350,7 +1382,7 @@ function onWindowKeydown(e) {
 		min-width: 0;
 	}
 	.tw-ad-span {
-		font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
 		color: inherit;
 		opacity: 0.75;
@@ -1380,19 +1412,19 @@ function onWindowKeydown(e) {
 		appearance: none;
 		background: none;
 		border: none;
-		border-radius: 3px;
+		border-radius: 0;
 		text-align: left;
 		align-self: flex-start;
-		font: 500 10px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		padding: 2px 6px;
 		cursor: pointer;
 		-webkit-tap-highlight-color: transparent;
 	}
-	.tw-ad-more:hover { color: var(--dt-text, rgba(0, 0, 0, 0.87)); }
+	.tw-ad-more:hover { color: var(--dt-text, rgba(15, 15, 15, 0.87)); }
 	.tw-ad-more:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 	}
 
 	/* ─── Grid body ──────────────────────────────────── */
@@ -1407,8 +1439,8 @@ function onWindowKeydown(e) {
 		position: sticky;
 		left: 0;
 		z-index: 20;
-		background: var(--dt-paper, none), var(--dt-bg, #ffffff);
-		border-right: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		background: var(--dt-paper, none), var(--dt-bg, #efebe9);
+		border-right: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 	}
 
 	/* Timetable hour: the numeral carries the rank, the suffix sits raised
@@ -1425,7 +1457,7 @@ function onWindowKeydown(e) {
 		font-stretch: 85%;
 		font-variant-numeric: tabular-nums;
 		letter-spacing: -0.02em;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		white-space: nowrap;
 	}
 	.tw-gutter-lb::after {
@@ -1435,7 +1467,7 @@ function onWindowKeydown(e) {
 		height: 1px;
 		margin-left: 5px;
 		align-self: center;
-		background: var(--dt-border-day, rgba(0, 0, 0, 0.3));
+		background: var(--dt-border-day, rgba(15, 15, 15, 0.3));
 	}
 	.tw-gutter-lb--under {
 		visibility: hidden;
@@ -1445,7 +1477,7 @@ function onWindowKeydown(e) {
 		font-weight: 500;
 		line-height: 1;
 		letter-spacing: 0;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 
 	/* The clock beside the now line, and the drag's edges while it lasts —
@@ -1457,16 +1489,16 @@ function onWindowKeydown(e) {
 		transform: translateY(-50%);
 		padding: 2px 4px;
 		border-radius: 0;
-		background: var(--dt-surface, var(--dt-bg, #fff));
+		background: var(--dt-surface, var(--dt-bg, #efebe9));
 		font: 500 11px/1.2 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-accent, #2563eb);
+		color: var(--dt-accent, #1d4fd7);
 		white-space: nowrap;
 		z-index: 2;
 	}
 	/* The clock is a reversed plate on the accent, like a board's live time. */
 	.tw-gutter-now {
-		background: var(--dt-accent, #2563eb);
+		background: var(--dt-accent, #1d4fd7);
 		color: var(--dt-btn-text, #ffffff);
 	}
 
@@ -1491,7 +1523,7 @@ function onWindowKeydown(e) {
 		left: 0;
 		right: 0;
 		height: 1px;
-		background: var(--dt-border, rgba(0, 0, 0, 0.08));
+		background: var(--dt-border, rgba(15, 15, 15, 0.08));
 	}
 	.tw-line--half { opacity: 0.4; }
 	.tw-now-week {
@@ -1499,7 +1531,7 @@ function onWindowKeydown(e) {
 		left: 0;
 		right: 0;
 		height: 0;
-		border-top: 2px solid var(--dt-accent, #2563eb);
+		border-top: 2px solid var(--dt-accent, #1d4fd7);
 		opacity: 0.85;
 		transform: translateY(-1px);
 	}
@@ -1509,35 +1541,38 @@ function onWindowKeydown(e) {
 		flex: 1 1 0;
 		min-width: var(--tw-col-min, 110px);
 		position: relative;
-		border-left: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
+		border-left: 1px solid var(--dt-border, rgba(15, 15, 15, 0.08));
 		box-sizing: border-box;
 	}
 	.tw-col:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
+		outline: 2px solid var(--dt-accent, #1d4fd7);
 		outline-offset: -2px;
 	}
 	/* The gutter's right border already bounds the first column */
 	.tw-lines + .tw-col { border-left: none; }
 
-	.tw-col--today { background: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
+	/* --tw-col-wash: the column's ground, repeated under an event that the
+	   now line crosses (that event is opaque, so the line runs beneath it). */
+	.tw-col { background: var(--tw-col-wash, transparent); }
+	.tw-col--today { --tw-col-wash: var(--dt-today-bg, rgba(29, 79, 215, 0.04)); }
 	/* Dim past days with a wash, never a subtree opacity (event contrast) */
 	.tw-col--past {
-		background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent);
+		--tw-col-wash: color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent);
 	}
 	/* What has already happened steps back; a cancelled block keeps its own look. */
 	.tw-ev--past:not(.tw-ev--cancelled) {
 		opacity: 0.78;
 	}
 	.tw-col--weekend:not(.tw-col--today):not(.tw-col--past) {
-		background: var(--dt-weekend-bg, rgba(0, 0, 0, 0.012));
+		--tw-col-wash: var(--dt-weekend-bg, rgba(15, 15, 15, 0.012));
 	}
 	.tw-col--disabled {
 		background: repeating-linear-gradient(
 			45deg,
 			transparent,
 			transparent 6px,
-			var(--dt-border, rgba(0, 0, 0, 0.08)) 6px,
-			var(--dt-border, rgba(0, 0, 0, 0.08)) 7px
+			var(--dt-border, rgba(15, 15, 15, 0.08)) 6px,
+			var(--dt-border, rgba(15, 15, 15, 0.08)) 7px
 		) !important;
 	}
 
@@ -1549,8 +1584,8 @@ function onWindowKeydown(e) {
 		z-index: 2;
 		background: repeating-linear-gradient(
 			-45deg,
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent),
-			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 4px,
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent),
+			color-mix(in srgb, var(--dt-text, rgba(15, 15, 15, 0.87)) 4%, transparent) 4px,
 			transparent 4px,
 			transparent 8px
 		);
@@ -1561,8 +1596,8 @@ function onWindowKeydown(e) {
 		overflow: hidden;
 	}
 	.tw-blocked-lb {
-		font: 500 10px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 		white-space: nowrap;
@@ -1570,24 +1605,28 @@ function onWindowKeydown(e) {
 	}
 
 	/* ─── Now line ───────────────────────────────────── */
+	/* Under the events (z 6): the one it crosses is opaque (.tw-ev--on-now),
+	   so the line never strikes through a title. The dot stays on top. */
 	.tw-now {
 		position: absolute;
 		left: 0;
 		right: 0;
 		height: 0;
-		border-top: 2px solid var(--dt-accent, #2563eb);
-		z-index: 12;
+		border-top: 2px solid var(--dt-accent, #1d4fd7);
+		z-index: 5;
 		pointer-events: none;
 		transform: translateY(-1px);
 	}
 	.tw-now-dot {
 		position: absolute;
 		left: -4px;
-		top: -5px;
 		width: 8px;
 		height: 8px;
+		margin-top: -4px;
 		border-radius: 50%;
-		background: var(--dt-accent, #2563eb);
+		background: var(--dt-accent, #1d4fd7);
+		z-index: 12;
+		pointer-events: none;
 	}
 
 	/* ─── Events ─────────────────────────────────────── */
@@ -1608,7 +1647,7 @@ function onWindowKeydown(e) {
 		-webkit-tap-highlight-color: transparent;
 	}
 	.tw-ev:hover {
-		background: var(--dt-hover, rgba(0, 0, 0, 0.04));
+		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
 		z-index: 8;
 	}
 	/* Short blocks keep duration-proportional height, but get a 44px
@@ -1628,8 +1667,19 @@ function onWindowKeydown(e) {
 		z-index: 9;
 	}
 	.tw-ev--current {
-		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
-	}
+		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
+	}
+	/* An event the now line crosses lays its column's ground (and its own
+	   wash) over the paper, so the line passes beneath its text. */
+	.tw-ev.tw-ev--on-now {
+		background:
+			linear-gradient(var(--tw-ev-wash, transparent), var(--tw-ev-wash, transparent)),
+			linear-gradient(var(--tw-col-wash, transparent), var(--tw-col-wash, transparent)),
+			var(--dt-paper, none),
+			var(--dt-bg, #efebe9);
+	}
+	.tw-ev--on-now.tw-ev--current { --tw-ev-wash: var(--dt-accent-dim, rgba(29, 79, 215, 0.12)); }
+	.tw-ev--on-now:hover { --tw-ev-wash: var(--dt-hover, rgba(15, 15, 15, 0.04)); }
 	.tw-ev--resizing {
 		z-index: 50;
 		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
@@ -1647,12 +1697,12 @@ function onWindowKeydown(e) {
 	   grid; a tentative one is set in grey with a dashed bar. */
 	.tw-ev--cancelled .tw-ev-title {
 		text-decoration: line-through;
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.tw-ev--cancelled .tw-ev-stripe { opacity: 0.45; /* decorative bar only */ }
 	.tw-ev--tentative .tw-ev-title,
 	.tw-ev--full .tw-ev-title {
-		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		color: var(--dt-text-2, rgba(15, 15, 15, 0.54));
 	}
 	.tw-ev--tentative .tw-ev-stripe,
 	.tw-ev--limited .tw-ev-stripe {
@@ -1681,25 +1731,30 @@ function onWindowKeydown(e) {
 		gap: 1px;
 		overflow: hidden;
 	}
-	/* Compact (< ~35min at default zoom): single inline line "9:00 Title" */
+	/* Compact (< ~35min at default zoom): one line, "Title 9:00". The title
+	   wins the room: the time wraps onto a second line, which the block
+	   clips, before the title is cut; a title too long alone ellipsizes. */
 	.tw-ev--compact .tw-ev-body {
 		flex-direction: row;
-		align-items: center;
-		gap: 4px;
-		padding-top: 1px;
-		padding-bottom: 1px;
-	}
+		flex-wrap: wrap;
+		align-content: flex-start;
+		align-items: baseline;
+		gap: 24px 5px;
+		padding-top: 2px;
+		padding-bottom: 0;
+	}
+	.tw-ev--compact .tw-ev-title { flex: 0 1 auto; min-width: 0; }
+	.tw-ev--compact .tw-ev-end { display: none; }
 
 	/* Title first, time under it; both one size, rank by weight and ink. */
 	.tw-ev-time {
 		order: 1;
 		font: 400 14px/1.2 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		white-space: nowrap;
 		flex-shrink: 0;
 	}
-	.tw-ev--compact .tw-ev-time { order: 0; }
 	/* A narrow overlap column keeps the start time whole and drops the end. */
 	@container tw-ev (max-width: 104px) {
 		.tw-ev-end { display: none; }
@@ -1708,7 +1763,7 @@ function onWindowKeydown(e) {
 	.tw-ev-title {
 		order: 0;
 		font: 500 15px/1.25 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1717,7 +1772,7 @@ function onWindowKeydown(e) {
 	.tw-ev-loc {
 		order: 2;
 		font: 400 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1802,7 +1857,7 @@ function onWindowKeydown(e) {
 		right: 3px;
 		z-index: 40;
 		border-radius: 0;
-		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
+		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #efebe9)));
 		outline: 1px solid color-mix(in srgb, var(--ev-color) 45%, transparent);
 		box-shadow: 0 6px 18px color-mix(in srgb, var(--ev-color) 24%, rgba(0, 0, 0, 0.22));
 		display: flex;
@@ -1820,14 +1875,14 @@ function onWindowKeydown(e) {
 		box-shadow: none;
 	}
 	.tw-ghost-time {
-		font: 700 12px/1.15 var(--dt-sans, system-ui, sans-serif);
+		font: 500 12.5px/1.15 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
-		color: var(--ev-color, var(--dt-accent, #2563eb));
+		color: var(--ev-color, var(--dt-accent, #1d4fd7));
 		white-space: nowrap;
 	}
 	.tw-ghost-title {
-		font: 600 12px/1.2 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+		font: 500 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text, rgba(15, 15, 15, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -1849,7 +1904,7 @@ function onWindowKeydown(e) {
 	   overflow: hidden scroll container. */
 	.tw-ev:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 		z-index: 9;
 	}
 

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

@@ -48,6 +48,8 @@ export interface CalendarContext {
     readonly emptySnippet: Snippet | undefined;
     /** Per-instance labels (Calendar's `labels` prop merged over globals); global labels when headless. */
     readonly labels: CalendarLabels;
+    /** Say something through the calendar's polite status line (no-op when headless). */
+    announce(text: string): void;
 }
 /**
  * Read the calendar context.

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

@@ -51,5 +51,6 @@ export function useCalendarContext() {
         get eventSnippet() { return raw?.eventSnippet; },
         get emptySnippet() { return raw?.emptySnippet; },
         get labels() { return raw?.labels ?? getLabels(); },
+        announce: (text) => raw?.announce(text),
     };
 }

package/dist/views/shared/format.d.ts

@@ -18,3 +18,6 @@ export interface TimeSlot {
     events: TimelineEvent[];
 }
 export declare function groupIntoSlots(evts: TimelineEvent[]): TimeSlot[];
+/** A day in full, in the locale's own order: "Monday, October 19" (en-US),
+ *  "poniedziałek, 19 października" (pl-PL). For screen-reader names. */
+export declare function dateLong(ms: number, locale?: string): string;