@acms-subir/core 0.3.6 → 0.3.7

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

@@ -0,0 +1,217 @@
+import { useMemo, useState } from 'react';
+import WhereItLands from '../../calendar/WhereItLands';
+import { buildRepeat, describeRepeat, parseRepeat, WEEKDAY_CODES, weekdayOf, type RepeatParts } from '../../../lib/calendar/rrule';
+import type { EventMeta } from '../EventPanel';
+import { Section } from './Section';
+import { datePart, fromMin, timePart, toMin, zoneList } from './dates';
+
+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 UNITS: Record<string, [string, string] | undefined> = { DAILY: ['day', 'days'], WEEKLY: ['week', 'weeks'], MONTHLY: ['month', 'months'], YEARLY: ['year', 'years'] };
+
+interface Props {
+  meta: EventMeta;
+  onChange: (patch: Partial<EventMeta>) => void;
+  siteTimezone: string;
+  // shows the "where it lands" mini month (Schedule data, minus this event)
+  eventId?: string;
+}
+
+export function WhenCard({ meta, onChange, siteTimezone, eventId }: Props) {
+  const repeat = useMemo(() => parseRepeat(meta.rrule, meta.start), [meta.rrule, meta.start]);
+  const [skipDraft, setSkipDraft] = useState<string | null>(null);
+  const [tzEdit, setTzEdit] = useState(false);
+  const zones = useMemo(zoneList, []);
+
+  const setRepeat = (patch: Partial<RepeatParts>) => onChange({ rrule: buildRepeat({ ...repeat, ...patch }, 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 patch: Partial<EventMeta> = { start, end: fromMin(toMin(start) + dur, !meta.allDay) };
+    // 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 onChange({ allDay, start: `${datePart(meta.start)}T10:00`, 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);
+  const endDate = datePart(meta.end || meta.start);
+
+  const zoneOpen = tzEdit || !meta.timezone && !siteTimezone;
+  const unit = UNITS[repeat.freq];
+  const fmtDay = (d: string) => new Date(`${datePart(d)}T12:00:00Z`).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' });
+  const addSkip = (day: string) => {
+    if (!day) return;
+    // an exdate is an occurrence START (same form as `start`)
+    const value = meta.allDay ? day : `${day}T${timePart(meta.start)}`;
+    if (!meta.exdates.includes(value)) onChange({ exdates: [...meta.exdates, value].sort() });
+    setSkipDraft(null);
+  };
+
+  return (
+    <Section id="ev-when" title="When" help={<>Times are in the event’s zone. Change it for events held elsewhere.</>}>
+      <div className={`pe-evw ${eventId && datePart(meta.start) ? 'has-lands' : ''}`}>
+        <div className="pe-evw-main">
+          <div className={`pe-evw-times ${meta.allDay ? 'is-allday' : ''}`}>
+            <span className="pe-evw-key">Starts</span>
+            <input type="date" aria-label="Start date" value={datePart(meta.start)} onChange={(e) => setStart(meta.allDay ? e.target.value : `${e.target.value}T${timePart(meta.start) || '10:00'}`)} />
+            {!meta.allDay && <input type="time" aria-label="Start time" step={300} value={timePart(meta.start)} onChange={(e) => setStart(`${datePart(meta.start)}T${e.target.value}`)} />}
+            <span className="pe-evw-key">Ends</span>
+            <input type="date" aria-label="End date" min={datePart(meta.start)} value={endDate} onChange={(e) => setEnd(meta.allDay ? e.target.value : `${e.target.value}T${timePart(meta.end) || timePart(meta.start)}`)} />
+            {!meta.allDay && <input type="time" aria-label="End time" step={300} value={timePart(meta.end)} onChange={(e) => setEnd(`${endDate}T${e.target.value}`)} />}
+          </div>
+
+          <div className="pe-evw-opts">
+            <label className="pe-evw-allday">
+              <input type="checkbox" role="switch" className="pe-switch" checked={meta.allDay} onChange={(e) => toggleAllDay(e.target.checked)} />
+              <span>All day</span>
+            </label>
+            <div className="pe-evw-tz">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></svg>
+              {zoneOpen ? (
+                <input
+                  type="text"
+                  list="pe-ev-zones"
+                  aria-label="Time zone"
+                  placeholder={siteTimezone || 'UTC'}
+                  value={meta.timezone}
+                  spellCheck={false}
+                  autoFocus={tzEdit}
+                  onChange={(e) => onChange({ timezone: e.target.value.trim() })}
+                  onBlur={() => setTzEdit(false)}
+                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === 'Escape') { e.preventDefault(); setTzEdit(false); } }}
+                />
+              ) : (
+                <>
+                  <span>{meta.timezone || siteTimezone}{!meta.timezone && <em> site default</em>}</span>
+                  <button type="button" className="pe-evw-link" onClick={() => setTzEdit(true)} aria-label="Change time zone">change</button>
+                </>
+              )}
+              <datalist id="pe-ev-zones">{zones.map((z) => <option key={z} value={z} />)}</datalist>
+            </div>
+          </div>
+
+          <div className="pe-evw-repeat">
+            <span className="pe-evw-sub">Repeat</span>
+            <div className="pe-evw-sentence">
+              <select
+                aria-label="Repeat"
+                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>
+              {unit && (
+                <>
+                  <span className="pe-evw-word">every</span>
+                  <input type="number" className="pe-evw-num" aria-label="Interval" min={1} max={99} value={repeat.interval} onChange={(e) => setRepeat({ interval: Math.max(1, Number(e.target.value) || 1) })} />
+                  <span className="pe-evw-word">{repeat.interval === 1 ? unit[0] : unit[1]}</span>
+                  <select
+                    aria-label="Ends"
+                    value={repeat.ends}
+                    onChange={(e) => {
+                      const ends = e.target.value as RepeatParts['ends'];
+                      if (ends === 'on') setRepeat({ ends, until: repeat.until || datePart(fromMin(toMin(meta.start) + 60 * 24 * 90, false)) });
+                      else setRepeat({ ends });
+                    }}
+                  >
+                    <option value="never">Never ends</option>
+                    <option value="on">Ends on</option>
+                    <option value="after">Ends after</option>
+                  </select>
+                  {repeat.ends === 'on' && <input type="date" aria-label="Last date" min={datePart(meta.start)} value={repeat.until} onChange={(e) => setRepeat({ until: e.target.value })} />}
+                  {repeat.ends === 'after' && (
+                    <>
+                      <input type="number" className="pe-evw-num" aria-label="Number of times" min={1} max={999} value={repeat.count} onChange={(e) => setRepeat({ count: Math.max(1, Number(e.target.value) || 1) })} />
+                      <span className="pe-evw-word">times</span>
+                    </>
+                  )}
+                </>
+              )}
+            </div>
+            {summary && (repeat.freq === 'custom' || repeat.freq === 'WEEKLY' || repeat.freq === 'MONTHLY') && <p className="pe-evw-sum">{summary}</p>}
+            {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>
+            )}
+            {meta.rrule && (
+              <div className="pe-evw-skips">
+                <span className="pe-evw-word">Skip dates:</span>
+                {meta.exdates.map((d) => (
+                  <span key={d} className="pe-evw-skip">
+                    {fmtDay(d)}
+                    <button type="button" aria-label={`Stop skipping ${datePart(d)}`} onClick={() => onChange({ exdates: meta.exdates.filter((x) => x !== d) })}>✕</button>
+                  </span>
+                ))}
+                {skipDraft === null ? (
+                  <button type="button" className="pe-evw-link" onClick={() => setSkipDraft('')}>+ Skip a date</button>
+                ) : (
+                  <span className="pe-evw-skipadd">
+                    <input type="date" aria-label="Date to skip" autoFocus value={skipDraft} min={datePart(meta.start)} onChange={(e) => setSkipDraft(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addSkip(skipDraft); } else if (e.key === 'Escape') setSkipDraft(null); }} />
+                    <button type="button" className="pe-btn sm" disabled={!skipDraft} onClick={() => addSkip(skipDraft)}>Skip</button>
+                    <button type="button" className="pe-btn ghost sm" onClick={() => setSkipDraft(null)}>Cancel</button>
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {eventId && datePart(meta.start) && (
+          <WhereItLands date={datePart(meta.start)} eventId={eventId} onPick={(d) => setStart(meta.allDay ? d : `${d}T${timePart(meta.start) || '10:00'}`)} />
+        )}
+      </div>
+    </Section>
+  );
+}

package/src/components/editor/event/dates.ts

@@ -0,0 +1,28 @@
+// Wall-clock helpers for the event sheet. Times are strings in the event's
+// zone: 'YYYY-MM-DDTHH:mm' (timed) or 'YYYY-MM-DD' (all-day, inclusive end).
+
+export const datePart = (s: string) => s.slice(0, 10);
+export const timePart = (s: string) => (s.length > 10 ? s.slice(11, 16) : '');
+
+// minutes since the epoch, treating the wall clock as UTC (only differences matter)
+export 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;
+};
+
+export 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
+export function zoneList(): string[] {
+  try {
+    return (Intl as unknown as { supportedValuesOf?: (k: string) => string[] }).supportedValuesOf?.('timeZone') ?? [];
+  } catch {
+    return [];
+  }
+}

package/src/components/editor/event/registration.ts

@@ -0,0 +1,39 @@
+import type { EventCta } from '../../../lib/schema';
+
+// The Registration card is one choice over two stored fields: `cta` (a link
+// button) and `rsvp` (the "Save my seat" form, which replaces the button on
+// the public page). No schema change — the mode is derived from the data.
+
+export type RegistrationMode = 'none' | 'link' | 'rsvp';
+
+interface RegistrationData {
+  cta: EventCta;
+  rsvp: { enabled: boolean; capacity: number; autoConfirm: boolean; maxSeats: number };
+}
+
+export function registrationMode({ cta, rsvp }: RegistrationData): RegistrationMode {
+  if (rsvp.enabled) return 'rsvp';
+  return cta.label.trim() || cta.href.trim() ? 'link' : 'none';
+}
+
+// the patch that switches modes. None clears the button (the public page
+// shows one whenever it has a label or link); RSVP keeps the button's data
+// so switching back restores it.
+export function registrationPatch(mode: RegistrationMode, data: RegistrationData): Partial<RegistrationData> {
+  if (mode === 'rsvp') return { rsvp: { ...data.rsvp, enabled: true } };
+  if (mode === 'link') return { rsvp: { ...data.rsvp, enabled: false } };
+  return { rsvp: { ...data.rsvp, enabled: false }, cta: { ...data.cta, label: '', href: '' } };
+}
+
+// same rule the server enforces on save (lib/content-service.ts)
+export const ctaHrefValid = (href: string) => !href || /^(https?:\/\/|\/(?!\/)|mailto:|tel:|#)/i.test(href);
+
+// finish what people usually type: a bare domain, an email or a phone number
+export function normalizeCtaHref(raw: string): string {
+  const v = raw.trim();
+  if (!v || ctaHrefValid(v)) return v;
+  if (/^[^\s@/]+@[^\s@]+\.[^\s@]+$/.test(v)) return `mailto:${v}`;
+  if (/^\+?[\d\s().-]{7,}$/.test(v)) return `tel:${v.replace(/[\s().-]/g, '')}`;
+  if (/^([\w-]+\.)+[a-z]{2,}(:\d+)?([/?#]\S*)?$/i.test(v)) return `https://${v}`;
+  return v;
+}

package/src/components/editor/extensions/form.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+import { Node } from '@tiptap/core';
+import { NodeViewWrapper, ReactNodeViewRenderer, type NodeViewProps } from '@tiptap/react';
+import { actions } from 'astro:actions';
+import '../../../styles/form-block.css';
+
+export const FormCard = Node.create({
+  name: 'formCard', group: 'block', atom: true, draggable: true,
+  addAttributes() { return { formId: { default: '' } }; },
+  parseHTML() { return [{ tag: 'div[data-dyn="form"]', getAttrs: el => ({ formId: (el as HTMLElement).getAttribute('data-form') ?? '' }) }]; },
+  renderHTML({ node }) { return ['div', { 'data-dyn': 'form', 'data-form': node.attrs.formId }]; },
+  addNodeView() { return ReactNodeViewRenderer(FormCardView); },
+});
+
+type Preview = { name: string; status: string; hasDraft: boolean; title: string; intro: string; submitLabel: string; html: string };
+
+function FormCardView({ node, updateAttributes, deleteNode, selected }: NodeViewProps) {
+  const id: string = node.attrs.formId;
+  const [forms, setForms] = useState<{ id: string; name: string; status: string }[] | null>(null);
+  const [preview, setPreview] = useState<Preview | null>(null);
+  const [error, setError] = useState('');
+  useEffect(() => { let live = true; actions.forms.list().then(r => {
+    if (!live) return;
+    if (r.error) setError('Could not load forms.');
+    else setForms(r.data.forms.filter(f => f.kind === 'form' && f.purpose === 'general' && (f.status !== 'archived' || f.id === id)));
+  }).catch(() => { if (live) setError('Could not load forms.'); }); return () => { live = false; }; }, []);
+  useEffect(() => {
+    let live = true; setPreview(null);
+    if (id) actions.forms.preview({ id }).then(r => { if (live) r.error ? setError('This form no longer exists.') : (setError(''), setPreview(r.data)); }).catch(() => { if (live) setError('Could not load the preview.'); });
+    return () => { live = false; };
+  }, [id]);
+
+  const status = preview ? preview.status === 'published'
+    ? <span className="pfb-st is-live"><i aria-hidden="true" />Published{preview.hasDraft ? ' · unpublished changes not shown' : ''}</span>
+    : <span className="pfb-st is-hidden"><i aria-hidden="true" />{preview.status === 'archived' ? 'Archived' : 'Not published'} — hidden on the site</span> : null;
+
+  return <NodeViewWrapper className={`pe-card pfb-card ${selected ? 'is-selected' : ''}`} data-drag-handle>
+    <div className="pe-card-tools" contentEditable={false}><button type="button" title="Remove form" onClick={deleteNode}>✕</button></div>
+    <div className="pfb-bar" contentEditable={false}>
+      <span className="pfb-kind">Form</span>
+      <select aria-label="Form to display" value={id} onChange={e => updateAttributes({ formId: e.target.value })}>
+        <option value="">{forms === null ? 'Loading forms…' : forms.length ? 'Choose a form…' : 'No forms yet'}</option>
+        {forms?.map(f => <option value={f.id} key={f.id}>{f.name}{f.status !== 'published' ? ` (${f.status})` : ''}</option>)}
+      </select>
+      {status}
+      <a className="pfb-link" href={id ? `/admin/forms/${id}` : '/admin/forms'} target="_blank" rel="noopener">{id ? 'Edit form ↗' : 'Manage forms ↗'}</a>
+    </div>
+    <div className="pfb-stage" contentEditable={false}>
+      {error ? <p className="pfb-note">{error}</p>
+        : !id ? <p className="pfb-note">Choose a form to place it here. Only published forms appear on your site.</p>
+        : !preview ? <p className="pfb-note">Loading preview…</p>
+        : <fieldset disabled className="pfb-preview" aria-label={`Preview of ${preview.name}`} tabIndex={-1}>
+            {preview.title && <h3>{preview.title}</h3>}
+            {preview.intro && <p className="pfb-intro">{preview.intro}</p>}
+            {preview.html ? <div className="pfb-fields" dangerouslySetInnerHTML={{ __html: preview.html }} /> : <p className="pfb-note">This form has no questions yet.</p>}
+            <span className="pfb-submit">{preview.submitLabel}</span>
+          </fieldset>}
+    </div>
+  </NodeViewWrapper>;
+}

package/src/components/editor/extensions/slash.tsx

@@ -96,6 +96,11 @@ const ITEMS: SlashItem[] = [
     icon: 'M3 5h18v16H3zM3 9h18M8 3v4M16 3v4M7 13h4v4H7z',
     run: (editor: Editor, range: Range) => editor.chain().focus().deleteRange(range).insertContent({ type: 'eventCard' }).run(),
   } satisfies SlashItem] : []),
+  {
+    title: 'Form', description: 'Add a published contact or sign-up form', keywords: 'form contact signup register', group: 'Cards',
+    icon: 'M5 3h14v18H5zM8 7h8M8 11h8M8 15h5',
+    run: (editor, range) => editor.chain().focus().deleteRange(range).insertContent({ type: 'formCard' }).run(),
+  },
   {
     title: 'Info cards', description: 'Grid of cards: title, badge, details', keywords: 'info cards grid services hours schedule team features locations badge', group: 'Cards',
     icon: 'M3 5h18v14H3zM7 9h6M15.5 9h2M7 13h7M7 16h5',

package/src/components/editor/frameNav.ts

@@ -0,0 +1,20 @@
+import { useCallback, useState, type RefObject } from 'react';
+
+// Tracks whether a preview iframe has left the page it was opened on (a CTA,
+// a nav link, another site). Cross-origin pages can't be read, which itself
+// means "away". `back` reloads the original page by remounting the frame.
+export function useFrameAway(frame: RefObject<HTMLIFrameElement | null>, src: string) {
+  const [away, setAway] = useState('');
+  const [nav, setNav] = useState(0);
+  const check = useCallback(() => {
+    const home = new URL(src, location.href);
+    let here: URL | null = null;
+    try { here = new URL(frame.current?.contentWindow?.location.href ?? home.href); } catch { here = null; }
+    if (!here) return setAway('another site'), true;
+    const same = here.origin === home.origin && here.pathname.replace(/\/$/, '') === home.pathname.replace(/\/$/, '');
+    setAway(same ? '' : here.origin === home.origin ? here.pathname : here.host);
+    return !same;
+  }, [frame, src]);
+  const back = useCallback(() => { setAway(''); setNav((n) => n + 1); }, []);
+  return { away, nav, check, back };
+}

package/src/components/forms/Canvas.tsx

@@ -0,0 +1,149 @@
+import { Fragment, useId, useLayoutEffect, useRef, useState } from 'react';
+import { escapeForm, renderControl, renderField, renderFields } from '../../lib/forms/fields';
+import { isHalf, type FormDefinition, type FormField } from '../../lib/forms/schema';
+import { answersFrom, firstError } from '../../lib/forms/validate';
+import { META, type Selection, type SystemField } from './meta';
+
+/** Plain-text contentEditable that doesn't fight the caret: the DOM is only rewritten when the value changes from outside. */
+export function Inline({ value, onChange, onDone, placeholder, max, multiline = false, label, className = '' }: {
+  value: string; onChange: (v: string) => void; onDone?: () => void; placeholder: string; max: number; multiline?: boolean; label: string; className?: string;
+}) {
+  const ref = useRef<HTMLSpanElement>(null);
+  useLayoutEffect(() => { const el = ref.current; if (el && el.textContent !== value && document.activeElement !== el) el.textContent = value; }, [value]);
+  return (
+    <span
+      ref={ref} className={`fb-inline ${className}`} contentEditable="plaintext-only" suppressContentEditableWarning spellCheck
+      role="textbox" aria-label={label} aria-multiline={multiline} data-placeholder={placeholder}
+      onInput={e => {
+        const el = e.currentTarget;
+        let text = el.textContent ?? '';
+        if (!multiline && /\n/.test(text)) text = text.replace(/\n+/g, ' ');
+        if (text.length > max) { text = text.slice(0, max); el.textContent = text; getSelection()?.selectAllChildren(el); getSelection()?.collapseToEnd(); }
+        onChange(text);
+      }}
+      onKeyDown={e => { if ((e.key === 'Enter' && !multiline) || e.key === 'Escape') { e.preventDefault(); e.currentTarget.blur(); } }}
+      onPaste={e => {
+        // Fallback for browsers without plaintext-only: insert text, never markup.
+        e.preventDefault();
+        document.execCommand('insertText', false, e.clipboardData.getData('text/plain'));
+      }}
+      onBlur={() => { const el = ref.current; if (el && el.textContent !== value) el.textContent = value; onDone?.(); }}
+    />
+  );
+}
+
+type CanvasProps = {
+  value: FormDefinition; system: SystemField[]; selection: Selection; event: boolean;
+  onSelect: (s: Selection) => void; patch: (next: Partial<FormDefinition>, key: string) => void;
+  patchField: (id: string, next: Partial<FormField>, key: string) => void; onLabelDone: (id: string) => void;
+  onInsertAfter: (id: string | null) => void; onDuplicate: (id: string) => void; onRemove: (id: string) => void;
+};
+
+/** The form drawn with the public form markup/classes; labels, help, title, intro and the button edit in place. */
+export function Canvas(p: CanvasProps) {
+  const { value, system, selection, event, onSelect } = p;
+  const prefix = useId().replace(/:/g, '');
+  const sel = (s: Selection) => JSON.stringify(s) === JSON.stringify(selection);
+  const submitFallback = event ? 'Confirm my seat' : 'Submit';
+
+  if (selection?.kind === 'thanks') return (
+    <div className="fb-paper fb-paper-done">
+      <p className="fb-paper-tag">After someone submits</p>
+      <h2 className="fb-title">{value.title || 'Thank you'}</h2>
+      <p className={`fb-thanks on`}><Inline value={value.confirmation} onChange={v => p.patch({ confirmation: v }, 'confirmation')} placeholder={event ? 'Uses the booking confirmation message' : 'Thank you. Your response has been received.'} max={1000} multiline label="Thank-you message" /></p>
+      <button type="button" className="fb-link" onClick={() => onSelect(null)}>← Back to the questions</button>
+    </div>
+  );
+
+  // Pair consecutive half-width questions exactly like renderFields does.
+  const rows: FormField[][] = [];
+  for (const f of value.fields) {
+    const last = rows[rows.length - 1];
+    if (isHalf(f) && last && last.length === 1 && isHalf(last[0])) last.push(f); else rows.push([f]);
+  }
+  const item = (f: FormField) => <Item key={f.id} {...p} field={f} prefix={prefix} on={sel({ kind: 'field', id: f.id })} />;
+
+  return (
+    <div className="fb-paper" onClick={e => { if (e.target === e.currentTarget) onSelect(null); }}>
+      <div className={`fb-item fb-head${sel({ kind: 'form' }) ? ' on' : ''}`} onClick={() => onSelect({ kind: 'form' })}>
+        <h2 className="fb-title"><Inline value={value.title} onChange={v => p.patch({ title: v }, 'title')} placeholder="Form title" max={120} label="Form title" /></h2>
+        <p className="fb-intro"><Inline value={value.intro} onChange={v => p.patch({ intro: v }, 'intro')} placeholder="Add an introduction (optional)" max={1000} multiline label="Introduction" /></p>
+      </div>
+      {system.map((f, i) => (
+        <div key={`sys-${i}`} className={`fb-item fb-sys${sel({ kind: 'system', index: i }) ? ' on' : ''}`} onClick={() => onSelect({ kind: 'system', index: i })} title="Always asked">
+          <div inert dangerouslySetInnerHTML={{ __html: renderField({ id: `sys${i}`, type: f.type, label: f.label, required: true, help: '', options: f.type === 'select' ? ['1'] : [] }, '', `${prefix}-sys`) }} />
+        </div>
+      ))}
+      {rows.map((row, i) => row.length === 2 ? <div key={row[0].id} className="pc-form-row">{row.map(item)}</div> : <Fragment key={row[0].id}>{row[0].width === 'half' ? <div className="pc-form-row">{item(row[0])}</div> : item(row[0])}</Fragment>)}
+      {!value.fields.length && (
+        <button type="button" className="fb-empty" onClick={() => p.onInsertAfter(null)}>
+          <b>Add your first question</b><span>Press / or click here to pick a question type.</span>
+        </button>
+      )}
+      <div className={`fb-item fb-submit-wrap${sel({ kind: 'submit' }) ? ' on' : ''}`} onClick={() => onSelect({ kind: 'submit' })}>
+        <div className="pc-bk-submit fb-submit"><Inline value={value.submitLabel} onChange={v => p.patch({ submitLabel: v }, 'submit')} placeholder={submitFallback} max={80} label="Submit button label" /></div>
+      </div>
+    </div>
+  );
+}
+
+function Item({ field: f, prefix, on, onSelect, patchField, onLabelDone, onInsertAfter, onDuplicate, onRemove }: CanvasProps & { field: FormField; prefix: string; on: boolean }) {
+  const id = `${prefix}-${f.id}`;
+  const label = <Inline value={f.label} onChange={v => patchField(f.id, { label: v }, `label:${f.id}`)} onDone={() => onLabelDone(f.id)} placeholder={META[f.type].fresh} max={200} label={`${META[f.type].label} label`} />;
+  const req = f.required ? <span className="fb-req-mark" aria-hidden="true"> *</span> : null;
+  const help = (f.help || on) ? <small className="fb-help"><Inline value={f.help} onChange={v => patchField(f.id, { help: v }, `help:${f.id}`)} placeholder={f.type === 'heading' ? 'Add a description (optional)' : 'Add help text (optional)'} max={300} label="Help text" /></small> : null;
+  const control = <div className="fb-control" inert dangerouslySetInnerHTML={{ __html: renderControl(f, '', id) }} />;
+  const body = f.type === 'heading'
+    ? <div className="pc-form-heading"><h3>{label}</h3>{(f.help || on) && <p><Inline value={f.help} onChange={v => patchField(f.id, { help: v }, `help:${f.id}`)} placeholder="Add a description (optional)" max={300} label="Section description" /></p>}</div>
+    : f.type === 'checkbox' || f.type === 'consent'
+      ? <div className="pc-bk-check"><input type="checkbox" tabIndex={-1} aria-hidden="true" readOnly checked={false} /><span>{label}{req}{help}</span></div>
+      : f.type === 'radio' || f.type === 'checkboxes'
+        ? <div className="pc-bk-field pc-bk-choices"><div className="fb-legend">{label}{req}</div>{control}{help}</div>
+        : <div className="pc-bk-field"><span>{label}{req}</span>{control}{help}</div>;
+  return (
+    <div className={`fb-item${on ? ' on' : ''}${isHalf(f) ? ' is-half' : ''}`} data-item={f.id} tabIndex={-1} aria-label={`${META[f.type].label}: ${f.label}`}
+      onClick={e => { onSelect({ kind: 'field', id: f.id }); if (!(e.target as HTMLElement).closest('.fb-inline, button')) e.currentTarget.focus({ preventScroll: true }); }}>
+      {body}
+      {on && (
+        <div className="fb-item-tools" onClick={e => e.stopPropagation()}>
+          <button type="button" className="fb-icon" title="Add a question below" aria-label="Add a question below" onClick={() => onInsertAfter(f.id)}>+</button>
+          <button type="button" className="fb-icon" title="Duplicate (⌘D)" aria-label="Duplicate question" onClick={() => onDuplicate(f.id)}>
+            <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2" /><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" /></svg>
+          </button>
+          <button type="button" className="fb-icon danger" title="Delete (⌫)" aria-label="Delete question" onClick={() => onRemove(f.id)}>
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3" /></svg>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Interactive preview: type, tick and press the button to check validation. Nothing is sent. */
+export function Preview({ value, system, event, device }: { value: FormDefinition; system: SystemField[]; event: boolean; device: 'desktop' | 'phone' }) {
+  const [result, setResult] = useState<{ ok: boolean; text: string } | null>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+  const e = escapeForm;
+  const sys = system.map((f, i) => renderField({ id: `sys${i}`, type: f.type, label: f.label, required: f.type !== 'select', help: '', options: f.type === 'select' ? ['1', '2'] : [] }, '', 'pv-sys')).join('');
+  const html = `${value.title ? `<h2>${e(value.title)}</h2>` : ''}${value.intro ? `<p class="fb-pv-intro">${e(value.intro)}</p>` : ''}${sys}${renderFields(value, {}, 'pv')}`;
+  const key = JSON.stringify(value);
+  return (
+    <div className={`fb-pv-frame ${device}`}>
+      <form
+        ref={formRef} key={key} className="fb-paper fb-pv" onInput={() => setResult(null)}
+        onSubmit={ev => {
+          ev.preventDefault();
+          const data = new FormData(ev.currentTarget);
+          try {
+            const error = firstError(value, answersFrom(name => data.getAll(name), value));
+            setResult(error ? { ok: false, text: error } : { ok: true, text: value.confirmation || (event ? 'Your seat is saved.' : 'Thank you. Your response has been received.') });
+          } catch (err) { setResult({ ok: false, text: err instanceof Error ? err.message : 'Invalid answer.' }); }
+        }}
+      >
+        <div dangerouslySetInnerHTML={{ __html: html }} />
+        {result && <p className={`fb-pv-result ${result.ok ? 'ok' : 'bad'}`} role="status">{result.ok ? <><b>Looks good.</b> Visitors would see: “{result.text}” Nothing was sent.</> : result.text}</p>}
+        <button type="submit" className="pc-bk-submit">{value.submitLabel || (event ? 'Confirm my seat' : 'Submit')}</button>
+      </form>
+    </div>
+  );
+}