@acms-subir/core 0.3.51 → 0.3.52

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @acms-subir/core
 
+## 0.3.52
+
+### Patch Changes
+
+- b8ffed8: Saved TV screens: **Admin → Calendar → Screens** (for people who manage rooms and calendars).
+
+  Each screen has a name, the display settings (view, hours with "Show all hours" or "Fit the events", days, first day, calendars, rooms in column order, tags, theme, text size, what shows, title, language) beside a live 16:9 preview, and a long random key that is its whole address: `/display/s/<key>`. **Copy link** copies it, and **Rotate link** makes a new one; the old link stops working at once. **Last check-in** shows when the screen last fetched its events (a TV that's on checks in every 5 minutes), so staff can tell a TV is off. A change made in the admin reaches the TV within 5 minutes. The same editor builds quick links, can start from a pasted one, and saves any quick link as a screen.
+
+  **Show private calendars and room bookings** (off by default) lets a screen show the private calendars it names and the confirmed bookings of the rooms it names (or of rooms set to show on the calendar): titles, rooms, hosts and the name on each booking ("Birthday party · Rivera"), never emails, phone numbers, booking notes or RSVP lists. A Google booking keeps "Booked" with its own title under it. Turning it on, or previewing it, also needs **Manage bookings**. Saved screens are never cached (`private, no-store`) and send no referrer. Wrong keys are rate-limited: after 60 in 15 minutes from one address, further wrong keys from it get a 429, while a screen's own key always opens it (bad keys can't lock a church's TVs out).
+
+  Migration 67 adds the `display_screens` table. Screens go into backups without their keys; after a restore each screen has a new link to put on its TV. New: `/display/s/[key]`, `/admin/calendar/screens`, `/admin/calendar/screens/preview` and `/api/calendar/screens` (staff only). `npx acms docs calendar` covers screens, keys and private details.
+
+  The display list now keeps each day in one column when it fits, so a column never starts without its day.
+
+  Moved and cancelled dates on the display use the event pages' own words ("Cambio de horario" in Spanish), so a TV says what the site and its emails say.
+
 ## 0.3.51
 
 ### Patch Changes

package/cli/migrations.generated.mjs

@@ -434,6 +434,19 @@ var ANNOUNCEMENT_VISIBLE_COLUMNS = [
   "published_at"
 ];
 
+// src/lib/display/store.ts
+var SCREENS_MIGRATION = {
+  version: 67,
+  statements: [
+    `CREATE TABLE display_screens (
+      id TEXT PRIMARY KEY, name TEXT NOT NULL DEFAULT '', params TEXT NOT NULL DEFAULT '', locale TEXT NOT NULL DEFAULT '',
+      private_details INTEGER NOT NULL DEFAULT 0, screen_key TEXT NOT NULL DEFAULT '', last_seen_at INTEGER,
+      ord INTEGER NOT NULL DEFAULT 0, created_at INTEGER NOT NULL, updated_at INTEGER NOT NULL
+    )`,
+    `CREATE UNIQUE INDEX display_screens_key ON display_screens (screen_key) WHERE screen_key <> ''`
+  ]
+};
+
 // src/lib/repo/migrations.ts
 var CONTENT_VERSION_COLUMNS = {
   settings: [
@@ -1266,7 +1279,9 @@ var MIGRATIONS = [
   EVENT_CHANGES_MIGRATION,
   // single dates of a series moved (CalEvent.movedDates): a column on the
   // row, so the triggers on events (content version, event_changes) see a move
-  MOVED_DATES_MIGRATION(contentVersionTriggers("events", [...CONTENT_VERSION_COLUMNS.events, "cancelled_dates", "moved_dates"])[2])
+  MOVED_DATES_MIGRATION(contentVersionTriggers("events", [...CONTENT_VERSION_COLUMNS.events, "cancelled_dates", "moved_dates"])[2]),
+  // saved TV screens (Admin → Calendar → Screens, lib/display/store.ts)
+  SCREENS_MIGRATION
 ];
 var CURRENT_CONTENT_VERSION_COLUMNS = {
   ...CONTENT_VERSION_COLUMNS,

package/docs/calendar.md

@@ -195,9 +195,12 @@ client has `roomFree({ room, start, end })`, and the native package has
 
 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.
+There are two kinds of link:
 
-Spanish (or any other site language): `/es/display/calendar?…`.
+- **Quick links** spell out their settings in the address: `/display/calendar?view=week&hours=8-22`. Nothing is saved. Whatever their parameters, they show only what `calendar.ics` shows: published events in public calendars, or in an unlisted calendar named in `cal=`. There are no subscribed calendars, booking blocks, room names (until rooms are shown on public events) or hosts.
+- **Saved screens** live in **Admin → Calendar → Screens**. Each has a name, the same settings and a long random key, which is the whole address: `/display/s/<key>`. A screen can show private details (below).
+
+Spanish (or any other site language): `/es/display/calendar?…`, or the screen's Language setting.
 
 ### Parameters
 
@@ -209,12 +212,12 @@ Each has a default; leave out what you don't need. Lists are comma-separated or
 | `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. |
+| `cal` | calendar slugs | Only these calendars. Default: every public calendar. Private calendars need a saved screen with private details. |
+| `tag` / `notag` | tag names | Only events with one of these tags, or none of them. `tag=Class` makes a class board. Internal `#` tags only match on a screen with private details. |
+| `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"). On a quick link, only rooms named 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. |
+| `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 public filters). Hosts only show on a screen with private details. |
 | `title` | text | Replaces the heading ("This week", "Today"…). |
 
 Examples:
@@ -223,19 +226,30 @@ Examples:
 - `/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.
 
+The editor in Admin → Calendar → Screens builds these links (**Quick link**), shows a live preview and can save any quick link as a screen.
+
 ### 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.
+- 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 or a server error shows the last events instead of an error page (a copy older than a week is never shown).
 - 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.
+- The page may be framed anywhere (`frame-ancestors *`), sends no referrer, is never indexed, and needs no cookie. Quick links may sit in a shared cache for a minute; saved screens never do.
+
+### Saved screens, keys and private details
+
+**Show private calendars and room bookings** (each screen's switch, off by default) lets the screen show the private calendars it names in `cal=` and the confirmed bookings of the rooms it names in `room=` (or of rooms set to show on the calendar). It shows their titles, times, rooms, hosts and the name on each booking ("Birthday party · Rivera"). It never shows emails, phone numbers, booking notes or RSVP lists. Turning it on (or previewing it) needs both **Manage rooms and calendars** and **Manage bookings**. Anyone with the screen's link can see what it shows, so keep the link in the TV's playlist and nowhere public. A booking isn't in any calendar, so a `cal=` filter leaves bookings out.
+
+- **Copy link** copies the screen's address. **Rotate link** makes a new key; the old address stops working at once (the TV shows "This screen isn't available" until it gets the new link).
+- **Last check-in** is when the screen last fetched its events. A TV that is on checks in every 5 minutes, so an old check-in means it's off or offline.
+- Wrong keys are rate-limited per network address: after 60 wrong keys in 15 minutes, further wrong keys from that address get "Too many" until the window ends. A screen's own key always opens it.
+- Screens go into backups without their keys. After a restore, each screen has a new link: copy it into each TV again.
 
 ### 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.
+1. In AbleSign, open **Websites → Add website** and paste the screen's link (or a quick 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.
@@ -253,4 +267,4 @@ A theme's `theme.css` loads after the board's own styles. The simplest way to re
 .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.
+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` (or `display/s/[key].astro`) replaces that page.

package/integration.mjs

@@ -863,6 +863,11 @@ export default function acms(options = {}) {
       // TV displays: quick links (everything in the address) and their offline worker
       ['/display/calendar', 'display/calendar.astro'],
       ['/display/sw.js', 'display/sw.js.ts'],
+      // saved screens: a long random key is the whole address (Admin → Calendar → Screens)
+      ['/display/s/[key]', 'display/s/[key].astro'],
+      ['/admin/calendar/screens', 'admin/calendar/screens/index.astro'],
+      ['/admin/calendar/screens/preview', 'admin/calendar/screens/preview.astro'],
+      ['/api/calendar/screens', 'api/calendar/screens.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.51",
+  "version": "0.3.52",
   "publishConfig": {
     "access": "public"
   },

package/src/components/display/ScreensManager.tsx

@@ -0,0 +1,481 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  DEFAULT_HOURS, DISPLAY_VIEWS, defaultDisplaySettings, displayQuery, readDisplaySettings,
+  type DisplaySettings, type DisplayShow, type DisplayView,
+} from '../../lib/display/settings';
+import '../../styles/screens-admin.css';
+
+// Admin → Calendar → Screens. Saved screens on the left; the editor puts the
+// settings beside a live 16:9 preview (the board the TV will show, from
+// settings not saved yet). The same editor builds quick links, and any quick
+// link can be saved as a screen. Data: /api/calendar/screens.
+
+interface ScreenRow {
+  id: string; name: string; params: string; locale: string; privateDetails: boolean;
+  key: string; url: string; lastSeenAt: number | null; createdAt: number; updatedAt: number;
+}
+interface State {
+  now: number;
+  origin: string;
+  /** may see booker names (Manage bookings): private details need it */
+  canPrivate: boolean;
+  weekStart: 0 | 1;
+  timezone: string;
+  languages: { code: string; label: string; main: boolean }[];
+  screens: ScreenRow[];
+  calendars: { slug: string; name: string; color: string; visibility: string; kind: string }[];
+  rooms: { slug: string; name: string; kind: string; color: string; public: boolean }[];
+  tags: string[];
+}
+interface Draft { name: string; settings: DisplaySettings; locale: string; privateDetails: boolean }
+type Mode = { kind: 'screen'; id: string } | { kind: 'new' } | { kind: 'quick' };
+
+const ENDPOINT = '/api/calendar/screens';
+const PRIVATE_WARNING = 'Shows their titles and the name on each booking. Never emails, phone numbers or notes. Anyone with this screen’s link can see them.';
+const VIEW_LABEL: Record<DisplayView, string> = { week: 'Week', day: 'Day', rooms: 'Rooms', month: 'Month', list: 'List', next: 'Now & next' };
+const SHOW_LABEL: Record<DisplayShow, string> = { time: 'Times', room: 'Rooms', host: 'Hosts', clock: 'Clock', legend: 'Colour key', qr: 'QR code for phones' };
+const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const STALE_AFTER = 12 * 60_000; // a TV fetches every 5 minutes
+
+async function api<T>(body?: Record<string, unknown>): Promise<T> {
+  const res = await fetch(ENDPOINT, {
+    method: body ? 'POST' : 'GET', credentials: 'same-origin',
+    headers: body ? { 'content-type': 'application/json', accept: 'application/json' } : { accept: 'application/json' },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok) throw new Error(data?.issues?.[0]?.message || data?.error || `${res.status} ${res.statusText || 'Request failed'}`);
+  return data as T;
+}
+const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
+
+const hourLabel = (min: number) => {
+  if (min === 1440) return 'Midnight';
+  return new Date(Date.UTC(2000, 0, 3, 0, min)).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit', timeZone: 'UTC' });
+};
+const HOUR_STEPS = Array.from({ length: 49 }, (_, i) => i * 30);
+
+function ago(ms: number, now: number) {
+  const s = Math.max(0, Math.round((now - ms) / 1000));
+  if (s < 90) return 'just now';
+  if (s < 3600) return `${Math.round(s / 60)} min ago`;
+  if (s < 86400) return `${Math.round(s / 3600)} h ago`;
+  return new Date(ms).toLocaleDateString([], { month: 'short', day: 'numeric' });
+}
+
+function summary(s: DisplaySettings, st: State): string {
+  const bits: string[] = [VIEW_LABEL[s.view]];
+  if (['week', 'day', 'rooms'].includes(s.view)) {
+    bits.push(s.hours === 'auto' ? 'hours fit the events' : s.hours.from === 0 && s.hours.to === 1440 ? 'all hours' : `${hourLabel(s.hours.from)}–${hourLabel(s.hours.to)}`);
+  }
+  const names = (slugs: string[], list: { slug: string; name: string }[]) => slugs.map((x) => list.find((i) => i.slug === x)?.name ?? x).join(', ');
+  if (s.filter.cal.length) bits.push(names(s.filter.cal, st.calendars));
+  if (s.filter.room.length) bits.push(names(s.filter.room, st.rooms));
+  if (s.filter.tag.length) bits.push(`tagged ${s.filter.tag.join(', ')}`);
+  if (s.filter.notag.length) bits.push(`not ${s.filter.notag.join(', ')}`);
+  return bits.join(' · ');
+}
+
+const draftOf = (row: ScreenRow): Draft => ({ name: row.name, settings: readDisplaySettings(new URLSearchParams(row.params)), locale: row.locale, privateDetails: row.privateDetails });
+const sameDraft = (a: Draft, b: Draft) => a.name === b.name && a.locale === b.locale && a.privateDetails === b.privateDetails && displayQuery(a.settings) === displayQuery(b.settings);
+const blankDraft = (): Draft => ({ name: '', settings: defaultDisplaySettings(), locale: '', privateDetails: false });
+
+export default function ScreensManager() {
+  const [state, setState] = useState<State | null>(null);
+  const [loadError, setLoadError] = useState('');
+  const [mode, setMode] = useState<Mode | null>(null);
+  const [draft, setDraft] = useState<Draft>(blankDraft);
+  const [busy, setBusy] = useState('');
+  const [msg, setMsg] = useState<{ ok?: string; err?: string }>({});
+
+  useEffect(() => { api<State>().then(setState, (e) => setLoadError(errText(e))); }, []);
+  // the check-ins move while the page is open
+  useEffect(() => {
+    const t = setInterval(() => api<State>().then((s) => setState((old) => (old ? { ...old, now: s.now, screens: old.screens.map((r) => ({ ...r, lastSeenAt: s.screens.find((x) => x.id === r.id)?.lastSeenAt ?? r.lastSeenAt })) } : s)), () => {}), 60_000);
+    return () => clearInterval(t);
+  }, []);
+
+  const current = state && mode?.kind === 'screen' ? state.screens.find((s) => s.id === mode.id) ?? null : null;
+  const dirty = mode?.kind === 'new' || (current ? !sameDraft(draft, draftOf(current)) : false);
+
+  const open = (m: Mode, d?: Draft) => {
+    if (dirty && !confirm('Leave this screen without saving your changes?')) return;
+    setMsg({});
+    setMode(m);
+    setDraft(d ?? (m.kind === 'screen' && state ? draftOf(state.screens.find((s) => s.id === m.id)!) : blankDraft()));
+  };
+
+  const run = async (body: Record<string, unknown>, label: string, after?: (r: { screen?: ScreenRow; state: State }) => void) => {
+    setBusy(label); setMsg({});
+    try {
+      const r = await api<{ screen?: ScreenRow; state: State }>(body);
+      setState(r.state);
+      after?.(r);
+    } catch (e) { setMsg({ err: errText(e) }); } finally { setBusy(''); }
+  };
+
+  const save = () => {
+    const body = { name: draft.name, params: displayQuery(draft.settings), locale: draft.locale, privateDetails: draft.privateDetails };
+    if (mode?.kind === 'screen') run({ action: 'save', id: mode.id, ...body }, 'save', (r) => { if (r.screen) { setDraft(draftOf({ ...r.screen, url: '' } as ScreenRow)); setMsg({ ok: 'Saved. The TV shows it within 5 minutes.' }); } });
+    else run({ action: 'create', ...body }, 'save', (r) => { if (r.screen) { setMode({ kind: 'screen', id: r.screen.id }); setDraft(draftOf({ ...r.screen, url: '' } as ScreenRow)); setMsg({ ok: 'Screen saved. Copy its link into AbleSign.' }); } });
+  };
+  const rotate = () => {
+    if (mode?.kind !== 'screen' || !confirm('Make a new link for this screen? The old one stops working at once, so update the TV in AbleSign with the new link.')) return;
+    run({ action: 'rotate', id: mode.id }, 'rotate', () => setMsg({ ok: 'New link made. The old one no longer works.' }));
+  };
+  const remove = () => {
+    if (mode?.kind !== 'screen' || !confirm(`Delete “${current?.name}”? Its link stops working at once.`)) return;
+    run({ action: 'delete', id: mode.id }, 'delete', () => { setMode(null); setMsg({ ok: 'Screen deleted.' }); });
+  };
+
+  if (loadError) return <p className="flash error">{loadError}</p>;
+  if (!state) return <div className="card card-pad sc-skel" aria-busy="true">Loading screens…</div>;
+
+  return (
+    <div className="sc">
+      <section className="card sc-list" aria-label="Saved screens">
+        <div className="sc-list-head">
+          <b>Screens</b>
+          <div className="sc-list-actions">
+            <button type="button" className="btn sm primary" onClick={() => open({ kind: 'new' })}>New screen</button>
+            <button type="button" className="btn sm" onClick={() => open({ kind: 'quick' })}>Quick link</button>
+          </div>
+        </div>
+        {state.screens.length === 0 && (
+          <div className="empty-state sc-empty">
+            <b>No screens yet</b>
+            <p>A screen is a calendar for a TV: pick what it shows, then put its link in the TV’s playlist.</p>
+          </div>
+        )}
+        <ul className="sc-rows">
+          {state.screens.map((row) => {
+            const s = readDisplaySettings(new URLSearchParams(row.params));
+            const seen = row.lastSeenAt;
+            const stale = seen !== null && state.now - seen > STALE_AFTER;
+            const active = mode?.kind === 'screen' && mode.id === row.id;
+            return (
+              <li key={row.id}>
+                <button type="button" className={`sc-row${active ? ' on' : ''}`} aria-current={active || undefined} onClick={() => open({ kind: 'screen', id: row.id })}>
+                  <span className="sc-row-name">{row.name}{row.privateDetails && <span className="pill sc-private">Private details</span>}</span>
+                  <span className="sc-row-sum">{summary(s, state)}</span>
+                  <span className={`sc-seen${seen === null ? '' : stale ? ' stale' : ' ok'}`}>
+                    {seen === null ? 'Not opened on a TV yet' : stale ? `Last check-in ${ago(seen, state.now)}. Is the TV on?` : `Checked in ${ago(seen, state.now)}`}
+                  </span>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </section>
+
+      {mode ? (
+        <Editor
+          key={mode.kind === 'screen' ? mode.id : mode.kind}
+          state={state} mode={mode} current={current} draft={draft} setDraft={setDraft} dirty={dirty} busy={busy} msg={msg}
+          onSave={save} onRotate={rotate} onDelete={remove}
+          onSaveQuick={() => open({ kind: 'new' }, { ...draft, name: '' })}
+          onCopied={(what) => setMsg({ ok: `${what} copied.` })}
+        />
+      ) : (
+        <section className="card card-pad sc-intro">
+          <h2>TV screens</h2>
+          <p>Each screen is a full-screen calendar for a TV: week, day, rooms, month, list or now &amp; next, with your own hours. Everything about it lives in its link, so the TV needs no mouse or keyboard, and a change you make here reaches the TV within 5 minutes.</p>
+          <ul className="sc-steps">
+            <li><b>Saved screens</b> have a long secret link. They can also show private calendars and room bookings.</li>
+            <li><b>Quick links</b> spell out their settings in the address and only show public events.</li>
+          </ul>
+          <p className="hint">On a Fire TV Stick with AbleSign: Websites → Add website, paste the link, add it to the screen’s playlist with a long duration, and put a short image before it so the page loads in the background. The stick needs Fire OS 6 or later (not Vega OS) and AbleSign 2.2.2 or later.</p>
+        </section>
+      )}
+    </div>
+  );
+}
+
+interface EditorProps {
+  state: State;
+  mode: Mode;
+  current: ScreenRow | null;
+  draft: Draft;
+  setDraft: (d: Draft) => void;
+  dirty: boolean;
+  busy: string;
+  msg: { ok?: string; err?: string };
+  onSave: () => void;
+  onRotate: () => void;
+  onDelete: () => void;
+  onSaveQuick: () => void;
+  onCopied: (what: string) => void;
+}
+
+function Editor({ state, mode, current, draft, setDraft, dirty, busy, msg, onSave, onRotate, onDelete, onSaveQuick, onCopied }: EditorProps) {
+  const s = draft.settings;
+  const quick = mode.kind === 'quick';
+  const priv = !quick && draft.privateDetails;
+  const set = (patch: Partial<DisplaySettings>) => setDraft({ ...draft, settings: { ...s, ...patch } });
+  const setFilter = (k: keyof DisplaySettings['filter'], values: string[]) => set({ filter: { ...s.filter, [k]: values } });
+  const toggle = (list: string[], v: string) => (list.includes(v) ? list.filter((x) => x !== v) : [...list, v]);
+  const grid = s.view === 'week' || s.view === 'day' || s.view === 'rooms';
+  const main = state.languages.find((l) => l.main)?.code ?? 'en';
+  const lang = draft.locale || main;
+
+  const query = displayQuery(s);
+  const quickUrl = `${state.origin}${lang !== main ? `/${lang}` : ''}/display/calendar${query ? `?${query}` : ''}`;
+  const previewSrc = `/admin/calendar/screens/preview?${[query, lang !== main ? `lang=${lang}` : '', priv ? 'private=1' : ''].filter(Boolean).join('&')}`;
+
+  const [paste, setPaste] = useState('');
+  const fromLink = () => {
+    try {
+      const u = new URL(paste.trim(), state.origin);
+      const es = state.languages.find((l) => !l.main && u.pathname.startsWith(`/${l.code}/`));
+      setDraft({ ...draft, settings: readDisplaySettings(u.searchParams), locale: es?.code ?? '' });
+      setPaste('');
+    } catch { /* not a link: leave it for the person to fix */ }
+  };
+
+  const copy = async (text: string, what: string) => {
+    try { await navigator.clipboard.writeText(text); onCopied(what); } catch { prompt('Copy this link:', text); }
+  };
+
+  const daysValue = 'count' in s.days ? String(s.days.count) : 'custom';
+  const weekdays = 'weekdays' in s.days ? s.days.weekdays : [];
+  const hoursMode = s.hours === 'auto' ? 'auto' : s.hours.from === 0 && s.hours.to === 1440 ? 'all' : 'range';
+  const range = s.hours === 'auto' ? DEFAULT_HOURS : s.hours;
+  const visibleCals = state.calendars.filter((c) => priv || c.visibility !== 'private');
+  const privateCals = state.calendars.filter((c) => c.visibility === 'private');
+  const tags = state.tags.filter((t) => priv || !t.startsWith('#'));
+
+  return (
+    <section className="card sc-editor" aria-label={quick ? 'Quick link' : 'Screen'}>
+      <div className="sc-editor-grid">
+        <div className="sc-options">
+          {msg.err && <p className="flash error" role="alert">{msg.err}</p>}
+          {msg.ok && <p className="flash" role="status">{msg.ok}</p>}
+          {quick ? (
+            <>
+              <h2 className="sc-h">Quick link</h2>
+              <p className="hint">The settings are in the link itself. Nothing is saved, and it only shows public events.</p>
+              <label className="field"><span>Start from a link (optional)</span>
+                <div className="sc-inline"><input type="url" value={paste} placeholder={`${state.origin}/display/calendar?view=week`} onChange={(e) => setPaste(e.target.value)} />
+                  <button type="button" className="btn sm" disabled={!paste.trim()} onClick={fromLink}>Use</button></div>
+              </label>
+            </>
+          ) : (
+            <label className="field"><span>Name</span>
+              <input type="text" value={draft.name} maxLength={120} placeholder="Lobby TV" onChange={(e) => setDraft({ ...draft, name: e.target.value })} />
+            </label>
+          )}
+
+          <fieldset className="sc-fs"><legend>View</legend>
+            <div className="seg sc-seg">
+              {DISPLAY_VIEWS.map((v) => <button key={v} type="button" aria-pressed={s.view === v} onClick={() => set({ view: v })}>{VIEW_LABEL[v]}</button>)}
+            </div>
+          </fieldset>
+
+          {grid && (
+            <fieldset className="sc-fs"><legend>Hours</legend>
+              <label className="check-row"><input type="checkbox" checked={hoursMode === 'all'} onChange={(e) => set({ hours: e.target.checked ? { from: 0, to: 1440 } : { ...DEFAULT_HOURS } })} /> Show all hours</label>
+              <label className="check-row"><input type="checkbox" checked={hoursMode === 'auto'} onChange={(e) => set({ hours: e.target.checked ? 'auto' : { ...DEFAULT_HOURS } })} /> Fit the events shown (at least 6 hours)</label>
+              {hoursMode === 'range' && (
+                <div className="field-row">
+                  <label className="field"><span>From</span>
+                    <select value={range.from} onChange={(e) => { const from = +e.target.value; set({ hours: { from, to: Math.max(range.to, from + 60) } }); }}>
+                      {HOUR_STEPS.filter((m) => m <= 1380).map((m) => <option key={m} value={m}>{hourLabel(m)}</option>)}
+                    </select>
+                  </label>
+                  <label className="field"><span>To</span>
+                    <select value={range.to} onChange={(e) => set({ hours: { from: range.from, to: +e.target.value } })}>
+                      {HOUR_STEPS.filter((m) => m >= range.from + 60).map((m) => <option key={m} value={m}>{hourLabel(m)}</option>)}
+                    </select>
+                  </label>
+                </div>
+              )}
+              <p className="hint">Events outside these hours are cut and marked, never left out.</p>
+            </fieldset>
+          )}
+
+          {(s.view === 'week' || s.view === 'list' || s.view === 'month') && (
+            <fieldset className="sc-fs"><legend>{s.view === 'list' ? 'Days the list covers' : 'Days'}</legend>
+              <div className="field-row">
+                <label className="field"><span>{s.view === 'list' ? 'How many' : 'Which days'}</span>
+                  <select value={daysValue} onChange={(e) => set({ days: e.target.value === 'custom' ? { weekdays: [1, 2, 3, 4, 5] } : { count: +e.target.value } })}>
+                    {(s.view === 'list' ? [1, 3, 7, 14, 31] : [7, 5, 3]).map((n) => <option key={n} value={n}>{n === 7 && s.view !== 'list' ? 'All 7 days' : `${n} day${n > 1 ? 's' : ''}`}</option>)}
+                    <option value="custom">Some weekdays…</option>
+                  </select>
+                </label>
+                {s.view !== 'list' && (
+                  <label className="field"><span>First day</span>
+                    <select value={s.start} onChange={(e) => set({ start: e.target.value as DisplaySettings['start'] })}>
+                      <option value="">Site setting ({state.weekStart ? 'Monday' : 'Sunday'})</option>
+                      <option value="sun">Sunday</option>
+                      <option value="mon">Monday</option>
+                      {s.view === 'week' && <option value="today">Today (a rolling week)</option>}
+                    </select>
+                  </label>
+                )}
+              </div>
+              {daysValue === 'custom' && (
+                <div className="sc-chips" role="group" aria-label="Weekdays">
+                  {WEEKDAYS.map((d, i) => (
+                    <label key={d} className="sc-chip"><input type="checkbox" checked={weekdays.includes(i)}
+                      onChange={() => { const next = weekdays.includes(i) ? weekdays.filter((x) => x !== i) : [...weekdays, i].sort(); set({ days: next.length ? { weekdays: next } : { count: 7 } }); }} /> {d}</label>
+                  ))}
+                </div>
+              )}
+            </fieldset>
+          )}
+
+          <fieldset className="sc-fs"><legend>Calendars</legend>
+            <p className="hint">None ticked: every public calendar.</p>
+            <div className="sc-checks">
+              {visibleCals.map((c) => (
+                <label key={c.slug} className="check-row"><input type="checkbox" checked={s.filter.cal.includes(c.slug)} onChange={() => setFilter('cal', toggle(s.filter.cal, c.slug))} />
+                  <span className="sc-swatch" style={{ background: c.color }} /> {c.name}{c.visibility !== 'public' && <span className="hint"> · {c.visibility}</span>}</label>
+              ))}
+            </div>
+            {!priv && privateCals.length > 0 && <p className="hint">{quick ? 'Private calendars need a saved screen with private details on.' : 'Turn on private details below to pick private calendars.'}</p>}
+          </fieldset>
+
+          {state.rooms.length > 0 && (
+            <fieldset className="sc-fs"><legend>Rooms</legend>
+              <p className="hint">{s.view === 'rooms' ? 'One column per room, in the order you tick them. None ticked: every room.' : 'Only events in these rooms. None ticked: every room.'}</p>
+              <div className="sc-checks">
+                {state.rooms.map((r) => {
+                  const usable = priv || r.public;
+                  const at = s.filter.room.indexOf(r.slug);
+                  return (
+                    <label key={r.slug} className={`check-row${usable ? '' : ' sc-off'}`}>
+                      <input type="checkbox" checked={at >= 0} disabled={!usable && at < 0} onChange={() => setFilter('room', toggle(s.filter.room, r.slug))} />
+                      {r.color && <span className="sc-swatch" style={{ background: r.color }} />} {r.name}
+                      {at >= 0 && s.view === 'rooms' && <span className="sc-order">{at + 1}</span>}
+                      {!usable && <span className="hint"> · not named on public events</span>}
+                    </label>
+                  );
+                })}
+              </div>
+            </fieldset>
+          )}
+
+          {tags.length > 0 && (
+            <fieldset className="sc-fs"><legend>Tags</legend>
+              <div className="field-row">
+                <TagPicker label="Only events tagged" tags={tags} value={s.filter.tag} onChange={(v) => setFilter('tag', v)} />
+                <TagPicker label="Leave out events tagged" tags={tags} value={s.filter.notag} onChange={(v) => setFilter('notag', v)} />
+              </div>
+            </fieldset>
+          )}
+
+          <fieldset className="sc-fs"><legend>Look</legend>
+            <div className="sc-look">
+              <div className="seg sc-seg" role="group" aria-label="Theme">
+                {(['dark', 'light'] as const).map((t) => <button key={t} type="button" aria-pressed={s.theme === t} onClick={() => set({ theme: t })}>{t === 'dark' ? 'Dark' : 'Light'}</button>)}
+              </div>
+              <div className="seg sc-seg" role="group" aria-label="Text size">
+                {(['s', 'm', 'l', 'xl'] as const).map((z) => <button key={z} type="button" aria-pressed={s.size === z} onClick={() => set({ size: z })}>{z.toUpperCase()}</button>)}
+              </div>
+            </div>
+            <div className="sc-chips" role="group" aria-label="Show">
+              {(Object.keys(SHOW_LABEL) as DisplayShow[]).map((k) => (
+                <label key={k} className="sc-chip"><input type="checkbox" checked={s.show.includes(k)} onChange={() => set({ show: s.show.includes(k) ? s.show.filter((x) => x !== k) : [...s.show, k] })} /> {SHOW_LABEL[k]}</label>
+              ))}
+            </div>
+            {s.show.includes('host') && !priv && <p className="hint">Hosts only show on a saved screen with private details on.</p>}
+            <div className="field-row">
+              <label className="field"><span>Title (optional)</span>
+                <input type="text" value={s.title} maxLength={80} placeholder={s.view === 'month' ? 'The month' : s.view === 'week' ? 'This week' : 'Today'} onChange={(e) => set({ title: e.target.value })} />
+              </label>
+              {state.languages.length > 1 && (
+                <label className="field"><span>Language</span>
+                  <select value={lang} onChange={(e) => setDraft({ ...draft, locale: e.target.value === main ? '' : e.target.value })}>
+                    {state.languages.map((l) => <option key={l.code} value={l.code}>{l.label}</option>)}
+                  </select>
+                </label>
+              )}
+            </div>
+          </fieldset>
+
+          {!quick && (
+            <fieldset className="sc-fs sc-private"><legend>Private details</legend>
+              <label className="check-row"><input type="checkbox" role="switch" checked={draft.privateDetails} disabled={!state.canPrivate && !draft.privateDetails}
+                onChange={(e) => setDraft({ ...draft, privateDetails: e.target.checked })} /> <b>Show private calendars and room bookings</b></label>
+              <p className="hint">{PRIVATE_WARNING}</p>
+              {!state.canPrivate && <p className="hint">Turning this on needs the “Manage bookings” permission (Team → Roles).</p>}
+            </fieldset>
+          )}
+        </div>
+
+        <div className="sc-side">
+          <Preview src={previewSrc} />
+          {quick ? (
+            <div className="sc-link">
+              <label className="field"><span>Quick link</span><input type="text" readOnly value={quickUrl} onFocus={(e) => e.currentTarget.select()} /></label>
+              <div className="form-actions">
+                <button type="button" className="btn" onClick={() => copy(quickUrl, 'Link')}>Copy link</button>
+                <button type="button" className="btn primary" onClick={onSaveQuick}>Save as screen</button>
+              </div>
+            </div>
+          ) : (
+            <div className="sc-link">
+              {current?.url ? (
+                <>
+                  <label className="field"><span>Screen link</span><input type="text" readOnly value={current.url} onFocus={(e) => e.currentTarget.select()} /></label>
+                  <div className="form-actions">
+                    <button type="button" className="btn" onClick={() => copy(current.url, 'Link')}>Copy link</button>
+                    <button type="button" className="btn" disabled={busy === 'rotate'} onClick={onRotate}>Rotate link</button>
+                  </div>
+                  <p className="hint">The link is the screen’s only key: keep it in the TV’s playlist and nowhere public. Rotate it if it gets out; the old one stops at once.</p>
+                </>
+              ) : mode.kind === 'screen' ? (
+                <><p className="hint">This screen has no link yet (restored from a backup). Make one, then put it on the TV.</p>
+                  <button type="button" className="btn" disabled={busy === 'rotate'} onClick={onRotate}>Make a link</button></>
+              ) : <p className="hint">Save the screen to get its link.</p>}
+            </div>
+          )}
+          {!quick && (
+            <div className="form-actions sc-save">
+              <button type="button" className="btn primary" disabled={!dirty || !draft.name.trim() || busy === 'save'} onClick={onSave}>{busy === 'save' ? 'Saving…' : mode.kind === 'new' ? 'Save screen' : 'Save changes'}</button>
+              {mode.kind === 'screen' && <button type="button" className="btn danger" disabled={busy === 'delete'} onClick={onDelete}>Delete</button>}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function TagPicker({ label, tags, value, onChange }: { label: string; tags: string[]; value: string[]; onChange: (v: string[]) => void }) {
+  return (
+    <div className="field sc-tags">
+      <span className="sc-tags-label">{label}</span>
+      <div className="sc-checks sc-tag-list">
+        {tags.map((t) => (
+          <label key={t} className="check-row"><input type="checkbox" checked={value.some((v) => v.toLowerCase() === t.toLowerCase())}
+            onChange={(e) => onChange(e.target.checked ? [...value, t] : value.filter((v) => v.toLowerCase() !== t.toLowerCase()))} /> {t}</label>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// the board at the TV's 960×540, scaled to the column (debounced: the frame
+// reloads once the settings stop changing)
+function Preview({ src }: { src: string }) {
+  const box = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(0.5);
+  const [shown, setShown] = useState(src);
+  useEffect(() => { const t = setTimeout(() => setShown(src), 350); return () => clearTimeout(t); }, [src]);
+  useEffect(() => {
+    const el = box.current;
+    if (!el) return;
+    const fit = () => setScale(el.clientWidth / 960);
+    fit();
+    const ro = new ResizeObserver(fit);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const style = useMemo(() => ({ transform: `scale(${scale})` }), [scale]);
+  return (
+    <div className="sc-preview" ref={box} aria-label="Preview">
+      <iframe title="Screen preview" src={shown} width={960} height={540} tabIndex={-1} style={style} />
+    </div>
+  );
+}