@acms-subir/core 0.3.3-next.20260929113209 → 0.3.4

package/src/components/calendar/MiniMonth.tsx

@@ -0,0 +1,54 @@
+import { addMonths, monthWeeks, type Iso } from '../../lib/calendar/grid';
+
+// A small month picker that shows where things already are: one dot per
+// calendar color on busy days (max 3), today in accent, the chosen day
+// filled. Used by quick add, the New event dialog and the event editor.
+interface Props {
+  month: string; // YYYY-MM
+  selected: Iso;
+  today: Iso;
+  weekStart: 0 | 1;
+  locale: string;
+  dots?: Record<Iso, string[]>;
+  onPick: (day: Iso) => void;
+  onMonth: (month: string) => void;
+}
+
+const utc = (d: Iso) => new Date(Date.UTC(+d.slice(0, 4), +d.slice(5, 7) - 1, +d.slice(8, 10)));
+
+export function weekdayLetters(locale: string, weekStart: 0 | 1, style: 'narrow' | 'short' = 'narrow'): string[] {
+  const f = new Intl.DateTimeFormat(locale, { weekday: style, timeZone: 'UTC' });
+  // 2023-01-01 was a Sunday
+  return Array.from({ length: 7 }, (_, i) => f.format(new Date(Date.UTC(2023, 0, 1 + ((i + weekStart) % 7)))));
+}
+
+export default function MiniMonth({ month, selected, today, weekStart, locale, dots = {}, onPick, onMonth }: Props) {
+  const weeks = monthWeeks(month, weekStart);
+  const title = new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' }).format(utc(`${month}-01`));
+  const label = new Intl.DateTimeFormat(locale, { weekday: 'long', month: 'long', day: 'numeric', timeZone: 'UTC' });
+  return (
+    <div className="mini-month">
+      <div className="mini-month-head">
+        <b>{title}</b>
+        <span>
+          <button type="button" className="mini-nav" aria-label="Previous month" onClick={() => onMonth(addMonths(month, -1))}>‹</button>
+          <button type="button" className="mini-nav" aria-label="Next month" onClick={() => onMonth(addMonths(month, 1))}>›</button>
+        </span>
+      </div>
+      <div className="mini-month-grid" role="grid" aria-label={title}>
+        {weekdayLetters(locale, weekStart).map((d, i) => <span key={i} className="mini-dow" aria-hidden="true">{d}</span>)}
+        {weeks.flat().map((d) => {
+          const colors = dots[d] ?? [];
+          const cls = ['mini-day', d.slice(0, 7) !== month ? 'out' : '', d === today ? 'today' : '', d === selected ? 'sel' : ''].filter(Boolean).join(' ');
+          return (
+            <button key={d} type="button" className={cls} onClick={() => onPick(d)} aria-pressed={d === selected}
+              aria-label={`${label.format(utc(d))}${colors.length ? `, ${colors.length} event${colors.length === 1 ? '' : 's'}` : ''}`}>
+              {+d.slice(8)}
+              {colors.length > 0 && <span className="mini-dots">{colors.slice(0, 3).map((c, i) => <i key={i} style={{ background: c }} />)}</span>}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/calendar/NewEventDialog.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import QuickAdd, { type QuickCalendar } from './QuickAdd';
+import '../../styles/schedule.css';
+
+// "New event" anywhere outside the Schedule grid (the List view, empty
+// states): any element with [data-new-event] — or ?new=1 in the URL — opens
+// the quick-add dialog with its mini month, so you see where the event lands.
+interface Props {
+  calendars: QuickCalendar[];
+  defaultCalendarId: string;
+  weekStart: 0 | 1;
+  locale: string;
+  today: string;
+  day: string; // suggested date
+  open?: boolean;
+}
+
+export default function NewEventDialog(props: Props) {
+  const [open, setOpen] = useState(Boolean(props.open));
+  useEffect(() => {
+    const onClick = (e: MouseEvent) => {
+      if ((e.target as HTMLElement).closest('[data-new-event]')) { e.preventDefault(); setOpen(true); }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      const t = e.target as HTMLElement;
+      if ((e.key === 'n' || e.key === 'N') && !e.metaKey && !e.ctrlKey && !t.closest('input, textarea, select, [contenteditable], dialog[open]')) { e.preventDefault(); setOpen(true); }
+    };
+    document.addEventListener('click', onClick);
+    addEventListener('keydown', onKey);
+    return () => { document.removeEventListener('click', onClick); removeEventListener('keydown', onKey); };
+  }, []);
+  if (!open) return null;
+  return (
+    <QuickAdd start={{ day: props.day }} mode="dialog" calendars={props.calendars} defaultCalendarId={props.defaultCalendarId}
+      weekStart={props.weekStart} locale={props.locale} today={props.today}
+      onClose={() => setOpen(false)}
+      onSaved={(_id, status) => {
+        const u = new URL(location.href);
+        u.searchParams.delete('new');
+        u.searchParams.set('notice', status === 'published' ? 'Event published.' : 'Draft saved — publish it when it’s ready.');
+        location.href = u.toString();
+      }} />
+  );
+}

package/src/components/calendar/QuickAdd.tsx

@@ -0,0 +1,263 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, type FormEvent, type KeyboardEvent } from 'react';
+import { actions } from 'astro:actions';
+import { addDays, diffDays, monthOf, monthWeeks, type Iso } from '../../lib/calendar/grid';
+import { buildRepeat, parseRepeat, weekdayOf, WEEKDAY_CODES } from '../../lib/calendar/rrule';
+import type { BoardItem } from '../../lib/calendar/board';
+import MiniMonth from './MiniMonth';
+import { fetchRoomStatus, NO_HOLD } from './RoomHolds';
+
+// Quick add: the small form behind "click a day" and "New event". As a
+// popover it's pinned to the clicked day; as a dialog (New event, N key) it
+// also shows a mini month with the busy days, plus what else is on the
+// chosen day — so you can see where the event lands before saving.
+
+export interface QuickCalendar { id: string; name: string; color: string }
+
+export interface QuickStart {
+  day: Iso;
+  endDay?: Iso;
+  allDay?: boolean;
+  startMin?: number; // week view: the clicked half hour
+}
+
+interface Props {
+  start: QuickStart;
+  mode: 'popover' | 'dialog';
+  anchor?: DOMRect | null;
+  calendars: QuickCalendar[];
+  defaultCalendarId: string;
+  weekStart: 0 | 1;
+  locale: string;
+  today: Iso;
+  // board items (popover/dialog on the Schedule); fetched when absent
+  items?: BoardItem[];
+  onClose: () => void;
+  onSaved: (id: string, status: string) => void;
+  // live preview on the grid while typing
+  onDraft?: (draft: { title: string; day: Iso; endDay: Iso; allDay: boolean; startMin: number; endMin: number; calendarId: string } | null) => void;
+}
+
+const pad = (n: number) => String(n).padStart(2, '0');
+const toTime = (min: number) => `${pad(Math.floor(min / 60) % 24)}:${pad(min % 60)}`;
+const fromTime = (t: string) => (/^\d{2}:\d{2}$/.test(t) ? +t.slice(0, 2) * 60 + +t.slice(3) : 0);
+const utc = (d: Iso) => new Date(Date.UTC(+d.slice(0, 4), +d.slice(5, 7) - 1, +d.slice(8, 10)));
+const ORD = ['', 'first', 'second', 'third', 'fourth', 'last'];
+const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform);
+
+type RepeatKey = 'none' | 'daily' | 'weekly' | 'monthly-day' | 'monthly-weekday' | 'yearly';
+
+function repeatRule(key: RepeatKey, start: Iso): string {
+  const base = parseRepeat('', start);
+  switch (key) {
+    case 'daily': return buildRepeat({ ...base, freq: 'DAILY' }, start);
+    case 'weekly': return buildRepeat({ ...base, freq: 'WEEKLY', byday: [WEEKDAY_CODES[weekdayOf(start).dow]] }, start);
+    case 'monthly-day': return buildRepeat({ ...base, freq: 'MONTHLY', monthly: 'day' }, start);
+    case 'monthly-weekday': return buildRepeat({ ...base, freq: 'MONTHLY', monthly: 'weekday' }, start);
+    case 'yearly': return buildRepeat({ ...base, freq: 'YEARLY' }, start);
+    default: return '';
+  }
+}
+
+export default function QuickAdd(props: Props) {
+  const { start, mode, calendars, locale, weekStart, today, onClose, onSaved, onDraft } = props;
+  const timed = start.startMin !== undefined;
+  const [title, setTitle] = useState('');
+  const [allDay, setAllDay] = useState(start.allDay ?? (start.endDay !== undefined && start.endDay !== start.day));
+  const [day, setDay] = useState(start.day);
+  const [endDay, setEndDay] = useState(start.endDay ?? start.day);
+  const [from, setFrom] = useState(toTime(timed ? start.startMin! : 600));
+  const [to, setTo] = useState(toTime((timed ? start.startMin! : 600) + 60));
+  const [calendarId, setCalendarId] = useState(calendars.some((c) => c.id === props.defaultCalendarId) ? props.defaultCalendarId : '');
+  const [repeat, setRepeat] = useState<RepeatKey>('none');
+  const [place, setPlace] = useState('');
+  const [roomIds, setRoomIds] = useState<string[]>([]);
+  const [rooms, setRooms] = useState<{ id: string; name: string; busy: number }[]>([]);
+  const [busy, setBusy] = useState<'' | 'draft' | 'publish' | 'more'>('');
+  const [error, setError] = useState('');
+  const [miniMonth, setMiniMonth] = useState(monthOf(start.day));
+  const [fetched, setFetched] = useState<BoardItem[] | null>(null);
+  const box = useRef<HTMLFormElement>(null);
+  const titleRef = useRef<HTMLInputElement>(null);
+  const [pos, setPos] = useState<{ left: number; top: number } | null>(null);
+
+  // dialog outside the Schedule: load the mini month's events for the dots
+  useEffect(() => {
+    if (mode !== 'dialog' || props.items) return;
+    const weeks = monthWeeks(miniMonth, weekStart);
+    let live = true;
+    actions.calendar.range({ from: weeks[0][0], to: weeks[weeks.length - 1][6] }).then((r) => { if (live && r.data) setFetched(r.data.items); });
+    return () => { live = false; };
+  }, [mode, miniMonth, weekStart, props.items]);
+  const items = props.items ?? fetched ?? [];
+
+  useEffect(() => { titleRef.current?.focus(); }, []);
+
+  // bookable rooms with free/booked status at the chosen time (none = row hidden)
+  useEffect(() => {
+    const t = setTimeout(() => {
+      const s = allDay ? day : `${day}T${from}`;
+      const e = allDay ? (endDay < day ? day : endDay) : `${endDay < day ? day : endDay}T${to}`;
+      fetchRoomStatus({ eventId: '', title, start: s, end: e, allDay, timezone: '', rrule: repeatRule(repeat, day), exdates: [] }, NO_HOLD)
+        .then((d) => setRooms((d?.rooms ?? []).map((r) => ({ id: r.id, name: r.name, busy: r.conflicts.length }))))
+        .catch(() => {});
+    }, 350);
+    return () => clearTimeout(t);
+  }, [day, endDay, from, to, allDay, repeat]);
+
+  // keep the end after the start when the start moves
+  const moveDay = (d: Iso) => { const len = diffDays(day, endDay); setDay(d); setEndDay(addDays(d, Math.max(0, len))); setMiniMonth(monthOf(d)); };
+  const moveFrom = (t: string) => { const len = fromTime(to) - fromTime(from); setFrom(t); setTo(toTime(Math.min(fromTime(t) + Math.max(15, len), 23 * 60 + 59))); };
+
+  const startMin = allDay ? 0 : fromTime(from);
+  const endMin = allDay ? 1440 : fromTime(to);
+  useEffect(() => {
+    onDraft?.({ title: title || 'New event', day, endDay: endDay < day ? day : endDay, allDay, startMin, endMin, calendarId });
+  }, [title, day, endDay, allDay, startMin, endMin, calendarId]);
+  useEffect(() => () => onDraft?.(null), []);
+
+  // popover placement: beside the clicked cell, clamped to the viewport
+  useLayoutEffect(() => {
+    if (mode !== 'popover' || !box.current) return;
+    if (window.matchMedia('(max-width: 640px)').matches) { setPos(null); return; }
+    const a = props.anchor;
+    const w = box.current.offsetWidth, h = box.current.offsetHeight;
+    if (!a) { setPos({ left: (innerWidth - w) / 2, top: Math.max(16, (innerHeight - h) / 2) }); return; }
+    let left = a.right + 8;
+    if (left + w > innerWidth - 12) left = a.left - w - 8;
+    if (left < 12) left = Math.min(innerWidth - w - 12, Math.max(12, a.left));
+    const top = Math.min(Math.max(12, a.top - 20), innerHeight - h - 12);
+    setPos({ left, top });
+  }, [mode, props.anchor]);
+
+  const dots = useMemo(() => {
+    const out: Record<Iso, string[]> = {};
+    for (const it of items) {
+      for (let d = it.startDay; d <= it.endDay; d = addDays(d, 1)) {
+        const list = (out[d] ??= []);
+        if (!list.includes(it.color)) list.push(it.color);
+      }
+    }
+    return out;
+  }, [items]);
+  const sameDay = items.filter((it) => it.startDay <= day && it.endDay >= day);
+
+  const fmtDay = (d: Iso) => new Intl.DateTimeFormat(locale, { weekday: 'long', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(utc(d));
+  const wd = weekdayOf(day);
+  const weekdayName = new Intl.DateTimeFormat(locale, { weekday: 'long', timeZone: 'UTC' }).format(utc(day));
+  const monthDay = new Intl.DateTimeFormat(locale, { month: 'long', day: 'numeric', timeZone: 'UTC' }).format(utc(day));
+  const repeatOptions: [RepeatKey, string][] = [
+    ['none', 'Doesn’t repeat'],
+    ['daily', 'Every day'],
+    ['weekly', `Weekly on ${weekdayName}`],
+    ['monthly-day', `Monthly on day ${wd.day}`],
+    ['monthly-weekday', `Monthly on the ${ORD[wd.nth >= 5 ? 5 : wd.nth]} ${weekdayName}`],
+    ['yearly', `Yearly on ${monthDay}`],
+  ];
+
+  async function save(kind: 'draft' | 'publish' | 'more') {
+    setBusy(kind);
+    setError('');
+    const s = allDay ? day : `${day}T${from}`;
+    const e = allDay ? (endDay < day ? day : endDay) : `${endDay < day ? day : endDay}T${to}`;
+    const r = await actions.events.quickCreate({
+      title: title.trim() || 'Untitled event', start: s, end: e, allDay, calendarId,
+      rrule: repeatRule(repeat, day), location: place || rooms.filter((r) => roomIds.includes(r.id)).map((r) => r.name).join(' & '), publish: kind === 'publish', roomIds,
+    });
+    if (r.error || !r.data) { setBusy(''); setError(r.error?.message ?? 'Couldn’t save the event.'); return; }
+    if (kind === 'more') { window.location.href = `/admin/calendar/events/${r.data.id}`; return; }
+    onSaved(r.data.id, r.data.status);
+  }
+
+  const submit = (e: FormEvent) => { e.preventDefault(); void save('draft'); };
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') { e.stopPropagation(); onClose(); }
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); void save('publish'); }
+  };
+
+  const form = (
+    <form ref={box} className={`qa qa-${mode}`} onSubmit={submit} onKeyDown={onKey}
+      style={mode === 'popover' && pos ? { left: pos.left, top: pos.top } : undefined} role="dialog" aria-label="New event">
+      <div className="qa-main">
+        <input ref={titleRef} className="qa-title" placeholder="Event title" value={title} maxLength={300} onChange={(e) => setTitle(e.target.value)} aria-label="Title" />
+        <div className="qa-row top">
+          <span className="qa-lab">When</span>
+          <div className="qa-when">
+            <div className="qa-line">
+              <input type="date" value={day} required onChange={(e) => e.target.value && moveDay(e.target.value)} aria-label="Start date" />
+              {(allDay || endDay !== day) && <><span className="qa-dash">–</span><input type="date" value={endDay} min={day} onChange={(e) => e.target.value && setEndDay(e.target.value)} aria-label="End date" /></>}
+            </div>
+            {!allDay && (
+              <div className="qa-line">
+                <input type="time" value={from} step={300} onChange={(e) => moveFrom(e.target.value)} aria-label="Start time" />
+                <span className="qa-dash">–</span>
+                <input type="time" value={to} step={300} onChange={(e) => setTo(e.target.value)} aria-label="End time" />
+              </div>
+            )}
+            <label className="qa-check"><input type="checkbox" checked={allDay} onChange={(e) => setAllDay(e.target.checked)} /> All day</label>
+          </div>
+        </div>
+        <div className="qa-row">
+          <span className="qa-lab">Calendar</span>
+          <span className="qa-cal">
+            <i style={{ background: calendars.find((c) => c.id === calendarId)?.color ?? 'transparent' }} className={calendarId ? '' : 'none'} />
+            <select value={calendarId} onChange={(e) => { if (e.target.value === '__new') { window.location.href = '/admin/calendar/settings#calendars'; return; } setCalendarId(e.target.value); }} aria-label="Calendar">
+              <option value="">No calendar</option>
+              {calendars.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
+              <option value="__new">+ New calendar…</option>
+            </select>
+          </span>
+        </div>
+        <div className="qa-row">
+          <span className="qa-lab">Repeats</span>
+          <select value={repeat} onChange={(e) => setRepeat(e.target.value as RepeatKey)} aria-label="Repeats">
+            {repeatOptions.map(([k, l]) => <option key={k} value={k}>{l}</option>)}
+          </select>
+        </div>
+        <div className="qa-row">
+          <span className="qa-lab">Where</span>
+          <input className="qa-grow" placeholder="Add a location" value={place} maxLength={300} onChange={(e) => setPlace(e.target.value)} aria-label="Location" />
+        </div>
+        {rooms.length > 0 && (
+          <div className="qa-row top">
+            <span className="qa-lab">Rooms</span>
+            <div className="qa-rooms">
+              {rooms.map((r) => (
+                <label key={r.id} className="qa-check">
+                  <input type="checkbox" checked={roomIds.includes(r.id)} onChange={(e) => setRoomIds(e.target.checked ? [...roomIds, r.id] : roomIds.filter((x) => x !== r.id))} />
+                  {r.name} <em className={r.busy ? 'busy' : 'free'}>{r.busy ? `${r.busy} booking${r.busy === 1 ? '' : 's'}` : 'free'}</em>
+                </label>
+              ))}
+              {roomIds.some((id) => rooms.find((r) => r.id === id)?.busy) && <small className="qa-free">Already booked. Use More options to keep or cancel those bookings.</small>}
+            </div>
+          </div>
+        )}
+        {error && <p className="qa-error" role="alert">{error}</p>}
+        <div className="qa-actions">
+          <button type="button" className="btn ghost qa-more" disabled={!!busy} onClick={() => save('more')}>More options</button>
+          <button type="submit" className="btn" disabled={!!busy}>{busy === 'draft' ? 'Saving…' : 'Save draft'} <kbd>↵</kbd></button>
+          <button type="button" className="btn primary" disabled={!!busy} onClick={() => save('publish')} title={`${isMac ? '⌘' : 'Ctrl'} Enter`}>{busy === 'publish' ? 'Publishing…' : 'Publish'}</button>
+        </div>
+      </div>
+      {mode === 'dialog' && (
+        <aside className="qa-side">
+          <MiniMonth month={miniMonth} selected={day} today={today} weekStart={weekStart} locale={locale} dots={dots} onPick={moveDay} onMonth={setMiniMonth} />
+          <div className="qa-also">
+            <b>Also on {fmtDay(day)}</b>
+            {sameDay.length === 0 ? <span className="qa-free">Nothing scheduled.</span> : (
+              <ul>
+                {sameDay.slice(0, 5).map((it) => <li key={it.key}><i style={{ background: it.color }} />{it.allDay ? 'All day' : it.range} · {it.title}</li>)}
+                {sameDay.length > 5 && <li className="qa-free">+{sameDay.length - 5} more</li>}
+              </ul>
+            )}
+          </div>
+        </aside>
+      )}
+    </form>
+  );
+
+  return (
+    <div className={`qa-layer qa-layer-${mode}`} onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
+      {form}
+    </div>
+  );
+}

package/src/components/calendar/RoomHolds.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useRef, useState } from 'react';
+import { actions } from 'astro:actions';
+
+// Event editor → Rooms: tick the bookable rooms/people this event uses and
+// they can't be booked while it happens (± setup/cleanup) or all day. Each
+// room shows whether it's free at the event's time; overlapping bookings show
+// right here, with Keep (share the room) or Cancel and email. The same check
+// runs again when you publish (RoomConflictDialog).
+
+export interface RoomHoldValue {
+  resourceIds: string[];
+  span: 'event' | 'day';
+  before: number;
+  after: number;
+  whileDraft: boolean;
+  keep: string[];
+}
+
+export interface RoomTimes {
+  eventId: string;
+  title: string;
+  start: string;
+  end: string;
+  allDay: boolean;
+  timezone: string;
+  rrule: string;
+  exdates: string[];
+}
+
+interface Conflict { id: string; name: string; when: string; status: string; block: boolean }
+interface RoomRow { id: string; name: string; kind: string; capacity: number | null; conflicts: Conflict[]; datesWithBookings: number; dates: number }
+interface Status { rooms: RoomRow[]; holds: string }
+
+export const NO_HOLD: RoomHoldValue = { resourceIds: [], span: 'event', before: 0, after: 0, whileDraft: false, keep: [] };
+
+export async function fetchRoomStatus(times: RoomTimes, hold: RoomHoldValue): Promise<Status | null> {
+  if (!times.start) return null;
+  const r = await actions.events.roomStatus({ ...times, roomHold: hold });
+  return r.data ?? null;
+}
+
+interface Props {
+  times: RoomTimes;
+  hold: RoomHoldValue;
+  status: string; // event status
+  locationName: string;
+  onChange: (hold: RoomHoldValue) => void;
+  onLocation: (name: string) => void;
+}
+
+export default function RoomHolds({ times, hold, status, locationName, onChange, onLocation }: Props) {
+  const [data, setData] = useState<Status | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [cancelFor, setCancelFor] = useState<string[] | null>(null);
+  const [message, setMessage] = useState('');
+  const [note, setNote] = useState('');
+  const seq = useRef(0);
+  const key = JSON.stringify([times, hold]);
+
+  useEffect(() => {
+    const n = ++seq.current;
+    const t = setTimeout(() => { fetchRoomStatus(times, hold).then((d) => { if (n === seq.current) setData(d); }).catch(() => {}); }, 300);
+    return () => clearTimeout(t);
+  }, [key]);
+
+  // no bookable rooms (or bookings off): the section stays out of the way
+  if (!data || data.rooms.length === 0) return null;
+
+  const selected = new Set(hold.resourceIds);
+  const toggle = (room: RoomRow) => {
+    const ids = selected.has(room.id) ? hold.resourceIds.filter((x) => x !== room.id) : [...hold.resourceIds, room.id];
+    onChange({ ...hold, resourceIds: ids });
+    // fill the place when it's empty, or still exactly what the rooms filled
+    // in before — never overwrite something typed by hand
+    const names = (list: string[]) => data.rooms.filter((r) => list.includes(r.id)).map((r) => r.name).join(' & ');
+    const auto = !locationName.trim() || locationName === names(hold.resourceIds);
+    if (auto) onLocation(names(ids));
+  };
+  const label = (r: RoomRow) => {
+    if (!r.conflicts.length) return { text: 'Free', cls: 'free' };
+    if (r.dates > 1) return { text: `Booked on ${r.datesWithBookings} of ${r.dates} dates`, cls: 'busy' };
+    return { text: `${r.conflicts.length} booking${r.conflicts.length === 1 ? '' : 's'}`, cls: 'busy' };
+  };
+  const conflicted = data.rooms.filter((r) => selected.has(r.id) && r.conflicts.length);
+  const draft = status === 'draft';
+
+  async function cancelBookings(ids: string[]) {
+    setBusy(true);
+    const r = await actions.events.cancelBookingsForEvent({ ids, message });
+    setBusy(false);
+    setCancelFor(null);
+    setMessage('');
+    setNote(r.error ? r.error.message : `Cancelled ${r.data?.cancelled ?? 0} booking${r.data?.cancelled === 1 ? '' : 's'} and emailed the guests.`);
+    setData(await fetchRoomStatus(times, hold));
+  }
+
+  return (
+    <section className="pe-sb-section pe-ev rh">
+      <h3 className="pe-sb-title">Rooms</h3>
+      <p className="pe-ev-note">Rooms and people this event uses can't be booked while it happens.</p>
+      <div className="rh-list">
+        {data.rooms.map((r) => {
+          const l = label(r);
+          return (
+            <label key={r.id} className={`rh-room${selected.has(r.id) ? ' on' : ''}`}>
+              <input type="checkbox" checked={selected.has(r.id)} onChange={() => toggle(r)} />
+              <span className="rh-name"><b>{r.name}</b><small>{r.kind}{r.capacity ? ` · up to ${r.capacity}` : ''}</small></span>
+              <span className={`rh-st ${l.cls}`}>{l.text}</span>
+            </label>
+          );
+        })}
+      </div>
+
+      {hold.resourceIds.length > 0 && (
+        <>
+          <div className="rh-span" role="radiogroup" aria-label="How long to hold">
+            <button type="button" aria-pressed={hold.span === 'event'} onClick={() => onChange({ ...hold, span: 'event' })}>During the event</button>
+            <button type="button" aria-pressed={hold.span === 'day'} onClick={() => onChange({ ...hold, span: 'day' })}>Whole day</button>
+          </div>
+          {hold.span === 'event' && (
+            <div className="rh-buffers">
+              <label>Setup <input type="number" min={0} max={1440} step={15} value={hold.before} onChange={(e) => onChange({ ...hold, before: Math.max(0, Math.min(1440, Number(e.target.value) || 0)) })} /> min before</label>
+              <label>Cleanup <input type="number" min={0} max={1440} step={15} value={hold.after} onChange={(e) => onChange({ ...hold, after: Math.max(0, Math.min(1440, Number(e.target.value) || 0)) })} /> min after</label>
+            </div>
+          )}
+          {draft && (
+            <label className="pe-switch-row">
+              <span><b>Hold now</b><small>{hold.whileDraft ? 'Held while this is a draft, so nobody books it while you plan.' : 'Not held yet: rooms are held once you publish or schedule.'}</small></span>
+              <input type="checkbox" role="switch" className="pe-switch" checked={hold.whileDraft} onChange={(e) => onChange({ ...hold, whileDraft: e.target.checked })} />
+            </label>
+          )}
+          {conflicted.map((r) => (
+            <div key={r.id} className="rh-conflict" role="status">
+              <b>{r.name} already has {r.conflicts.length === 1 ? 'a booking' : `${r.conflicts.length} bookings`}</b>
+              {r.conflicts.slice(0, 5).map((c) => (
+                <div key={c.id} className="rh-bk"><span>{c.name}</span><small>{c.when}{c.status === 'pending' ? ' · needs approval' : ''}</small></div>
+              ))}
+              {r.conflicts.length > 5 && <small className="rh-more">+{r.conflicts.length - 5} more</small>}
+              {cancelFor?.join() === r.conflicts.map((c) => c.id).join() ? (
+                <div className="rh-cancel">
+                  <textarea rows={3} placeholder="Message to the guests (optional): we need the hall for the Fall Festival — sorry! Please pick another time." value={message} onChange={(e) => setMessage(e.target.value)} />
+                  <div className="rh-acts">
+                    <button type="button" className="pe-btn ghost sm" onClick={() => setCancelFor(null)}>Back</button>
+                    <button type="button" className="pe-btn sm danger" disabled={busy} onClick={() => cancelBookings(r.conflicts.map((c) => c.id))}>{busy ? 'Cancelling…' : 'Cancel and email'}</button>
+                  </div>
+                </div>
+              ) : (
+                <div className="rh-acts">
+                  <button type="button" className="pe-btn sm" onClick={() => onChange({ ...hold, keep: [...new Set([...hold.keep, ...r.conflicts.map((c) => c.id)])] })}>Keep, share the room</button>
+                  <button type="button" className="pe-btn sm" onClick={() => setCancelFor(r.conflicts.map((c) => c.id))}>Cancel and email…</button>
+                </div>
+              )}
+            </div>
+          ))}
+          {note && <p className="pe-ev-note rh-done">{note}</p>}
+          {data.holds && <p className="pe-ev-note">{data.holds}{draft && !hold.whileDraft ? ' once published.' : '.'}</p>}
+        </>
+      )}
+    </section>
+  );
+}
+
+/** Publish-time check: overlapping bookings for the rooms this event holds. */
+export function RoomConflictDialog({ rooms, onCancel, onConfirm }: {
+  rooms: RoomRow[];
+  onCancel: () => void;
+  onConfirm: (choice: { keep: string[]; cancel: string[]; message: string }) => Promise<void>;
+}) {
+  const all = rooms.flatMap((r) => r.conflicts.map((c) => ({ ...c, room: r.name })));
+  const [choice, setChoice] = useState<Record<string, 'keep' | 'cancel'>>(() => Object.fromEntries(all.map((c) => [c.id, 'keep'])));
+  const [message, setMessage] = useState('');
+  const [busy, setBusy] = useState(false);
+  const dates = rooms.find((r) => r.dates > 1);
+  const cancelling = Object.values(choice).some((v) => v === 'cancel');
+  return (
+    <div className="rh-layer" onMouseDown={(e) => { if (e.target === e.currentTarget) onCancel(); }}>
+      <div className="rh-dialog" role="alertdialog" aria-label="Rooms already booked">
+        <b className="rh-title">Some rooms are already booked</b>
+        <p className="rh-sub">{all.length} booking{all.length === 1 ? '' : 's'} overlap{all.length === 1 ? 's' : ''} this event{dates ? ` (on ${rooms.reduce((n, r) => n + r.datesWithBookings, 0)} of ${dates.dates} dates)` : ''}. Choose what happens to each.</p>
+        <div className="rh-rows">
+          {all.map((c) => (
+            <div key={c.id} className="rh-row">
+              <span><b>{c.name} · {c.room}</b><small>{c.when}</small></span>
+              <select value={choice[c.id]} onChange={(e) => setChoice({ ...choice, [c.id]: e.target.value as 'keep' | 'cancel' })} aria-label={`What happens to ${c.name}`}>
+                <option value="keep">Keep (share the room)</option>
+                <option value="cancel">{c.block ? 'Remove the block' : 'Cancel and email'}</option>
+              </select>
+            </div>
+          ))}
+        </div>
+        {cancelling && <textarea rows={3} className="rh-msg" placeholder="Message to the guests (optional)" value={message} onChange={(e) => setMessage(e.target.value)} />}
+        <div className="rh-acts end">
+          <button type="button" className="pe-btn ghost" onClick={onCancel}>Back to editing</button>
+          <button type="button" className="pe-btn primary" disabled={busy} onClick={async () => {
+            setBusy(true);
+            await onConfirm({ keep: all.filter((c) => choice[c.id] === 'keep').map((c) => c.id), cancel: all.filter((c) => choice[c.id] === 'cancel').map((c) => c.id), message });
+            setBusy(false);
+          }}>{busy ? 'Working…' : 'Continue'}</button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/calendar/WhereItLands.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+import { actions } from 'astro:actions';
+import { addDays, monthOf, monthWeeks, type Iso } from '../../lib/calendar/grid';
+import type { BoardItem } from '../../lib/calendar/board';
+import MiniMonth from './MiniMonth';
+import '../../styles/schedule.css';
+
+// Event editor → When: a mini month with the busy days marked, so you can
+// see where this event lands next to everything else. Picking a day moves
+// the event's date (the time stays).
+interface Props {
+  date: Iso; // the event's start day
+  eventId: string;
+  onPick: (day: Iso) => void;
+}
+
+export default function WhereItLands({ date, eventId, onPick }: Props) {
+  const [month, setMonth] = useState(monthOf(date));
+  const [data, setData] = useState<{ items: BoardItem[]; weekStart: 0 | 1; today: Iso } | null>(null);
+  const locale = typeof document !== 'undefined' ? document.documentElement.lang || 'en' : 'en';
+
+  useEffect(() => { setMonth(monthOf(date)); }, [date]);
+  useEffect(() => {
+    let live = true;
+    // a Sunday-first grid covers both week starts' first and last rows
+    const weeks = monthWeeks(month, 0);
+    actions.calendar.range({ from: addDays(weeks[0][0], -1), to: addDays(weeks[weeks.length - 1][6], 1) }).then((r) => {
+      if (live && r.data) setData({ items: r.data.items, weekStart: r.data.weekStart, today: r.data.today });
+    });
+    return () => { live = false; };
+  }, [month]);
+
+  const others = (data?.items ?? []).filter((it) => it.id !== eventId);
+  const dots: Record<Iso, string[]> = {};
+  for (const it of others) {
+    for (let d = it.startDay; d <= it.endDay; d = addDays(d, 1)) {
+      const list = (dots[d] ??= []);
+      if (!list.includes(it.color)) list.push(it.color);
+    }
+  }
+  const same = others.filter((it) => it.startDay <= date && it.endDay >= date);
+  return (
+    <div className="lands">
+      <MiniMonth month={month} selected={date} today={data?.today ?? date} weekStart={data?.weekStart ?? 0} locale={locale}
+        dots={dots} onPick={onPick} onMonth={setMonth} />
+      <p className="lands-also">
+        {same.length === 0 ? 'Nothing else on this day.' : <>Also this day: {same.slice(0, 3).map((it) => `${it.allDay ? '' : `${it.time} `}${it.title}`).join(' · ')}{same.length > 3 ? ` +${same.length - 3}` : ''}</>}
+      </p>
+    </div>
+  );
+}