@acms-subir/core 0.2.0 → 0.3.0

package/src/components/booking/BookingFlow.astro

@@ -0,0 +1,150 @@
+---
+// The booking flow for one link (mockup D + E): length chips (range links),
+// a month of open days, start times that fit, then the questions. Every step
+// is a plain link or form (?date=…&len=…&start=…), so it works without
+// JavaScript and each state is shareable. Used by the page and the embed.
+import type { Booking, BookingLink, Resource, Settings } from '../../lib/schema';
+import { bookingLinkUrl, resourceUrl } from '../../lib/calendar/config';
+import { describeLength, describeLink, linkLengths, openDays, slotsForDay, ymd, type AvailabilityContext } from '../../lib/booking/availability';
+import { addMonths, fmt, monthCells, slotLabel } from '../../lib/booking/view';
+
+interface Props {
+  resource: Resource;
+  link: BookingLink;
+  ctx: AvailabilityContext;
+  settings: Settings;
+  url: URL;
+  error?: string;
+  values?: Record<string, string>;
+  embed?: boolean;
+  reschedule?: Booking | null;
+}
+const { resource, link, ctx, settings, url, error = '', values = {}, embed = false, reschedule = null } = Astro.props;
+const tz = ctx.resource.timezone || settings.timezone || 'UTC';
+const f = fmt(settings, tz);
+const today = ymd(ctx.now, tz);
+const lengths = linkLengths(link);
+const lenParam = Number(url.searchParams.get('len'));
+const len = link.mode === 'range' ? (lengths.includes(lenParam) ? lenParam : lengths[Math.floor(lengths.length / 2)]) : undefined;
+const month = /^\d{4}-\d{2}$/.test(url.searchParams.get('m') ?? '') ? url.searchParams.get('m')! : today.slice(0, 7);
+const horizon = Math.min(link.maxAdvance + 1, 400);
+const open = new Set(openDays(ctx, today, horizon, len));
+const firstOpen = [...open].sort()[0] ?? '';
+const dateParam = url.searchParams.get('date') ?? '';
+const date = open.has(dateParam) ? dateParam : '';
+const shownMonth = date ? date.slice(0, 7) : month;
+const cells = monthCells(shownMonth, open, today);
+const slots = date ? slotsForDay(ctx, date, link.mode === 'day' ? undefined : len) : [];
+const startParam = Number(url.searchParams.get('start'));
+const chosen = slots.find((s) => s.start === startParam && (link.mode !== 'day' || s.minutes === Number(url.searchParams.get('len') || s.minutes)));
+const minMonth = today.slice(0, 7);
+const maxMonth = ymd(ctx.now + link.maxAdvance * 86_400_000, tz).slice(0, 7);
+const base = embed ? `/embed/book/${resource.slug}/${link.slug}` : bookingLinkUrl(resource.slug, link.slug);
+const q = (patch: Record<string, string | number | undefined>) => {
+  const p = new URLSearchParams();
+  for (const k of ['len', 'm', 'date', 'start', 'reschedule']) {
+    const v = k in patch ? patch[k] : url.searchParams.get(k) ?? undefined;
+    if (v !== undefined && v !== '' && v !== null) p.set(k, String(v));
+  }
+  const s = p.toString();
+  return s ? `${base}?${s}` : base;
+};
+const rules = [
+  describeLink(link),
+  link.autoConfirm ? 'Confirmed instantly' : 'Needs approval',
+  link.bufferBefore || link.bufferAfter ? `Includes ${[link.bufferBefore && `${link.bufferBefore} min setup`, link.bufferAfter && `${link.bufferAfter} min cleanup`].filter(Boolean).join(' + ')}` : '',
+].filter(Boolean);
+const val = (k: string) => values[k] ?? '';
+---
+
+<div class={`pc-bk${embed ? ' is-embed' : ''}`}>
+  <aside class="pc-bk-info">
+    {!embed && <a class="pc-bk-back" href={resourceUrl(resource.slug)}>‹ {resource.name}</a>}
+    {embed && <span class="pc-bk-kicker">{resource.name}</span>}
+    <h1 class="pc-bk-title">{link.name}</h1>
+    {link.description && <p class="pc-bk-desc">{link.description}</p>}
+    <ul class="pc-bk-rules">{rules.map((r) => <li>{r}</li>)}</ul>
+    {link.mode === 'range' && lengths.length > 1 && (
+      <div class="pc-bk-lens" role="group" aria-label="How long">
+        <span class="pc-bk-label">How long?</span>
+        <div>{lengths.map((l) => <a class={l === len ? 'is-on' : ''} href={q({ len: l, start: undefined })} aria-current={l === len ? 'true' : undefined}>{describeLength(l)}</a>)}</div>
+      </div>
+    )}
+    <p class="pc-bk-tz">Times in {f.zone}</p>
+    {reschedule && <p class="pc-bk-note">Moving your booking from {f.dayLong.format(reschedule.start)}, {f.time.format(reschedule.start)}.</p>}
+  </aside>
+
+  {!chosen ? (
+    <>
+      <section class="pc-bk-cal" aria-label="Pick a day">
+        {error && <p class="pc-bk-error" role="alert">{error}</p>}
+        <div class="pc-bk-calhead">
+          <b>{f.month.format(Date.UTC(Number(shownMonth.slice(0, 4)), Number(shownMonth.slice(5, 7)) - 1, 15))}</b>
+          <span>
+            {shownMonth > minMonth ? <a href={q({ m: addMonths(shownMonth, -1), date: undefined, start: undefined })} aria-label="Previous month">‹</a> : <span aria-hidden="true">‹</span>}
+            {shownMonth < maxMonth ? <a href={q({ m: addMonths(shownMonth, 1), date: undefined, start: undefined })} aria-label="Next month">›</a> : <span aria-hidden="true">›</span>}
+          </span>
+        </div>
+        <div class="pc-bk-grid">
+          {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d) => <span class="dow">{d}</span>)}
+          {cells.map((c) => !c.inMonth ? <span class="out" /> : c.open ? (
+            <a class={`day open${c.date === date ? ' is-on' : ''}${c.date === today ? ' today' : ''}`} href={q({ date: c.date, m: c.date.slice(0, 7), start: undefined })} aria-label={c.date}>{c.day}</a>
+          ) : <span class={`day${c.date === today ? ' today' : ''}`}>{c.day}</span>)}
+        </div>
+        {!open.size && <p class="pc-bk-empty">No openings in the next {horizon} days.</p>}
+        {open.size > 0 && !date && <p class="pc-bk-hint">Pick a highlighted day.</p>}
+      </section>
+      <section class="pc-bk-slots" aria-label="Pick a time">
+        {date ? (
+          <>
+            <b class="pc-bk-slotday">{f.dayLong.format(slots[0]?.start ?? ctx.now)}</b>
+            {slots.length ? (
+              <div class="pc-bk-slotlist">{slots.map((s) => <a href={q({ start: s.start, len: link.mode === 'day' ? s.minutes : len })} target={embed ? '_top' : undefined}>{slotLabel(s, link, f)}</a>)}</div>
+            ) : <p class="pc-bk-empty">Fully booked — try another day.</p>}
+          </>
+        ) : <p class="pc-bk-hint">{firstOpen ? <>Next opening: <a href={q({ date: firstOpen, m: firstOpen.slice(0, 7) })}>{f.dayLong.format(Date.UTC(Number(firstOpen.slice(0, 4)), Number(firstOpen.slice(5, 7)) - 1, Number(firstOpen.slice(8, 10)), 12))}</a></> : ''}</p>}
+      </section>
+    </>
+  ) : (
+    <section class="pc-bk-form">
+      <div class="pc-bk-summary">
+        <b>{resource.name} · {link.name}</b>
+        <span>{f.dayLong.format(chosen.start)} · {slotLabel(chosen, link, f)}</span>
+        <a href={q({ start: undefined })}>Change</a>
+      </div>
+      {error && <p class="pc-bk-error" role="alert">{error}</p>}
+      <form method="post">
+        <input type="hidden" name="start" value={chosen.start} />
+        <input type="hidden" name="end" value={chosen.end} />
+        {reschedule ? (
+          <input type="hidden" name="reschedule" value={reschedule.manageToken} />
+        ) : (
+          <>
+            <label class="pc-bk-field"><span>Your name</span><input name="name" required autocomplete="name" value={val('name')} /></label>
+            <label class="pc-bk-field"><span>Email</span><input name="email" type="email" required autocomplete="email" value={val('email')} /></label>
+            {link.askPhone && <label class="pc-bk-field"><span>Phone</span><input name="phone" type="tel" autocomplete="tel" value={val('phone')} /></label>}
+            {link.questions.map((qn) => (
+              qn.type === 'checkbox' ? (
+                <label class="pc-bk-check"><input type="checkbox" name={`q_${qn.id}`} value="yes" required={qn.required} checked={val(`q_${qn.id}`) === 'yes'} /> <span>{qn.label}</span></label>
+              ) : (
+                <label class="pc-bk-field">
+                  <span>{qn.label}{!qn.required && <em> optional</em>}</span>
+                  {qn.type === 'textarea' ? <textarea name={`q_${qn.id}`} rows="3" required={qn.required}>{val(`q_${qn.id}`)}</textarea>
+                    : qn.type === 'select' ? (
+                      <select name={`q_${qn.id}`} required={qn.required}>
+                        <option value="">Choose…</option>
+                        {qn.options.map((o) => <option value={o} selected={val(`q_${qn.id}`) === o}>{o}</option>)}
+                      </select>
+                    ) : <input name={`q_${qn.id}`} type={qn.type === 'phone' ? 'tel' : qn.type} required={qn.required} value={val(`q_${qn.id}`)} />}
+                  {qn.help && <small>{qn.help}</small>}
+                </label>
+              )
+            ))}
+          </>
+        )}
+        <button class="pc-bk-submit" type="submit">{reschedule ? 'Move my booking' : link.autoConfirm ? 'Confirm booking' : 'Request booking'}</button>
+        {!link.autoConfirm && !reschedule && <p class="pc-bk-fine">We’ll email you once it’s approved. Nothing is final until then.</p>}
+      </form>
+    </section>
+  )}
+</div>

package/src/components/booking/HoursEditor.astro

@@ -0,0 +1,63 @@
+---
+// Weekday rows (Calendly / Cal.com pattern): a switch, start–end, an optional
+// second range, and "copy to all" — plus a small read-only week preview.
+import type { WeeklyHours } from '../../lib/schema';
+import { DAY_LABELS, DAY_ORDER } from '../../lib/booking/forms';
+interface Props { hours: WeeklyHours; prefix?: string; bounds?: WeeklyHours | null; note?: string; form?: string }
+const { hours, prefix = 'hours', bounds = null, note = '', form } = Astro.props;
+const pct = (t: string) => ((Number(t.slice(0, 2)) * 60 + Number(t.slice(3))) / 1440) * 100;
+---
+
+<div class="hours" data-hours={prefix}>
+  {DAY_ORDER.map((d) => {
+    const r = hours[d] ?? [];
+    const on = r.length > 0;
+    return (
+      <div class={`hours-row${on ? '' : ' is-off'}`}>
+        <label class="hours-day"><input type="checkbox" role="switch" class="sw" name={`${prefix}_${d}_on`} checked={on} form={form} /> {DAY_LABELS[d]}</label>
+        <div class="hours-ranges">
+          <span class="hours-range"><input type="time" form={form} name={`${prefix}_${d}_s1`} value={r[0]?.start ?? '09:00'} step="900" /> – <input type="time" form={form} name={`${prefix}_${d}_e1`} value={r[0]?.end ?? '17:00'} step="900" /></span>
+          <span class={`hours-range hours-second${r[1] ? '' : ' is-empty'}`}><input type="time" form={form} name={`${prefix}_${d}_s2`} value={r[1]?.start ?? ''} step="900" /> – <input type="time" form={form} name={`${prefix}_${d}_e2`} value={r[1]?.end ?? ''} step="900" /></span>
+          <span class="hours-closed">Closed</span>
+        </div>
+        <span class="hours-tools">
+          <button type="button" class="icon-btn" data-add title="Add a second range" aria-label="Add a second range">+</button>
+          <button type="button" class="icon-btn" data-copy={d} title={`Copy ${DAY_LABELS[d]} to every open day`} aria-label="Copy to every open day">⧉</button>
+        </span>
+      </div>
+    );
+  })}
+  <div class="hours-week" aria-hidden="true">
+    {DAY_ORDER.map((d) => (
+      <div><small>{DAY_LABELS[d]}</small><i>
+        {(bounds?.[d] ?? []).map((r) => <u style={`top:${pct(r.start)}%;bottom:${100 - pct(r.end === '00:00' ? '24:00' : r.end)}%`} />)}
+        {(hours[d] ?? []).map((r) => <b style={`top:${pct(r.start)}%;bottom:${100 - pct(r.end === '00:00' ? '24:00' : r.end)}%`} />)}
+      </i></div>
+    ))}
+  </div>
+  {note && <p class="hint">{note}</p>}
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('.hours').forEach((root) => {
+    const rows = () => [...root.querySelectorAll<HTMLElement>('.hours-row')];
+    root.addEventListener('change', (e) => {
+      const t = e.target as HTMLInputElement;
+      if (t.classList.contains('sw')) t.closest('.hours-row')?.classList.toggle('is-off', !t.checked);
+    });
+    root.addEventListener('click', (e) => {
+      const b = (e.target as HTMLElement).closest('button');
+      if (!b) return;
+      const row = b.closest<HTMLElement>('.hours-row')!;
+      if (b.hasAttribute('data-add')) row.querySelector('.hours-second')?.classList.remove('is-empty');
+      if (b.hasAttribute('data-copy')) {
+        const src = [...row.querySelectorAll<HTMLInputElement>('input[type=time]')].map((i) => i.value);
+        rows().forEach((r) => {
+          if (r === row || r.classList.contains('is-off')) return;
+          r.querySelectorAll<HTMLInputElement>('input[type=time]').forEach((i, k) => (i.value = src[k]));
+          if (src[2]) r.querySelector('.hours-second')?.classList.remove('is-empty');
+        });
+      }
+    });
+  });
+</script>

package/src/components/builder/PageBuilder.tsx

@@ -23,6 +23,7 @@ interface Props {
   previewPath: string;
   sharePath: string;
   unsplashEnabled: boolean;
+  site?: { title: string; url: string };
 }
 
 interface Meta {
@@ -42,7 +43,7 @@ const DEVICES = [
 
 const uuid = () => crypto.randomUUID();
 
-export default function PageBuilder({ page, previewPath, sharePath, unsplashEnabled }: Props) {
+export default function PageBuilder({ page, previewPath, sharePath, unsplashEnabled, site = { title: '', url: '' } }: Props) {
   const [blocks, setBlocks] = useState<WidgetInstance[]>(
     page.blocks.map((b) => ({ ...b, config: parseConfig(b.type as WidgetType, b.config) as Record<string, unknown> }))
   );
@@ -333,7 +334,14 @@ export default function PageBuilder({ page, previewPath, sharePath, unsplashEnab
           setPickerFor(null);
         }}
       />
-      <PreviewOverlay open={previewOpen} url={previewPath} shareUrl={sharePath} onClose={() => setPreviewOpen(false)} />
+      <PreviewOverlay open={previewOpen} url={previewPath} shareUrl={sharePath}
+        site={site} isPost={false}
+        meta={{ ...meta, excerpt: '', cover: '', coverAlt: '', path: meta.isHome ? '/' : `/${meta.slug}`, firstParagraph: '',
+          links: blocks.filter(b => b.type === 'button' || (b.type === 'hero' && b.config.ctaHref)).length,
+          imagesMissingAlt: blocks.filter(b => b.type === 'image' && !b.config.alt).length }}
+        onChange={({ seoTitle, seoDesc }) => updateMeta({ ...(seoTitle !== undefined ? { seoTitle } : {}), ...(seoDesc !== undefined ? { seoDesc } : {}) })}
+        onPickCover={() => { const b = blocks.find(b => b.type === 'image'); if (b) setPickerFor({ blockId: b.id, key: 'src' }); }}
+        onClose={() => setPreviewOpen(false)} />
     </div>
   );
 }

package/src/components/editor/EventPanel.tsx

@@ -0,0 +1,401 @@
+import { useMemo, useState } from 'react';
+import type { EventCta, EventLocation } from '../../lib/schema';
+import type { EventFieldConfig } from '../../lib/calendar/config';
+import { buildRepeat, describeRepeat, parseRepeat, WEEKDAY_CODES, weekdayOf, type RepeatParts } from '../../lib/calendar/rrule';
+
+// The event half of the editor sidebar: When · Repeats · Where · Button ·
+// Calendars · custom fields. Times are wall-clock strings in the event's
+// zone ('YYYY-MM-DDTHH:mm', or 'YYYY-MM-DD' for all-day with an inclusive
+// end day). The server re-validates everything on save.
+
+export interface EventMeta {
+  start: string;
+  end: string;
+  allDay: boolean;
+  timezone: string;
+  rrule: string;
+  exdates: string[];
+  cancelled: boolean;
+  location: EventLocation;
+  cta: EventCta;
+  calendarIds: string[];
+  fields: Record<string, string>;
+  rsvp: { enabled: boolean; capacity: number; autoConfirm: boolean; maxSeats: number };
+}
+
+export interface CalendarOption {
+  id: string;
+  name: string;
+  color: string;
+}
+
+interface Props {
+  meta: EventMeta;
+  onChange: (patch: Partial<EventMeta>) => void;
+  calendars: CalendarOption[];
+  fields: EventFieldConfig[];
+  siteTimezone: string;
+}
+
+const DAY_LETTERS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+const DAY_NAMES = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const ORD = ['first', 'second', 'third', 'fourth', 'last'];
+
+const datePart = (s: string) => s.slice(0, 10);
+const timePart = (s: string) => (s.length > 10 ? s.slice(11, 16) : '');
+const toMin = (s: string) => {
+  const [y, m, d] = s.slice(0, 10).split('-').map(Number);
+  const [hh, mm] = s.length > 10 ? s.slice(11, 16).split(':').map(Number) : [0, 0];
+  return Date.UTC(y, m - 1, d, hh, mm) / 60000;
+};
+const fromMin = (min: number, withTime: boolean) => {
+  const d = new Date(min * 60000);
+  const p = (n: number) => String(n).padStart(2, '0');
+  const date = `${d.getUTCFullYear()}-${p(d.getUTCMonth() + 1)}-${p(d.getUTCDate())}`;
+  return withTime ? `${date}T${p(d.getUTCHours())}:${p(d.getUTCMinutes())}` : date;
+};
+
+// every IANA zone the browser knows, for the timezone datalist
+function zoneList(): string[] {
+  try {
+    return (Intl as unknown as { supportedValuesOf?: (k: string) => string[] }).supportedValuesOf?.('timeZone') ?? [];
+  } catch {
+    return [];
+  }
+}
+
+export function EventPanel({ meta, onChange, calendars, fields, siteTimezone }: Props) {
+  const repeat = useMemo(() => parseRepeat(meta.rrule, meta.start), [meta.rrule, meta.start]);
+  const [skipDraft, setSkipDraft] = useState('');
+  const zones = useMemo(zoneList, []);
+  const multiDay = meta.allDay ? datePart(meta.end) !== datePart(meta.start) : datePart(meta.end) !== datePart(meta.start);
+  const [showEndDate, setShowEndDate] = useState(multiDay);
+
+  const setRepeat = (patch: Partial<RepeatParts>) => {
+    const next = { ...repeat, ...patch };
+    onChange({ rrule: buildRepeat(next, meta.start) });
+  };
+
+  // moving the start keeps the duration; the end never lands before the start
+  const setStart = (start: string) => {
+    if (!start) return;
+    const dur = Math.max(meta.allDay ? 0 : 15, toMin(meta.end || meta.start) - toMin(meta.start));
+    const end = fromMin(toMin(start) + dur, !meta.allDay);
+    const patch: Partial<EventMeta> = { start, end };
+    // a weekly rule that pinned the old weekday follows the new one
+    if (repeat.freq === 'WEEKLY' && repeat.byday.length === 1) {
+      patch.rrule = buildRepeat({ ...repeat, byday: [WEEKDAY_CODES[weekdayOf(start).dow]] }, start);
+    } else if (meta.rrule) patch.rrule = buildRepeat(repeat, start);
+    onChange(patch);
+  };
+  const setEnd = (end: string) => {
+    if (!end) return;
+    onChange({ end: toMin(end) < toMin(meta.start) ? meta.start : end });
+  };
+  const toggleAllDay = (allDay: boolean) => {
+    if (allDay) onChange({ allDay, start: datePart(meta.start), end: datePart(meta.end || meta.start) });
+    else {
+      const t = '10:00';
+      onChange({ allDay, start: `${datePart(meta.start)}T${t}`, end: `${datePart(meta.end || meta.start)}T11:00` });
+    }
+  };
+
+  const wd = weekdayOf(meta.start || new Date().toISOString().slice(0, 10));
+  const summary = describeRepeat(meta.rrule, meta.start);
+
+  return (
+    <>
+      <section className="pe-sb-section pe-ev">
+        <h3 className="pe-sb-title">When</h3>
+        <div className="pe-ev-row">
+          <label className="pe-field">
+            <span>{meta.allDay ? 'Starts' : 'Date'}</span>
+            <input type="date" value={datePart(meta.start)} onChange={(e) => setStart(meta.allDay ? e.target.value : `${e.target.value}T${timePart(meta.start) || '10:00'}`)} />
+          </label>
+          {!meta.allDay && (
+            <label className="pe-field pe-ev-time">
+              <span>Starts</span>
+              <input type="time" step={300} value={timePart(meta.start)} onChange={(e) => setStart(`${datePart(meta.start)}T${e.target.value}`)} />
+            </label>
+          )}
+        </div>
+        <div className="pe-ev-row">
+          {(meta.allDay || showEndDate) && (
+            <label className="pe-field">
+              <span>{meta.allDay ? 'Ends' : 'End date'}</span>
+              <input type="date" min={datePart(meta.start)} value={datePart(meta.end || meta.start)} onChange={(e) => setEnd(meta.allDay ? e.target.value : `${e.target.value}T${timePart(meta.end) || timePart(meta.start)}`)} />
+            </label>
+          )}
+          {!meta.allDay && (
+            <label className="pe-field pe-ev-time">
+              <span>Ends</span>
+              <input type="time" step={300} value={timePart(meta.end)} onChange={(e) => setEnd(`${datePart(meta.end || meta.start)}T${e.target.value}`)} />
+            </label>
+          )}
+        </div>
+        {!meta.allDay && !showEndDate && (
+          <button type="button" className="pe-ev-link" onClick={() => setShowEndDate(true)}>Ends on another day</button>
+        )}
+        <label className="pe-switch-row">
+          <span><b>All day</b><small>No start or end time</small></span>
+          <input type="checkbox" role="switch" className="pe-switch" checked={meta.allDay} onChange={(e) => toggleAllDay(e.target.checked)} />
+        </label>
+        <label className="pe-field pe-ev-tz">
+          <span>Timezone</span>
+          <input
+            type="text"
+            list="pe-ev-zones"
+            placeholder={`${siteTimezone || 'UTC'} (site default)`}
+            value={meta.timezone}
+            spellCheck={false}
+            onChange={(e) => onChange({ timezone: e.target.value.trim() })}
+          />
+          <datalist id="pe-ev-zones">{zones.map((z) => <option key={z} value={z} />)}</datalist>
+        </label>
+      </section>
+
+      <section className="pe-sb-section pe-ev">
+        <h3 className="pe-sb-title">Repeats</h3>
+        <label className="pe-field">
+          <span>Repeat {summary && <em>{summary}</em>}</span>
+          <select
+            value={repeat.freq}
+            onChange={(e) => {
+              const freq = e.target.value as RepeatParts['freq'];
+              if (freq === 'custom') onChange({ rrule: meta.rrule || 'FREQ=WEEKLY' });
+              else setRepeat({ freq, interval: 1 });
+            }}
+          >
+            <option value="none">Does not repeat</option>
+            <option value="DAILY">Daily</option>
+            <option value="WEEKLY">Weekly</option>
+            <option value="MONTHLY">Monthly</option>
+            <option value="YEARLY">Yearly</option>
+            <option value="custom">Custom rule…</option>
+          </select>
+        </label>
+        {repeat.freq !== 'none' && repeat.freq !== 'custom' && (
+          <div className="pe-ev-inline">
+            <span>Every</span>
+            <input type="number" min={1} max={99} value={repeat.interval} onChange={(e) => setRepeat({ interval: Math.max(1, Number(e.target.value) || 1) })} />
+            <span>{{ DAILY: 'days', WEEKLY: 'weeks', MONTHLY: 'months', YEARLY: 'years' }[repeat.freq]}</span>
+          </div>
+        )}
+        {repeat.freq === 'WEEKLY' && (
+          <div className="pe-ev-days" role="group" aria-label="Days of the week">
+            {WEEKDAY_CODES.map((code, i) => {
+              const on = repeat.byday.includes(code);
+              return (
+                <button
+                  key={code}
+                  type="button"
+                  aria-pressed={on}
+                  title={DAY_NAMES[i]}
+                  onClick={() => {
+                    const next = on ? repeat.byday.filter((c) => c !== code) : [...repeat.byday, code];
+                    setRepeat({ byday: next.length ? next : [code] });
+                  }}
+                >
+                  {DAY_LETTERS[i]}
+                </button>
+              );
+            })}
+          </div>
+        )}
+        {repeat.freq === 'MONTHLY' && (
+          <div className="pe-ev-choices">
+            <label><input type="radio" name="pe-monthly" checked={repeat.monthly === 'day'} onChange={() => setRepeat({ monthly: 'day' })} /> On day {wd.day}</label>
+            <label><input type="radio" name="pe-monthly" checked={repeat.monthly === 'weekday'} onChange={() => setRepeat({ monthly: 'weekday' })} /> On the {ORD[Math.min(wd.nth, 5) - 1]} {DAY_NAMES[wd.dow]}</label>
+          </div>
+        )}
+        {repeat.freq === 'custom' && (
+          <label className="pe-field">
+            <span>RRULE <em>RFC 5545</em></span>
+            <input type="text" className="mono" spellCheck={false} value={meta.rrule} placeholder="FREQ=MONTHLY;BYDAY=2TU" onChange={(e) => onChange({ rrule: e.target.value.toUpperCase() })} />
+          </label>
+        )}
+        {repeat.freq !== 'none' && repeat.freq !== 'custom' && (
+          <div className="pe-ev-choices">
+            <label><input type="radio" name="pe-ends" checked={repeat.ends === 'never'} onChange={() => setRepeat({ ends: 'never' })} /> Never ends</label>
+            <label>
+              <input type="radio" name="pe-ends" checked={repeat.ends === 'on'} onChange={() => setRepeat({ ends: 'on', until: repeat.until || datePart(fromMin(toMin(meta.start) + 60 * 24 * 90, false)) })} /> Ends on
+              {repeat.ends === 'on' && <input type="date" min={datePart(meta.start)} value={repeat.until} onChange={(e) => setRepeat({ until: e.target.value })} />}
+            </label>
+            <label>
+              <input type="radio" name="pe-ends" checked={repeat.ends === 'after'} onChange={() => setRepeat({ ends: 'after' })} /> After
+              {repeat.ends === 'after' && <input type="number" min={1} max={999} value={repeat.count} onChange={(e) => setRepeat({ count: Math.max(1, Number(e.target.value) || 1) })} />}
+              {repeat.ends === 'after' && ' times'}
+            </label>
+          </div>
+        )}
+        {meta.rrule && (
+          <div className="pe-field">
+            <span>Skip dates <em>holidays, one-off cancellations</em></span>
+            {meta.exdates.length > 0 && (
+              <div className="pe-tags pe-ev-skips">
+                {meta.exdates.map((d) => (
+                  <span key={d} className="pe-tag">
+                    {datePart(d)}
+                    <button type="button" aria-label={`Stop skipping ${datePart(d)}`} onClick={() => onChange({ exdates: meta.exdates.filter((x) => x !== d) })}>✕</button>
+                  </span>
+                ))}
+              </div>
+            )}
+            <div className="pe-date">
+              <input type="date" value={skipDraft} min={datePart(meta.start)} onChange={(e) => setSkipDraft(e.target.value)} />
+              <button
+                type="button"
+                className="pe-btn sm"
+                disabled={!skipDraft}
+                onClick={() => {
+                  // an exdate is an occurrence START (same form as `start`)
+                  const value = meta.allDay ? skipDraft : `${skipDraft}T${timePart(meta.start)}`;
+                  if (!meta.exdates.includes(value)) onChange({ exdates: [...meta.exdates, value].sort() });
+                  setSkipDraft('');
+                }}
+              >
+                Skip
+              </button>
+            </div>
+          </div>
+        )}
+      </section>
+
+      <section className="pe-sb-section pe-ev">
+        <h3 className="pe-sb-title">Where</h3>
+        <label className="pe-field">
+          <span>Place</span>
+          <input type="text" placeholder="Fellowship Hall, Zoom, the park…" value={meta.location.name} onChange={(e) => onChange({ location: { ...meta.location, name: e.target.value } })} />
+        </label>
+        <label className="pe-field">
+          <span>Address</span>
+          <input type="text" placeholder="1200 River Rd, Riverside" value={meta.location.address} onChange={(e) => onChange({ location: { ...meta.location, address: e.target.value } })} />
+        </label>
+        <label className="pe-field">
+          <span>Map or meeting link</span>
+          <input type="url" className="mono" placeholder="https://maps.app.goo.gl/… or a Zoom link" value={meta.location.url} onChange={(e) => onChange({ location: { ...meta.location, url: e.target.value.trim() } })} />
+        </label>
+      </section>
+
+      <section className="pe-sb-section pe-ev">
+        <h3 className="pe-sb-title">Button</h3>
+        <div className="pe-ev-row">
+          <label className="pe-field">
+            <span>Label</span>
+            <input type="text" placeholder="Register, Get tickets…" maxLength={120} value={meta.cta.label} onChange={(e) => onChange({ cta: { ...meta.cta, label: e.target.value } })} />
+          </label>
+          <label className="pe-field pe-ev-time">
+            <span>Style</span>
+            <select value={meta.cta.style} onChange={(e) => onChange({ cta: { ...meta.cta, style: e.target.value as EventCta['style'] } })}>
+              <option value="primary">Solid</option>
+              <option value="outline">Outline</option>
+            </select>
+          </label>
+        </div>
+        <label className="pe-field">
+          <span>Link</span>
+          <input type="text" className="mono" placeholder="https://… or /page" value={meta.cta.href} onChange={(e) => onChange({ cta: { ...meta.cta, href: e.target.value.trim() } })} />
+        </label>
+      </section>
+
+      <section className="pe-sb-section pe-ev">
+        <h3 className="pe-sb-title">RSVP</h3>
+        <label className="pe-switch-row">
+          <span><b>Take RSVPs</b><small>A “Save my seat” form replaces the button; see who’s coming in Bookings</small></span>
+          <input type="checkbox" role="switch" className="pe-switch" checked={meta.rsvp.enabled} onChange={(e) => onChange({ rsvp: { ...meta.rsvp, enabled: e.target.checked } })} />
+        </label>
+        {meta.rsvp.enabled && (
+          <>
+            <div className="pe-ev-row" style={{ marginTop: 10 }}>
+              <label className="pe-field">
+                <span>Seats <em>0 = no limit</em></span>
+                <input type="number" min={0} value={meta.rsvp.capacity} onChange={(e) => onChange({ rsvp: { ...meta.rsvp, capacity: Math.max(0, Number(e.target.value) || 0) } })} />
+              </label>
+              <label className="pe-field">
+                <span>Max per person</span>
+                <input type="number" min={1} max={50} value={meta.rsvp.maxSeats} onChange={(e) => onChange({ rsvp: { ...meta.rsvp, maxSeats: Math.min(50, Math.max(1, Number(e.target.value) || 1)) } })} />
+              </label>
+            </div>
+            <label className="pe-switch-row">
+              <span><b>Confirm automatically</b><small>Off: RSVPs wait for your approval in Bookings</small></span>
+              <input type="checkbox" role="switch" className="pe-switch" checked={meta.rsvp.autoConfirm} onChange={(e) => onChange({ rsvp: { ...meta.rsvp, autoConfirm: e.target.checked } })} />
+            </label>
+          </>
+        )}
+      </section>
+
+      <section className="pe-sb-section pe-ev">
+        <h3 className="pe-sb-title">Calendars</h3>
+        {calendars.length === 0 ? (
+          <p className="pe-ev-note">No calendars yet — the event shows on the main calendar. <a href="/admin/calendar/calendars" target="_blank" rel="noopener">Create one</a> to group events.</p>
+        ) : (
+          <div className="pe-ev-cals">
+            {calendars.map((c) => {
+              const on = meta.calendarIds.includes(c.id);
+              return (
+                <label key={c.id} className={on ? 'is-on' : ''}>
+                  <input
+                    type="checkbox"
+                    checked={on}
+                    onChange={(e) => onChange({ calendarIds: e.target.checked ? [...meta.calendarIds, c.id] : meta.calendarIds.filter((x) => x !== c.id) })}
+                  />
+                  <i style={{ background: c.color }} aria-hidden="true" />
+                  <span>{c.name}</span>
+                </label>
+              );
+            })}
+          </div>
+        )}
+      </section>
+
+      {fields.length > 0 && (
+        <section className="pe-sb-section pe-ev">
+          <h3 className="pe-sb-title">Details</h3>
+          {fields.map((f) => {
+            const value = meta.fields[f.key] ?? '';
+            const set = (v: string) => onChange({ fields: { ...meta.fields, [f.key]: v } });
+            return (
+              <label key={f.key} className="pe-field">
+                <span>{f.label}</span>
+                {f.type === 'select' ? (
+                  <select value={value} onChange={(e) => set(e.target.value)}>
+                    <option value="">—</option>
+                    {f.options.map((o) => <option key={o} value={o}>{o}</option>)}
+                  </select>
+                ) : f.type === 'textarea' ? (
+                  <textarea rows={3} value={value} onChange={(e) => set(e.target.value)} />
+                ) : (
+                  <input type={f.type === 'number' ? 'number' : f.type === 'url' ? 'url' : 'text'} value={value} onChange={(e) => set(e.target.value)} />
+                )}
+              </label>
+            );
+          })}
+        </section>
+      )}
+
+      <section className="pe-sb-section pe-ev">
+        <label className="pe-switch-row">
+          <span><b>Cancelled</b><small>Stays on the calendar, marked cancelled, so nobody wonders where it went</small></span>
+          <input type="checkbox" role="switch" className="pe-switch" checked={meta.cancelled} onChange={(e) => onChange({ cancelled: e.target.checked })} />
+        </label>
+      </section>
+    </>
+  );
+}
+
+// "Sat, Oct 3 · 11:00 AM – 4:00 PM" for the byline under the title
+export function eventWhenLabel(meta: Pick<EventMeta, 'start' | 'end' | 'allDay'>): string {
+  if (!meta.start) return 'Set a date';
+  const d = (s: string) => {
+    const [y, m, day] = s.slice(0, 10).split('-').map(Number);
+    return new Date(Date.UTC(y, m - 1, day)).toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' });
+  };
+  const t = (s: string) => {
+    if (s.length <= 10) return '';
+    const [hh, mm] = s.slice(11, 16).split(':').map(Number);
+    return new Date(Date.UTC(2000, 0, 1, hh, mm)).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit', timeZone: 'UTC' });
+  };
+  const sameDay = meta.start.slice(0, 10) === meta.end.slice(0, 10);
+  if (meta.allDay) return sameDay || !meta.end ? `${d(meta.start)} · All day` : `${d(meta.start)} – ${d(meta.end)}`;
+  return sameDay || !meta.end ? `${d(meta.start)} · ${t(meta.start)} – ${t(meta.end)}` : `${d(meta.start)} ${t(meta.start)} – ${d(meta.end)} ${t(meta.end)}`;
+}