@acms-subir/core 0.1.0 → 0.3.0

package/src/lib/calendar/ics-write.ts

@@ -0,0 +1,120 @@
+// ICS output: subscribe feeds (/calendar.ics, /calendar/<slug>.ics) and the
+// single-event download behind "Add to calendar → Apple". One-off timed
+// events are written in UTC (unambiguous everywhere); recurring timed events
+// keep their wall clock with TZID=<IANA zone> so a weekly 10am stays at 10am
+// across DST — Google, Apple and Outlook all resolve IANA zone ids. All-day
+// events are VALUE=DATE with the RFC's exclusive DTEND.
+import type { CalEvent, Calendar } from '../schema';
+import { addWallDays, eventInstants, eventTimeZone, locationLine, parseWall, type Wall } from './events';
+import { zonedToUtc } from './ics';
+import { cleanRrule, rruleMap } from './rrule';
+
+const pad = (n: number) => String(n).padStart(2, '0');
+
+export function escapeText(s: string): string {
+  return s.replace(/\\/g, '\\\\').replace(/;/g, '\;').replace(/,/g, '\\,').replace(/\r?\n/g, '\\n');
+}
+
+// RFC 5545 §3.1: lines longer than 75 octets fold with CRLF + space. Folding
+// counts UTF-8 bytes and never splits a multi-byte character.
+export function foldLine(line: string): string {
+  const enc = new TextEncoder();
+  if (enc.encode(line).length <= 75) return line;
+  const out: string[] = [];
+  let cur = '';
+  let bytes = 0;
+  for (const ch of line) {
+    const n = enc.encode(ch).length;
+    const limit = out.length === 0 ? 75 : 74; // continuation lines carry the leading space
+    if (bytes + n > limit) {
+      out.push(cur);
+      cur = '';
+      bytes = 0;
+    }
+    cur += ch;
+    bytes += n;
+  }
+  out.push(cur);
+  return out.join('\r\n ');
+}
+
+const utcStamp = (ms: number) => new Date(ms).toISOString().replace(/[-:]/g, '').replace(/\.\d{3}/, '');
+const dateValue = (w: Wall) => `${w.y}${pad(w.m)}${pad(w.d)}`;
+const localValue = (w: Wall) => `${dateValue(w)}T${pad(w.hh)}${pad(w.mm)}00`;
+
+// timed events: a date-only UNTIL ("through Oct 30") becomes the UTC instant
+// of that day's end in the event zone, as RFC 5545 requires for DATE-TIME
+// starts
+function feedRrule(rrule: string, allDay: boolean, tz: string): string {
+  const clean = cleanRrule(rrule);
+  if (!clean) return '';
+  const parts = rruleMap(clean);
+  if (!allDay && parts.UNTIL && /^\d{8}$/.test(parts.UNTIL)) {
+    const y = +parts.UNTIL.slice(0, 4), m = +parts.UNTIL.slice(4, 6), d = +parts.UNTIL.slice(6, 8);
+    parts.UNTIL = utcStamp(zonedToUtc(y, m, d, 23, 59, 59, tz));
+  }
+  return Object.entries(parts).map(([k, v]) => `${k}=${v}`).join(';');
+}
+
+export interface FeedOptions {
+  name: string;
+  description?: string;
+  origin: string; // absolute site origin for URL + UID
+  host: string;
+  tz: string; // site zone, for X-WR-TIMEZONE
+  eventUrl: (e: CalEvent) => string;
+  calendars?: Map<string, Calendar>;
+  refreshMinutes?: number;
+  now?: number;
+}
+
+export function eventToVevent(e: CalEvent, siteTz: string, opts: FeedOptions): string[] {
+  const s = parseWall(e.start);
+  if (!s) return [];
+  const en = parseWall(e.end) ?? s;
+  const tz = eventTimeZone(e, { timezone: siteTz });
+  const rule = feedRrule(e.rrule, e.allDay, tz);
+  const lines: string[] = ['BEGIN:VEVENT', `UID:${e.id}@${opts.host}`, `DTSTAMP:${utcStamp(opts.now ?? Date.now())}`];
+  if (e.allDay) {
+    lines.push(`DTSTART;VALUE=DATE:${dateValue(s)}`, `DTEND;VALUE=DATE:${dateValue(addWallDays({ ...en, dateOnly: true }, 1))}`);
+  } else if (rule) {
+    lines.push(`DTSTART;TZID=${tz}:${localValue(s)}`, `DTEND;TZID=${tz}:${localValue(en)}`);
+  } else {
+    const { startAt, endAt } = eventInstants(e, tz);
+    lines.push(`DTSTART:${utcStamp(startAt)}`, `DTEND:${utcStamp(endAt)}`);
+  }
+  if (rule) lines.push(`RRULE:${rule}`);
+  const ex = e.exdates.map(parseWall).filter((w): w is Wall => w !== null);
+  if (ex.length) {
+    lines.push(e.allDay ? `EXDATE;VALUE=DATE:${ex.map(dateValue).join(',')}` : `EXDATE;TZID=${tz}:${ex.map(localValue).join(',')}`);
+  }
+  const url = opts.origin + opts.eventUrl(e);
+  lines.push(`SUMMARY:${escapeText(e.title || 'Untitled event')}`);
+  const loc = locationLine(e.location);
+  if (loc) lines.push(`LOCATION:${escapeText(loc)}`);
+  const desc = [e.excerpt, e.location.url && e.location.url !== loc ? e.location.url : '', url].filter(Boolean).join('\n\n');
+  lines.push(`DESCRIPTION:${escapeText(desc)}`, `URL:${url}`);
+  const cats = e.calendarIds.map((id) => opts.calendars?.get(id)?.name).filter((n): n is string => Boolean(n));
+  if (cats.length) lines.push(`CATEGORIES:${cats.map(escapeText).join(',')}`);
+  if (e.cancelled) lines.push('STATUS:CANCELLED');
+  lines.push(`LAST-MODIFIED:${utcStamp(e.updatedAt)}`, `SEQUENCE:${Math.max(0, Math.floor((e.updatedAt - e.createdAt) / 1000)) % 2147483647}`, 'END:VEVENT');
+  return lines;
+}
+
+export function buildFeed(events: CalEvent[], siteTz: string, opts: FeedOptions): string {
+  const lines = [
+    'BEGIN:VCALENDAR',
+    'VERSION:2.0',
+    'PRODID:-//acms-subir//Calendar//EN',
+    'CALSCALE:GREGORIAN',
+    'METHOD:PUBLISH',
+    `X-WR-CALNAME:${escapeText(opts.name)}`,
+    ...(opts.description ? [`X-WR-CALDESC:${escapeText(opts.description)}`] : []),
+    `X-WR-TIMEZONE:${siteTz || 'UTC'}`,
+    `REFRESH-INTERVAL;VALUE=DURATION:PT${opts.refreshMinutes ?? 60}M`,
+    `X-PUBLISHED-TTL:PT${opts.refreshMinutes ?? 60}M`,
+    ...events.flatMap((e) => eventToVevent(e, siteTz, opts)),
+    'END:VCALENDAR',
+  ];
+  return lines.map(foldLine).join('\r\n') + '\r\n';
+}

package/src/lib/calendar/ics.ts

@@ -17,6 +17,8 @@ export interface CalendarEvent {
   location: string;
   description: string;
   cal: number; // index into the card's sources list (drives the dot color)
+  // native events only: the event id, so views can link to the event page
+  ref?: string;
 }
 
 export interface CalendarWindow {
@@ -26,15 +28,17 @@ export interface CalendarWindow {
   now: number;
 }
 
-interface IcsTime {
+export interface IcsTime {
   y: number; m: number; d: number; hh: number; mm: number; ss: number;
   tz: string | null;
   dateOnly: boolean;
   utc: boolean;
 }
 
-interface VEvent {
+export interface VEvent {
   uid: string;
+  // native events: the source event id, carried onto every occurrence
+  ref?: string;
   title: string;
   location: string;
   description: string;
@@ -254,7 +258,7 @@ function expandEvent(
   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 });
+    out.push({ start: s, end: e, allDay, days: spanDays, title: ev.title || '(untitled)', location: ev.location, description: ev.description, cal: calIdx, ...(ev.ref ? { ref: ev.ref } : {}) });
   };
 
   const rule = ev.rrule && !ev.recurrenceId ? parseRRule(ev.rrule) : null;
@@ -272,7 +276,13 @@ function expandEvent(
     ? { 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;
+  // a date-only UNTIL covers that whole day (Google and Apple read it the
+  // same way); a date-time UNTIL is the exact last allowed start
+  const untilMs = !rule.until
+    ? Infinity
+    : rule.until.dateOnly && !ev.start.dateOnly
+      ? zonedToUtc(rule.until.y, rule.until.m, rule.until.d, 23, 59, 59, occTz)
+      : timeToMs(rule.until, timedTz, displayTz);
   const windowEndDay = Math.ceil(win.windowEndMs / DAY) + 2;
   const weekAnchor = startDay - dowOfDay(startDay);
   const bydayDows = rule.byday.map((b) => b.dow);
@@ -350,7 +360,7 @@ 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> {
+export async function loadFeed(url: string, now: number): Promise<{ at: number; vevents: VEvent[]; calTz: string }> {
   const cached = feedCache.get(url);
   if (cached && now - cached.at < FEED_TTL) return cached;
   const got = await fetchPublicUrl(url, {

package/src/lib/calendar/import.ts

@@ -0,0 +1,203 @@
+// Bring events in from elsewhere: an ICS file/feed (Google, Apple, Outlook
+// exports) or a spreadsheet CSV. Both produce plain event inputs that the
+// import action saves as DRAFTS — nothing goes live without a review.
+// Recurring ICS events keep their RRULE/EXDATEs; per-instance overrides
+// (RECURRENCE-ID) are skipped, since a native event can't hold them yet.
+import type { EventLocation } from '../schema';
+import { parseICS, tzParts, type IcsTime, type VEvent } from './ics';
+import { isValidTimeZone, normalizeEventTimes, parseWall, addWallDays, formatWall } from './events';
+import { cleanRrule } from './rrule';
+
+export interface ImportedEvent {
+  title: string;
+  start: string;
+  end: string;
+  allDay: boolean;
+  timezone: string;
+  rrule: string;
+  exdates: string[];
+  excerpt: string;
+  bodyHtml: string;
+  location: EventLocation;
+  cancelled: boolean;
+  sourceUid: string;
+}
+
+const pad = (n: number) => String(n).padStart(2, '0');
+const escHtml = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const paragraphs = (text: string) =>
+  text.split(/\n{2,}/).map((p) => p.trim()).filter(Boolean).map((p) => `<p>${escHtml(p).replace(/\n/g, '<br>')}</p>`).join('');
+
+// ICS time → wall clock in `zone`. Floating and TZID times keep their wall
+// clock (the TZID becomes the event zone when we know it); UTC times are
+// converted into the site zone.
+function wallOf(t: IcsTime, siteTz: string): { wall: string; zone: string } {
+  if (t.dateOnly) return { wall: `${t.y}-${pad(t.m)}-${pad(t.d)}`, zone: '' };
+  if (t.utc) {
+    const p = tzParts(Date.UTC(t.y, t.m - 1, t.d, t.hh, t.mm, t.ss), siteTz || 'UTC');
+    return { wall: `${p.y}-${pad(p.m)}-${pad(p.d)}T${pad(p.hh)}:${pad(p.mm)}`, zone: '' };
+  }
+  const zone = t.tz && isValidTimeZone(t.tz) && t.tz !== siteTz ? t.tz : '';
+  return { wall: `${t.y}-${pad(t.m)}-${pad(t.d)}T${pad(t.hh)}:${pad(t.mm)}`, zone };
+}
+
+export function eventsFromIcs(text: string, siteTz: string): { events: ImportedEvent[]; skipped: number } {
+  const { vevents, calTz } = parseICS(text);
+  return eventsFromVEvents(vevents, calTz, siteTz);
+}
+
+export function eventsFromVEvents(vevents: VEvent[], calTz: string, siteTz: string): { events: ImportedEvent[]; skipped: number } {
+  const out: ImportedEvent[] = [];
+  let skipped = 0;
+  for (const v of vevents) {
+    if (v.recurrenceId) { skipped++; continue; }
+    const s = wallOf(v.start, siteTz);
+    // floating times in a feed with X-WR-TIMEZONE belong to that zone
+    const zone = s.zone || (!v.start.dateOnly && !v.start.utc && !v.start.tz && calTz && isValidTimeZone(calTz) && calTz !== siteTz ? calTz : '');
+    let end = '';
+    if (v.end) {
+      if (v.start.dateOnly) {
+        const w = parseWall(wallOf(v.end, siteTz).wall);
+        end = w ? formatWall(addWallDays({ ...w, dateOnly: true }, -1)) : '';
+      } else end = wallOf(v.end, siteTz).wall;
+    }
+    let times: { start: string; end: string };
+    try {
+      times = normalizeEventTimes({ start: s.wall, end, allDay: v.start.dateOnly });
+    } catch {
+      skipped++;
+      continue;
+    }
+    out.push({
+      title: (v.title || 'Untitled event').slice(0, 300),
+      start: times.start,
+      end: times.end,
+      allDay: v.start.dateOnly,
+      timezone: zone,
+      rrule: cleanRrule(v.rrule),
+      exdates: v.exdates.map((t) => wallOf(t, siteTz).wall),
+      excerpt: v.description.slice(0, 300),
+      bodyHtml: paragraphs(v.description),
+      location: { name: v.location.slice(0, 300), address: '', url: '' },
+      cancelled: v.cancelled,
+      sourceUid: v.uid,
+    });
+  }
+  return { events: out.slice(0, 500), skipped: skipped + Math.max(0, out.length - 500) };
+}
+
+// ---- CSV -------------------------------------------------------------------
+
+export function parseCsv(text: string): string[][] {
+  const rows: string[][] = [];
+  let row: string[] = [];
+  let cell = '';
+  let q = false;
+  const src = text.replace(/^/, '');
+  for (let i = 0; i < src.length; i++) {
+    const c = src[i];
+    if (q) {
+      if (c === '"' && src[i + 1] === '"') { cell += '"'; i++; }
+      else if (c === '"') q = false;
+      else cell += c;
+      continue;
+    }
+    if (c === '"') q = true;
+    else if (c === ',') { row.push(cell); cell = ''; }
+    else if (c === '\n' || c === '\r') {
+      if (c === '\r' && src[i + 1] === '\n') i++;
+      row.push(cell); cell = '';
+      if (row.some((x) => x.trim())) rows.push(row);
+      row = [];
+    } else cell += c;
+  }
+  row.push(cell);
+  if (row.some((x) => x.trim())) rows.push(row);
+  return rows;
+}
+
+// 2026-10-03 · 10/3/2026 · 3 Oct 2026 → YYYY-MM-DD
+function csvDate(raw: string): string {
+  const s = raw.trim();
+  let m = /^(\d{4})-(\d{1,2})-(\d{1,2})/.exec(s);
+  if (m) return `${m[1]}-${pad(+m[2])}-${pad(+m[3])}`;
+  m = /^(\d{1,2})\/(\d{1,2})\/(\d{2,4})$/.exec(s);
+  if (m) return `${m[3].length === 2 ? `20${m[3]}` : m[3]}-${pad(+m[1])}-${pad(+m[2])}`;
+  const t = Date.parse(s);
+  if (!Number.isNaN(t)) {
+    const d = new Date(t);
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+  }
+  return '';
+}
+
+// 19:00 · 7pm · 7:30 PM → HH:mm
+function csvTime(raw: string): string {
+  const m = /^(\d{1,2})(?::(\d{2}))?\s*([ap]\.?m\.?)?$/i.exec(raw.trim());
+  if (!m) return '';
+  let h = +m[1];
+  const min = m[2] ? +m[2] : 0;
+  if (m[3]) {
+    const pm = m[3].toLowerCase().startsWith('p');
+    if (h === 12) h = pm ? 12 : 0;
+    else if (pm) h += 12;
+  }
+  return h <= 23 && min <= 59 ? `${pad(h)}:${pad(min)}` : '';
+}
+
+const HEADERS: Record<string, string[]> = {
+  title: ['title', 'name', 'summary', 'event', 'subject'],
+  startDate: ['start date', 'start', 'date', 'starts', 'start_date'],
+  startTime: ['start time', 'time', 'start_time'],
+  endDate: ['end date', 'end', 'ends', 'end_date'],
+  endTime: ['end time', 'end_time'],
+  allDay: ['all day', 'all-day', 'allday', 'all day event'],
+  location: ['location', 'venue', 'place', 'where'],
+  address: ['address'],
+  description: ['description', 'details', 'notes', 'about'],
+  url: ['url', 'link', 'website'],
+};
+
+export function eventsFromCsv(text: string): { events: ImportedEvent[]; skipped: number; error?: string } {
+  const rows = parseCsv(text);
+  if (rows.length < 2) return { events: [], skipped: 0, error: 'The CSV needs a header row and at least one event.' };
+  const head = rows[0].map((h) => h.trim().toLowerCase());
+  const col = (key: string) => head.findIndex((h) => HEADERS[key].includes(h));
+  const idx = Object.fromEntries(Object.keys(HEADERS).map((k) => [k, col(k)])) as Record<string, number>;
+  if (idx.title < 0 || idx.startDate < 0) {
+    return { events: [], skipped: 0, error: 'The CSV needs at least a "Title" and a "Start date" column.' };
+  }
+  const get = (r: string[], k: string) => (idx[k] >= 0 ? (r[idx[k]] ?? '').trim() : '');
+  const events: ImportedEvent[] = [];
+  let skipped = 0;
+  for (const r of rows.slice(1, 501)) {
+    const title = get(r, 'title');
+    // "Start" columns sometimes hold a full datetime: split it
+    const rawStart = get(r, 'startDate');
+    const split = /^(.+?)[ T](\d{1,2}(?::\d{2})?\s*(?:[ap]\.?m\.?)?)$/i.exec(rawStart);
+    const date = csvDate(split ? split[1] : rawStart);
+    const time = csvTime(get(r, 'startTime') || (split ? split[2] : ''));
+    if (!title || !date) { skipped++; continue; }
+    const allDayCell = get(r, 'allDay').toLowerCase();
+    const allDay = ['true', 'yes', 'y', '1', 'x'].includes(allDayCell) || !time;
+    const endDate = csvDate(get(r, 'endDate')) || date;
+    const endTime = csvTime(get(r, 'endTime'));
+    try {
+      const times = normalizeEventTimes({
+        start: allDay ? date : `${date}T${time}`,
+        end: allDay ? endDate : endTime ? `${endDate}T${endTime}` : '',
+        allDay,
+      });
+      const desc = get(r, 'description');
+      events.push({
+        title: title.slice(0, 300), ...times, allDay, timezone: '', rrule: '', exdates: [],
+        excerpt: desc.slice(0, 300), bodyHtml: paragraphs(desc),
+        location: { name: get(r, 'location').slice(0, 300), address: get(r, 'address').slice(0, 300), url: get(r, 'url').slice(0, 500) },
+        cancelled: false, sourceUid: '',
+      });
+    } catch {
+      skipped++;
+    }
+  }
+  return { events, skipped: skipped + Math.max(0, rows.length - 501) };
+}

package/src/lib/calendar/render.ts

@@ -6,9 +6,18 @@
 // 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 type { ContentRepository } from '../repo/types';
 import { siteLocale } from '../dates';
-import { getCalendarEvents, tzParts, zonedToUtc, type CalendarEvent } from './ics';
+import { getCalendarEvents, tzParts, zonedToUtc } from './ics';
 import { calendarPageUrl } from './src';
+import { collectViewEvents, type ViewEvent } from './data';
+
+// Card sources are ICS feed URLs or native site calendars:
+//   'acms:all'         every public calendar (+ uncategorized events)
+//   'acms:cal:<slug>'  one site calendar (public or unlisted)
+export const NATIVE_ALL = 'acms:all';
+export const nativeCalendarSource = (slug: string) => `acms:cal:${slug}`;
+export const isNativeSource = (s: string) => s === NATIVE_ALL || /^acms:cal:[a-z0-9-]+$/.test(s);
 
 export interface CalendarBlockAttrs {
   sources: string[];
@@ -45,13 +54,16 @@ interface DisplayEvent {
   l: string;
   ds: string;
   c: number; // source index (dot color)
+  u?: string; // native events: the event page
+  k?: string; // calendar color (#rrggbb), overrides the indexed dot color
+  x?: 1; // cancelled
 }
 
 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[] {
+function buildDisplay(events: ViewEvent[], 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) => {
@@ -68,6 +80,9 @@ function buildDisplay(events: CalendarEvent[], tz: string, locale: string): Disp
     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,
+      ...(e.url ? { u: e.url } : {}),
+      ...(e.color && /^#[0-9a-f]{6}$/i.test(e.color) ? { k: e.color } : {}),
+      ...(e.cancelled ? { x: 1 as const } : {}),
     };
   });
 }
@@ -86,8 +101,9 @@ function indexByDay(events: DisplayEvent[]): Map<number, number[]> {
 
 /* ---- view fragments (client script mirrors these exactly) ---- */
 
+const dotStyle = (e: DisplayEvent) => (e.k ? ` style="--cal-dot:${e.k}"` : '');
 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>`;
+  `<button type="button" class="pc-cal-event${e.x ? ' is-cancelled' : ''}" data-ev="${i}" data-cal="${e.c}"${dotStyle(e)}><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);
@@ -119,7 +135,7 @@ function upcomingHtml(events: DisplayEvent[], order: number[], limit: number): s
   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 `<li><button type="button" class="pc-cal-row${e.x ? ' is-cancelled' : ''}" data-ev="${i}" data-cal="${e.c}"${dotStyle(e)}><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>`;
 }
@@ -136,7 +152,7 @@ function fday(n){var d=new Date(n*D);return[d.getUTCFullYear(),d.getUTCMonth()+1
 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 chip(i){var e=P.events[i];return '<button type="button" class="pc-cal-event'+(e.x?' is-cancelled':'')+'" data-ev="'+i+'" data-cal="'+e.c+'"'+(e.k?' style="--cal-dot:'+e.k+'"':'')+'><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(){
@@ -172,7 +188,7 @@ 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>':'');
+pop.innerHTML='<button type="button" class="pc-cal-pop-x" aria-label="Close">&times;</button>'+(e.x?'<span class="pc-cal-pop-flag">'+esc(P.cancelled)+'</span>':'')+'<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>':'')+(e.u?'<a class="pc-cal-pop-link" href="'+esc(e.u)+'">'+esc(P.details)+' &rarr;</a>':'');
 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';
@@ -182,87 +198,103 @@ 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>` : '');
+/* ---- entry points ---- */
 
-  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>`;
-  }
+export interface CalendarViewOptions {
+  view: 'month' | 'week' | 'upcoming';
+  title?: string;
+  subtitle?: string;
+  limit?: number;
+  // quiet footer link (the ICS card's "Open in Google Calendar ↗")
+  footer?: { href: string; label: string };
+  // show per-calendar dots (only meaningful with 2+ calendars)
+  multi?: boolean;
+  emptyText?: string;
+  // month/week views open on this local month instead of today's
+  focus?: { y: number; m: number };
+}
 
+export function calendarWindow(settings: Pick<Settings, 'timezone'>, now: number) {
   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 = {
+  return {
     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>`;
-  }
+// Pure renderer: occurrences in, markup out. Used by the calendar card, the
+// /calendar page and embeds, so all three share one look and one script.
+export function renderCalendarView(raw: ViewEvent[], settings: Settings, now: number, opts: CalendarViewOptions): string {
+  const heading =
+    (opts.title ? `<h3 class="pc-cal-heading">${esc(opts.title)}</h3>` : '') +
+    (opts.subtitle ? `<p class="pc-cal-sub">${esc(opts.subtitle)}</p>` : '');
+  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 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 utcLabel = (o: Intl.DateTimeFormatOptions, ms: number) =>
+    new Intl.DateTimeFormat(locale, { ...o, 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
 
+  const focusOk = opts.focus && (opts.focus.y * 12 + opts.focus.m) >= minY * 12 + minM && (opts.focus.y * 12 + opts.focus.m) <= maxY * 12 + maxM;
+  const [fy, fm] = focusOk ? [opts.focus!.y, opts.focus!.m] : [today.y, today.m];
+
   let bodyHtml: string;
   let titleText: string;
-  if (a.view === 'week') {
+  if (opts.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') {
+  } else if (opts.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)));
+    bodyHtml = upcomingHtml(events, order, Math.min(50, Math.max(1, opts.limit || 6)));
+    if (!order.length && opts.emptyText) bodyHtml = `<p class="pc-cal-empty">${esc(opts.emptyText)}</p>`;
   } else {
-    titleText = `${months[today.m - 1]} ${today.y}`;
-    bodyHtml = monthGridHtml(today.y, today.m, todayN, byDay, events, dows, monthsShort);
+    titleText = `${months[fm - 1]} ${fy}`;
+    bodyHtml = monthGridHtml(fy, fm, todayN, byDay, events, dows, monthsShort);
   }
 
   const navButtons =
-    a.view === 'upcoming'
+    opts.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 footer = opts.footer
+    ? `<div class="pc-cal-foot"><a class="pc-cal-open" href="${esc(opts.footer.href)}" target="_blank" rel="noopener">${esc(opts.footer.label)}</a></div>`
     : '';
 
   const payload = {
-    view: a.view,
+    view: opts.view,
     today: [today.y, today.m, today.d],
-    month: [today.y, today.m],
+    month: [fy, fm],
     min: [minY, minM],
     max: [maxY, maxM],
     months, monthsShort, dows, events,
+    details: 'Details', cancelled: 'Cancelled',
   };
   const json = JSON.stringify(payload).replace(/</g, '\\u003c');
 
-  const multi = a.sources.length > 1 ? ' is-multi' : ''; // dots only mean something with 2+ calendars
+  const multi = opts.multi ? ' is-multi' : '';
   return (
-    `<section class="pc-calendar pc-cal-view-${a.view}${multi}">${heading}` +
+    `<section class="pc-calendar pc-cal-view-${opts.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>` +
@@ -273,3 +305,54 @@ export async function renderCalendarBlock(a: CalendarBlockAttrs, settings: Setti
     `</section>`
   );
 }
+
+export async function renderCalendarBlock(
+  a: CalendarBlockAttrs,
+  settings: Settings,
+  now: number,
+  repo?: ContentRepository
+): 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>` : '');
+
+  const feeds = a.sources.filter((s) => s.startsWith('http'));
+  const natives = repo ? a.sources.filter(isNativeSource) : [];
+  if (!feeds.length && !natives.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 win = calendarWindow(settings, now);
+  const { events: feedEvents, errors } = feeds.length ? await getCalendarEvents(feeds, win) : { events: [], errors: [] as string[] };
+  let native: ViewEvent[] = [];
+  let nativeCalendars = 0;
+  if (natives.length && repo) {
+    const all = natives.includes(NATIVE_ALL);
+    const slugs = natives.filter((s) => s !== NATIVE_ALL).map((s) => s.slice('acms:cal:'.length));
+    const cals = all ? [] : (await repo.listCalendars()).filter((c) => slugs.includes(c.slug));
+    const got = await collectViewEvents(repo, settings, win, {
+      audience: 'public',
+      ...(all ? {} : { calendarIds: cals.map((c) => c.id) }),
+    });
+    // native calendars get their own colors; shift indexes past the feeds
+    native = got.events.map((e) => ({ ...e, cal: e.cal + feeds.length }));
+    nativeCalendars = got.calendars.length;
+    errors.push(...got.errors);
+  }
+  const raw: ViewEvent[] = [...feedEvents, ...native].sort((x, y) => x.start - y.start || x.title.localeCompare(y.title));
+
+  if (!raw.length && feeds.length && errors.length === feeds.length && !natives.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 pageUrl = a.showOpenLink ? feeds.map(calendarPageUrl).find(Boolean) ?? '' : '';
+  return renderCalendarView(raw, settings, now, {
+    view: a.view,
+    title: a.title,
+    subtitle: a.subtitle,
+    limit: a.limit,
+    footer: pageUrl ? { href: pageUrl, label: 'Open in Google Calendar ↗' } : undefined,
+    // dots only mean something with 2+ calendars
+    multi: feeds.length + nativeCalendars > 1,
+  });
+}