@nomideusz/svelte-calendar 1.4.1 → 1.4.2

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/views/agenda/AgendaWeek.svelte

@@ -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

@@ -843,6 +843,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

@@ -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

@@ -305,6 +305,9 @@ const weekIsEmpty = $derived(!events.some((ev) => ev.start.getTime() < weekEndMs
 // 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.
+// 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;
@@ -339,6 +342,7 @@ $effect(() => {
 			}
 		}
 		el.scrollTop = Math.max(0, (hour - startHour) * HOUR_H - LABEL_ROOM);
+		placed = true;
 	});
 });
 // ── Pointer coalescing ─────────────────────────────
@@ -442,6 +446,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 +668,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 +696,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 +1015,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 +1119,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"
@@ -1378,9 +1403,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 +1461,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 +1503,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 +1805,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,6 +1838,8 @@ function onWindowKeydown(e) {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		unicode-bidi: plaintext;
+		text-align: left;
 	}
 
 	.tw-ev-live {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomideusz/svelte-calendar",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "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": [