@acms-subir/core 0.2.0 → 0.3.0

package/src/pages/admin/calendar/resources/[id].astro

@@ -0,0 +1,180 @@
+---
+import Admin from '../../../../layouts/Admin.astro';
+import HoursEditor from '../../../../components/booking/HoursEditor.astro';
+import { getRepo } from '../../../../lib/repo';
+import { slugify } from '../../../../lib/schema';
+import { bookingLinkUrl, bookingsEnabled, CALENDAR, resourceFeedUrl, resourceUrl } from '../../../../lib/calendar/config';
+import { hoursFromForm, int, list, overridesFromForm } from '../../../../lib/booking/forms';
+import { describeLink } from '../../../../lib/booking/availability';
+import { isValidTimeZone } from '../../../../lib/calendar/events';
+import { normalizeCalendarSrc } from '../../../../lib/calendar/src';
+import { siteOrigin } from '../../../../lib/seo';
+
+// One resource: details, weekly hours, date overrides, calendars that block
+// time, who gets notified, the staff feed, and its booking links.
+if (!bookingsEnabled()) return new Response(null, { status: 404 });
+const repo = await getRepo(Astro.locals);
+const id = Astro.params.id!;
+let resource = await repo.getResource(id);
+if (!resource) return new Response(null, { status: 404 });
+const settings = await repo.getSettings();
+const origin = siteOrigin(settings, Astro.url);
+let notice = Astro.url.searchParams.has('created') ? 'Created. Set its hours, then share the booking link.' : '';
+let error = '';
+const token = () => btoa(String.fromCharCode(...crypto.getRandomValues(new Uint8Array(18)))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+
+if (Astro.request.method === 'POST') {
+  const form = await Astro.request.formData();
+  const op = String(form.get('op'));
+  if (op === 'save') {
+    const name = String(form.get('name') || '').trim().slice(0, 120) || resource.name;
+    const base = slugify(String(form.get('slug') || name));
+    let slug = base;
+    for (let n = 2; ; n++) { const hit = await repo.getResourceBySlug(slug); if (!hit || hit.id === id) break; slug = `${base}-${n}`; }
+    const tz = String(form.get('timezone') || '').trim();
+    const feeds = list(String(form.get('busyFeeds') || ''));
+    const busyFeeds = feeds.map((f) => normalizeCalendarSrc(f)).filter((f): f is string => Boolean(f));
+    if (busyFeeds.length < feeds.length) error = 'One of the calendar links isn’t an ICS / Google Calendar link, so it was skipped.';
+    const emails = list(String(form.get('notifyEmails') || '')).filter((e) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e));
+    await repo.updateResource(id, {
+      name, slug, kind: String(form.get('kind') || resource.kind).slice(0, 40),
+      capacity: form.get('capacity') ? int(form.get('capacity'), 1, 100000, 1) : null,
+      description: String(form.get('description') || '').slice(0, 2000),
+      photo: /^(https?:\/\/|\/)/.test(String(form.get('photo') || '')) ? String(form.get('photo')) : '',
+      amenities: list(String(form.get('amenities') || '')).slice(0, 20),
+      timezone: tz && isValidTimeZone(tz) ? tz : '',
+      visibility: form.get('visibility') === 'unlisted' ? 'unlisted' : 'public',
+      showOnCalendar: Boolean(form.get('showOnCalendar')),
+      hours: hoursFromForm(form), overrides: overridesFromForm(form), busyFeeds, notifyEmails: emails,
+    });
+    notice = error ? '' : 'Saved.';
+  } else if (op === 'link') {
+    const name = String(form.get('linkName') || '').trim().slice(0, 120) || 'Booking';
+    const base = slugify(name);
+    let slug = base;
+    for (let n = 2; await repo.getBookingLinkBySlug(id, slug); n++) slug = `${base}-${n}`;
+    const l = await repo.createBookingLink({ resourceId: id, name, slug, autoConfirm: true });
+    return Astro.redirect(`/admin/calendar/resources/${id}/links/${l.id}`);
+  } else if (op === 'rotate') {
+    await repo.updateResource(id, { feedToken: token() });
+    notice = 'New staff feed link created — the old one stopped working.';
+  } else if (op === 'delete') {
+    await repo.deleteResource(id);
+    return Astro.redirect('/admin/calendar/resources');
+  }
+  resource = (await repo.getResource(id))!;
+}
+const links = await repo.listBookingLinks(id);
+const staffFeed = origin + resourceFeedUrl(resource.slug, resource.feedToken);
+const ovRows = [...resource.overrides, { date: '', endDate: '', ranges: [], label: '' }, { date: '', endDate: '', ranges: [], label: '' }];
+---
+
+<Admin title={resource.name} section="calendar:resources">
+  <div class="page-head">
+    <div>
+      <p class="sub"><a href="/admin/calendar/resources">Resources</a> ›</p>
+      <h1>{resource.name}</h1>
+      <p class="sub"><a href={resourceUrl(resource.slug)} target="_blank" rel="noopener">{origin.replace(/^https?:\/\//, '')}{resourceUrl(resource.slug)} ↗</a></p>
+    </div>
+    <div class="page-actions"><button class="btn primary" type="submit" form="res-form">Save</button></div>
+  </div>
+  {notice && <p class="notice" role="status">{notice}</p>}
+  {error && <p class="notice warn">{error}</p>}
+
+  <div class="res-grid">
+    <div>
+      <section class="card card-pad">
+        <div class="card-head"><b>Booking links</b><span class="hint">Each link is its own shareable page with its own rules</span></div>
+        <div class="res-linklist">
+          {links.map((l) => (
+            <a class="res-linkrow" href={`/admin/calendar/resources/${id}/links/${l.id}`}>
+              <span><b>{l.name}</b>{!l.active && <span class="pill lang">Off</span>}{l.visibility === 'unlisted' && <span class="pill lang">Unlisted</span>}</span>
+              <small>{describeLink(l)} · {l.mode === 'range' ? 'choose a length' : l.mode === 'day' ? 'whole days' : 'fixed length'} · <em class={l.autoConfirm ? 'auto' : 'manual'}>{l.autoConfirm ? 'Confirms automatically' : 'Needs approval'}</em></small>
+              <code>{bookingLinkUrl(resource.slug, l.slug)}</code>
+            </a>
+          ))}
+        </div>
+        <form method="post" class="res-newlink">
+          <input type="hidden" name="op" value="link" />
+          <input type="text" name="linkName" placeholder="New link, e.g. “Event or reception”" required />
+          <button class="btn" type="submit">Add link</button>
+        </form>
+      </section>
+
+      <section class="card card-pad">
+        <div class="card-head"><b>Open hours</b><span class="hint">The outer limit for every link</span></div>
+        <HoursEditor hours={resource.hours} prefix="hours" form="res-form" note={`Times in ${resource.timezone || settings.timezone || 'UTC'}. Links can narrow these hours but never extend them.`} />
+      </section>
+
+      <section class="card card-pad">
+        <div class="card-head"><b>Date overrides</b><span class="hint">Holidays, closures, special hours</span></div>
+        <div class="ov-list">
+          {ovRows.map((o, i) => (
+            <div class="ov-row">
+              <input type="date" name={`ov_${i}_date`} value={o.date} form="res-form" aria-label="From" />
+              <input type="date" name={`ov_${i}_end`} value={o.endDate} form="res-form" aria-label="Until (optional)" />
+              <label class="ov-closed"><input type="checkbox" name={`ov_${i}_closed`} checked={Boolean(o.date) && !o.ranges.length} form="res-form" /> Closed</label>
+              <input type="time" name={`ov_${i}_s`} value={o.ranges[0]?.start ?? ''} form="res-form" aria-label="Opens" />
+              <input type="time" name={`ov_${i}_e`} value={o.ranges[0]?.end ?? ''} form="res-form" aria-label="Closes" />
+              <input type="text" name={`ov_${i}_label`} value={o.label} placeholder="Label" form="res-form" />
+            </div>
+          ))}
+        </div>
+        <p class="hint">Leave a row empty to remove it. Two blank rows are always here for new dates.</p>
+      </section>
+    </div>
+
+    <form method="post" id="res-form" class="res-side">
+      <input type="hidden" name="op" value="save" />
+      <section class="card card-pad">
+        <div class="card-head"><b>Details</b></div>
+        <label class="field"><span>Name</span><input type="text" name="name" value={resource.name} required /></label>
+        <div class="field-row">
+          <label class="field"><span>Kind</span><input type="text" name="kind" list="res-kinds" value={resource.kind} /></label>
+          <label class="field"><span>Capacity</span><input type="number" name="capacity" min="1" value={resource.capacity ?? ''} /></label>
+        </div>
+        <datalist id="res-kinds">{CALENDAR.resourceKinds.map((k) => <option value={k} />)}</datalist>
+        <label class="field"><span>URL name</span><input type="text" class="mono" name="slug" value={resource.slug} /></label>
+        <label class="field"><span>Description</span><textarea name="description" rows="3">{resource.description}</textarea></label>
+        <label class="field"><span>Photo URL</span><input type="text" class="mono" name="photo" value={resource.photo} placeholder="/media/… or https://…" /></label>
+        <label class="field"><span>Amenities <em class="hint">comma-separated</em></span><input type="text" name="amenities" value={resource.amenities.join(', ')} placeholder="Kitchen, Projector, Accessible" /></label>
+        <label class="field"><span>Timezone</span><input type="text" name="timezone" value={resource.timezone} placeholder={`${settings.timezone || 'UTC'} (site default)`} /></label>
+        <label class="field">
+          <span>Listed</span>
+          <select name="visibility">
+            <option value="public" selected={resource.visibility === 'public'}>Public — listed on {CALENDAR.bookBase}</option>
+            <option value="unlisted" selected={resource.visibility === 'unlisted'}>Unlisted — only people with the link</option>
+          </select>
+        </label>
+        <label class="check-row"><input type="checkbox" name="showOnCalendar" checked={resource.showOnCalendar} /> Show confirmed bookings on the public calendar as “Reserved”</label>
+      </section>
+      <section class="card card-pad">
+        <div class="card-head"><b>Busy calendars</b></div>
+        <label class="field"><span>Block time from these calendars <em class="hint">one per line</em></span>
+          <textarea name="busyFeeds" rows="3" class="mono" placeholder="A Google Calendar secret iCal address, or any .ics link">{resource.busyFeeds.join('\n')}</textarea></label>
+        <p class="hint">Anything on these calendars can’t be booked — handy for a person’s own Google Calendar.</p>
+      </section>
+      <section class="card card-pad">
+        <div class="card-head"><b>Notifications</b></div>
+        <label class="field"><span>Email new bookings to <em class="hint">comma-separated</em></span><input type="text" name="notifyEmails" value={resource.notifyEmails.join(', ')} placeholder="office@example.org" /></label>
+        <span class="hint">Staff feed — subscribe in Google, Apple or Outlook (includes names):</span>
+        <div class="cal-feed"><input type="text" class="mono" readonly value={staffFeed} /><button class="btn sm" type="button" data-copy={staffFeed}>Copy</button><button class="btn sm ghost" type="submit" form="res-rotate">New link</button></div>
+      </section>
+      <button class="btn danger ghost" type="submit" form="res-delete">Delete resource</button>
+    </form>
+  </div>
+  <form method="post" id="res-rotate"><input type="hidden" name="op" value="rotate" /></form>
+  <form method="post" id="res-delete" data-confirm-submit={`Delete ${resource.name} and its booking links? Past bookings stay in the list.`}><input type="hidden" name="op" value="delete" /></form>
+</Admin>
+
+<script>
+  document.querySelectorAll<HTMLFormElement>('form[data-confirm-submit]').forEach((f) =>
+    f.addEventListener('submit', (e) => { if (!confirm(f.dataset.confirmSubmit)) e.preventDefault(); }));
+  document.addEventListener('click', async (e) => {
+    const b = e.target instanceof Element ? e.target.closest<HTMLButtonElement>('[data-copy]') : null;
+    if (!b) return;
+    await navigator.clipboard.writeText(b.dataset.copy ?? '');
+    b.textContent = 'Copied';
+    setTimeout(() => (b.textContent = 'Copy'), 1200);
+  });
+</script>

package/src/pages/admin/calendar/resources/index.astro

@@ -0,0 +1,106 @@
+---
+import Admin from '../../../../layouts/Admin.astro';
+import Modal from '../../../../components/Modal.astro';
+import { getRepo } from '../../../../lib/repo';
+import { slugify } from '../../../../lib/schema';
+import { bookingsEnabled, CALENDAR, resourceUrl } from '../../../../lib/calendar/config';
+import { DEFAULT_HOURS, int } from '../../../../lib/booking/forms';
+import { availabilityContext } from '../../../../lib/booking/service';
+import { describeLink, nextOpenings } from '../../../../lib/booking/availability';
+import { fmt } from '../../../../lib/booking/view';
+
+// Everything people can book: rooms, people, vehicles, equipment. Each row
+// shows its booking links and when it's next free.
+if (!bookingsEnabled()) return new Response(null, { status: 404 });
+const repo = await getRepo(Astro.locals);
+const settings = await repo.getSettings();
+
+if (Astro.request.method === 'POST') {
+  const form = await Astro.request.formData();
+  const op = String(form.get('op'));
+  if (op === 'create') {
+    const name = String(form.get('name') || '').trim().slice(0, 120) || 'Untitled';
+    const base = slugify(name);
+    let slug = base;
+    for (let n = 2; await repo.getResourceBySlug(slug); n++) slug = `${base}-${n}`;
+    const kind = String(form.get('kind') || CALENDAR.resourceKinds[0]).slice(0, 40);
+    const capacity = form.get('capacity') ? int(form.get('capacity'), 1, 100000, 1) : null;
+    const r = await repo.createResource({ name, slug, kind, capacity, hours: DEFAULT_HOURS, timezone: '' });
+    // every resource starts with one ready-to-share link that confirms itself
+    await repo.createBookingLink({ resourceId: r.id, name: kind === 'Person' ? 'Meeting' : 'Book', slug: 'book', duration: 60, step: 30, autoConfirm: true });
+    return Astro.redirect(`/admin/calendar/resources/${r.id}?created=1`);
+  }
+  if (op === 'move') {
+    const ids = (await repo.listResources()).map((r) => r.id);
+    const i = ids.indexOf(String(form.get('id')));
+    const j = form.get('dir') === 'up' ? i - 1 : i + 1;
+    if (i >= 0 && j >= 0 && j < ids.length) [ids[i], ids[j]] = [ids[j], ids[i]];
+    await repo.reorderResources(ids);
+    return Astro.redirect('/admin/calendar/resources');
+  }
+}
+
+const [resources, links] = await Promise.all([repo.listResources(), repo.listBookingLinks()]);
+const now = Date.now();
+const rows = await Promise.all(resources.map(async (r) => {
+  const own = links.filter((l) => l.resourceId === r.id);
+  const first = own.find((l) => l.active);
+  const next = first ? nextOpenings(await availabilityContext(repo, r, first, settings, now), 1)[0] : undefined;
+  const f = fmt(settings, r.timezone || settings.timezone || 'UTC');
+  return { r, own, next: next ? `${f.day.format(next.start)} ${f.time.format(next.start)}` : '' };
+}));
+---
+
+<Admin title="Resources" section="calendar:resources">
+  <div class="page-head">
+    <div>
+      <h1>Resources</h1>
+      <p class="sub">Rooms, people and things people can book · public list at <a href={CALENDAR.bookBase} target="_blank" rel="noopener">{CALENDAR.bookBase}</a></p>
+    </div>
+    <div class="page-actions"><button class="btn primary" type="button" data-modal="res-new">New resource</button></div>
+  </div>
+
+  <Modal id="res-new" title="New resource" open={Astro.url.searchParams.has('new')}>
+    <form method="post">
+      <input type="hidden" name="op" value="create" />
+      <label class="field"><span>Name</span><input type="text" name="name" placeholder="Fellowship Hall" required autofocus /></label>
+      <div class="field-row">
+        <label class="field"><span>Kind</span><select name="kind">{CALENDAR.resourceKinds.map((k) => <option>{k}</option>)}</select></label>
+        <label class="field"><span>Capacity <em class="hint">optional</em></span><input type="number" name="capacity" min="1" placeholder="120" /></label>
+      </div>
+      <div class="modal-foot"><button class="btn ghost" type="button" data-close>Cancel</button><button class="btn primary" type="submit">Create</button></div>
+      <p class="hint modal-note">Starts open weekdays 9–5 with one booking link that confirms automatically. Change both on the next screen.</p>
+    </form>
+  </Modal>
+
+  {rows.length === 0 ? (
+    <div class="empty-state">
+      <b>Nothing to book yet</b>
+      <p>Add a room, a person’s time, or a piece of equipment. Each gets its own booking page and links.</p>
+      <button class="btn primary" type="button" data-modal="res-new">New resource</button>
+    </div>
+  ) : (
+    <div class="res-list">
+      {rows.map(({ r, own, next }, i) => (
+        <article class="res-row">
+          <a class="res-thumb" href={`/admin/calendar/resources/${r.id}`}>
+            {r.photo ? <img src={r.photo} alt="" /> : <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21V9l9-5 9 5v12M9 21v-6h6v6" /></svg>}
+          </a>
+          <a class="res-main" href={`/admin/calendar/resources/${r.id}`}>
+            <b>{r.name} <span class="pill lang">{r.kind}</span>{r.visibility === 'unlisted' && <span class="pill lang">Unlisted</span>}</b>
+            <small>{[r.capacity ? `Up to ${r.capacity}` : '', `${own.length} link${own.length === 1 ? '' : 's'}`, next ? `next free ${next}` : 'no openings soon'].filter(Boolean).join(' · ')}</small>
+            <span class="res-links">{own.map((l) => <span class={`res-link${l.active ? '' : ' is-off'}`}>{l.name} · {describeLink(l)} · <em class={l.autoConfirm ? 'auto' : 'manual'}>{l.autoConfirm ? 'auto-confirm' : 'approval'}</em></span>)}</span>
+          </a>
+          <div class="cal-actions">
+            <a class="icon-btn" href={resourceUrl(r.slug)} target="_blank" rel="noopener" title="View booking page" aria-label="View booking page"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" /></svg></a>
+            <form method="post" class="cal-move">
+              <input type="hidden" name="op" value="move" /><input type="hidden" name="id" value={r.id} />
+              <button class="icon-btn" name="dir" value="up" disabled={i === 0} aria-label="Move up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 15l6-6 6 6" /></svg></button>
+              <button class="icon-btn" name="dir" value="down" disabled={i === rows.length - 1} aria-label="Move down"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6" /></svg></button>
+            </form>
+          </div>
+        </article>
+      ))}
+    </div>
+  )}
+</Admin>

package/src/pages/admin/calendar/resources/link.astro

@@ -0,0 +1,196 @@
+---
+import Admin from '../../../../layouts/Admin.astro';
+import HoursEditor from '../../../../components/booking/HoursEditor.astro';
+import { getRepo } from '../../../../lib/repo';
+import { slugify, QUESTION_TYPES, type BookingMode } from '../../../../lib/schema';
+import { bookingLinkUrl, bookingsEnabled } from '../../../../lib/calendar/config';
+import { hoursFromForm, int, list, questionsFromForm } from '../../../../lib/booking/forms';
+import { describeLink } from '../../../../lib/booking/availability';
+import { siteOrigin } from '../../../../lib/seo';
+
+// One booking link (mockup H): how people book, whether it confirms on its
+// own, when it's open (within the resource's hours), and what we ask.
+if (!bookingsEnabled()) return new Response(null, { status: 404 });
+const repo = await getRepo(Astro.locals);
+const resource = await repo.getResource(Astro.params.id!);
+let link = resource ? await repo.getBookingLink(Astro.params.link!) : null;
+if (!resource || !link || link.resourceId !== resource.id) return new Response(null, { status: 404 });
+const settings = await repo.getSettings();
+const origin = siteOrigin(settings, Astro.url);
+let notice = '';
+
+if (Astro.request.method === 'POST') {
+  const form = await Astro.request.formData();
+  const ops = form.getAll('op');
+  const op = String(ops[ops.length - 1]);
+  if (op === 'delete') {
+    await repo.deleteBookingLink(link.id);
+    return Astro.redirect(`/admin/calendar/resources/${resource.id}`);
+  }
+  const name = String(form.get('name') || '').trim().slice(0, 120) || link.name;
+  const base = slugify(String(form.get('slug') || name));
+  let slug = base;
+  for (let n = 2; ; n++) { const hit = await repo.getBookingLinkBySlug(resource.id, slug); if (!hit || hit.id === link.id) break; slug = `${base}-${n}`; }
+  const mode = (['slots', 'range', 'day'] as const).find((m) => m === form.get('mode')) ?? 'slots';
+  const lengths = list(String(form.get('lengths') || '')).map((x) => Math.round(Number(x) * 60)).filter((n) => n >= 15 && n <= 1440);
+  await repo.updateBookingLink(link.id, {
+    name, slug, mode: mode as BookingMode,
+    description: String(form.get('description') || '').slice(0, 1000),
+    duration: int(form.get('duration'), 5, 1440, 60),
+    lengths,
+    minDays: int(form.get('minDays'), 1, 60, 1),
+    maxDays: Math.max(int(form.get('minDays'), 1, 60, 1), int(form.get('maxDays'), 1, 60, 1)),
+    step: int(form.get('step'), 5, 240, 30),
+    bufferBefore: int(form.get('bufferBefore'), 0, 480, 0),
+    bufferAfter: int(form.get('bufferAfter'), 0, 480, 0),
+    minNotice: int(form.get('minNoticeH'), 0, 24 * 60, 2) * 60,
+    maxAdvance: int(form.get('maxAdvance'), 1, 730, 90),
+    perDayCap: int(form.get('perDayCap'), 0, 100, 0),
+    hours: form.get('customHours') ? hoursFromForm(form, 'lh') : null,
+    autoConfirm: Boolean(form.get('autoConfirm')),
+    visibility: form.get('visibility') === 'unlisted' ? 'unlisted' : 'public',
+    askPhone: Boolean(form.get('askPhone')),
+    questions: questionsFromForm(form),
+    confirmMessage: String(form.get('confirmMessage') || '').slice(0, 1000),
+    redirectUrl: /^https?:\/\//.test(String(form.get('redirectUrl') || '')) ? String(form.get('redirectUrl')) : '',
+    active: Boolean(form.get('active')),
+  });
+  link = (await repo.getBookingLink(link.id))!;
+  notice = 'Saved.';
+}
+const publicUrl = origin + bookingLinkUrl(resource.slug, link.slug);
+const embed = `<iframe src="${origin}/embed/book/${resource.slug}/${link.slug}" style="width:100%;height:620px;border:0" title="${link.name}"></iframe>`;
+const qRows = [...link.questions, ...Array.from({ length: 2 }, () => ({ id: '', label: '', type: 'text' as const, required: false, options: [] as string[], help: '' }))];
+const hours = (link.hours ?? resource.hours);
+---
+
+<Admin title={link.name} section="calendar:resources">
+  <div class="page-head">
+    <div>
+      <p class="sub"><a href="/admin/calendar/resources">Resources</a> › <a href={`/admin/calendar/resources/${resource.id}`}>{resource.name}</a> ›</p>
+      <h1>{link.name}</h1>
+      <p class="sub"><a href={publicUrl} target="_blank" rel="noopener">{publicUrl.replace(/^https?:\/\//, '')} ↗</a> · {describeLink(link)}</p>
+    </div>
+    <div class="page-actions">
+      <a class="btn" href={publicUrl} target="_blank" rel="noopener">Preview</a>
+      <button class="btn primary" type="submit" form="link-form">Save</button>
+    </div>
+  </div>
+  {notice && <p class="notice" role="status">{notice}</p>}
+
+  <form method="post" id="link-form" class="res-grid">
+    <input type="hidden" name="op" value="save" />
+    <div>
+      <section class={`card card-pad confirm-card${link.autoConfirm ? ' is-auto' : ''}`}>
+        <label class="confirm-switch">
+          <input type="checkbox" role="switch" class="sw" name="autoConfirm" checked={link.autoConfirm} />
+          <span><b>Confirm automatically</b><small>On: bookings are confirmed right away and show on the calendar. Off: they wait in Bookings → Unconfirmed until you approve them.</small></span>
+        </label>
+      </section>
+
+      <section class="card card-pad">
+        <div class="card-head"><b>How people book</b></div>
+        <div class="seg block mode-seg" role="radiogroup">
+          {[['slots', 'Fixed length'], ['range', 'Choose a length'], ['day', 'Whole days']].map(([v, l]) => (
+            <label class={link.mode === v ? 'on' : ''}><input type="radio" name="mode" value={v} checked={link.mode === v} /> {l}</label>
+          ))}
+        </div>
+        <div class="field-row three mode-fields">
+          <label class="field" data-mode="slots"><span>Length (minutes)</span><input type="number" name="duration" min="5" max="1440" value={link.duration} /></label>
+          <label class="field" data-mode="range"><span>Lengths offered (hours)</span><input type="text" name="lengths" value={link.lengths.map((n) => n / 60).join(', ')} placeholder="4, 5, 6, 8" /></label>
+          <label class="field" data-mode="day"><span>Min days</span><input type="number" name="minDays" min="1" max="60" value={link.minDays} /></label>
+          <label class="field" data-mode="day"><span>Max days</span><input type="number" name="maxDays" min="1" max="60" value={link.maxDays} /></label>
+          <label class="field" data-mode="slots range"><span>Start every (minutes)</span><input type="number" name="step" min="5" max="240" value={link.step} /></label>
+        </div>
+        <div class="field-row three">
+          <label class="field"><span>Setup before (min)</span><input type="number" name="bufferBefore" min="0" max="480" value={link.bufferBefore} /></label>
+          <label class="field"><span>Cleanup after (min)</span><input type="number" name="bufferAfter" min="0" max="480" value={link.bufferAfter} /></label>
+          <label class="field"><span>Max per day <em class="hint">0 = no limit</em></span><input type="number" name="perDayCap" min="0" max="100" value={link.perDayCap} /></label>
+          <label class="field"><span>Book at least (hours ahead)</span><input type="number" name="minNoticeH" min="0" max="1440" value={Math.round(link.minNotice / 60)} /></label>
+          <label class="field"><span>Book up to (days ahead)</span><input type="number" name="maxAdvance" min="1" max="730" value={link.maxAdvance} /></label>
+        </div>
+      </section>
+
+      <section class="card card-pad">
+        <div class="card-head"><b>Hours for this link</b></div>
+        <label class="check-row"><input type="checkbox" name="customHours" checked={Boolean(link.hours)} data-toggle="lh-box" /> Narrow the {resource.name.toLowerCase()} hours for this link</label>
+        <div id="lh-box" hidden={!link.hours}>
+          <HoursEditor hours={hours} prefix="lh" bounds={resource.hours} note={`Green = this link, grey = when ${resource.name} is open. The link can only narrow those hours.`} />
+        </div>
+        {!link.hours && <p class="hint">Uses {resource.name}’s open hours.</p>}
+      </section>
+
+      <section class="card card-pad">
+        <div class="card-head"><b>Questions</b><span class="hint">Name and email are always asked</span></div>
+        <label class="check-row"><input type="checkbox" name="askPhone" checked={link.askPhone} /> Ask for a phone number</label>
+        <div class="q-list">
+          {qRows.map((q, i) => (
+            <div class={`q-row${q.label ? '' : ' is-blank'}`}>
+              <input type="hidden" name={`qq_${i}_id`} value={q.id} />
+              <input type="text" name={`qq_${i}_label`} value={q.label} placeholder={q.label ? '' : 'Add a question…'} aria-label="Question" />
+              <select name={`qq_${i}_type`} aria-label="Answer type">{QUESTION_TYPES.map((t) => <option value={t} selected={q.type === t}>{t}</option>)}</select>
+              <label class="q-req"><input type="checkbox" name={`qq_${i}_required`} checked={q.required} /> Required</label>
+              <input type="text" class="q-opts" name={`qq_${i}_options`} value={q.options.join(', ')} placeholder="Options, comma-separated (for select)" />
+            </div>
+          ))}
+        </div>
+        <p class="hint">Clear a question’s text to remove it. Save to get two fresh blank rows.</p>
+      </section>
+    </div>
+
+    <div class="res-side">
+      <section class="card card-pad">
+        <div class="card-head"><b>Link</b></div>
+        <label class="field"><span>Name</span><input type="text" name="name" value={link.name} required /></label>
+        <label class="field"><span>URL name</span><input type="text" class="mono" name="slug" value={link.slug} /></label>
+        <label class="field"><span>Description</span><textarea name="description" rows="3" placeholder="What this booking is for">{link.description}</textarea></label>
+        <label class="field">
+          <span>Who can find it</span>
+          <select name="visibility">
+            <option value="public" selected={link.visibility === 'public'}>Listed on the {resource.name} page</option>
+            <option value="unlisted" selected={link.visibility === 'unlisted'}>Unlisted — share the link directly</option>
+          </select>
+        </label>
+        <label class="check-row"><input type="checkbox" name="active" checked={link.active} /> Taking bookings</label>
+      </section>
+      <section class="card card-pad">
+        <div class="card-head"><b>After booking</b></div>
+        <label class="field"><span>Confirmation message</span><textarea name="confirmMessage" rows="3" placeholder="Shown on the confirmation page and in the email">{link.confirmMessage}</textarea></label>
+        <label class="field"><span>Redirect to <em class="hint">optional</em></span><input type="text" class="mono" name="redirectUrl" value={link.redirectUrl} placeholder="https://…" /></label>
+      </section>
+      <section class="card card-pad">
+        <div class="card-head"><b>Share</b></div>
+        <div class="cal-feed"><input type="text" class="mono" readonly value={publicUrl} /><button class="btn sm" type="button" data-copy={publicUrl}>Copy</button></div>
+        <span class="hint" style="display:block;margin-top:10px">Embed on another site:</span>
+        <div class="cal-feed"><input type="text" class="mono" readonly value={embed} /><button class="btn sm" type="button" data-copy={embed}>Copy</button></div>
+      </section>
+      <button class="btn danger ghost" type="submit" name="op" value="delete" formnovalidate data-confirm="Delete this booking link? Existing bookings stay.">Delete link</button>
+    </div>
+  </form>
+</Admin>
+
+<script>
+  const form = document.getElementById('link-form') as HTMLFormElement;
+  const sync = () => {
+    const mode = (form.querySelector<HTMLInputElement>('input[name=mode]:checked')?.value) ?? 'slots';
+    form.querySelectorAll<HTMLElement>('.mode-seg label').forEach((l) => l.classList.toggle('on', l.querySelector('input')?.checked ?? false));
+    form.querySelectorAll<HTMLElement>('.mode-fields [data-mode]').forEach((el) => { el.hidden = !(el.dataset.mode ?? '').split(' ').includes(mode); });
+    const auto = form.querySelector<HTMLInputElement>('input[name=autoConfirm]');
+    form.querySelector('.confirm-card')?.classList.toggle('is-auto', Boolean(auto?.checked));
+  };
+  form.addEventListener('change', (e) => {
+    sync();
+    const t = e.target as HTMLInputElement;
+    if (t.dataset.toggle) { const box = document.getElementById(t.dataset.toggle); if (box) box.hidden = !t.checked; }
+  });
+  sync();
+  document.addEventListener('click', async (e) => {
+    const c = e.target instanceof Element ? e.target.closest<HTMLElement>('[data-confirm]') : null;
+    if (c && !confirm(c.dataset.confirm)) { e.preventDefault(); return; }
+    const b = e.target instanceof Element ? e.target.closest<HTMLButtonElement>('[data-copy]') : null;
+    if (!b) return;
+    await navigator.clipboard.writeText(b.dataset.copy ?? '');
+    b.textContent = 'Copied';
+    setTimeout(() => (b.textContent = 'Copy'), 1200);
+  });
+</script>

package/src/pages/admin/design.astro

@@ -3,7 +3,8 @@ import Admin from '../../layouts/Admin.astro';
 import { getRepo } from '../../lib/repo';
 import { env } from '../../lib/env';
 import DesignManager from '../../components/DesignManager';
-import { listThemes, FONT_PAIRINGS } from '../../lib/theme';
+import { listThemes, FONT_PAIRINGS, getTheme } from '../../lib/theme';
+import { diffDesign } from '../../lib/designDiff';
 import { mergeDesignDraft } from '../../lib/drafts';
 import { postUrl } from '../../lib/content';
 // ImagePicker (logo upload) styles live in editor.css
@@ -15,7 +16,9 @@ const liveSettings = await repo.getSettings();
 const settings = mergeDesignDraft(liveSettings);
 const pendingDesign = Boolean(liveSettings.draftDesign);
 // most recent published post powers the preview's "Post" tab
-const [latestPost] = await repo.listPublishedPosts();
+const [[latestPost], liveNav] = await Promise.all([repo.listPublishedPosts(), repo.listNavItems()]);
+// "What changes": the staged draft vs the live design
+const changes = diffDesign(liveSettings, liveNav, liveSettings.draftDesign, (slug) => getTheme(slug).name);
 const postPreviewPath = latestPost ? postUrl(latestPost.slug) : null;
 // serialize to plain data for the island — no component references
 const themes = listThemes().map((t) => ({
@@ -25,6 +28,9 @@ const themes = listThemes().map((t) => ({
   tokens: t.tokens,
   post: t.post,
   hasHome: Boolean(t.HomeTemplate),
+  version: t.version,
+  templateCount: Number(Boolean(t.HomeTemplate)) + Number(Boolean(t.EventTemplate)) + Object.keys(t.postTemplates).length + Object.keys(t.pageTemplates).length,
+  sectionCount: Object.keys(t.sections).length,
 }));
 const unsplashEnabled = Boolean(env('UNSPLASH_ACCESS_KEY'));
 ---
@@ -37,11 +43,12 @@ const unsplashEnabled = Boolean(env('UNSPLASH_ACCESS_KEY'));
 
   <DesignManager
     client:only="react"
-    settings={{ ...settings, draftsApiKey: '' }}
+    settings={{ ...settings, draftsApiKey: '', ai: { ...settings.ai, encryptedKey: '' }, agent: { ...settings.agent, keyHash: '' } }}
     pendingDesign={pendingDesign}
     themes={themes}
     pairings={[...FONT_PAIRINGS]}
     unsplashEnabled={unsplashEnabled}
     postPreviewPath={postPreviewPath}
+    changes={changes}
   />
 </Admin>

package/src/pages/admin/email.astro

@@ -0,0 +1,13 @@
+---
+import Admin from '../../layouts/Admin.astro';
+import EmailSettings from '../../components/EmailSettings';
+import { getRepo } from '../../lib/repo';
+import { requireSession } from '../../lib/api';
+const repo=await getRepo(Astro.locals);
+try { await requireSession(Astro.request,Astro.cookies,repo,true); }
+catch { return new Response('Only owners can manage email.',{status:403}); }
+---
+<Admin title="Email" section="settings">
+  <div class="page-head"><h1>Email</h1><a class="btn ghost" href="/admin/settings">Site settings</a></div>
+  <EmailSettings client:load />
+</Admin>