@acms-subir/core 0.3.6 → 0.3.7

package/src/components/editor/EventPanel.tsx

@@ -1,14 +1,12 @@
-import { useMemo, useState } from 'react';
+import type { FormDefinition } from '../../lib/forms/schema';
 import type { EventCta, EventLocation } from '../../lib/schema';
-import type { EventFieldConfig } from '../../lib/calendar/config';
-import WhereItLands from '../calendar/WhereItLands';
-import RoomHolds, { type RoomHoldValue } from '../calendar/RoomHolds';
-import { buildRepeat, describeRepeat, parseRepeat, WEEKDAY_CODES, weekdayOf, type RepeatParts } from '../../lib/calendar/rrule';
+import type { RoomHoldValue } from '../calendar/RoomHolds';
 
-// 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.
+// The event fields the editor holds, and the date label. The settings
+// themselves live in ./event/ (EventSheet: When · Where · Registration ·
+// Organize). 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;
@@ -22,7 +20,7 @@ export interface EventMeta {
   cta: EventCta;
   calendarIds: string[];
   fields: Record<string, string>;
-  rsvp: { enabled: boolean; capacity: number; autoConfirm: boolean; maxSeats: number };
+  rsvp: { enabled: boolean; capacity: number; autoConfirm: boolean; maxSeats: number; form?: FormDefinition };
   roomHold: RoomHoldValue;
 }
 
@@ -32,379 +30,7 @@ export interface CalendarOption {
   color: string;
 }
 
-interface Props {
-  meta: EventMeta;
-  onChange: (patch: Partial<EventMeta>) => void;
-  calendars: CalendarOption[];
-  fields: EventFieldConfig[];
-  siteTimezone: string;
-  // shows the "where it lands" mini month (Schedule data, minus this event)
-  eventId?: string;
-  // for the Rooms section (conflict wording, "Hold now" on drafts)
-  title?: string;
-  status?: 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, eventId, title = '', status = 'draft' }: 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>
-        )}
-        {eventId && datePart(meta.start) && (
-          <WhereItLands date={datePart(meta.start)} eventId={eventId}
-            onPick={(d) => setStart(meta.allDay ? d : `${d}T${timePart(meta.start) || '10:00'}`)} />
-        )}
-        <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>
-
-      <RoomHolds
-        times={{ eventId: eventId ?? '', title, start: meta.start, end: meta.end, allDay: meta.allDay, timezone: meta.timezone, rrule: meta.rrule, exdates: meta.exdates }}
-        hold={meta.roomHold}
-        status={status}
-        locationName={meta.location.name}
-        onChange={(roomHold) => onChange({ roomHold })}
-        onLocation={(name) => onChange({ location: { ...meta.location, name } })}
-      />
-
-      <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/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>
-        )}
-      </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
+// "Sat, Oct 3 · 11:00 AM – 4:00 PM" for the event settings summary
 export function eventWhenLabel(meta: Pick<EventMeta, 'start' | 'end' | 'allDay'>): string {
   if (!meta.start) return 'Set a date';
   const d = (s: string) => {

package/src/components/editor/LivePane.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { useFrameAway } from './frameNav';
 
 // Side-by-side live preview. Reloads on every autosave (tick), keeps the
 // reader's scroll position across reloads, briefly highlights the first
@@ -32,6 +33,7 @@ export function LivePane({ src, path, tick, focusText }: Props) {
   const frame = useRef<HTMLIFrameElement>(null);
   const prevTexts = useRef<string[] | null>(null);
   const scrollY = useRef(0);
+  const { away, nav, check, back } = useFrameAway(frame, src);
 
   // relative "updated" label ticks every 10s
   useEffect(() => {
@@ -73,6 +75,8 @@ export function LivePane({ src, path, tick, focusText }: Props) {
   }, [focusText]);
 
   const onLoad = () => {
+    // a link in the preview went elsewhere: leave that page alone
+    if (check()) return;
     setUpdatedAt(Date.now());
     const all = blocks();
     if (!frame.current?.contentWindow) return;
@@ -101,8 +105,17 @@ export function LivePane({ src, path, tick, focusText }: Props) {
     <aside className="pe-splitpane" aria-label="Live preview">
       <div className="pe-split-bar">
         <span className="pe-live" title={`Updated ${ago}`}><i />Live</span>
-        <span className="pe-live-path">{path}</span>
-        <small className="pe-live-ago">{ago}</small>
+        {away ? (
+          <>
+            <button type="button" className="pe-btn sm pe-live-back" onClick={back} title={`Back to ${path}`}>← Back to page</button>
+            <small className="pe-live-ago pe-live-away" title={away}>Viewing {away}</small>
+          </>
+        ) : (
+          <>
+            <span className="pe-live-path">{path}</span>
+            <small className="pe-live-ago">{ago}</small>
+          </>
+        )}
         <div className="pe-seg" role="group" aria-label="Preview width">
           {DEVICES.map((d) => (
             <button key={d.key} type="button" aria-pressed={device === d.key} title={d.label} aria-label={d.label} onClick={() => pick(d.key)}>
@@ -115,7 +128,7 @@ export function LivePane({ src, path, tick, focusText }: Props) {
         </a>
       </div>
       <div className={`pe-split-stage ${device}`}>
-        <iframe ref={frame} key={tick} src={src} title="Live preview" onLoad={onLoad} />
+        <iframe ref={frame} key={`${tick}-${nav}`} src={src} title="Live preview" onLoad={onLoad} />
       </div>
     </aside>
   );