@acms-subir/core 0.3.5 → 0.3.7

package/src/components/editor/event/LocationField.tsx

@@ -0,0 +1,266 @@
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { actions } from 'astro:actions';
+import type { EventLocation, Place } from '../../../lib/schema';
+import type { GeoResult, MapsStatus, ParsedLocation } from '../../../lib/maps/types';
+
+// The Where field: one box that searches saved places (always) and the
+// site's maps provider (when one is configured), and turns a pasted map
+// link or Google embed into name + address + pin. The plain fields below it
+// stay editable; typing in them detaches the event from its saved place.
+
+interface Props {
+  location: EventLocation;
+  onChange: (location: EventLocation) => void;
+  maps: MapsStatus;
+  places: Place[];
+  onPlaceSaved: (place: Place) => void;
+}
+
+type Option =
+  | { kind: 'place'; place: Place }
+  | { kind: 'geo'; result: GeoResult };
+
+const looksLikeLink = (s: string) => /^\s*(https?:\/\/|<iframe)/i.test(s);
+const matches = (p: Place, q: string) => `${p.name} ${p.address}`.toLowerCase().includes(q.toLowerCase());
+
+export function LocationField({ location, onChange, maps, places, onPlaceSaved }: Props) {
+  const [query, setQuery] = useState('');
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(0);
+  const [results, setResults] = useState<GeoResult[]>([]);
+  const [busy, setBusy] = useState<'' | 'search' | 'link' | 'save'>('');
+  const [msg, setMsg] = useState('');
+  const listId = useId();
+  const seq = useRef(0);
+
+  const place = location.placeId ? places.find((p) => p.id === location.placeId) : undefined;
+  const hasPin = location.lat != null && location.lng != null;
+
+  // saved places first (all of them while the box is empty), then suggestions
+  const options: Option[] = useMemo(() => {
+    const q = query.trim();
+    const saved = (q ? places.filter((p) => matches(p, q)) : places).slice(0, 6).map((p) => ({ kind: 'place' as const, place: p }));
+    return [...saved, ...results.map((r) => ({ kind: 'geo' as const, result: r }))];
+  }, [query, places, results]);
+
+  // provider suggestions, debounced; stale responses are dropped
+  useEffect(() => {
+    const q = query.trim();
+    if (!maps.search || q.length < 3 || looksLikeLink(q)) { setResults([]); return; }
+    const id = ++seq.current;
+    const t = setTimeout(async () => {
+      setBusy('search');
+      const r = await actions.maps.search({ q, near: hasPin ? { lat: location.lat!, lng: location.lng! } : undefined });
+      if (id !== seq.current) return;
+      setBusy('');
+      setResults(r.data?.results ?? []);
+      if (r.error) setMsg('Suggestions are unavailable right now.');
+    }, 300);
+    return () => clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query, maps.search]);
+
+  const close = () => { setOpen(false); setActive(0); };
+
+  const applyPlace = (p: Place) => {
+    onChange({ ...location, name: p.name, address: p.address, url: p.url, lat: p.lat, lng: p.lng, placeId: p.id, mapImage: p.mapImage, mapImageDark: p.mapImageDark });
+    setQuery(''); setResults([]); setMsg(''); close();
+  };
+
+  const applyGeo = (r: GeoResult | ParsedLocation, link = '') => {
+    const meeting = 'kind' in r && r.kind === 'meeting';
+    onChange({
+      ...location,
+      name: r.name || (meeting ? location.name || 'Online' : location.name),
+      address: meeting ? '' : r.address,
+      url: link || r.url || location.url,
+      lat: meeting ? null : r.lat,
+      lng: meeting ? null : r.lng,
+      placeId: '',
+      // a new pin gets a fresh map image when the event saves
+      mapImage: '', mapImageDark: '',
+    });
+    setQuery(''); setResults([]); close();
+  };
+
+  const resolveLink = async (raw: string) => {
+    setBusy('link'); setMsg('');
+    const r = await actions.maps.resolve({ url: raw.trim() });
+    setBusy('');
+    const loc = r.data?.location;
+    // an iframe's src (or the link itself) becomes the event's map link
+    const link = /^\s*<iframe/i.test(raw) ? (raw.match(/src="([^"]+)"/i)?.[1] ?? '') : raw.trim();
+    if (loc) {
+      applyGeo(loc, loc.kind === 'meeting' ? link : loc.url || link);
+      setMsg(loc.kind === 'meeting' ? 'Online meeting link added.' : loc.lat != null ? 'Filled in from the map link.' : 'Read the place from the link. Add the address if it’s missing.');
+    } else {
+      onChange({ ...location, url: link, placeId: '' });
+      setQuery(''); close();
+      setMsg('Saved as the map link. Couldn’t read the place from it, so fill in the address.');
+    }
+  };
+
+  const choose = (o: Option | undefined) => {
+    if (!o) return;
+    if (o.kind === 'place') applyPlace(o.place);
+    else applyGeo(o.result);
+  };
+
+  // typing in the plain fields detaches from the saved place
+  const edit = (patch: Partial<EventLocation>) => onChange({ ...location, ...patch, placeId: '' });
+
+  const saveAsPlace = async () => {
+    setBusy('save'); setMsg('');
+    const r = await actions.places.save({ name: location.name.trim(), address: location.address, url: location.url, lat: location.lat, lng: location.lng, notes: '', isDefault: false });
+    setBusy('');
+    if (r.error || !r.data) { setMsg(r.error?.message ?? 'Couldn’t save the place.'); return; }
+    onPlaceSaved(r.data.place);
+    onChange({ ...location, placeId: r.data.place.id });
+    setMsg(`Saved. Pick “${r.data.place.name}” for future events.`);
+  };
+
+  const showList = open && (options.length > 0 || (query.trim().length > 0 && !looksLikeLink(query)));
+
+  return (
+    <div className="pe-loc pe-evs-fields">
+      <div className={`pe-loc-search ${open ? 'is-open' : ''}`}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5" /><path d="m20 20-4.2-4.2" /></svg>
+        <input
+          type="text"
+          role="combobox"
+          aria-expanded={showList}
+          aria-controls={listId}
+          aria-autocomplete="list"
+          aria-activedescendant={showList && options[active] ? `${listId}-${active}` : undefined}
+          aria-label="Find a place"
+          placeholder={maps.search ? 'Search, pick a saved place, or paste a map link' : places.length ? 'Pick a saved place or paste a map link' : 'Paste a map link or Google embed'}
+          value={query}
+          spellCheck={false}
+          onFocus={() => setOpen(true)}
+          onClick={() => setOpen(true)}
+          onBlur={() => setTimeout(close, 120)}
+          onPaste={(e) => {
+            const text = e.clipboardData.getData('text/plain');
+            if (looksLikeLink(text)) { e.preventDefault(); void resolveLink(text); }
+          }}
+          onChange={(e) => { setQuery(e.target.value); setOpen(true); setActive(0); setMsg(''); }}
+          onKeyDown={(e) => {
+            if (e.key === 'ArrowDown') { e.preventDefault(); setOpen(true); setActive((i) => Math.min(i + 1, options.length - 1)); }
+            else if (e.key === 'ArrowUp') { e.preventDefault(); setActive((i) => Math.max(i - 1, 0)); }
+            else if (e.key === 'Enter') {
+              e.preventDefault();
+              if (looksLikeLink(query)) void resolveLink(query);
+              else choose(options[active]);
+            } else if (e.key === 'Escape') close();
+          }}
+        />
+        {busy && busy !== 'save' && <span className="pe-loc-spin" aria-hidden="true" />}
+        {showList && (
+          <ul className="pe-loc-list" id={listId} role="listbox" onMouseDown={(e) => e.preventDefault()}>
+            {options.map((o, i) => {
+              const first = i === 0 || options[i - 1].kind !== o.kind;
+              const name = o.kind === 'place' ? o.place.name : o.result.name || o.result.address;
+              const sub = o.kind === 'place' ? o.place.address : o.result.name ? o.result.address : '';
+              return (
+                <li key={o.kind === 'place' ? o.place.id : `${o.result.lat},${o.result.lng},${i}`} role="presentation">
+                  {first && <span className="pe-loc-group" aria-hidden="true">{o.kind === 'place' ? 'Saved places' : `Suggestions · ${maps.label}`}</span>}
+                  <div
+                    id={`${listId}-${i}`}
+                    role="option"
+                    aria-selected={i === active}
+                    className={`pe-loc-opt ${i === active ? 'is-active' : ''}`}
+                    onMouseEnter={() => setActive(i)}
+                    onClick={() => choose(o)}
+                  >
+                    <span className="pe-loc-mk" aria-hidden="true">{o.kind === 'place' ? '★' : '⌖'}</span>
+                    <span><b>{name}</b>{sub && <small>{sub}</small>}</span>
+                    {o.kind === 'place' && o.place.isDefault && <em>Default</em>}
+                  </div>
+                </li>
+              );
+            })}
+            {options.length === 0 && (
+              <li className="pe-loc-empty" role="presentation">{busy === 'search' ? 'Searching…' : maps.search ? 'No matches. Type the details below instead.' : 'No saved place matches.'}</li>
+            )}
+            {!maps.enabled && query.trim().length > 0 && (
+              <li className="pe-loc-foot" role="presentation">Address suggestions need a maps provider. <a href="/admin/integrations#maps" target="_blank" rel="noopener">Set one up</a></li>
+            )}
+          </ul>
+        )}
+      </div>
+
+      {msg && <p className="pe-loc-msg" role="status">{msg}</p>}
+
+      <div className="pe-evs-pair">
+        <label className="pe-field">
+          <span>Place {place ? <em>★ Saved place</em> : null}</span>
+          <input type="text" placeholder="Fellowship Hall, Zoom, the park…" value={location.name} onChange={(e) => edit({ name: e.target.value })} />
+        </label>
+        <label className="pe-field">
+          <span>Map or online link <em>optional</em></span>
+          <input
+            type="url"
+            className="mono"
+            placeholder="Maps link, Zoom, Meet…"
+            value={location.url}
+            onChange={(e) => edit({ url: e.target.value.trim() })}
+            onPaste={(e) => {
+              // a pasted map link fills in whatever is missing
+              const text = e.clipboardData.getData('text/plain');
+              if (looksLikeLink(text) && !hasPin) { e.preventDefault(); void resolveLink(text); }
+            }}
+          />
+        </label>
+      </div>
+      <label className="pe-field">
+        <span>Address</span>
+        <input type="text" placeholder="1200 River Rd, Riverside" value={location.address} onChange={(e) => edit({ address: e.target.value })} />
+      </label>
+
+      {hasPin && (
+        <div className="pe-loc-map">
+          {location.mapImage ? (
+            <>
+              <img className="pe-loc-img is-light" src={location.mapImage} alt={`Map of ${location.name || 'the location'}`} />
+              <img className="pe-loc-img is-dark" src={location.mapImageDark || location.mapImage} alt="" aria-hidden="true" />
+            </>
+          ) : (
+            <div className="pe-loc-noimg">
+              <span className="pe-loc-pin" aria-hidden="true" />
+              <small>
+                {maps.staticMaps
+                  ? 'The map image is made when you save.'
+                  : <>Pinned at {location.lat!.toFixed(4)}, {location.lng!.toFixed(4)}. <a href="/admin/integrations#maps" target="_blank" rel="noopener">Add a maps provider</a> to show a map image.</>}
+              </small>
+            </div>
+          )}
+          {maps.staticMaps && (
+            <label className="pe-loc-check">
+              <input type="checkbox" checked={location.showMap} onChange={(e) => onChange({ ...location, showMap: e.target.checked })} />
+              Show map on event page
+            </label>
+          )}
+        </div>
+      )}
+
+      {(location.name || location.address || location.url) && (
+        <div className="pe-loc-actions">
+          {!place && location.name.trim() && (
+            <button type="button" className="pe-btn sm" disabled={busy === 'save'} onClick={() => void saveAsPlace()}>☆ Save as place</button>
+          )}
+          <span className="pe-loc-gap" />
+          {hasPin && (
+            <button type="button" className="pe-btn ghost sm" onClick={() => edit({ lat: null, lng: null, mapImage: '', mapImageDark: '' })}>Remove pin</button>
+          )}
+          <button
+            type="button"
+            className="pe-btn ghost sm"
+            onClick={() => { onChange({ ...location, name: '', address: '', url: '', lat: null, lng: null, placeId: '', mapImage: '', mapImageDark: '' }); setMsg(''); }}
+          >
+            Clear
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/editor/event/OrganizeCard.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from 'react';
+import type { EventFieldConfig } from '../../../lib/calendar/config';
+import type { CalendarOption, EventMeta } from '../EventPanel';
+import { Section } from './Section';
+
+interface Props {
+  meta: EventMeta;
+  onChange: (patch: Partial<EventMeta>) => void;
+  calendars: CalendarOption[];
+  fields: EventFieldConfig[];
+  // the shared tag input (it lives in the editor, with its suggestions)
+  tags?: ReactNode;
+}
+
+// Calendars, tags and acms({ calendar.eventFields }) custom fields.
+export function OrganizeCard({ meta, onChange, calendars, fields, tags }: Props) {
+  return (
+    <Section id="ev-organize" title="Organize" help="Calendars decide where it’s listed. Tags help search.">
+      <div className="pe-evs-fields">
+        <div className="pe-evs-group">
+          <span className="pe-evw-sub">Calendars</span>
+          {calendars.length === 0 ? (
+            <p className="pe-evs-hint">No calendars yet. The event shows on the main calendar. <a href="/admin/calendar/settings?new=1" 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>
+          )}
+        </div>
+
+        {tags && (
+          <label className="pe-field">
+            <span>Tags</span>
+            {tags}
+          </label>
+        )}
+
+        {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>
+          );
+        })}
+
+      </div>
+    </Section>
+  );
+}
+
+export function StatusSection({ meta, onChange }: Pick<Props, 'meta' | 'onChange'>) {
+  return (
+    <Section id="ev-status" title="Status" help="Cancelled events stay listed and say so." className={meta.cancelled ? 'is-cancelled' : ''}>
+      <div className="pe-evs-box pe-evs-cancel">
+        <label className="pe-switch-row">
+          <span><b>Mark as cancelled</b><small>Keeps the page up with a “Cancelled” notice, 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>
+      </div>
+    </Section>
+  );
+}

package/src/components/editor/event/RegistrationCard.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useState } from 'react';
+import { starter } from '../../forms/FormBuilder';
+import type { EventCta } from '../../../lib/schema';
+import type { EventMeta } from '../EventPanel';
+import { Section } from './Section';
+import { RegistrationFormEditor } from './RegistrationFormEditor';
+import { ctaHrefValid, normalizeCtaHref, registrationMode, registrationPatch, type RegistrationMode } from './registration';
+
+const MODES: { id: RegistrationMode; label: string; sub: string }[] = [
+  { id: 'none', label: 'None', sub: 'Just the details' },
+  { id: 'link', label: 'Link', sub: 'Tickets or a page elsewhere' },
+  { id: 'rsvp', label: 'Built-in form', sub: 'Collect RSVPs here' },
+];
+
+export function RegistrationCard({ meta, onChange, eventId, title = '' }: { eventId?: string; title?: string; meta: EventMeta; onChange: (patch: Partial<EventMeta>) => void }) {
+  // "Link button" with nothing typed yet is still link mode, so keep the
+  // choice locally and only fall back to the derived one on first render
+  const [mode, setMode] = useState<RegistrationMode>(() => registrationMode(meta));
+  const [editing, setEditing] = useState(false);
+  const form = meta.rsvp.form ?? starter('simple');
+  const pick = (next: RegistrationMode) => {
+    setMode(next);
+    onChange(registrationPatch(next, meta));
+  };
+  const questions = form.fields.map((f) => f.label).filter(Boolean);
+
+  return (
+    <Section id="ev-registration" title="CTA" help="The call-to-action button on the event page. Built-in form responses land in Bookings.">
+      <div className="pe-evr-modes" role="radiogroup" aria-label="How people sign up">
+        {MODES.map((m) => (
+          <button key={m.id} type="button" role="radio" aria-checked={mode === m.id} onClick={() => pick(m.id)}>
+            <b>{m.label}</b>
+            <small>{m.sub}</small>
+          </button>
+        ))}
+      </div>
+
+      {mode === 'link' && (
+        <div className="pe-evs-fields">
+          <div className="pe-evs-pair pe-evr-link">
+            <label className="pe-field">
+              <span>Button 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">
+              <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>
+          <CtaLink href={meta.cta.href} onChange={(href) => onChange({ cta: { ...meta.cta, href } })} />
+        </div>
+      )}
+
+      {mode === 'rsvp' && (
+        <div className="pe-evs-fields">
+          <div className="pe-evs-pair pe-evr-seats">
+            <label className="pe-field">
+              <span>Seats</span>
+              <input type="number" min={0} placeholder="No limit" value={meta.rsvp.capacity || ''} onChange={(e) => onChange({ rsvp: { ...meta.rsvp, capacity: Math.max(0, Number(e.target.value) || 0) } })} />
+              <small className="pe-evs-hint">Leave empty for no limit</small>
+            </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>
+          <div className="pe-evs-box">
+            <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>
+          </div>
+          <div className="pe-evr-form">
+            <div className="pe-evr-form-t">
+              <b>{form.title || 'Registration form'}</b>
+              <small>Name · Email · Seats{questions.length ? ` + ${questions.length} question${questions.length === 1 ? '' : 's'} (${questions.join(', ')})` : ''}</small>
+            </div>
+            <div className="pe-evr-form-a">
+              {eventId && <a className="pe-evs-link" href={`/admin/calendar/bookings?event=${encodeURIComponent(eventId)}`}>View registrations ↗</a>}
+              <button type="button" className="pe-btn sm" aria-haspopup="dialog" onClick={() => setEditing(true)}>Edit form</button>
+            </div>
+          </div>
+          {editing && <RegistrationFormEditor form={form} maxSeats={meta.rsvp.maxSeats} eventTitle={title} onClose={() => setEditing(false)} onChange={(f) => onChange({ rsvp: { ...meta.rsvp, form: f } })} />}
+        </div>
+      )}
+    </Section>
+  );
+}
+
+// The link only reaches the event (and autosave) once it's valid, so a
+// half-typed link never blocks saving the rest. Blur fills in https://,
+// mailto: or tel: for bare domains, emails and phone numbers.
+function CtaLink({ href, onChange }: { href: string; onChange: (href: string) => void }) {
+  const [draft, setDraft] = useState(href);
+  const [touched, setTouched] = useState(false);
+  useEffect(() => { if (ctaHrefValid(draft.trim()) && draft.trim() !== href) setDraft(href); }, [href]); // eslint-disable-line react-hooks/exhaustive-deps
+  const bad = touched && !ctaHrefValid(draft.trim());
+  return (
+    <label className={`pe-field ${bad ? 'is-invalid' : ''}`}>
+      <span>Link</span>
+      <input
+        type="text" className="mono" placeholder="https://… or /page" value={draft} aria-invalid={bad || undefined} aria-describedby="ev-cta-link-hint"
+        onChange={(e) => { const v = e.target.value; setDraft(v); if (ctaHrefValid(v.trim())) onChange(v.trim()); }}
+        onBlur={() => { const v = normalizeCtaHref(draft); setDraft(v); setTouched(true); if (ctaHrefValid(v)) onChange(v); }}
+      />
+      <small id="ev-cta-link-hint" className={`pe-evs-hint ${bad ? 'is-error' : ''}`}>
+        {bad ? 'Not saved yet: use a full link like https://example.org, a page like /visit, or mailto: / tel:.' : 'A web address, a page on this site (/visit), mailto: or tel:.'}
+      </small>
+    </label>
+  );
+}

package/src/components/editor/event/RegistrationFormEditor.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from 'react';
+import { actions } from 'astro:actions';
+import FormBuilder, { starter } from '../../forms/FormBuilder';
+import type { SystemField } from '../../forms/meta';
+import type { FormDefinition, SavedForm } from '../../../lib/forms/schema';
+import '../../../styles/forms.css';
+
+type Choice = { id: string; name: string; note: string; definition: () => FormDefinition | undefined };
+
+// The event's own registration questions in the full forms builder, on top
+// of the event editor. Edits go straight into the event's meta (its own copy);
+// the event's Update/autosave persists them, so "Done" only closes.
+export function RegistrationFormEditor({ form, onChange, onClose, maxSeats, eventTitle }: {
+  form: FormDefinition;
+  onChange: (form: FormDefinition) => void;
+  onClose: () => void;
+  maxSeats: number;
+  eventTitle: string;
+}) {
+  const ref = useRef<HTMLDialogElement>(null);
+  const [templates, setTemplates] = useState<SavedForm[]>([]);
+  const [menu, setMenu] = useState<'' | 'templates' | 'more'>('');
+  const [replacing, setReplacing] = useState<Choice | null>(null);
+  const [saveOpen, setSaveOpen] = useState(false);
+  const [templateName, setTemplateName] = useState('');
+  const [notice, setNotice] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [undo, setUndo] = useState<{ name: string; form: FormDefinition } | null>(null);
+
+  useEffect(() => {
+    const d = ref.current;
+    if (d && !d.open) d.showModal();
+    document.documentElement.classList.add('pe-evr-lock');
+    return () => document.documentElement.classList.remove('pe-evr-lock');
+  }, []);
+  useEffect(() => {
+    let live = true;
+    actions.forms.list().then(r => { if (live && r.data) setTemplates(r.data.forms.filter(f => f.kind === 'template' && f.purpose === 'event' && f.status !== 'archived')); }).catch(() => {});
+    return () => { live = false; };
+  }, []);
+
+  const system: SystemField[] = [
+    { label: 'Name', type: 'text', note: 'Bookings uses this to list who is coming.' },
+    { label: 'Email', type: 'email', note: 'Confirmations and changes are sent here.' },
+    { label: `Seats (max ${maxSeats})`, type: 'select', note: 'Change the limit in Registration → Max per person.' },
+  ];
+  const choices: Choice[] = [
+    { id: 'simple', name: 'Simple RSVP', note: 'Name, email and seats only', definition: () => starter('simple') },
+    { id: 'event', name: 'Event registration', note: 'Adds phone, dietary needs and notes', definition: () => starter('event') },
+    ...templates.map(t => ({ id: t.id, name: t.name, note: `${t.definition.fields.length} question${t.definition.fields.length === 1 ? '' : 's'}`, definition: () => t.definition })),
+  ];
+  const apply = (c: Choice) => {
+    const definition = c.definition();
+    if (definition) { setUndo({ name: c.name, form }); onChange(structuredClone(definition)); }
+    setReplacing(null); setMenu('');
+  };
+  const pick = (c: Choice) => { if (form.fields.length) setReplacing(c); else apply(c); };
+
+  async function saveTemplate() {
+    setSaving(true); setNotice('');
+    try {
+      const r = await actions.forms.saveTemplate({ name: templateName.trim(), definition: form, purpose: 'event' });
+      if (r.error) setNotice(r.error.message);
+      else { setTemplates(v => [r.data.form, ...v]); setNotice('Template saved. This event keeps its own copy.'); setTemplateName(''); }
+    } catch { setNotice('Could not save the template. Please try again.'); }
+    finally { setSaving(false); }
+  }
+
+  return (
+    <dialog
+      ref={ref}
+      className="pe-evr-overlay"
+      aria-label="Registration form"
+      onCancel={(e) => {
+        // Esc first clears whatever is open inside; only an idle Esc closes
+        e.preventDefault();
+        if (menu || replacing || saveOpen) { setMenu(''); setReplacing(null); setSaveOpen(false); return; }
+        const a = document.activeElement;
+        if (!a || a === document.body || a === ref.current) onClose();
+      }}
+      onClick={(e) => { if (menu && !(e.target as HTMLElement).closest('.pe-evr-menu, .pe-evr-menubtn')) setMenu(''); }}
+    >
+      <header className="pe-evr-bar">
+        <div className="pe-evr-crumb"><span>{eventTitle || 'Event'}</span> / <b>Registration form</b></div>
+        <span className="pe-evr-hint">Changes apply when you update the event</span>
+        <div className="pe-evr-acts">
+          <div className="pe-evr-pop">
+            <button type="button" className="pe-btn pe-evr-menubtn" aria-expanded={menu === 'templates'} onClick={() => { setMenu(m => m === 'templates' ? '' : 'templates'); setReplacing(null); }}>Use a template ▾</button>
+            {menu === 'templates' && (
+              <div className="pe-evr-menu" role="menu">
+                {replacing ? (
+                  <div className="pe-evr-confirm">
+                    <b>Replace your questions?</b>
+                    <p>Your {form.fields.length} question{form.fields.length === 1 ? '' : 's'} will be replaced by a copy of “{replacing.name}”.</p>
+                    <div><button type="button" className="pe-btn sm" onClick={() => setReplacing(null)}>Cancel</button><button type="button" className="pe-btn sm primary" onClick={() => apply(replacing)}>Replace</button></div>
+                  </div>
+                ) : (
+                  <>
+                    <span className="pe-evr-menu-h">Starters</span>
+                    {choices.slice(0, 2).map(c => <button key={c.id} type="button" role="menuitem" onClick={() => pick(c)}><b>{c.name}</b><small>{c.note}</small></button>)}
+                    <span className="pe-evr-menu-h">Your templates</span>
+                    {choices.length > 2
+                      ? choices.slice(2).map(c => <button key={c.id} type="button" role="menuitem" onClick={() => pick(c)}><b>{c.name}</b><small>{c.note}</small></button>)
+                      : <p className="pe-evr-menu-empty">None yet. Use “Save as template” to reuse these questions.</p>}
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+          <div className="pe-evr-pop">
+            <button type="button" className="pe-btn pe-evr-menubtn" aria-label="More" aria-expanded={menu === 'more'} onClick={() => setMenu(m => m === 'more' ? '' : 'more')}>⋯</button>
+            {menu === 'more' && (
+              <div className="pe-evr-menu pe-evr-menu-r" role="menu">
+                <button type="button" role="menuitem" onClick={() => { setMenu(''); setSaveOpen(true); setNotice(''); }}><b>Save as template…</b><small>Other events can start from a copy</small></button>
+                <a role="menuitem" href="/admin/forms?tab=templates" target="_blank" rel="noopener"><b>Manage templates ↗</b></a>
+              </div>
+            )}
+          </div>
+          <button type="button" className="pe-btn primary" onClick={onClose}>Done</button>
+        </div>
+      </header>
+      {saveOpen && (
+        <div className="pe-evr-save">
+          <label className="pe-field"><span>Template name</span><input autoFocus value={templateName} maxLength={120} placeholder="Volunteer registration" onChange={e => setTemplateName(e.target.value)} onKeyDown={e => { if (e.key === 'Enter' && templateName.trim()) saveTemplate(); }} /></label>
+          <button type="button" className="pe-btn primary" disabled={saving || !templateName.trim()} onClick={saveTemplate}>{saving ? 'Saving…' : 'Save template'}</button>
+          <button type="button" className="pe-btn" onClick={() => setSaveOpen(false)}>Close</button>
+          <p role="status">{notice}</p>
+        </div>
+      )}
+      {undo && (
+        <div className="pe-evr-undo" role="status">
+          <span>Questions replaced with “{undo.name}”.</span>
+          <button type="button" className="pe-btn sm" onClick={() => { onChange(undo.form); setUndo(null); }}>Undo</button>
+          <button type="button" className="pe-btn sm ghost" aria-label="Dismiss" onClick={() => setUndo(null)}>✕</button>
+        </div>
+      )}
+      <div className="pe-evr-body">
+        <FormBuilder value={form} onChange={onChange} mode="event" systemFields={system} />
+      </div>
+    </dialog>
+  );
+}

package/src/components/editor/event/Section.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+// One row of the event settings column: title + one-line help on the left,
+// controls on the right. `id` doubles as the scroll anchor (the index jumps
+// to it; save errors jump to the section they belong to).
+export function Section({ id, title, help, className = '', children }: { id: string; title: string; help?: ReactNode; className?: string; children: ReactNode }) {
+  return (
+    <section className={`pe-evsec ${className}`} id={id} aria-labelledby={`${id}-t`}>
+      <header className="pe-evsec-h">
+        <h3 id={`${id}-t`}>{title}</h3>
+        {help && <p>{help}</p>}
+      </header>
+      <div className="pe-evsec-b">{children}</div>
+    </section>
+  );
+}
+
+// scroll a section into view and tint it briefly
+export function focusEventCard(id: string) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  el.classList.remove('is-flash');
+  void el.offsetWidth;
+  el.classList.add('is-flash');
+  el.querySelector<HTMLElement>('.pe-evsec-b input, .pe-evsec-b select, .pe-evsec-b textarea, .pe-evsec-b button')?.focus({ preventScroll: true });
+}