@acms-subir/core 0.0.1

package/src/lib/calendar/ics.ts

@@ -0,0 +1,402 @@
+// ICS ingestion for the calendar card: fetch a public feed (Google Calendar's
+// basic.ics, or any ICS URL), parse VEVENTs, expand recurrences over a bounded
+// window, and hand back flat display-ready events. Runs at request time inside
+// expandDynamicBlocks, so results are cached per-isolate for 5 minutes — the
+// same spirit as middleware's redirectCache. Recurrence covers what real
+// church/team calendars use (DAILY/WEEKLY/MONTHLY/YEARLY, INTERVAL, COUNT,
+// UNTIL, BYDAY incl. nth-weekday, BYMONTHDAY, EXDATE, RECURRENCE-ID
+// overrides); exotic RRULE parts are ignored rather than guessed at.
+import { fetchPublicUrl } from '../net';
+
+export interface CalendarEvent {
+  start: number; // UTC ms
+  end: number; // UTC ms, exclusive
+  allDay: boolean;
+  days: number; // calendar days covered (all-day spans); timed events = 1
+  title: string;
+  location: string;
+  description: string;
+  cal: number; // index into the card's sources list (drives the dot color)
+}
+
+export interface CalendarWindow {
+  displayTz: string; // site timezone; '' falls back to UTC
+  windowStartMs: number;
+  windowEndMs: number;
+  now: number;
+}
+
+interface IcsTime {
+  y: number; m: number; d: number; hh: number; mm: number; ss: number;
+  tz: string | null;
+  dateOnly: boolean;
+  utc: boolean;
+}
+
+interface VEvent {
+  uid: string;
+  title: string;
+  location: string;
+  description: string;
+  cancelled: boolean;
+  start: IcsTime;
+  end: IcsTime | null;
+  rrule: string;
+  exdates: IcsTime[];
+  recurrenceId: IcsTime | null;
+}
+
+const DAY = 86_400_000;
+
+/* ---------------- timezone math (no dependencies) ---------------- */
+
+const fmtCache = new Map<string, Intl.DateTimeFormat>();
+function tzFormatter(tz: string): Intl.DateTimeFormat | null {
+  let f = fmtCache.get(tz);
+  if (f) return f;
+  try {
+    f = new Intl.DateTimeFormat('en-US', {
+      timeZone: tz, hour12: false,
+      year: 'numeric', month: '2-digit', day: '2-digit',
+      hour: '2-digit', minute: '2-digit', second: '2-digit',
+    });
+  } catch {
+    return null; // unknown TZID (Outlook's "Customized Time Zone" etc.)
+  }
+  fmtCache.set(tz, f);
+  return f;
+}
+
+export function tzParts(ms: number, tz: string): { y: number; m: number; d: number; hh: number; mm: number; ss: number } {
+  const f = tzFormatter(tz) ?? tzFormatter('UTC')!;
+  const p: Record<string, number> = {};
+  for (const part of f.formatToParts(ms)) if (part.type !== 'literal') p[part.type] = Number(part.value);
+  return { y: p.year, m: p.month, d: p.day, hh: p.hour === 24 ? 0 : p.hour, mm: p.minute, ss: p.second };
+}
+
+// Wall-clock in `tz` → UTC ms. Two-pass offset guess handles DST boundaries.
+export function zonedToUtc(y: number, m: number, d: number, hh: number, mm: number, ss: number, tz: string): number {
+  const guess = Date.UTC(y, m - 1, d, hh, mm, ss);
+  if (!tzFormatter(tz)) return guess;
+  const offsetAt = (ms: number) => {
+    const p = tzParts(ms, tz);
+    return Date.UTC(p.y, p.m - 1, p.d, p.hh, p.mm, p.ss) - ms;
+  };
+  const utc = guess - offsetAt(guess);
+  return guess - offsetAt(utc);
+}
+
+const dayNum = (y: number, m: number, d: number) => Math.round(Date.UTC(y, m - 1, d) / DAY);
+const fromDayNum = (n: number) => {
+  const dt = new Date(n * DAY);
+  return { y: dt.getUTCFullYear(), m: dt.getUTCMonth() + 1, d: dt.getUTCDate() };
+};
+const dowOfDay = (n: number) => (((n + 4) % 7) + 7) % 7; // epoch day 0 = Thursday
+const daysInMonth = (y: number, m: number) => new Date(Date.UTC(y, m, 0)).getUTCDate();
+
+/* ---------------- ICS parsing ---------------- */
+
+function unescapeText(s: string): string {
+  return s.replace(/\\n/gi, '\n').replace(/\\([,;\\])/g, '$1');
+}
+
+// "NAME;PARAM=V;PARAM2="Q V":value" → parts, respecting quoted params
+function splitProp(line: string): { name: string; params: Record<string, string>; value: string } | null {
+  let inQ = false;
+  let colon = -1;
+  for (let i = 0; i < line.length; i++) {
+    const c = line[i];
+    if (c === '"') inQ = !inQ;
+    else if (c === ':' && !inQ) { colon = i; break; }
+  }
+  if (colon < 0) return null;
+  const head = line.slice(0, colon);
+  const value = line.slice(colon + 1);
+  const segs: string[] = [];
+  let cur = '';
+  inQ = false;
+  for (const c of head) {
+    if (c === '"') inQ = !inQ;
+    if (c === ';' && !inQ) { segs.push(cur); cur = ''; } else cur += c;
+  }
+  segs.push(cur);
+  const params: Record<string, string> = {};
+  for (const seg of segs.slice(1)) {
+    const eq = seg.indexOf('=');
+    if (eq > 0) params[seg.slice(0, eq).toUpperCase()] = seg.slice(eq + 1).replace(/^"|"$/g, '');
+  }
+  return { name: segs[0].toUpperCase(), params, value };
+}
+
+function parseIcsDate(value: string, params: Record<string, string>): IcsTime | null {
+  const v = value.trim();
+  const dateOnly = params.VALUE === 'DATE' || /^\d{8}$/.test(v);
+  if (dateOnly) {
+    const m = v.match(/^(\d{4})(\d{2})(\d{2})/);
+    if (!m) return null;
+    return { y: +m[1], m: +m[2], d: +m[3], hh: 0, mm: 0, ss: 0, tz: null, dateOnly: true, utc: false };
+  }
+  const m = v.match(/^(\d{4})(\d{2})(\d{2})T(\d{2})(\d{2})(\d{2})(Z?)$/);
+  if (!m) return null;
+  return {
+    y: +m[1], m: +m[2], d: +m[3], hh: +m[4], mm: +m[5], ss: +m[6],
+    tz: params.TZID ?? null, dateOnly: false, utc: m[7] === 'Z',
+  };
+}
+
+export function parseICS(text: string): { vevents: VEvent[]; calTz: string } {
+  // unfold: a CRLF (or LF) followed by a space/tab continues the previous line
+  const lines = text.replace(/\r\n[ \t]|\n[ \t]|\r[ \t]/g, '').split(/\r\n|\n|\r/);
+  const vevents: VEvent[] = [];
+  let calTz = '';
+  let ev: Partial<VEvent> & { exdates: IcsTime[] } | null = null;
+  for (const line of lines) {
+    if (line === 'BEGIN:VEVENT') {
+      ev = { uid: '', title: '', location: '', description: '', cancelled: false, rrule: '', exdates: [], recurrenceId: null };
+      continue;
+    }
+    if (line === 'END:VEVENT') {
+      if (ev?.start) vevents.push(ev as VEvent);
+      ev = null;
+      continue;
+    }
+    const prop = splitProp(line);
+    if (!prop) continue;
+    if (!ev) {
+      if (prop.name === 'X-WR-TIMEZONE') calTz = prop.value.trim();
+      continue;
+    }
+    switch (prop.name) {
+      case 'UID': ev.uid = prop.value.trim(); break;
+      case 'SUMMARY': ev.title = unescapeText(prop.value).trim(); break;
+      case 'LOCATION': ev.location = unescapeText(prop.value).trim(); break;
+      case 'DESCRIPTION':
+        // Google descriptions may carry HTML; events render as text everywhere
+        ev.description = unescapeText(prop.value).replace(/<[^>]+>/g, ' ').replace(/[ \t]+/g, ' ').trim().slice(0, 600);
+        break;
+      case 'STATUS': ev.cancelled = prop.value.trim().toUpperCase() === 'CANCELLED'; break;
+      case 'DTSTART': ev.start = parseIcsDate(prop.value, prop.params) ?? undefined; break;
+      case 'DTEND': ev.end = parseIcsDate(prop.value, prop.params); break;
+      case 'RRULE': ev.rrule = prop.value.trim(); break;
+      case 'RECURRENCE-ID': ev.recurrenceId = parseIcsDate(prop.value, prop.params); break;
+      case 'EXDATE':
+        for (const part of prop.value.split(',')) {
+          const t = parseIcsDate(part, prop.params);
+          if (t) ev.exdates.push(t);
+        }
+        break;
+    }
+  }
+  return { vevents, calTz };
+}
+
+/* ---------------- recurrence expansion ---------------- */
+
+interface Rule {
+  freq: 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'YEARLY';
+  interval: number;
+  count: number | null;
+  until: IcsTime | null;
+  byday: { ord: number; dow: number }[];
+  bymonthday: number[];
+}
+
+const DOW_CODES: Record<string, number> = { SU: 0, MO: 1, TU: 2, WE: 3, TH: 4, FR: 5, SA: 6 };
+
+function parseRRule(s: string): Rule | null {
+  const parts: Record<string, string> = {};
+  for (const seg of s.split(';')) {
+    const eq = seg.indexOf('=');
+    if (eq > 0) parts[seg.slice(0, eq).toUpperCase()] = seg.slice(eq + 1);
+  }
+  const freq = parts.FREQ as Rule['freq'];
+  if (!['DAILY', 'WEEKLY', 'MONTHLY', 'YEARLY'].includes(freq)) return null;
+  const byday = (parts.BYDAY ?? '')
+    .split(',')
+    .map((t) => {
+      const m = t.trim().match(/^(-?\d+)?(SU|MO|TU|WE|TH|FR|SA)$/);
+      return m ? { ord: m[1] ? Number(m[1]) : 0, dow: DOW_CODES[m[2]] } : null;
+    })
+    .filter((x): x is { ord: number; dow: number } => x !== null);
+  return {
+    freq,
+    interval: Math.max(1, Number(parts.INTERVAL) || 1),
+    count: parts.COUNT ? Math.max(1, Number(parts.COUNT) || 1) : null,
+    until: parts.UNTIL ? parseIcsDate(parts.UNTIL, {}) : null,
+    byday,
+    bymonthday: (parts.BYMONTHDAY ?? '').split(',').map(Number).filter((n) => Number.isInteger(n) && n >= 1 && n <= 31),
+  };
+}
+
+function timeToMs(t: IcsTime, timedTz: string, displayTz: string): number {
+  if (t.dateOnly) return zonedToUtc(t.y, t.m, t.d, 0, 0, 0, displayTz); // all-day: midnight in the display tz, so day bucketing is exact
+  if (t.utc) return Date.UTC(t.y, t.m - 1, t.d, t.hh, t.mm, t.ss);
+  return zonedToUtc(t.y, t.m, t.d, t.hh, t.mm, t.ss, t.tz ?? timedTz);
+}
+
+function expandEvent(
+  ev: VEvent,
+  calTz: string,
+  win: CalendarWindow,
+  calIdx: number,
+  skipStarts: Set<number>,
+  out: CalendarEvent[]
+): void {
+  const displayTz = win.displayTz || 'UTC';
+  const timedTz = calTz || displayTz;
+  if (ev.cancelled) return;
+  const startMs = timeToMs(ev.start, timedTz, displayTz);
+  const endMs = ev.end ? timeToMs(ev.end, timedTz, displayTz) : NaN;
+  const allDay = ev.start.dateOnly;
+  const spanDays = allDay ? Math.max(1, Number.isFinite(endMs) ? Math.round((endMs - startMs) / DAY) : 1) : 1;
+  const durMs = allDay ? spanDays * DAY : Number.isFinite(endMs) && endMs > startMs ? endMs - startMs : 3_600_000;
+
+  const push = (s: number) => {
+    const e = allDay ? s + spanDays * DAY : s + durMs;
+    if (e <= win.windowStartMs || s >= win.windowEndMs) return;
+    out.push({ start: s, end: e, allDay, days: spanDays, title: ev.title || '(untitled)', location: ev.location, description: ev.description, cal: calIdx });
+  };
+
+  const rule = ev.rrule && !ev.recurrenceId ? parseRRule(ev.rrule) : null;
+  if (!rule) {
+    if (!skipStarts.has(startMs)) push(startMs);
+    return;
+  }
+
+  // exceptions, matched by occurrence start (plus local-date for all-day)
+  const exMs = new Set(ev.exdates.map((t) => timeToMs(t, timedTz, displayTz)));
+
+  // local reference: DTSTART's wall clock in the tz occurrences are generated in
+  const occTz = ev.start.dateOnly ? displayTz : ev.start.tz ?? timedTz;
+  const ref = ev.start.dateOnly
+    ? { y: ev.start.y, m: ev.start.m, d: ev.start.d, hh: 0, mm: 0, ss: 0 }
+    : tzParts(startMs, occTz);
+  const startDay = dayNum(ref.y, ref.m, ref.d);
+  const untilMs = rule.until ? timeToMs(rule.until, timedTz, displayTz) : Infinity;
+  const windowEndDay = Math.ceil(win.windowEndMs / DAY) + 2;
+  const weekAnchor = startDay - dowOfDay(startDay);
+  const bydayDows = rule.byday.map((b) => b.dow);
+
+  // COUNT needs every occurrence counted from DTSTART; otherwise skip ahead
+  let day = rule.count ? startDay : Math.max(startDay, Math.floor(win.windowStartMs / DAY) - Math.max(35, spanDays + 1));
+  let produced = 0;
+  for (let steps = 0; day <= windowEndDay && steps < 40_000; steps++, day++) {
+    const { y, m, d } = fromDayNum(day);
+    let hit = false;
+    switch (rule.freq) {
+      case 'DAILY':
+        hit = (day - startDay) % rule.interval === 0;
+        break;
+      case 'WEEKLY': {
+        const inWeek = Math.floor((day - weekAnchor) / 7) % rule.interval === 0;
+        hit = inWeek && (bydayDows.length ? bydayDows.includes(dowOfDay(day)) : day === startDay || dowOfDay(day) === dowOfDay(startDay));
+        break;
+      }
+      case 'MONTHLY': {
+        const monthsSince = (y - ref.y) * 12 + (m - ref.m);
+        if (monthsSince % rule.interval !== 0) break;
+        if (rule.bymonthday.length) hit = rule.bymonthday.includes(d);
+        else if (rule.byday.length) {
+          const dow = dowOfDay(day);
+          hit = rule.byday.some((b) => {
+            if (b.dow !== dow) return false;
+            if (b.ord > 0) return Math.floor((d - 1) / 7) + 1 === b.ord;
+            if (b.ord < 0) return Math.floor((daysInMonth(y, m) - d) / 7) + 1 === -b.ord;
+            return true; // every matching weekday of the month
+          });
+        } else hit = d === ref.d;
+        break;
+      }
+      case 'YEARLY':
+        hit = m === ref.m && d === ref.d && (y - ref.y) % rule.interval === 0;
+        break;
+    }
+    if (!hit) continue;
+    if (day < startDay) continue;
+
+    const occStart = ev.start.dateOnly ? zonedToUtc(y, m, d, 0, 0, 0, displayTz) : zonedToUtc(y, m, d, ref.hh, ref.mm, ref.ss, occTz);
+    if (occStart > untilMs) break;
+    produced++;
+    if (rule.count && produced > rule.count) break;
+    if (exMs.has(occStart) || skipStarts.has(occStart)) continue;
+    push(occStart);
+    if (produced >= 1000) break;
+  }
+}
+
+export function expandVEvents(vevents: VEvent[], calTz: string, win: CalendarWindow, calIdx: number): CalendarEvent[] {
+  const displayTz = win.displayTz || 'UTC';
+  const timedTz = calTz || displayTz;
+  // RECURRENCE-ID overrides replace their master's generated instance
+  const skipByUid = new Map<string, Set<number>>();
+  for (const ev of vevents) {
+    if (!ev.recurrenceId || !ev.uid) continue;
+    const ms = timeToMs(ev.recurrenceId, timedTz, displayTz);
+    if (!skipByUid.has(ev.uid)) skipByUid.set(ev.uid, new Set());
+    skipByUid.get(ev.uid)!.add(ms);
+  }
+  const out: CalendarEvent[] = [];
+  const none = new Set<number>();
+  for (const ev of vevents) {
+    expandEvent(ev, calTz, win, calIdx, ev.recurrenceId ? none : skipByUid.get(ev.uid) ?? none, out);
+  }
+  return out;
+}
+
+/* ---------------- fetch + cache ---------------- */
+
+interface CacheEntry { at: number; vevents: VEvent[]; calTz: string }
+const feedCache = new Map<string, CacheEntry>();
+const FEED_TTL = 5 * 60 * 1000;
+const FEED_CACHE_MAX = 24;
+
+async function loadFeed(url: string, now: number): Promise<CacheEntry> {
+  const cached = feedCache.get(url);
+  if (cached && now - cached.at < FEED_TTL) return cached;
+  const got = await fetchPublicUrl(url, {
+    accept: 'text/calendar, text/plain;q=0.8, */*;q=0.5',
+    userAgent: 'Mozilla/5.0 (compatible; acms-calendar/1.0)',
+  });
+  if (!got || !got.res.ok) {
+    if (cached) return cached; // stale beats broken
+    throw new Error(`Couldn’t load the calendar feed (${got?.res.status ?? 'unreachable'}).`);
+  }
+  const text = (await got.res.text()).slice(0, 2_000_000);
+  if (!text.includes('BEGIN:VCALENDAR')) {
+    if (cached) return cached;
+    throw new Error('That URL isn’t an ICS calendar feed.');
+  }
+  const entry: CacheEntry = { at: now, ...parseICS(text) };
+  feedCache.delete(url);
+  feedCache.set(url, entry);
+  if (feedCache.size > FEED_CACHE_MAX) {
+    const oldest = feedCache.keys().next().value;
+    if (oldest !== undefined) feedCache.delete(oldest);
+  }
+  return entry;
+}
+
+// Fetch + expand every source. Individual feed failures don't sink the widget:
+// events from healthy sources still render and failures come back as messages.
+export async function getCalendarEvents(
+  sources: string[],
+  win: CalendarWindow
+): Promise<{ events: CalendarEvent[]; errors: string[] }> {
+  const errors: string[] = [];
+  const perSource = await Promise.all(
+    sources.slice(0, 6).map(async (url, i) => {
+      try {
+        const feed = await loadFeed(url, win.now);
+        return expandVEvents(feed.vevents, feed.calTz, win, i);
+      } catch (err) {
+        errors.push(err instanceof Error ? err.message : 'Calendar feed failed.');
+        return [];
+      }
+    })
+  );
+  const events = perSource
+    .flat()
+    .sort((a, b) => a.start - b.start || a.title.localeCompare(b.title))
+    .slice(0, 800);
+  return { events, errors };
+}

package/src/lib/calendar/render.ts

@@ -0,0 +1,275 @@
+// Request-time HTML for the calendar card (data-dyn="calendar"), called from
+// expandDynamicBlocks. Server-renders the card's chosen view — month grid,
+// week strip, or upcoming list — so the widget works with JS disabled, then
+// attaches a display-ready JSON payload + a small vanilla script for month/
+// week navigation and the event popover. No framework code reaches the public
+// site. Every element carries a stable .pc-cal-* class: that's the widget's
+// public styling API (theme CSS and Settings → Code injection both restyle it).
+import type { Settings } from '../schema';
+import { siteLocale } from '../dates';
+import { getCalendarEvents, tzParts, zonedToUtc, type CalendarEvent } from './ics';
+import { calendarPageUrl } from './src';
+
+export interface CalendarBlockAttrs {
+  sources: string[];
+  view: 'month' | 'week' | 'upcoming';
+  title: string;
+  subtitle: string;
+  limit: number;
+  showOpenLink: boolean;
+}
+
+const DAY = 86_400_000;
+
+const esc = (s: string) =>
+  String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+const dayNum = (y: number, m: number, d: number) => Math.round(Date.UTC(y, m - 1, d) / DAY);
+const fromDayNum = (n: number) => {
+  const dt = new Date(n * DAY);
+  return { y: dt.getUTCFullYear(), m: dt.getUTCMonth() + 1, d: dt.getUTCDate() };
+};
+const dowOfDay = (n: number) => (((n + 4) % 7) + 7) % 7;
+const addMonths = (y: number, m: number, delta: number): [number, number] => {
+  const t = y * 12 + (m - 1) + delta;
+  return [Math.floor(t / 12), (((t % 12) + 12) % 12) + 1];
+};
+
+// one display-ready entry per event; the client script never touches timezones
+interface DisplayEvent {
+  d: [number, number, number]; // local start day
+  n: number; // days covered
+  t: string; // title
+  tm: string; // chip time label ('' for all-day)
+  rg: string; // popover "when" line
+  l: string;
+  ds: string;
+  c: number; // source index (dot color)
+}
+
+function compactTime(s: string): string {
+  return s.replace(':00', '').replace(/\s?(AM|PM)/, (_, p: string) => p.toLowerCase());
+}
+
+function buildDisplay(events: CalendarEvent[], tz: string, locale: string): DisplayEvent[] {
+  const timeFmt = new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit', timeZone: tz });
+  const dayFmt = new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', timeZone: tz });
+  return events.map((e) => {
+    const p = tzParts(e.start, tz);
+    const when = dayFmt.format(e.start);
+    let tm = '';
+    let rg: string;
+    if (e.allDay) {
+      rg = e.days > 1 ? `${when} – ${dayFmt.format(e.end - DAY)}` : `${when} · All day`;
+    } else {
+      tm = compactTime(timeFmt.format(e.start));
+      rg = `${when} · ${timeFmt.format(e.start)} – ${timeFmt.format(e.end)}`;
+    }
+    return {
+      d: [p.y, p.m, p.d], n: e.days, t: e.title, tm, rg,
+      l: e.location, ds: e.description.slice(0, 300), c: e.cal,
+    };
+  });
+}
+
+function indexByDay(events: DisplayEvent[]): Map<number, number[]> {
+  const byDay = new Map<number, number[]>();
+  events.forEach((e, i) => {
+    const n0 = dayNum(e.d[0], e.d[1], e.d[2]);
+    for (let k = 0; k < Math.min(e.n, 60); k++) {
+      if (!byDay.has(n0 + k)) byDay.set(n0 + k, []);
+      byDay.get(n0 + k)!.push(i);
+    }
+  });
+  return byDay;
+}
+
+/* ---- view fragments (client script mirrors these exactly) ---- */
+
+const chipHtml = (e: DisplayEvent, i: number) =>
+  `<button type="button" class="pc-cal-event" data-ev="${i}" data-cal="${e.c}"><span class="t">${esc(e.tm)}</span><b>${esc(e.t)}</b></button>`;
+
+function monthGridHtml(y: number, m: number, todayN: number, byDay: Map<number, number[]>, events: DisplayEvent[], dows: string[], monthsShort: string[]): string {
+  const first = dayNum(y, m, 1);
+  const start = first - dowOfDay(first);
+  let h = dows.map((d) => `<div class="pc-cal-dow">${esc(d)}</div>`).join('');
+  for (let i = 0; i < 42; i++) {
+    const n = start + i;
+    const p = fromDayNum(n);
+    const out = p.m !== m;
+    const label = p.d === 1 ? `${esc(monthsShort[p.m - 1])} 1` : String(p.d);
+    const chips = out ? '' : (byDay.get(n) ?? []).map((idx) => chipHtml(events[idx], idx)).join('');
+    h += `<div class="pc-cal-day${out ? ' is-out' : ''}${n === todayN ? ' is-today' : ''}"><span class="pc-cal-date">${label}</span>${chips}</div>`;
+  }
+  return `<div class="pc-cal-grid">${h}</div>`;
+}
+
+function weekHtml(weekStart: number, todayN: number, byDay: Map<number, number[]>, events: DisplayEvent[], dows: string[]): string {
+  let h = '';
+  for (let i = 0; i < 7; i++) {
+    const n = weekStart + i;
+    const p = fromDayNum(n);
+    const chips = (byDay.get(n) ?? []).map((idx) => chipHtml(events[idx], idx)).join('');
+    h += `<div class="pc-cal-wday${n === todayN ? ' is-today' : ''}"><div class="whead"><span class="pc-cal-dow">${esc(dows[i])}</span><span class="pc-cal-date">${p.d}</span></div><div class="wevs">${chips}</div></div>`;
+  }
+  return `<div class="pc-cal-week">${h}</div>`;
+}
+
+function upcomingHtml(events: DisplayEvent[], order: number[], limit: number): string {
+  if (!order.length) return `<p class="pc-cal-empty">No upcoming events.</p>`;
+  const items = order.slice(0, limit).map((i) => {
+    const e = events[i];
+    return `<li><button type="button" class="pc-cal-row" data-ev="${i}" data-cal="${e.c}"><span class="d">${esc(e.rg.split(' · ')[0])}</span><span class="ti">${esc(e.t)}</span><span class="t">${esc(e.tm) || 'All day'}</span></button></li>`;
+  });
+  return `<ul class="pc-cal-agenda">${items.join('')}</ul>`;
+}
+
+/* ---- the client script: nav + popover, ~1.6 KB minified-ish ---- */
+
+const CLIENT_JS = `(function(){
+var sc=document.currentScript,root=sc&&sc.closest('.pc-calendar');if(!root)return;
+var P=JSON.parse(root.querySelector('script[type="application/json"]').textContent);
+var body=root.querySelector('.pc-cal-body'),titleEl=root.querySelector('.pc-cal-title'),frame=root.querySelector('.pc-cal-frame');
+var D=864e5;
+function dnum(a){return Math.round(Date.UTC(a[0],a[1]-1,a[2])/D)}
+function fday(n){var d=new Date(n*D);return[d.getUTCFullYear(),d.getUTCMonth()+1,d.getUTCDate()]}
+function dow(n){return((n+4)%7+7)%7}
+var byDay={};P.events.forEach(function(e,i){var n0=dnum(e.d);for(var k=0;k<Math.min(e.n,60);k++){(byDay[n0+k]=byDay[n0+k]||[]).push(i)}});
+function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')}
+function chip(i){var e=P.events[i];return '<button type="button" class="pc-cal-event" data-ev="'+i+'" data-cal="'+e.c+'"><span class="t">'+esc(e.tm)+'</span><b>'+esc(e.t)+'</b></button>'}
+function chips(n){return(byDay[n]||[]).map(chip).join('')}
+var todayN=dnum(P.today),mY=P.month[0],mM=P.month[1],weekN=todayN-dow(todayN);
+function renderMonth(){
+titleEl.textContent=P.months[mM-1]+' '+mY;
+var first=dnum([mY,mM,1]),start=first-dow(first),h='',i,n,p;
+for(i=0;i<7;i++)h+='<div class="pc-cal-dow">'+esc(P.dows[i])+'</div>';
+for(i=0;i<42;i++){n=start+i;p=fday(n);var out=p[1]!==mM;
+h+='<div class="pc-cal-day'+(out?' is-out':'')+(n===todayN?' is-today':'')+'"><span class="pc-cal-date">'+(p[2]===1?esc(P.monthsShort[p[1]-1])+' 1':p[2])+'</span>'+(out?'':chips(n))+'</div>'}
+body.innerHTML='<div class="pc-cal-grid">'+h+'</div>'}
+function renderWeek(){
+var a=fday(weekN),b=fday(weekN+6);
+titleEl.textContent=P.monthsShort[a[1]-1]+' '+a[2]+' – '+(a[1]===b[1]?'':P.monthsShort[b[1]-1]+' ')+b[2]+', '+b[0];
+var h='',i,n,p;
+for(i=0;i<7;i++){n=weekN+i;p=fday(n);
+h+='<div class="pc-cal-wday'+(n===todayN?' is-today':'')+'"><div class="whead"><span class="pc-cal-dow">'+esc(P.dows[i])+'</span><span class="pc-cal-date">'+p[2]+'</span></div><div class="wevs">'+chips(n)+'</div></div>'}
+body.innerHTML='<div class="pc-cal-week">'+h+'</div>'}
+function rerender(){if(P.view==='month')renderMonth();else if(P.view==='week')renderWeek()}
+function inRange(y,m){var v=y*12+m;return v>=P.min[0]*12+P.min[1]&&v<=P.max[0]*12+P.max[1]}
+function nav(dir){
+if(P.view==='month'){var next=mM+dir,y=mY;if(next<1){next=12;y--}if(next>12){next=1;y++}
+if(!inRange(y,next))return;mY=y;mM=next}
+else{var n=weekN+dir*7,p=fday(n);if(!inRange(p[0],p[1]))return;weekN=n}
+closePop();rerender()}
+var bp=root.querySelector('[data-nav="prev"]'),bn=root.querySelector('[data-nav="next"]'),bt=root.querySelector('[data-nav="today"]');
+if(bp){bp.addEventListener('click',function(){nav(-1)});bn.addEventListener('click',function(){nav(1)});
+bt.addEventListener('click',function(){closePop();mY=P.today[0];mM=P.today[1];weekN=todayN-dow(todayN);rerender()})}
+var pop=null;
+function closePop(){if(pop){pop.remove();pop=null}}
+root.addEventListener('click',function(ev){
+var t=ev.target;if(!t.closest)return;
+var hit=t.closest('[data-ev]');
+if(!hit||!root.contains(hit)){if(!t.closest('.pc-cal-pop'))closePop();return}
+var e=P.events[Number(hit.getAttribute('data-ev'))];if(!e)return;
+closePop();
+pop=document.createElement('div');pop.className='pc-cal-pop';
+pop.innerHTML='<button type="button" class="pc-cal-pop-x" aria-label="Close">&times;</button><strong class="pc-cal-pop-title">'+esc(e.t)+'</strong><div class="pc-cal-pop-when">'+esc(e.rg)+'</div>'+(e.l?'<div class="pc-cal-pop-loc">'+esc(e.l)+'</div>':'')+(e.ds?'<p class="pc-cal-pop-desc">'+esc(e.ds)+'</p>':'');
+frame.appendChild(pop);
+var fr=frame.getBoundingClientRect(),cr=hit.getBoundingClientRect();
+pop.style.left=Math.max(8,Math.min(cr.left-fr.left,fr.width-pop.offsetWidth-8))+'px';
+pop.style.top=(cr.bottom-fr.top+6)+'px';
+pop.querySelector('.pc-cal-pop-x').addEventListener('click',closePop)});
+document.addEventListener('keydown',function(e){if(e.key==='Escape')closePop()});
+document.addEventListener('click',function(e){if(pop&&e.target instanceof Node&&!root.contains(e.target))closePop()});
+})();`;
+
+/* ---- entry point ---- */
+
+export async function renderCalendarBlock(a: CalendarBlockAttrs, settings: Settings, now: number): Promise<string> {
+  const heading =
+    (a.title ? `<h3 class="pc-cal-heading">${esc(a.title)}</h3>` : '') +
+    (a.subtitle ? `<p class="pc-cal-sub">${esc(a.subtitle)}</p>` : '');
+
+  if (!a.sources.length) {
+    return `<section class="pc-calendar is-empty">${heading}<div class="pc-cal-frame"><p class="pc-cal-empty">No calendar connected.</p></div></section>`;
+  }
+
+  const tz = settings.timezone || 'UTC';
+  const locale = siteLocale(settings);
+  const today = tzParts(now, tz);
+  const [minY, minM] = addMonths(today.y, today.m, -6);
+  const [maxY, maxM] = addMonths(today.y, today.m, 6);
+  const [endY, endM] = addMonths(today.y, today.m, 7);
+  const win = {
+    displayTz: tz, now,
+    windowStartMs: zonedToUtc(minY, minM, 1, 0, 0, 0, tz),
+    windowEndMs: zonedToUtc(endY, endM, 1, 0, 0, 0, tz),
+  };
+  const { events: raw, errors } = await getCalendarEvents(a.sources, win);
+
+  if (!raw.length && errors.length === a.sources.length) {
+    return `<section class="pc-calendar is-empty">${heading}<div class="pc-cal-frame"><p class="pc-cal-empty">Calendar unavailable right now.</p></div></section>`;
+  }
+
+  const events = buildDisplay(raw, tz, locale);
+  const byDay = indexByDay(events);
+  const todayN = dayNum(today.y, today.m, today.d);
+
+  const utcLabel = (opts: Intl.DateTimeFormatOptions, ms: number) =>
+    new Intl.DateTimeFormat(locale, { ...opts, timeZone: 'UTC' }).format(ms);
+  const months = Array.from({ length: 12 }, (_, i) => utcLabel({ month: 'long' }, Date.UTC(2026, i, 1)));
+  const monthsShort = Array.from({ length: 12 }, (_, i) => utcLabel({ month: 'short' }, Date.UTC(2026, i, 1)));
+  const dows = Array.from({ length: 7 }, (_, i) => utcLabel({ weekday: 'short' }, Date.UTC(2026, 7, 2 + i))); // Aug 2 2026 = Sunday
+
+  let bodyHtml: string;
+  let titleText: string;
+  if (a.view === 'week') {
+    const weekStart = todayN - dowOfDay(todayN);
+    const wa = fromDayNum(weekStart);
+    const wb = fromDayNum(weekStart + 6);
+    titleText = `${monthsShort[wa.m - 1]} ${wa.d} – ${wa.m === wb.m ? '' : `${monthsShort[wb.m - 1]} `}${wb.d}, ${wb.y}`;
+    bodyHtml = weekHtml(weekStart, todayN, byDay, events, dows);
+  } else if (a.view === 'upcoming') {
+    titleText = 'Upcoming';
+    const startOfToday = zonedToUtc(today.y, today.m, today.d, 0, 0, 0, tz);
+    const order = raw.map((e, i) => ({ e, i })).filter(({ e }) => e.end > startOfToday).map(({ i }) => i);
+    bodyHtml = upcomingHtml(events, order, Math.min(20, Math.max(1, a.limit || 6)));
+  } else {
+    titleText = `${months[today.m - 1]} ${today.y}`;
+    bodyHtml = monthGridHtml(today.y, today.m, todayN, byDay, events, dows, monthsShort);
+  }
+
+  const navButtons =
+    a.view === 'upcoming'
+      ? ''
+      : `<button type="button" class="pc-cal-btn" data-nav="today">Today</button>` +
+        `<button type="button" class="pc-cal-btn" data-nav="prev" aria-label="Previous">‹</button>` +
+        `<button type="button" class="pc-cal-btn" data-nav="next" aria-label="Next">›</button>`;
+
+  const pageUrl = a.showOpenLink ? a.sources.map(calendarPageUrl).find(Boolean) ?? '' : '';
+  const footer = pageUrl
+    ? `<div class="pc-cal-foot"><a class="pc-cal-open" href="${esc(pageUrl)}" target="_blank" rel="noopener">Open in Google Calendar ↗</a></div>`
+    : '';
+
+  const payload = {
+    view: a.view,
+    today: [today.y, today.m, today.d],
+    month: [today.y, today.m],
+    min: [minY, minM],
+    max: [maxY, maxM],
+    months, monthsShort, dows, events,
+  };
+  const json = JSON.stringify(payload).replace(/</g, '\\u003c');
+
+  const multi = a.sources.length > 1 ? ' is-multi' : ''; // dots only mean something with 2+ calendars
+  return (
+    `<section class="pc-calendar pc-cal-view-${a.view}${multi}">${heading}` +
+    `<div class="pc-cal-frame">` +
+    `<div class="pc-cal-toolbar"><span class="pc-cal-title">${esc(titleText)}</span>${navButtons}</div>` +
+    `<div class="pc-cal-body">${bodyHtml}</div>` +
+    footer +
+    `</div>` +
+    `<script type="application/json">${json}</script>` +
+    `<script>${CLIENT_JS}</script>` +
+    `</section>`
+  );
+}