@nomideusz/svelte-calendar 0.9.0 → 0.11.0

package/dist/views/agenda/AgendaWeek.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">import { createClock } from "../../core/clock.svelte.js";
-import { sod, DAY_MS, startOfWeek, dayNum, isAllDay, isMultiDay } from "../../core/time.js";
-import { weekdayLong, monthLong, getLabels } from "../../core/locale.js";
+import { sod, DAY_MS, startOfWeek, dayNum, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
+import { weekdayLong, monthLong } from "../../core/locale.js";
 import { useCalendarContext } from "../shared/context.svelte.js";
 import EventContent from "../shared/EventContent.svelte";
 import { fmtTime, duration, timeUntilMs, progress, groupIntoSlots } from "../shared/format.js";
-const L = $derived(getLabels());
 const ctx = useCalendarContext();
+const L = $derived(ctx.labels);
 let {
   mondayStart = true,
   locale,
-  height = 520,
+  height,
   events = [],
   style = "",
   focusDate,
@@ -29,14 +29,17 @@ const oneventhover = $derived(ctx.oneventhover);
 const disabledSet = $derived(ctx.disabledSet);
 let swipeStartX = 0;
 let swipeStartY = 0;
+let swipeActive = false;
 const SWIPE_THRESHOLD = 50;
 function onPointerDown(e) {
-  if (!isMobile) return;
+  if (!isMobile || e.pointerType !== "touch") return;
+  swipeActive = true;
   swipeStartX = e.clientX;
   swipeStartY = e.clientY;
 }
 function onPointerUp(e) {
-  if (!isMobile) return;
+  if (!swipeActive || e.pointerType !== "touch") return;
+  swipeActive = false;
   const dx = e.clientX - swipeStartX;
   const dy = e.clientY - swipeStartY;
   if (Math.abs(dx) > SWIPE_THRESHOLD && Math.abs(dx) > Math.abs(dy) * 1.4) {
@@ -44,18 +47,23 @@ function onPointerUp(e) {
     else viewState?.next();
   }
 }
+function onPointerCancel() {
+  swipeActive = false;
+}
+let expandedDays = $state([]);
+function toggleDayExpand(ms) {
+  expandedDays = expandedDays.includes(ms) ? expandedDays.filter((m) => m !== ms) : [...expandedDays, ms];
+}
+let expandedPast = $state([]);
+function togglePastExpand(ms) {
+  expandedPast = expandedPast.includes(ms) ? expandedPast.filter((m) => m !== ms) : [...expandedPast, ms];
+}
 const fmt = (d) => fmtTime(d, locale);
-const eta = (ms) => timeUntilMs(ms, clock.tick);
+const eta = (ms) => timeUntilMs(ms, clock.tick, L);
 const prog = (ev) => progress(ev, clock.tick);
 function handleClick(ev) {
   oneventclick?.(ev);
 }
-function handleKeydown(e, ev) {
-  if (e.key === "Enter" || e.key === " ") {
-    e.preventDefault();
-    oneventclick?.(ev);
-  }
-}
 const weekStartMs = $derived(
   focusDate ? viewState?.dayCount === 7 ? startOfWeek(sod(focusDate.getTime()), mondayStart) : sod(focusDate.getTime()) : viewState?.dayCount === 7 ? startOfWeek(clock.today, mondayStart) : clock.today
 );
@@ -101,6 +109,7 @@ const weekDays = $derived.by(() => {
       dayName: weekdayLong(ms, locale),
       dateLabel: `${monthLong(ms, locale)} ${dayNum(ms)}`,
       tier,
+      isToday: ms === todayMs,
       events: dayEvts,
       allDayEvents: allDayEvts,
       timedEvents: timedEvts,
@@ -123,7 +132,8 @@ const weekDays = $derived.by(() => {
 
 <!-- ═══ Shared event card snippet ═══ -->
 {#snippet eventCard(ev: TimelineEvent, isNow: boolean, eta?: string)}
-	<div
+	<button
+		type="button"
 		class="ag-card"
 		class:ag-card--selected={selectedEventId === ev.id}
 		class:ag-card--cancelled={ev.status === 'cancelled'}
@@ -131,12 +141,9 @@ const weekDays = $derived.by(() => {
 		class:ag-card--full={ev.status === 'full'}
 		class:ag-card--limited={ev.status === 'limited'}
 		style:--ev-color={ev.color || 'var(--dt-accent)'}
-		role="button"
-		tabindex="0"
 		aria-label="{ev.title}{ev.status === 'cancelled' ? ' (cancelled)' : ''}{ev.status === 'tentative' ? ' (tentative)' : ''}{ev.status === 'full' ? ' (full)' : ''}{ev.status === 'limited' ? ' (limited)' : ''}, {fmt(ev.start)} to {fmt(ev.end)}, {duration(ev)}"
 		onclick={() => handleClick(ev)}
 		onpointerenter={() => oneventhover?.(ev)}
-		onkeydown={(e) => handleKeydown(e, ev)}
 	>
 		<div class="ag-card-body">
 			<EventContent event={ev}>
@@ -168,11 +175,64 @@ const weekDays = $derived.by(() => {
 			</EventContent>
 			{#if isNow}
 				<div class="ag-card-progress">
-					<div class="ag-card-progress-fill" style:width="{prog(ev) * 100}%"></div>
+					<div class="ag-card-progress-fill" style:transform="scaleX({prog(ev)})"></div>
 				</div>
 			{/if}
 		</div>
-	</div>
+	</button>
+{/snippet}
+
+<!-- ═══ Shared compact row snippet ═══ -->
+{#snippet compactRow(ev: TimelineEvent, showLoc: boolean, done: boolean)}
+	<button
+		type="button"
+		class="ag-compact"
+		class:ag-compact--selected={selectedEventId === ev.id}
+		class:ag-compact--done={done}
+		class:ag-compact--cancelled={ev.status === 'cancelled'}
+		class:ag-compact--tentative={ev.status === 'tentative'}
+		class:ag-compact--full={ev.status === 'full'}
+		class:ag-compact--limited={ev.status === 'limited'}
+		style:--ev-color={ev.color || 'var(--dt-accent)'}
+		aria-label="{ev.title}{done ? `, ${L.completed}` : ''}, {fmt(ev.start)}, {duration(ev)}"
+		onclick={() => handleClick(ev)}
+		onpointerenter={() => oneventhover?.(ev)}
+	>
+		<EventContent event={ev}>
+		<span class="ag-compact-dot"></span>
+		<span class="ag-compact-time">{fmt(ev.start)}</span>
+		<div class="ag-compact-main">
+			<span class="ag-compact-title">{ev.title}</span>
+			{#if showLoc && ev.location}
+				<span class="ag-compact-loc">{ev.location}</span>
+			{/if}
+			{#if ev.subtitle}
+				<span class="ag-compact-sub">{ev.subtitle}</span>
+			{/if}
+			{#if ev.tags?.length}
+				{#each ev.tags as tag}
+					<span class="ag-compact-tag">{tag}</span>
+				{/each}
+			{/if}
+		</div>
+		<span class="ag-compact-dur">{duration(ev)}</span>
+		</EventContent>
+	</button>
+{/snippet}
+
+<!-- ═══ "✓ N completed" disclosure toggle ═══ -->
+{#snippet pastToggle(ms: number, count: number, summary: boolean)}
+	{@const open = expandedPast.includes(ms)}
+	<button
+		type="button"
+		class="ag-wday-past-line ag-past-toggle"
+		class:ag-wday-past-line--summary={summary}
+		aria-expanded={open}
+		onclick={() => togglePastExpand(ms)}
+	>
+		✓ {L.nCompleted(count)}
+		<svg class="ag-past-chevron" class:ag-past-chevron--open={open} viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg>
+	</button>
 {/snippet}
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -181,8 +241,10 @@ const weekDays = $derived.by(() => {
 	class:ag--mobile={isMobile}
 	class:ag--auto={autoHeight}
 	style={style || undefined}
+	style:height={height ? `${height}px` : undefined}
 	onpointerdown={onPointerDown}
 	onpointerup={onPointerUp}
+	onpointercancel={onPointerCancel}
 >
 	<div class="ag-body" role="list" aria-label={L.weekAhead}>
 		{#each weekDays as day (day.ms)}
@@ -201,6 +263,18 @@ const weekDays = $derived.by(() => {
 							</div>
 						{/if}
 					</div>
+					{#if day.timedEvents.length > 0}
+						{@render pastToggle(day.ms, day.timedEvents.length, true)}
+						{#if expandedPast.includes(day.ms)}
+							<div class="ag-wday-compact">
+								{#each day.timedEvents as ev (ev.id)}
+									{@render compactRow(ev, false, true)}
+								{/each}
+							</div>
+						{/if}
+					{:else if day.events.length === 0}
+						<div class="ag-wday-past-line ag-wday-past-line--summary">{L.noEvents}</div>
+					{/if}
 				</div>
 			{:else}
 			<div
@@ -214,7 +288,7 @@ const weekDays = $derived.by(() => {
 				<!-- Day header -->
 				<div class="ag-wday-head">
 					<div class="ag-wday-head-left">
-						{#if day.tier === 'today'}
+						{#if day.isToday}
 						<span class="ag-wday-badge">{L.today}</span>
 					{:else if day.tier === 'tomorrow'}
 						<span class="ag-wday-badge ag-wday-badge--muted">{L.tomorrow}</span>
@@ -232,20 +306,23 @@ const weekDays = $derived.by(() => {
 				{#if day.allDayEvents.length > 0}
 					<div class="ag-allday">
 						{#each day.allDayEvents as ev (ev.id)}
-							<div
+							{@const seg = segmentForDay(ev, day.ms)}
+							{@const isCont = seg !== null && seg.totalDays > 1}
+							<button
+								type="button"
 								class="ag-allday-chip"
 								class:ag-allday-chip--selected={selectedEventId === ev.id}
 								style:--ev-color={ev.color || 'var(--dt-accent)'}
-								role="button"
-								tabindex="0"
-								aria-label="{ev.title}, {L.allDay}"
+								aria-label="{ev.title}, {isCont && seg ? L.dayNOfTotal(seg.dayIndex, seg.totalDays) : L.allDay}"
 								onclick={() => handleClick(ev)}
 								onpointerenter={() => oneventhover?.(ev)}
-								onkeydown={(e) => handleKeydown(e, ev)}
 							>
 								<span class="ag-allday-dot"></span>
 								<span class="ag-allday-title">{ev.title}</span>
-							</div>
+								{#if isCont && seg}
+									<span class="ag-allday-span">{seg.dayIndex}/{seg.totalDays}</span>
+								{/if}
+							</button>
 						{/each}
 					</div>
 				{/if}
@@ -256,36 +333,7 @@ const weekDays = $derived.by(() => {
 					<!-- Compact: minimal dot + time + title rows for all days -->
 					<div class="ag-wday-compact">
 						{#each day.timedEvents as ev (ev.id)}
-							<div
-								class="ag-compact"
-								class:ag-compact--selected={selectedEventId === ev.id}
-								class:ag-compact--cancelled={ev.status === 'cancelled'}
-								class:ag-compact--tentative={ev.status === 'tentative'}
-								class:ag-compact--full={ev.status === 'full'}
-								class:ag-compact--limited={ev.status === 'limited'}
-								style:--ev-color={ev.color || 'var(--dt-accent)'}
-								role="button"
-								tabindex="0"
-								aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
-								onclick={() => handleClick(ev)}
-								onpointerenter={() => oneventhover?.(ev)}
-								onkeydown={(e) => handleKeydown(e, ev)}
-							>
-								<EventContent event={ev}>
-								<span class="ag-compact-dot"></span>
-								<span class="ag-compact-time">{fmt(ev.start)}</span>
-								<span class="ag-compact-title">{ev.title}</span>
-								{#if ev.subtitle}
-									<span class="ag-compact-sub">{ev.subtitle}</span>
-								{/if}
-								{#if ev.tags?.length}
-									{#each ev.tags as tag}
-										<span class="ag-compact-tag">{tag}</span>
-									{/each}
-								{/if}
-								<span class="ag-compact-dur">{duration(ev)}</span>
-								</EventContent>
-							</div>
+							{@render compactRow(ev, false, false)}
 						{/each}
 					</div>
 				{:else if equalDays}
@@ -326,47 +374,30 @@ const weekDays = $derived.by(() => {
 							</div>
 						{/each}
 						{#if day.pastEvents.length > 0}
-							<div class="ag-wday-past-line">✓ {L.nCompleted(day.pastEvents.length)}</div>
+							{@render pastToggle(day.ms, day.pastEvents.length, false)}
+							{#if expandedPast.includes(day.ms)}
+								{#each day.pastEvents as ev (ev.id)}
+									{@render compactRow(ev, false, true)}
+								{/each}
+							{/if}
 						{/if}
 					</div>
 				{:else}
 					<!-- Compact: future days get minimal rows -->
+					{@const dayExpanded = expandedDays.includes(day.ms)}
 					<div class="ag-wday-compact">
-						{#each day.timedEvents.slice(0, 4) as ev (ev.id)}
-							<div
-								class="ag-compact"
-								class:ag-compact--selected={selectedEventId === ev.id}
-								class:ag-compact--cancelled={ev.status === 'cancelled'}
-								class:ag-compact--tentative={ev.status === 'tentative'}
-								class:ag-compact--full={ev.status === 'full'}
-								class:ag-compact--limited={ev.status === 'limited'}
-								style:--ev-color={ev.color || 'var(--dt-accent)'}
-								role="button"
-								tabindex="0"
-								aria-label="{ev.title}, {fmt(ev.start)}, {duration(ev)}"
-								onclick={() => handleClick(ev)}							onpointerenter={() => oneventhover?.(ev)}								onkeydown={(e) => handleKeydown(e, ev)}
-							>
-								<EventContent event={ev}>
-								<span class="ag-compact-dot"></span>
-								<span class="ag-compact-time">{fmt(ev.start)}</span>
-								<span class="ag-compact-title">{ev.title}</span>
-								{#if ev.location}
-									<span class="ag-compact-loc">{ev.location}</span>
-								{/if}
-								{#if ev.subtitle}
-									<span class="ag-compact-sub">{ev.subtitle}</span>
-								{/if}
-								{#if ev.tags?.length}
-									{#each ev.tags as tag}
-										<span class="ag-compact-tag">{tag}</span>
-									{/each}
-								{/if}
-								<span class="ag-compact-dur">{duration(ev)}</span>
-								</EventContent>
-							</div>
+						{#each (dayExpanded ? day.timedEvents : day.timedEvents.slice(0, 4)) as ev (ev.id)}
+							{@render compactRow(ev, true, false)}
 						{/each}
 						{#if day.timedEvents.length > 4}
-							<div class="ag-compact-more">{L.nMore(day.timedEvents.length - 4)}</div>
+							<button
+								type="button"
+								class="ag-compact-more"
+								aria-expanded={dayExpanded}
+								onclick={() => toggleDayExpand(day.ms)}
+							>
+								{dayExpanded ? L.showLess : L.nMore(day.timedEvents.length - 4)}
+							</button>
 						{/if}
 					</div>
 				{/if}
@@ -397,6 +428,23 @@ const weekDays = $derived.by(() => {
 		overflow: visible;
 	}
 
+	/* Button UA reset for interactive cards/rows (real <button>s for a11y).
+	   Placed first so later component rules override it. */
+	.ag-card,
+	.ag-allday-chip,
+	.ag-compact,
+	.ag-compact-more,
+	.ag-past-toggle {
+		font: inherit;
+		color: inherit;
+		text-align: left;
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		box-sizing: border-box;
+	}
+
 	/* ═══ Body ═══ */
 	.ag-body {
 		flex: 1;
@@ -404,10 +452,15 @@ const weekDays = $derived.by(() => {
 		overflow-y: auto;
 		overflow-x: hidden;
 		box-sizing: border-box;
-		padding-top: 8px;
+		/* No padding-top here: the sticky day headers pin at the scrollport
+		   edge, and container padding would leave a see-through band above
+		   them where scrolled cards bleed out. */
 		scrollbar-width: thin;
 		scrollbar-color: var(--dt-border) transparent;
 	}
+	.ag-wday:first-child .ag-wday-head {
+		padding-top: 12px;
+	}
 	.ag--auto .ag-body {
 		overflow-y: visible;
 	}
@@ -437,13 +490,14 @@ const weekDays = $derived.by(() => {
 		cursor: pointer;
 		transition: background 0.15s, border-color 0.15s;
 	}
-	.ag-allday-chip:hover {
+	.ag-allday-chip:hover,
+	.ag-allday-chip:active {
 		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-color: color-mix(in srgb, var(--ev-color) 30%, transparent);
 	}
 	.ag-allday-chip:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
-		outline-offset: 2px;
+		outline: none;
+		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
 	}
 	.ag-allday-chip--selected {
 		border-color: var(--ev-color);
@@ -461,6 +515,11 @@ const weekDays = $derived.by(() => {
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 	}
+	.ag-allday-span {
+		font: 500 10px/1.2 var(--dt-mono, monospace);
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		white-space: nowrap;
+	}
 
 	/* ═══ Shared: event card ═══ */
 	.ag-card {
@@ -473,13 +532,14 @@ const weekDays = $derived.by(() => {
 		cursor: pointer;
 		transition: background 150ms, border-color 150ms;
 	}
-	.ag-card:hover {
+	.ag-card:hover,
+	.ag-card:active {
 		background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, var(--dt-bg, #ffffff)));
 		border-color: color-mix(in srgb, var(--ev-color) 30%, transparent);
 	}
 	.ag-card:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
-		outline-offset: 2px;
+		outline: none;
+		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
 	}
 	.ag-card--selected {
 		border-color: var(--ev-color);
@@ -517,6 +577,11 @@ const weekDays = $derived.by(() => {
 		word-break: break-word;
 		flex: 1;
 		min-width: 0;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		overflow: hidden;
 	}
 	.ag-card-meta {
 		display: flex;
@@ -532,10 +597,9 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-card-eta {
 		margin-left: auto;
-		font-size: 10px;
+		font-size: 11px;
 		font-weight: 600;
-		color: color-mix(in srgb, var(--ev-color) 80%, var(--dt-text));
-		opacity: 0.85;
+		color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 60%, var(--ev-color));
 		letter-spacing: 0.02em;
 	}
 	.ag-card-sub {
@@ -554,7 +618,7 @@ const weekDays = $derived.by(() => {
 		flex-wrap: wrap;
 	}
 	.ag-card-tag {
-		font: 500 9px / 1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--ev-color, var(--dt-accent));
 		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
 		padding: 2px 5px;
@@ -570,9 +634,16 @@ const weekDays = $derived.by(() => {
 	}
 	.ag-card-progress-fill {
 		height: 100%;
+		width: 100%;
 		background: var(--ev-color, var(--dt-accent));
 		border-radius: 2px;
-		transition: width 1s linear;
+		transform-origin: left;
+		transition: transform 1s linear;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ag-card-progress-fill {
+			transition: none;
+		}
 	}
 
 	/* ═══ Week day groups ═══ */
@@ -588,11 +659,13 @@ const weekDays = $derived.by(() => {
 	.ag-wday--tomorrow .ag-card {
 		opacity: 0.82;
 	}
-	.ag-wday--past {
-		opacity: 0.4;
+	/* Past days: token-based text dim instead of subtree opacity (readability) */
+	.ag-wday--past .ag-wday-name {
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+		font-weight: 500;
 	}
 	.ag-wday--past .ag-wday-head {
-		padding: 8px 20px;
+		padding: 8px 20px 2px;
 	}
 	.ag-wday--disabled {
 		position: relative;
@@ -605,8 +678,8 @@ const weekDays = $derived.by(() => {
 			135deg,
 			transparent,
 			transparent 4px,
-			rgba(128, 128, 128, 0.08) 4px,
-			rgba(128, 128, 128, 0.08) 8px
+			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent) 4px,
+			color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 8%, transparent) 8px
 		);
 		pointer-events: none;
 	}
@@ -619,6 +692,14 @@ const weekDays = $derived.by(() => {
 		justify-content: space-between;
 		align-items: center;
 		padding: 8px 20px;
+		position: sticky;
+		top: 0;
+		background: var(--dt-bg, #fff);
+		z-index: 1;
+		/* Own compositor layer: without it, fast (async) scrolling repaints
+		   the pinned header a frame late and a gap flashes above it. */
+		transform: translateZ(0);
+		will-change: transform;
 	}
 	.ag-wday-head-left {
 		display: flex;
@@ -676,7 +757,7 @@ const weekDays = $derived.by(() => {
 		padding: 2px 0;
 	}
 	.ag-wslot-now {
-		font-size: 9px;
+		font-size: 10px;
 		font-weight: 700;
 		letter-spacing: 0.08em;
 		text-transform: uppercase;
@@ -693,9 +774,47 @@ const weekDays = $derived.by(() => {
 		gap: 4px;
 	}
 	.ag-wday-past-line {
-		font-size: 10px;
+		font-size: 11px;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
 		padding: 6px 0 0;
+	}
+	.ag-wday-past-line--summary {
+		padding: 0 20px 8px;
+	}
+	/* "✓ N completed" is a disclosure — tap to reveal the finished events */
+	.ag-past-toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+		cursor: pointer;
+		min-height: 32px;
+		transition: color 150ms;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.ag-past-toggle:hover,
+	.ag-past-toggle:active {
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+	}
+	.ag-past-toggle:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		border-radius: 4px;
+	}
+	.ag-past-chevron {
+		transition: transform 120ms;
+	}
+	.ag-past-chevron--open {
+		transform: rotate(180deg);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.ag-past-chevron { transition: none; }
+	}
+	/* Revealed completed events: dim + strike, single token layer */
+	.ag-compact--done .ag-compact-title {
+		text-decoration: line-through;
+		text-decoration-color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+	}
+	.ag-compact--done .ag-compact-dot {
 		opacity: 0.5;
 	}
 
@@ -710,19 +829,31 @@ const weekDays = $derived.by(() => {
 		padding: 3px 0;
 		cursor: pointer;
 		min-width: 0;
+		width: 100%;
 	}
 	.ag-compact--selected {
 		background: color-mix(in srgb, var(--ev-color) 10%, transparent);
 		border-radius: 4px;
+		/* Highlight gutter comes from negative margins so the row's content
+		   stays aligned with its unselected siblings (no tap-shift). */
 		padding-left: 6px;
 		padding-right: 6px;
+		margin-left: -6px;
+		margin-right: -6px;
+		width: calc(100% + 12px);
 	}
-	.ag-compact:hover .ag-compact-title {
+	.ag-compact:hover .ag-compact-title,
+	.ag-compact:active .ag-compact-title {
 		color: var(--dt-text);
 	}
+	.ag-compact:active {
+		background: color-mix(in srgb, var(--ev-color) 8%, transparent);
+		border-radius: 4px;
+	}
 	.ag-compact:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
-		outline-offset: 2px;
+		outline: none;
+		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		border-radius: 4px;
 	}
 	.ag-compact-dot {
 		width: 5px;
@@ -741,12 +872,45 @@ const weekDays = $derived.by(() => {
 		white-space: nowrap;
 		line-height: 1.4;
 	}
+	/* Title + location + subtitle + tags cluster. One line while it fits; on
+	   mobile the metadata wraps to a second line instead of crushing the title. */
+	.ag-compact-main {
+		display: flex;
+		align-items: baseline;
+		gap: 6px;
+		flex: 1;
+		min-width: 0;
+	}
+	.ag--mobile .ag-compact-main {
+		flex-wrap: wrap;
+		row-gap: 2px;
+	}
+	/* Mobile: size the title by its content when deciding line breaks — a long
+	   title claims the first line whole (ellipsizing only against the full row)
+	   and pushes location/subtitle/tags down instead of truncating at 35%. */
+	.ag--mobile .ag-compact-title {
+		flex-basis: auto;
+	}
+	/* On their own wrapped line the metadata gets the full width — the tight
+	   desktop caps would truncate it beside empty space. */
+	.ag--mobile .ag-compact-loc,
+	.ag--mobile .ag-compact-sub {
+		max-width: 100%;
+	}
+	/* Wrapped rows are two/three lines tall — center-aligning the dot floats
+	   it between lines; pin it optically to the first (title) line instead. */
+	.ag--mobile .ag-compact-dot {
+		align-self: flex-start;
+		margin-top: 8px;
+	}
 	.ag-compact-title {
 		font-size: 12px;
 		font-weight: 500;
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		flex: 1;
-		min-width: 0;
+		/* The title is the row's identity — never let subtitle/tags/duration
+		   squeeze it out on narrow screens (min-width: 0 resolves to 0px). */
+		min-width: 35%;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -764,7 +928,8 @@ const weekDays = $derived.by(() => {
 	.ag-compact-sub {
 		font-size: 10px;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		flex-shrink: 0;
+		flex-shrink: 3;
+		min-width: 0;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -772,9 +937,10 @@ const weekDays = $derived.by(() => {
 		line-height: 1.4;
 	}
 	.ag-compact-loc {
-		font-size: 9px;
+		font-size: 10px;
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
-		flex-shrink: 0;
+		flex-shrink: 3;
+		min-width: 0;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -796,21 +962,33 @@ const weekDays = $derived.by(() => {
 		opacity: 0.65;
 	}
 	.ag-compact-tag {
-		font: 500 8px / 1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--ev-color, var(--dt-accent));
 		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 12%, transparent);
 		padding: 1px 4px;
 		border-radius: 3px;
 		white-space: nowrap;
-		flex-shrink: 0;
+		flex-shrink: 1;
+		min-width: 2.5em;
 		max-width: 80px;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 	.ag-compact-more {
 		font-size: 11px;
-		color: var(--dt-text-3);
+		color: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 72%, transparent);
 		padding: 2px 0 0 13px;
+		cursor: pointer;
+		display: block;
+	}
+	.ag-compact-more:hover,
+	.ag-compact-more:active {
+		color: var(--dt-text, rgba(0, 0, 0, 0.87));
+	}
+	.ag-compact-more:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+		border-radius: 4px;
 	}
 
 	/* ═══ Mobile adaptations ═══ */
@@ -827,17 +1005,63 @@ const weekDays = $derived.by(() => {
 		padding: 12px 14px;
 	}
 	.ag--mobile .ag-card-title {
-		font-size: 14px;
+		font-size: 15px;
+	}
+	.ag--mobile .ag-card-meta {
+		font-size: 12px;
+	}
+	.ag--mobile .ag-card-sub {
+		font-size: 12px;
+	}
+	.ag--mobile .ag-card-loc {
+		font-size: 12px;
+	}
+	.ag--mobile .ag-card-eta {
+		font-size: 12px;
+	}
+	.ag--mobile .ag-card-tag {
+		font-size: 11px;
 	}
 	.ag--mobile .ag-compact {
 		padding: 8px 0;
 	}
 	.ag--mobile .ag-compact-title {
-		font-size: 14px;
+		font-size: 15px;
 	}
 	.ag--mobile .ag-compact-time {
 		font-size: 12px;
 	}
+	.ag--mobile .ag-compact-dur {
+		font-size: 12px;
+	}
+	.ag--mobile .ag-compact-sub {
+		font-size: 12px;
+	}
+	.ag--mobile .ag-compact-loc {
+		font-size: 11px;
+	}
+	.ag--mobile .ag-compact-tag {
+		font-size: 11px;
+	}
+	.ag--mobile .ag-compact-more {
+		font-size: 12px;
+		padding-top: 6px;
+	}
+	.ag--mobile .ag-allday-span {
+		font-size: 11px;
+	}
+	.ag--mobile .ag-wday-badge {
+		font-size: 11px;
+	}
+	.ag--mobile .ag-wslot-now {
+		font-size: 11px;
+	}
+	.ag--mobile .ag-wday-empty {
+		font-size: 12px;
+	}
+	.ag--mobile .ag-wday-past-line {
+		font-size: 12px;
+	}
 	.ag--mobile .ag-wslot-cards--multi {
 		grid-template-columns: 1fr;
 	}