@acms-subir/core 0.1.0 → 0.3.0

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)}`;
+}

package/src/components/editor/FormatDock.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+import type { Editor } from '@tiptap/react';
+
+// Desktop formatting dock, floating at the bottom of the editor sheet. It
+// shows the block type + active marks at the caret, fades out while you type
+// and comes back when the mouse moves. Touch devices use MobileToolbar.
+
+interface Props {
+  editor: Editor;
+  words: number;
+  onLink: () => void;
+  onShortcuts: () => void;
+}
+
+const I = {
+  plus: 'M12 5v14M5 12h14',
+  link: 'M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1.5-1.5',
+  quote: 'M7 7h4v4c0 3-2 5-4 6M14 7h4v4c0 3-2 5-4 6',
+  list: 'M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01',
+};
+const Svg = ({ d }: { d: string }) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>
+);
+
+export function FormatDock({ editor, words, onLink, onShortcuts }: Props) {
+  const [touch] = useState(() => typeof matchMedia !== 'undefined' && matchMedia('(pointer: coarse)').matches);
+  const [typing, setTyping] = useState(false);
+  const [, rerender] = useState(0);
+
+  useEffect(() => {
+    if (touch) return;
+    const onTx = () => rerender((n) => n + 1);
+    const onType = () => setTyping(true);
+    const onMove = () => setTyping(false);
+    editor.on('transaction', onTx);
+    editor.on('update', onType);
+    window.addEventListener('mousemove', onMove, { passive: true });
+    return () => {
+      editor.off('transaction', onTx);
+      editor.off('update', onType);
+      window.removeEventListener('mousemove', onMove);
+    };
+  }, [editor, touch]);
+
+  if (touch) return null;
+
+  const c = () => editor.chain().focus();
+  const btn = (key: string, label: string, active: boolean, run: () => void, child: React.ReactNode) => (
+    <button
+      key={key}
+      type="button"
+      title={label}
+      aria-label={label}
+      aria-pressed={active}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={run}
+    >
+      {child}
+    </button>
+  );
+  const isPara = editor.isActive('paragraph');
+  const mins = Math.max(1, Math.round(words / 220));
+
+  return (
+    <div className={`pe-dock ${typing ? 'is-typing' : ''}`} role="toolbar" aria-label="Formatting">
+      {btn('p', 'Paragraph', isPara, () => c().setParagraph().run(), <span className="pe-dock-t">¶</span>)}
+      {btn('h2', 'Heading 2', editor.isActive('heading', { level: 2 }), () => c().toggleHeading({ level: 2 }).run(), <span className="pe-dock-t">H2</span>)}
+      {btn('h3', 'Heading 3', editor.isActive('heading', { level: 3 }), () => c().toggleHeading({ level: 3 }).run(), <span className="pe-dock-t">H3</span>)}
+      <span className="pe-dock-sep" />
+      {btn('bold', 'Bold (⌘B)', editor.isActive('bold'), () => c().toggleBold().run(), <b>B</b>)}
+      {btn('italic', 'Italic (⌘I)', editor.isActive('italic'), () => c().toggleItalic().run(), <i>I</i>)}
+      {btn('link', 'Link (⌘K)', editor.isActive('link'), onLink, <Svg d={I.link} />)}
+      {btn('quote', 'Quote', editor.isActive('blockquote'), () => c().toggleBlockquote().run(), <Svg d={I.quote} />)}
+      {btn('list', 'Bulleted list', editor.isActive('bulletList'), () => c().toggleBulletList().run(), <Svg d={I.list} />)}
+      <span className="pe-dock-sep" />
+      {btn('insert', 'Insert a card (/)', false, () => c().insertContent('/').run(), <Svg d={I.plus} />)}
+      <span className="pe-dock-count">{words.toLocaleString()} {words === 1 ? 'word' : 'words'} · {mins} min</span>
+      <button type="button" className="pe-dock-kbd" title="Keyboard shortcuts (⌘/)" onClick={onShortcuts}>⌘/</button>
+    </div>
+  );
+}