fix(rcal): only show dots/labels for events starting on that day

Multi-day events on intermediate days are shown via span bars,
not duplicated as dots/labels in each day cell.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

modules/rcal/components/folk-calendar-view.ts

@@ -1146,6 +1146,9 @@ class FolkCalendarView extends HTMLElement {
 			const isToday = ds === todayStr;
 			const isExpanded = ds === this.expandedDay;
 			const dayEvents = this.getEventsForDate(ds);
+			// For dots/labels in day cells, only show events that START on this day.
+			// Multi-day events on intermediate days are shown via span bars instead.
+			const cellEvents = dayEvents.filter(e => e.start_time.slice(0, 10) === ds);
 			const dayReminders = this.getRemindersForDate(ds);
 			const lunar = this.lunarData[ds];
 
@@ -1155,18 +1158,18 @@ class FolkCalendarView extends HTMLElement {
 					${this.showLunar && lunar ? `<span class="moon">${this.getMoonEmoji(lunar.phase)}</span>` : ""}
 					${dayReminders.length > 0 ? `<span class="reminder-badge" title="${dayReminders.length} reminder${dayReminders.length > 1 ? "s" : ""}">🔔${dayReminders.length > 1 ? dayReminders.length : ""}</span>` : ""}
 				</div>
-				${dayEvents.length > 0 || dayReminders.length > 0 ? `
+				${cellEvents.length > 0 || dayReminders.length > 0 ? `
 					<div class="dots">
-						${dayEvents.slice(0, 5).map(e => {
+						${cellEvents.slice(0, 5).map(e => {
 							const es = this.getEventStyles(e);
 							return es.isTentative
 								? `<span class="dot dot--tentative" style="border-color:${e.source_color || "#6366f1"}"></span>`
 								: `<span class="dot" style="background:${e.source_color || "#6366f1"}"></span>`;
 						}).join("")}
 						${dayReminders.slice(0, 3).map(r => `<span class="dot dot--reminder" style="background:${r.sourceColor || "#f59e0b"}" title="${this.esc(r.title)}"></span>`).join("")}
-						${dayEvents.length > 5 ? `<span style="font-size:8px;color:var(--rs-text-muted)">+${dayEvents.length - 5}</span>` : ""}
+						${cellEvents.length > 5 ? `<span style="font-size:8px;color:var(--rs-text-muted)">+${cellEvents.length - 5}</span>` : ""}
 					</div>
-					${dayEvents.slice(0, 2).map(e => {
+					${cellEvents.slice(0, 2).map(e => {
 						const evColor = e.source_color || "#6366f1";
 						const es = this.getEventStyles(e);
 						const city = this.getSpatialLabel(e.location_breadcrumb, 5);
@@ -2372,8 +2375,9 @@ class FolkCalendarView extends HTMLElement {
 		});
 
 		// Scroll/trackpad gestures on calendar pane
-		// - Pinch-to-zoom (ctrlKey wheel) → zoom in/out granularity
+		// - Pinch-to-zoom (ctrlKey wheel) → zoom in/out temporal granularity
-		// - Two-finger scroll/pan (plain wheel) → navigate timeline
+		// - Two-finger horizontal pan (deltaX) → navigate dates
+		// - Two-finger vertical scroll (deltaY) → pass through to page scroll
 		const calPane = $("calendar-pane");
 		if (calPane) {
 			calPane.addEventListener("wheel", (e: WheelEvent) => {
@@ -2381,10 +2385,9 @@ class FolkCalendarView extends HTMLElement {
 				const mapPanel = this.shadow.getElementById("map-panel");
 				if (mapPanel && mapPanel.contains(e.target as Node)) return;
 
-				e.preventDefault();
-
 				if (e.ctrlKey) {
 					// Pinch-to-zoom on trackpad (or Ctrl+scroll with mouse)
+					e.preventDefault();
 					if (this._wheelTimer) clearTimeout(this._wheelTimer);
 					this._wheelTimer = setTimeout(() => {
 						if (e.deltaY > 0) {
@@ -2394,18 +2397,20 @@ class FolkCalendarView extends HTMLElement {
 						}
 						this._wheelTimer = null;
 					}, 120);
-				} else {
+				} else if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 10) {
-					// Two-finger scroll / mouse wheel → navigate timeline
+					// Two-finger horizontal pan → navigate dates
+					e.preventDefault();
 					if (this._wheelTimer) clearTimeout(this._wheelTimer);
 					this._wheelTimer = setTimeout(() => {
-						if (e.deltaY > 0) {
+						if (e.deltaX > 0) {
-							this.navigate(1);  // scroll down → next period
+							this.navigate(1);  // pan right → next period
-						} else if (e.deltaY < 0) {
+						} else if (e.deltaX < 0) {
-							this.navigate(-1); // scroll up → previous period
+							this.navigate(-1); // pan left → previous period
 						}
 						this._wheelTimer = null;
 					}, 120);
 				}
+				// Vertical scroll (deltaY without ctrlKey) → no preventDefault, page scrolls naturally
 			}, { passive: false });
 
 			// Pan/swipe + pinch-to-zoom on calendar pane
@@ -2495,8 +2500,19 @@ class FolkCalendarView extends HTMLElement {
 
 			this.leafletMap = L.map(this.mapContainer, {
 				center, zoom, zoomControl: false,
+				scrollWheelZoom: false,  // Disable: plain scroll should pass to page
 			});
 
+			// Only zoom map on Ctrl+scroll (pinch-to-zoom on trackpad)
+			this.mapContainer.addEventListener("wheel", (ev: WheelEvent) => {
+				if (ev.ctrlKey) {
+					ev.preventDefault();
+					if (ev.deltaY < 0) this.leafletMap.zoomIn();
+					else if (ev.deltaY > 0) this.leafletMap.zoomOut();
+				}
+				// Plain scroll passes through to page
+			}, { passive: false });
+
 			this.applyMapTileLayer();
 
 			// Watch for theme changes
@@ -2702,7 +2718,7 @@ class FolkCalendarView extends HTMLElement {
 			/* ── Main Layout ── */
 			.main-layout { position: relative; min-height: 400px; }
 			.main-layout--docked { display: grid; grid-template-columns: 1fr 6px 400px; gap: 0; min-height: 500px; }
-			.calendar-pane { overflow: auto; min-width: 0; touch-action: pan-y; user-select: none; }
+			.calendar-pane { overflow: auto; min-width: 0; touch-action: pan-y pinch-zoom; user-select: none; }
 
 			/* ── Resize Handle ── */
 			.resize-handle { width: 6px; cursor: col-resize; background: transparent; position: relative; z-index: 10; transition: background 0.15s; }