@acms-subir/core 0.3.48 → 0.3.50

package/src/lib/display/render.ts

@@ -0,0 +1,426 @@
+// The TV display's board as HTML: week, day and rooms (hour grids), month,
+// list and now/next. Everything is rendered on the server; the page's small
+// script (DisplayPage.astro) only moves the now line, dims what has ended,
+// pages the list and swaps in a fresh board every few minutes. Nothing here
+// can be focused or followed: no links, buttons or tabindex.
+//
+// Every length is a multiple of --dsp-u (the viewport height times the text
+// size), so a board lays out the same at 960×540 and at 1920×1080, and the
+// line counts below (month cells, the all-day row) are exact for 16:9.
+// Stable class names (.acms-display, .display-*) are the styling contract;
+// themes set the --display-* variables (display.css).
+import { addDays, layoutDay, layoutWeek, type GridItem, type Iso } from '../calendar/grid';
+import { tzParts } from '../calendar/ics';
+import { SIZE_SCALE, type DisplaySettings, type HourRange } from './settings';
+import { fill, type DisplayStrings } from './words';
+
+export interface DisplayRoom { id: string; slug: string; name: string; color: string }
+
+export interface DisplayItem {
+  key: string;
+  kind: 'event' | 'feed' | 'booking';
+  title: string;
+  /** a second line: the event's own title under "Booked", nothing otherwise */
+  detail: string;
+  start: number;
+  end: number;
+  allDay: boolean;
+  /** local days covered: first and last (inclusive) */
+  startDay: Iso;
+  endDay: Iso;
+  startMin: number;
+  endMin: number;
+  color: string;
+  rooms: DisplayRoom[];
+  hosts: string[];
+  cancelled: boolean;
+  /** a moved date: its old start and end (ms) */
+  moved: { start: number; end: number } | null;
+  calendar: string;
+}
+
+export interface DisplayModel {
+  s: DisplaySettings;
+  now: number;
+  tz: string;
+  /** the Intl locale for dates and times */
+  locale: string;
+  words: DisplayStrings;
+  today: Iso;
+  /** grid columns / list days, in order */
+  days: Iso[];
+  /** month view: whole weeks (columns already filtered to `days`' weekdays) */
+  weeks: Iso[][];
+  month: string;
+  hours: HourRange;
+  items: DisplayItem[];
+  /** view=rooms columns, in order */
+  rooms: DisplayRoom[];
+  legend: { name: string; color: string }[];
+  /** local midnight (ms) of each day in `days` and `weeks` */
+  midnight: (day: Iso) => number;
+  /** an SVG to show with show=qr ('' = none) */
+  qr: string;
+}
+
+const isoDay = (ms: number, tz: string) => { const p = tzParts(ms, tz); return `${p.y}-${String(p.m).padStart(2, '0')}-${String(p.d).padStart(2, '0')}`; };
+const esc = (s: string) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const pct = (n: number) => `${Math.round(n * 1000) / 1000}%`;
+
+// ---- layout metrics (in --dsp-u; display.css uses the same numbers) -------------
+export const METRICS = {
+  // page padding (top + bottom), header, the gap under it, the legend row
+  chrome: 5 + 8 + 2,
+  legend: 5,
+  dow: 3.5, // month weekday row
+  date: 3.4, // month cell's date label
+  line: 3.3, // one line of a month cell or the all-day row
+  cellPad: 0.6,
+  dayHead: 4.5, // hour grids: weekday + date
+  hoursGap: 0.8, // between the top row and the hours
+  // a timed block: padding + border, one title line, the gap, one meta line
+  blockPad: 1,
+  blockTitle: 2.26,
+  blockMeta: 1.9,
+};
+// a block this tall (in --dsp-u) fits the title and the meta line; two title lines and the meta
+const FITS_META = METRICS.blockPad + METRICS.blockTitle + METRICS.blockMeta;
+const FITS_TWO = FITS_META + METRICS.blockTitle;
+const ALLDAY_LINES = { week: 2, day: 3 };
+
+/** usable board height in --dsp-u for this size */
+export function boardHeight(s: DisplaySettings): number {
+  return 100 / SIZE_SCALE[s.size] - METRICS.chrome - (s.show.includes('legend') ? METRICS.legend : 0);
+}
+/** how many event lines fit in a month cell */
+export function monthLines(s: DisplaySettings, weeks: number): number {
+  const cell = (boardHeight(s) - METRICS.dow) / Math.max(1, weeks);
+  return Math.max(1, Math.floor((cell - METRICS.date - METRICS.cellPad) / METRICS.line + 0.001));
+}
+
+// ---- formatting ------------------------------------------------------------
+
+function formatter(locale: string, tz: string, opts: Intl.DateTimeFormatOptions) {
+  try { return new Intl.DateTimeFormat(locale, { ...opts, timeZone: tz }); }
+  catch { return new Intl.DateTimeFormat('en-US', { ...opts, timeZone: 'UTC' }); }
+}
+
+export function timeFormat(locale: string, tz: string) {
+  const f = formatter(locale, tz, { hour: 'numeric', minute: '2-digit' });
+  // "7 PM", "7:30 PM"; 24-hour clocks keep their minutes ("19:00")
+  return (ms: number) => {
+    const parts = f.formatToParts(ms);
+    const hasPeriod = parts.some((p) => p.type === 'dayPeriod');
+    return parts.filter((p, i) => !(hasPeriod && p.type === 'minute' && p.value === '00') && !(hasPeriod && p.type === 'literal' && parts[i + 1]?.type === 'minute' && parts[i + 1].value === '00')).map((p) => p.value).join('');
+  };
+}
+
+// black or white text on a block colour
+export function inkFor(hex: string): string {
+  const m = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
+  if (!m) return '';
+  const lin = (v: string) => { const c = parseInt(v, 16) / 255; return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; };
+  const l = 0.2126 * lin(m[1]) + 0.7152 * lin(m[2]) + 0.0722 * lin(m[3]);
+  return l > 0.36 ? '#111111' : '#ffffff';
+}
+
+const colorStyle = (it: DisplayItem) => (it.color ? `--ev:${it.color};--ev-ink:${inkFor(it.color)};` : '');
+
+function itemAttrs(it: DisplayItem, m: DisplayModel, extra = '') {
+  const cls = ['display-event', `is-${it.kind}`, it.cancelled ? 'is-cancelled' : '', it.moved ? 'is-moved' : '', it.end <= m.now ? 'is-past' : '', extra].filter(Boolean).join(' ');
+  const room = it.rooms[0]?.slug;
+  return `class="${cls}" data-end="${it.end}"${room ? ` data-room="${esc(room)}"` : ''}${it.calendar ? ` data-cal="${esc(it.calendar)}"` : ''}`;
+}
+
+/** time, rooms, hosts and the moved/cancelled notes, as the show= setting asks */
+function metaLine(it: DisplayItem, m: DisplayModel, opts: { time?: boolean } = {}): string {
+  const t = timeFormat(m.locale, m.tz);
+  const show = m.s.show;
+  const bits: string[] = [];
+  if ((opts.time ?? true) && show.includes('time')) {
+    bits.push(it.allDay ? esc(m.words.allDay) : `${esc(t(it.start))} – ${esc(t(it.end))}`);
+  }
+  // the rooms view's columns already name the room
+  if (show.includes('room') && it.rooms.length && m.s.view !== 'rooms') bits.push(esc(it.rooms.map((r) => r.name).join(', ')));
+  if (show.includes('host') && it.hosts.length) bits.push(esc(it.hosts.join(', ')));
+  const notes: string[] = [];
+  if (it.cancelled) notes.push(`<span class="display-flag">${esc(m.words.cancelled)}</span>`);
+  if (it.moved) {
+    // its old time, with the weekday when it moved to another day
+    const sameDay = isoDay(it.moved.start, m.tz) === it.startDay;
+    const day = sameDay ? '' : formatter(m.locale, m.tz, { weekday: 'short' }).format(it.moved.start);
+    const was = [day, it.allDay ? '' : t(it.moved.start)].filter(Boolean).join(' ');
+    notes.push(`<span class="display-flag">${esc(m.words.moved)}</span>${was ? ` <span class="display-was">${esc(fill(m.words.was, { time: was }))}</span>` : ''}`);
+  }
+  return [...notes, ...bits.map((b) => `<span>${b}</span>`)].join('<span class="display-sep"> · </span>');
+}
+
+// ---- hour grids (week, day, rooms) -----------------------------------------
+
+const isTimedOn = (it: DisplayItem, day: Iso) => !it.allDay && it.startDay === day && it.endDay === day;
+const spansDay = (it: DisplayItem, day: Iso) => it.startDay <= day && it.endDay >= day;
+const isTopRow = (it: DisplayItem) => it.allDay || it.endDay > it.startDay;
+
+interface Shown extends GridItem { it: DisplayItem; cut: '' | 'start' | 'end' | 'both' }
+
+// where a timed event sits in the visible hours: cut at the edges, and a
+// short stub at the top or bottom edge when it's entirely outside them
+function inRange(it: DisplayItem, h: HourRange): Shown {
+  const span = h.to - h.from;
+  const stub = Math.max(30, Math.round(span * 0.07));
+  const s = it.startMin, e = Math.max(it.endMin, it.startMin + 15);
+  let ds: number, de: number, cut: Shown['cut'];
+  if (e <= h.from) { ds = h.from; de = h.from + stub; cut = 'start'; }
+  else if (s >= h.to) { ds = h.to - stub; de = h.to; cut = 'end'; }
+  else {
+    ds = Math.max(s, h.from); de = Math.min(e, h.to);
+    cut = s < h.from && e > h.to ? 'both' : s < h.from ? 'start' : e > h.to ? 'end' : '';
+  }
+  return { key: it.key, title: it.title, startDay: it.startDay, endDay: it.endDay, allDay: false, startMin: ds, endMin: de, it, cut };
+}
+
+// `area`: the hours' height in --dsp-u, so a block only gets the lines it can show whole
+function timedBlock(p: { item: Shown; col: number; cols: number }, m: DisplayModel, area: number): string {
+  const { it, cut } = p.item;
+  const span = m.hours.to - m.hours.from;
+  const top = (p.item.startMin - m.hours.from) / span * 100;
+  const height = (p.item.endMin - p.item.startMin) / span * 100;
+  const tall = height / 100 * area;
+  const fit = tall >= FITS_TWO ? '' : tall >= FITS_META ? 'is-mid' : 'is-short';
+  const style = `top:${pct(top)};height:${pct(height)};left:${pct(p.col / p.cols * 100)};width:${pct(100 / p.cols)};${colorStyle(it)}`;
+  const marks = cut ? ` data-cut="${cut}"` : '';
+  const before = cut === 'start' || cut === 'both' ? '<span class="display-cut" aria-hidden="true">▲</span>' : '';
+  const after = cut === 'end' || cut === 'both' ? '<span class="display-cut" aria-hidden="true">▼</span>' : '';
+  const detail = it.detail && !fit ? `<span class="display-event-detail">${esc(it.detail)}</span>` : '';
+  const meta = fit === 'is-short' ? '' : `<span class="display-event-meta">${metaLine(it, m)}</span>`;
+  return `<div ${itemAttrs(it, m, fit ? `display-block ${fit}` : 'display-block')}${marks} style="${style}"><span class="display-event-title">${before}${esc(it.title)}${after}</span>${detail}${meta}</div>`;
+}
+
+function hourAxis(m: DisplayModel): string {
+  // labels name wall-clock hours: read them off a day without DST changes
+  const t = timeFormat(m.locale, 'UTC');
+  const span = m.hours.to - m.hours.from;
+  const first = Math.ceil(m.hours.from / 60) * 60;
+  const out: string[] = [];
+  // a label every hour, every two when the range is long
+  const step = span > 16 * 60 ? 120 : 60;
+  for (let min = first; min < m.hours.to; min += step) {
+    const at = Date.UTC(2000, 0, 3) + min * 60_000;
+    out.push(`<span class="display-hour" style="top:${pct((min - m.hours.from) / span * 100)}">${esc(t(at))}</span>`);
+  }
+  return `<div class="display-axis" aria-hidden="true">${out.join('')}</div>`;
+}
+
+function hourLines(m: DisplayModel): string {
+  const span = m.hours.to - m.hours.from;
+  const out: string[] = [];
+  for (let min = Math.ceil(m.hours.from / 60) * 60; min < m.hours.to; min += 60) {
+    if (min === m.hours.from) continue;
+    out.push(`<span class="display-line" style="top:${pct((min - m.hours.from) / span * 100)}"></span>`);
+  }
+  return `<div class="display-lines" aria-hidden="true">${out.join('')}</div>`;
+}
+
+const nowLine = (day: Iso) => `<div class="display-now" data-now-day="${day}" hidden></div>`;
+
+// the top row: all-day and multi-day events, as bars across consecutive
+// columns (layoutWeek), a "+N more" when a day has more than fits
+function topRow(cols: Iso[], items: DisplayItem[], m: DisplayModel, maxLines: number): { html: string; lines: number } {
+  const top = items.filter(isTopRow);
+  if (!top.some((it) => cols.some((d) => spansDay(it, d)))) return { html: '', lines: 0 };
+  const t = timeFormat(m.locale, m.tz);
+  const runs: { from: number; days: Iso[] }[] = [];
+  cols.forEach((d, i) => {
+    const last = runs[runs.length - 1];
+    if (last && addDays(last.days[last.days.length - 1], 1) === d) last.days.push(d);
+    else runs.push({ from: i, days: [d] });
+  });
+  const grid = top.map((it): GridItem & { it: DisplayItem } => ({ key: it.key, title: it.title, startDay: it.startDay, endDay: it.endDay, allDay: true, startMin: 0, endMin: 1440, it }));
+  const cells: string[] = [];
+  let used = 1;
+  for (const run of runs) {
+    const lay = layoutWeek(run.days, grid, maxLines);
+    for (const b of lay.bars) {
+      used = Math.max(used, b.lane + 1);
+      const it = b.item.it;
+      const label = it.allDay ? '' : `<span class="display-bar-time">${esc(t(it.start))}</span> `;
+      cells.push(`<div ${itemAttrs(it, m, 'display-bar')} style="grid-column:${run.from + b.col + 1} / span ${b.span};grid-row:${b.lane + 1};${colorStyle(it)}">`
+        + `<span class="display-event-title">${label}${esc(it.title)}</span></div>`);
+    }
+    lay.hidden.forEach((n, c) => {
+      if (!n) return;
+      used = maxLines;
+      cells.push(`<div class="display-more" style="grid-column:${run.from + c + 1};grid-row:${maxLines}">${esc(fill(m.words.more, { n }))}</div>`);
+    });
+  }
+  return { html: `<div class="display-top" style="--lines:${used}">${cells.join('')}</div>`, lines: used };
+}
+
+// the hours' height in --dsp-u under a top row of `lines`
+const hoursArea = (m: DisplayModel, lines: number) =>
+  boardHeight(m.s) - METRICS.dayHead - (lines ? lines * METRICS.line + 0.6 : 0) - METRICS.hoursGap;
+
+function dayHead(day: Iso, m: DisplayModel, label?: string): string {
+  const at = m.midnight(day) + 12 * 3_600_000;
+  const wd = formatter(m.locale, m.tz, { weekday: 'short' }).format(at);
+  const n = tzParts(at, m.tz).d;
+  const cls = ['display-dayhead', day === m.today ? 'is-today' : '', day < m.today ? 'is-past' : ''].filter(Boolean).join(' ');
+  return `<div class="${cls}">${label ? `<span class="display-dayname">${esc(label)}</span>` : `<span class="display-dayname">${esc(wd)}</span> <span class="display-daynum">${n}</span>`}</div>`;
+}
+
+function weekGrid(m: DisplayModel): string {
+  const cols = m.days;
+  const head = cols.map((d) => dayHead(d, m)).join('');
+  const top = topRow(cols, m.items, m, m.s.view === 'day' ? ALLDAY_LINES.day : ALLDAY_LINES.week);
+  const area = hoursArea(m, top.lines);
+  const columns = cols.map((d) => {
+    const placed = layoutDay(d, m.items.filter((it) => isTimedOn(it, d)).map((it) => inRange(it, m.hours)));
+    const cls = ['display-col', d === m.today ? 'is-today' : '', d < m.today ? 'is-past' : ''].filter(Boolean).join(' ');
+    return `<div class="${cls}" data-day="${d}">${placed.map((p) => timedBlock(p, m, area)).join('')}${nowLine(d)}</div>`;
+  }).join('');
+  return `<div class="display-grid" style="--cols:${cols.length}" data-from="${m.hours.from}" data-to="${m.hours.to}">`
+    + `<div class="display-heads">${head}</div>${top.html}`
+    + `<div class="display-hours">${hourAxis(m)}<div class="display-cols">${hourLines(m)}${columns}</div></div></div>`;
+}
+
+function roomsGrid(m: DisplayModel): string {
+  const d = m.today;
+  if (!m.rooms.length) return empty(m);
+  const head = m.rooms.map((r) => `<div class="display-dayhead display-roomhead"${r.color ? ` style="--ev:${r.color};--ev-ink:${inkFor(r.color)}"` : ''} data-room="${esc(r.slug)}"><span class="display-dayname">${esc(r.name)}</span></div>`).join('');
+  const inRoom = (r: DisplayRoom) => m.items.filter((it) => it.rooms.some((x) => x.id === r.id));
+  const lines = Math.max(0, ...m.rooms.map((r) => Math.min(ALLDAY_LINES.day, inRoom(r).filter((it) => isTopRow(it) && spansDay(it, d)).length)));
+  const area = hoursArea(m, lines);
+  const columns = m.rooms.map((r) => {
+    const placed = layoutDay(d, inRoom(r).filter((it) => isTimedOn(it, d)).map((it) => inRange(it, m.hours)));
+    return `<div class="display-col is-today" data-day="${d}" data-room="${esc(r.slug)}">${placed.map((p) => timedBlock(p, m, area)).join('')}</div>`;
+  }).join('');
+  // the top row: each room's all-day events in its own column
+  const tops = m.rooms.map((r, i) => inRoom(r).filter((it) => isTopRow(it) && spansDay(it, d)).slice(0, ALLDAY_LINES.day).map((it, line) =>
+    `<div ${itemAttrs(it, m, 'display-bar')} style="grid-column:${i + 1};grid-row:${line + 1};${colorStyle(it)}"><span class="display-event-title">${esc(it.title)}</span></div>`).join(''));
+  return `<div class="display-grid is-rooms" style="--cols:${m.rooms.length}" data-from="${m.hours.from}" data-to="${m.hours.to}">`
+    + `<div class="display-heads">${head}</div>${lines ? `<div class="display-top" style="--lines:${lines}">${tops.join('')}</div>` : ''}`
+    + `<div class="display-hours">${hourAxis(m)}<div class="display-cols">${hourLines(m)}${columns}${nowLine(d)}</div></div></div>`;
+}
+
+// ---- month -------------------------------------------------------------------
+
+function monthGrid(m: DisplayModel): string {
+  const lines = monthLines(m.s, m.weeks.length);
+  const t = timeFormat(m.locale, m.tz);
+  const cols = m.weeks[0]?.length ?? 7;
+  const dows = (m.weeks[0] ?? []).map((d) => `<div class="display-dow">${esc(formatter(m.locale, m.tz, { weekday: 'short' }).format(m.midnight(d) + 12 * 3_600_000))}</div>`).join('');
+  const grid = m.items.map((it): GridItem & { it: DisplayItem } => ({ key: it.key, title: it.title, startDay: it.startDay, endDay: it.endDay, allDay: it.allDay, startMin: it.startMin, endMin: it.endMin, it }));
+  const rows = m.weeks.map((week) => {
+    const cells: string[] = [];
+    week.forEach((d, c) => {
+      const cls = ['display-cell', d === m.today ? 'is-today' : '', d < m.today ? 'is-past' : '', d.slice(0, 7) !== m.month ? 'is-other' : ''].filter(Boolean).join(' ');
+      cells.push(`<div class="${cls}" style="grid-column:${c + 1}"><span class="display-date">${+d.slice(8, 10)}</span></div>`);
+    });
+    // columns can skip weekdays (days=mon-fri): lay out each run of consecutive days
+    const runs: { from: number; days: Iso[] }[] = [];
+    week.forEach((d, i) => {
+      const last = runs[runs.length - 1];
+      if (last && addDays(last.days[last.days.length - 1], 1) === d) last.days.push(d);
+      else runs.push({ from: i, days: [d] });
+    });
+    for (const run of runs) {
+      const lay = layoutWeek(run.days, grid, lines);
+      for (const b of lay.bars) {
+        const it = b.item.it;
+        cells.push(`<div ${itemAttrs(it, m, 'display-bar')} style="grid-column:${run.from + b.col + 1} / span ${b.span};grid-row:${b.lane + 2};${colorStyle(it)}">`
+          + `<span class="display-event-title">${it.allDay ? '' : `<span class="display-bar-time">${esc(t(it.start))}</span> `}${esc(it.title)}</span></div>`);
+      }
+      lay.chips.forEach((chips, c) => {
+        for (const { item, line } of chips) {
+          const it = item.it;
+          cells.push(`<div ${itemAttrs(it, m, 'display-chip')} style="grid-column:${run.from + c + 1};grid-row:${line + 2};${colorStyle(it)}">`
+            + `<span class="display-event-title">${m.s.show.includes('time') ? `<span class="display-chip-time">${esc(t(it.start))}</span> ` : ''}${esc(it.title)}</span></div>`);
+        }
+      });
+      lay.hidden.forEach((n, c) => {
+        if (n) cells.push(`<div class="display-more" style="grid-column:${run.from + c + 1};grid-row:${lines + 1}">${esc(fill(m.words.more, { n }))}</div>`);
+      });
+    }
+    return `<div class="display-weekrow">${cells.join('')}</div>`;
+  }).join('');
+  return `<div class="display-month" style="--cols:${cols};--rows:${m.weeks.length};--lines:${lines}"><div class="display-dows">${dows}</div>${rows}</div>`;
+}
+
+// ---- list ------------------------------------------------------------------
+
+function listView(m: DisplayModel): string {
+  const t = timeFormat(m.locale, m.tz);
+  const dayFmt = formatter(m.locale, m.tz, { weekday: 'long', month: 'long', day: 'numeric' });
+  const groups = m.days.map((d) => {
+    const items = m.items.filter((it) => spansDay(it, d) && it.end > m.now)
+      .sort((a, b) => Number(b.allDay) - Number(a.allDay) || a.start - b.start || a.title.localeCompare(b.title));
+    if (!items.length) return '';
+    const label = d === m.today ? `${m.words.today} · ${dayFmt.format(m.midnight(d) + 12 * 3_600_000)}` : dayFmt.format(m.midnight(d) + 12 * 3_600_000);
+    const rows = items.map((it) => {
+      const when = it.allDay || it.startDay < d ? m.words.allDay : t(it.start);
+      const meta = metaLine(it, m, { time: false });
+      return `<div ${itemAttrs(it, m, 'display-row')}><span class="display-dot" style="${colorStyle(it)}"></span><span class="display-row-time">${esc(when)}</span>`
+        + `<span class="display-row-body"><span class="display-event-title">${esc(it.title)}</span>${it.detail ? `<span class="display-event-detail">${esc(it.detail)}</span>` : ''}${meta ? `<span class="display-event-meta">${meta}</span>` : ''}</span></div>`;
+    }).join('');
+    return `<section class="display-day${d === m.today ? ' is-today' : ''}"><h2 class="display-day-title">${esc(label)}</h2>${rows}</section>`;
+  }).filter(Boolean);
+  if (!groups.length) return empty(m);
+  return `<div class="display-list" data-pages><div class="display-list-cols">${groups.join('')}</div></div><div class="display-page" data-page hidden></div>`;
+}
+
+// ---- now and next ------------------------------------------------------------
+
+function nextView(m: DisplayModel): string {
+  const t = timeFormat(m.locale, m.tz);
+  const timed = m.items.filter((it) => !it.cancelled).sort((a, b) => a.start - b.start);
+  const now = timed.filter((it) => it.start <= m.now && it.end > m.now);
+  const later = timed.filter((it) => it.start > m.now);
+  const today = later.filter((it) => it.startDay === m.today);
+  const card = (it: DisplayItem, big: boolean) => `<div ${itemAttrs(it, m, big ? 'display-card is-big' : 'display-card')} style="${colorStyle(it)}">`
+    + `<span class="display-event-title">${esc(it.title)}</span>${it.detail ? `<span class="display-event-detail">${esc(it.detail)}</span>` : ''}`
+    + `<span class="display-event-meta">${metaLine(it, m)}</span></div>`;
+  const nextUp = today[0] ?? later[0];
+  const nextLabel = nextUp && nextUp.startDay !== m.today ? `${m.words.tomorrow} · ${t(nextUp.start)}` : m.words.next;
+  return `<div class="display-next">`
+    + `<section class="display-slot is-now"><h2 class="display-slot-title">${esc(m.words.now)}</h2>${now.length ? now.slice(0, 2).map((it) => card(it, true)).join('') : `<p class="display-empty">${esc(m.words.nothingNow)}</p>`}</section>`
+    + `<section class="display-slot is-next"><h2 class="display-slot-title">${esc(nextLabel)}</h2>${nextUp ? card(nextUp, false) : `<p class="display-empty">${esc(m.words.nothingNext)}</p>`}`
+    + `${today.slice(1, 4).map((it) => card(it, false)).join('')}</section></div>`;
+}
+
+const empty = (m: DisplayModel) => `<p class="display-empty is-board">${esc(m.words.noEvents)}</p>`;
+
+// ---- the page -------------------------------------------------------------
+
+function heading(m: DisplayModel): { title: string; sub: string } {
+  const day = (d: Iso, o: Intl.DateTimeFormatOptions) => formatter(m.locale, m.tz, o).format(m.midnight(d) + 12 * 3_600_000);
+  const range = () => {
+    const a = m.days[0], b = m.days[m.days.length - 1];
+    if (!a) return '';
+    if (a === b) return day(a, { weekday: 'long', month: 'long', day: 'numeric' });
+    try {
+      return formatter(m.locale, m.tz, { month: 'short', day: 'numeric' }).formatRange(m.midnight(a) + 43_200_000, m.midnight(b) + 43_200_000);
+    } catch { return `${day(a, { month: 'short', day: 'numeric' })} – ${day(b, { month: 'short', day: 'numeric' })}`; }
+  };
+  const v = m.s.view;
+  let title: string, sub: string;
+  if (v === 'month') { title = formatter(m.locale, 'UTC', { month: 'long', year: 'numeric' }).format(Date.UTC(+m.month.slice(0, 4), +m.month.slice(5, 7) - 1, 15)); sub = ''; }
+  else if (v === 'week') { title = m.s.start === 'today' ? fill(m.words.nextDays, { n: m.days.length }) : m.words.thisWeek; sub = range(); }
+  else if (v === 'list') { title = m.words.upcoming; sub = range(); }
+  else { title = m.words.today; sub = day(m.today, { weekday: 'long', month: 'long', day: 'numeric' }); }
+  // a custom title takes the heading's place
+  return { title: m.s.title || title, sub };
+}
+
+export function renderBoard(m: DisplayModel): string {
+  const v = m.s.view;
+  const body = v === 'week' || v === 'day' ? weekGrid(m) : v === 'rooms' ? roomsGrid(m) : v === 'month' ? monthGrid(m) : v === 'list' ? listView(m) : nextView(m);
+  const { title, sub } = heading(m);
+  const clock = formatter(m.locale, m.tz, { hour: 'numeric', minute: '2-digit' });
+  const legend = m.s.show.includes('legend') && m.legend.length
+    ? `<footer class="display-legend">${m.legend.map((l) => `<span class="display-key"><span class="display-dot" style="--ev:${l.color}"></span>${esc(l.name)}</span>`).join('')}</footer>` : '';
+  const qr = m.s.show.includes('qr') && m.qr ? `<div class="display-qr"><span class="display-qr-note">${esc(m.words.scan)}</span>${m.qr}</div>` : '';
+  return `<header class="display-head"><div class="display-heading"><h1 class="display-title">${esc(title)}</h1>${sub ? `<p class="display-sub">${esc(sub)}</p>` : ''}</div>`
+    + `<p class="display-status" data-status hidden></p>${qr}`
+    + (m.s.show.includes('clock') ? `<p class="display-clock" data-clock>${esc(clock.format(m.now))}</p>` : '')
+    + `</header><main class="display-board" data-view="${v}">${body}</main>${legend}`;
+}

package/src/lib/display/settings.ts

@@ -0,0 +1,160 @@
+// What a TV display shows, read from its link (/display/calendar?view=week&
+// hours=8-22…) or from a saved screen's stored parameters (Admin → Calendar →
+// Screens keeps the same query string). One parser and one writer, so a quick
+// link and a saved screen with the same settings render the same board, and
+// the admin editor builds links the page reads back unchanged. Pure: no repo,
+// no Intl time zones; the admin editor imports it in the browser.
+import { readEventFilter, type EventFilter } from '../calendar/filter';
+
+export const DISPLAY_VIEWS = ['week', 'day', 'month', 'list', 'rooms', 'next'] as const;
+export type DisplayView = (typeof DISPLAY_VIEWS)[number];
+export const DISPLAY_SHOW = ['time', 'room', 'host', 'clock', 'legend', 'qr'] as const;
+export type DisplayShow = (typeof DISPLAY_SHOW)[number];
+export const DISPLAY_SIZES = ['s', 'm', 'l', 'xl'] as const;
+export type DisplaySize = (typeof DISPLAY_SIZES)[number];
+// text scale per size; every length on the page is a multiple of it
+export const SIZE_SCALE: Record<DisplaySize, number> = { s: 0.85, m: 1, l: 1.2, xl: 1.45 };
+
+/** minutes after midnight; `to` may be 1440 (midnight at the end of the day) */
+export interface HourRange { from: number; to: number }
+
+export interface DisplaySettings {
+  view: DisplayView;
+  hours: HourRange | 'auto';
+  /** a count of days from the first day, or a set of weekdays (0 = Sunday) */
+  days: { count: number } | { weekdays: number[] };
+  /** first day of the week; '' = the site's setting (Calendar settings → Defaults) */
+  start: 'sun' | 'mon' | 'today' | '';
+  /** which events: cal, tag, notag, room (lib/calendar/filter.ts, shared with /calendar and the API) */
+  filter: EventFilter;
+  theme: 'dark' | 'light';
+  size: DisplaySize;
+  show: DisplayShow[];
+  /** replaces the board's own heading ("This week"); '' = the default */
+  title: string;
+}
+
+export const DEFAULT_HOURS: HourRange = { from: 8 * 60, to: 22 * 60 };
+export const DEFAULT_SHOW: DisplayShow[] = ['time', 'room', 'clock'];
+export const MIN_AUTO_HOURS = 6;
+const MAX_TITLE = 80;
+
+export const defaultDisplaySettings = (): DisplaySettings => ({
+  view: 'week', hours: { ...DEFAULT_HOURS }, days: { count: 7 }, start: '',
+  filter: { cal: [], tag: [], notag: [], room: [] },
+  theme: 'dark', size: 'm', show: [...DEFAULT_SHOW], title: '',
+});
+
+const WEEKDAY_NAMES = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
+const weekday = (s: string) => {
+  const w = s.trim().toLowerCase().slice(0, 3);
+  // two-letter forms too ("mo", "tu") — what RRULE BYDAY uses
+  const i = WEEKDAY_NAMES.findIndex((n) => n === w || (w.length === 2 && n.startsWith(w)));
+  return i;
+};
+
+/** "8-22", "8:30-21", "8-24", "0-24" or "all" (every hour), "auto"; null when unreadable */
+export function parseHours(raw: string): HourRange | 'auto' | null {
+  const v = raw.trim().toLowerCase();
+  if (v === 'auto') return 'auto';
+  if (v === 'all') return { from: 0, to: 1440 };
+  const m = /^(\d{1,2})(?::([0-5]\d))?-(\d{1,2})(?::([0-5]\d))?$/.exec(v);
+  if (!m) return null;
+  const from = +m[1] * 60 + (m[2] ? +m[2] : 0);
+  const to = +m[3] * 60 + (m[4] ? +m[4] : 0);
+  if (from > 23 * 60 + 59 || to > 1440 || to - from < 60) return null;
+  return { from, to };
+}
+
+const clock = (min: number) => {
+  const h = Math.floor(min / 60), m = min % 60;
+  return m ? `${h}:${String(m).padStart(2, '0')}` : String(h);
+};
+export const formatHours = (h: HourRange | 'auto') => (h === 'auto' ? 'auto' : `${clock(h.from)}-${clock(h.to)}`);
+
+/** "7", "5", "mon-sat", "sun,wed,fri"; null when unreadable */
+export function parseDays(raw: string): DisplaySettings['days'] | null {
+  const v = raw.trim().toLowerCase();
+  if (/^\d{1,2}$/.test(v)) {
+    const n = +v;
+    return n >= 1 && n <= 31 ? { count: n } : null;
+  }
+  const set = new Set<number>();
+  for (const part of v.split(',')) {
+    const range = part.split('-');
+    if (range.length === 2) {
+      const a = weekday(range[0]), b = weekday(range[1]);
+      if (a < 0 || b < 0) return null;
+      // wraps past Saturday: "fri-mon" is Fri, Sat, Sun, Mon
+      for (let d = a; ; d = (d + 1) % 7) { set.add(d); if (d === b) break; }
+    } else {
+      const d = weekday(part);
+      if (d < 0) return null;
+      set.add(d);
+    }
+  }
+  return set.size ? (set.size === 7 ? { count: 7 } : { weekdays: [...set].sort((a, b) => a - b) }) : null;
+}
+
+export function formatDays(d: DisplaySettings['days']): string {
+  if ('count' in d) return String(d.count);
+  // runs of consecutive weekdays read as ranges ("mon-fri"), the rest as a list
+  const out: string[] = [];
+  for (let i = 0; i < d.weekdays.length; ) {
+    let j = i;
+    while (j + 1 < d.weekdays.length && d.weekdays[j + 1] === d.weekdays[j] + 1) j++;
+    out.push(j - i >= 2 ? `${WEEKDAY_NAMES[d.weekdays[i]]}-${WEEKDAY_NAMES[d.weekdays[j]]}` : d.weekdays.slice(i, j + 1).map((n) => WEEKDAY_NAMES[n]).join(','));
+    i = j + 1;
+  }
+  return out.join(',');
+}
+
+/**
+ * The settings in a display link. Anything missing or unreadable takes its
+ * default, so an old or hand-typed link still shows something sensible.
+ */
+export function readDisplaySettings(params: URLSearchParams): DisplaySettings {
+  const s = defaultDisplaySettings();
+  const one = (name: string) => (params.get(name) ?? '').trim().toLowerCase();
+  const view = one('view');
+  if ((DISPLAY_VIEWS as readonly string[]).includes(view)) s.view = view as DisplayView;
+  const hours = params.has('hours') ? parseHours(one('hours')) : null;
+  if (hours) s.hours = hours;
+  const days = params.has('days') ? parseDays(one('days')) : null;
+  if (days) s.days = days;
+  const start = one('start');
+  if (start === 'sun' || start === 'mon' || start === 'today') s.start = start;
+  s.filter = readEventFilter(params);
+  if (one('theme') === 'light') s.theme = 'light';
+  const size = one('size');
+  if ((DISPLAY_SIZES as readonly string[]).includes(size)) s.size = size as DisplaySize;
+  if (params.has('show')) {
+    const wanted = new Set(params.getAll('show').flatMap((v) => v.split(',')).map((v) => v.trim().toLowerCase()));
+    s.show = DISPLAY_SHOW.filter((k) => wanted.has(k));
+  }
+  s.title = (params.get('title') ?? '').replace(/\s+/g, ' ').trim().slice(0, MAX_TITLE);
+  return s;
+}
+
+// readable links: commas, colons and spaces stay as typed (all legal in a query value)
+const enc = (v: string) => encodeURIComponent(v).replace(/%2C/gi, ',').replace(/%3A/gi, ':').replace(/%20/g, '+');
+
+/** The canonical query for these settings, without the "?": defaults left out, a fixed order. */
+export function displayQuery(s: DisplaySettings): string {
+  const d = defaultDisplaySettings();
+  const q: [string, string][] = [];
+  if (s.view !== d.view) q.push(['view', s.view]);
+  if (formatHours(s.hours) !== formatHours(d.hours)) q.push(['hours', formatHours(s.hours)]);
+  if (formatDays(s.days) !== formatDays(d.days)) q.push(['days', formatDays(s.days)]);
+  if (s.start) q.push(['start', s.start]);
+  for (const k of ['cal', 'tag', 'notag', 'room'] as const) if (s.filter[k].length) q.push([k, s.filter[k].join(',')]);
+  if (s.theme !== d.theme) q.push(['theme', s.theme]);
+  if (s.size !== d.size) q.push(['size', s.size]);
+  const show = DISPLAY_SHOW.filter((k) => s.show.includes(k));
+  if (show.join(',') !== d.show.join(',')) q.push(['show', show.join(',') || 'none']);
+  if (s.title) q.push(['title', s.title]);
+  return q.map(([k, v]) => `${k}=${enc(v)}`).join('&');
+}
+
+/** The same settings, written the canonical way (what a saved screen stores). */
+export const canonicalDisplayQuery = (raw: string) => displayQuery(readDisplaySettings(new URLSearchParams(raw)));

package/src/lib/display/words.ts

@@ -0,0 +1,52 @@
+// Words of the TV display (/display/…). Dates, weekdays and times come from
+// Intl in the display's language; these are the rest. Plain strings with
+// {slots} filled by `fill`. Other languages fall back to English.
+export interface DisplayStrings {
+  thisWeek: string;
+  /** a rolling week (start=today) or list: "Next 7 days" */
+  nextDays: string;
+  today: string;
+  upcoming: string;
+  allDay: string;
+  /** shown while offline: when the events were last fetched */
+  updated: string;
+  now: string;
+  next: string;
+  nothingNow: string;
+  nothingNext: string;
+  noEvents: string;
+  more: string;
+  moved: string;
+  /** a moved date's old time */
+  was: string;
+  /** appointments from Google booking pages (#google-booking) */
+  booked: string;
+  cancelled: string;
+  scan: string;
+  tomorrow: string;
+  notFound: string;
+  notFoundNote: string;
+}
+
+const STRINGS: Record<string, DisplayStrings> = {
+  en: {
+    thisWeek: 'This week', nextDays: 'Next {n} days', today: 'Today', upcoming: 'Coming up', allDay: 'All day',
+    updated: 'Updated {time}', now: 'Now', next: 'Next', nothingNow: 'Nothing right now', nothingNext: 'Nothing else today',
+    noEvents: 'No events', more: '+{n} more', moved: 'Moved', was: 'was {time}', booked: 'Booked', cancelled: 'Cancelled',
+    scan: 'Scan for the calendar', tomorrow: 'Tomorrow',
+    notFound: 'This screen isn’t available', notFoundNote: 'Its link may have changed. Copy the new one from Admin → Calendar → Screens.',
+  },
+  es: {
+    thisWeek: 'Esta semana', nextDays: 'Próximos {n} días', today: 'Hoy', upcoming: 'Próximamente', allDay: 'Todo el día',
+    updated: 'Actualizado {time}', now: 'Ahora', next: 'Después', nothingNow: 'Nada en este momento', nothingNext: 'Nada más hoy',
+    noEvents: 'Sin eventos', more: '+{n} más', moved: 'Cambiado', was: 'antes {time}', booked: 'Reservado', cancelled: 'Cancelado',
+    scan: 'Escanea para ver el calendario', tomorrow: 'Mañana',
+    notFound: 'Esta pantalla no está disponible', notFoundNote: 'Puede que su enlace haya cambiado. Copia el nuevo en Admin → Calendario → Pantallas.',
+  },
+};
+
+export const displayStrings = (lang: string | null | undefined): DisplayStrings =>
+  STRINGS[(lang || 'en').toLowerCase().split('-')[0]] ?? STRINGS.en;
+
+export const fill = (s: string, slots: Record<string, string | number>) =>
+  s.replace(/\{(\w+)\}/g, (m, k: string) => (k in slots ? String(slots[k]) : m));