@nomideusz/svelte-calendar 1.4.2 → 1.5.0

package/README.md

@@ -470,6 +470,8 @@ Component fallbacks use system fonts and a neutral blue accent, so the package s
 | `--dt-text-3` | Tertiary text |
 | `--dt-accent` | Accent color |
 | `--dt-accent-dim` | Accent at ~12% opacity (selection, highlights) |
+| `--dt-ev-fill` | Event wash, as a percentage of the event's colour (default `0%`; the `eventFill` prop sets it) |
+| `--dt-ev-bar` | Width of an event's colour bar (default `3px`; the `eventBar` prop sets it) |
 | `--dt-event` | Bar color of an event without its own `color` (the presets set it to the text color, so such events draw in ink) |
 | `--dt-accent-fg` | Text on the planner's today-number badge (default `#fff`; not set by the presets) |
 | `--dt-btn-text` | Text on accent-filled buttons and badges |
@@ -535,6 +537,14 @@ const palette = generatePalette('#e11d48'); // (accent?, count = 15)
 const adapter = createMemoryAdapter(events, { palette });
 ```
 
+Events are transparent by default: a bar in the event's colour, ink text on the paper. To give them a background, or change the bar:
+
+```svelte
+<Calendar {adapter} eventFill={0.15} />            <!-- a light wash in each event's colour -->
+<Calendar {adapter} eventFill={0.15} eventBar={0} /> <!-- wash only, no bar -->
+<Calendar {adapter} eventBar={5} />                <!-- a heavier bar -->
+```
+
 Related exports: `VIVID_PALETTE` (the vivid palette, the default before 1.4) and `extractAccent(themeString)` (the accent color of a `--dt-*` theme string).
 
 ### Multi-day & All-day
@@ -1106,6 +1116,8 @@ Every `<Calendar>` prop (`CalendarProps`), grouped by what it controls.
 | `theme` | `string` | `auto` | CSS theme string of `--dt-*` properties. `auto` probes the host page. |
 | `autoTheme` | `AutoThemeOptions \| false` | `undefined` (probe) | Fine-tune auto-detection: `{ mode, accent, font }`. `false` disables probing. |
 | `borderRadius` | `number` | `0` | Corner radius in px (square by default) |
+| `eventFill` | `number` | `0` | Wash each event in its own colour, 0–1 (`0.15` = a light tint). Sets `--dt-ev-fill` |
+| `eventBar` | `number` | `3` | Width in px of the colour bar on an event's leading edge; `0` removes it. Sets `--dt-ev-bar` |
 
 ### Locale and timezone
 

package/dist/calendar/Calendar.svelte

@@ -95,7 +95,7 @@ import { wrapAdapterWithTimezone, toZonedTime, fromZonedTime } from "../core/tim
 import { isReadOnlyError, isNotFoundError } from "../adapters/errors.js";
 /** Breakpoint (px) at which auto-mobile activates */
 const MOBILE_BREAKPOINT = 768;
-let { adapter, views = defaultViews, view: activeViewId, theme = auto, autoTheme, mondayStart = true, height: heightProp = 600, borderRadius = 0, dir, locale, labels: labelsProp, readOnly = false, visibleHours, initialDate, snapInterval = 15, minColumnWidth = 110, showModePills = true, showNavigation = true, equalDays = false, showDates = true, hideDays, currentDate, blockedSlots, days, minDuration, maxDuration, disabledDates, compact = false, columns = false, mobile: mobileProp = "auto", event: eventSnippet, empty: emptySnippet, dayHeader: dayHeaderSnippet, header: headerSnippet, navigation: navigationSnippet, oneventclick, oneventcreate, onexternaldrop, oneventmove, onviewchange, ondatechange, oneventhover, ondayclick, onerror, timezone } = $props();
+let { adapter, views = defaultViews, view: activeViewId, theme = auto, autoTheme, mondayStart = true, height: heightProp = 600, borderRadius = 0, eventFill, eventBar, dir, locale, labels: labelsProp, readOnly = false, visibleHours, initialDate, snapInterval = 15, minColumnWidth = 110, showModePills = true, showNavigation = true, equalDays = false, showDates = true, hideDays, currentDate, blockedSlots, days, minDuration, maxDuration, disabledDates, compact = false, columns = false, mobile: mobileProp = "auto", event: eventSnippet, empty: emptySnippet, dayHeader: dayHeaderSnippet, header: headerSnippet, navigation: navigationSnippet, oneventclick, oneventcreate, onexternaldrop, oneventmove, onviewchange, ondatechange, oneventhover, ondayclick, onerror, timezone } = $props();
 // In readOnly mode, suppress mutation callbacks. With a timezone, the
 // drag plane is zoned wall-clock — hosts always receive real instants.
 const unzone = (d) => timezone ? fromZonedTime(d, timezone) : d;
@@ -672,7 +672,7 @@ const navCtx = $derived({
 <div
 	class="cal"
 	bind:this={calEl}
-	style="{effectiveTheme}; {heightProp === 'auto' ? '' : `--cal-h: ${heightProp}px;`} --cal-r: {borderRadius}px"
+	style="{effectiveTheme}; {heightProp === 'auto' ? '' : `--cal-h: ${heightProp}px;`} --cal-r: {borderRadius}px;{eventFill == null ? '' : ` --dt-ev-fill: ${eventFill * 100}%;`}{eventBar == null ? '' : ` --dt-ev-bar: ${eventBar}px;`}"
 	class:cal--auto={heightProp === 'auto'}
 	role="region"
 	aria-label={L.calendar}
@@ -759,7 +759,8 @@ const navCtx = $derived({
 		<span class="cal-sr" role="status" aria-live="polite" aria-atomic="true">{noteText}</span>
 	{/if}
 
-	<div class="cal-body">
+	<!-- mobile='auto' doesn't know phone vs desktop until measured: hidden till then (SSR), shown anyway after 1.5s -->
+	<div class="cal-body" class:cal-body--unmeasured={mobileProp === 'auto' && containerWidth === 0}>
 		{#if activeView}
 			{@const Comp = activeView.component}
 			<Comp
@@ -1002,6 +1003,11 @@ const navCtx = $derived({
 	.cal--auto .cal-body {
 		overflow: visible;
 	}
+	.cal-body--unmeasured {
+		visibility: hidden;
+		animation: cal-reveal 0s 1.5s forwards;
+	}
+	@keyframes cal-reveal { to { visibility: visible; } }
 
 	.cal-empty {
 		display: flex;

package/dist/calendar/Calendar.svelte.d.ts

@@ -71,6 +71,13 @@ export interface CalendarProps {
     height?: number | 'auto';
     /** Border radius in px (default: 0, square-cut). */
     borderRadius?: number;
+    /**
+     * Wash each event in its own colour, 0–1 (default 0: transparent). Text
+     * stays the theme's ink, so a light tint (0.1–0.2) reads best.
+     */
+    eventFill?: number;
+    /** Width in px of the colour bar on an event's leading edge (default 3). 0 removes it. */
+    eventBar?: number;
     /** Text direction: 'ltr' (default), 'rtl', or 'auto' */
     dir?: 'ltr' | 'rtl' | 'auto';
     /** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */

package/dist/views/agenda/AgendaDay.svelte

@@ -526,7 +526,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	.ag-body::-webkit-scrollbar-thumb {
 		background: var(--dt-border);
-		border-radius: 2px;
+		border-radius: 0;
 	}
 
 	/* ═══ All-day strip ═══ */
@@ -600,6 +600,9 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		align-items: stretch;
 		border-radius: 0;
 		background: transparent;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		border: none;
 		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		overflow: hidden;
@@ -612,12 +615,12 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		left: 0;
 		top: 0;
 		bottom: 0;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color);
 	}
 	.ag-card:hover,
 	.ag-card:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-card:focus-visible {
 		outline: none;
@@ -859,6 +862,9 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		margin-bottom: 8px;
 		border-radius: 0;
 		background: var(--dt-accent-dim, color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent));
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		border: none;
 		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		cursor: pointer;
@@ -870,12 +876,13 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		left: 0;
 		top: 0;
 		bottom: 0;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color, var(--dt-accent));
 	}
 	.ag-q-now:hover,
 	.ag-q-now:active {
 		background:
+			linear-gradient(var(--_fill), var(--_fill)),
 			linear-gradient(var(--dt-hover, rgba(15, 15, 15, 0.04)), var(--dt-hover, rgba(15, 15, 15, 0.04))),
 			var(--dt-accent-dim, color-mix(in srgb, var(--dt-accent, #1d4fd7) 12%, transparent));
 	}
@@ -892,16 +899,8 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		border-radius: 50%;
 		background: var(--ev-color, var(--dt-accent, #1d4fd7));
 		margin-bottom: 8px;
-		animation: ag-pulse 2.5s ease-in-out infinite;
-	}
-	@keyframes ag-pulse {
-		0%, 100% { opacity: 1; }
-		50% { opacity: 0.4; }
 	}
 	@media (prefers-reduced-motion: reduce) {
-		.ag-q-now-dot {
-			animation: none;
-		}
 		.ag-q-now-fill {
 			transition: none;
 		}
@@ -1006,6 +1005,9 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		display: none;
 	}
 	.ag-log-row {
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		display: flex;
 		align-items: baseline;
 		gap: 10px;
@@ -1024,7 +1026,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	}
 	.ag-log-row:hover,
 	.ag-log-row:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-log-row:focus-visible {
 		outline: none;
@@ -1050,7 +1052,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	/* The colour dot of a past row becomes its 3px start bar (dimmed: it is over). */
 	.ag-log-dot {
 		align-self: stretch;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		border-radius: 0;
 		flex-shrink: 0;
 		opacity: 0.45;
@@ -1088,6 +1090,9 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-compact-list::-webkit-scrollbar { display: none; }
 	/* A compact row: 3px start bar, hairline beneath, ink text. */
 	.ag-compact-row {
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		position: relative;
 		display: flex;
 		align-items: baseline;
@@ -1104,7 +1109,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 		left: 0;
 		top: 0;
 		bottom: 0;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color, var(--dt-accent));
 	}
 	.ag-compact-row--selected {
@@ -1114,7 +1119,7 @@ const hiddenDoneCount = $derived(showAllDone ? 0 : Math.max(0, dayCat.past.lengt
 	.ag-compact-row:active .ag-compact-row-title { color: var(--dt-text); }
 	.ag-compact-row:hover,
 	.ag-compact-row:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-compact-row:focus-visible {
 		outline: none;

package/dist/views/agenda/AgendaWeek.svelte

@@ -579,7 +579,7 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-body::-webkit-scrollbar-thumb {
 		background: var(--dt-border);
-		border-radius: 2px;
+		border-radius: 0;
 	}
 
 	/* ═══ All-day chips ═══ */
@@ -639,6 +639,9 @@ const weekDays = $derived.by(() => {
 		align-items: stretch;
 		border-radius: 0;
 		background: transparent;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		border: none;
 		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		overflow: hidden;
@@ -651,12 +654,12 @@ const weekDays = $derived.by(() => {
 		left: 0;
 		top: 0;
 		bottom: 0;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color);
 	}
 	.ag-card:hover,
 	.ag-card:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-card:focus-visible {
 		outline: none;
@@ -939,6 +942,9 @@ const weekDays = $derived.by(() => {
 	}
 	/* A compact row: 3px start bar, hairline beneath, ink text. */
 	.ag-compact {
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		position: relative;
 		display: flex;
 		align-items: baseline;
@@ -955,7 +961,7 @@ const weekDays = $derived.by(() => {
 		left: 0;
 		top: 0;
 		bottom: 0;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color, var(--dt-accent));
 	}
 	.ag-compact--selected {
@@ -967,7 +973,7 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-compact:hover,
 	.ag-compact:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.ag-compact:focus-visible {
 		outline: none;

package/dist/views/mobile/MobileDay.svelte

@@ -13,6 +13,7 @@ import { HOUR_MS, sod, addDaysMs, diffDays, isAllDay, segmentForDay } from "../.
 import { fmtHParts, fmtTime } from "../../core/locale.js";
 import { createSwipe } from "./swipe.js";
 import { dateLong } from "../shared/format.js";
+import { openingTop } from "../shared/opening-top.js";
 let { height = null, events = [], style = "", locale, focusDate, oneventclick, oneventcreate, selectedEventId = null, readOnly = false, visibleHours } = $props();
 // ── Context ────────────────────────────────────────
 const ctx = useCalendarContext();
@@ -459,13 +460,18 @@ function onResizeCancel() {
 	cleanupResize();
 }
 // ── Auto-scroll to now ─────────────────────────────
+// The hour before now, its label clear of the top, no event sliced there
+// (openingTop). The grid's 8px padding sits above hour 0.
 let gridEl;
 $effect(() => {
 	void dayMs;
 	const el = gridEl;
 	if (!el) return;
 	untrack(() => {
-		if (nowOffset >= 0) el.scrollTop = Math.max(0, nowOffset - 120);
+		if (nowOffset < 0) return;
+		const line = Math.max(0, Math.floor(nowOffset / HOUR_HEIGHT - 1)) * HOUR_HEIGHT;
+		const y = openingTop(positionedEvents, line, HOUR_HEIGHT, 8, nowOffset, el.clientHeight - 8);
+		el.scrollTop = y && y + 8;
 	});
 });
 </script>
@@ -962,6 +968,9 @@ $effect(() => {
 		border-radius: 0;
 		cursor: pointer;
 		background: transparent;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		border: none;
 		border-bottom: 1px solid var(--dt-border, rgba(15, 15, 15, 0.3));
 		box-sizing: border-box;
@@ -976,7 +985,7 @@ $effect(() => {
 	}
 	.mb-event:hover,
 	.mb-event:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	/* Short blocks keep their duration-proportional height, but get a 44px
 	   transparent hit-slop so taps still land. */
@@ -1003,6 +1012,7 @@ $effect(() => {
 	   laid over the paper, opaque, so the line runs beneath its text. */
 	.mb-event.mb-event--current {
 		background:
+			linear-gradient(var(--_fill), var(--_fill)),
 			linear-gradient(var(--dt-accent-dim, rgba(29, 79, 215, 0.12)), var(--dt-accent-dim, rgba(29, 79, 215, 0.12))),
 			var(--dt-paper, none),
 			var(--dt-bg, #efebe9);
@@ -1010,6 +1020,7 @@ $effect(() => {
 	.mb-event.mb-event--current:hover,
 	.mb-event.mb-event--current:active {
 		background:
+			linear-gradient(var(--_fill), var(--_fill)),
 			linear-gradient(var(--dt-hover, rgba(15, 15, 15, 0.04)), var(--dt-hover, rgba(15, 15, 15, 0.04))),
 			var(--dt-paper, none),
 			var(--dt-bg, #efebe9);
@@ -1121,7 +1132,7 @@ $effect(() => {
 	}
 
 	.mb-ev-stripe {
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color);
 		flex-shrink: 0;
 		border-radius: 0;

package/dist/views/mobile/MobileWeek.svelte

@@ -422,6 +422,9 @@ function handleDayKeydown(e, dayMs) {
 		min-height: 44px;
 		border-radius: 0;
 		background: transparent;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		overflow: hidden;
 		cursor: pointer;
 		transition: background 120ms;
@@ -434,13 +437,13 @@ function handleDayKeydown(e, dayMs) {
 	}
 	.mw-ev:hover,
 	.mw-ev:active {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.mw-ev--selected {
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 	}
 	.mw-ev--current {
-		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
+		background-color: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}
 	/* All day: a solid band on the event colour, no tint. */
 	.mw-ev--allday {
@@ -486,7 +489,7 @@ function handleDayKeydown(e, dayMs) {
 	}
 
 	.mw-ev-stripe {
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		align-self: stretch;
 		background: var(--ev-color, var(--dt-accent));
 		flex-shrink: 0;

package/dist/views/month/MonthGrid.svelte

@@ -2,7 +2,7 @@
 	MonthGrid — classic month overview.
 
 	Week-aligned grid (4–6 rows, driven by the view-state 'month' range).
-	Each cell lists up to MAX_CHIPS events plus a "+N more" overflow; clicking
+	Each cell lists as many events as fit plus a "+N more" overflow; clicking
 	an event fires oneventclick, clicking a day (or the overflow) fires
 	ondayclick — the natural month → day drill-down.
 -->
@@ -29,7 +29,7 @@ const todayMs = $derived(clock.today);
 // cell tap (day drill-down) carry the interaction.
 const dotsMode = $derived(isMobile);
 const MAX_CHIPS = 3;
-// How many chips a cell has room for, measured, never more than MAX_CHIPS.
+// How many chips a cell has room for, measured (MAX_CHIPS until then).
 // A cell that overflows must also show its "+N more", so it gets one row
 // fewer when that row would not fit beside its chips: a hidden event is
 // always counted, never clipped away. Auto height and dots grow instead.
@@ -47,8 +47,8 @@ function measureFit() {
 	const chipH = chip.offsetHeight;
 	const moreH = bodyEl?.querySelector(".mg-more")?.offsetHeight ?? chipH;
 	if (!chipH) return;
-	fitAll = Math.min(MAX_CHIPS, Math.floor((room + gap) / (chipH + gap)));
-	fitMore = Math.max(0, Math.min(MAX_CHIPS, Math.floor((room - moreH) / (chipH + gap))));
+	fitAll = Math.max(0, Math.floor((room + gap) / (chipH + gap)));
+	fitMore = Math.max(0, Math.floor((room - moreH) / (chipH + gap)));
 }
 $effect(() => {
 	if (!bodyEl || autoHeight || dotsMode) {
@@ -456,7 +456,10 @@ function chipTime(e) {
 		gap: 5px;
 		border: none;
 		background: none;
-		padding: 2px 4px;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--mg-chip-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
+		padding: 1px 4px;
 		border-radius: 0;
 		font: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text);
@@ -465,14 +468,14 @@ function chipTime(e) {
 		text-align: left;
 	}
 	.mg-chip:hover {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 	.mg-chip:focus-visible {
 		box-shadow: 0 0 0 2px var(--dt-accent, #1d4fd7);
 		outline: none;
 	}
 	.mg-chip--selected {
-		background: var(--dt-accent-dim);
+		background-color: var(--dt-accent-dim);
 	}
 	.mg-chip--cancelled {
 		text-decoration: line-through;
@@ -486,7 +489,7 @@ function chipTime(e) {
 	.mg-chip-dot {
 		flex: none;
 		align-self: stretch;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		border-radius: 0;
 		background: var(--mg-chip-color);
 	}
@@ -558,6 +561,7 @@ function chipTime(e) {
 	}
 	.mg--dots .mg-chip {
 		padding: 3px;
+		background-image: none; /* a mark, not a chip: no eventFill wash */
 		min-height: 0;
 	}
 	.mg--dots .mg-chip-title,

package/dist/views/planner/PlannerScroll.svelte

@@ -1372,6 +1372,9 @@ function onCellKeydown(e, ms) {
 		padding: 0 3px 0 9px;
 		border-radius: 0;
 		background: transparent;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		cursor: pointer;
 		overflow: hidden;
 		transition: background 0.12s, box-shadow 0.12s;
@@ -1381,12 +1384,12 @@ function onCellKeydown(e, ms) {
 		content: '';
 		position: absolute;
 		inset: 0 auto 0 0;
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color);
 	}
 
 	.wg-ev:hover {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 	}
 
 	.wg-ev--drag-preview {
@@ -1396,7 +1399,7 @@ function onCellKeydown(e, ms) {
 		z-index: 8;
 		opacity: 0.95;
 		pointer-events: none;
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 		cursor: grabbing;
 	}
@@ -1406,7 +1409,7 @@ function onCellKeydown(e, ms) {
 	}
 
 	.wg-ev--current {
-		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
+		background-color: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
 	}
 
 	/* Printed states: struck through, grey, or a dashed bar — never a tint */
@@ -1497,7 +1500,7 @@ function onCellKeydown(e, ms) {
 
 	.wg-ev--dragging {
 		cursor: grabbing;
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 		box-shadow: inset 0 0 0 1px var(--ev-color);
 	}
 </style>

package/dist/views/planner/PlannerWeek.svelte

@@ -23,6 +23,7 @@ import { HOUR_MS, sod, addDaysMs, diffDays } from "../../core/time.js";
 import { startOfWeek as sowFn, isAllDay, segmentForDay } from "../../core/time.js";
 import { fmtHParts, fmtTime, fmtDayNum, fmtDuration, fmtWeekRange, weekdayShort, weekdayLong } from "../../core/locale.js";
 import { dateLong } from "../shared/format.js";
+import { openingTop } from "../shared/opening-top.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();
@@ -302,9 +303,8 @@ const weekIsEmpty = $derived(!events.some((ev) => ev.start.getTime() < weekEndMs
 // ── Auto-scroll (mount + week change) ──────────────
 // 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.
+// with room for its label (centred on the line) below the sticky top,
+// moved so no event is sliced under it (openingTop).
 // A server-rendered grid sits at midnight until this runs: it stays
 // hidden until placed (.tw-body--unplaced), and shows anyway after 1.5s.
 let placed = $state(false);
@@ -316,32 +316,15 @@ $effect(() => {
 	if (!el) return;
 	untrack(() => {
 		let targetHour;
+		let anchorHour;
 		if (weekHasToday) {
-			const clamped = Math.min(Math.max(nowFracHour, startHour), endHour);
-			targetHour = Math.max(startHour, clamped - 1);
+			anchorHour = Math.min(Math.max(nowFracHour, startHour), endHour);
+			targetHour = Math.max(startHour, anchorHour - 1);
 		} else {
-			targetHour = Math.max(startHour, Math.min(8, endHour - 1));
+			targetHour = anchorHour = Math.max(startHour, Math.min(8, endHour - 1));
 		}
-		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);
+		const topH = el.querySelector(".tw-top")?.offsetHeight ?? 0;
+		el.scrollTop = openingTop([...layoutByDay.values()].flat(), (Math.floor(targetHour) - startHour) * HOUR_H, HOUR_H, LABEL_ROOM, (anchorHour - startHour) * HOUR_H, el.clientHeight - topH);
 		placed = true;
 	});
 });
@@ -1245,7 +1228,7 @@ function onWindowKeydown(e) {
 	.tw-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
 	.tw-scroll::-webkit-scrollbar-thumb {
 		background: var(--dt-scrollbar, rgba(15, 15, 15, 0.1));
-		border-radius: 4px;
+		border-radius: 0;
 	}
 	.tw-scroll::-webkit-scrollbar-track { background: transparent; }
 
@@ -1673,6 +1656,9 @@ function onWindowKeydown(e) {
 		z-index: 6;
 		border-radius: 0;
 		background: transparent;
+		/* eventFill: a wash in the event's colour; hover/current set background-color under it */
+		--_fill: color-mix(in srgb, var(--ev-color) var(--dt-ev-fill, 0%), transparent);
+		background-image: linear-gradient(var(--_fill), var(--_fill));
 		display: flex;
 		align-items: stretch;
 		overflow: hidden;
@@ -1685,7 +1671,7 @@ function onWindowKeydown(e) {
 		-webkit-tap-highlight-color: transparent;
 	}
 	.tw-ev:hover {
-		background: var(--dt-hover, rgba(15, 15, 15, 0.04));
+		background-color: var(--dt-hover, rgba(15, 15, 15, 0.04));
 		z-index: 8;
 	}
 	/* Short blocks keep duration-proportional height, but get a 44px
@@ -1705,12 +1691,13 @@ function onWindowKeydown(e) {
 		z-index: 9;
 	}
 	.tw-ev--current {
-		background: var(--dt-accent-dim, rgba(29, 79, 215, 0.12));
+		background-color: 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(--_fill), var(--_fill)),
 			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),
@@ -1754,7 +1741,7 @@ function onWindowKeydown(e) {
 	.tw-ev--readonly { cursor: default; }
 
 	.tw-ev-stripe {
-		width: 3px;
+		width: var(--dt-ev-bar, 3px);
 		background: var(--ev-color);
 		flex-shrink: 0;
 	}
@@ -1846,8 +1833,8 @@ function onWindowKeydown(e) {
 		position: absolute;
 		top: 4px;
 		right: 4px;
-		width: 6px;
-		height: 6px;
+		width: 7px;
+		height: 7px;
 		border-radius: 50%;
 		background: var(--ev-color, var(--dt-accent));
 		animation: tw-pulse 2s ease-in-out infinite;
@@ -1895,7 +1882,7 @@ function onWindowKeydown(e) {
 		transform: translateX(-50%);
 		width: 20px;
 		height: 3px;
-		border-radius: 2px;
+		border-radius: 0;
 		background: var(--ev-color);
 		opacity: 0;
 		transition: opacity 120ms;

package/dist/views/shared/opening-top.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Where a time grid opens: the y (grid px, 0 = first visible hour) to put at
+ * the top of the scroller so no event is sliced there.
+ *
+ * Starts at the hour line `line`, moves up an hour at a time while an event
+ * crosses it (looking back at most 2 h), then leaves `room` above for the
+ * hour label. If an event still crosses the top, the top goes to that event's
+ * start while `anchor` (the now line) stays on screen, else to the first hour
+ * after it ends, else the room is dropped; only a block too long for all of
+ * those is cut.
+ */
+export declare function openingTop(blocks: readonly {
+    top: number;
+    height: number;
+}[], line: number, hourH: number, room: number, anchor: number, viewH: number): number;