@openbrf/display 0.0.0-stage → 0.1.0

package/src/slides.ts

@@ -0,0 +1,583 @@
+/**
+ * One slide's body as DOM.
+ *
+ * Every text from the document is set with `textContent` and nothing is ever
+ * parsed as markup, because the contract makes every string plain text: a
+ * news title that reads `<img src=x onerror=…>` shows those characters.
+ */
+import type {
+  AddonDoorsBody,
+  AddonTableBody,
+  AddonTextBody,
+  AvailabilityBody,
+  EventsBody,
+  MeetingBody,
+  NewsBody,
+  PictureBody,
+  PictureRef,
+  ScreenLocale,
+  Slide,
+} from "./contract.ts";
+import { PAGED_LIST_ATTRIBUTE } from "./fit.ts";
+import { translate } from "./translate.ts";
+import { zonedDayStartAfter, zonedParts } from "./time.ts";
+
+/** What a body needs besides itself. */
+export interface SlideContext {
+  readonly document: Document;
+  readonly locale: ScreenLocale;
+  readonly timeZone: string;
+  readonly now: number;
+  /** The picture's URL when the caller handed one, otherwise null. */
+  pictureUrl(ref: PictureRef): string | null;
+  /** The browser could not show a picture it was given. */
+  pictureFailed(ref: PictureRef): void;
+}
+
+/** The language tag a locale is formatted in: 24-hour, day before month. */
+export function localeTag(locale: ScreenLocale): string {
+  return locale === "sv" ? "sv-SE" : "en-GB";
+}
+
+const formatters = new Map<string, Intl.DateTimeFormat>();
+
+/** Formats an instant in the screen's locale and time zone. */
+export function formatTime(
+  time: number,
+  locale: ScreenLocale,
+  timeZone: string,
+  style: "time" | "date" | "dayShort" | "weekdayDate" | "weekdayDateTime",
+): string {
+  const key = `${locale}\u0000${timeZone}\u0000${style}`;
+  let formatter = formatters.get(key);
+  if (formatter === undefined) {
+    formatter = new Intl.DateTimeFormat(localeTag(locale), {
+      timeZone,
+      ...FORMATS[style],
+    });
+    formatters.set(key, formatter);
+  }
+  return formatter.format(time);
+}
+
+const TIME: Intl.DateTimeFormatOptions = {
+  hour: "2-digit",
+  minute: "2-digit",
+  hourCycle: "h23",
+};
+
+const FORMATS: Record<string, Intl.DateTimeFormatOptions> = {
+  time: TIME,
+  date: { day: "numeric", month: "long" },
+  dayShort: { weekday: "short", day: "numeric", month: "short" },
+  weekdayDate: { weekday: "long", day: "numeric", month: "long" },
+  weekdayDateTime: {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    ...TIME,
+  },
+};
+
+/** The text with its first letter in capitals, as a heading starts. */
+export function capitalised(text: string): string {
+  return text.charAt(0).toLocaleUpperCase() + text.slice(1);
+}
+
+/** A new element, with a class and its text. */
+export function element<K extends keyof HTMLElementTagNameMap>(
+  document: Document,
+  tag: K,
+  className?: string,
+  text?: string,
+): HTMLElementTagNameMap[K] {
+  const node = document.createElement(tag);
+  if (className !== undefined) {
+    node.className = className;
+  }
+  if (text !== undefined) {
+    node.textContent = text;
+  }
+  return node;
+}
+
+/** A list the renderer may show a page at a time, when the canvas cannot hold all of it. */
+function pagedList<K extends "ol" | "ul" | "tbody">(
+  document: Document,
+  tag: K,
+  className?: string,
+): HTMLElementTagNameMap[K] {
+  const list = element(document, tag, className);
+  list.setAttribute(PAGED_LIST_ATTRIBUTE, "");
+  return list;
+}
+
+/** The slide's body, or null when it cannot be shown now (a picture slide without its picture). */
+export function renderSlide(
+  slide: Slide,
+  context: SlideContext,
+): HTMLElement | null {
+  const { body } = slide;
+  switch (body.kind) {
+    case "news":
+      return news(body, context);
+    case "events":
+      return events(body, context);
+    case "meeting":
+      return meeting(body, context);
+    case "availability":
+      return availability(body, context);
+    case "picture":
+      return picture(body, context);
+    case "text":
+      return text(body, context);
+    case "table":
+      return table(body, context);
+    case "doors":
+      return doors(body, context);
+  }
+}
+
+function container(context: SlideContext, kind: string): HTMLElement {
+  return element(
+    context.document,
+    "section",
+    `obrf-display-slide obrf-display-${kind}`,
+  );
+}
+
+function image(ref: PictureRef, url: string, context: SlideContext) {
+  const img = element(context.document, "img", "obrf-display-picture");
+  img.alt = ref.alt;
+  img.decoding = "async";
+  img.addEventListener("error", () => context.pictureFailed(ref), {
+    once: true,
+  });
+  img.src = url;
+  return img;
+}
+
+function news(body: NewsBody, context: SlideContext): HTMLElement {
+  const { document } = context;
+  const section = container(context, "news");
+  const copy = element(document, "div", "obrf-display-copy");
+  const published = Date.parse(body.publishedAt);
+  copy.append(
+    element(
+      document,
+      "p",
+      "obrf-display-date",
+      formatTime(published, context.locale, context.timeZone, "date"),
+    ),
+    element(document, "h2", "obrf-display-heading", body.title),
+    ...body.paragraphs.map((paragraph) =>
+      element(document, "p", "obrf-display-text", paragraph),
+    ),
+  );
+  section.append(copy);
+  const url = body.picture === null ? null : context.pictureUrl(body.picture);
+  if (body.picture !== null && url !== null) {
+    section.classList.add("obrf-display-news--picture");
+    section.append(image(body.picture, url, context));
+  }
+  return section;
+}
+
+function timeRange(start: number, end: number, context: SlideContext): string {
+  const { locale, timeZone } = context;
+  const from = formatTime(start, locale, timeZone, "time");
+  const sameDay =
+    zonedDayStartAfter(start, 0, timeZone) ===
+    zonedDayStartAfter(end, 0, timeZone);
+  const to = sameDay
+    ? formatTime(end, locale, timeZone, "time")
+    : `${formatTime(end, locale, timeZone, "dayShort")} ${formatTime(end, locale, timeZone, "time")}`;
+  return translate(locale, "timeRange", { from, to });
+}
+
+function events(body: EventsBody, context: SlideContext): HTMLElement {
+  const { document, locale, timeZone } = context;
+  const section = container(context, "events");
+  section.append(
+    element(
+      document,
+      "h2",
+      "obrf-display-heading",
+      translate(locale, "comingEvents"),
+    ),
+  );
+  const list = pagedList(document, "ol", "obrf-display-list");
+  for (const occurrence of body.occurrences) {
+    const start = Date.parse(occurrence.startsAt);
+    const end = Date.parse(occurrence.endsAt);
+    const item = element(document, "li", "obrf-display-event");
+    const when = element(document, "div", "obrf-display-when");
+    when.append(
+      element(
+        document,
+        "span",
+        undefined,
+        capitalised(formatTime(start, locale, timeZone, "dayShort")),
+      ),
+      element(document, "span", undefined, timeRange(start, end, context)),
+    );
+    const what = element(document, "div", "obrf-display-what");
+    what.append(element(document, "p", "obrf-display-title", occurrence.title));
+    if (occurrence.location !== null) {
+      what.append(
+        element(
+          document,
+          "p",
+          "obrf-display-text obrf-display-muted",
+          occurrence.location,
+        ),
+      );
+    }
+    if (occurrence.description !== null) {
+      what.append(
+        element(
+          document,
+          "p",
+          "obrf-display-description",
+          occurrence.description,
+        ),
+      );
+    }
+    if (occurrence.calledOff) {
+      item.classList.add("obrf-display-event--called-off");
+      what.append(
+        element(
+          document,
+          "span",
+          "obrf-display-badge",
+          translate(locale, "calledOff"),
+        ),
+      );
+    } else if (occurrence.placesLeft !== null) {
+      what.append(
+        element(
+          document,
+          "p",
+          "obrf-display-text",
+          occurrence.placesLeft === 0
+            ? translate(locale, "fullyBooked")
+            : translate(locale, "placesLeft", { count: occurrence.placesLeft }),
+        ),
+      );
+    }
+    item.append(when, what);
+    list.append(item);
+  }
+  section.append(list);
+  return section;
+}
+
+function meeting(body: MeetingBody, context: SlideContext): HTMLElement {
+  const { document, locale, timeZone } = context;
+  const section = container(context, "meeting");
+  section.append(
+    element(
+      document,
+      "h2",
+      "obrf-display-heading",
+      translate(
+        locale,
+        body.meetingKind === "extraordinary"
+          ? "extraordinaryMeeting"
+          : "ordinaryMeeting",
+      ),
+    ),
+  );
+  const facts = element(document, "dl", "obrf-display-facts");
+  const fact = (term: string, value: string, className?: string) => {
+    facts.append(
+      element(document, "dt", undefined, term),
+      element(document, "dd", className, value),
+    );
+  };
+  fact(
+    translate(locale, "meetingWhen"),
+    capitalised(
+      formatTime(
+        Date.parse(body.startsAt),
+        locale,
+        timeZone,
+        "weekdayDateTime",
+      ),
+    ),
+    "obrf-display-data",
+  );
+  fact(translate(locale, "meetingWhere"), body.place);
+  if (body.digitalParticipation !== null) {
+    fact(translate(locale, "digitalParticipation"), body.digitalParticipation);
+  }
+  section.append(facts);
+  if (body.agenda.length > 0) {
+    const agenda = pagedList(document, "ol", "obrf-display-agenda");
+    for (const item of body.agenda) {
+      const entry = element(document, "li");
+      entry.append(
+        element(
+          document,
+          "span",
+          "obrf-display-agenda-position",
+          `${item.position}.`,
+        ),
+        element(document, "span", undefined, item.title),
+      );
+      agenda.append(entry);
+    }
+    section.append(
+      element(
+        document,
+        "h3",
+        "obrf-display-subheading",
+        translate(locale, "agenda"),
+      ),
+      agenda,
+    );
+  }
+  return section;
+}
+
+function availability(
+  body: AvailabilityBody,
+  context: SlideContext,
+): HTMLElement {
+  const { document, locale, timeZone, now } = context;
+  const section = container(context, "availability");
+  section.append(
+    element(
+      document,
+      "h2",
+      "obrf-display-heading",
+      translate(locale, "freeAndBusy"),
+    ),
+  );
+  const documentFrom = Date.parse(body.from);
+  const to = Date.parse(body.to);
+  const todayStart = zonedDayStartAfter(now, 0, timeZone);
+  const tomorrowStart = zonedDayStartAfter(now, 1, timeZone);
+  const dayAfterStart = zonedDayStartAfter(now, 2, timeZone);
+  // A day is shown only as far as the document knows it: from the later of the
+  // day's start (on today, now) and the document's `from`, to the earlier of
+  // the day's end and the document's `to`. What lies outside is not said.
+  const days: {
+    label: string;
+    /** The calendar day's first instant. */
+    dayStart: number;
+    /** The calendar day's end, the next day's first instant. */
+    dayEnd: number;
+    /** Where the slide starts telling. */
+    from: number;
+    /** Where the slide stops telling. */
+    end: number;
+    /** The slide tells the whole day, or on today the rest of it. */
+    whole: boolean;
+    today: boolean;
+  }[] = [];
+  const addDay = (
+    label: string,
+    dayStart: number,
+    dayEnd: number,
+    today: boolean,
+  ): void => {
+    const wanted = today ? Math.max(dayStart, now) : dayStart;
+    const known = Math.max(wanted, documentFrom);
+    const end = Math.min(dayEnd, to);
+    if (end > known) {
+      days.push({
+        label,
+        dayStart,
+        dayEnd,
+        from: known,
+        end,
+        whole: known === wanted && end === dayEnd,
+        today,
+      });
+    }
+  };
+  addDay(translate(locale, "today"), todayStart, tomorrowStart, true);
+  addDay(translate(locale, "tomorrow"), tomorrowStart, dayAfterStart, false);
+  const list = pagedList(document, "ul", "obrf-display-resources");
+  for (const resource of body.resources) {
+    const item = element(document, "li", "obrf-display-resource");
+    item.append(element(document, "p", "obrf-display-title", resource.name));
+    for (const day of days) {
+      const row = element(document, "p", "obrf-display-day");
+      row.append(
+        element(document, "span", "obrf-display-day-label", day.label),
+      );
+      const busy = resource.busy
+        .map((interval) => ({
+          start: Date.parse(interval.start),
+          end: Date.parse(interval.end),
+        }))
+        .filter(({ start, end }) => end > day.from && start < day.end);
+      if (busy.length === 0) {
+        row.append(
+          element(
+            document,
+            "span",
+            undefined,
+            day.whole
+              ? translate(locale, day.today ? "freeRestOfDay" : "freeAllDay")
+              : translate(locale, "freeBetween", {
+                  from: formatTime(day.from, locale, timeZone, "time"),
+                  to: formatTime(day.end, locale, timeZone, "time"),
+                }),
+          ),
+        );
+      } else if (
+        day.whole &&
+        busy.length === 1 &&
+        busy[0] !== undefined &&
+        busy[0].start <= day.from &&
+        busy[0].end >= day.end
+      ) {
+        row.append(
+          element(
+            document,
+            "span",
+            "obrf-display-busy",
+            translate(locale, "busyAllDay"),
+          ),
+        );
+      } else {
+        row.append(
+          element(document, "span", undefined, translate(locale, "busy")),
+        );
+        for (const interval of busy) {
+          const start = Math.max(interval.start, day.dayStart);
+          const end = Math.min(interval.end, day.dayEnd);
+          row.append(
+            element(
+              document,
+              "span",
+              "obrf-display-busy obrf-display-data",
+              translate(locale, "timeRange", {
+                from: formatTime(start, locale, timeZone, "time"),
+                to:
+                  end === day.dayEnd
+                    ? "24:00"
+                    : formatTime(end, locale, timeZone, "time"),
+              }),
+            ),
+          );
+        }
+      }
+      item.append(row);
+    }
+    list.append(item);
+  }
+  section.append(list);
+  return section;
+}
+
+function picture(body: PictureBody, context: SlideContext): HTMLElement | null {
+  const url = context.pictureUrl(body.picture);
+  if (url === null) {
+    return null;
+  }
+  const { document } = context;
+  const section = container(context, "picture");
+  const figure = element(document, "figure", "obrf-display-figure");
+  figure.append(image(body.picture, url, context));
+  if (body.caption !== null) {
+    figure.append(
+      element(document, "figcaption", "obrf-display-caption", body.caption),
+    );
+  }
+  section.append(figure);
+  return section;
+}
+
+function text(body: AddonTextBody, context: SlideContext): HTMLElement {
+  const { document } = context;
+  const section = container(context, "addon-text");
+  section.append(
+    element(document, "h2", "obrf-display-heading", body.heading),
+    ...body.body.map((paragraph) =>
+      element(document, "p", "obrf-display-text", paragraph),
+    ),
+  );
+  return section;
+}
+
+function table(body: AddonTableBody, context: SlideContext): HTMLElement {
+  const { document } = context;
+  const section = container(context, "addon-table");
+  const grid = element(document, "table", "obrf-display-table");
+  const head = element(document, "thead");
+  const headRow = element(document, "tr");
+  for (const column of body.columns) {
+    const cell = element(document, "th", undefined, column);
+    cell.scope = "col";
+    headRow.append(cell);
+  }
+  head.append(headRow);
+  const rows = pagedList(document, "tbody");
+  for (const row of body.rows) {
+    const line = element(document, "tr");
+    for (const cell of row) {
+      line.append(element(document, "td", undefined, cell));
+    }
+    rows.append(line);
+  }
+  grid.append(head, rows);
+  section.append(
+    element(document, "h2", "obrf-display-heading", body.heading),
+    grid,
+  );
+  return section;
+}
+
+function doors(body: AddonDoorsBody, context: SlideContext): HTMLElement {
+  const { document, locale } = context;
+  const section = container(context, "addon-doors");
+  const list = pagedList(document, "ul", "obrf-display-doors");
+  for (const door of body.doors) {
+    const item = element(document, "li", "obrf-display-door");
+    item.append(
+      element(document, "span", "obrf-display-door-apartment", door.apartment),
+    );
+    if (door.floor !== null) {
+      item.append(
+        element(
+          document,
+          "span",
+          "obrf-display-muted",
+          translate(locale, "floor", { floor: door.floor }),
+        ),
+      );
+    }
+    for (const name of door.names) {
+      item.append(element(document, "span", undefined, name));
+    }
+    list.append(item);
+  }
+  section.append(
+    element(document, "h2", "obrf-display-heading", body.heading),
+    list,
+  );
+  return section;
+}
+
+/** Whether the zone's wall clock at `time` is inside one of the windows. */
+export function inSchedule(
+  windows: readonly { days: readonly number[]; from: string; to: string }[],
+  time: number,
+  timeZone: string,
+): boolean {
+  if (windows.length === 0) {
+    return true;
+  }
+  const parts = zonedParts(time, timeZone);
+  const clock = `${String(parts.hour).padStart(2, "0")}:${String(parts.minute).padStart(2, "0")}`;
+  return windows.some(
+    (window) =>
+      window.days.includes(parts.weekday) &&
+      window.from <= clock &&
+      clock < window.to,
+  );
+}

package/src/styles.ts

@@ -0,0 +1,110 @@
+/**
+ * The renderer's stylesheet.
+ *
+ * Its colours, type, shape and motion are the default theme's (Porttavlan,
+ * from `@openbrf/tokens`), so a screen looks like the association's own pages,
+ * and every pair it sets on another is one the token contract holds to WCAG
+ * AA. Dates, times and apartment numbers are in the data face, as everywhere
+ * else (DESIGN.md, the Mono-Grid Rule).
+ * A screen is read from across a stairwell, so every size is a fraction of the
+ * canvas's shorter side (`--obrf-display-u`, a hundredth of it), which the
+ * renderer sets from the element it is mounted on.
+ *
+ * Every class starts with `obrf-display`, so the sheet restyles nothing of the
+ * page it is mounted in.
+ */
+import {
+  PORTTAVLAN_DARK,
+  PORTTAVLAN_LIGHT,
+  type TokenSet,
+} from "@openbrf/tokens";
+import { ELSEWHERE_ATTRIBUTE } from "./fit.ts";
+
+function palette(tokens: TokenSet): string {
+  return [
+    `--obrf-display-ground: ${tokens["surface-page"]};`,
+    `--obrf-display-panel: ${tokens["surface-raised"]};`,
+    `--obrf-display-ink: ${tokens["text-primary"]};`,
+    `--obrf-display-muted: ${tokens["text-secondary"]};`,
+    `--obrf-display-accent: ${tokens["accent-trust"]};`,
+    `--obrf-display-danger: ${tokens["status-danger"]};`,
+    `--obrf-display-on-danger: ${tokens["on-status-danger"]};`,
+    `--obrf-display-rule: ${tokens["border-subtle"]};`,
+    `--obrf-display-font: ${tokens["font-ui"]};`,
+    `--obrf-display-data-font: ${tokens["font-data"]};`,
+    `--obrf-display-radius-control: ${tokens["radius-control"]};`,
+    `--obrf-display-radius-panel: ${tokens["radius-panel"]};`,
+    `--obrf-display-motion-duration: ${tokens["motion-duration"]};`,
+    `--obrf-display-motion-easing: ${tokens["motion-easing"]};`,
+  ].join(" ");
+}
+
+const u = (times: number): string => `calc(var(--obrf-display-u) * ${times})`;
+
+/**
+ * The stylesheet `mountRenderer` adds to the document once, as a `<style>`
+ * element with the attribute `data-obrf-display`. Exported for a page that
+ * would rather serve it as a file of its own.
+ */
+export const DISPLAY_STYLESHEET = `
+.obrf-display { --obrf-display-u: 1vmin; position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--obrf-display-ground); color: var(--obrf-display-ink); font-family: var(--obrf-display-font); }
+.obrf-display--light { ${palette(PORTTAVLAN_LIGHT)} color-scheme: light; }
+.obrf-display--dark { ${palette(PORTTAVLAN_DARK)} color-scheme: dark; }
+.obrf-display [hidden] { display: none !important; }
+.obrf-display [${ELSEWHERE_ATTRIBUTE}]:not(td, th) { display: none !important; }
+.obrf-display *, .obrf-display *::before, .obrf-display *::after { box-sizing: border-box; }
+.obrf-display-canvas { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: ${u(2.5)}; padding: ${u(4)} ${u(5)}; font-size: ${u(3.4)}; line-height: 1.3; }
+.obrf-display-clock { display: flex; justify-content: space-between; align-items: baseline; gap: ${u(3)}; padding-bottom: ${u(1.5)}; border-bottom: ${u(0.25)} solid var(--obrf-display-rule); color: var(--obrf-display-muted); font-size: ${u(3.6)}; }
+.obrf-display-clock, .obrf-display-date, .obrf-display-when, .obrf-display-door-apartment, .obrf-display-data { font-family: var(--obrf-display-data-font); }
+.obrf-display-clock-time { color: var(--obrf-display-ink); font-size: ${u(5)}; font-weight: 700; font-variant-numeric: tabular-nums; }
+.obrf-display-stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
+.obrf-display-slide { display: flex; flex-direction: column; gap: ${u(2.5)}; height: 100%; min-height: 0; overflow: hidden; font-size: ${u(3.4)}; }
+.obrf-display-slide--enter { animation: obrf-display-enter var(--obrf-display-motion-duration) var(--obrf-display-motion-easing); }
+@keyframes obrf-display-enter { from { opacity: 0; } to { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .obrf-display-slide--enter { animation: none; } }
+.obrf-display-heading { margin: 0; font-size: ${u(6.5)}; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
+.obrf-display-subheading { margin: 0; font-size: ${u(4)}; font-weight: 700; color: var(--obrf-display-muted); }
+.obrf-display-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
+.obrf-display-muted { color: var(--obrf-display-muted); }
+.obrf-display-date { margin: 0; color: var(--obrf-display-accent); font-weight: 700; }
+.obrf-display-news { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
+.obrf-display-news--picture { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: ${u(5)}; }
+.obrf-display--portrait .obrf-display-news--picture { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
+.obrf-display-copy { display: flex; flex-direction: column; gap: ${u(2)}; min-height: 0; overflow: hidden; }
+.obrf-display-picture { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
+.obrf-display-figure { display: flex; flex-direction: column; gap: ${u(2)}; height: 100%; margin: 0; }
+.obrf-display-figure .obrf-display-picture { flex: 1 1 auto; }
+.obrf-display-caption { font-size: ${u(4)}; text-align: center; }
+.obrf-display-list { display: flex; flex-direction: column; gap: ${u(2)}; margin: 0; padding: 0; list-style: none; }
+.obrf-display-event { display: grid; grid-template-columns: ${u(24)} minmax(0, 1fr); gap: ${u(3)}; padding-bottom: ${u(1.5)}; border-bottom: ${u(0.2)} solid var(--obrf-display-rule); }
+.obrf-display-when { display: flex; flex-direction: column; color: var(--obrf-display-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
+.obrf-display-what { grid-column: 2; display: flex; flex-direction: column; gap: ${u(0.5)}; min-width: 0; }
+.obrf-display-title { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
+.obrf-display-event--called-off .obrf-display-title { text-decoration: line-through; }
+.obrf-display-description { margin: 0; color: var(--obrf-display-muted); font-size: ${u(2.8)}; white-space: pre-line; overflow-wrap: anywhere; }
+.obrf-display-badge { align-self: flex-start; padding: 0 ${u(1)}; border-radius: var(--obrf-display-radius-control); background: var(--obrf-display-danger); color: var(--obrf-display-on-danger); font-weight: 700; }
+.obrf-display-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: ${u(1)} ${u(3)}; margin: 0; }
+.obrf-display-facts dt { grid-column: 1; color: var(--obrf-display-muted); }
+.obrf-display-facts dd { grid-column: 2; margin: 0; font-weight: 700; white-space: pre-line; overflow-wrap: anywhere; }
+.obrf-display-agenda { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: ${u(5)}; font-size: ${u(3)}; }
+.obrf-display--portrait .obrf-display-agenda { columns: 1; }
+.obrf-display-agenda li { break-inside: avoid; display: flex; gap: ${u(1.5)}; }
+.obrf-display-agenda-position { min-width: ${u(4)}; color: var(--obrf-display-muted); font-variant-numeric: tabular-nums; }
+.obrf-display-resources { display: grid; grid-template-columns: repeat(auto-fill, minmax(${u(52)}, 1fr)); gap: ${u(2)}; margin: 0; padding: 0; list-style: none; }
+.obrf-display-resource { display: flex; flex-direction: column; gap: ${u(0.8)}; padding: ${u(1.5)} ${u(2)}; border-radius: var(--obrf-display-radius-panel); background: var(--obrf-display-panel); }
+.obrf-display-day { display: flex; margin: 0; flex-wrap: wrap; gap: ${u(0.5)} ${u(1.5)}; font-size: ${u(2.8)}; }
+.obrf-display-day-label { min-width: ${u(14)}; color: var(--obrf-display-muted); }
+.obrf-display-busy { font-weight: 700; font-variant-numeric: tabular-nums; }
+.obrf-display-table { width: 100%; border-collapse: collapse; }
+.obrf-display-table th, .obrf-display-table td { padding: ${u(0.8)} ${u(1.5)}; border-bottom: ${u(0.2)} solid var(--obrf-display-rule); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
+.obrf-display-table th { color: var(--obrf-display-muted); }
+.obrf-display-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(${u(30)}, 1fr)); gap: ${u(1.5)}; margin: 0; padding: 0; list-style: none; font-size: ${u(2.8)}; }
+.obrf-display-door { display: flex; flex-direction: column; padding: ${u(1)} ${u(1.5)}; border-radius: var(--obrf-display-radius-panel); background: var(--obrf-display-panel); }
+.obrf-display-door-apartment { font-weight: 700; }
+.obrf-display-message { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${u(3)}; height: 100%; text-align: center; }
+.obrf-display-message-title { margin: 0; font-size: ${u(7)}; font-weight: 700; }
+.obrf-display-empty { display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; color: var(--obrf-display-muted); font-size: ${u(4)}; }
+.obrf-display-message-detail { max-width: 40ch; margin: 0; color: var(--obrf-display-muted); font-size: ${u(4)}; }
+.obrf-display-note { position: absolute; right: ${u(2)}; bottom: ${u(1.2)}; color: var(--obrf-display-muted); font-size: ${u(2.2)}; }
+.obrf-display-off { position: absolute; inset: 0; z-index: 1; background: black; }
+`;