@acms-subir/core 0.2.0 → 0.3.1

package/src/pages/book/[resource]/index.astro

@@ -0,0 +1,63 @@
+---
+import Site from '../../../layouts/Site.astro';
+import { getRepo } from '../../../lib/repo';
+import { bookingLinkUrl, bookingsEnabled, CALENDAR } from '../../../lib/calendar/config';
+import { availabilityContext } from '../../../lib/booking/service';
+import { describeLink, nextOpenings } from '../../../lib/booking/availability';
+import { fmt } from '../../../lib/booking/view';
+
+// A room (or person, or van) and its booking links (mockup C): each link is a
+// card with its rules, an Instant / Approval badge, and its next openings —
+// tap one to jump into the flow with the time filled in.
+if (!bookingsEnabled()) return new Response(null, { status: 404 });
+const repo = await getRepo(Astro.locals);
+const resource = await repo.getResourceBySlug(Astro.params.resource ?? '');
+if (!resource) return new Response(null, { status: 404, statusText: 'Not found' });
+const settings = await repo.getSettings();
+const links = (await repo.listBookingLinks(resource.id)).filter((l) => l.active && l.visibility === 'public');
+const now = Date.now();
+const tz = resource.timezone || settings.timezone || 'UTC';
+const f = fmt(settings, tz);
+const cards = await Promise.all(links.map(async (link) => {
+  const ctx = await availabilityContext(repo, resource, link, settings, now);
+  return { link, next: nextOpenings(ctx, 3) };
+}));
+const chip = (start: number, link: (typeof links)[number]) => {
+  const d = new Intl.DateTimeFormat('en-CA', { timeZone: tz, year: 'numeric', month: '2-digit', day: '2-digit' }).format(start);
+  const today = new Intl.DateTimeFormat('en-CA', { timeZone: tz, year: 'numeric', month: '2-digit', day: '2-digit' }).format(now);
+  const tomorrow = new Intl.DateTimeFormat('en-CA', { timeZone: tz, year: 'numeric', month: '2-digit', day: '2-digit' }).format(now + 86_400_000);
+  const day = d === today ? 'Today' : d === tomorrow ? 'Tomorrow' : f.day.format(start);
+  return link.mode === 'slots' ? `${day} ${f.time.format(start)}` : day;
+};
+const facts = [resource.capacity ? `Up to ${resource.capacity}` : '', ...resource.amenities].filter(Boolean);
+---
+
+<Site title={resource.name} description={resource.description || `Book ${resource.name}.`} image={resource.photo || undefined} noindex={resource.visibility === 'unlisted'}>
+  <div class="pc-res">
+    <div class="pc-res-about">
+      {resource.photo ? <img class="pc-res-photo" src={resource.photo} alt="" /> : null}
+      <span class="pc-res-kind">{resource.kind}</span>
+      <h1 class="pc-res-title">{resource.name}</h1>
+      {facts.length > 0 && <ul class="pc-res-facts">{facts.map((x) => <li>{x}</li>)}</ul>}
+      {resource.description && <p class="pc-res-desc">{resource.description}</p>}
+    </div>
+    <div class="pc-res-links">
+      {cards.length === 0 && <p class="pc-bk-empty">Online booking isn’t open for {resource.name} right now.</p>}
+      {cards.map(({ link, next }) => (
+        <article class="pc-res-link">
+          <div class="pc-res-linkhead">
+            <h2><a href={bookingLinkUrl(resource.slug, link.slug)}>{link.name}</a></h2>
+            <span class={`pc-res-badge${link.autoConfirm ? ' is-instant' : ''}`}>{link.autoConfirm ? 'Instant' : 'Approval'}</span>
+          </div>
+          <p>{[describeLink(link), link.description].filter(Boolean).join(' · ')}</p>
+          <div class="pc-res-next">
+            {next.map((s) => <a href={`${bookingLinkUrl(resource.slug, link.slug)}?date=${new Intl.DateTimeFormat('en-CA', { timeZone: tz, year: 'numeric', month: '2-digit', day: '2-digit' }).format(s.start)}&start=${s.start}&len=${s.minutes}`}>{chip(s.start, link)}</a>)}
+            {next.length === 0 && <span class="pc-res-none">No openings soon</span>}
+            <a class="pc-res-more" href={bookingLinkUrl(resource.slug, link.slug)}>{next.length ? 'More times ›' : 'See calendar ›'}</a>
+          </div>
+        </article>
+      ))}
+      <p class="pc-bk-foot"><a href={CALENDAR.bookBase}>All rooms and people</a></p>
+    </div>
+  </div>
+</Site>

package/src/pages/book/[resource].ics.ts

@@ -0,0 +1,38 @@
+import type { APIRoute } from 'astro';
+import { timingSafeEqual } from 'node:crypto';
+import { getRepo } from '../../lib/repo';
+import { bookingsEnabled } from '../../lib/calendar/config';
+import { siteOrigin } from '../../lib/seo';
+import { escapeText, foldLine } from '../../lib/calendar/ics-write';
+
+// Staff feed of a resource's bookings (names included), for Google/Apple/
+// Outlook subscriptions: /book/<slug>.ics?t=<secret from the admin>.
+const same = (a: string, b: string) => a.length === b.length && a.length > 0 && timingSafeEqual(Buffer.from(a), Buffer.from(b));
+const utc = (ms: number) => new Date(ms).toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
+
+export const GET: APIRoute = async ({ params, url, locals }) => {
+  if (!bookingsEnabled()) return new Response(null, { status: 404 });
+  const repo = await getRepo(locals);
+  const resource = await repo.getResourceBySlug(params.resource ?? '');
+  if (!resource || !same(url.searchParams.get('t') ?? '', resource.feedToken)) return new Response(null, { status: 404 });
+  const settings = await repo.getSettings();
+  const origin = siteOrigin(settings, url);
+  const host = new URL(origin).host;
+  const [bookings, links] = await Promise.all([
+    repo.listBookings({ resourceId: resource.id, from: Date.now() - 60 * 86_400_000, statuses: ['pending', 'confirmed'] }),
+    repo.listBookingLinks(resource.id),
+  ]);
+  const linkName = new Map(links.map((l) => [l.id, l.name]));
+  const lines = ['BEGIN:VCALENDAR', 'VERSION:2.0', 'PRODID:-//acms-subir//Bookings//EN', 'METHOD:PUBLISH',
+    `X-WR-CALNAME:${escapeText(`${resource.name} bookings`)}`, 'REFRESH-INTERVAL;VALUE=DURATION:PT15M'];
+  for (const b of bookings) {
+    const title = b.kind === 'block' ? `Blocked${b.notes ? ` · ${b.notes}` : ''}` : `${b.status === 'pending' ? '[Pending] ' : ''}${b.name}${b.linkId ? ` · ${linkName.get(b.linkId) ?? ''}` : ''}`;
+    const desc = [b.email, b.phone, ...Object.entries(b.answers).map(([k, v]) => `${k}: ${v}`), `${origin}/admin/calendar/bookings?b=${b.id}`].filter(Boolean).join('\n');
+    lines.push('BEGIN:VEVENT', `UID:booking-${b.id}@${host}`, `DTSTAMP:${utc(Date.now())}`, `DTSTART:${utc(b.start)}`, `DTEND:${utc(b.end)}`,
+      `SUMMARY:${escapeText(title)}`, `DESCRIPTION:${escapeText(desc)}`, `STATUS:${b.status === 'pending' ? 'TENTATIVE' : 'CONFIRMED'}`, 'END:VEVENT');
+  }
+  lines.push('END:VCALENDAR');
+  return new Response(lines.map(foldLine).join('\r\n') + '\r\n', {
+    headers: { 'Content-Type': 'text/calendar; charset=utf-8', 'Cache-Control': 'private, no-store' },
+  });
+};

package/src/pages/book/index.astro

@@ -0,0 +1,47 @@
+---
+import Site from '../../layouts/Site.astro';
+import { getRepo } from '../../lib/repo';
+import { CALENDAR, bookingsEnabled, resourceUrl, bookingLinkUrl } from '../../lib/calendar/config';
+
+// Directory of everything bookable: public resources grouped by kind, each
+// with its public booking links.
+if (!bookingsEnabled()) return new Response(null, { status: 404 });
+const repo = await getRepo(Astro.locals);
+const [settings, resources, links] = await Promise.all([repo.getSettings(), repo.listResources(), repo.listBookingLinks()]);
+const listed = resources.filter((r) => r.visibility === 'public');
+const byKind = new Map<string, typeof listed>();
+for (const r of listed) byKind.set(r.kind, [...(byKind.get(r.kind) ?? []), r]);
+const linksOf = (id: string) => links.filter((l) => l.resourceId === id && l.active && l.visibility === 'public');
+const plural = (k: string) => (k.endsWith('s') ? k : k.endsWith('y') ? `${k.slice(0, -1)}ies` : `${k}s`);
+---
+
+<Site title="Book" description={`Book rooms and time at ${settings.siteTitle}.`}>
+  <div class="pc-dir">
+    <header class="pc-calpage-head"><h1>Book</h1><p>Reserve a room or time with {settings.siteTitle}.</p></header>
+    {listed.length === 0 && (
+      <div class="empty-state">
+        <span class="empty-icon" aria-hidden="true"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3.5" y="5" width="17" height="15" rx="3" /><path d="M3.5 10h17M8 3v4M16 3v4" /></svg></span>
+        <b>Nothing to book yet</b>
+        <span>When rooms or appointments open up, they'll show here.</span>
+        {CALENDAR.enabled && <a class="btn secondary sm" href={CALENDAR.base}>See the calendar</a>}
+      </div>
+    )}
+    {[...byKind.entries()].map(([kind, list]) => (
+      <section class="pc-dir-group">
+        {byKind.size > 1 && <h2>{plural(kind)}</h2>}
+        <div class="pc-dir-grid">
+          {list.map((r) => (
+            <article class="pc-dir-card">
+              <a class="pc-dir-media" href={resourceUrl(r.slug)} tabindex="-1" aria-hidden="true">{r.photo ? <img src={r.photo} alt="" loading="lazy" /> : <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21V9l9-5 9 5v12M9 21v-6h6v6" /></svg>}</a>
+              <div class="pc-dir-body">
+                <h3><a href={resourceUrl(r.slug)}>{r.name}</a></h3>
+                <p>{[r.capacity ? `Up to ${r.capacity}` : '', ...r.amenities.slice(0, 3)].filter(Boolean).join(' · ')}</p>
+                <div class="pc-dir-links">{linksOf(r.id).map((l) => <a href={bookingLinkUrl(r.slug, l.slug)}>{l.name}</a>)}</div>
+              </div>
+            </article>
+          ))}
+        </div>
+      </section>
+    ))}
+  </div>
+</Site>

package/src/pages/book/manage/[token].astro

@@ -0,0 +1,108 @@
+---
+import Site from '../../../layouts/Site.astro';
+import { getRepo } from '../../../lib/repo';
+import { bookingLinkUrl, bookingsEnabled, eventUrl, resourceUrl } from '../../../lib/calendar/config';
+import { setBookingStatus, BookingError } from '../../../lib/booking/service';
+import { bookingIcs, whenText } from '../../../lib/booking/emails';
+import { resourceZone } from '../../../lib/booking/availability';
+import { eventTimeZone, locationLine } from '../../../lib/calendar/events';
+import { siteOrigin } from '../../../lib/seo';
+import { waitUntilFrom } from '../../../lib/webhooks';
+
+// The booker's own page, reached from the confirmation and every email: see
+// the status, add it to a calendar, move it or cancel it. The token in the
+// URL is the only credential — it's long and random, and never listed.
+if (!bookingsEnabled()) return new Response(null, { status: 404 });
+const repo = await getRepo(Astro.locals);
+const booking = await repo.getBookingByToken(Astro.params.token ?? '');
+if (!booking) return new Response(null, { status: 404, statusText: 'Not found' });
+const settings = await repo.getSettings();
+const origin = siteOrigin(settings, Astro.url);
+const [resource, link, event] = await Promise.all([
+  booking.resourceId ? repo.getResource(booking.resourceId) : Promise.resolve(null),
+  booking.linkId ? repo.getBookingLink(booking.linkId) : Promise.resolve(null),
+  booking.eventId ? repo.getEvent(booking.eventId) : Promise.resolve(null),
+]);
+const title = event ? event.title : [resource?.name, link?.name].filter(Boolean).join(' · ') || 'Booking';
+const location = event ? locationLine(event.location) : resource?.name ?? '';
+const url = origin + Astro.url.pathname;
+
+if (Astro.url.searchParams.get('ics')) {
+  return new Response(bookingIcs(booking, title, location, url, new URL(origin).host), {
+    headers: { 'Content-Type': 'text/calendar; charset=utf-8', 'Content-Disposition': 'inline; filename="booking.ics"', 'Cache-Control': 'private, no-store' },
+  });
+}
+let error = '';
+let current = booking;
+if (Astro.request.method === 'POST') {
+  const form = await Astro.request.formData();
+  if (form.get('op') === 'cancel' && (booking.status === 'pending' || booking.status === 'confirmed')) {
+    try {
+      current = await setBookingStatus(repo, booking, 'cancelled', { origin, locals: Astro.locals, waitUntil: waitUntilFrom(Astro.locals) });
+    } catch (err) {
+      error = err instanceof BookingError ? err.message : 'Couldn’t cancel — please try again.';
+    }
+  }
+}
+const tz = event ? eventTimeZone(event, settings) : resource ? resourceZone(resource, settings.timezone) : settings.timezone || 'UTC';
+const when = whenText(current, tz, settings, link?.mode === 'day' || event?.allDay);
+const active = current.status === 'pending' || current.status === 'confirmed';
+const upcoming = current.end > Date.now();
+const isNew = Astro.url.searchParams.has('new');
+const moved = Astro.url.searchParams.has('moved');
+const heading = current.status === 'cancelled' ? 'Booking cancelled'
+  : current.status === 'declined' ? 'Not available'
+  : current.status === 'pending' ? (isNew ? 'Request sent' : 'Waiting for approval')
+  : moved ? 'Booking moved' : isNew ? 'You’re booked' : 'Your booking';
+const lede = current.status === 'pending' ? `We’ll email ${current.email} once it’s approved.`
+  : current.status === 'confirmed' ? (link?.confirmMessage || `A confirmation is on its way to ${current.email}.`)
+  : current.status === 'declined' ? 'Sorry — this time couldn’t be confirmed. You’re welcome to pick another.'
+  : 'This booking is cancelled.';
+const googleUrl = `https://calendar.google.com/calendar/render?${new URLSearchParams({ action: 'TEMPLATE', text: title, dates: `${new Date(current.start).toISOString().replace(/[-:]|\.\d{3}/g, '')}/${new Date(current.end).toISOString().replace(/[-:]|\.\d{3}/g, '')}`, details: url, location })}`;
+---
+
+<Site title={heading} noindex>
+  <div class="pc-manage">
+    <div class={`pc-manage-icon is-${current.status}`} aria-hidden="true">
+      {current.status === 'confirmed' ? <svg viewBox="0 0 24 24"><path d="M5 12l5 5L19 7" /></svg>
+        : current.status === 'pending' ? <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" /><path d="M12 8v4l3 2" /></svg>
+        : <svg viewBox="0 0 24 24"><path d="M7 7l10 10M17 7 7 17" /></svg>}
+    </div>
+    <h1>{heading}</h1>
+    <p class="pc-manage-lede">{lede}</p>
+    {error && <p class="pc-bk-error">{error}</p>}
+    <dl class="pc-manage-card">
+      <div><dt>What</dt><dd>{title}</dd></div>
+      <div><dt>When</dt><dd>{when}</dd></div>
+      {location && <div><dt>Where</dt><dd>{location}</dd></div>}
+      {current.seats > 1 && <div><dt>Seats</dt><dd>{current.seats}</dd></div>}
+      <div><dt>Status</dt><dd class={`pc-manage-status is-${current.status}`}>{current.status[0].toUpperCase() + current.status.slice(1)}</dd></div>
+      <div><dt>Reference</dt><dd class="mono">{current.id.slice(0, 8).toUpperCase()}</dd></div>
+    </dl>
+    {active && upcoming && (
+      <div class="pc-manage-actions">
+        {current.status === 'confirmed' && (
+          <details class="pc-ev-add">
+            <summary>Add to calendar</summary>
+            <div class="pc-ev-add-menu">
+              <a href={googleUrl} target="_blank" rel="noopener">Google Calendar</a>
+              <a href="?ics=1">Apple Calendar</a>
+              <a href="?ics=1" download="booking.ics">Download .ics</a>
+            </div>
+          </details>
+        )}
+        {resource && link && current.kind === 'booking' && (
+          <a class="pc-manage-btn" href={`${bookingLinkUrl(resource.slug, link.slug)}?reschedule=${encodeURIComponent(current.manageToken)}`}>Reschedule</a>
+        )}
+        <form method="post" onsubmit="return confirm('Cancel this booking?')">
+          <input type="hidden" name="op" value="cancel" />
+          <button class="pc-manage-btn is-danger" type="submit">Cancel {current.kind === 'rsvp' ? 'RSVP' : 'booking'}</button>
+        </form>
+      </div>
+    )}
+    <p class="pc-bk-foot">
+      {event ? <a href={eventUrl(event.slug)}>Back to {event.title}</a> : resource ? <a href={resourceUrl(resource.slug)}>Back to {resource.name}</a> : null}
+    </p>
+    <p class="pc-manage-note">Keep this link — anyone with it can change this booking.</p>
+  </div>
+</Site>

package/src/pages/calendar/[slug].ics.ts

@@ -0,0 +1,27 @@
+import type { APIRoute } from 'astro';
+import { timingSafeEqual } from 'node:crypto';
+import { getRepo } from '../../lib/repo';
+import { siteOrigin } from '../../lib/seo';
+import { CALENDAR } from '../../lib/calendar/config';
+import { feedFor, icsResponse } from '../../lib/calendar/feeds';
+
+// One calendar's subscribe feed. Public and unlisted calendars are open;
+// private ones need the secret ?t= token from Calendars → Copy link (staff
+// subscriptions). A wrong token looks exactly like a missing calendar.
+const sameToken = (a: string, b: string) =>
+  a.length === b.length && a.length > 0 && timingSafeEqual(Buffer.from(a), Buffer.from(b));
+
+export const GET: APIRoute = async ({ locals, url, params }) => {
+  if (!CALENDAR.enabled) return new Response(null, { status: 404 });
+  const repo = await getRepo(locals);
+  const calendar = await repo.getCalendarBySlug(params.slug ?? '');
+  if (!calendar || calendar.kind !== 'native') return new Response(null, { status: 404 });
+  const isPrivate = calendar.visibility === 'private';
+  if (isPrivate && !sameToken(url.searchParams.get('t') ?? '', calendar.feedToken)) return new Response(null, { status: 404 });
+  const settings = await repo.getSettings();
+  const { body } = await feedFor(repo, settings, siteOrigin(settings, url), { calendar, allowPrivate: isPrivate });
+  // private feeds must never sit in shared caches
+  const res = icsResponse(body, `${calendar.slug}.ics`, isPrivate ? 0 : 300);
+  if (isPrivate) res.headers.set('Cache-Control', 'private, no-store');
+  return res;
+};

package/src/pages/calendar/feed.ics.ts

@@ -0,0 +1,15 @@
+import type { APIRoute } from 'astro';
+import { getRepo } from '../../lib/repo';
+import { siteOrigin } from '../../lib/seo';
+import { CALENDAR } from '../../lib/calendar/config';
+import { feedFor, icsResponse } from '../../lib/calendar/feeds';
+
+// Every public calendar in one subscribe feed (/calendar.ics). Feed
+// calendars are not re-published — subscribers can add those at the source.
+export const GET: APIRoute = async ({ locals, url }) => {
+  if (!CALENDAR.enabled) return new Response(null, { status: 404 });
+  const repo = await getRepo(locals);
+  const settings = await repo.getSettings();
+  const { body } = await feedFor(repo, settings, siteOrigin(settings, url), {});
+  return icsResponse(body, 'calendar.ics');
+};

package/src/pages/calendar/index.astro

@@ -0,0 +1,191 @@
+---
+import Site from '../../layouts/Site.astro';
+import { getRepo } from '../../lib/repo';
+import { effectiveSettings } from '../../lib/designPreview';
+import { siteOrigin } from '../../lib/seo';
+import { siteLocale } from '../../lib/dates';
+import { CALENDAR, calendarFeedUrl, calendarPageUrl } from '../../lib/calendar/config';
+import { calendarWindow, renderCalendarView } from '../../lib/calendar/render';
+import { collectViewEvents, type ViewEvent } from '../../lib/calendar/data';
+import { eventCardHtml } from '../../lib/calendar/cards';
+import { safeColor } from '../../lib/calendar/events';
+import { tzParts } from '../../lib/calendar/ics';
+
+// The main calendar page: filter chips per public calendar, Month / Week /
+// List views (the same renderer as the calendar card), image cards for
+// what's coming up, and subscribe links for every calendar app. On phones the
+// month grid gives way to a two-week day strip over the agenda.
+if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
+
+const repo = await getRepo(Astro.locals);
+const settings = await effectiveSettings(await repo.getSettings(), Astro.url, Astro.cookies, Astro.locals);
+const now = Date.now();
+const tz = settings.timezone || 'UTC';
+const locale = siteLocale(settings);
+const origin = siteOrigin(settings, Astro.url);
+
+const all = await repo.listCalendars();
+const listed = all.filter((c) => c.visibility === 'public');
+const calSlug = Astro.url.searchParams.get('cal') ?? '';
+// unlisted calendars work when linked directly, they just aren't offered
+const active = calSlug ? all.find((c) => c.slug === calSlug && c.visibility !== 'private') ?? null : null;
+const viewParam = Astro.url.searchParams.get('view');
+const view = (['month', 'week', 'list'] as const).find((v) => v === viewParam) ?? CALENDAR.defaultView;
+const explicitView = Boolean(viewParam);
+const monthParam = /^(\d{4})-(\d{2})$/.exec(Astro.url.searchParams.get('m') ?? '');
+
+const win = calendarWindow(settings, now);
+const { events, calendars, errors } = await collectViewEvents(repo, settings, win, {
+  audience: 'public',
+  ...(active ? { calendarIds: [active.id] } : {}),
+});
+
+const calendarHtml = renderCalendarView(events, settings, now, {
+  view: view === 'list' ? 'upcoming' : view,
+  limit: 50,
+  multi: !active && calendars.length > 1,
+  emptyText: 'Nothing on the calendar yet.',
+  focus: monthParam ? { y: Number(monthParam[1]), m: Number(monthParam[2]) } : undefined,
+});
+
+// coming up: the next occurrence of each distinct native event
+const seen = new Set<string>();
+const comingUp: ViewEvent[] = [];
+for (const v of events) {
+  if (!v.event || v.end <= now || seen.has(v.event.id)) continue;
+  seen.add(v.event.id);
+  comingUp.push(v);
+  if (comingUp.length >= 6) break;
+}
+
+// agenda (list view + phones): next 60 days grouped by local day
+const pad = (n: number) => String(n).padStart(2, '0');
+const dayKey = (ms: number) => { const p = tzParts(ms, tz); return `${p.y}-${pad(p.m)}-${pad(p.d)}`; };
+const horizon = now + 60 * 86_400_000;
+const agenda = new Map<string, ViewEvent[]>();
+for (const v of events) {
+  if (v.end <= now || v.start > horizon) continue;
+  // events already underway are listed under today
+  const k = dayKey(Math.max(v.start, now));
+  if (!agenda.has(k)) agenda.set(k, []);
+  agenda.get(k)!.push(v);
+}
+const fmt = (o: Intl.DateTimeFormatOptions) => new Intl.DateTimeFormat(locale, { ...o, timeZone: tz });
+const dayLabel = fmt({ weekday: 'long', month: 'long', day: 'numeric' });
+const timeLabel = fmt({ hour: 'numeric', minute: '2-digit' });
+const stripDays = Array.from({ length: 14 }, (_, i) => {
+  const ms = now + i * 86_400_000;
+  const k = dayKey(ms);
+  return { k, dow: fmt({ weekday: 'narrow' }).format(ms), d: tzParts(ms, tz).d, has: agenda.has(k), today: i === 0 };
+});
+
+const feed = origin + calendarFeedUrl(active?.slug);
+const webcal = feed.replace(/^https?:\/\//, 'webcal://');
+const googleAdd = `https://calendar.google.com/calendar/r?cid=${encodeURIComponent(webcal)}`;
+const outlookAdd = `https://outlook.live.com/calendar/0/addfromweb?url=${encodeURIComponent(feed)}&name=${encodeURIComponent(active?.name ?? settings.siteTitle)}`;
+const viewHref = (v: string) => {
+  const p = new URLSearchParams(Astro.url.search);
+  p.set('view', v);
+  p.delete('m');
+  return `${CALENDAR.base}?${p}`;
+};
+const title = active ? active.name : 'Calendar';
+const lede = active?.description || `What’s happening at ${settings.siteTitle}. Subscribe to keep it in your own calendar.`;
+const zoneName = fmt({ timeZoneName: 'long' }).formatToParts(now).find((p) => p.type === 'timeZoneName')?.value ?? tz;
+---
+
+<Site title={title} description={lede}>
+  <div class={`pc-calpage view-${view}${explicitView ? ' is-explicit' : ''}`}>
+    <header class="pc-calpage-head">
+      <h1>{title}</h1>
+      <p>{lede}</p>
+    </header>
+
+    <div class="pc-calpage-bar">
+      {(listed.length > 1 || active) && (
+        <nav class="pc-calpage-chips" aria-label="Calendars">
+          <a class={!active ? 'is-on' : ''} href={CALENDAR.base} aria-current={!active ? 'page' : undefined}>All</a>
+          {listed.map((c) => (
+            <a class={active?.id === c.id ? 'is-on' : ''} href={calendarPageUrl(c.slug)} aria-current={active?.id === c.id ? 'page' : undefined}>
+              <i style={`background:${safeColor(c.color)}`} aria-hidden="true" />{c.name}
+            </a>
+          ))}
+          {active && active.visibility !== 'public' && <a class="is-on" href={calendarPageUrl(active.slug)}><i style={`background:${safeColor(active.color)}`} aria-hidden="true" />{active.name}</a>}
+        </nav>
+      )}
+      <div class="pc-calpage-tools">
+        <nav class="pc-calpage-views" aria-label="View">
+          <a class={view === 'month' ? 'is-on' : ''} href={viewHref('month')}>Month</a>
+          <a class={view === 'week' ? 'is-on' : ''} href={viewHref('week')}>Week</a>
+          <a class={view === 'list' ? 'is-on' : ''} href={viewHref('list')}>List</a>
+        </nav>
+        <details class="pc-calpage-sub">
+          <summary>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14" /></svg>
+            Subscribe
+          </summary>
+          <div class="pc-calpage-sub-menu">
+            <p>Add {active ? `“${active.name}”` : 'this calendar'} to your calendar app. New events show up on their own.</p>
+            <a href={googleAdd} target="_blank" rel="noopener">Google Calendar</a>
+            <a href={webcal}>Apple Calendar</a>
+            <a href={outlookAdd} target="_blank" rel="noopener">Outlook</a>
+            <button type="button" data-copy={feed}>Copy link</button>
+          </div>
+        </details>
+      </div>
+    </div>
+
+    <div class="pc-calpage-strip" aria-label="Next two weeks">
+      {stripDays.map((d) => (
+        <a class={`${d.has ? 'has' : ''}${d.today ? ' today' : ''}`} href={d.has ? `#d-${d.k}` : undefined} aria-label={d.k}>
+          <small>{d.dow}</small><b>{d.d}</b><i aria-hidden="true" />
+        </a>
+      ))}
+    </div>
+
+    <div class="pc-calpage-view" set:html={calendarHtml} />
+
+    <section class="pc-calpage-agenda" aria-label="Agenda">
+      {agenda.size === 0 ? <p class="pc-cal-empty">Nothing in the next two months.</p> : [...agenda.entries()].map(([k, list]) => (
+        <div class="pc-agenda-day" id={`d-${k}`}>
+          <h3>{dayLabel.format(list[0].start < now ? now : list[0].start)}</h3>
+          {list.map((v) => (
+            <a class={`pc-agenda-row${v.cancelled ? ' is-cancelled' : ''}`} href={v.url ?? undefined}>
+              <span class="t">{v.allDay ? 'All day' : timeLabel.format(v.start)}</span>
+              <span class="ti">
+                {v.color && <i style={`background:${v.color}`} aria-hidden="true" />}
+                <b>{v.title}</b>
+                {v.location && <small>{v.location}</small>}
+              </span>
+            </a>
+          ))}
+        </div>
+      ))}
+    </section>
+
+    {view !== 'list' && comingUp.length > 0 && (
+      <section class="pc-calpage-up">
+        <h2>Coming up</h2>
+        <div class="pc-ev-cards" data-layout="grid" set:html={comingUp.map((v) => eventCardHtml({ event: v.event!, start: v.start, end: v.end, allDay: v.allDay, days: v.days }, settings, { showImage: true })).join('')} />
+      </section>
+    )}
+
+    <footer class="pc-calpage-foot">
+      <span>Times in {zoneName}</span>
+      {errors.length > 0 && <span>Some linked calendars couldn’t be loaded right now.</span>}
+    </footer>
+  </div>
+  <script>
+    document.addEventListener('click', async (e) => {
+      const b = e.target instanceof Element ? e.target.closest<HTMLButtonElement>('[data-copy]') : null;
+      if (b) {
+        await navigator.clipboard.writeText(b.dataset.copy ?? '');
+        b.textContent = 'Link copied';
+        setTimeout(() => (b.textContent = 'Copy link'), 1400);
+      }
+      document.querySelectorAll<HTMLDetailsElement>('details.pc-calpage-sub[open]').forEach((d) => {
+        if (!(e.target instanceof Node && d.contains(e.target))) d.open = false;
+      });
+    });
+  </script>
+</Site>

package/src/pages/embed/book/[resource]/[link].astro

@@ -0,0 +1,33 @@
+---
+import Site from '../../../../layouts/Site.astro';
+import BookingFlow from '../../../../components/booking/BookingFlow.astro';
+import { getRepo } from '../../../../lib/repo';
+import { bookingLinkUrl, bookingsEnabled } from '../../../../lib/calendar/config';
+import { availabilityContext } from '../../../../lib/booking/service';
+
+// Embeddable picker for other sites: day + time selection happens inside the
+// iframe; choosing a time opens the full booking page (top window) to finish.
+if (!bookingsEnabled()) return new Response(null, { status: 404 });
+const repo = await getRepo(Astro.locals);
+const resource = await repo.getResourceBySlug(Astro.params.resource ?? '');
+const link = resource ? await repo.getBookingLinkBySlug(resource.id, Astro.params.link ?? '') : null;
+if (!resource || !link || !link.active) return new Response(null, { status: 404 });
+const settings = await repo.getSettings();
+// a chosen time hands off to the real page, where the form lives
+if (Astro.url.searchParams.get('start')) {
+  return Astro.redirect(`${bookingLinkUrl(resource.slug, link.slug)}${Astro.url.search}`);
+}
+const ctx = await availabilityContext(repo, resource, link, settings);
+Astro.response.headers.set('Content-Security-Policy', 'frame-ancestors *');
+---
+
+<Site title={link.name} bare noindex>
+  <BookingFlow resource={resource} link={link} ctx={ctx} settings={settings} url={Astro.url} embed />
+  <script is:inline>
+    (function () {
+      var send = function () { parent.postMessage({ acmsBookingEmbed: true, height: document.documentElement.scrollHeight }, '*'); };
+      window.addEventListener('load', send);
+      if (window.ResizeObserver) new ResizeObserver(send).observe(document.documentElement);
+    })();
+  </script>
+</Site>

package/src/pages/embed/calendar/[slug].astro

@@ -0,0 +1,43 @@
+---
+import Site from '../../../layouts/Site.astro';
+import { getRepo } from '../../../lib/repo';
+import { CALENDAR } from '../../../lib/calendar/config';
+import { calendarWindow, renderCalendarView } from '../../../lib/calendar/render';
+import { collectViewEvents } from '../../../lib/calendar/data';
+import { upcomingEvents, eventCardHtml } from '../../../lib/calendar/cards';
+
+// Embeddable calendar for other websites:
+//   <iframe src="https://site/embed/calendar/all?view=month" …>
+// slug 'all' = every public calendar. view: month | week | list | cards.
+// Links open in the parent window; height is posted to the parent so a
+// small script can auto-size the iframe.
+if (!CALENDAR.enabled) return new Response(null, { status: 404 });
+const repo = await getRepo(Astro.locals);
+const settings = await repo.getSettings();
+const slug = Astro.params.slug ?? 'all';
+const cal = slug === 'all' ? null : await repo.getCalendarBySlug(slug);
+if (slug !== 'all' && (!cal || cal.visibility === 'private')) return new Response(null, { status: 404 });
+const view = (['month', 'week', 'list', 'cards'] as const).find((v) => v === Astro.url.searchParams.get('view')) ?? 'month';
+const now = Date.now();
+let html: string;
+if (view === 'cards') {
+  const items = await upcomingEvents(repo, settings, now, { calendarIds: cal ? [cal.id] : undefined, limit: Math.min(12, Number(Astro.url.searchParams.get('limit')) || 6) });
+  html = `<section class="pc-ev-cards" data-layout="grid">${items.map((o) => eventCardHtml(o, settings, { showImage: true })).join('') || '<p class="pc-ev-empty">No upcoming events.</p>'}</section>`;
+} else {
+  const { events, calendars } = await collectViewEvents(repo, settings, calendarWindow(settings, now), { audience: 'public', ...(cal ? { calendarIds: [cal.id] } : {}) });
+  html = renderCalendarView(events, settings, now, { view: view === 'list' ? 'upcoming' : view, limit: 30, multi: !cal && calendars.length > 1 });
+}
+Astro.response.headers.set('Content-Security-Policy', "frame-ancestors *");
+---
+
+<Site title={cal?.name ?? 'Calendar'} bare noindex>
+  <base target="_top" />
+  <div class="pc-embed" set:html={html} />
+  <script is:inline>
+    (function () {
+      var send = function () { parent.postMessage({ acmsCalendarEmbed: true, height: document.documentElement.scrollHeight }, '*'); };
+      window.addEventListener('load', send);
+      if (window.ResizeObserver) new ResizeObserver(send).observe(document.documentElement);
+    })();
+  </script>
+</Site>