@acms-subir/core 0.3.49 → 0.3.51

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @acms-subir/core
 
+## 0.3.51
+
+### Patch Changes
+
+- 1efe99e: Section event items (an events source, as theme sections and the apps' native sections receive them) carry `rooms`: the public rooms each date holds, as `{ slug, name, color }`. A moved date lists its own rooms, and only rooms set to "Name it on public events" are included, with `color` `null` when a room has none. A Classes card can now name the room without staff typing it into the place. `upcomingEvents()` in the theme SDK returns `rooms` too, as `{ id, slug, name, color }`. The library's Upcoming events section shows "Moved · " before a moved date, with "Moved from …" and the note. `EventItem` and its sibling types now live in `lib/section-items.ts`, which has no imports, and `EventItemRoom` is exported from `@acms-subir/core/theme`.
+
+  The app API's `event.repeats` (`/api/v1/events`, `/api/v1/events/:slug` and search) now follows `?locale=`: "Todos los sábados, hasta el 1 jun 2030" instead of always English. Without a locale it uses the site's main language, and the until date is written in that language too. `eventToJson` takes a `locale` option for it. The REST API and webhooks keep English.
+
+## 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/docs/theme-authoring.md

@@ -55,7 +55,7 @@ const date = new Intl.DateTimeFormat('en', { dateStyle: 'medium', timeZone: Astr
 </section>}
 ```
 
-`calendarConfig()` returns a fresh `{ enabled, base, eventsBase }` object; `eventUrl(slug)` uses the configured event base. `upcomingEvents(Astro, options?)` resolves storage through `Astro.locals` and loads the site's timezone settings. It returns the next or ongoing occurrence of each distinct published, publicly listed native event, soonest first, including recurring and all-day events. Private/unlisted calendars and external feed entries are excluded; cancelled public events remain visible so templates can label them, and a date moved to another time carries `moved` (`{ from: { start, end }, note }`) so templates can say "Moved from …". `tag` keeps only events with that tag and `excludeTag` leaves them out (a tag's name in any case, or its slug), e.g. `upcomingEvents(Astro, { tag: 'Class' })` for a Classes page. Disabled calendars and a zero limit return `[]` without accessing storage. Storage errors propagate to the template.
+`calendarConfig()` returns a fresh `{ enabled, base, eventsBase }` object; `eventUrl(slug)` uses the configured event base. `upcomingEvents(Astro, options?)` resolves storage through `Astro.locals` and loads the site's timezone settings. It returns the next or ongoing occurrence of each distinct published, publicly listed native event, soonest first, including recurring and all-day events. Private/unlisted calendars and external feed entries are excluded; cancelled public events remain visible so templates can label them, and a date moved to another time carries `moved` (`{ from: { start, end }, note }`) so templates can say "Moved from …". `rooms` lists the public rooms each date holds (`{ id, slug, name, color }`, only rooms set to show on public events). Section `EventItem`s from an events source carry `moved` (`{ from: "Thu, Oct 1 · 6:00 PM", note }` or `null`) and `rooms` (`{ slug, name, color }[]`, `color` `null` when the room has none). `tag` keeps only events with that tag and `excludeTag` leaves them out (a tag's name in any case, or its slug), e.g. `upcomingEvents(Astro, { tag: 'Class' })` for a Classes page. Disabled calendars and a zero limit return `[]` without accessing storage. Storage errors propagate to the template.
 
 Options default to `{ limit: 6, horizonDays: 400 }`. The limit must be a non-negative safe integer and the horizon a positive finite number. Each `UpcomingEvent` contains `{ event, start, end, allDay, days }`, with start/end in Unix milliseconds. Format occurrence timestamps using the site's timezone rather than the authored `event.start` when displaying recurring events. `UpcomingEvent`, `UpcomingEventsOptions`, and `ThemeCalendarConfig` are exported types.
 

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.51",
   "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/section-library/upcoming-events/UpcomingEvents.astro

@@ -24,8 +24,9 @@ const fit = data.imageFit === 'contain' ? 'contain' : 'cover';
               ? <a class="upev-media" href={e.url} tabindex="-1" aria-hidden="true"><img src={image.src} alt="" loading="lazy" /></a>
               : <span class="upev-date" aria-hidden="true"><b>{e.day}</b>{e.month}</span>}
             <div class="upev-body">
-              <span class="upev-when">{e.cancelled ? 'Cancelled · ' : ''}{e.when}</span>
+              <span class="upev-when">{e.cancelled ? 'Cancelled · ' : e.moved ? 'Moved · ' : ''}{e.when}</span>
               <h3 class="upev-title"><a href={e.url}>{e.title}</a></h3>
+              {!e.cancelled && e.moved && <span class="upev-moved">Moved from {e.moved.from}{e.moved.note ? ` · ${e.moved.note}` : ''}</span>}
               {data.showSummary && e.summary && <p class="upev-summary">{e.summary}</p>}
               {data.showLocation !== false && e.location && <span class="upev-loc">{e.location}</span>}
             </div>
@@ -59,5 +60,6 @@ const fit = data.imageFit === 'contain' ? 'contain' : 'cover';
   .upev-title a { color: inherit; text-decoration: none; }
   .upev-title a:hover { text-decoration: underline; }
   .upev-loc { font-size: 0.9rem; color: var(--muted); }
+  .upev-moved { font-size: 0.9rem; color: var(--accent, inherit); }
   .is-cancelled .upev-title { text-decoration: line-through; opacity: 0.7; }
 </style>

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/api.ts

@@ -59,8 +59,16 @@ export function roomsToJson(ids: string[], resources: Map<string, Resource> | un
 
 const abs = (origin: string, path: string) => (/^https?:\/\//.test(path) ? path : origin + path);
 
-// resources: every room by id (rooms stay [] without it)
-export function eventToJson(e: CalEvent, origin: string, calendars: Map<string, Calendar>, siteTz = '', opts: { includePrivate?: boolean; resources?: Map<string, Resource> } = {}): EventJson {
+// a repeat's "until" date in that language ("12 jun 2027")
+const untilDate = (locale: string) => (ymd: string) => {
+  const [y, m, d] = ymd.split('-').map(Number);
+  try { return new Date(Date.UTC(y, m - 1, d)).toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' }); }
+  catch { return ymd; }
+};
+
+// resources: every room by id (rooms stay [] without it); locale: the
+// language of the repeat line ("Cada semana el sábado"; English without it)
+export function eventToJson(e: CalEvent, origin: string, calendars: Map<string, Calendar>, siteTz = '', opts: { includePrivate?: boolean; resources?: Map<string, Resource>; locale?: string } = {}): EventJson {
   return {
     id: e.id,
     slug: e.slug,
@@ -76,7 +84,7 @@ export function eventToJson(e: CalEvent, origin: string, calendars: Map<string,
     allDay: e.allDay,
     timezone: e.timezone || siteTz || 'UTC',
     rrule: e.rrule,
-    repeats: describeRepeat(e.rrule, e.start),
+    repeats: describeRepeat(e.rrule, e.start, opts.locale ? untilDate(opts.locale) : undefined, opts.locale),
     exdates: e.exdates,
     cancelledDates: e.cancelledDates ?? [],
     movedDates: movedDatesToJson(e, opts.includePrivate),

package/src/lib/calendar/cards.ts

@@ -8,7 +8,7 @@ import { eventStrings } from './event-words';
 import { eventImage } from './images';
 import { eventUrl } from './config';
 import { eventIsPublic, featuredOccurrence, formatOccurrence, locationLine, type Occurrence } from './events';
-import { collectViewEvents } from './data';
+import { collectViewEvents, type ViewEvent } from './data';
 import type { ResolvedEventFilter } from './filter';
 
 export interface EventCardAttrs {
@@ -80,11 +80,11 @@ export async function upcomingEvents(
     displayTz: tz, now, windowStartMs: now, windowEndMs: now + (opts.horizonDays ?? 400) * 86_400_000,
   }, { audience: 'public', calendarIds: opts.calendarIds, includeFeeds: false, filter: opts.filter, locale: opts.locale });
   const seen = new Set<string>();
-  const out: (Pick<Occurrence, 'event' | 'start' | 'end' | 'allDay' | 'days' | 'cancelled'> & Pick<Partial<Occurrence>, 'moved'>)[] = [];
+  const out: (Pick<Occurrence, 'event' | 'start' | 'end' | 'allDay' | 'days' | 'cancelled'> & Pick<Partial<Occurrence>, 'moved'> & Pick<ViewEvent, 'rooms'>)[] = [];
   for (const v of events) {
     if (!v.event || v.end <= now || seen.has(v.event.id) || !tagged(v.event.tags)) continue;
     seen.add(v.event.id);
-    out.push({ event: v.event, start: v.start, end: v.end, allDay: v.allDay, days: v.days, cancelled: Boolean(v.cancelled), ...(v.moved ? { moved: v.moved } : {}) });
+    out.push({ event: v.event, start: v.start, end: v.end, allDay: v.allDay, days: v.days, cancelled: Boolean(v.cancelled), ...(v.moved ? { moved: v.moved } : {}), rooms: v.rooms ?? [] });
     if (out.length >= opts.limit) break;
   }
   return out;

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) }],
         });
       }
     }