@nomideusz/svelte-calendar 0.7.4 → 0.8.0

package/dist/views/mobile/MobileDay.svelte

@@ -5,271 +5,344 @@
   Large touch targets, swipe left/right to change day.
   Events positioned absolutely within hour lanes.
 -->
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { useCalendarContext } from '../shared/context.svelte.js';
-	import { createClock } from '../../core/clock.svelte.js';
-	import type { TimelineEvent, BlockedSlot } from '../../core/types.js';
-	import { DAY_MS, HOUR_MS, sod, isAllDay, isMultiDay, segmentForDay } from '../../core/time.js';
-	import type { DaySegment } from '../../core/time.js';
-	import { fmtH, fmtTime, getLabels } from '../../core/locale.js';
-
-	const L = $derived(getLabels());
-
-	interface Props {
-		height?: number | null;
-		events?: TimelineEvent[];
-		style?: string;
-		focusDate?: Date;
-		locale?: string;
-		oneventclick?: (event: TimelineEvent) => void;
-		oneventcreate?: (range: { start: Date; end: Date }) => void;
-		selectedEventId?: string | null;
-		readOnly?: boolean;
-		visibleHours?: [number, number];
-		[key: string]: unknown;
-	}
-
-	let {
-		height = null,
-		events = [],
-		style = '',
-		locale,
-		focusDate,
-		oneventclick,
-		oneventcreate,
-		selectedEventId = null,
-		readOnly = false,
-		visibleHours,
-	}: Props = $props();
-
-	// ── Context ────────────────────────────────────────
-	const ctx = useCalendarContext();
-	const viewState = $derived(ctx.viewState);
-	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 blockedSlots = $derived(ctx.blockedSlots);
-
-	const clock = createClock();
-
-	// ── 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 isPast = $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);
-	});
-
-	// ── 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: DaySegment[] = [];
-		for (const ev of events) {
-			if (!isAllDay(ev) && !isMultiDay(ev)) continue;
-			const seg = segmentForDay(ev, dayMs);
-			if (seg) segs.push(seg);
-		}
-		return segs;
-	});
-
-	// ── Positioned events ──────────────────────────────
-	interface PosEvent {
-		ev: TimelineEvent;
-		top: number;
-		height: number;
-		left: string;
-		width: string;
-		isCurrent: boolean;
-		isNext: boolean;
-		col: number;
-		totalCols: number;
-	}
-
-	const positionedEvents = $derived.by(() => {
-		const now = clock.tick;
-		const sorted = [...timedEvents];
-
-		// Find the next upcoming event today
-		let nextEventId: string | null = 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 => {
-			const sMs = Math.max(ev.start.getTime(), dayMs + startHour * HOUR_MS);
-			const eMs = Math.min(ev.end.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,
-				startMs: sMs,
-				endMs: eMs,
-				col: 0,
-				totalCols: 1,
-			};
-		});
-
-		// Assign columns for overlapping events
-		const par = infos.map((_, i) => i);
-		function find(i: number): number {
-			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<number, number[]>();
-		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: number[] = [];
-			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,
-			col: info.col,
-			totalCols: info.totalCols,
-		})) as PosEvent[];
-	});
-
-	// ── 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;
-	});
-
-	// ── Blocked slot check ─────────────────────────────
-	function isBlockedAt(hour: number): boolean {
-		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;
-		});
-	}
-
-	// ── Touch swipe navigation ─────────────────────────
-	let el: HTMLDivElement;
-	let touchStartX = 0;
-	let touchStartY = 0;
-	let swiping = false;
-	let swipeOffset = $state(0);
-	const SWIPE_THRESHOLD = 50;
-
-	function onTouchStart(e: TouchEvent) {
-		const t = e.touches[0];
-		touchStartX = t.clientX;
-		touchStartY = t.clientY;
-		swiping = true;
-		swipeOffset = 0;
-	}
-
-	function onTouchMove(e: TouchEvent) {
-		if (!swiping) return;
-		const t = e.touches[0];
-		const dx = t.clientX - touchStartX;
-		const dy = t.clientY - touchStartY;
-		// Only swipe if horizontal movement dominates
-		if (Math.abs(dy) > Math.abs(dx) * 0.8) { swiping = false; return; }
-		swipeOffset = dx;
-	}
-
-	function onTouchEnd() {
-		if (!swiping) { swipeOffset = 0; return; }
-		if (Math.abs(swipeOffset) > SWIPE_THRESHOLD) {
-			if (swipeOffset > 0) {
-				viewState?.prev();
-			} else {
-				viewState?.next();
-			}
-		}
-		swipeOffset = 0;
-		swiping = false;
-	}
-
-	// ── Click-to-create ────────────────────────────────
-	function handleGridClick(e: MouseEvent) {
-		if (!oneventcreate || readOnly || isDisabled) return;
-		if ((e.target as HTMLElement).closest('.mb-event')) return;
-		const grid = (e.currentTarget as HTMLElement);
-		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 * 60_000);
-		oneventcreate({ start, end });
-	}
-
-	// ── Auto-scroll to now ─────────────────────────────
-	let gridEl: HTMLDivElement;
-	onMount(() => {
-		if (nowOffset > 0 && gridEl) {
-			const scrollTarget = Math.max(0, nowOffset - 120);
-			gridEl.scrollTop = scrollTarget;
-		}
-	});
+<script lang="ts">import { onMount } 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());
+let {
+  height = null,
+  events = [],
+  style = "",
+  locale,
+  focusDate,
+  oneventclick,
+  oneventcreate,
+  selectedEventId = null,
+  readOnly = false,
+  visibleHours
+} = $props();
+const ctx = useCalendarContext();
+const viewState = $derived(ctx.viewState);
+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 blockedSlots = $derived(ctx.blockedSlots);
+const drag = $derived(ctx.drag);
+const commitDragCtx = $derived(ctx.commitDrag);
+const SNAP_MS = $derived(ctx.snapInterval * 6e4);
+const clock = createClock();
+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);
+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;
+  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())
+);
+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 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 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;
+});
+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;
+  });
+}
+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 onTouchEnd() {
+  if (!swiping) {
+    swipeOffset = 0;
+    return;
+  }
+  if (Math.abs(swipeOffset) > SWIPE_THRESHOLD) {
+    if (swipeOffset > 0) {
+      viewState?.prev();
+    } else {
+      viewState?.next();
+    }
+  }
+  swipeOffset = 0;
+  swiping = false;
+}
+function handleGridClick(e) {
+  if (suppressGridClick) {
+    suppressGridClick = false;
+    return;
+  }
+  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 CREATE_THRESHOLD = 4;
+let suppressGridClick = false;
+let mbCreateStartY = 0;
+let mbCreateAnchorMs = 0;
+let mbCreateStarted = false;
+function gridTimeMs(clientY) {
+  const rect = gridEl.getBoundingClientRect();
+  const y = clientY - rect.top + gridEl.scrollTop;
+  return dayMs + (startHour + y / HOUR_HEIGHT) * HOUR_MS;
+}
+function clampToDay(ms) {
+  return Math.max(dayMs + startHour * HOUR_MS, Math.min(dayMs + endHour * HOUR_MS, ms));
+}
+function onGridPointerDown(e) {
+  if (e.button !== 0 || !drag || !oneventcreate || readOnly || isDisabled) return;
+  if (e.target.closest(".mb-event")) return;
+  mbCreateStartY = e.clientY;
+  mbCreateAnchorMs = gridTimeMs(e.clientY);
+  mbCreateStarted = false;
+  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 (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));
+  }
+  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() {
+  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();
+}
+function onGridCreateCancel() {
+  if (drag && mbCreateStarted) drag.cancel();
+  cleanupGridCreate();
+}
+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 });
+}
+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);
+  }
+  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() {
+  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();
+}
+function onResizeCancel() {
+  if (drag && mbRsStarted) drag.cancel();
+  cleanupResize();
+}
+let gridEl;
+onMount(() => {
+  if (nowOffset > 0 && gridEl) {
+    const scrollTarget = Math.max(0, nowOffset - 120);
+    gridEl.scrollTop = scrollTarget;
+  }
+});
 </script>
 
 <div
@@ -311,6 +384,7 @@
 		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"
@@ -356,17 +430,19 @@
 					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(); oneventclick?.(p.ev); }}
+					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>
@@ -384,14 +460,38 @@
 								{/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 !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}
 		</div>
 	</div>
 </div>
@@ -627,6 +727,62 @@
 		opacity: 0.65;
 		border: 1px dashed color-mix(in srgb, var(--ev-color) 35%, transparent);
 	}
+	.mb-event--resizing {
+		z-index: 50;
+		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+		cursor: ns-resize;
+	}
+
+	/* ─── Resize handles ─────────────────────────────── */
+	.mb-ev-handle {
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 10px;
+		z-index: 2;
+		cursor: ns-resize;
+		touch-action: none;
+	}
+	.mb-ev-handle--start { top: 0; }
+	.mb-ev-handle--end { bottom: 0; }
+	.mb-ev-handle::after {
+		content: '';
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 24px;
+		height: 3px;
+		border-radius: 2px;
+		background: var(--ev-color);
+		opacity: 0;
+		transition: opacity 120ms;
+	}
+	.mb-ev-handle--start::after { top: 2px; }
+	.mb-ev-handle--end::after { bottom: 2px; }
+	.mb-event:hover .mb-ev-handle::after,
+	.mb-event--resizing .mb-ev-handle::after,
+	.mb-event--selected .mb-ev-handle::after { opacity: 0.55; }
+
+	/* ─── Drag-to-create ghost ───────────────────────── */
+	.mb-create-ghost {
+		position: absolute;
+		left: 40px;
+		right: 4px;
+		z-index: 40;
+		border-radius: 8px;
+		background: color-mix(in srgb, var(--dt-accent, #2563eb) 12%, transparent);
+		border: 1px dashed color-mix(in srgb, var(--dt-accent, #2563eb) 55%, transparent);
+		display: flex;
+		align-items: flex-start;
+		overflow: hidden;
+		pointer-events: none;
+	}
+	.mb-create-ghost-time {
+		font: 600 10px/1 var(--dt-mono, ui-monospace, monospace);
+		color: var(--dt-accent, #2563eb);
+		padding: 4px 8px;
+		white-space: nowrap;
+	}
 
 	.mb-ev-stripe {
 		width: 4px;