@acms-subir/core 0.3.49 → 0.3.51

package/src/lib/mobile/calendar.ts

@@ -11,6 +11,7 @@ import { sha256Hex } from '../api-keys';
 import type { PublicContext } from './route';
 import { addDaysYmd, describeLink, linkLengths, localMidnight, slotsForDay, ymd } from '../booking/availability';
 import { siteOrigin } from '../seo';
+import { siteLang } from '../dates';
 import { safeUrl } from './content';
 import { pageQuery, isoDay, isoDayOrInstant, queryParams } from './http';
 import { localizeDoc } from '../translations';
@@ -116,7 +117,8 @@ export function occurrenceDto(o: Occurrence, resources: Map<string, Resource>) {
 }
 // e is already localized; publicCalendars limits which calendars are named
 export function publicEventDto(e: CalEvent, origin: string, publicCalendars: Map<string, Calendar>, settings: Settings, locale: string | null, resources?: Map<string, Resource>) {
-  const event = eventToJson(e, origin, publicCalendars, settings.timezone, { resources });
+  // the repeat line in the request's language, else the site's main one
+  const event = eventToJson(e, origin, publicCalendars, settings.timezone, { resources, locale: locale || siteLang(settings) });
   event.url = localizedUrl(event.url, origin, locale);
   // Only configured public event fields; no undeclared imported metadata, no private fields.
   event.fields = publicEventFields(e.fields);

package/src/lib/section-items.ts

@@ -0,0 +1,24 @@
+// The item shapes section data carries (lib/sections.ts fills them): what a
+// theme's section components and the apps' native sections receive.
+// No imports, so other packages can typecheck against them
+// (packages/native keeps its own copy; test/section-items.test.ts there
+// keeps the two in step).
+
+export interface LinkValue { label: string; href: string; external: boolean }
+/** a room this date holds, named only when set to show on public events; color null = none */
+export interface EventItemRoom { slug: string; name: string; color: string | null }
+export interface EventItem {
+  title: string; url: string; summary: string; image: string; imageAlt: string; location: string;
+  start: string; end: string; allDay: boolean; cancelled: boolean;
+  /** this date was moved here: from "Thu, Oct 1 · 6:00 PM" (where it was), with staff's public note; null when not moved */
+  moved: { from: string; note: string } | null;
+  /** the public rooms this date holds (a moved date's own, when it moved into others) */
+  rooms: EventItemRoom[];
+  /** "Sat, Oct 3 · 11:00 AM" */ when: string; /** "Saturday, October 3, 2026" */ date: string;
+  /** "11:00 AM – 1:00 PM EDT" */ time: string; month: string; day: string; weekday: string;
+  cta: { label: string; href: string } | null;
+}
+export interface PostAuthor { name: string; url: string; avatar: string }
+// excerpt: the post's own, else the first ~160 characters of its text
+export interface PostItem { title: string; url: string; excerpt: string; image: string; imageAlt: string; date: string; publishedAt: number | null; tags: string[]; authors: PostAuthor[] }
+export interface BookingItem { title: string; url: string; description: string; resource: string; minutes: number }

package/src/lib/sections.ts

@@ -28,20 +28,8 @@ type Instance = z.infer<typeof SectionInstanceSchema>;
 type Definition = z.infer<typeof SectionDefinition>;
 type FieldDef = Definition['fields'][string];
 
-export interface LinkValue { label: string; href: string; external: boolean }
-export interface EventItem {
-  title: string; url: string; summary: string; image: string; imageAlt: string; location: string;
-  start: string; end: string; allDay: boolean; cancelled: boolean;
-  /** this date was moved here: from "Thu, Oct 1 · 6:00 PM" (where it was), with staff's public note; null when not moved */
-  moved: { from: string; note: string } | null;
-  /** "Sat, Oct 3 · 11:00 AM" */ when: string; /** "Saturday, October 3, 2026" */ date: string;
-  /** "11:00 AM – 1:00 PM EDT" */ time: string; month: string; day: string; weekday: string;
-  cta: { label: string; href: string } | null;
-}
-export interface PostAuthor { name: string; url: string; avatar: string }
-// excerpt: the post's own, else the first ~160 characters of its text
-export interface PostItem { title: string; url: string; excerpt: string; image: string; imageAlt: string; date: string; publishedAt: number | null; tags: string[]; authors: PostAuthor[] }
-export interface BookingItem { title: string; url: string; description: string; resource: string; minutes: number }
+import type { BookingItem, EventItem, LinkValue, PostAuthor, PostItem } from './section-items';
+export type { BookingItem, EventItem, EventItemRoom, LinkValue, PostAuthor, PostItem } from './section-items';
 
 /** apply a theme migration when the stored instance is older than the definition */
 export function migrateSection(theme: Pick<Theme, 'sections' | 'migrations'>, s: Instance): Instance {
@@ -148,7 +136,8 @@ async function resolveSource(field: Extract<FieldDef, { type: 'source' }>, value
       return {
         title: e.title || 'Untitled event', url: lp(eventUrl(e.slug)), summary: e.excerpt, image: safeUrl(e.cover), imageAlt: e.coverAlt,
         location: locationLine(o.moved?.location ?? e.location), start: new Date(o.start).toISOString(), end: new Date(o.end).toISOString(),
-        allDay: o.allDay, cancelled: o.cancelled, moved: was && o.moved ? { from: o.allDay ? was.date : was.range, note: o.moved.note } : null, when: f.range, date: f.date, time: f.time, month: f.month, day: f.day, weekday: f.weekday,
+        allDay: o.allDay, cancelled: o.cancelled, moved: was && o.moved ? { from: o.allDay ? was.date : was.range, note: o.moved.note } : null,
+        rooms: (o.rooms ?? []).map((r) => ({ slug: r.slug, name: r.name, color: r.color || null })), when: f.range, date: f.date, time: f.time, month: f.month, day: f.day, weekday: f.weekday,
         cta: e.cta.label && ctaHref && !o.cancelled ? { label: e.cta.label, href: ctaHref } : null,
       };
     });

package/src/pages/display/calendar.astro

@@ -0,0 +1,30 @@
+---
+import DisplayPage from '../../components/display/DisplayPage.astro';
+import { getRepo } from '../../lib/repo';
+import { CALENDAR } from '../../lib/calendar/config';
+import { I18N, localePath, requestLocale } from '../../lib/i18n';
+import { siteOrigin } from '../../lib/seo';
+import { siteLang } from '../../lib/dates';
+import { readDisplaySettings } from '../../lib/display/settings';
+import { loadDisplayBoard } from '../../lib/display/board';
+import { displayHeaders } from '../../lib/display/http';
+
+// A TV display from a quick link: everything about it is in the address
+// (/display/calendar?view=week&hours=8-22…, /es/display/calendar for
+// Spanish). Nothing is saved, and whatever the parameters say it shows only
+// what calendar.ics shows. Saved screens with private details live at
+// /display/s/<key> (Admin → Calendar → Screens).
+if (!CALENDAR.enabled) return new Response(null, { status: 404 });
+const repo = await getRepo(Astro.locals);
+const site = await repo.getSettings();
+const settings = readDisplaySettings(Astro.url.searchParams);
+const lang = (I18N.enabled ? requestLocale(Astro.url, Astro.locals) : '') || siteLang(site);
+const board = await loadDisplayBoard(repo, site, {
+  settings, privateDetails: false, lang,
+  phoneLink: siteOrigin(site, Astro.url) + localePath(CALENDAR.base, lang),
+});
+displayHeaders(Astro.response.headers, { shared: true });
+const prefix = I18N.enabled && lang !== I18N.defaultLocale ? `/${lang}` : '';
+---
+
+<DisplayPage site={site} board={board} settings={settings} title={settings.title || site.siteTitle} lang={lang} live sw={`${prefix}/display/sw.js`} />

package/src/pages/display/sw.js.ts

@@ -0,0 +1,71 @@
+import type { APIRoute } from 'astro';
+import { CALENDAR } from '../../lib/calendar/config';
+
+// The TV display's service worker (registered by DisplayPage.astro, scope
+// /display/, or /es/display/ through the language rewrite). AbleSign reloads
+// a website every time its playlist plays it and keeps no offline copy, so
+// during an outage a reload would show an error page. Network first: each
+// display page that loads (or refreshes its board) is kept, and served when a
+// page load can't reach the site or gets a server error. A page that answers
+// 404 (a rotated or removed screen) loses its copy, so an old link stops
+// showing events. At most 20 pages are kept, none older than a week is served.
+const SCRIPT = `
+var CACHE = 'acms-display-v1';
+var KEEP = 20, MAX_AGE = 7 * 86400000;
+var scope = new URL(self.registration.scope).pathname;
+self.addEventListener('install', function () { self.skipWaiting(); });
+self.addEventListener('activate', function (e) { e.waitUntil(self.clients.claim()); });
+function keep(key, res) {
+  return caches.open(CACHE).then(function (c) {
+    return c.put(key, res).then(function () { return c.keys(); }).then(function (keys) {
+      // the oldest first: at most KEEP pages (a player adding ?t= to each load can't fill the disk)
+      return Promise.all(keys.slice(0, Math.max(0, keys.length - KEEP)).map(function (k) { return c.delete(k); }));
+    });
+  });
+}
+function kept(key) {
+  return caches.open(CACHE).then(function (c) { return c.match(key); }).then(function (hit) {
+    var at = hit && Date.parse(hit.headers.get('date') || '');
+    // a week-old board is worse than an error: it would show the wrong week
+    return hit && (!at || Date.now() - at < MAX_AGE) ? hit : null;
+  });
+}
+self.addEventListener('fetch', function (e) {
+  var req = e.request;
+  if (req.method !== 'GET') return;
+  var url = new URL(req.url);
+  if (url.origin !== location.origin || url.pathname.indexOf(scope) !== 0 || /\\/sw\\.js$/.test(url.pathname)) return;
+  var key = url.origin + url.pathname + url.search;
+  // only a page load falls back: the page's own refresh must fail, so it
+  // keeps its board and says when it was last updated
+  var page = req.mode === 'navigate';
+  e.respondWith(fetch(req).then(function (res) {
+    if (res.ok && res.type === 'basic') {
+      e.waitUntil(keep(key, res.clone()));
+      return res;
+    }
+    if (res.status === 404 || res.status === 410) {
+      e.waitUntil(caches.open(CACHE).then(function (c) { return c.delete(key); }));
+      return res;
+    }
+    // a deploy, an outage or a rate limit: the last board beats an error page
+    if (page && (res.status >= 500 || res.status === 429)) return kept(key).then(function (hit) { return hit || res; });
+    return res;
+  }, function (err) {
+    if (!page) throw err;
+    return kept(key).then(function (hit) { if (hit) return hit; throw err; });
+  }));
+});
+`;
+
+export const GET: APIRoute = () => {
+  if (!CALENDAR.enabled) return new Response(null, { status: 404 });
+  return new Response(SCRIPT, {
+    headers: {
+      'Content-Type': 'text/javascript; charset=utf-8',
+      // browsers check for a new worker on every registration; never keep an old one
+      'Cache-Control': 'no-cache',
+      'X-Content-Type-Options': 'nosniff',
+    },
+  });
+};

package/src/styles/display.css

@@ -0,0 +1,195 @@
+/* The TV display (/display/…; lib/display/render.ts). Inlined into the page
+   before the theme's CSS, so a theme restyles it with equal-specificity rules
+   or, better, by setting these variables (core never sets them itself):
+     --display-bg, --display-fg, --display-muted, --display-line,
+     --display-panel, --display-today, --display-now, --display-event,
+     --display-font, --display-heading-font, --display-radius
+   e.g. :root { --display-bg: #101820 } or
+        .acms-display[data-theme='light'] { --display-bg: #fffaf2 }
+   Every length is a multiple of --dsp-u (viewport height × text size), matching
+   METRICS in render.ts. Flat blocks only: no accent stripes, no gradients. */
+
+html, body { margin: 0; height: 100%; overflow: hidden; }
+body { background: #000; }
+
+.acms-display {
+  --dsp-u: calc(min(1vh, 1.7778vw) * var(--dsp-scale, 1));
+  --d-bg: #0c0e13; --d-fg: #f3f4f7; --d-muted: #9ca3af; --d-line: rgba(255, 255, 255, 0.09);
+  --d-panel: rgba(255, 255, 255, 0.06); --d-today: rgba(255, 255, 255, 0.055); --d-now: #ff5a4f; --d-event: #4f6bed;
+  --dsp-bg: var(--display-bg, var(--d-bg));
+  --dsp-fg: var(--display-fg, var(--d-fg));
+  --dsp-muted: var(--display-muted, var(--d-muted));
+  --dsp-line: var(--display-line, var(--d-line));
+  --dsp-r: var(--display-radius, calc(0.7 * var(--dsp-u)));
+  position: fixed;
+  inset: 0;
+  box-sizing: border-box;
+  padding: calc(2.5 * var(--dsp-u)) calc(3 * var(--dsp-u));
+  display: flex;
+  flex-direction: column;
+  gap: calc(2 * var(--dsp-u));
+  background: var(--dsp-bg);
+  color: var(--dsp-fg);
+  font-family: var(--display-font, var(--font-body, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif));
+  font-size: calc(2.4 * var(--dsp-u));
+  line-height: 1.25;
+  overflow: hidden;
+  cursor: none;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+}
+.acms-display[data-theme='light'] {
+  --d-bg: #f6f6f3; --d-fg: #15171c; --d-muted: #5b6270; --d-line: rgba(0, 0, 0, 0.1);
+  --d-panel: rgba(0, 0, 0, 0.045); --d-today: rgba(0, 0, 0, 0.045); --d-now: #d9342b;
+}
+.acms-display *, .acms-display *::before { box-sizing: border-box; }
+
+/* header: heading, offline note, QR, clock (8u tall) */
+.display-head { flex: 0 0 calc(8 * var(--dsp-u)); display: flex; align-items: center; gap: calc(3 * var(--dsp-u)); min-height: 0; }
+.display-heading { flex: 1 1 auto; min-width: 0; }
+.display-title {
+  margin: 0; font-size: calc(4.4 * var(--dsp-u)); line-height: 1.1; font-weight: 700; letter-spacing: -0.01em;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  font-family: var(--display-heading-font, var(--font-heading, inherit));
+}
+.display-sub { margin: calc(0.3 * var(--dsp-u)) 0 0; font-size: calc(2.4 * var(--dsp-u)); color: var(--dsp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.display-clock { margin: 0; font-size: calc(4.4 * var(--dsp-u)); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.display-status {
+  margin: 0; padding: calc(0.5 * var(--dsp-u)) calc(1.4 * var(--dsp-u)); border-radius: 999px; white-space: nowrap;
+  font-size: calc(2 * var(--dsp-u)); color: var(--dsp-muted); background: var(--display-panel, var(--d-panel));
+}
+.display-status[hidden], .display-now[hidden], .display-page[hidden] { display: none; }
+.display-qr { display: flex; align-items: center; gap: calc(1.2 * var(--dsp-u)); height: 100%; }
+.display-qr svg { height: 100%; width: auto; display: block; background: #fff; padding: calc(0.5 * var(--dsp-u)); border-radius: calc(0.5 * var(--dsp-u)); }
+.display-qr-note { font-size: calc(1.7 * var(--dsp-u)); color: var(--dsp-muted); max-width: calc(13 * var(--dsp-u)); line-height: 1.2; }
+
+.display-board { flex: 1 1 0; min-height: 0; position: relative; }
+.display-legend { flex: 0 0 calc(3 * var(--dsp-u)); display: flex; align-items: center; gap: calc(2.6 * var(--dsp-u)); font-size: calc(2 * var(--dsp-u)); color: var(--dsp-muted); overflow: hidden; white-space: nowrap; }
+.display-key { display: inline-flex; align-items: center; gap: calc(0.8 * var(--dsp-u)); }
+
+/* shared by every event shape */
+.display-event { min-width: 0; }
+.display-event.is-past { opacity: 0.45; }
+.display-event.is-cancelled { opacity: 0.6; }
+.display-event.is-cancelled .display-event-title { text-decoration: line-through; }
+.display-event-title { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.display-event-detail, .display-event-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.display-event-meta { opacity: 0.85; }
+.display-flag { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.88em; }
+.display-was { opacity: 0.9; }
+.display-dot { display: inline-block; flex: none; width: calc(1.4 * var(--dsp-u)); height: calc(1.4 * var(--dsp-u)); border-radius: calc(0.35 * var(--dsp-u)); background: var(--ev, var(--display-event, var(--d-event))); }
+
+/* hour grids: week, day, rooms */
+.display-grid { --axis: calc(7.5 * var(--dsp-u)); height: 100%; display: flex; flex-direction: column; }
+.display-heads, .display-top, .display-cols { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
+.display-heads { flex: 0 0 calc(4.5 * var(--dsp-u)); margin-left: var(--axis); gap: calc(0.4 * var(--dsp-u)); }
+.display-dayhead {
+  display: flex; align-items: baseline; justify-content: center; gap: 0.35em; min-width: 0; padding: 0 0.4em;
+  border-radius: var(--dsp-r); font-size: calc(2.2 * var(--dsp-u)); color: var(--dsp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  align-self: stretch; align-items: center;
+}
+.display-dayname { overflow: hidden; text-overflow: ellipsis; }
+.display-daynum { font-size: calc(2.8 * var(--dsp-u)); font-weight: 700; color: var(--dsp-fg); }
+.display-dayhead.is-today { color: var(--dsp-fg); font-weight: 700; background: var(--display-today, var(--d-today)); }
+.display-dayhead.is-past { opacity: 0.6; }
+.display-roomhead { color: var(--dsp-fg); font-weight: 700; background: var(--display-panel, var(--d-panel)); }
+.display-top {
+  flex: none; margin: calc(0.6 * var(--dsp-u)) 0 0 var(--axis);
+  grid-template-rows: repeat(var(--lines), calc(3.3 * var(--dsp-u))); gap: 0 calc(0.4 * var(--dsp-u));
+}
+.display-hours { flex: 1 1 0; min-height: 0; display: flex; position: relative; margin-top: calc(0.8 * var(--dsp-u)); }
+.display-axis { flex: 0 0 var(--axis); position: relative; }
+.display-hour { position: absolute; right: calc(1 * var(--dsp-u)); transform: translateY(-50%); font-size: calc(1.8 * var(--dsp-u)); color: var(--dsp-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.display-cols { flex: 1 1 auto; position: relative; gap: calc(0.4 * var(--dsp-u)); }
+.display-lines { position: absolute; inset: 0; pointer-events: none; }
+.display-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--dsp-line); }
+.display-col { position: relative; min-width: 0; border-radius: var(--dsp-r); }
+.display-col.is-today { background: var(--display-today, var(--d-today)); }
+.display-grid.is-rooms .display-col.is-today { background: none; }
+/* timed blocks: render.ts gives each only the lines it can show whole
+   (is-mid: one title line and the meta; is-short: the title alone) */
+.display-block {
+  position: absolute; display: flex; flex-direction: column;
+  padding: calc(0.35 * var(--dsp-u)) calc(0.7 * var(--dsp-u)); overflow: hidden;
+  border-radius: var(--dsp-r); border: calc(0.15 * var(--dsp-u)) solid var(--dsp-bg);
+  background: var(--ev, var(--display-event, var(--d-event))); color: var(--ev-ink, #fff);
+  font-size: calc(1.7 * var(--dsp-u)); line-height: 1.1;
+}
+.display-block .display-event-title { font-size: calc(2.15 * var(--dsp-u)); line-height: 1.05; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.display-block.is-mid .display-event-title, .display-block.is-short .display-event-title { display: block; white-space: nowrap; }
+.display-block[data-cut='start'], .display-block[data-cut='both'] { border-top-left-radius: 0; border-top-right-radius: 0; }
+.display-block[data-cut='end'], .display-block[data-cut='both'] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+.display-cut { font-size: 0.75em; margin: 0 0.3em; opacity: 0.9; }
+.display-bar, .display-chip {
+  margin: calc(0.25 * var(--dsp-u)) 0; padding: 0 calc(0.6 * var(--dsp-u)); border-radius: calc(0.5 * var(--dsp-u));
+  font-size: calc(1.9 * var(--dsp-u)); line-height: calc(2.8 * var(--dsp-u)); z-index: 1; overflow: hidden;
+}
+.display-bar { background: var(--ev, var(--display-event, var(--d-event))); color: var(--ev-ink, #fff); }
+.display-bar .display-event-title, .display-chip .display-event-title { font-weight: 600; }
+.display-bar-time, .display-chip-time { font-weight: 500; opacity: 0.85; font-variant-numeric: tabular-nums; }
+.display-chip { display: flex; align-items: center; gap: calc(0.6 * var(--dsp-u)); }
+.display-chip::before { content: ''; flex: none; width: calc(1.1 * var(--dsp-u)); height: calc(1.1 * var(--dsp-u)); border-radius: calc(0.3 * var(--dsp-u)); background: var(--ev, var(--display-event, var(--d-event))); }
+.display-more { font-size: calc(1.8 * var(--dsp-u)); color: var(--dsp-muted); padding: 0 calc(0.6 * var(--dsp-u)); align-self: center; z-index: 1; white-space: nowrap; }
+/* the now line keeps an outline in the page colour, so it shows over a block of its own colour */
+.display-now {
+  position: absolute; left: 0; right: 0; height: calc(0.35 * var(--dsp-u)); margin-top: calc(-0.175 * var(--dsp-u)); z-index: 3; pointer-events: none;
+  background: var(--display-now, var(--d-now)); box-shadow: 0 0 0 calc(0.2 * var(--dsp-u)) var(--dsp-bg);
+}
+.display-now::before {
+  content: ''; position: absolute; left: calc(-0.7 * var(--dsp-u)); top: calc(-0.5 * var(--dsp-u)); width: calc(1.35 * var(--dsp-u)); height: calc(1.35 * var(--dsp-u));
+  border-radius: 50%; background: var(--display-now, var(--d-now)); box-shadow: 0 0 0 calc(0.2 * var(--dsp-u)) var(--dsp-bg);
+}
+
+/* month: rows fill the height; each row has a date line and --lines lines */
+.display-month { height: 100%; display: grid; grid-template-rows: calc(3.5 * var(--dsp-u)) repeat(var(--rows), minmax(0, 1fr)); }
+.display-dows, .display-weekrow { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
+.display-dows { align-items: center; font-size: calc(1.9 * var(--dsp-u)); color: var(--dsp-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+.display-dow { padding: 0 calc(0.6 * var(--dsp-u)); }
+.display-weekrow {
+  grid-template-rows: calc(3.4 * var(--dsp-u)) repeat(var(--lines), calc(3.3 * var(--dsp-u))) minmax(0, 1fr);
+  border-top: 1px solid var(--dsp-line); overflow: hidden; min-height: 0;
+}
+.display-cell { grid-row: 1 / -1; padding: calc(0.3 * var(--dsp-u)) calc(0.6 * var(--dsp-u)); border-left: 1px solid var(--dsp-line); min-width: 0; }
+.display-cell:first-child { border-left: 0; }
+.display-cell.is-today { background: var(--display-today, var(--d-today)); }
+.display-cell.is-other .display-date { opacity: 0.4; }
+.display-cell.is-past .display-date { opacity: 0.6; }
+.display-date { font-size: calc(2.2 * var(--dsp-u)); font-weight: 600; font-variant-numeric: tabular-nums; }
+.display-cell.is-today .display-date { color: var(--display-now, var(--d-now)); font-weight: 800; }
+.display-month .display-bar, .display-month .display-chip { margin-left: calc(0.3 * var(--dsp-u)); margin-right: calc(0.3 * var(--dsp-u)); }
+
+/* list: columns, then pages (the script turns them) */
+.display-list { height: 100%; overflow: hidden; }
+.display-list-cols { height: 100%; column-count: var(--dsp-list-cols, 3); column-gap: calc(3.5 * var(--dsp-u)); column-fill: auto; }
+.display-day { margin: 0 0 calc(2.2 * var(--dsp-u)); }
+.display-day-title { margin: 0 0 calc(0.6 * var(--dsp-u)); font-size: calc(2.3 * var(--dsp-u)); font-weight: 700; color: var(--dsp-muted); break-after: avoid; }
+.display-day.is-today .display-day-title { color: var(--dsp-fg); }
+.display-row {
+  display: grid; grid-template-columns: calc(1.4 * var(--dsp-u)) calc(9.5 * var(--dsp-u)) minmax(0, 1fr); gap: calc(1.2 * var(--dsp-u));
+  align-items: baseline; padding: calc(0.75 * var(--dsp-u)) 0; border-top: 1px solid var(--dsp-line); break-inside: avoid;
+}
+.display-row .display-dot { align-self: center; }
+.display-row-time { color: var(--dsp-muted); font-size: calc(2.1 * var(--dsp-u)); white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
+.display-row-body { min-width: 0; }
+.display-row .display-event-title { font-size: calc(2.4 * var(--dsp-u)); white-space: normal; }
+.display-row .display-event-meta, .display-row .display-event-detail { font-size: calc(1.9 * var(--dsp-u)); color: var(--dsp-muted); opacity: 1; }
+.display-page { position: absolute; right: 0; bottom: calc(-0.5 * var(--dsp-u)); font-size: calc(1.8 * var(--dsp-u)); color: var(--dsp-muted); }
+
+/* now and next */
+.display-next { height: 100%; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: calc(3 * var(--dsp-u)); }
+.display-slot { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: calc(1.4 * var(--dsp-u)); overflow: hidden; }
+.display-slot-title { margin: 0; font-size: calc(2.6 * var(--dsp-u)); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dsp-muted); }
+.display-card {
+  display: flex; flex-direction: column; gap: calc(0.6 * var(--dsp-u)); padding: calc(2 * var(--dsp-u)) calc(2.4 * var(--dsp-u));
+  border-radius: calc(1.2 * var(--dsp-u)); background: var(--ev, var(--display-event, var(--d-event))); color: var(--ev-ink, #fff);
+}
+.display-card .display-event-title { font-size: calc(3.4 * var(--dsp-u)); line-height: 1.15; white-space: normal; }
+.display-card.is-big .display-event-title { font-size: calc(6 * var(--dsp-u)); line-height: 1.08; }
+.display-card .display-event-meta, .display-card .display-event-detail { font-size: calc(2.4 * var(--dsp-u)); white-space: normal; }
+.display-card.is-big .display-event-meta { font-size: calc(3 * var(--dsp-u)); }
+.display-empty { margin: 0; color: var(--dsp-muted); font-size: calc(3 * var(--dsp-u)); }
+.display-empty.is-board { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
+
+/* a screen that isn't there (wrong or rotated key) */
+.display-missing { justify-content: center; align-items: center; text-align: center; }
+.display-missing p { margin: 0; max-width: 60ch; color: var(--dsp-muted); }

package/src/theme-sdk/calendar.ts

@@ -1,5 +1,6 @@
 import { CALENDAR } from '../lib/calendar/config';
 import type { Occurrence } from '../lib/calendar/events';
+import type { ViewEvent } from '../lib/calendar/data';
 
 export { eventUrl } from '../lib/calendar/config';
 
@@ -31,8 +32,9 @@ export interface UpcomingEventsOptions {
  * fields except private custom fields. `cancelled` is true when the whole
  * event or just this date is cancelled. `moved` is set when this date of a
  * series was moved here: `from` (its old start and end) and staff's `note`.
+ * `rooms` are the public rooms this date holds ({ id, slug, name, color }).
  */
-export type UpcomingEvent = Pick<Occurrence, 'event' | 'start' | 'end' | 'allDay' | 'days' | 'cancelled'> & Pick<Partial<Occurrence>, 'moved'>;
+export type UpcomingEvent = Pick<Occurrence, 'event' | 'start' | 'end' | 'allDay' | 'days' | 'cancelled'> & Pick<Partial<Occurrence>, 'moved'> & Pick<ViewEvent, 'rooms'>;
 
 /** Server-side helper for Astro templates and endpoints. No repository access needed. */
 export async function upcomingEvents(

package/src/theme-sdk/index.ts

@@ -19,7 +19,7 @@ export interface EventProps { settings: Settings; event: CalEvent; html: string;
  * `acms theme types <slug>` writes a typed Data interface per section.
  */
 export interface SectionProps<D = Record<string, unknown>> { data: D; variant: string; settings: Settings; page: Page }
-export type { LinkValue, EventItem, PostItem, PostAuthor, BookingItem } from '../lib/sections';
+export type { LinkValue, EventItem, EventItemRoom, PostItem, PostAuthor, BookingItem } from '../lib/sections';
 /** Props for templates/header.astro and templates/footer.astro. */
 export type { SiteChrome, ChromeLink } from '../lib/site-chrome';
 // core's chrome labels for any language (a template already gets them as site.words)