@nomideusz/svelte-calendar 0.6.3 → 0.6.5

package/dist/views/mobile/MobileWeek.svelte

@@ -6,10 +6,9 @@
   left/right to navigate weeks.
 -->
 <script lang="ts">
-	import { getContext } from 'svelte';
+	import { useCalendarContext } from '../shared/context.svelte.js';
 	import { createClock } from '../../core/clock.svelte.js';
 	import type { TimelineEvent } from '../../core/types.js';
-	import type { ViewState } from '../../engine/view-state.svelte.js';
 	import { DAY_MS, sod, isAllDay, isMultiDay } from '../../core/time.js';
 	import { startOfWeek as sowFn } from '../../core/time.js';
 	import { fmtTime as _fmtTime, weekdayShort, getLabels } from '../../core/locale.js';
@@ -44,22 +43,16 @@
 	}: Props = $props();
 
 	// ── Context ────────────────────────────────────────
-	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 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 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 equalDays = $derived(equalDaysCtx?.current ?? false);
-	const autoHeight = $derived(autoHeightCtx?.current ?? false);
-	const showDates = $derived(showDatesCtx?.current ?? true);
-	const hideDays = $derived(hideDaysCtx?.current);
-	const oneventhover = $derived(callbacksCtx?.oneventhover);
-	const disabledDates = $derived(disabledDatesCtx?.current);
-	const disabledSet = $derived(new Set(disabledDates?.map(d => sod(d.getTime())) ?? []));
+	const ctx = useCalendarContext();
+	const viewState = $derived(ctx.viewState);
+	const equalDays = $derived(ctx.equalDays);
+	const showDates = $derived(ctx.showDates);
+	const hideDays = $derived(ctx.hideDays);
+	const autoHeight = $derived(ctx.autoHeight);
+	const oneventhover = $derived(ctx.oneventhover);
+	const disabledSet = $derived(ctx.disabledSet);
+	const loadRangeCtx = $derived(ctx.loadRange);
+	const minDuration = $derived(ctx.minDuration);
 
 	const clock = createClock();
 
@@ -192,6 +185,12 @@
 			viewState.setView(dayView);
 		}
 	}
+
+	function handleDayKeydown(e: KeyboardEvent, dayMs: number) {
+		if (e.key !== 'Enter' && e.key !== ' ') return;
+		e.preventDefault();
+		handleDayTap(dayMs);
+	}
 </script>
 
 <div
@@ -208,15 +207,21 @@
 	<!-- Vertical day list -->
 	<div class="mw-list" role="list">
 		{#each dayCells as cell (cell.ms)}
-			<button
+			<div
 				class="mw-row"
 				class:mw-row--today={cell.isToday}
 				class:mw-row--past={cell.isPast}
 				class:mw-row--weekend={cell.isWeekend}
 				class:mw-row--disabled={cell.isDisabled}
-				onclick={() => handleDayTap(cell.ms)}
-				aria-label="{cell.dayName} {cell.dayNum}"
+				role="listitem"
 			>
+				<button
+					class="mw-row-target"
+					disabled={cell.isDisabled}
+					onclick={() => handleDayTap(cell.ms)}
+					onkeydown={(e) => handleDayKeydown(e, cell.ms)}
+					aria-label="{cell.dayName} {cell.dayNum}"
+				></button>
 				<!-- Date column -->
 				<div class="mw-date">
 					<span class="mw-day-name" class:mw-day-name--today={cell.isToday}>{cell.dayName}</span>
@@ -231,14 +236,17 @@
 						<span class="mw-empty">{L.noEvents}</span>
 					{:else}
 						{#each cell.events.slice(0, MAX_EVENTS) as ev (ev.id)}
-							<div
+							<button
+								type="button"
 								class="mw-ev"
 								class:mw-ev--selected={selectedEventId === ev.id}
 								class:mw-ev--allday={isAllDay(ev) || isMultiDay(ev)}
 								class:mw-ev--current={!isAllDay(ev) && !isMultiDay(ev) && ev.start.getTime() <= clock.tick && ev.end.getTime() > clock.tick}
+								class:mw-ev--cancelled={ev.status === 'cancelled'}
+								class:mw-ev--tentative={ev.status === 'tentative'}
+								class:mw-ev--full={ev.status === 'full'}
+								class:mw-ev--limited={ev.status === 'limited'}
 								style:--ev-color={ev.color ?? 'var(--dt-accent)'}
-								role="button"
-								tabindex="0"
 								onclick={(e) => { e.stopPropagation(); oneventclick?.(ev); }}
 								onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(ev); } }}
 								onpointerenter={() => oneventhover?.(ev)}
@@ -252,7 +260,7 @@
 										<span class="mw-ev-time">{fmtTime(ev.start)}</span>
 									{/if}
 								</div>
-							</div>
+							</button>
 						{/each}
 						{#if cell.totalCount > MAX_EVENTS}
 							<span class="mw-ev-more">{L.nMore(cell.totalCount - MAX_EVENTS)}</span>
@@ -262,7 +270,7 @@
 
 				<!-- Chevron -->
 				<svg class="mw-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
-			</button>
+			</div>
 		{/each}
 	</div>
 </div>
@@ -296,10 +304,9 @@
 		display: flex;
 		align-items: center;
 		gap: 12px;
+		position: relative;
 		padding: 10px 12px;
-		border: none;
 		background: transparent;
-		cursor: pointer;
 		transition: background 120ms;
 		text-align: left;
 		width: 100%;
@@ -310,7 +317,7 @@
 	.mw-row:last-child {
 		border-bottom: none;
 	}
-	.mw-row:active {
+	.mw-row:has(.mw-row-target:active) {
 		background: color-mix(in srgb, var(--dt-accent, #2563eb) 6%, transparent);
 	}
 	.mw-row--today {
@@ -320,8 +327,30 @@
 		opacity: 0.5;
 	}
 	.mw-row--disabled {
-		opacity: 0.3;
-		pointer-events: none;
+		background-image: repeating-linear-gradient(
+			135deg,
+			transparent,
+			transparent 6px,
+			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 6px,
+			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent) 12px
+		);
+	}
+	.mw-row-target {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		padding: 0;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.mw-row-target:disabled {
+		cursor: default;
+	}
+	.mw-row-target:focus-visible {
+		outline: 2px solid var(--dt-accent, #2563eb);
+		outline-offset: -2px;
 	}
 
 	/* ─── Date column ────────────────────────────────── */
@@ -332,6 +361,9 @@
 		width: 40px;
 		flex-shrink: 0;
 		gap: 2px;
+		position: relative;
+		z-index: 1;
+		pointer-events: none;
 	}
 
 	.mw-day-name {
@@ -367,6 +399,8 @@
 		display: flex;
 		flex-direction: column;
 		gap: 4px;
+		position: relative;
+		z-index: 2;
 	}
 
 	.mw-empty {
@@ -402,6 +436,23 @@
 	.mw-ev--allday {
 		background: color-mix(in srgb, var(--ev-color) 14%, var(--dt-surface, #f9fafb));
 	}
+	.mw-ev--cancelled {
+		opacity: 0.5;
+	}
+	.mw-ev--cancelled .mw-ev-title {
+		text-decoration: line-through;
+	}
+	.mw-ev--tentative {
+		opacity: 0.65;
+		border: 1px dashed color-mix(in srgb, var(--ev-color) 35%, transparent);
+	}
+	.mw-ev--full {
+		opacity: 0.55;
+	}
+	.mw-ev--limited {
+		opacity: 0.65;
+		border: 1px dashed color-mix(in srgb, var(--ev-color) 35%, transparent);
+	}
 
 	.mw-ev-stripe {
 		width: 3px;
@@ -447,13 +498,12 @@
 	.mw-chevron {
 		flex-shrink: 0;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.2));
+		position: relative;
+		z-index: 1;
+		pointer-events: none;
 	}
 
 	/* ─── Focus ──────────────────────────────────────── */
-	.mw-row:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
-		outline-offset: -2px;
-	}
 	.mw-ev:focus-visible {
 		outline: 2px solid var(--ev-color, var(--dt-accent));
 		outline-offset: 1px;

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,39 @@
 		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 };
+			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: info.width - 16,
+				maxHeight: laneH - 16,
+			});
+			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: dragW - 16,
+					maxHeight: dragH - 16,
+				}),
 			});
 		}
 
@@ -493,7 +512,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 +642,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 +654,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 +665,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>
@@ -866,7 +893,7 @@
 		bottom: 0;
 		left: 0;
 		width: 2px;
-		background: var(--dt-accent, #ef4444);
+		background: var(--dt-accent, #2563eb);
 		box-shadow: 0 0 8px var(--dt-glow, rgba(239, 68, 68, 0.35));
 	}
 	.fs-now-tag {
@@ -874,8 +901,8 @@
 		top: 8px;
 		left: 8px;
 		font: 700 11px/1 var(--dt-mono, ui-monospace, monospace);
-		color: var(--dt-accent, #ef4444);
-		background: color-mix(in srgb, var(--dt-bg, #0b0e14) 92%, var(--dt-accent, #ef4444));
+		color: var(--dt-accent, #2563eb);
+		background: color-mix(in srgb, var(--dt-bg, #ffffff) 92%, var(--dt-accent, #2563eb));
 		border: 1px solid var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
 		padding: 3px 6px;
 		border-radius: 4px;
@@ -899,7 +926,7 @@
 		letter-spacing: 0.04em;
 		text-transform: uppercase;
 		color: var(--dt-text, rgba(226, 232, 240, 0.85));
-		background: color-mix(in srgb, var(--dt-surface, #10141c) 85%, transparent);
+		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
 		backdrop-filter: blur(6px);
 		-webkit-backdrop-filter: blur(6px);
 		padding: 8px 16px;
@@ -917,7 +944,7 @@
 		z-index: 20;
 		display: flex;
 		gap: 2px;
-		background: color-mix(in srgb, var(--dt-surface, #10141c) 85%, transparent);
+		background: color-mix(in srgb, var(--dt-surface, var(--dt-bg, #ffffff)) 85%, transparent);
 		backdrop-filter: blur(6px);
 		-webkit-backdrop-filter: blur(6px);
 		border-radius: 8px;
@@ -929,7 +956,7 @@
 		background: transparent;
 		color: var(--dt-text-2, rgba(148, 163, 184, 0.55));
 		cursor: pointer;
-		font: 600 11px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		font: 600 11px / 1 var(--dt-sans, system-ui, sans-serif);
 		padding: 6px 12px;
 		border-radius: 6px;
 		letter-spacing: 0.04em;
@@ -956,7 +983,7 @@
 		pointer-events: none;
 	}
 	.fs-nav-pill:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #ef4444) 55%, transparent);
+		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
 		outline-offset: 2px;
 	}
 
@@ -981,7 +1008,7 @@
 		gap: 4px;
 		padding: 2px 8px;
 		border-radius: 4px;
-		background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 18%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-left: 3px solid var(--ev-color);
 		white-space: nowrap;
 		flex-shrink: 0;
@@ -989,14 +1016,14 @@
 		transition: background 0.15s;
 	}
 	.fs-ad:hover {
-		background: color-mix(in srgb, var(--ev-color) 28%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 28%, var(--dt-surface, var(--dt-bg, #ffffff)));
 	}
 	.fs-ad:focus-visible {
-		outline: 2px solid color-mix(in srgb, var(--dt-accent, #ef4444) 55%, transparent);
+		outline: 2px solid color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
 		outline-offset: 2px;
 	}
 	.fs-ad--selected {
-		background: color-mix(in srgb, var(--ev-color) 30%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 30%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-left-width: 4px;
 	}
 
@@ -1029,7 +1056,7 @@
 		z-index: 6;
 		border-radius: 6px;
 		cursor: pointer;
-		background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 15%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		overflow: hidden;
 		display: flex;
 		align-items: center;
@@ -1037,18 +1064,18 @@
 		transition: box-shadow 120ms, background 120ms;
 	}
 	.fs-event:hover {
-		background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 25%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		box-shadow: 0 2px 12px color-mix(in srgb, var(--ev-color) 25%, transparent);
 	}
 	.fs-event--selected {
 		box-shadow: 0 0 0 2px var(--ev-color), 0 2px 14px color-mix(in srgb, var(--ev-color) 35%, transparent);
 	}
 	.fs-event--current {
-		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev-color) 20%, transparent);
 	}
 	.fs-event--next {
-		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, #10141c));
+		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border: 1px dashed color-mix(in srgb, var(--ev-color) 35%, transparent);
 	}
 	.fs-event--dragging {
@@ -1058,17 +1085,39 @@
 		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) */
+	/* Event inner */
 	.fs-ev-inner {
-		writing-mode: vertical-rl;
-		transform: rotate(180deg);
 		display: flex;
-		align-items: center;
-		gap: 6px;
-		max-height: 100%;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: center;
+		gap: 3px;
+		width: 100%;
+		height: 100%;
 		overflow: hidden;
-		padding: 8px 4px;
+		box-sizing: border-box;
+		padding: 6px 8px;
 	}
 	.fs-ev-live {
 		flex-shrink: 0;
@@ -1109,7 +1158,14 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-	.fs-ev-tags { display: flex; gap: 4px; }
+	.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; flex-wrap: wrap; }
 	.fs-ev-tag {
 		font: 500 8px/1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--ev-color, var(--dt-accent));
@@ -1121,7 +1177,7 @@
 
 	/* ─── Focus-visible ──────────────────────────────── */
 	.fs-event:focus-visible {
-		outline: 2px solid var(--dt-accent, #ef4444);
+		outline: 2px solid var(--dt-accent, #2563eb);
 		outline-offset: 2px;
 	}
 </style>