@nomideusz/svelte-calendar 1.4.1 → 1.4.3

package/README.md

@@ -580,55 +580,7 @@ The calendar reads its events through an adapter. Which one:
 | [`createCompositeAdapter(adapters)`](#composite-adapter) | One calendar shows several sources, e.g. a recurring timetable plus one-off events. |
 | [Custom `CalendarAdapter`](#custom-adapter) | None of the above fits: implement `fetchEvents`, plus the writes you need. |
 
-## Recurring Schedules
-
-For fixed repeating events (class timetables, office hours):
-
-```svelte
-<script>
-  import { Calendar, createRecurringAdapter } from '@nomideusz/svelte-calendar';
-
-  const adapter = createRecurringAdapter([
-    { id: '1', title: 'Yoga',    dayOfWeek: 1, startTime: '07:00', endTime: '08:30' },
-    { id: '2', title: 'Standup', frequency: 'daily', startTime: '09:00', endTime: '09:15',
-      startDate: '2026-03-01', until: '2026-03-31' },
-    { id: '3', title: 'Review',  frequency: 'monthly', dayOfMonth: 15,
-      startTime: '10:00', endTime: '11:00' },
-    { id: '4', title: 'Night shift', dayOfWeek: [5, 6], startTime: '22:00', endTime: '02:00' },
-  ]);
-</script>
-
-<Calendar {adapter} view="week-planner" />
-```
-
-<details>
-<summary>RecurringEvent fields</summary>
-
-| Field | Type | Default | Description |
-|-------|------|---------|-------------|
-| `id` | `string` | *required* | Rule identifier |
-| `title` | `string` | *required* | Event title |
-| `startTime` | `string` | *required* | Start time `"HH:MM"`, 24-hour |
-| `endTime` | `string` | *required* | End time `"HH:MM"`. Earlier than `startTime` → ends the next day (overnight). |
-| `frequency` | `'daily' \| 'weekly' \| 'monthly'` | `'weekly'` | Recurrence frequency |
-| `interval` | `number` | `1` | Every N periods (`2` + weekly = biweekly). Needs `startDate` when > 1. |
-| `dayOfWeek` | `number \| number[]` | — | ISO weekday 1=Mon…7=Sun. Required for weekly. |
-| `dayOfMonth` | `number` | `1` | Day of month (1–31) for monthly; clamped to shorter months. |
-| `startDate` | `string` | — | First possible occurrence `"YYYY-MM-DD"` |
-| `until` | `string` | — | Last possible occurrence `"YYYY-MM-DD"` |
-| `count` | `number` | — | Max occurrences from `startDate` (requires it). With `until`, the stricter wins. |
-| `excludeDates` | `string[]` | — | `"YYYY-MM-DD"` dates this rule skips |
-| `color` | `string` | — | Bar color; else from `palette`, else ink (`--dt-event`) |
-| `subtitle` / `tags` / `category` / `location` / `resourceId` | | — | Copied to every occurrence |
-| `data` | `Record<string, unknown>` | — | Copied to every occurrence, plus `recurringId` |
-
-</details>
-
-Options (`RecurringAdapterOptions`): `mondayStart` (default `true`), `palette` (colors rules without a `color`; off by default), `movable` (default `false`).
-
-Occurrences get the id `` `${rule.id}--YYYYMMDD` `` and `data.recurringId`. The adapter projects and stores nothing, so by default every occurrence carries `data.readOnly` and can't be dragged (it can still be clicked). With `movable: true` the views allow the drag and the adapter refuses the write with a read-only error, so `oneventmove` fires and the host stores the move: add the date to the rule's `excludeDates` and keep the moved occurrence with your one-off events (for example the memory side of a [composite adapter](#composite-adapter)).
-
-## REST Adapter
+### REST Adapter
 
 Connect to any REST API:
 
@@ -653,7 +605,7 @@ const adapter = createRestAdapter({
 
 The adapter calls `GET {baseUrl}/events?start=…&end=…` (ISO strings), `POST /events`, `PATCH /events/:id` and `DELETE /events/:id`, sending JSON with your `headers`. By default a list response must be an array of events and a single response one event; `start`/`end` are parsed into `Date`s. Override with `mapEvents(data)` for lists and `mapEvent(data)` for single events. A non-2xx response or invalid JSON throws.
 
-## JMAP Adapter
+### JMAP Adapter
 
 Read events from a [JMAP Calendars](https://jmap.io/) server (Fastmail, Stalwart, Cyrus):
 
@@ -678,7 +630,7 @@ const adapter = createJmapAdapter(client, {
 
 Read-only. Expands recurrences server-side and handles all-day events, ISO-duration ends and per-calendar colors (pass `calendars: [{ id, name, color }]`, or a function returning them).
 
-## Mapped Adapter
+### Mapped Adapter
 
 Wrap any static array of external records (class schedules, appointments, timetables) without writing a custom adapter. Supply a declarative field mapping (or a `mapEvent` function for full control) and the adapter handles parsing, colors, tags and status:
 
@@ -721,7 +673,7 @@ const adapter = createMappedAdapter(rawData, {
 
 Mapped adapters are read-only by default (writes throw a read-only error, so drags reach `oneventmove`). Set `readOnly: false` to allow writes; supply `onMutate: { onCreate, onUpdate, onDelete }` to persist them (each returns the stored source record, which is mapped again), or omit it to keep changes in memory.
 
-## Composite Adapter
+### Composite Adapter
 
 Merge several adapters into one, e.g. a recurring weekly schedule plus one-off events:
 
@@ -746,7 +698,7 @@ const adapter = createCompositeAdapter([recurring, memory], {
 });
 ```
 
-## Custom Adapter
+### Custom Adapter
 
 Implement the `CalendarAdapter` interface to connect any data source. Only `fetchEvents` is required:
 
@@ -778,7 +730,7 @@ const adapter = withInitialEvents(createRestAdapter({ baseUrl: '/api' }), data.e
 
 The first load is answered synchronously from the seed; every later load (navigation, refresh) goes to the wrapped adapter.
 
-### Refusing a write
+#### Refusing a write
 
 The Calendar tells two refusals apart when `updateEvent` throws:
 
@@ -790,6 +742,54 @@ The Calendar tells two refusals apart when `updateEvent` throws:
 
 An adapter without `updateEvent` counts as read-only. Plain `Error`s whose message contains `read-only` (lower case) or `not found` (any case) are read the same way, so older adapters keep working. `isReadOnlyError(e)` and `isNotFoundError(e)` test both forms.
 
+## Recurring Schedules
+
+For fixed repeating events (class timetables, office hours):
+
+```svelte
+<script>
+  import { Calendar, createRecurringAdapter } from '@nomideusz/svelte-calendar';
+
+  const adapter = createRecurringAdapter([
+    { id: '1', title: 'Yoga',    dayOfWeek: 1, startTime: '07:00', endTime: '08:30' },
+    { id: '2', title: 'Standup', frequency: 'daily', startTime: '09:00', endTime: '09:15',
+      startDate: '2026-03-01', until: '2026-03-31' },
+    { id: '3', title: 'Review',  frequency: 'monthly', dayOfMonth: 15,
+      startTime: '10:00', endTime: '11:00' },
+    { id: '4', title: 'Night shift', dayOfWeek: [5, 6], startTime: '22:00', endTime: '02:00' },
+  ]);
+</script>
+
+<Calendar {adapter} view="week-planner" />
+```
+
+<details>
+<summary>RecurringEvent fields</summary>
+
+| Field | Type | Default | Description |
+|-------|------|---------|-------------|
+| `id` | `string` | *required* | Rule identifier |
+| `title` | `string` | *required* | Event title |
+| `startTime` | `string` | *required* | Start time `"HH:MM"`, 24-hour |
+| `endTime` | `string` | *required* | End time `"HH:MM"`. Earlier than `startTime` → ends the next day (overnight). |
+| `frequency` | `'daily' \| 'weekly' \| 'monthly'` | `'weekly'` | Recurrence frequency |
+| `interval` | `number` | `1` | Every N periods (`2` + weekly = biweekly). Needs `startDate` when > 1. |
+| `dayOfWeek` | `number \| number[]` | — | ISO weekday 1=Mon…7=Sun. Required for weekly. |
+| `dayOfMonth` | `number` | `1` | Day of month (1–31) for monthly; clamped to shorter months. |
+| `startDate` | `string` | — | First possible occurrence `"YYYY-MM-DD"` |
+| `until` | `string` | — | Last possible occurrence `"YYYY-MM-DD"` |
+| `count` | `number` | — | Max occurrences from `startDate` (requires it). With `until`, the stricter wins. |
+| `excludeDates` | `string[]` | — | `"YYYY-MM-DD"` dates this rule skips |
+| `color` | `string` | — | Bar color; else from `palette`, else ink (`--dt-event`) |
+| `subtitle` / `tags` / `category` / `location` / `resourceId` | | — | Copied to every occurrence |
+| `data` | `Record<string, unknown>` | — | Copied to every occurrence, plus `recurringId` |
+
+</details>
+
+Options (`RecurringAdapterOptions`): `mondayStart` (default `true`), `palette` (colors rules without a `color`; off by default), `movable` (default `false`).
+
+Occurrences get the id `` `${rule.id}--YYYYMMDD` `` and `data.recurringId`. The adapter projects and stores nothing, so by default every occurrence carries `data.readOnly` and can't be dragged (it can still be clicked). With `movable: true` the views allow the drag and the adapter refuses the write with a read-only error, so `oneventmove` fires and the host stores the move: add the date to the rule's `excludeDates` and keep the moved occurrence with your one-off events (for example the memory side of a [composite adapter](#composite-adapter)).
+
 ## Headless API
 
 For full control over rendering, skip `<Calendar>` and drive everything from reactive state. `createCalendar()` returns computed layouts, navigation actions, drag helpers and the raw engines. Zero DOM: bring your own UI. Call it during component initialisation.

package/dist/calendar/Calendar.svelte

@@ -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/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 ═══ */
@@ -892,16 +892,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;
 		}

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 ═══ */
@@ -844,8 +844,11 @@ const weekDays = $derived.by(() => {
 	.ag-wday .ag-wday-badge--muted {
 		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
+	/* Set like the weekday beside it, so the heading reads in one case */
 	.ag-wday-date {
-		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 12px/1 var(--dt-sans, system-ui, sans-serif);
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
 		color: var(--dt-text-2, rgba(15, 15, 15, 0.66));
 	}
 

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>
@@ -843,6 +849,8 @@ $effect(() => {
 		align-items: flex-start;
 	}
 
+	/* The first hour has no room above its line: it sits on it, unclipped */
+	.mb-hour:first-child .mb-hour-label { top: 0; }
 	.mb-hour-label--under {
 		visibility: hidden;
 	}

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,7 @@ function chipTime(e) {
 		gap: 5px;
 		border: none;
 		background: none;
-		padding: 2px 4px;
+		padding: 1px 4px;
 		border-radius: 0;
 		font: 400 12.5px/1.3 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text);
@@ -499,7 +499,12 @@ function chipTime(e) {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
+		/* A Latin title in RTL keeps its own direction: the ellipsis cuts its end */
+		unicode-bidi: plaintext;
+		text-align: left;
 	}
+	/* …but it sits on the calendar's side, by the bar */
+	.mg-chip-title:dir(rtl) { text-align: right; }
 	.mg-more {
 		align-self: flex-start;
 		border: none;

package/dist/views/planner/PlannerScroll.svelte

@@ -1446,7 +1446,12 @@ function onCellKeydown(e, ms) {
 		text-overflow: ellipsis;
 		min-width: 0;
 		flex: 1 1 auto;
+		/* A Latin title in RTL keeps its own direction: the ellipsis cuts its end */
+		unicode-bidi: plaintext;
+		text-align: left;
 	}
+	/* …but it sits on the calendar's side, by the bar */
+	.wg-ev-title:dir(rtl) { text-align: right; }
 
 	.wg-ev-loc {
 		font: 400 12.5px / 1 var(--dt-sans, system-ui, sans-serif);

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,11 @@ 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);
 $effect(() => {
 	void weekStartMs;
 	void startHour;
@@ -313,32 +316,16 @@ $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;
 	});
 });
 // ── Pointer coalescing ─────────────────────────────
@@ -442,6 +429,9 @@ const TIME_LINE = 11 * 1.1;
 const TITLE_LINE = 12 * 1.2;
 const ROOM_LINE = 10 * 1.2;
 const ROOM_AIR = 9;
+/** Tall enough for two title lines over the time (.tw-ev--tall), in the
+*  CSS's own line boxes: title 15px/1.25, time 14px/1.2. */
+const TWO_LINE_H = BODY_PAD_Y + 2 * 15 * 1.25 + LINE_GAP + 14 * 1.2;
 function blockParts(ev, height) {
 	return fitParts([
 		{
@@ -661,6 +651,20 @@ function handleColsClick(e) {
 let focusedColMs = $state(null);
 const tabbableColMs = $derived((dayCols.find((d) => d.ms === focusedColMs) ?? dayCols.find((d) => d.isToday) ?? dayCols[0])?.ms);
 const colsCreate = $derived(!!oneventcreate && !readOnly);
+// After Enter creates, the keyboard follows the new block once the host
+// adds it: the first unseen event at that start, within two updates.
+let createFocus = null;
+$effect(() => {
+	const list = events;
+	untrack(() => {
+		if (!createFocus) return;
+		const { startMs, known } = createFocus;
+		const ev = list.find((e) => !known.has(e.id) && e.start.getTime() === startMs);
+		const block = ev && colsEl?.querySelector(`.tw-ev[data-event-id="${CSS.escape(ev.id)}"]`);
+		if (block) block.focus();
+		if (block || --createFocus.tries <= 0) createFocus = null;
+	});
+});
 function onColKeydown(e, i) {
 	if (e.target !== e.currentTarget) return;
 	const day = dayCols[i];
@@ -675,6 +679,11 @@ function onColKeydown(e, i) {
 		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);
+		createFocus = {
+			startMs,
+			known: new Set(events.map((ev) => ev.id)),
+			tries: 2
+		};
 		oneventcreate({
 			start: new Date(startMs),
 			end: new Date(startMs + Math.max(60, minDuration ?? 0) * 6e4)
@@ -989,18 +998,16 @@ function onWindowKeydown(e) {
 			{/if}
 
 			<!-- Grid body -->
-			<div class="tw-body" style:height="{gridHeight}px">
+			<div class="tw-body" class:tw-body--unplaced={!placed} style:height="{gridHeight}px">
 				<!-- Time gutter -->
 				<div class="tw-gutter" style:width="{GUTTER_W}px" aria-hidden="true">
 					{#each { length: hourCount } as _, i}
-						{#if i > 0}
-							{@const [hNum, hSuf] = fmtHParts(startHour + i, locale)}
-							<!-- an hour the now plate would half-cover gives way to it -->
-							<span
-								class="tw-gutter-lb"
-								class:tw-gutter-lb--under={nowY !== null && weekHasToday && Math.abs(i * HOUR_H - nowY) < 18}
-								style:top="{i * HOUR_H}px">{hNum}<small>{hSuf}</small></span>
-						{/if}
+						{@const [hNum, hSuf] = fmtHParts(startHour + i, locale)}
+						<!-- an hour the now plate would half-cover gives way to it -->
+						<span
+							class="tw-gutter-lb"
+							class:tw-gutter-lb--under={nowY !== null && weekHasToday && Math.abs(i * HOUR_H - nowY) < 18}
+							style:top="{i * HOUR_H}px">{hNum}<small>{hSuf}</small></span>
 					{/each}
 					{#if axisGhost}
 						<!-- The axis reads the drag to the minute, at both edges. -->
@@ -1095,6 +1102,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--tall={p.height >= TWO_LINE_H}
 									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"
@@ -1220,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; }
 
@@ -1378,9 +1386,13 @@ function onWindowKeydown(e) {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		unicode-bidi: plaintext;
+		text-align: left;
 		flex: 1;
 		min-width: 0;
 	}
+	/* …but it sits on the calendar's side, by the bar */
+	.tw-ad-title:dir(rtl) { text-align: right; }
 	.tw-ad-span {
 		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
@@ -1432,6 +1444,11 @@ function onWindowKeydown(e) {
 		display: flex;
 		position: relative;
 	}
+	.tw-body--unplaced {
+		visibility: hidden;
+		animation: tw-reveal 0s 1.5s forwards;
+	}
+	@keyframes tw-reveal { to { visibility: visible; } }
 
 	/* ─── Time gutter ────────────────────────────────── */
 	.tw-gutter {
@@ -1469,6 +1486,10 @@ function onWindowKeydown(e) {
 		align-self: center;
 		background: var(--dt-border-day, rgba(15, 15, 15, 0.3));
 	}
+	/* The first hour has no room above its line: it hangs below it, the
+	   tick still on the line. */
+	.tw-gutter-lb:first-child { transform: none; }
+	.tw-gutter-lb:first-child::after { align-self: flex-start; }
 	.tw-gutter-lb--under {
 		visibility: hidden;
 	}
@@ -1767,6 +1788,30 @@ function onWindowKeydown(e) {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		/* A Latin title in an RTL calendar keeps its own direction, so the
+		   ellipsis cuts its end, not its start. */
+		unicode-bidi: plaintext;
+		text-align: left;
+	}
+	/* …but it sits on the calendar's side, by the bar */
+	:is(.tw-ev-title, .tw-ev-loc):dir(rtl) { text-align: right; }
+	/* A block tall enough for two title lines over the time wraps the title
+	   to two. The parts flow in a wrapping column, so a room that no longer
+	   fits under them moves into a second column the block clips: it gives
+	   way whole, before the title is cut, instead of being sliced. */
+	.tw-ev--tall .tw-ev-body {
+		flex-wrap: wrap;
+		column-gap: 16px;
+	}
+	.tw-ev--tall :is(.tw-ev-title, .tw-ev-time, .tw-ev-loc) { width: 100%; }
+	.tw-ev--tall .tw-ev-title {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		white-space: normal;
+		overflow-wrap: break-word; /* a word wider than an overlap lane breaks, not clips */
+		hyphens: auto; /* …and hyphenates where the host page declares a lang */
 	}
 
 	.tw-ev-loc {
@@ -1776,14 +1821,16 @@ function onWindowKeydown(e) {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		unicode-bidi: plaintext;
+		text-align: left;
 	}
 
 	.tw-ev-live {
 		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;
@@ -1831,7 +1878,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;

package/dist/views/shared/opening-top.js

@@ -0,0 +1,41 @@
+/**
+ * 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 function openingTop(blocks, line, hourH, room, anchor, viewH) {
+    const cuts = (y) => blocks.filter((b) => b.top < y && b.top + b.height > y);
+    const floor = line - 2 * hourH;
+    for (let c = cuts(line).filter((b) => b.top >= floor); c.length; c = cuts(line).filter((b) => b.top >= floor)) {
+        line = Math.floor(Math.min(...c.map((b) => b.top)) / hourH) * hourH;
+    }
+    // The anchor must stay on screen, with half an hour under it.
+    const fits = (y) => anchor >= y && anchor <= y + viewH - hourH / 2;
+    let y = line;
+    for (let guard = 0; guard < 8; guard++) {
+        const above = cuts(y - room);
+        if (!above.length)
+            return Math.max(0, y - room);
+        const start = Math.min(...above.map((b) => b.top));
+        if (start < y && fits(start)) {
+            y = start;
+            continue;
+        }
+        const across = cuts(y);
+        if (!across.length)
+            return Math.max(0, y);
+        const after = Math.ceil(Math.max(...across.map((b) => b.top + b.height)) / hourH) * hourH;
+        if (after > y && fits(after)) {
+            y = after;
+            continue;
+        }
+        break;
+    }
+    return Math.max(0, y);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomideusz/svelte-calendar",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "A themeable Svelte 5 calendar: day, week, scrolling-week and month views, agenda lists, touch-first mobile layouts, drag-and-drop, timezones, a headless API and an embeddable web component.",
   "type": "module",
   "sideEffects": [