@acms-subir/core 0.3.49 → 0.3.50

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @acms-subir/core
 
+## 0.3.50
+
+### Patch Changes
+
+- 0d34128: A full-screen calendar for TVs at `/display/calendar` (and `/es/display/calendar`), for signage players such as AbleSign on a Fire TV Stick.
+
+  Everything about a board is in its link: `view` (`week`, `day`, `rooms`, `month`, `list`, `next` for now and next), `hours` (`8-22` by default, `8:30-21`, `8-24`, `0-24`, or `auto` to fit the events, at least 6 hours), `days` (`5`, `mon-fri`, `sun,wed,fri`; for a list, how many days), `start` (`sun`, `mon`, `today` for a rolling week), the shared filters `cal`, `tag`, `notag` and `room` (`room` also sets the rooms view's columns), `theme` (`dark` or `light`), `size` (`s` to `xl`), `show` (`time,room,host,clock,legend,qr`) and `title`. Whatever the parameters, a display link shows only what `calendar.ics` shows: published events in public calendars, rooms only when shown on public events, never bookings or hosts.
+
+  The first view is rendered on the server and lays out the same at 960×540 and 1080p. Week, day and rooms are hour grids: all-day events in a top row, events at the same time side by side, and events outside the hours cut and marked, never left out. The month's rows fill the screen and the list runs in columns, then pages. Events take their room's colour, else their calendar's; appointments tagged `#google-booking` show as "Booked"; cancelled dates are struck through, and moved dates show at their new time marked "Moved · was Tue 6 PM". A small script moves the now line, dims what has ended, fetches the board every 5 minutes and at midnight, and reloads once a night. Offline it keeps the last board and shows "Updated 7:41 PM", and a service worker (`/display/sw.js`, scope `/display/`) keeps a copy so a reload during an outage shows the last events. Nothing on the page can be focused or followed. It can be framed anywhere, sends no referrer, isn't indexed, and leaves out the site's chrome, head code and analytics; the theme's CSS restyles it through `--display-*` variables and `.display-*` classes. `npx acms docs calendar` has the parameters, theming and the AbleSign setup.
+
+  `/display` is now a reserved path: a collection or calendar base can't use it.
+
 ## 0.3.49
 
 ### Patch Changes

package/docs/calendar.md

@@ -190,3 +190,67 @@ a 404. Spans are at most 31 days, and a plain day means midnight in the site's
 timezone. Answers are never cached, and each address gets 30 checks a minute. The
 client has `roomFree({ room, start, end })`, and the native package has
 `useRoomFree(query)`.
+
+## Display: calendars on TVs
+
+A full-screen calendar for a TV in a lobby or on a room's door. It shows a week, day, month, list, rooms or "now and next" view, with your own hours (8 AM to 10 PM by default). TVs have no mouse, so everything about a screen lives in its link. The page has nothing to focus or follow (no links, buttons or tab stops), because a remote's presses go to the page.
+
+A display link spells out its settings in the address: `/display/calendar?view=week&hours=8-22`. Nothing is saved. Whatever its parameters, it shows only what `calendar.ics` shows: published events in public calendars, or in an unlisted calendar named in `cal=`. It never shows subscribed calendars, booking blocks, hosts, or rooms that aren't shown on public events.
+
+Spanish (or any other site language): `/es/display/calendar?…`.
+
+### Parameters
+
+Each has a default; leave out what you don't need. Lists are comma-separated or repeated (`tag=Class,Youth` or `tag=Class&tag=Youth`). A list matches any of its values, and different parameters must all match.
+
+| Parameter | Values | What it does |
+|---|---|---|
+| `view` | `week` · `day` · `rooms` · `month` · `list` · `next` | The layout. Default `week`. Week, day and rooms are hour grids; `next` is now and next for today. |
+| `hours` | `8-22` · `8:30-21` · `8-24` · `0-24` (or `all`) · `auto` | The hour grids' visible hours. `8-24` ends at midnight. `auto` fits the events shown, never less than 6 hours. Events outside the hours are cut and marked (▲ ▼), never left out. Default `8-22`. |
+| `days` | `7` · `5` · `mon-fri` · `mon-sat` · `sun,wed,fri` | A number is that many days from the first day; names pick weekdays. For `list`, a number is how many days the list covers. Default 7. |
+| `start` | `sun` · `mon` · `today` | The week's first day. `today` gives a rolling week. Default: Calendar settings → Defaults. |
+| `cal` | calendar slugs | Only these calendars. Default: every public calendar. Private calendars never show. |
+| `tag` / `notag` | tag names | Only events with one of these tags, or none of them. `tag=Class` makes a class board. Internal `#` tags never match. |
+| `room` | room slugs | Only events held in these rooms. With `view=rooms` it also sets the columns and their order (otherwise every room of kind "Room"). Only rooms shown on public events count; any other room shows nothing. |
+| `theme` | `dark` · `light` | Default `dark`. |
+| `size` | `s` · `m` · `l` · `xl` | Text size for the viewing distance. Default `m`. |
+| `show` | `time,room,host,clock,legend,qr` (or `none`) | What each event and the page show. Default `time,room,clock`. `legend` is a colour key; `qr` is a code that opens the calendar on a phone (with the same filters). `host` is for saved screens with private details, which are coming next. |
+| `title` | text | Replaces the heading ("This week", "Today"…). |
+
+Examples:
+
+- `/display/calendar?view=week&tag=Class&hours=8-22`: this week's classes.
+- `/display/calendar?view=list&days=14&size=l`: the next two weeks, in large text.
+- `/display/calendar?view=rooms&room=chapel,hall,youth&hours=auto`: today, one column per room.
+
+### What a board does
+
+- The first view is rendered on the server. A small script moves the now line, dims what has ended, and turns the list's pages (the list runs in columns, then pages, instead of scrolling).
+- Every 5 minutes it fetches the board again from the same address, so a change made in the admin reaches the TV within 5 minutes. It also fetches at midnight, so the board rolls to the next day, week or month. It reloads once a night (between 3:00 and 3:40, site time).
+- Offline, it keeps the last board and shows "Updated 7:41 PM". A small service worker (scope `/display/`) keeps a copy of the page, so a reload during an outage shows the last events instead of an error page.
+- Events take their room's colour, else their calendar's. Appointments from Google booking pages (tagged `#google-booking`) show as "Booked". A cancelled date is struck through, and a moved date shows at its new time, marked "Moved" with its old time (and day, when that changed).
+- The page may be framed anywhere (`frame-ancestors *`), sends no referrer, is never indexed, and needs no cookie. It may sit in a shared cache for a minute.
+
+### Setting up a TV with AbleSign
+
+AbleSign (app.ablesign.tv/screens) plays a playlist on each screen; a website is one item.
+
+1. In AbleSign, open **Websites → Add website** and paste the display link.
+2. Add the website to the screen's playlist with a long duration (AbleSign reloads a website every time the playlist plays it; the page refreshes itself).
+3. Put a short image before it in the playlist, so the page loads in the background.
+4. The Fire TV Stick needs Fire OS 6 or later (not Vega OS) and AbleSign 2.2.2 or later.
+
+The page is sized for a TV's web view, which can report 960×540 on a 1080p TV; it lays out the same at any 16:9 size.
+
+### Themes and site code
+
+The board's markup is a styling contract: `.acms-display` (with `data-view`, `data-theme` and `data-size`), `.display-head`, `.display-title`, `.display-clock`, `.display-grid`, `.display-col`, `.display-block` (timed events), `.display-bar` (all-day), `.display-chip` (month), `.display-row` (list), `.display-card` (now and next), `.display-now`, `.display-legend` and `.display-qr`. Events carry `data-room` and `data-cal` with the room and calendar slugs.
+
+A theme's `theme.css` loads after the board's own styles. The simplest way to restyle is to set these variables, which core never sets itself: `--display-bg`, `--display-fg`, `--display-muted`, `--display-line`, `--display-panel`, `--display-today`, `--display-now`, `--display-event`, `--display-font`, `--display-heading-font` and `--display-radius`. For example:
+
+```css
+:root { --display-now: #f5a524; }
+.acms-display[data-theme='light'] { --display-bg: #fffaf2; --display-fg: #1d1a16; }
+```
+
+Keep blocks flat: the built-in look has no accent stripes or gradients. The display leaves out the site's header, footer, head code and analytics. A site file at `src/pages/display/calendar.astro` replaces that page.

package/integration.mjs

@@ -124,7 +124,7 @@ export const CLIENT_DEPS = [
 // First segments of the fixed routes above — a configured base landing on one
 // of these would shadow a real page, so it's a build-time error.
 const RESERVED_BASES = new Set([
-  '/admin', '/api', '/author', '/embed', '/go', '/links', '/media', '/preview', '/search', '/privacy', '/terms',
+  '/admin', '/api', '/author', '/display', '/embed', '/go', '/links', '/media', '/preview', '/search', '/privacy', '/terms',
 ]);
 
 // Collection keys that would collide with admin sections or read ambiguously.
@@ -860,6 +860,9 @@ export default function acms(options = {}) {
       [`${calendar.eventsBase}/[slug]`, 'events/[slug].astro'],
       [`${calendar.eventsBase}/[slug].ics`, 'events/[slug].ics.ts'],
       ['/embed/calendar/[slug]', 'embed/calendar/[slug].astro'],
+      // TV displays: quick links (everything in the address) and their offline worker
+      ['/display/calendar', 'display/calendar.astro'],
+      ['/display/sw.js', 'display/sw.js.ts'],
       ['/api/v1/events', 'api/v1/events.ts'],
       ['/api/v1/calendars', 'api/v1/calendars.ts'],
       // RSVPs from apps: a date's status, then POST /bookings (room bookings there need bookings on)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acms-subir/core",
-  "version": "0.3.49",
+  "version": "0.3.50",
   "publishConfig": {
     "access": "public"
   },
@@ -76,6 +76,7 @@
     "marked": "^15.0.0",
     "pdfjs-dist": "^6.3.289",
     "prismjs": "^1.30.0",
+    "qrcode-generator": "^2.0.4",
     "sanitize-html": "^2.17.7",
     "semver": "^7.7.2",
     "simple-icons": "^16.27.1",

package/src/components/display/DisplayPage.astro

@@ -0,0 +1,192 @@
+---
+// The page around a TV board (lib/display/render.ts): its own lean layout,
+// not Site.astro, so nothing from the site's chrome, head code or analytics
+// reaches a TV (a playlist reloads the page all day). The theme's CSS comes
+// along so it can restyle the board (--display-* variables); its web fonts
+// load without holding up the first paint.
+//
+// The script is all the page runs: the clock, the now line, dimming what has
+// ended, turning the list's pages, fetching a fresh board every 5 minutes
+// (the same address, so the saved screen's key is checked each time), and a
+// reload once a night. Offline it keeps the last board and says when it was
+// updated; the service worker (/display/sw.js) keeps a copy of the page so
+// a reload during an outage shows the last events, not an error.
+import type { Settings } from '../../lib/schema';
+import type { DisplaySettings } from '../../lib/display/settings';
+import { SIZE_SCALE } from '../../lib/display/settings';
+import type { DisplayBoard } from '../../lib/display/board';
+import { displayStrings } from '../../lib/display/words';
+import { resolveDesign } from '../../lib/theme';
+import css from '../../styles/display.css?raw';
+
+interface Props {
+  site: Settings;
+  /** null: the screen doesn't exist (a wrong or rotated key) */
+  board: DisplayBoard | null;
+  settings: DisplaySettings;
+  title: string;
+  lang: string;
+  /** refresh and keep offline copies; off in the admin preview */
+  live: boolean;
+  /** the service worker's address ('' = none) */
+  sw?: string;
+}
+const { site, board, settings: s, title, lang, live, sw = '' } = Astro.props;
+const design = resolveDesign(site);
+const words = displayStrings(lang);
+const LIST_COLS = { s: 4, m: 3, l: 2, xl: 2 };
+const style = `--dsp-scale:${SIZE_SCALE[s.size]};--dsp-list-cols:${LIST_COLS[s.size]}`;
+---
+
+<!doctype html>
+<html lang={lang}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <meta name="referrer" content="no-referrer" />
+    <meta name="color-scheme" content={s.theme === 'light' ? 'light' : 'dark'} />
+    <title>{title}</title>
+    <Fragment set:html={`<style>${css}</style>`} />
+    <Fragment set:html={`<style>${design.css}</style>`} />
+    {design.fontsHref && <link rel="stylesheet" href={design.fontsHref} media="print" onload="this.media='all'" />}
+  </head>
+  <body>
+    {board ? (
+      <div
+        class="acms-display"
+        data-theme={s.theme}
+        data-size={s.size}
+        data-view={s.view}
+        style={style}
+        data-tz={board.tz}
+        data-locale={board.locale}
+        data-until={board.until}
+        data-rendered={board.rendered}
+        data-updated={words.updated}
+        data-live={live ? '1' : undefined}
+        data-sw={sw || undefined}
+        set:html={board.html}
+      />
+    ) : (
+      <div class="acms-display display-missing" data-theme={s.theme} style={style}>
+        <h1 class="display-title">{words.notFound}</h1>
+        <p>{words.notFoundNote}</p>
+      </div>
+    )}
+    {board && (
+      <script is:inline>
+        (function () {
+          var REFRESH = 300000, PAGE_EVERY = 15000;
+          var root = function () { return document.querySelector('.acms-display'); };
+          var first = root();
+          if (!first || !window.Intl) return;
+          var tz = first.getAttribute('data-tz'), loc = first.getAttribute('data-locale');
+          var live = first.hasAttribute('data-live');
+          var wallFmt, clockFmt;
+          try {
+            wallFmt = new Intl.DateTimeFormat('en-US', { timeZone: tz, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' });
+            clockFmt = new Intl.DateTimeFormat(loc, { timeZone: tz, hour: 'numeric', minute: '2-digit' });
+          } catch (e) { return; }
+          // the site's wall clock: day "YYYY-MM-DD" and minutes after midnight
+          var wall = function (ms) {
+            var p = {};
+            wallFmt.formatToParts(ms).forEach(function (x) { p[x.type] = x.value; });
+            return { day: p.year + '-' + p.month + '-' + p.day, min: (+p.hour % 24) * 60 + +p.minute };
+          };
+          var each = function (r, sel, fn) { Array.prototype.forEach.call(r.querySelectorAll(sel), fn); };
+          var lastOk = +first.getAttribute('data-rendered'), lastTry = 0, failed = false, busy = false, page = 0;
+          var jitter = Math.floor(Math.random() * 40);
+
+          function status(r) {
+            var el = r.querySelector('[data-status]');
+            if (!el) return;
+            // offline, or a copy kept from before an outage
+            var stale = failed || Date.now() - lastOk > REFRESH * 2;
+            el.hidden = !stale;
+            if (stale) el.textContent = (r.getAttribute('data-updated') || '{time}').replace('{time}', clockFmt.format(lastOk));
+          }
+
+          function pages(r) {
+            var box = r.querySelector('[data-pages]');
+            if (!box) return;
+            var cols = box.firstElementChild, mark = r.querySelector('[data-page]');
+            var gap = parseFloat(getComputedStyle(cols).columnGap) || 0, w = box.clientWidth + gap;
+            var n = Math.max(1, Math.round((box.scrollWidth + gap) / w));
+            page = page % n;
+            box.scrollLeft = page * w;
+            if (mark) { mark.hidden = n < 2; mark.textContent = (page + 1) + ' / ' + n; }
+          }
+
+          function tick() {
+            var r = root(), now = Date.now(), w = wall(now);
+            var c = r.querySelector('[data-clock]');
+            if (c) c.textContent = clockFmt.format(now);
+            var g = r.querySelector('.display-grid');
+            if (g) {
+              var from = +g.getAttribute('data-from'), to = +g.getAttribute('data-to');
+              each(r, '.display-now', function (n) {
+                var on = n.getAttribute('data-now-day') === w.day && w.min >= from && w.min <= to;
+                n.hidden = !on;
+                if (on) n.style.top = ((w.min - from) / (to - from) * 100) + '%';
+              });
+            }
+            each(r, '[data-end]', function (e) { if (+e.getAttribute('data-end') <= now) e.classList.add('is-past'); });
+            status(r);
+            if (!live) return;
+            // stale (midnight, or now/next changes): at most once a minute, whatever the TV's clock says
+            if (now >= +r.getAttribute('data-until') && now - lastTry > 60000) refresh();
+            // once a night (03:00–03:40 site time, spread out), while online
+            var night = 'acms-display-night';
+            try {
+              if (w.min >= 180 + jitter && w.min < 240 && !failed && sessionStorage.getItem(night) !== w.day) {
+                sessionStorage.setItem(night, w.day);
+                location.reload();
+              }
+            } catch (e) { /* storage off: skip the nightly reload */ }
+          }
+
+          function refresh() {
+            // a request stuck on bad Wi-Fi gives up after 30 s, so it can't block the next ones
+            if (busy && Date.now() - lastTry < 45000) return;
+            busy = true;
+            lastTry = Date.now();
+            var ctl = window.AbortController ? new AbortController() : null;
+            var timer = setTimeout(function () { if (ctl) ctl.abort(); }, 30000);
+            fetch(location.href, { cache: 'no-store', credentials: 'omit', signal: ctl ? ctl.signal : undefined })
+              .then(function (res) {
+                // a screen whose link was rotated or removed: show the page that says so
+                if (res.status === 404) { location.reload(); throw 0; }
+                if (!res.ok) throw 0;
+                return res.text();
+              })
+              .then(function (html) {
+                var next = new DOMParser().parseFromString(html, 'text/html').querySelector('.acms-display[data-rendered]');
+                if (!next) throw 0;
+                var cur = root();
+                cur.parentNode.replaceChild(document.importNode(next, true), cur);
+                failed = false;
+                lastOk = Date.now();
+                pages(root());
+                tick();
+              })
+              .catch(function () { failed = true; status(root()); })
+              .then(function () { clearTimeout(timer); busy = false; });
+          }
+
+          tick();
+          pages(first);
+          setInterval(tick, 20000);
+          setInterval(function () { page++; pages(root()); }, PAGE_EVERY);
+          if (live) {
+            setInterval(refresh, REFRESH);
+            // a copy from the offline store: try for fresh events at once
+            if (Date.now() - lastOk > 60000) refresh();
+            var sw = first.getAttribute('data-sw');
+            if (sw && navigator.serviceWorker) navigator.serviceWorker.register(sw).catch(function () {});
+          }
+        })();
+      </script>
+    )}
+  </body>
+</html>

package/src/lib/calendar/data.ts

@@ -2,8 +2,12 @@
 // calendar surface — the /calendar page, the calendar card, embeds, the admin
 // agenda. Native events are expanded from the DB; feed calendars are fetched
 // live through the cached ICS loader. Visibility rules live in events.ts.
+// Audiences: 'public' (visitors), 'admin' (staff views: drafts too, every
+// calendar, booking names) and 'screen' (a saved TV screen showing private
+// details, lib/display: published events only, private calendars when it
+// names them, bookings with the booker's name, never emails, phones or notes).
 import type { ContentRepository } from '../repo/types';
-import { roomColor, type CalEvent, type Calendar, type Resource, type Settings } from '../schema';
+import { roomColor, type BookingLink, type CalEvent, type Calendar, type Resource, type Settings } from '../schema';
 import { eventIsListed, eventIsPublic, eventRoomIds, expandEvents, locationLine, safeColor, type OccurrenceMove } from './events';
 import { expandVEvents, loadFeed, tzParts, type CalendarEvent, type CalendarWindow } from './ics';
 import { CALENDAR, eventUrl, resourceUrl, withoutPrivateFields } from './config';
@@ -21,7 +25,7 @@ export interface ViewEvent extends CalendarEvent {
   calendarName?: string;
   event?: CalEvent;
   // native events: the rooms this date holds; public views name only rooms
-  // set to show on public events (Resource.showOnEvents)
+  // set to show on public events (Resource.showOnEvents). Bookings: the room booked
   rooms?: ViewRoom[];
   // native events: the date's occurrence key (a moved date keeps its original one)
   key?: string;
@@ -33,7 +37,7 @@ export interface ViewEvent extends CalendarEvent {
 export interface ViewRoom { id: string; slug: string; name: string; color: string }
 
 export interface ViewScope {
-  audience: 'public' | 'admin';
+  audience: 'public' | 'admin' | 'screen';
   // limit to these calendars; omitted = every calendar the audience may see
   calendarIds?: string[];
   // native events outside any calendar (public only when unscoped)
@@ -65,7 +69,9 @@ export async function collectViewEvents(
   const requested = ids ? new Set(ids) : null;
   const visible = all.filter((c) => {
     if (scope.audience === 'admin') return true;
-    // a directly requested calendar may be unlisted; private never is
+    // a directly requested calendar may be unlisted; private never is, except
+    // on a screen that names it
+    if (requested && scope.audience === 'screen') return true;
     return requested ? c.visibility !== 'private' : c.visibility === 'public';
   });
   const inScope = requested ? visible.filter((c) => requested.has(c.id)) : visible;
@@ -81,7 +87,7 @@ export async function collectViewEvents(
       if (requested) return false;
       return scope.includeUncategorized ?? true;
     }
-    if (!requested && scope.audience === 'public') return eventIsListed(e, byId);
+    if (!requested && scope.audience !== 'admin') return eventIsListed(e, byId);
     return e.calendarIds.some((id) => scoped.has(id));
   });
 
@@ -95,7 +101,8 @@ export async function collectViewEvents(
   };
   const resources = natives.some((e) => eventRoomIds(e).length) ? new Map((await repo.listResources()).map((r) => [r.id, r])) : new Map<string, Resource>();
   const rooms = (ids: string[]) => ids.map((id) => resources.get(id))
-    .filter((r): r is Resource => Boolean(r) && (scope.audience === 'admin' || r!.showOnEvents))
+    // staff views and screens with private details name every room
+    .filter((r): r is Resource => Boolean(r) && (scope.audience !== 'public' || r!.showOnEvents))
     .map((r) => ({ id: r.id, slug: r.slug, name: r.name, color: roomColor(r) }));
   const words = eventStrings(scope.locale).calendar;
   for (const o of expandEvents(natives, settings, win)) {
@@ -145,21 +152,31 @@ export async function collectViewEvents(
   }
 
   // resources marked "show on calendar": confirmed bookings appear as
-  // Reserved blocks (no guest names on public views) — only on unscoped views
+  // Reserved blocks (no guest names on public views) — only on unscoped views.
+  // A screen also shows the bookings of the rooms it names, as "<booking
+  // type> · <booker>" (the name only: never their email, phone or notes).
   if (!requested && (scope.includeBookings ?? true) && CALENDAR.bookings) {
-    const resources = (await repo.listResources()).filter((r) => r.showOnCalendar && (!f || untaggedMatches(f, { roomId: r.id })));
+    const named = scope.audience === 'screen' ? f?.roomIds ?? [] : [];
+    const resources = (await repo.listResources()).filter((r) => (r.showOnCalendar || named.includes(r.id)) && (!f || untaggedMatches(f, { roomId: r.id })));
     if (resources.length) {
-      const booked = await repo.listBookings({ from: win.windowStartMs, to: win.windowEndMs, statuses: ['confirmed'], kinds: ['booking'] });
+      const [booked, links] = await Promise.all([
+        repo.listBookings({ from: win.windowStartMs, to: win.windowEndMs, statuses: ['confirmed'], kinds: ['booking'] }),
+        scope.audience === 'screen' ? repo.listBookingLinks() : Promise.resolve([] as BookingLink[]),
+      ]);
       const byId = new Map(resources.map((r) => [r.id, r]));
+      const linkName = new Map(links.map((l): [string, string] => [l.id, l.name]));
       for (const b of booked) {
         const r = byId.get(b.resourceId);
         if (!r) continue;
         const allDay = b.end - b.start >= 86_400_000 - 3_600_000;
+        const title = scope.audience === 'admin' ? `${r.name} · ${b.name}`
+          : scope.audience === 'screen' ? [linkName.get(b.linkId) || r.name, b.name].filter(Boolean).join(' · ')
+          : `${words.reserved} · ${r.name}`;
         events.push({
           start: b.start, end: b.end, allDay, days: allDay ? Math.max(1, Math.round((b.end - b.start) / 86_400_000)) : 1,
-          title: scope.audience === 'admin' ? `${r.name} · ${b.name}` : `${words.reserved} · ${r.name}`,
-          location: r.name, description: '', cal: inScope.length, color: '#8e919a', calendarName: r.name,
+          title, location: r.name, description: '', cal: inScope.length, color: '#8e919a', calendarName: r.name,
           url: scope.audience === 'public' ? resourceUrl(r.slug) : undefined,
+          rooms: [{ id: r.id, slug: r.slug, name: r.name, color: roomColor(r) }],
         });
       }
     }

package/src/lib/display/board.ts

@@ -0,0 +1,216 @@
+// One TV board, ready to render: which days it covers, which events it may
+// show, and when it goes stale. Quick links (/display/calendar?…) and saved
+// screens without private details show what calendar.ics shows: published
+// events in public calendars (or an unlisted one named in cal=). A saved
+// screen with private details on also shows private calendars it names, the
+// bookings of its rooms with the booker's name, the rooms and hosts of every
+// event. Never emails, phone numbers, notes or RSVP lists.
+import type { ContentRepository } from '../repo/types';
+import { roomColor, type Resource, type Settings } from '../schema';
+import { collectViewEvents, type ViewEvent } from '../calendar/data';
+import { eventFilterQuery, resolveEventFilter } from '../calendar/filter';
+import { tzParts, zonedToUtc } from '../calendar/ics';
+import { safeColor } from '../calendar/events';
+import { addDays, dayOfWeek, monthWeeks, startOfWeek, type Iso } from '../calendar/grid';
+import { siteLang, siteLocale } from '../dates';
+import { DEFAULT_HOURS, MIN_AUTO_HOURS, type DisplaySettings, type HourRange } from './settings';
+import { renderBoard, type DisplayItem, type DisplayModel, type DisplayRoom } from './render';
+import { displayStrings } from './words';
+import { qrSvg } from './http';
+
+export const GOOGLE_BOOKING_TAG = '#google-booking';
+const pad = (n: number) => String(n).padStart(2, '0');
+const isoOf = (p: { y: number; m: number; d: number }) => `${p.y}-${pad(p.m)}-${pad(p.d)}`;
+
+export interface DisplayRequest {
+  settings: DisplaySettings;
+  /** a saved screen with "Show private calendars and room bookings" on */
+  privateDetails: boolean;
+  /** the display's language ('' = the site's) */
+  lang: string;
+  now?: number;
+  /** show=qr: the calendar page phones open (origin + path); the board adds its public filter */
+  phoneLink?: string;
+}
+
+export interface DisplayBoard {
+  html: string;
+  /** when the board is stale (the next midnight, or the next now/next change) */
+  until: number;
+  tz: string;
+  locale: string;
+  lang: string;
+  rendered: number;
+}
+
+/** Dates in the display's language, in the site's region: es on an en-US site → es-US. */
+export function displayLocale(site: Pick<Settings, 'locale'>, lang: string): string {
+  if (!lang || lang === siteLang(site)) return siteLocale(site);
+  const region = siteLocale(site).split('-')[1];
+  const wanted = region ? `${lang}-${region}` : lang;
+  try { return Intl.DateTimeFormat.supportedLocalesOf([wanted]).length ? wanted : lang; } catch { return lang; }
+}
+
+const asRoom = (r: Resource): DisplayRoom => ({ id: r.id, slug: r.slug, name: r.name, color: roomColor(r) });
+
+/** the days a board covers, and (month) its weeks */
+export function boardDays(s: DisplaySettings, today: Iso, siteWeekStart: 0 | 1): { days: Iso[]; weeks: Iso[][] } {
+  const ws: 0 | 1 = s.start === 'mon' ? 1 : s.start === 'sun' ? 0 : siteWeekStart;
+  const pick = (from: Iso, n: number) => Array.from({ length: n }, (_, i) => addDays(from, i));
+  const narrow = (days: Iso[]) => ('weekdays' in s.days ? days.filter((d) => (s.days as { weekdays: number[] }).weekdays.includes(dayOfWeek(d))) : days);
+  if (s.view === 'week') {
+    const first = s.start === 'today' ? today : startOfWeek(today, ws);
+    const days = 'count' in s.days ? pick(first, Math.min(7, s.days.count)) : narrow(pick(first, 7));
+    return { days, weeks: [] };
+  }
+  if (s.view === 'list') return { days: 'count' in s.days ? pick(today, s.days.count) : narrow(pick(today, 7)), weeks: [] };
+  if (s.view === 'month') {
+    const weeks = monthWeeks(today.slice(0, 7), ws).map((w) => ('count' in s.days ? w.slice(0, Math.min(7, s.days.count)) : narrow(w)));
+    return { days: weeks.flat(), weeks };
+  }
+  return { days: [today], weeks: [] };
+}
+
+/** hours=auto: the shown events' hours, whole hours, never less than 6 */
+export function autoHours(items: Pick<DisplayItem, 'allDay' | 'startDay' | 'endDay' | 'startMin' | 'endMin'>[], days: Iso[]): HourRange {
+  const timed = items.filter((it) => !it.allDay && it.startDay === it.endDay && days.includes(it.startDay));
+  if (!timed.length) return { ...DEFAULT_HOURS };
+  let from = Math.floor(Math.min(...timed.map((it) => it.startMin)) / 60) * 60;
+  let to = Math.min(1440, Math.ceil(Math.max(...timed.map((it) => it.endMin)) / 60) * 60);
+  const min = MIN_AUTO_HOURS * 60;
+  if (to - from < min) {
+    to = Math.min(1440, from + min);
+    from = Math.max(0, to - min);
+  }
+  return { from, to };
+}
+
+export async function loadDisplayBoard(repo: ContentRepository, site: Settings, req: DisplayRequest): Promise<DisplayBoard> {
+  const s = req.settings;
+  const now = req.now ?? Date.now();
+  const tz = site.timezone || 'UTC';
+  const lang = req.lang || siteLang(site);
+  const locale = displayLocale(site, lang);
+  const words = displayStrings(lang);
+  const today = isoOf(tzParts(now, tz));
+  const midnight = (d: Iso) => zonedToUtc(+d.slice(0, 4), +d.slice(5, 7), +d.slice(8, 10), 0, 0, 0, tz);
+  const { days, weeks } = boardDays(s, today, site.calendar.weekStart);
+  const first = s.view === 'list' || s.view === 'next' ? today : days[0] ?? today;
+  const last = s.view === 'next' ? addDays(today, 1) : days[days.length - 1] ?? today;
+  const win = { displayTz: tz, now, windowStartMs: midnight(first), windowEndMs: midnight(addDays(last, 1)) };
+
+  const [calendars, resources] = await Promise.all([repo.listCalendars(), repo.listResources()]);
+  const filter = resolveEventFilter(s.filter, { calendars, resources, allowPrivate: req.privateDetails });
+  // `shownCalendars`: the calendars this audience may see, the only ones a board names
+  const { events, calendars: shownCalendars } = await collectViewEvents(repo, site, win, {
+    audience: req.privateDetails ? 'screen' : 'public',
+    filter,
+    // quick links show what calendar.ics shows: no subscribed feeds, no bookings
+    includeFeeds: req.privateDetails,
+    includeBookings: req.privateDetails,
+    // translated titles in the display's language
+    locale: lang,
+  });
+  // rooms visitors may see: the ones named on public events
+  const allowed = resources.filter((r) => req.privateDetails || r.showOnEvents);
+  const roomById = new Map(allowed.map((r) => [r.id, asRoom(r)]));
+  const calById = new Map(shownCalendars.map((c) => [c.id, c]));
+  // a person invited without a name has their email as one: never on a TV
+  const hostName = req.privateDetails && s.show.includes('host')
+    ? new Map((await repo.listUsers()).filter((u) => u.name.trim() && !u.name.includes('@')).map((u): [string, string] => [u.id, u.name.trim()]))
+    : new Map<string, string>();
+
+  const items = events.map((v, i) => displayItem(v, i, { tz, words, roomById, calById, hostName, privateDetails: req.privateDetails }));
+  const shown = new Set(days);
+  // a board only carries what it can show (the list: what hasn't ended)
+  const visible = items.filter((it) => {
+    if (s.view === 'list') return it.end > now && days.some((d) => it.startDay <= d && it.endDay >= d);
+    if (s.view === 'next') return it.end > now;
+    return [...shown].some((d) => it.startDay <= d && it.endDay >= d);
+  });
+
+  // view=rooms columns: the rooms the address names, in its order; otherwise
+  // every room the board may show (resources of kind "Room", else all)
+  let rooms: DisplayRoom[] = [];
+  if (s.view === 'rooms') {
+    if (filter.roomIds) rooms = filter.rooms.map(asRoom);
+    else {
+      const sorted = [...allowed].sort((a, b) => a.order - b.order || a.name.localeCompare(b.name));
+      const kindRoom = sorted.filter((r) => r.kind.trim().toLowerCase() === 'room');
+      rooms = (kindRoom.length ? kindRoom : sorted).map(asRoom);
+    }
+  }
+  const hours = s.hours === 'auto' ? autoHours(visible, days) : s.hours;
+
+  const legend: { name: string; color: string }[] = [];
+  for (const it of visible) {
+    const room = it.rooms.find((r) => r.color);
+    const entry = room ? { name: room.name, color: room.color } : it.calendar && it.color ? { name: shownCalendars.find((c) => c.slug === it.calendar)?.name ?? '', color: it.color } : null;
+    if (entry?.name && !legend.some((l) => l.name === entry.name)) legend.push(entry);
+  }
+
+  // the phone link shows the same events where the public calendar can: only
+  // calendars and rooms visitors may see, never "#" tags
+  let qr = '';
+  if (s.show.includes('qr') && req.phoneLink) {
+    const pub = resolveEventFilter(s.filter, { calendars, resources });
+    const query = eventFilterQuery({
+      cal: pub.calendars.map((c) => c.slug), room: pub.rooms.map((r) => r.slug),
+      tag: s.filter.tag.filter((t) => !t.trim().startsWith('#')), notag: s.filter.notag.filter((t) => !t.trim().startsWith('#')),
+    });
+    qr = qrSvg(req.phoneLink + (query ? `?${query}` : ''));
+  }
+
+  const model: DisplayModel = {
+    s, now, tz, locale, words, today, days, weeks, month: today.slice(0, 7), hours, items: visible, rooms, legend, midnight, qr,
+  };
+  let until = midnight(addDays(today, 1));
+  // now/next changes when the current event ends or the next one starts
+  if (s.view === 'next') for (const it of visible) for (const t of [it.start, it.end]) if (t > now && t < until) until = t;
+  return { html: renderBoard(model), until, tz, locale, lang, rendered: now };
+}
+
+interface ItemContext {
+  tz: string;
+  words: ReturnType<typeof displayStrings>;
+  roomById: Map<string, DisplayRoom>;
+  calById: Map<string, { id: string; slug: string; color: string }>;
+  hostName: Map<string, string>;
+  privateDetails: boolean;
+}
+
+function displayItem(v: ViewEvent, i: number, c: ItemContext): DisplayItem {
+  const local = (ms: number, endExclusive = false) => {
+    const p = tzParts(endExclusive ? ms - 1 : ms, c.tz);
+    return { day: isoOf(p), min: endExclusive ? p.hh * 60 + p.mm + 1 : p.hh * 60 + p.mm };
+  };
+  const s = local(v.start);
+  const e = local(Math.max(v.end, v.start + 60_000), true);
+  const startDay = s.day;
+  // all-day: its days, or (a booking of a day or more that isn't midnight to
+  // midnight) every day up to the one it ends on
+  const endDay = v.allDay ? [addDays(startDay, Math.max(1, v.days) - 1), e.day].sort().pop()! : e.day < s.day ? s.day : e.day;
+  // already in the display's language (collectViewEvents' locale)
+  const ev = v.event;
+  const booked = Boolean(ev?.tags.some((t) => t.trim().toLowerCase() === GOOGLE_BOOKING_TAG));
+  const rooms = v.rooms ?? (ev ? ev.roomHold.resourceIds.map((id) => c.roomById.get(id)).filter((r): r is DisplayRoom => Boolean(r)) : []);
+  const cal = ev ? ev.calendarIds.map((id) => c.calById.get(id)).find(Boolean) : undefined;
+  const moved = (v as ViewEvent & { moved?: { from: { start: number; end: number } } }).moved?.from ?? null;
+  return {
+    key: `${ev?.id ?? v.ref ?? 'x'}:${v.start}:${i}`,
+    kind: ev ? 'event' : v.rooms ? 'booking' : 'feed',
+    title: booked ? c.words.booked : v.title,
+    // under "Booked", a private screen also names the appointment
+    detail: booked && c.privateDetails ? v.title : '',
+    start: v.start, end: v.end, allDay: v.allDay,
+    startDay, endDay,
+    startMin: v.allDay ? 0 : s.min,
+    endMin: v.allDay ? 1440 : endDay === startDay ? e.min : 1440,
+    color: rooms.find((r) => r.color)?.color || (v.color ? safeColor(v.color) : ''),
+    rooms,
+    hosts: ev ? ev.hostIds.map((id) => c.hostName.get(id)).filter((n): n is string => Boolean(n)) : [],
+    cancelled: Boolean(v.cancelled),
+    moved,
+    calendar: cal?.slug ?? '',
+  };
+}