@acms-subir/core 0.1.0 → 0.3.0

package/src/components/ThemeSectionsEditor.tsx

@@ -0,0 +1,513 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ImagePicker } from './editor/ImagePicker';
+
+// Pages tab of the Design screen: lay out a page from the active theme's
+// section registry (builtins + the theme's own sections). Edits stay local
+// until "Save section draft" stages them into the design draft through
+// POST /api/design; nothing here publishes, and a page's own content is
+// never touched (switching a page back to "Page content" keeps its layout).
+
+type FieldType = 'text' | 'textarea' | 'image' | 'url' | 'select' | 'number';
+interface FieldDef { label: string; type: FieldType; default?: string | number; options?: string[] }
+interface SectionDef { name?: string; label?: string; version?: number; variants?: string[]; fields?: Record<string, FieldDef> }
+type SectionValue = string | number;
+export interface SectionInstance {
+  id: string;
+  type: string;
+  version: number;
+  variant: string;
+  hidden: boolean;
+  data: Record<string, SectionValue>;
+}
+export interface PageLayout { mode: 'sections' | 'content'; sections: SectionInstance[] }
+export type SectionPages = Record<string, PageLayout>;
+interface DesignSide { activeTheme?: string; sectionPages?: SectionPages; [k: string]: unknown }
+export interface DesignApiState {
+  revision: number;
+  live: DesignSide;
+  draft: DesignSide | null;
+  changes: { key: string; label: string; from: string; to: string; kind: string }[];
+  themes: { slug: string; name: string; version: string | number; sections: Record<string, SectionDef> }[];
+  pages: { id: string; title: string; slug: string; isHome: boolean }[];
+  versions: { id: string; createdAt: number; author: string; summary: string }[];
+  scopes: string[];
+}
+
+const errorText = async (res: Response, fallback: string) => {
+  try {
+    const body = (await res.json()) as { error?: unknown };
+    if (typeof body?.error === 'string' && body.error) return body.error;
+  } catch { /* not JSON */ }
+  return fallback;
+};
+
+/** GET /api/design, shared by the Pages editor and the Review tab */
+export function useDesignApi() {
+  const [data, setData] = useState<DesignApiState | null>(null);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const res = await fetch('/api/design', { headers: { accept: 'application/json' } });
+      if (!res.ok) { setError(await errorText(res, `Couldn't load the design (${res.status}).`)); return; }
+      setData((await res.json()) as DesignApiState);
+    } catch {
+      setError("Couldn't reach the server.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  useEffect(() => { void load(); }, [load]);
+  return { data, error, loading, reload: load };
+}
+
+const stagedPages = (d: DesignApiState): SectionPages =>
+  (d.draft?.sectionPages ?? d.live.sectionPages ?? {}) as SectionPages;
+
+const sectionName = (def: SectionDef | undefined, type: string) => def?.name || def?.label || type;
+
+const newId = (type: string) => {
+  const rand = typeof crypto !== 'undefined' && 'randomUUID' in crypto
+    ? crypto.randomUUID().slice(0, 8)
+    : Math.random().toString(36).slice(2, 10);
+  return `${type}-${rand}`;
+};
+
+const defaultsFor = (def: SectionDef): Record<string, SectionValue> => {
+  const out: Record<string, SectionValue> = {};
+  for (const [key, f] of Object.entries(def.fields ?? {})) {
+    if (f.default !== undefined) out[key] = f.default;
+  }
+  return out;
+};
+
+const pagePath = (p: { slug: string; isHome: boolean }) => (p.isHome ? '/' : `/${p.slug}`);
+
+interface EditorProps {
+  api: ReturnType<typeof useDesignApi>;
+  /** theme picked in the Theme tab (may be ahead of the staged draft) */
+  activeTheme: string;
+  unsplashEnabled: boolean;
+}
+
+export default function ThemeSectionsEditor({ api, activeTheme, unsplashEnabled }: EditorProps) {
+  const { data, error: loadError, loading, reload } = api;
+  const [pages, setPages] = useState<SectionPages>({});
+  const [pageId, setPageId] = useState('');
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [addType, setAddType] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState('');
+  const [conflict, setConflict] = useState(false);
+  const [imageFor, setImageFor] = useState<{ sectionId: string; key: string } | null>(null);
+
+  // rehydrate local edits whenever a fresh server state arrives
+  const base = useMemo(() => (data ? stagedPages(data) : {}), [data]);
+  useEffect(() => {
+    if (!data) return;
+    setPages(structuredClone(base));
+    setConflict(false);
+    setSaveError('');
+    setPageId((cur) => (cur && data.pages.some((p) => p.id === cur) ? cur : (data.pages.find((p) => p.isHome) ?? data.pages[0])?.id ?? ''));
+  }, [data, base]);
+
+  const dirty = useMemo(() => JSON.stringify(pages) !== JSON.stringify(base), [pages, base]);
+  const dirtyRef = useRef(false);
+  dirtyRef.current = dirty;
+  useEffect(() => {
+    const warn = (e: BeforeUnloadEvent) => { if (dirtyRef.current) e.preventDefault(); };
+    addEventListener('beforeunload', warn);
+    return () => removeEventListener('beforeunload', warn);
+  }, []);
+
+  const theme = data?.themes.find((t) => t.slug === activeTheme)
+    ?? data?.themes.find((t) => t.slug === (data.draft?.activeTheme ?? data.live.activeTheme))
+    ?? data?.themes[0];
+  const defs: Record<string, SectionDef> = theme?.sections ?? {};
+  const defTypes = Object.keys(defs);
+  useEffect(() => {
+    if (!defTypes.includes(addType)) setAddType(defTypes[0] ?? '');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defTypes.join('|')]);
+
+  if (loading && !data) return <p className="te-muted">Loading page layouts…</p>;
+  if (!data) {
+    return (
+      <div className="notice warn" role="alert">
+        <span>{loadError || "Couldn't load page layouts."}</span>
+        <button className="btn sm" type="button" onClick={() => void reload()}>Try again</button>
+      </div>
+    );
+  }
+  if (data.pages.length === 0) {
+    return (
+      <div className="empty-state">
+        <b>No pages yet</b>
+        <p>Create a page first, then give it a section layout here.</p>
+        <a className="btn" href="/admin/pages">Go to pages</a>
+      </div>
+    );
+  }
+
+  const page = data.pages.find((p) => p.id === pageId) ?? data.pages[0];
+  const layout: PageLayout | undefined = pages[page.id];
+
+  const setLayout = (fn: (l: PageLayout) => PageLayout) =>
+    setPages((all) => ({ ...all, [page.id]: fn(all[page.id] ?? { mode: 'sections', sections: [] }) }));
+  const setSections = (fn: (s: SectionInstance[]) => SectionInstance[]) =>
+    setLayout((l) => ({ ...l, sections: fn(l.sections) }));
+  const patchSection = (id: string, fn: (s: SectionInstance) => SectionInstance) =>
+    setSections((list) => list.map((s) => (s.id === id ? fn(s) : s)));
+
+  const addSection = () => {
+    const def = defs[addType];
+    if (!def) return;
+    const s: SectionInstance = {
+      id: newId(addType),
+      type: addType,
+      version: def.version ?? 1,
+      variant: def.variants?.[0] ?? 'default',
+      hidden: false,
+      data: defaultsFor(def),
+    };
+    setLayout((l) => ({ ...l, mode: 'sections', sections: [...l.sections, s] }));
+    setOpenId(s.id);
+  };
+  const move = (i: number, dir: -1 | 1) =>
+    setSections((list) => {
+      const j = i + dir;
+      if (j < 0 || j >= list.length) return list;
+      const next = [...list];
+      [next[i], next[j]] = [next[j], next[i]];
+      return next;
+    });
+  const duplicate = (i: number) =>
+    setSections((list) => {
+      const copy = { ...structuredClone(list[i]), id: newId(list[i].type) };
+      return [...list.slice(0, i + 1), copy, ...list.slice(i + 1)];
+    });
+  const remove = (s: SectionInstance) => {
+    if (!window.confirm(`Delete the “${sectionName(defs[s.type], s.type)}” section from ${page.title}? This happens when you save the section draft.`)) return;
+    setSections((list) => list.filter((x) => x.id !== s.id));
+  };
+  const setField = (id: string, key: string, value: SectionValue | undefined) =>
+    patchSection(id, (s) => {
+      const d = { ...s.data };
+      if (value === undefined) delete d[key]; else d[key] = value;
+      return { ...s, data: d };
+    });
+
+  const save = async () => {
+    setSaving(true);
+    setSaveError('');
+    try {
+      const res = await fetch('/api/design', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json', accept: 'application/json' },
+        body: JSON.stringify({ operation: 'stage', revision: data.revision, patch: { sectionPages: { ...base, ...pages } } }),
+      });
+      if (res.status === 409) { setConflict(true); return; }
+      if (!res.ok) { setSaveError(await errorText(res, `Couldn't save the section draft (${res.status}).`)); return; }
+      dirtyRef.current = false;
+      location.reload(); // refresh the draft status, change list and preview
+    } catch {
+      setSaveError("Couldn't reach the server. Your edits are still here.");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const reloadLatest = () => {
+    if (dirty && !window.confirm('Load the latest draft? Your unsaved section edits will be lost.')) return;
+    void reload();
+  };
+  const discardEdits = () => {
+    if (!window.confirm('Discard your unsaved section edits?')) return;
+    setPages(structuredClone(base));
+  };
+
+  const pageDirty = (id: string) => JSON.stringify(pages[id]) !== JSON.stringify(base[id]);
+  const editingSection = imageFor ? layout?.sections.find((s) => s.id === imageFor.sectionId) : undefined;
+
+  return (
+    <div className="te">
+      <p className="te-intro">
+        Build a page from your theme's sections. Edits stay on this screen until you save them to the private design
+        draft; visitors see them only after <b>Publish</b>. The page's own content is never changed.
+      </p>
+
+      <div className="te-pagebar">
+        <label className="field te-pagepick">
+          <span>Page</span>
+          <select aria-label="Page" value={page.id} onChange={(e) => { setPageId(e.target.value); setOpenId(null); }}>
+            {data.pages.map((p) => (
+              <option key={p.id} value={p.id}>
+                {p.title || p.slug}{p.isHome ? ' · home' : ''}{pages[p.id]?.mode === 'sections' ? ' · sections' : ''}{pageDirty(p.id) ? ' · edited' : ''}
+              </option>
+            ))}
+          </select>
+        </label>
+        <a className="btn sm ghost" href={`${pagePath(page)}?designPreview=1`} target="_blank" rel="noopener">
+          Preview page ↗
+        </a>
+      </div>
+
+      {!layout ? (
+        <div className="te-empty">
+          <p><b>{page.title || page.slug}</b> shows its page content.</p>
+          <p className="te-muted">Start a layout, then add Existing page content to keep your current text or widgets alongside new sections. You can switch back at any time.</p>
+          <button className="btn" type="button" onClick={() => setLayout(() => ({ mode: 'sections', sections: [{ id: newId('page-content'), type: 'page-content', version: 1, variant: 'default', hidden: false, data: {} }] }))}>Keep content and add sections</button>
+        </div>
+      ) : (
+        <>
+          <div className="te-mode">
+            <span className="te-mode-label" id="te-mode-label">Page shows</span>
+            <div className="seg" role="radiogroup" aria-labelledby="te-mode-label">
+              {(['sections', 'content'] as const).map((m) => (
+                <button
+                  key={m}
+                  type="button"
+                  role="radio"
+                  aria-checked={layout.mode === m}
+                  className={layout.mode === m ? 'on' : ''}
+                  onClick={() => setLayout((l) => ({ ...l, mode: m }))}
+                >
+                  {m === 'sections' ? 'Sections' : 'Page content'}
+                </button>
+              ))}
+            </div>
+          </div>
+          {layout.mode === 'content' && (
+            <p className="notice te-note">
+              This page shows its own content. The {layout.sections.length} {layout.sections.length === 1 ? 'section is' : 'sections are'} kept, so you can switch back later.
+            </p>
+          )}
+
+          <ol className={`te-list ${layout.mode === 'content' ? 'is-inactive' : ''}`} aria-label={`Sections on ${page.title || page.slug}`}>
+            {layout.sections.length === 0 && <li className="te-muted te-none">No sections yet. Add one below.</li>}
+            {layout.sections.map((s, i) => {
+              const def = defs[s.type];
+              const name = sectionName(def, s.type);
+              const open = openId === s.id;
+              const panelId = `te-sec-${s.id}`;
+              return (
+                <li key={s.id} className={`te-sec ${s.hidden ? 'is-hidden' : ''} ${open ? 'is-open' : ''}`}>
+                  <div className="te-sec-head">
+                    <button
+                      type="button"
+                      className="te-sec-toggle"
+                      aria-expanded={open}
+                      aria-controls={panelId}
+                      onClick={() => setOpenId(open ? null : s.id)}
+                    >
+                      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6" /></svg>
+                      <span className="te-sec-name">{name}</span>
+                      <span className="te-sec-meta">
+                        {s.variant}
+                        {s.hidden && ' · hidden'}
+                        {!def && ' · unavailable'}
+                      </span>
+                    </button>
+                    <div className="te-sec-actions">
+                      <button className="icon-btn" type="button" onClick={() => move(i, -1)} disabled={i === 0} aria-label={`Move ${name} up`} title="Move up">
+                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 15 6-6 6 6" /></svg>
+                      </button>
+                      <button className="icon-btn" type="button" onClick={() => move(i, 1)} disabled={i === layout.sections.length - 1} aria-label={`Move ${name} down`} title="Move down">
+                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
+                      </button>
+                    </div>
+                  </div>
+
+                  {open && (
+                    <div className="te-sec-body" id={panelId}>
+                      {!def ? (
+                        <p className="notice warn te-note">
+                          {theme?.name ?? 'This theme'} has no “{s.type}” section, so it won't render. Its {Object.keys(s.data).length} saved {Object.keys(s.data).length === 1 ? 'value is' : 'values are'} preserved and come back if you switch to a theme that has it.
+                        </p>
+                      ) : (
+                        <>
+                          {def.version !== undefined && s.version !== def.version && (
+                            <p className="notice warn te-note">Saved with version {s.version} of this section; the theme ships version {def.version}.</p>
+                          )}
+                          {s.type === 'page-content' && <p className="te-muted">This section uses the page's published text and widgets. Edit them in the page editor; any pending content draft stays separate.</p>}
+                          {(def.variants?.length ?? 0) > 0 && (
+                            <label className="field">
+                              <span>Variant</span>
+                              <select value={s.variant} onChange={(e) => patchSection(s.id, (x) => ({ ...x, variant: e.target.value }))}>
+                                {!def.variants!.includes(s.variant) && <option value={s.variant}>{s.variant} (not in this theme)</option>}
+                                {def.variants!.map((v) => <option key={v} value={v}>{v}</option>)}
+                              </select>
+                            </label>
+                          )}
+                          {Object.entries(def.fields ?? {}).map(([key, f]) => (
+                            <FieldInput
+                              key={key}
+                              id={`${panelId}-${key}`}
+                              field={f}
+                              value={s.data[key]}
+                              onChange={(v) => setField(s.id, key, v)}
+                              onPickImage={() => setImageFor({ sectionId: s.id, key })}
+                            />
+                          ))}
+                        </>
+                      )}
+                      <div className="te-sec-foot">
+                        <button className="btn sm" type="button" aria-pressed={s.hidden} onClick={() => patchSection(s.id, (x) => ({ ...x, hidden: !x.hidden }))}>
+                          {s.hidden ? 'Show section' : 'Hide section'}
+                        </button>
+                        <button className="btn sm" type="button" onClick={() => duplicate(i)}>Duplicate</button>
+                        <button className="btn sm ghost danger te-delete" type="button" onClick={() => remove(s)}>Delete section</button>
+                      </div>
+                    </div>
+                  )}
+                </li>
+              );
+            })}
+          </ol>
+
+          <div className="te-add">
+            <label className="field">
+              <span>Add a section</span>
+              <select aria-label="Add a section" value={addType} onChange={(e) => setAddType(e.target.value)} disabled={defTypes.length === 0}>
+                {defTypes.length === 0 && <option value="">This theme has no sections</option>}
+                {defTypes.map((t) => <option key={t} value={t}>{sectionName(defs[t], t)}</option>)}
+              </select>
+            </label>
+            <button className="btn" type="button" onClick={addSection} disabled={!defs[addType]}>Add</button>
+          </div>
+        </>
+      )}
+
+      {conflict && (
+        <div className="notice warn te-alert" role="alert">
+          <span>The design draft changed somewhere else since this screen loaded. Your edits are still here and weren't saved.</span>
+          <button className="btn sm" type="button" onClick={reloadLatest}>Load latest draft</button>
+        </div>
+      )}
+      {saveError && <p className="flash error te-alert" role="alert">{saveError}</p>}
+
+      <div className="te-savebar">
+        <span className={`te-savestate ${dirty ? 'is-dirty' : ''}`} aria-live="polite">
+          {dirty ? 'Unsaved section edits' : 'No unsaved section edits'}
+        </span>
+        {dirty && <button className="btn sm ghost" type="button" onClick={discardEdits} disabled={saving}>Discard edits</button>}
+        <button className="btn sm" type="button" onClick={() => void save()} disabled={!dirty || saving || conflict}>
+          {saving ? 'Saving…' : 'Save section draft'}
+        </button>
+      </div>
+
+      <ImagePicker
+        open={Boolean(imageFor && editingSection)}
+        unsplashEnabled={unsplashEnabled}
+        onClose={() => setImageFor(null)}
+        onSelect={(img) => {
+          if (imageFor) setField(imageFor.sectionId, imageFor.key, img.src);
+          setImageFor(null);
+        }}
+      />
+    </div>
+  );
+}
+
+function FieldInput({ id, field, value, onChange, onPickImage }: {
+  id: string;
+  field: FieldDef;
+  value: SectionValue | undefined;
+  onChange: (v: SectionValue | undefined) => void;
+  onPickImage: () => void;
+}) {
+  const shown = value ?? field.default ?? '';
+  switch (field.type) {
+    case 'textarea':
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <textarea id={id} rows={4} value={String(shown)} onChange={(e) => onChange(e.target.value)} />
+        </label>
+      );
+    case 'number':
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <input
+            id={id}
+            type="number"
+            value={shown === '' ? '' : String(shown)}
+            onChange={(e) => {
+              const n = e.target.valueAsNumber;
+              onChange(e.target.value === '' || !Number.isFinite(n) ? undefined : n);
+            }}
+          />
+        </label>
+      );
+    case 'select': {
+      const opts = field.options ?? [];
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <select id={id} value={String(shown)} onChange={(e) => onChange(e.target.value)}>
+            {!opts.includes(String(shown)) && <option value={String(shown)}>{shown === '' ? 'Choose…' : `${shown} (not an option)`}</option>}
+            {opts.map((o) => <option key={o} value={o}>{o}</option>)}
+          </select>
+        </label>
+      );
+    }
+    case 'image':
+      return (
+        <div className="field te-image">
+          <label htmlFor={id}><span>{field.label}</span></label>
+          <div className="te-image-row">
+            {shown !== '' && <img className="te-thumb" src={String(shown)} alt="" />}
+            <input id={id} className="mono" type="url" placeholder="https://" value={String(shown)} onChange={(e) => onChange(e.target.value)} />
+            <button className="btn sm" type="button" onClick={onPickImage}>Choose…</button>
+          </div>
+        </div>
+      );
+    case 'url':
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <input id={id} className="mono" type="url" placeholder="https:// or /path" value={String(shown)} onChange={(e) => onChange(e.target.value)} />
+        </label>
+      );
+    default:
+      return (
+        <label className="field" htmlFor={id}>
+          <span>{field.label}</span>
+          <input id={id} type="text" value={String(shown)} onChange={(e) => onChange(e.target.value)} />
+        </label>
+      );
+  }
+}
+
+/** Review tab: which pages the staged draft re-lays out, vs the live site */
+export function SectionsReview({ api }: { api: ReturnType<typeof useDesignApi> }) {
+  const { data, error } = api;
+  if (error && !data) return <p className="te-muted">Page layouts couldn't be loaded: {error}</p>;
+  if (!data) return <p className="te-muted">Loading page layouts…</p>;
+  const live = (data.live.sectionPages ?? {}) as SectionPages;
+  const staged = data.draft?.sectionPages as SectionPages | undefined;
+  if (!staged) return <p className="te-muted">No page layout changes are staged.</p>;
+  const ids = [...new Set([...Object.keys(live), ...Object.keys(staged)])]
+    .filter((id) => JSON.stringify(live[id]) !== JSON.stringify(staged[id]));
+  if (ids.length === 0) return <p className="te-muted">No page layout changes are staged.</p>;
+  return (
+    <ul className="te-review">
+      {ids.map((id) => {
+        const p = data.pages.find((x) => x.id === id);
+        const s = staged[id];
+        const shown = s ? s.sections.filter((x) => !x.hidden).length : 0;
+        return (
+          <li key={id}>
+            <span className="te-review-page">{p ? p.title || p.slug : 'Deleted page'}{p?.isHome ? ' · home' : ''}</span>
+            <span className="te-review-what">
+              {!s ? 'Layout removed' : s.mode === 'content' ? 'Shows page content' : `${shown} visible ${shown === 1 ? 'section' : 'sections'}`}
+            </span>
+            {p && <a className="btn sm ghost" href={`${pagePath(p)}?designPreview=1`} target="_blank" rel="noopener">Preview ↗</a>}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/components/booking/BookingFlow.astro

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