@nomideusz/svelte-calendar 0.14.1 → 0.15.2

package/dist/views/mobile/MobileDay.svelte

@@ -12,18 +12,8 @@ import { createClock } from "../../core/clock.svelte.js";
 import { DAY_MS, HOUR_MS, sod, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
 import { fmtH, fmtTime } from "../../core/locale.js";
 import { createSwipe } from "./swipe.js";
-let {
-  height = null,
-  events = [],
-  style = "",
-  locale,
-  focusDate,
-  oneventclick,
-  oneventcreate,
-  selectedEventId = null,
-  readOnly = false,
-  visibleHours
-} = $props();
+let { height = null, events = [], style = "", locale, focusDate, oneventclick, oneventcreate, selectedEventId = null, readOnly = false, visibleHours } = $props();
+// ── Context ────────────────────────────────────────
 const ctx = useCalendarContext();
 const L = $derived(ctx.labels);
 const viewState = $derived(ctx.viewState);
@@ -37,189 +27,218 @@ const drag = $derived(ctx.drag);
 const commitDragCtx = $derived(ctx.commitDrag);
 const SNAP_MS = $derived(ctx.snapInterval * 6e4);
 const clock = createClock(ctx.timezone);
+// ── Config ─────────────────────────────────────────
 const HOUR_HEIGHT = 64;
 const GUTTER_W = 40;
 const startHour = $derived(visibleHours?.[0] ?? 0);
 const endHour = $derived(visibleHours?.[1] ?? 24);
 const hourCount = $derived(Math.max(1, endHour - startHour));
 const gridHeight = $derived(hourCount * HOUR_HEIGHT);
+// ── Day state ──────────────────────────────────────
 const dayMs = $derived(focusDate ? sod(focusDate.getTime()) : clock.today);
 const dayEnd = $derived(dayMs + DAY_MS);
 const isToday = $derived(dayMs === clock.today);
 const isDisabled = $derived(disabledSet.has(dayMs));
+// ── Load range ─────────────────────────────────────
 $effect(() => {
-  if (!loadRangeCtx) return;
-  const rangeStart = new Date(dayMs - 2 * DAY_MS);
-  const rangeEnd = new Date(dayMs + 3 * DAY_MS);
-  loadRangeCtx.set({ start: rangeStart, end: rangeEnd });
-  return () => loadRangeCtx.set(null);
+	if (!loadRangeCtx) return;
+	const rangeStart = new Date(dayMs - 2 * DAY_MS);
+	const rangeEnd = new Date(dayMs + 3 * DAY_MS);
+	loadRangeCtx.set({
+		start: rangeStart,
+		end: rangeEnd
+	});
+	return () => loadRangeCtx.set(null);
 });
-const timedEvents = $derived(
-  events.filter((ev) => !isAllDay(ev) && !isMultiDay(ev) && ev.start.getTime() < dayEnd && ev.end.getTime() > dayMs).sort((a, b) => a.start.getTime() - b.start.getTime())
-);
+// ── Events partition ───────────────────────────────
+const timedEvents = $derived(events.filter((ev) => !isAllDay(ev) && !isMultiDay(ev) && ev.start.getTime() < dayEnd && ev.end.getTime() > dayMs).sort((a, b) => a.start.getTime() - b.start.getTime()));
 const allDayEvents = $derived.by(() => {
-  const segs = [];
-  for (const ev of events) {
-    if (!isAllDay(ev) && !isMultiDay(ev)) continue;
-    const seg = segmentForDay(ev, dayMs);
-    if (seg) segs.push(seg);
-  }
-  return segs;
+	const segs = [];
+	for (const ev of events) {
+		if (!isAllDay(ev) && !isMultiDay(ev)) continue;
+		const seg = segmentForDay(ev, dayMs);
+		if (seg) segs.push(seg);
+	}
+	return segs;
 });
 const isEmpty = $derived(timedEvents.length === 0 && allDayEvents.length === 0);
+// ── All-day strip expansion ────────────────────────
 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];
-  const rsP = drag?.active && (drag.mode === "resize-start" || drag.mode === "resize-end") ? drag.payload : null;
-  let nextEventId = null;
-  if (isToday) {
-    for (const ev of [...sorted].sort((a, b) => a.start.getTime() - b.start.getTime())) {
-      const s = ev.start.getTime();
-      if (s > now) {
-        nextEventId = ev.id;
-        break;
-      }
-    }
-  }
-  const infos = sorted.map((ev) => {
-    const resizing = rsP?.eventId === ev.id;
-    const evStart = resizing ? rsP.start : ev.start;
-    const evEnd = resizing ? rsP.end : ev.end;
-    const sMs = Math.max(evStart.getTime(), dayMs + startHour * HOUR_MS);
-    const eMs = Math.min(evEnd.getTime(), dayMs + endHour * HOUR_MS);
-    const topH = (sMs - dayMs) / HOUR_MS - startHour;
-    const botH = (eMs - dayMs) / HOUR_MS - startHour;
-    return {
-      ev,
-      top: topH * HOUR_HEIGHT,
-      height: Math.max(24, (botH - topH) * HOUR_HEIGHT),
-      isCurrent: ev.start.getTime() <= now && ev.end.getTime() > now,
-      isNext: ev.id === nextEventId,
-      isResizing: resizing,
-      startMs: sMs,
-      endMs: eMs,
-      col: 0,
-      totalCols: 1
-    };
-  });
-  const par = infos.map((_, i) => i);
-  function find(i) {
-    while (par[i] !== i) {
-      par[i] = par[par[i]];
-      i = par[i];
-    }
-    return i;
-  }
-  for (let i = 0; i < infos.length; i++) {
-    for (let j = i + 1; j < infos.length; j++) {
-      if (infos[j].startMs < infos[i].endMs) par[find(i)] = find(j);
-      else break;
-    }
-  }
-  const groups = /* @__PURE__ */ new Map();
-  for (let i = 0; i < infos.length; i++) {
-    const root = find(i);
-    if (!groups.has(root)) groups.set(root, []);
-    groups.get(root).push(i);
-  }
-  for (const [, indices] of groups) {
-    const rows = [];
-    for (const idx of indices) {
-      let row = 0;
-      for (let r = 0; r < rows.length; r++) {
-        if (rows[r] <= infos[idx].startMs) {
-          row = r;
-          rows[r] = infos[idx].endMs;
-          break;
-        }
-        row = r + 1;
-      }
-      if (row >= rows.length) rows.push(infos[idx].endMs);
-      infos[idx].col = row;
-    }
-    for (const idx of indices) infos[idx].totalCols = rows.length;
-  }
-  return infos.map((info) => ({
-    ev: info.ev,
-    top: info.top,
-    height: info.height,
-    left: `calc(${GUTTER_W}px + ${info.col / info.totalCols * 100}% - ${GUTTER_W * info.col / info.totalCols}px)`,
-    width: `calc(${100 / info.totalCols}% - ${GUTTER_W / info.totalCols + 2}px)`,
-    isCurrent: info.isCurrent,
-    isNext: info.isNext,
-    isResizing: info.isResizing,
-    col: info.col,
-    totalCols: info.totalCols
-  }));
+	const now = clock.tick;
+	const sorted = [...timedEvents];
+	const rsP = drag?.active && (drag.mode === "resize-start" || drag.mode === "resize-end") ? drag.payload : null;
+	// Find the next upcoming event today
+	let nextEventId = null;
+	if (isToday) {
+		for (const ev of [...sorted].sort((a, b) => a.start.getTime() - b.start.getTime())) {
+			const s = ev.start.getTime();
+			if (s > now) {
+				nextEventId = ev.id;
+				break;
+			}
+		}
+	}
+	// Overlap grouping
+	const infos = sorted.map((ev) => {
+		// While resizing, this event tracks the tentative drag payload
+		const resizing = rsP?.eventId === ev.id;
+		const evStart = resizing ? rsP.start : ev.start;
+		const evEnd = resizing ? rsP.end : ev.end;
+		const sMs = Math.max(evStart.getTime(), dayMs + startHour * HOUR_MS);
+		const eMs = Math.min(evEnd.getTime(), dayMs + endHour * HOUR_MS);
+		const topH = (sMs - dayMs) / HOUR_MS - startHour;
+		const botH = (eMs - dayMs) / HOUR_MS - startHour;
+		return {
+			ev,
+			top: topH * HOUR_HEIGHT,
+			height: Math.max(24, (botH - topH) * HOUR_HEIGHT),
+			isCurrent: ev.start.getTime() <= now && ev.end.getTime() > now,
+			isNext: ev.id === nextEventId,
+			isResizing: resizing,
+			startMs: sMs,
+			endMs: eMs,
+			col: 0,
+			totalCols: 1
+		};
+	});
+	// Assign columns for overlapping events
+	const par = infos.map((_, i) => i);
+	function find(i) {
+		while (par[i] !== i) {
+			par[i] = par[par[i]];
+			i = par[i];
+		}
+		return i;
+	}
+	for (let i = 0; i < infos.length; i++) {
+		for (let j = i + 1; j < infos.length; j++) {
+			if (infos[j].startMs < infos[i].endMs) par[find(i)] = find(j);
+			else break;
+		}
+	}
+	const groups = new Map();
+	for (let i = 0; i < infos.length; i++) {
+		const root = find(i);
+		if (!groups.has(root)) groups.set(root, []);
+		groups.get(root).push(i);
+	}
+	for (const [, indices] of groups) {
+		const rows = [];
+		for (const idx of indices) {
+			let row = 0;
+			for (let r = 0; r < rows.length; r++) {
+				if (rows[r] <= infos[idx].startMs) {
+					row = r;
+					rows[r] = infos[idx].endMs;
+					break;
+				}
+				row = r + 1;
+			}
+			if (row >= rows.length) rows.push(infos[idx].endMs);
+			infos[idx].col = row;
+		}
+		for (const idx of indices) infos[idx].totalCols = rows.length;
+	}
+	return infos.map((info) => ({
+		ev: info.ev,
+		top: info.top,
+		height: info.height,
+		left: `calc(${GUTTER_W}px + ${info.col / info.totalCols * 100}% - ${GUTTER_W * info.col / info.totalCols}px)`,
+		width: `calc(${100 / info.totalCols}% - ${GUTTER_W / info.totalCols + 2}px)`,
+		isCurrent: info.isCurrent,
+		isNext: info.isNext,
+		isResizing: info.isResizing,
+		col: info.col,
+		totalCols: info.totalCols
+	}));
 });
+// ── Now indicator ──────────────────────────────────
 const nowOffset = $derived.by(() => {
-  if (!isToday) return -1;
-  const h = (clock.tick - dayMs) / HOUR_MS - startHour;
-  if (h < 0 || h > hourCount) return -1;
-  return h * HOUR_HEIGHT;
+	if (!isToday) return -1;
+	const h = (clock.tick - dayMs) / HOUR_MS - startHour;
+	if (h < 0 || h > hourCount) return -1;
+	return h * HOUR_HEIGHT;
 });
+// ── Blocked slot check ─────────────────────────────
 function isBlockedAt(hour) {
-  if (!blockedSlots?.length) return false;
-  const jsDay = new Date(dayMs).getDay();
-  const isoDay = jsDay === 0 ? 7 : jsDay;
-  return blockedSlots.some((slot) => {
-    if (slot.day && slot.day !== isoDay) return false;
-    return hour >= slot.start && hour < slot.end;
-  });
+	if (!blockedSlots?.length) return false;
+	const jsDay = new Date(dayMs).getDay();
+	const isoDay = jsDay === 0 ? 7 : jsDay;
+	return blockedSlots.some((slot) => {
+		if (slot.day && slot.day !== isoDay) return false;
+		return hour >= slot.start && hour < slot.end;
+	});
 }
+// ── Status label (aria) ────────────────────────────
 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 "";
+	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 "";
 }
+// ── Touch swipe navigation ─────────────────────────
 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 {
-      swipeAnimate = true;
-      swipeOffset = 0;
-    }
-  }
+	disabled: () => !!drag?.active || mbCreateStarted || mbRsStarted || longPressTimer !== null,
+	onmove: (dx) => {
+		swipeAnimate = false;
+		swipeOffset = dx;
+	},
+	onend: (dir) => {
+		if (dir !== 0) {
+			// Committed — the day changes, so jump rather than slide new content.
+			swipeAnimate = false;
+			swipeOffset = 0;
+			if (dir > 0) viewState?.prev();
+			else viewState?.next();
+		} else {
+			// Snap back (CSS drops the transition under prefers-reduced-motion).
+			swipeAnimate = true;
+			swipeOffset = 0;
+		}
+	}
 });
+// ── Tap-to-create ──────────────────────────────────
 function handleGridClick(e) {
-  if (suppressGridClick) {
-    suppressGridClick = false;
-    return;
-  }
-  if (!oneventcreate || readOnly || isDisabled) return;
-  if (e.target.closest(".mb-event")) return;
-  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) });
+	if (suppressGridClick) {
+		suppressGridClick = false;
+		return;
+	}
+	if (!oneventcreate || readOnly || isDisabled) return;
+	if (e.target.closest(".mb-event")) return;
+	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)
+	});
 }
+// Keyboard create-at-default: next snap boundary from now (today),
+// otherwise the first visible hour.
 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) });
+	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)
+	});
 }
+// ── Drag-to-create (mouse: sweep; touch: long-press, then sweep) ──
+// Mouse movement below CREATE_THRESHOLD stays a plain tap (handleGridClick).
+// On touch, a vertical drag must remain a scroll, so drag-create only arms
+// after a ~350ms still hold (moving > 8px first cancels it).
 const CREATE_THRESHOLD = 4;
 const LONG_PRESS_MS = 350;
 const LONG_PRESS_TOLERANCE = 8;
@@ -229,162 +248,172 @@ let mbCreateStartY = 0;
 let mbCreateAnchorMs = 0;
 let mbCreateStarted = false;
 let longPressTimer = null;
+// touch-action can't change mid-gesture, so once a touch drag-create/resize
+// is live we block native scrolling with a non-passive touchmove listener.
 function blockTouchScroll(e) {
-  e.preventDefault();
+	e.preventDefault();
 }
 function addTouchScrollBlock() {
-  window.addEventListener("touchmove", blockTouchScroll, { passive: false });
+	window.addEventListener("touchmove", blockTouchScroll, { passive: false });
 }
 function removeTouchScrollBlock() {
-  window.removeEventListener("touchmove", blockTouchScroll);
+	window.removeEventListener("touchmove", blockTouchScroll);
 }
 function clearLongPress() {
-  if (longPressTimer !== null) {
-    clearTimeout(longPressTimer);
-    longPressTimer = null;
-  }
+	if (longPressTimer !== null) {
+		clearTimeout(longPressTimer);
+		longPressTimer = null;
+	}
 }
+/** Pointer Y → epoch ms within the day grid (accounts for scroll). */
 function gridTimeMs(clientY) {
-  const rect = gridEl.getBoundingClientRect();
-  const y = clientY - rect.top + gridEl.scrollTop;
-  return dayMs + (startHour + y / HOUR_HEIGHT) * HOUR_MS;
+	const rect = gridEl.getBoundingClientRect();
+	const y = clientY - rect.top + gridEl.scrollTop;
+	return dayMs + (startHour + y / HOUR_HEIGHT) * HOUR_MS;
 }
+/** Clamp a timestamp into the visible hour range of this day. */
 function clampToDay(ms) {
-  return Math.max(dayMs + startHour * HOUR_MS, Math.min(dayMs + endHour * HOUR_MS, 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();
+	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 });
+	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 });
 }
 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;
-    startGridCreate();
-  }
-  const snapped = clampToDay(Math.round(gridTimeMs(e.clientY) / SNAP_MS) * SNAP_MS);
-  drag.updatePointer(
-    new Date(Math.min(mbCreateAnchorMs, snapped)),
-    new Date(Math.max(mbCreateAnchorMs + SNAP_MS, snapped))
-  );
+	if (!drag) return;
+	if (!mbCreateStarted) {
+		if (longPressTimer !== null) {
+			// Finger moved before the hold completed → it's a scroll/swipe.
+			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;
+		startGridCreate();
+	}
+	const snapped = clampToDay(Math.round(gridTimeMs(e.clientY) / SNAP_MS) * SNAP_MS);
+	drag.updatePointer(new Date(Math.min(mbCreateAnchorMs, snapped)), new Date(Math.max(mbCreateAnchorMs + SNAP_MS, snapped)));
 }
 function cleanupGridCreate() {
-  clearLongPress();
-  removeTouchScrollBlock();
-  window.removeEventListener("pointermove", onGridCreateMove);
-  window.removeEventListener("pointerup", onGridCreateUp);
-  window.removeEventListener("pointercancel", onGridCreateCancel);
-  mbCreateStarted = false;
+	clearLongPress();
+	removeTouchScrollBlock();
+	window.removeEventListener("pointermove", onGridCreateMove);
+	window.removeEventListener("pointerup", onGridCreateUp);
+	window.removeEventListener("pointercancel", onGridCreateCancel);
+	mbCreateStarted = false;
 }
 function onGridCreateUp() {
-  if (drag && mbCreateStarted) {
-    suppressGridClick = true;
-    commitDragCtx?.();
-    setTimeout(() => {
-      suppressGridClick = false;
-    }, 0);
-  }
-  cleanupGridCreate();
+	if (drag && mbCreateStarted) {
+		// The click event (if any) fires synchronously after pointerup
+		suppressGridClick = true;
+		commitDragCtx?.();
+		setTimeout(() => {
+			suppressGridClick = false;
+		}, 0);
+	}
+	cleanupGridCreate();
 }
 function onGridCreateCancel() {
-  if (drag && mbCreateStarted) drag.cancel();
-  cleanupGridCreate();
+	// Gesture was taken over by the browser — abandon the tentative create
+	if (drag && mbCreateStarted) drag.cancel();
+	cleanupGridCreate();
 }
 function onGridContextMenu(e) {
-  if (mbCreateStarted || longPressTimer !== null) e.preventDefault();
+	// Long-press on touch fires contextmenu on some platforms — keep it
+	// from interrupting an armed or pending drag-create.
+	if (mbCreateStarted || longPressTimer !== null) e.preventDefault();
 }
+// ── Event resize (top/bottom edge handles) ─────────
 let suppressEventClick = false;
 let mbRsStartY = 0;
 let mbRsStarted = false;
 let mbRsEdge = "end";
 let mbRsEvent = null;
 function onResizePointerDown(e, ev, edge) {
-  if (e.button !== 0 || !drag || readOnly || ev.data?.readOnly) return;
-  e.stopPropagation();
-  mbRsStartY = e.clientY;
-  mbRsStarted = false;
-  mbRsEdge = edge;
-  mbRsEvent = ev;
-  window.addEventListener("pointermove", onResizeMove);
-  window.addEventListener("pointerup", onResizeUp, { once: true });
-  window.addEventListener("pointercancel", onResizeCancel, { once: true });
+	if (e.button !== 0 || !drag || readOnly || ev.data?.readOnly) return;
+	e.stopPropagation();
+	mbRsStartY = e.clientY;
+	mbRsStarted = false;
+	mbRsEdge = edge;
+	mbRsEvent = ev;
+	window.addEventListener("pointermove", onResizeMove);
+	window.addEventListener("pointerup", onResizeUp, { once: true });
+	window.addEventListener("pointercancel", onResizeCancel, { once: true });
 }
 function onResizeMove(e) {
-  const ev = mbRsEvent;
-  if (!drag || !ev) return;
-  if (!mbRsStarted) {
-    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") {
-    const end = Math.max(snapped, ev.start.getTime() + SNAP_MS);
-    drag.updatePointer(ev.start, new Date(end));
-  } else {
-    const start = Math.min(snapped, ev.end.getTime() - SNAP_MS);
-    drag.updatePointer(new Date(start), ev.end);
-  }
+	const ev = mbRsEvent;
+	if (!drag || !ev) return;
+	if (!mbRsStarted) {
+		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") {
+		const end = Math.max(snapped, ev.start.getTime() + SNAP_MS);
+		drag.updatePointer(ev.start, new Date(end));
+	} else {
+		const start = Math.min(snapped, ev.end.getTime() - SNAP_MS);
+		drag.updatePointer(new Date(start), ev.end);
+	}
 }
 function cleanupResize() {
-  removeTouchScrollBlock();
-  window.removeEventListener("pointermove", onResizeMove);
-  window.removeEventListener("pointerup", onResizeUp);
-  window.removeEventListener("pointercancel", onResizeCancel);
-  mbRsStarted = false;
-  mbRsEvent = null;
+	removeTouchScrollBlock();
+	window.removeEventListener("pointermove", onResizeMove);
+	window.removeEventListener("pointerup", onResizeUp);
+	window.removeEventListener("pointercancel", onResizeCancel);
+	mbRsStarted = false;
+	mbRsEvent = null;
 }
 function onResizeUp() {
-  if (drag && mbRsStarted) {
-    suppressEventClick = true;
-    suppressGridClick = true;
-    commitDragCtx?.();
-    setTimeout(() => {
-      suppressEventClick = false;
-      suppressGridClick = false;
-    }, 0);
-  }
-  cleanupResize();
+	if (drag && mbRsStarted) {
+		// The synthesized click can land on the button OR (if the pointer
+		// ended off the block) on the grid — suppress both paths.
+		suppressEventClick = true;
+		suppressGridClick = true;
+		commitDragCtx?.();
+		setTimeout(() => {
+			suppressEventClick = false;
+			suppressGridClick = false;
+		}, 0);
+	}
+	cleanupResize();
 }
 function onResizeCancel() {
-  if (drag && mbRsStarted) drag.cancel();
-  cleanupResize();
+	if (drag && mbRsStarted) drag.cancel();
+	cleanupResize();
 }
+// ── Auto-scroll to now ─────────────────────────────
 let gridEl;
 $effect(() => {
-  void dayMs;
-  const el = gridEl;
-  if (!el) return;
-  untrack(() => {
-    if (nowOffset >= 0) el.scrollTop = Math.max(0, nowOffset - 120);
-  });
+	void dayMs;
+	const el = gridEl;
+	if (!el) return;
+	untrack(() => {
+		if (nowOffset >= 0) el.scrollTop = Math.max(0, nowOffset - 120);
+	});
 });
 </script>
 
@@ -918,10 +947,16 @@ $effect(() => {
 	}
 
 	/* ─── Resize handles ─────────────────────────────── */
+	/* Resizing lives only on the centered grip column. The old full-width
+	   edge bands (24px of inward slop each) covered short events entirely —
+	   min block height is 24px, so any tap near an edge risked starting a
+	   resize. The grip is persistently visible on touch (hover:none below),
+	   so the smaller target stays discoverable; taps elsewhere open. */
 	.mb-ev-handle {
 		position: absolute;
-		left: 0;
-		right: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 56px;
 		height: 10px;
 		z-index: 2;
 		cursor: ns-resize;
@@ -958,6 +993,8 @@ $effect(() => {
 	.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; }
+	/* Finger on the grip column itself: brighten so the hit zone reads */
+	.mb-ev-handle:hover::after { opacity: 0.9; }
 	/* Touch devices have no hover — show the handles persistently. */
 	@media (hover: none) {
 		.mb-ev-handle::after { opacity: 0.55; }