@nomideusz/svelte-calendar 0.9.0 → 0.11.0

package/dist/views/mobile/MobileDay.svelte

@@ -5,13 +5,13 @@
   Large touch targets, swipe left/right to change day.
   Events positioned absolutely within hour lanes.
 -->
-<script lang="ts">import { onMount } from "svelte";
+<script lang="ts">import { untrack } from "svelte";
 import { useCalendarContext } from "../shared/context.svelte.js";
 import EventContent from "../shared/EventContent.svelte";
 import { createClock } from "../../core/clock.svelte.js";
 import { DAY_MS, HOUR_MS, sod, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
-import { fmtH, fmtTime, getLabels } from "../../core/locale.js";
-const L = $derived(getLabels());
+import { fmtH, fmtTime } from "../../core/locale.js";
+import { createSwipe } from "./swipe.js";
 let {
   height = null,
   events = [],
@@ -25,6 +25,7 @@ let {
   visibleHours
 } = $props();
 const ctx = useCalendarContext();
+const L = $derived(ctx.labels);
 const viewState = $derived(ctx.viewState);
 const autoHeight = $derived(ctx.autoHeight);
 const oneventhover = $derived(ctx.oneventhover);
@@ -45,7 +46,6 @@ const gridHeight = $derived(hourCount * HOUR_HEIGHT);
 const dayMs = $derived(focusDate ? sod(focusDate.getTime()) : clock.today);
 const dayEnd = $derived(dayMs + DAY_MS);
 const isToday = $derived(dayMs === clock.today);
-const isPast = $derived(dayMs < clock.today);
 const isDisabled = $derived(disabledSet.has(dayMs));
 $effect(() => {
   if (!loadRangeCtx) return;
@@ -66,6 +66,10 @@ const allDayEvents = $derived.by(() => {
   }
   return segs;
 });
+const isEmpty = $derived(timedEvents.length === 0 && allDayEvents.length === 0);
+const ALLDAY_MAX = 3;
+let allDayExpanded = $state(false);
+const visibleAllDay = $derived(allDayExpanded ? allDayEvents : allDayEvents.slice(0, ALLDAY_MAX));
 const positionedEvents = $derived.by(() => {
   const now = clock.tick;
   const sorted = [...timedEvents];
@@ -166,45 +170,33 @@ function isBlockedAt(hour) {
     return hour >= slot.start && hour < slot.end;
   });
 }
-let el;
-let touchStartX = 0;
-let touchStartY = 0;
-let swiping = false;
-let swipeOffset = $state(0);
-const SWIPE_THRESHOLD = 50;
-function onTouchStart(e) {
-  const t = e.touches[0];
-  touchStartX = t.clientX;
-  touchStartY = t.clientY;
-  swiping = true;
-  swipeOffset = 0;
-}
-function onTouchMove(e) {
-  if (!swiping) return;
-  const t = e.touches[0];
-  const dx = t.clientX - touchStartX;
-  const dy = t.clientY - touchStartY;
-  if (Math.abs(dy) > Math.abs(dx) * 0.8) {
-    swiping = false;
-    return;
-  }
-  swipeOffset = dx;
+function statusText(ev) {
+  if (ev.status === "cancelled") return ` (${L.cancelled})`;
+  if (ev.status === "tentative") return ` (${L.tentative})`;
+  if (ev.status === "full") return ` (${L.full})`;
+  if (ev.status === "limited") return ` (${L.limited})`;
+  return "";
 }
-function onTouchEnd() {
-  if (!swiping) {
-    swipeOffset = 0;
-    return;
-  }
-  if (Math.abs(swipeOffset) > SWIPE_THRESHOLD) {
-    if (swipeOffset > 0) {
-      viewState?.prev();
+let swipeOffset = $state(0);
+let swipeAnimate = $state(false);
+const swipe = createSwipe({
+  disabled: () => !!drag?.active || mbCreateStarted || mbRsStarted || longPressTimer !== null,
+  onmove: (dx) => {
+    swipeAnimate = false;
+    swipeOffset = dx;
+  },
+  onend: (dir) => {
+    if (dir !== 0) {
+      swipeAnimate = false;
+      swipeOffset = 0;
+      if (dir > 0) viewState?.prev();
+      else viewState?.next();
     } else {
-      viewState?.next();
+      swipeAnimate = true;
+      swipeOffset = 0;
     }
   }
-  swipeOffset = 0;
-  swiping = false;
-}
+});
 function handleGridClick(e) {
   if (suppressGridClick) {
     suppressGridClick = false;
@@ -212,22 +204,46 @@ function handleGridClick(e) {
   }
   if (!oneventcreate || readOnly || isDisabled) return;
   if (e.target.closest(".mb-event")) return;
-  const grid = e.currentTarget;
-  const rect = grid.getBoundingClientRect();
-  const y = e.clientY - rect.top + grid.scrollTop;
-  const hour = startHour + y / HOUR_HEIGHT;
-  if (isBlockedAt(hour)) return;
-  const snapHour = Math.floor(hour);
-  const durMin = minDuration ? Math.max(60, minDuration) : 60;
-  const start = new Date(dayMs + snapHour * HOUR_MS);
-  const end = new Date(start.getTime() + durMin * 6e4);
-  oneventcreate({ start, end });
+  const tMs = gridTimeMs(e.clientY);
+  if (isBlockedAt((tMs - dayMs) / HOUR_MS)) return;
+  const startMs = clampToDay(Math.floor(tMs / SNAP_MS) * SNAP_MS);
+  const durMin = minDuration ?? 60;
+  oneventcreate({ start: new Date(startMs), end: new Date(startMs + durMin * 6e4) });
+}
+function onGridKeydown(e) {
+  if (e.key !== "Enter" && e.key !== " ") return;
+  if (!oneventcreate || readOnly || isDisabled) return;
+  e.preventDefault();
+  const raw = isToday ? clock.tick : dayMs + startHour * HOUR_MS;
+  const startMs = clampToDay(Math.ceil(raw / SNAP_MS) * SNAP_MS);
+  if (isBlockedAt((startMs - dayMs) / HOUR_MS)) return;
+  const durMin = minDuration ?? 60;
+  oneventcreate({ start: new Date(startMs), end: new Date(startMs + durMin * 6e4) });
 }
 const CREATE_THRESHOLD = 4;
+const LONG_PRESS_MS = 350;
+const LONG_PRESS_TOLERANCE = 8;
 let suppressGridClick = false;
+let mbCreateStartX = 0;
 let mbCreateStartY = 0;
 let mbCreateAnchorMs = 0;
 let mbCreateStarted = false;
+let longPressTimer = null;
+function blockTouchScroll(e) {
+  e.preventDefault();
+}
+function addTouchScrollBlock() {
+  window.addEventListener("touchmove", blockTouchScroll, { passive: false });
+}
+function removeTouchScrollBlock() {
+  window.removeEventListener("touchmove", blockTouchScroll);
+}
+function clearLongPress() {
+  if (longPressTimer !== null) {
+    clearTimeout(longPressTimer);
+    longPressTimer = null;
+  }
+}
 function gridTimeMs(clientY) {
   const rect = gridEl.getBoundingClientRect();
   const y = clientY - rect.top + gridEl.scrollTop;
@@ -236,12 +252,26 @@ function gridTimeMs(clientY) {
 function clampToDay(ms) {
   return Math.max(dayMs + startHour * HOUR_MS, Math.min(dayMs + endHour * HOUR_MS, ms));
 }
+function startGridCreate() {
+  if (!drag) return;
+  mbCreateStarted = true;
+  mbCreateAnchorMs = clampToDay(Math.floor(mbCreateAnchorMs / SNAP_MS) * SNAP_MS);
+  drag.beginCreate(new Date(mbCreateAnchorMs), new Date(mbCreateAnchorMs + SNAP_MS));
+  addTouchScrollBlock();
+}
 function onGridPointerDown(e) {
   if (e.button !== 0 || !drag || !oneventcreate || readOnly || isDisabled) return;
   if (e.target.closest(".mb-event")) return;
+  mbCreateStartX = e.clientX;
   mbCreateStartY = e.clientY;
   mbCreateAnchorMs = gridTimeMs(e.clientY);
   mbCreateStarted = false;
+  if (e.pointerType === "touch") {
+    longPressTimer = setTimeout(() => {
+      longPressTimer = null;
+      startGridCreate();
+    }, LONG_PRESS_MS);
+  }
   window.addEventListener("pointermove", onGridCreateMove);
   window.addEventListener("pointerup", onGridCreateUp, { once: true });
   window.addEventListener("pointercancel", onGridCreateCancel, { once: true });
@@ -249,10 +279,14 @@ function onGridPointerDown(e) {
 function onGridCreateMove(e) {
   if (!drag) return;
   if (!mbCreateStarted) {
+    if (longPressTimer !== null) {
+      const moved = Math.hypot(e.clientX - mbCreateStartX, e.clientY - mbCreateStartY);
+      if (moved > LONG_PRESS_TOLERANCE) cleanupGridCreate();
+      return;
+    }
+    if (e.pointerType === "touch") return;
     if (Math.abs(e.clientY - mbCreateStartY) < CREATE_THRESHOLD) return;
-    mbCreateStarted = true;
-    mbCreateAnchorMs = clampToDay(Math.floor(mbCreateAnchorMs / SNAP_MS) * SNAP_MS);
-    drag.beginCreate(new Date(mbCreateAnchorMs), new Date(mbCreateAnchorMs + SNAP_MS));
+    startGridCreate();
   }
   const snapped = clampToDay(Math.round(gridTimeMs(e.clientY) / SNAP_MS) * SNAP_MS);
   drag.updatePointer(
@@ -261,6 +295,8 @@ function onGridCreateMove(e) {
   );
 }
 function cleanupGridCreate() {
+  clearLongPress();
+  removeTouchScrollBlock();
   window.removeEventListener("pointermove", onGridCreateMove);
   window.removeEventListener("pointerup", onGridCreateUp);
   window.removeEventListener("pointercancel", onGridCreateCancel);
@@ -280,6 +316,9 @@ function onGridCreateCancel() {
   if (drag && mbCreateStarted) drag.cancel();
   cleanupGridCreate();
 }
+function onGridContextMenu(e) {
+  if (mbCreateStarted || longPressTimer !== null) e.preventDefault();
+}
 let suppressEventClick = false;
 let mbRsStartY = 0;
 let mbRsStarted = false;
@@ -303,6 +342,7 @@ function onResizeMove(e) {
     if (Math.abs(e.clientY - mbRsStartY) < CREATE_THRESHOLD) return;
     mbRsStarted = true;
     drag.beginResize(ev.id, mbRsEdge, ev.start, ev.end);
+    addTouchScrollBlock();
   }
   const snapped = clampToDay(Math.round(gridTimeMs(e.clientY) / SNAP_MS) * SNAP_MS);
   if (mbRsEdge === "end") {
@@ -314,6 +354,7 @@ function onResizeMove(e) {
   }
 }
 function cleanupResize() {
+  removeTouchScrollBlock();
   window.removeEventListener("pointermove", onResizeMove);
   window.removeEventListener("pointerup", onResizeUp);
   window.removeEventListener("pointercancel", onResizeCancel);
@@ -337,11 +378,13 @@ function onResizeCancel() {
   cleanupResize();
 }
 let gridEl;
-onMount(() => {
-  if (nowOffset > 0 && gridEl) {
-    const scrollTarget = Math.max(0, nowOffset - 120);
-    gridEl.scrollTop = scrollTarget;
-  }
+$effect(() => {
+  void dayMs;
+  const el = gridEl;
+  if (!el) return;
+  untrack(() => {
+    if (nowOffset >= 0) el.scrollTop = Math.max(0, nowOffset - 120);
+  });
 });
 </script>
 
@@ -352,147 +395,181 @@ onMount(() => {
 	style:height={autoHeight ? undefined : (height ? `${height}px` : '100%')}
 	role="region"
 	aria-label={L.dayPlanner}
-	ontouchstart={onTouchStart}
-	ontouchmove={onTouchMove}
-	ontouchend={onTouchEnd}
+	ontouchstart={swipe.ontouchstart}
+	ontouchmove={swipe.ontouchmove}
+	ontouchend={swipe.ontouchend}
+	ontouchcancel={swipe.ontouchcancel}
 >
-	<!-- All-day events bar -->
-	{#if allDayEvents.length > 0}
-		<div class="mb-allday">
-			{#each allDayEvents.slice(0, 3) as seg (seg.ev.id)}
-				<button
-					class="mb-allday-chip"
-					class:mb-allday-chip--selected={selectedEventId === seg.ev.id}
-					style:--ev-color={seg.ev.color ?? 'var(--dt-accent)'}
-					onclick={() => oneventclick?.(seg.ev)}
-				>
-					<span class="mb-allday-dot"></span>
-					<span class="mb-allday-title">{seg.ev.title}</span>
-					{#if seg.totalDays > 1}
-						<span class="mb-allday-span">{seg.dayIndex}/{seg.totalDays}</span>
-					{/if}
-				</button>
-			{/each}
-			{#if allDayEvents.length > 3}
-				<span class="mb-allday-more">{L.nMore(allDayEvents.length - 3)}</span>
-			{/if}
-		</div>
-	{/if}
-
-	<!-- Scrollable time grid -->
 	<div
-		class="mb-grid"
-		bind:this={gridEl}
-		onclick={handleGridClick}
-		onpointerdown={onGridPointerDown}
-		onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleGridClick(e as unknown as MouseEvent); }}
-		role="grid"
-		tabindex="-1"
+		class="mb-swipe"
+		class:mb-swipe--animate={swipeAnimate}
+		style:transform={swipeOffset !== 0 ? `translateX(${swipeOffset}px)` : undefined}
 	>
-		<div class="mb-grid-inner" style:height="{gridHeight}px">
-			<!-- Hour lanes -->
-			{#each { length: hourCount } as _, h}
-				{@const hour = startHour + h}
-				{@const blocked = isBlockedAt(hour)}
-				<div
-					class="mb-hour"
-					class:mb-hour--blocked={blocked}
-					style:top="{h * HOUR_HEIGHT}px"
-					style:height="{HOUR_HEIGHT}px"
-				>
-					<div class="mb-hour-label">{fmtH(hour, locale)}</div>
-					<div class="mb-hour-line"></div>
-					{#if blocked && blockedSlots}
-						{@const slot = blockedSlots.find(s => (!s.day || s.day === (new Date(dayMs).getDay() === 0 ? 7 : new Date(dayMs).getDay())) && hour >= s.start && hour < s.end)}
-						{#if slot?.label}
-							<span class="mb-blocked-label">{slot.label}</span>
-						{/if}
-					{/if}
-				</div>
-			{/each}
-
-			<!-- Now line -->
-			{#if nowOffset >= 0}
-				<div class="mb-now" style:top="{nowOffset}px">
-					<span class="mb-now-label">{clock.hm}</span>
-					<div class="mb-now-line"></div>
-				</div>
-			{/if}
-
-			<!-- Events -->
-			{#each positionedEvents as p (p.ev.id)}
-				<button
-					class="mb-event"
-					class:mb-event--selected={selectedEventId === p.ev.id}
-					class:mb-event--current={p.isCurrent}
-					class:mb-event--next={p.isNext}
-					class:mb-event--cancelled={p.ev.status === 'cancelled'}
-					class:mb-event--tentative={p.ev.status === 'tentative'}
-					class:mb-event--full={p.ev.status === 'full'}
-					class:mb-event--limited={p.ev.status === 'limited'}
-					class:mb-event--resizing={p.isResizing}
-					style:top="{p.top}px"
-					style:height="{p.height}px"
-					style:left={p.left}
-					style:width={p.width}
-					style:--ev-color={p.ev.color ?? 'var(--dt-accent)'}
-					onclick={(e) => { e.stopPropagation(); if (suppressEventClick) { suppressEventClick = false; return; } oneventclick?.(p.ev); }}
-					onpointerenter={() => oneventhover?.(p.ev)}
-					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}` : ''}"
-				>
-					<div class="mb-ev-stripe"></div>
-					<div class="mb-ev-body">
-						<EventContent event={p.ev}>
-						<span class="mb-ev-title">{p.ev.title}</span>
-						{#if p.height > 32}
-							<span class="mb-ev-time">{fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}</span>
+		<!-- All-day events bar -->
+		{#if allDayEvents.length > 0}
+			<div class="mb-allday" class:mb-allday--expanded={allDayExpanded}>
+				{#each visibleAllDay as seg (seg.ev.id)}
+					<button
+						type="button"
+						class="mb-allday-chip"
+						class:mb-allday-chip--selected={selectedEventId === seg.ev.id}
+						style:--ev-color={seg.ev.color ?? 'var(--dt-accent)'}
+						onclick={() => oneventclick?.(seg.ev)}
+					>
+						<span class="mb-allday-dot"></span>
+						<span class="mb-allday-title">{seg.ev.title}</span>
+						{#if seg.totalDays > 1}
+							<span class="mb-allday-span">{seg.dayIndex}/{seg.totalDays}</span>
 						{/if}
-						{#if p.ev.subtitle && p.height > 48}
-							<span class="mb-ev-sub">{p.ev.subtitle}</span>
+					</button>
+				{/each}
+				{#if allDayEvents.length > ALLDAY_MAX}
+					<button
+						type="button"
+						class="mb-allday-more"
+						aria-expanded={allDayExpanded}
+						onclick={() => { allDayExpanded = !allDayExpanded; }}
+					>
+						{allDayExpanded ? L.showLess : L.nMore(allDayEvents.length - ALLDAY_MAX)}
+					</button>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Scrollable time grid -->
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+		<div
+			class="mb-grid"
+			bind:this={gridEl}
+			onclick={handleGridClick}
+			onpointerdown={onGridPointerDown}
+			onkeydown={onGridKeydown}
+			oncontextmenu={onGridContextMenu}
+			role="region"
+			aria-label={L.scrollableDayPlanner}
+			tabindex="0"
+		>
+			<div class="mb-grid-inner" style:height="{gridHeight}px">
+				<!-- Hour lanes -->
+				{#each { length: hourCount } as _, h}
+					{@const hour = startHour + h}
+					{@const blocked = isBlockedAt(hour)}
+					<div
+						class="mb-hour"
+						class:mb-hour--blocked={blocked}
+						style:top="{h * HOUR_HEIGHT}px"
+						style:height="{HOUR_HEIGHT}px"
+					>
+						<div class="mb-hour-label">{fmtH(hour, locale)}</div>
+						<div class="mb-hour-line"></div>
+						{#if blocked && blockedSlots}
+							{@const slot = blockedSlots.find(s => (!s.day || s.day === (new Date(dayMs).getDay() === 0 ? 7 : new Date(dayMs).getDay())) && hour >= s.start && hour < s.end)}
+							{#if slot?.label}
+								<span class="mb-blocked-label">{slot.label}</span>
+							{/if}
 						{/if}
-						{#if p.ev.location && p.height > 56}
-							<span class="mb-ev-loc">{p.ev.location}</span>
+					</div>
+				{/each}
+
+				<!-- Now line -->
+				{#if nowOffset >= 0}
+					<div class="mb-now" style:top="{nowOffset}px">
+						<span class="mb-now-label">{clock.hm}</span>
+						<div class="mb-now-line"></div>
+					</div>
+				{/if}
+
+				<!-- Events -->
+				{#each positionedEvents as p (p.ev.id)}
+					<button
+						type="button"
+						class="mb-event"
+						class:mb-event--selected={selectedEventId === p.ev.id}
+						class:mb-event--current={p.isCurrent}
+						class:mb-event--next={p.isNext}
+						class:mb-event--cancelled={p.ev.status === 'cancelled'}
+						class:mb-event--tentative={p.ev.status === 'tentative'}
+						class:mb-event--full={p.ev.status === 'full'}
+						class:mb-event--limited={p.ev.status === 'limited'}
+						class:mb-event--resizing={p.isResizing}
+						class:mb-event--short={p.height < 44}
+						style:top="{p.top}px"
+						style:height="{p.height}px"
+						style:left={p.left}
+						style:width={p.width}
+						style:--ev-color={p.ev.color ?? 'var(--dt-accent)'}
+						onclick={(e) => { e.stopPropagation(); if (suppressEventClick) { suppressEventClick = false; return; } oneventclick?.(p.ev); }}
+						onpointerenter={() => oneventhover?.(p.ev)}
+						aria-label="{p.ev.title}{statusText(p.ev)}, {fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}{p.isCurrent ? `, ${L.inProgress}` : ''}{p.isNext ? `, ${L.upNext}` : ''}"
+					>
+						<div class="mb-ev-stripe"></div>
+						<div class="mb-ev-body">
+							<EventContent event={p.ev}>
+							<!-- Line thresholds must track real content height (title 18 +
+							     time 13 + sub 14 + loc 12 + tags 19 + padding 8) — showing
+							     a line the block can't hold clips text at both ends. -->
+							<span class="mb-ev-title">{p.ev.title}</span>
+							{#if p.height > 32}
+								<span class="mb-ev-time">{fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}</span>
+							{/if}
+							{#if p.ev.subtitle && p.height > 56}
+								<span class="mb-ev-sub">{p.ev.subtitle}</span>
+							{/if}
+							{#if p.ev.location && p.height > 72}
+								<span class="mb-ev-loc">{p.ev.location}</span>
+							{/if}
+							{#if p.ev.tags?.length && p.height > 88}
+								<div class="mb-ev-tags">
+									{#each p.ev.tags as tag}
+										<span class="mb-ev-tag">{tag}</span>
+									{/each}
+								</div>
+							{/if}
+							</EventContent>
+						</div>
+						{#if p.isCurrent}
+							<span class="mb-ev-live"></span>
+						{:else if p.isNext}
+							<span class="mb-ev-next-badge">{L.upNext}</span>
 						{/if}
-						{#if p.ev.tags?.length && p.height > 56}
-							<div class="mb-ev-tags">
-								{#each p.ev.tags as tag}
-									<span class="mb-ev-tag">{tag}</span>
-								{/each}
-							</div>
+						{#if !readOnly && !p.ev.data?.readOnly}
+							<span
+								class="mb-ev-handle mb-ev-handle--start"
+								aria-hidden="true"
+								onpointerdown={(e) => onResizePointerDown(e, p.ev, 'start')}
+							></span>
+							<span
+								class="mb-ev-handle mb-ev-handle--end"
+								aria-hidden="true"
+								onpointerdown={(e) => onResizePointerDown(e, p.ev, 'end')}
+							></span>
 						{/if}
-						</EventContent>
+					</button>
+				{/each}
+
+				<!-- Drag-to-create ghost -->
+				{#if !readOnly && drag?.active && drag.mode === 'create' && drag.payload}
+					{@const gTop = ((drag.payload.start.getTime() - dayMs) / HOUR_MS - startHour) * HOUR_HEIGHT}
+					{@const gH = Math.max(12, ((drag.payload.end.getTime() - drag.payload.start.getTime()) / HOUR_MS) * HOUR_HEIGHT)}
+					<div class="mb-create-ghost" style:top="{gTop}px" style:height="{gH}px" aria-hidden="true">
+						<span class="mb-create-ghost-time">
+							{fmtTime(drag.payload.start, locale)} – {fmtTime(drag.payload.end, locale)}
+						</span>
 					</div>
-					{#if p.isCurrent}
-						<span class="mb-ev-live"></span>
-					{:else if p.isNext}
-						<span class="mb-ev-next-badge">{L.upNext}</span>
-					{/if}
-					{#if !readOnly && !p.ev.data?.readOnly}
-						<span
-							class="mb-ev-handle mb-ev-handle--start"
-							aria-hidden="true"
-							onpointerdown={(e) => onResizePointerDown(e, p.ev, 'start')}
-						></span>
-						<span
-							class="mb-ev-handle mb-ev-handle--end"
-							aria-hidden="true"
-							onpointerdown={(e) => onResizePointerDown(e, p.ev, 'end')}
-						></span>
-					{/if}
-				</button>
-			{/each}
-
-			<!-- Drag-to-create ghost -->
-			{#if !readOnly && drag?.active && drag.mode === 'create' && drag.payload}
-				{@const gTop = ((drag.payload.start.getTime() - dayMs) / HOUR_MS - startHour) * HOUR_HEIGHT}
-				{@const gH = Math.max(12, ((drag.payload.end.getTime() - drag.payload.start.getTime()) / HOUR_MS) * HOUR_HEIGHT)}
-				<div class="mb-create-ghost" style:top="{gTop}px" style:height="{gH}px" aria-hidden="true">
-					<span class="mb-create-ghost-time">
-						{fmtTime(drag.payload.start, locale)} – {fmtTime(drag.payload.end, locale)}
-					</span>
-				</div>
-			{/if}
+				{/if}
+			</div>
 		</div>
+
+		<!-- Empty state — overlaid, taps pass through to the grid -->
+		{#if isEmpty}
+			<div class="mb-empty">
+				{#if ctx.emptySnippet}
+					{@render ctx.emptySnippet()}
+				{:else}
+					<span class="mb-empty-text">{L.nothingScheduled}</span>
+				{/if}
+			</div>
+		{/if}
 	</div>
 </div>
 
@@ -507,9 +584,25 @@ onMount(() => {
 		overflow: hidden;
 		background: var(--dt-bg, #fff);
 		-webkit-tap-highlight-color: transparent;
+		touch-action: pan-y;
 	}
 	.mb--auto { overflow: visible; }
 
+	/* ─── Swipe wrapper (follows the finger) ─────────── */
+	.mb-swipe {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+	}
+	.mb-swipe--animate {
+		transition: transform 180ms ease;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.mb-swipe--animate { transition: none; }
+	}
+
 	/* ─── All-day bar ────────────────────────────────── */
 	.mb-allday {
 		display: flex;
@@ -522,12 +615,17 @@ onMount(() => {
 		align-items: center;
 	}
 	.mb-allday::-webkit-scrollbar { display: none; }
+	.mb-allday--expanded {
+		flex-wrap: wrap;
+		overflow-x: visible;
+	}
 
 	.mb-allday-chip {
 		display: flex;
 		align-items: center;
 		gap: 4px;
 		padding: 4px 8px;
+		min-height: 32px;
 		border-radius: 5px;
 		background: color-mix(in srgb, var(--ev-color) 12%, var(--dt-surface, #f9fafb));
 		border: none;
@@ -536,6 +634,17 @@ onMount(() => {
 		transition: background 120ms;
 		-webkit-tap-highlight-color: transparent;
 		max-width: 160px;
+		position: relative;
+	}
+	/* Hit-slop: 44px effective touch target */
+	.mb-allday-chip::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		height: 44px;
 	}
 	.mb-allday-chip:active {
 		background: color-mix(in srgb, var(--ev-color) 22%, var(--dt-surface, #f9fafb));
@@ -543,6 +652,10 @@ onMount(() => {
 	.mb-allday-chip--selected {
 		box-shadow: 0 0 0 1.5px var(--ev-color);
 	}
+	.mb-allday-chip:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
+	}
 
 	.mb-allday-dot {
 		width: 6px;
@@ -553,7 +666,7 @@ onMount(() => {
 	}
 
 	.mb-allday-title {
-		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		max-width: 100px;
@@ -562,16 +675,35 @@ onMount(() => {
 	}
 
 	.mb-allday-span {
-		font: 400 10px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 
 	.mb-allday-more {
-		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 12px/1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		white-space: nowrap;
 		flex-shrink: 0;
-		padding: 0 4px;
+		padding: 0 6px;
+		min-height: 32px;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		position: relative;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.mb-allday-more::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		height: 44px;
+	}
+	.mb-allday-more:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
 	}
 
 	/* ─── Grid ───────────────────────────────────────── */
@@ -579,6 +711,7 @@ onMount(() => {
 		flex: 1;
 		overflow-y: auto;
 		overflow-x: hidden;
+		overscroll-behavior: contain;
 		-webkit-overflow-scrolling: touch;
 		scrollbar-width: thin;
 		scrollbar-color: var(--dt-scrollbar, rgba(0, 0, 0, 0.1)) transparent;
@@ -586,12 +719,31 @@ onMount(() => {
 		padding-top: 8px;
 	}
 	.mb--auto .mb-grid { overflow-y: visible; }
+	.mb-grid:focus-visible {
+		outline: none;
+		box-shadow: inset 0 0 0 2px var(--dt-accent, #2563eb);
+	}
 
 	.mb-grid-inner {
 		position: relative;
 		min-width: 100%;
 	}
 
+	/* ─── Empty state ────────────────────────────────── */
+	.mb-empty {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
+		z-index: 4;
+	}
+	.mb-empty-text {
+		font: 500 13px/1.4 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+	}
+
 	/* ─── Hour row ───────────────────────────────────── */
 	.mb-hour {
 		position: absolute;
@@ -603,6 +755,9 @@ onMount(() => {
 
 	.mb-hour-label {
 		width: 40px;
+		/* border-box keeps the label inside the 40px gutter that events
+		   start at — content-box pushed digits flush under the event edge */
+		box-sizing: border-box;
 		flex-shrink: 0;
 		font: 500 11px/1 var(--dt-mono, ui-monospace, monospace);
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
@@ -634,8 +789,8 @@ onMount(() => {
 		left: 44px;
 		top: 50%;
 		transform: translateY(-50%);
-		font: 500 9px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font: 500 10px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 	}
@@ -653,6 +808,7 @@ onMount(() => {
 
 	.mb-now-label {
 		width: 40px;
+		box-sizing: border-box;
 		flex-shrink: 0;
 		text-align: right;
 		padding-right: 6px;
@@ -699,6 +855,24 @@ onMount(() => {
 	.mb-event:active {
 		background: color-mix(in srgb, var(--ev-color) 20%, var(--dt-surface, #f9fafb));
 	}
+	/* Short blocks keep their duration-proportional height, but get a 44px
+	   transparent hit-slop so taps still land. */
+	.mb-event--short {
+		overflow: visible;
+	}
+	.mb-event--short::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		height: 44px;
+	}
+	.mb-event--short .mb-ev-body {
+		padding-top: 2px;
+		padding-bottom: 2px;
+	}
 	.mb-event--selected {
 		box-shadow: 0 0 0 2px var(--ev-color),
 			0 2px 12px color-mix(in srgb, var(--ev-color) 25%, transparent);
@@ -710,22 +884,32 @@ onMount(() => {
 		background: color-mix(in srgb, var(--ev-color) 8%, var(--dt-surface, #f9fafb));
 		border: 1px dashed color-mix(in srgb, var(--ev-color) 35%, transparent);
 	}
+	/* Status treatments: token-level dims + a non-opacity signal
+	   (strikethrough / border style) — never a bare opacity on the block. */
 	.mb-event--cancelled {
-		opacity: 0.5;
+		background: color-mix(in srgb, var(--ev-color) 5%, var(--dt-surface, #f9fafb));
 	}
 	.mb-event--cancelled .mb-ev-title {
 		text-decoration: line-through;
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
+	}
+	.mb-event--cancelled .mb-ev-stripe {
+		opacity: 0.45; /* decorative bar only */
 	}
 	.mb-event--tentative {
-		opacity: 0.65;
-		border: 1px dashed color-mix(in srgb, var(--ev-color) 35%, transparent);
+		background: color-mix(in srgb, var(--ev-color) 6%, var(--dt-surface, #f9fafb));
+		border: 1px dashed color-mix(in srgb, var(--ev-color) 45%, transparent);
 	}
 	.mb-event--full {
-		opacity: 0.55;
+		background: color-mix(in srgb, var(--ev-color) 6%, var(--dt-surface, #f9fafb));
+		border: 1px solid color-mix(in srgb, var(--ev-color) 30%, transparent);
+	}
+	.mb-event--full .mb-ev-title {
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 	.mb-event--limited {
-		opacity: 0.65;
-		border: 1px dashed color-mix(in srgb, var(--ev-color) 35%, transparent);
+		background: color-mix(in srgb, var(--ev-color) 8%, var(--dt-surface, #f9fafb));
+		border: 1px dashed color-mix(in srgb, var(--ev-color) 45%, transparent);
 	}
 	.mb-event--resizing {
 		z-index: 50;
@@ -745,6 +929,17 @@ onMount(() => {
 	}
 	.mb-ev-handle--start { top: 0; }
 	.mb-ev-handle--end { bottom: 0; }
+	/* Hit-slop: ≥24px effective, extending inward so the block's
+	   overflow clipping can't cut it off. */
+	.mb-ev-handle::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 24px;
+	}
+	.mb-ev-handle--start::before { top: 0; }
+	.mb-ev-handle--end::before { bottom: 0; }
 	.mb-ev-handle::after {
 		content: '';
 		position: absolute;
@@ -760,8 +955,13 @@ onMount(() => {
 	.mb-ev-handle--start::after { top: 2px; }
 	.mb-ev-handle--end::after { bottom: 2px; }
 	.mb-event:hover .mb-ev-handle::after,
+	.mb-event:focus-within .mb-ev-handle::after,
 	.mb-event--resizing .mb-ev-handle::after,
 	.mb-event--selected .mb-ev-handle::after { opacity: 0.55; }
+	/* Touch devices have no hover — show the handles persistently. */
+	@media (hover: none) {
+		.mb-ev-handle::after { opacity: 0.55; }
+	}
 
 	/* ─── Drag-to-create ghost ───────────────────────── */
 	.mb-create-ghost {
@@ -778,7 +978,7 @@ onMount(() => {
 		pointer-events: none;
 	}
 	.mb-create-ghost-time {
-		font: 600 10px/1 var(--dt-mono, ui-monospace, monospace);
+		font: 600 11px/1 var(--dt-mono, ui-monospace, monospace);
 		color: var(--dt-accent, #2563eb);
 		padding: 4px 8px;
 		white-space: nowrap;
@@ -802,7 +1002,7 @@ onMount(() => {
 	}
 
 	.mb-ev-title {
-		font: 600 13px/1.2 var(--dt-sans, system-ui, sans-serif);
+		font: 600 15px/1.2 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		overflow: hidden;
@@ -810,21 +1010,21 @@ onMount(() => {
 	}
 
 	.mb-ev-time {
-		font: 400 11px/1 var(--dt-mono, ui-monospace, monospace);
+		font: 400 12px/1 var(--dt-mono, ui-monospace, monospace);
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 	}
 
 	.mb-ev-sub {
-		font: 400 11px/1.1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font: 400 12px/1.1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 
 	.mb-ev-loc {
-		font: 400 10px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -837,7 +1037,7 @@ onMount(() => {
 	}
 
 	.mb-ev-tag {
-		font: 500 9px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 500 11px/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;
@@ -855,11 +1055,14 @@ onMount(() => {
 		background: var(--ev-color, var(--dt-accent));
 		animation: mb-pulse 2s ease-in-out infinite;
 	}
+	@media (prefers-reduced-motion: reduce) {
+		.mb-ev-live { animation: none; }
+	}
 	.mb-ev-next-badge {
 		position: absolute;
 		top: 4px;
 		right: 4px;
-		font: 600 8px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 600 10px/1 var(--dt-sans, system-ui, sans-serif);
 		text-transform: uppercase;
 		letter-spacing: 0.06em;
 		color: var(--ev-color, var(--dt-accent));
@@ -876,7 +1079,7 @@ onMount(() => {
 
 	/* ─── Focus ──────────────────────────────────────── */
 	.mb-event:focus-visible {
-		outline: 2px solid var(--dt-accent, #2563eb);
-		outline-offset: 2px;
+		outline: none;
+		box-shadow: 0 0 0 2px var(--dt-accent, #2563eb);
 	}
 </style>