@nomideusz/svelte-calendar 0.6.3 → 0.6.4

package/dist/views/planner/PlannerDay.svelte

@@ -6,9 +6,11 @@
   Events are positioned as horizontal cards with overlap support.
 -->
 <script lang="ts">
-	import { getContext, onMount, tick, untrack, type Snippet } from 'svelte';
+	import { onMount, tick, untrack } from 'svelte';
+	import { useCalendarContext } from '../shared/context.svelte.js';
 	import { fly } from 'svelte/transition';
 	import { createClock } from '../../core/clock.svelte.js';
+	import { createTextMeasure, type ContentFit } from '../../core/measure.js';
 	import type { TimelineEvent, BlockedSlot } from '../../core/types.js';
 	import type { DragState } from '../../engine/drag.svelte.js';
 	import type { ViewState } from '../../engine/view-state.svelte.js';
@@ -58,33 +60,21 @@
 	}: Props = $props();
 
 	// ── Context (available when inside Calendar) ──
-	const drag = getContext<DragState>('calendar:drag') as DragState | undefined;
-	const commitDragCtx = getContext<() => void>('calendar:commitDrag') as (() => void) | undefined;
-	const snapIntervalCtx = getContext<{ current: number }>('calendar:snapInterval');
-	const viewState = getContext<ViewState>('calendar:viewState') as ViewState | undefined;
-	const loadRangeCtx = getContext<{ current: { start: Date; end: Date } | null; set: (r: { start: Date; end: Date } | null) => void }>('calendar:loadRange') as { current: { start: Date; end: Date } | null; set: (r: { start: Date; end: Date } | null) => void } | undefined;
-
+	const ctx = useCalendarContext();
 	const clock = createClock();
-	const showNavCtx = getContext<{ current: boolean }>('calendar:showNavigation') as { current: boolean } | undefined;
-	const showDatesCtx = getContext<{ current: boolean }>('calendar:showDates') as { current: boolean } | undefined;
-	const showNav = $derived(showNavCtx?.current ?? true);
-	const showDates = $derived(showDatesCtx?.current ?? true);
-
-	// ── New feature contexts ──
-	const blockedSlotsCtx = getContext<{ current: BlockedSlot[] | undefined }>('calendar:blockedSlots') as { current: BlockedSlot[] | undefined } | undefined;
-	const dayHeaderSnippetCtx = getContext<{ current: Snippet<[{ date: Date; isToday: boolean; dayName: string }]> | undefined }>('calendar:dayHeaderSnippet') as { current: Snippet<[{ date: Date; isToday: boolean; dayName: string }]> | undefined } | undefined;
-	const minDurationCtx = getContext<{ current: number | undefined }>('calendar:minDuration') as { current: number | undefined } | undefined;
-	const callbacksCtx = getContext<{ oneventhover?: (event: TimelineEvent) => void }>('calendar:callbacks') as { oneventhover?: (event: TimelineEvent) => void } | undefined;
-	const disabledDatesCtx = getContext<{ current: Date[] | undefined }>('calendar:disabledDates') as { current: Date[] | undefined } | undefined;
-	const autoHeightCtx = getContext<{ current: boolean }>('calendar:autoHeight') as { current: boolean } | undefined;
-
-	const blockedSlots = $derived(blockedSlotsCtx?.current);
-	const dayHeaderSnippet = $derived(dayHeaderSnippetCtx?.current);
-	const minDuration = $derived(minDurationCtx?.current);
-	const autoHeight = $derived(autoHeightCtx?.current ?? false);
-	const oneventhover = $derived(callbacksCtx?.oneventhover);
-	const disabledDates = $derived(disabledDatesCtx?.current);
-	const disabledSet = $derived(new Set(disabledDates?.map(d => sod(d.getTime())) ?? []));
+	const drag = $derived(ctx.drag);
+	const commitDragCtx = $derived(ctx.commitDrag);
+	const viewState = $derived(ctx.viewState);
+	const loadRangeCtx = $derived(ctx.loadRange);
+	const showNav = $derived(ctx.showNav);
+	const showDates = $derived(ctx.showDates);
+	const blockedSlots = $derived(ctx.blockedSlots);
+	const dayHeaderSnippet = $derived(ctx.dayHeaderSnippet);
+	const minDuration = $derived(ctx.minDuration);
+	const autoHeight = $derived(ctx.autoHeight);
+	const oneventhover = $derived(ctx.oneventhover);
+	const disabledSet = $derived(ctx.disabledSet);
+	const SNAP_MS = $derived(ctx.snapInterval * 60_000);
 
 	// ─── State ──────────────────────────────────────────
 	let following = $state(true);
@@ -113,7 +103,6 @@
 	const startHour = $derived(visibleHours?.[0] ?? 0);
 	const endHour = $derived(visibleHours?.[1] ?? 24);
 	const hourCount = $derived(Math.max(1, endHour - startHour));
-	const SNAP_MS = $derived((snapIntervalCtx?.current ?? 15) * 60_000);
 	const DAY_GAP = 2;
 
 	const dateLabel = $derived(
@@ -207,6 +196,16 @@
 	const EVENT_GAP = 5;
 	const MIN_EVENT_H = 32;
 
+	// Text measure for smart content fitting
+	const measure = createTextMeasure({
+		titleFont: '600 13px system-ui, sans-serif',
+		secondaryFont: '400 10px system-ui, sans-serif',
+		tagFont: '500 8px system-ui, sans-serif',
+		titleLineHeight: 16,
+		secondaryLineHeight: 13,
+		contentGap: 6,
+	});
+
 	interface PositionedEvent {
 		ev: TimelineEvent;
 		x: number;
@@ -218,6 +217,7 @@
 		isCurrent: boolean;
 		isNext: boolean;
 		isDragged: boolean;
+		fit: ContentFit;
 	}
 
 	const positionedEvents = $derived.by(() => {
@@ -297,20 +297,40 @@
 		const result: PositionedEvent[] = infos.map(({ startMs: _s, endMs: _e, ...info }) => {
 			const laneH = Math.max(MIN_EVENT_H, availH / info.groupMaxRow - EVENT_GAP);
 			const topPx = contentTop + info.row * (availH / info.groupMaxRow);
-			return { ...info, topPx, heightPx: laneH, isNext: info.isNext };
+			// Vertical text: text "width" = heightPx, content "height" = width
+			const fit = measure.fitContent({
+				title: info.ev.title,
+				subtitle: info.ev.subtitle,
+				location: info.ev.location,
+				time: `${fmtTime(info.ev.start, locale)} – ${fmtTime(info.ev.end, locale)}`,
+				tags: info.ev.tags,
+				maxWidth: laneH - 16, // vertical: heightPx minus padding
+				maxHeight: info.width - 16, // vertical: width minus padding
+			});
+			return { ...info, topPx, heightPx: laneH, isNext: info.isNext, fit };
 		});
 
 		if (draggedEv && dragP) {
 			const x = timeToPx(dragP.start.getTime());
 			const xEnd = timeToPx(dragP.end.getTime());
+			const dragH = Math.max(MIN_EVENT_H, availH - EVENT_GAP);
+			const dragW = Math.max(xEnd - x, 28);
 			result.push({
-				ev: draggedEv, x, width: Math.max(xEnd - x, 28),
+				ev: draggedEv, x, width: dragW,
 				row: 0, groupMaxRow: 1,
 				topPx: contentTop,
-				heightPx: Math.max(MIN_EVENT_H, availH - EVENT_GAP),
+				heightPx: dragH,
 				isCurrent: draggedEv.start.getTime() <= now && draggedEv.end.getTime() > now,
 				isNext: false,
 				isDragged: true,
+				fit: measure.fitContent({
+					title: draggedEv.title,
+					subtitle: draggedEv.subtitle,
+					location: draggedEv.location,
+					tags: draggedEv.tags,
+					maxWidth: dragH - 16,
+					maxHeight: dragW - 16,
+				}),
 			});
 		}
 
@@ -493,7 +513,7 @@
 	let evDragEvent: TimelineEvent | null = null;
 
 	function onEventPointerDown(e: PointerEvent, ev: TimelineEvent) {
-		if (e.button !== 0 || !drag || readOnly) return;
+		if (e.button !== 0 || !drag || readOnly || ev.data?.readOnly) return;
 		e.stopPropagation();
 		evDragStartX = e.clientX;
 		evDragOriginPx = timeToPx(ev.start.getTime());
@@ -623,6 +643,11 @@
 					class:fs-event--current={p.isCurrent}
 					class:fs-event--next={p.isNext}
 					class:fs-event--dragging={p.isDragged}
+					class:fs-event--readonly={p.ev.data?.readOnly}
+					class:fs-event--cancelled={p.ev.status === 'cancelled'}
+					class:fs-event--tentative={p.ev.status === 'tentative'}
+					class:fs-event--full={p.ev.status === 'full'}
+					class:fs-event--limited={p.ev.status === 'limited'}
 					style:left="{p.x}px"
 					style:width="{p.width}px"
 					style:top="{p.topPx}px"
@@ -630,7 +655,7 @@
 					style:--ev-color={p.ev.color ?? 'var(--dt-accent)'}
 					role="button"
 					tabindex="0"
-					aria-label="{p.ev.title}{p.isCurrent ? ` (${L.inProgress})` : ''}{p.isNext ? ` (${L.upNext})` : ''}"
+					aria-label="{p.ev.title}{p.ev.status === 'cancelled' ? ' (cancelled)' : ''}{p.ev.status === 'tentative' ? ' (tentative)' : ''}{p.ev.status === 'full' ? ' (full)' : ''}{p.ev.status === 'limited' ? ' (limited)' : ''}{p.isCurrent ? ` (${L.inProgress})` : ''}{p.isNext ? ` (${L.upNext})` : ''}"
 					onpointerdown={(e) => onEventPointerDown(e, p.ev)}
 					onpointerenter={() => oneventhover?.(p.ev)}
 					onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); oneventclick?.(p.ev); } }}
@@ -641,14 +666,17 @@
 						{:else if p.isNext}
 							<span class="fs-ev-next-badge" aria-hidden="true">{L.upNext}</span>
 						{/if}
-						{#if p.heightPx > 64}
+						{#if p.fit.time}
 							<span class="fs-ev-time">{fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}</span>
 						{/if}
 						<span class="fs-ev-title">{p.ev.title}</span>
-						{#if p.ev.subtitle && p.heightPx > 48}
+						{#if p.ev.subtitle && p.fit.subtitle}
 							<span class="fs-ev-sub">{p.ev.subtitle}</span>
 						{/if}
-						{#if p.ev.tags?.length && p.heightPx > 72}
+						{#if p.ev.location && p.fit.location}
+							<span class="fs-ev-loc">{p.ev.location}</span>
+						{/if}
+						{#if p.ev.tags?.length && p.fit.tags}
 							<span class="fs-ev-tags">
 								{#each p.ev.tags as tag}
 									<span class="fs-ev-tag">{tag}</span>
@@ -1058,6 +1086,26 @@
 		cursor: grabbing;
 		transition: none;
 	}
+	.fs-event--cancelled {
+		opacity: 0.5;
+	}
+	.fs-event--cancelled .fs-ev-title {
+		text-decoration: line-through;
+	}
+	.fs-event--tentative {
+		opacity: 0.65;
+		border: 1px dashed color-mix(in srgb, var(--ev-color) 40%, transparent);
+	}
+	.fs-event--full {
+		opacity: 0.55;
+	}
+	.fs-event--limited {
+		opacity: 0.65;
+		border: 1px dashed color-mix(in srgb, var(--ev-color) 40%, transparent);
+	}
+	.fs-event--readonly {
+		cursor: default;
+	}
 
 	/* Event inner (vertical text, bottom-to-top reading) */
 	.fs-ev-inner {
@@ -1109,6 +1157,13 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+	.fs-ev-loc {
+		font: 400 10px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-3, rgba(148, 163, 184, 0.5));
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
 	.fs-ev-tags { display: flex; gap: 4px; }
 	.fs-ev-tag {
 		font: 500 8px/1 var(--dt-sans, system-ui, sans-serif);

package/dist/views/planner/PlannerWeek.svelte

@@ -9,7 +9,8 @@
   • Generous whitespace, thin dividers, minimal chrome.
 -->
 <script lang="ts">
-	import { getContext, onMount, tick, untrack, type Snippet } from 'svelte';
+	import { onMount, tick, untrack } from 'svelte';
+	import { useCalendarContext } from '../shared/context.svelte.js';
 	import { createClock } from '../../core/clock.svelte.js';
 	import type { TimelineEvent, BlockedSlot } from '../../core/types.js';
 	import type { DragState } from '../../engine/drag.svelte.js';
@@ -48,58 +49,56 @@
 		readOnly = false,
 	}: Props = $props();
 
-	// ── Drag support (available when inside Calendar) ──
-	const drag = getContext<DragState>('calendar:drag') as DragState | undefined;
-	const commitDragCtx = getContext<() => void>('calendar:commitDrag') as (() => void) | undefined;
-	const viewState = getContext<ViewState>('calendar:viewState') as ViewState | undefined;
-	const loadRangeCtx = getContext<{ current: { start: Date; end: Date } | null; set: (r: { start: Date; end: Date } | null) => void }>('calendar:loadRange') as { current: { start: Date; end: Date } | null; set: (r: { start: Date; end: Date } | null) => void } | undefined;
-
+	const ctx = useCalendarContext();
 	const clock = createClock();
-	const showNavCtx = getContext<{ current: boolean }>('calendar:showNavigation') as { current: boolean } | undefined;
-	const equalDaysCtx = getContext<{ current: boolean }>('calendar:equalDays') as { current: boolean } | undefined;
-	const showDatesCtx = getContext<{ current: boolean }>('calendar:showDates') as { current: boolean } | undefined;
-	const hideDaysCtx = getContext<{ current: number[] | undefined }>('calendar:hideDays') as { current: number[] | undefined } | undefined;
-	const showNav = $derived(showNavCtx?.current ?? true);
-	const equalDays = $derived(equalDaysCtx?.current ?? false);
-	const showDates = $derived(showDatesCtx?.current ?? true);
-	const hideDays = $derived(hideDaysCtx?.current);
-
-	// ── New feature contexts ──
-	const blockedSlotsCtx = getContext<{ current: BlockedSlot[] | undefined }>('calendar:blockedSlots') as { current: BlockedSlot[] | undefined } | undefined;
-	const dayHeaderSnippetCtx = getContext<{ current: Snippet<[{ date: Date; isToday: boolean; dayName: string }]> | undefined }>('calendar:dayHeaderSnippet') as { current: Snippet<[{ date: Date; isToday: boolean; dayName: string }]> | undefined } | undefined;
-	const minDurationCtx = getContext<{ current: number | undefined }>('calendar:minDuration') as { current: number | undefined } | undefined;
-	const callbacksCtx = getContext<{ oneventhover?: (event: TimelineEvent) => void }>('calendar:callbacks') as { oneventhover?: (event: TimelineEvent) => void } | undefined;
-	const disabledDatesCtx = getContext<{ current: Date[] | undefined }>('calendar:disabledDates') as { current: Date[] | undefined } | undefined;
-	const autoHeightCtx = getContext<{ current: boolean }>('calendar:autoHeight') as { current: boolean } | undefined;
-
-	const blockedSlots = $derived(blockedSlotsCtx?.current);
-	const dayHeaderSnippet = $derived(dayHeaderSnippetCtx?.current);
-	const minDuration = $derived(minDurationCtx?.current);
-	const autoHeight = $derived(autoHeightCtx?.current ?? false);
-	const oneventhover = $derived(callbacksCtx?.oneventhover);
-	const disabledDates = $derived(disabledDatesCtx?.current);
-	const disabledSet = $derived(new Set(disabledDates?.map(d => sod(d.getTime())) ?? []));
-
-	// ─── Infinite-scroll config ────────────────────────
-	const BUFFER_WEEKS = 6;      // weeks rendered on each side of anchor
-	const EDGE_WEEKS = 2;        // rebase when this close to an edge
-	const SHIFT_WEEKS = 3;       // weeks to shift per rebase
+	const drag = $derived(ctx.drag);
+	const commitDragCtx = $derived(ctx.commitDrag);
+	const viewState = $derived(ctx.viewState);
+	const loadRangeCtx = $derived(ctx.loadRange);
+	const showNav = $derived(ctx.showNav);
+	const equalDays = $derived(ctx.equalDays);
+	const showDates = $derived(ctx.showDates);
+	const hideDays = $derived(ctx.hideDays);
+	const blockedSlots = $derived(ctx.blockedSlots);
+	const dayHeaderSnippet = $derived(ctx.dayHeaderSnippet);
+	const minDuration = $derived(ctx.minDuration);
+	const autoHeight = $derived(ctx.autoHeight);
+	const oneventhover = $derived(ctx.oneventhover);
+	const disabledSet = $derived(ctx.disabledSet);
+
+	// ─── Buffer config ─────────────────────────────
+	const INITIAL_BUFFER = 52;   // ±1 year on load
+	const EXTEND_BY = 26;        // +6 months when user hits edge
+	const EDGE_PX = 200;         // extend when this close to scroll edge
+	let bufferBefore = $state(INITIAL_BUFFER);
+	let bufferAfter = $state(INITIAL_BUFFER);
 	const MAX_EVENTS_SHOWN = 5;
 
-	// Internal anchor drives layout; syncs bidirectionally with focusDate.
 	const _initMs = untrack(() => sod(focusDate?.getTime() ?? Date.now()));
 	let internalFocusMs = $state(_initMs);
 	let lastExternalMs = _initMs;
-	let rebasing = false;
 
 	let el: HTMLDivElement;
 	let scrolled = $state(false);
 
-	function scrollCurrentWeekIntoContainer(behavior: ScrollBehavior = 'auto') {
+	function scrollWeekIntoContainer(targetMs?: number, behavior: ScrollBehavior = 'auto') {
 		if (!el) return;
-		const current = el.querySelector<HTMLElement>('.wg-week--current');
-		if (!current) return;
-		const targetTop = current.offsetTop - (el.clientHeight - current.offsetHeight) / 2;
+		let target: HTMLElement | null = null;
+		if (targetMs !== undefined) {
+			// Find the week row containing this date
+			const rows = el.querySelectorAll<HTMLElement>('[data-week]');
+			for (const row of rows) {
+				const weekMs = Number(row.dataset.week);
+				if (weekMs <= targetMs && targetMs < weekMs + customDays * DAY_MS) {
+					target = row;
+					break;
+				}
+			}
+		}
+		// Fall back to current week
+		if (!target) target = el.querySelector<HTMLElement>('.wg-week--current');
+		if (!target) return;
+		const targetTop = target.offsetTop - (el.clientHeight - target.offsetHeight) / 2;
 		el.scrollTo({ top: Math.max(0, targetTop), behavior });
 	}
 
@@ -117,8 +116,8 @@
 	// what range we need. Calendar's single $effect handles loading.
 	$effect(() => {
 		if (!loadRangeCtx) return;
-		const rangeStart = new Date(anchorPeriodStart - BUFFER_WEEKS * customDays * DAY_MS);
-		const rangeEnd = new Date(anchorPeriodStart + (BUFFER_WEEKS + 1) * customDays * DAY_MS);
+		const rangeStart = new Date(anchorPeriodStart - bufferBefore * customDays * DAY_MS);
+		const rangeEnd = new Date(anchorPeriodStart + (bufferAfter + 1) * customDays * DAY_MS);
 		loadRangeCtx.set({ start: rangeStart, end: rangeEnd });
 		return () => loadRangeCtx.set(null);
 	});
@@ -147,7 +146,7 @@
 	const weeks = $derived.by(() => {
 		const result: WeekRow[] = [];
 
-		for (let w = -BUFFER_WEEKS; w <= BUFFER_WEEKS; w++) {
+		for (let w = -bufferBefore; w <= bufferAfter; w++) {
 			const periodStart = anchorPeriodStart + w * customDays * DAY_MS;
 			const isCurrent = todayMs >= periodStart && todayMs < periodStart + customDays * DAY_MS;
 			const days: DayCell[] = [];
@@ -223,88 +222,20 @@
 	// ─── Scroll to current week on mount ────────────────
 	onMount(async () => {
 		await tick();
-		scrollCurrentWeekIntoContainer();
+		scrollWeekIntoContainer();
 	});
 
-	// ─── Infinite-scroll helpers ────────────────────────
-
-	/** Detect external focusDate changes (from nav arrows). */
+	// ─── External navigation (arrows, goToday) ──────────
 	$effect(() => {
 		const ext = focusDate ? sod(focusDate.getTime()) : clock.today;
-		if (ext !== lastExternalMs && !rebasing) {
+		if (ext !== lastExternalMs) {
 			lastExternalMs = ext;
 			internalFocusMs = ext;
-			tick().then(() => scrollCurrentWeekIntoContainer('smooth'));
+			tick().then(() => scrollWeekIntoContainer(ext, 'smooth'));
 		}
 	});
 
-	/** Check if viewport is near top/bottom edge; if so, rebase the window. */
-	function checkVerticalEdges() {
-		if (!el || !viewState || rebasing) return;
-		const rows = el.querySelectorAll<HTMLElement>('[data-week]');
-		if (!rows.length) return;
-
-		const avgH = el.scrollHeight / rows.length;
-		const threshold = avgH * EDGE_WEEKS;
-		const maxScroll = el.scrollHeight - el.clientHeight;
-
-		if (el.scrollTop < threshold) {
-			rebaseWeeks(-1);
-		} else if (maxScroll > 0 && maxScroll - el.scrollTop < threshold) {
-			rebaseWeeks(1);
-		}
-	}
-
-	/** Shift the rendered week window by SHIFT_WEEKS in the given direction. */
-	function rebaseWeeks(direction: number) {
-		if (rebasing) return;
-		rebasing = true;
-
-		// Save an anchor: first visible week row and its visual offset.
-		const rows = el.querySelectorAll<HTMLElement>('[data-week]');
-		let anchorWeekMs = 0;
-		let anchorTop = 0;
-		for (const row of rows) {
-			const top = row.offsetTop - el.scrollTop;
-			if (top + row.offsetHeight > 0) {
-				anchorWeekMs = Number(row.dataset.week);
-				anchorTop = top;
-				break;
-			}
-		}
-
-		const shift = SHIFT_WEEKS * direction;
-		internalFocusMs += shift * customDays * DAY_MS;
-		lastExternalMs = internalFocusMs;
-		viewState?.setFocusDate(new Date(internalFocusMs));
-
-		tick().then(() => {
-			// Restore the anchor week to its previous visual position.
-			const anchor = el.querySelector<HTMLElement>(`[data-week="${anchorWeekMs}"]`);
-			if (anchor) {
-				el.scrollTop = anchor.offsetTop - anchorTop;
-			}
-			rebasing = false;
-		});
-	}
-
-	/** Push the currently visible centre week to viewState. */
-	function syncFocusFromScroll() {
-		if (!el || !viewState || rebasing) return;
-		const centerY = el.scrollTop + el.clientHeight / 2;
-		const rows = el.querySelectorAll<HTMLElement>('[data-week]');
-		for (const row of rows) {
-			if (row.offsetTop + row.offsetHeight >= centerY) {
-				const ms = Number(row.dataset.week);
-				if (ms && ms !== lastExternalMs) {
-					lastExternalMs = ms;
-					viewState.setFocusDate(new Date(ms));
-				}
-				break;
-			}
-		}
-	}
-
+	// ─── Scroll state ─────────────────────────────────────
 	function isCurrentWeekVisible(): boolean {
 		if (!el) return false;
 		const current = el.querySelector<HTMLElement>('.wg-week--current');
@@ -314,14 +245,26 @@
 		return bottom > 0 && top < el.clientHeight;
 	}
 
-	let suppressScroll = false;
+	let extending = false;
 
 	function handleUserScroll() {
-		if (suppressScroll) return;
 		scrolled = !isCurrentWeekVisible();
-		if (!rebasing) {
-			checkVerticalEdges();
-			syncFocusFromScroll();
+		if (!el || extending) return;
+		// Extend buffer when user scrolls near the edge
+		if (el.scrollTop < EDGE_PX) {
+			extending = true;
+			const oldHeight = el.scrollHeight;
+			bufferBefore += EXTEND_BY;
+			// After DOM updates, compensate scroll for prepended content
+			tick().then(() => {
+				el.scrollTop += el.scrollHeight - oldHeight;
+				extending = false;
+			});
+		} else {
+			const bottomRemaining = el.scrollHeight - el.clientHeight - el.scrollTop;
+			if (bottomRemaining < EDGE_PX) {
+				bufferAfter += EXTEND_BY;
+			}
 		}
 	}
 
@@ -329,15 +272,9 @@
 		internalFocusMs = clock.today;
 		lastExternalMs = clock.today;
 		viewState?.goToday();
-		suppressScroll = true;
 		scrolled = false;
 		tick().then(() => {
-			scrollCurrentWeekIntoContainer('smooth');
-			// Keep suppressed until smooth scroll finishes, then recheck
-			setTimeout(() => {
-				suppressScroll = false;
-				scrolled = !isCurrentWeekVisible();
-			}, 600);
+			scrollWeekIntoContainer(clock.today, 'smooth');
 		});
 	}
 
@@ -374,7 +311,7 @@
 	}
 
 	function onEventPointerDown(e: PointerEvent, ev: TimelineEvent) {
-		if (e.button !== 0 || !drag || readOnly) return;
+		if (e.button !== 0 || !drag || readOnly || ev.data?.readOnly) return;
 		e.stopPropagation();
 		evDragStartX = e.clientX;
 		evDragStartY = e.clientY;
@@ -536,15 +473,23 @@
 											class:wg-ev--selected={selectedEventId === ev.id}
 											class:wg-ev--current={ev.start.getTime() <= clock.tick && ev.end.getTime() > clock.tick}
 											class:wg-ev--dragging={evDragging && evDragId === ev.id}
+											class:wg-ev--readonly={ev.data?.readOnly}
+											class:wg-ev--cancelled={ev.status === 'cancelled'}
+											class:wg-ev--tentative={ev.status === 'tentative'}
+											class:wg-ev--full={ev.status === 'full'}
+											class:wg-ev--limited={ev.status === 'limited'}
 											style:--ev-color={ev.color ?? 'var(--dt-accent)'}
 											role="button"
 											tabindex="0"
-											aria-label="{ev.title}{ev.start.getTime() <= clock.tick && ev.end.getTime() > clock.tick ? ` (${L.inProgress})` : ''}"
+											aria-label="{ev.title}{ev.status === 'cancelled' ? ` (cancelled)` : ''}{ev.status === 'tentative' ? ` (tentative)` : ''}{ev.status === 'full' ? ` (full)` : ''}{ev.status === 'limited' ? ` (limited)` : ''}{ev.start.getTime() <= clock.tick && ev.end.getTime() > clock.tick ? ` (${L.inProgress})` : ''}"
 											onpointerdown={(e) => onEventPointerDown(e, ev)}										onpointerenter={() => oneventhover?.(ev)}
 											onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(ev); } }}
 										>
 											<span class="wg-ev-time">{fmtAmPm(ev.start)}</span>
 										<span class="wg-ev-title">{ev.title}</span>
+										{#if ev.location}
+											<span class="wg-ev-loc">{ev.location}</span>
+										{/if}
 										</div>
 									{/each}
 									{#if day.events.length > MAX_EVENTS_SHOWN}
@@ -860,6 +805,27 @@
 		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, #10141c));
 	}
 
+	.wg-ev--cancelled {
+		opacity: 0.5;
+	}
+	.wg-ev--cancelled .wg-ev-title {
+		text-decoration: line-through;
+	}
+	.wg-ev--tentative {
+		opacity: 0.65;
+		border: 1px dashed color-mix(in srgb, var(--ev-color) 40%, transparent);
+	}
+	.wg-ev--full {
+		opacity: 0.55;
+	}
+	.wg-ev--limited {
+		opacity: 0.65;
+		border: 1px dashed color-mix(in srgb, var(--ev-color) 40%, transparent);
+	}
+	.wg-ev--readonly {
+		cursor: default;
+	}
+
 	.wg-ev-time {
 		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.4));
@@ -875,6 +841,15 @@
 		text-overflow: ellipsis;
 	}
 
+	.wg-ev-loc {
+		font: 400 9px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.35));
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		flex-shrink: 1;
+	}
+
 	.wg-ev-more {
 		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.35));

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

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+import type { TimelineEvent, BlockedSlot } from '../../core/types.js';
+import type { DragState } from '../../engine/drag.svelte.js';
+import type { ViewState } from '../../engine/view-state.svelte.js';
+export interface CalendarContext {
+    readonly viewState: ViewState | undefined;
+    readonly drag: DragState | undefined;
+    readonly commitDrag: (() => void) | undefined;
+    readonly snapInterval: number;
+    readonly showNav: boolean;
+    readonly equalDays: boolean;
+    readonly showDates: boolean;
+    readonly hideDays: number[] | undefined;
+    readonly isMobile: boolean;
+    readonly autoHeight: boolean;
+    readonly compact: boolean;
+    readonly readOnly: boolean;
+    readonly blockedSlots: BlockedSlot[] | undefined;
+    readonly dayHeaderSnippet: Snippet<[{
+        date: Date;
+        isToday: boolean;
+        dayName: string;
+    }]> | undefined;
+    readonly minDuration: number | undefined;
+    readonly maxDuration: number | undefined;
+    readonly oneventhover: ((event: TimelineEvent) => void) | undefined;
+    readonly disabledDates: Date[] | undefined;
+    readonly disabledSet: Set<number>;
+    readonly loadRange: {
+        current: {
+            start: Date;
+            end: Date;
+        } | null;
+        set: (r: {
+            start: Date;
+            end: Date;
+        } | null) => void;
+    } | undefined;
+    readonly eventSnippet: Snippet<[TimelineEvent]> | undefined;
+    readonly emptySnippet: Snippet | undefined;
+}
+/**
+ * Read the calendar context.
+ * Call at component init time (top-level script).
+ * Returns an object with getters that delegate to the raw context.
+ */
+export declare function useCalendarContext(): CalendarContext;

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

@@ -0,0 +1,47 @@
+/**
+ * Shared context reader for calendar views.
+ *
+ * Calendar.svelte sets a single 'calendar' context with reactive getters.
+ * This module reads it and returns a typed interface for views.
+ */
+import { getContext } from 'svelte';
+import { sod } from '../../core/time.js';
+/**
+ * Read the calendar context.
+ * Call at component init time (top-level script).
+ * Returns an object with getters that delegate to the raw context.
+ */
+export function useCalendarContext() {
+    const raw = getContext('calendar');
+    return {
+        get viewState() { return raw?.viewState; },
+        get drag() { return raw?.drag; },
+        get commitDrag() { return raw?.commitDrag; },
+        get snapInterval() { return raw?.snapInterval ?? 15; },
+        get showNav() { return raw?.showNavigation ?? true; },
+        get equalDays() { return raw?.equalDays ?? false; },
+        get showDates() { return raw?.showDates ?? true; },
+        get hideDays() { return raw?.hideDays; },
+        get isMobile() { return raw?.mobile ?? false; },
+        get autoHeight() { return raw?.autoHeight ?? false; },
+        get compact() { return raw?.compact ?? false; },
+        get readOnly() { return raw?.readOnly ?? false; },
+        get blockedSlots() { return raw?.blockedSlots; },
+        get dayHeaderSnippet() { return raw?.dayHeaderSnippet; },
+        get minDuration() { return raw?.minDuration; },
+        get maxDuration() { return raw?.maxDuration; },
+        get oneventhover() { return raw?.oneventhover; },
+        get disabledDates() { return raw?.disabledDates; },
+        get disabledSet() { return new Set(raw?.disabledDates?.map(d => sod(d.getTime())) ?? []); },
+        get loadRange() {
+            if (!raw)
+                return undefined;
+            return {
+                get current() { return raw.loadRange; },
+                set: (r) => raw.setLoadRange(r),
+            };
+        },
+        get eventSnippet() { return raw?.eventSnippet; },
+        get emptySnippet() { return raw?.emptySnippet; },
+    };
+}