contour-deck 0.0.0-stage → 0.2.0

package/dist/remote/sensor.js

@@ -0,0 +1,50 @@
+/** The orientation sensor of the phone: permission (iOS asks, and only on a tap), events, and the screen's turn. */
+import { aimOf } from "./tilt.js";
+/** How long to wait for the first reading before deciding there is no sensor (a desktop browser). */
+const FIRST_READING = 1500;
+function screenAngle() {
+    const legacy = window.orientation;
+    return screen.orientation?.angle ?? (Number(legacy) || 0);
+}
+/** Calls `onAim` with the direction the phone points at, and the time in seconds, for every reading. */
+export function createSensor(onAim) {
+    let abort = null;
+    return {
+        async start() {
+            if (typeof DeviceOrientationEvent === "undefined")
+                return "unsupported";
+            const gate = DeviceOrientationEvent;
+            if (gate.requestPermission) {
+                try {
+                    // Only a refusal ends it here; without a decision, the wait for a first reading below tells.
+                    if ((await gate.requestPermission()) === "denied")
+                        return "denied";
+                }
+                catch {
+                    return "denied";
+                }
+            }
+            abort?.abort();
+            abort = new AbortController();
+            const { signal } = abort;
+            return new Promise(resolve => {
+                const timer = window.setTimeout(() => {
+                    abort?.abort();
+                    resolve("unsupported");
+                }, FIRST_READING);
+                addEventListener("deviceorientation", event => {
+                    const { alpha, beta, gamma } = event;
+                    if (alpha === null || beta === null || gamma === null)
+                        return;
+                    clearTimeout(timer);
+                    resolve("ok");
+                    onAim(aimOf({ alpha, beta, gamma }, screenAngle()), event.timeStamp / 1000);
+                }, { signal });
+            });
+        },
+        stop() {
+            abort?.abort();
+            abort = null;
+        },
+    };
+}

package/dist/remote/session.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The host side of the remote: one session per open deck. It owns the room, answers pairing,
+ * runs what the granted phone and the presenter window ask for, and tells them where the deck is.
+ */
+import type { Deck } from "../core/index.js";
+import type { RemoteLabels } from "./labels.js";
+import type { QrEncoder } from "./panel.js";
+export interface RemoteOptions {
+    /**
+     * Base URL of the relay, `wss://…` or `https://…` (see docs/PROTOCOL.md). Without it the remote stays
+     * on this computer: the presenter window and the notes link work, a phone cannot control the deck.
+     */
+    relay?: string;
+    /** Draws a QR code as an SVG string. Default: the built-in encoder, for links up to 287 bytes. */
+    qr?: QrEncoder;
+    /** Block kinds outside the talk, whose minutes are not planned time. Default `["appendix"]`, as `linear.skip` of the deck. */
+    skip?: string[];
+    labels?: Partial<RemoteLabels>;
+    /** Nonce for the injected `<style>`, for a page with a `style-src` policy. */
+    nonce?: string;
+}
+export interface RemoteHost {
+    /** The room of this session: the name of the relay room and of the BroadcastChannel. */
+    readonly room: string;
+    /** Whether the panel is showing. */
+    readonly open: boolean;
+    /** Shows or hides the panel; without an argument, the other state. */
+    toggle(open?: boolean): void;
+    /** Ends the session for good: control is taken back, the room closes, and the next session gets a new room. */
+    end(): void;
+    /** Closes the connections and removes the overlays. The room and the token stay in `sessionStorage`, so the next session in this tab continues. */
+    destroy(): void;
+}
+/**
+ * Starts the remote for an open deck, or returns the session it already has.
+ * `root` is the deck element given to `createDeck`. It resolves once the room is known: the room is
+ * the hash of the session's key, which takes `crypto.subtle`.
+ */
+export declare function remoteHost(deck: Deck, root: HTMLElement, options?: RemoteOptions): Promise<RemoteHost>;

package/dist/remote/session.js

@@ -0,0 +1,287 @@
+import { readModel } from "../core/model.js";
+import { createClock, plannedSeconds } from "./clock.js";
+import { defaultRemoteLabels } from "./labels.js";
+import { pageLink } from "./links.js";
+import { createOverlay } from "./overlay.js";
+import { createPairing } from "./pairing.js";
+import { createPanel } from "./panel.js";
+import { guestMessage, isRoom, newKey, roomOf } from "./protocol.js";
+import { hostKey, load, save } from "./store.js";
+import { injectStyle } from "./style.js";
+import { broadcast, relay } from "./transport.js";
+function stored() {
+    const value = load(hostKey());
+    if (typeof value !== "object" || value === null)
+        return null;
+    const { key, token, clock } = value;
+    if (!isRoom(key))
+        return null;
+    const state = clock;
+    const usable = !!state && typeof state === "object" && typeof state.spent === "object" && state.spent !== null;
+    return { key, token: typeof token === "string" ? token : null, clock: usable ? state : null };
+}
+/** A request shows once it is this old: a phone that resumes with its token in that time never flashes one. */
+const SETTLE = 300;
+/** `state` goes out on every change and this often between changes. */
+const STATE_EVERY = 15;
+const hosts = new WeakMap();
+/**
+ * Starts the remote for an open deck, or returns the session it already has.
+ * `root` is the deck element given to `createDeck`. It resolves once the room is known: the room is
+ * the hash of the session's key, which takes `crypto.subtle`.
+ */
+export function remoteHost(deck, root, options = {}) {
+    const known = hosts.get(deck);
+    if (known)
+        return known;
+    const app = root.closest(".ct-app");
+    const stage = app?.querySelector(".ct-stage");
+    const viewport = app?.querySelector(".ct-vp");
+    if (!app || !stage || !viewport)
+        return Promise.reject(new Error("contour-deck: remoteHost needs an open deck"));
+    const before = stored();
+    const key = before?.key ?? newKey();
+    let closed = false;
+    const stop = deck.on("destroy", () => (closed = true));
+    // Without a relay the room is only the name of a BroadcastChannel; a page without `crypto.subtle` (plain http
+    // off localhost) then uses the key itself, which nothing outside this browser ever sees.
+    const room = options.relay || globalThis.crypto?.subtle ? roomOf(key) : Promise.resolve(key);
+    const pending = room
+        .then(room => {
+        if (closed)
+            throw new Error("contour-deck: the deck closed before its remote started");
+        return start(deck, root, options, { app, stage, viewport }, { key, room, before });
+    })
+        .finally(stop);
+    hosts.set(deck, pending);
+    pending.catch(() => hosts.delete(deck));
+    return pending;
+}
+function start(deck, root, options, { app, stage, viewport }, { key, room, before }) {
+    injectStyle(options.nonce);
+    const labels = { ...defaultRemoteLabels, ...options.labels };
+    const blocks = readModel(root, root.dataset.title || document.title);
+    const total = plannedSeconds(blocks, options.skip ?? ["appendix"]);
+    const clock = createClock(before?.clock);
+    const overlay = createOverlay(stage);
+    const local = broadcast(room);
+    // The key goes to the relay only; the links and the QR carry the room.
+    const wan = options.relay ? relay(options.relay, { room, role: "host", key }) : null;
+    const barButton = app.querySelector('[data-ct-act="remote"]');
+    let alive = true;
+    let last = deck.state;
+    let seated = null;
+    let ticks = 0;
+    const pairing = createPairing({
+        send: message => wan?.send(message),
+        token: before?.token,
+        changed() {
+            persist();
+            // A new holder of control learns where the deck is at once; when it leaves, its dot goes too.
+            if (pairing.controller !== seated) {
+                seated = pairing.controller;
+                if (seated)
+                    sendState();
+                else
+                    overlay.hide();
+            }
+            refresh();
+            setTimeout(refresh, SETTLE + 20);
+        },
+    });
+    const persist = () => save(hostKey(), { key, token: pairing.token, clock: clock.state });
+    function state() {
+        const { mode, block, slide, page, step } = deck.state;
+        const current = blocks[block - 1];
+        const reading = clock.read(Date.now());
+        return {
+            t: "state",
+            mode: mode === "stage" ? "stage" : "overview",
+            at: `${block}.${slide}.${page}`,
+            step,
+            steps: current.slides[slide - 1].pages[page - 1].steps.length,
+            elapsed: reading.elapsed,
+            total,
+            blockElapsed: reading.blockElapsed,
+            blockMinutes: current.minutes || null,
+            ratio: Math.round((stage.clientWidth / (stage.clientHeight || 1)) * 1000) / 1000,
+        };
+    }
+    /** To the presenter window, and to the phone that holds control; nobody else is told where the deck is. */
+    function sendState() {
+        const message = state();
+        local.send(message);
+        if (pairing.controller)
+            wan?.send({ ...message, to: pairing.controller });
+    }
+    const commands = {
+        next: () => deck.next(),
+        prev: () => deck.prev(),
+        slideNext: () => deck.slideBy(1),
+        slidePrev: () => deck.slideBy(-1),
+        pageNext: () => deck.pageBy(1),
+        pagePrev: () => deck.pageBy(-1),
+        overview: () => deck.overview(),
+        open: at => at && deck.open(at),
+    };
+    /** Runs a message from a source that may control the deck. */
+    function act(message, source) {
+        if (message.t === "cmd")
+            void commands[message.c](message.at);
+        else if (message.t === "ptr")
+            overlay.point(message.x, message.y, message.on);
+        else if (message.t === "ink")
+            overlay.ink(`${source}:${message.s}`, message.pts);
+        else if (message.t === "ink-clear")
+            overlay.clear();
+    }
+    /**
+     * From the relay. The relay stamps `from` on everything a guest sends, so a frame with `from` is a guest's,
+     * whatever its `t` claims, and a frame without it is the relay's own (`hello`, `join`, `leave`).
+     */
+    function fromRelay(message) {
+        const from = message.from;
+        if (from === undefined) {
+            const id = typeof message.id === "string" && message.id.length <= 32 ? message.id : "";
+            if (message.t === "join" && id)
+                pairing.join(id);
+            else if (message.t === "leave" && id)
+                pairing.leave(id);
+            return;
+        }
+        const parsed = typeof from === "string" ? guestMessage(message) : null;
+        if (!parsed || typeof from !== "string")
+            return;
+        if (parsed.t === "resume")
+            return void pairing.resume(from, parsed.token);
+        if (!pairing.controls(from))
+            return;
+        if (parsed.t === "ping")
+            wan?.send({ t: "pong", to: from });
+        else
+            act(parsed, from);
+    }
+    /** From a window of this browser on the room's channel: trusted, no pairing. */
+    function fromLocal(message) {
+        const parsed = guestMessage(message);
+        if (!parsed || parsed.t === "resume")
+            return;
+        if (parsed.t === "ping") {
+            local.send({ t: "pong" });
+            local.send(state());
+        }
+        else
+            act(parsed, "local");
+    }
+    const panel = createPanel({
+        parent: viewport,
+        labels,
+        qr: options.qr ?? (text => import("./qr.js").then(module => module.qrSvg(text))),
+        remoteLink: wan ? pageLink("remote", room) : null,
+        notesLink: pageLink("notes"),
+        allow: id => pairing.allow(id),
+        deny: id => pairing.deny(id),
+        revoke: () => pairing.revoke(),
+        presenter: () => void window.open(pageLink("presenter", room), "contour-deck-presenter", "popup,width=1180,height=760"),
+        resetTimer() {
+            clock.reset();
+            persist();
+            sendState();
+            refresh();
+        },
+        end: () => api.end(),
+        close: () => api.toggle(false),
+    });
+    function refresh() {
+        if (!alive)
+            return;
+        const settled = Date.now() - SETTLE;
+        const requests = pairing.requests.filter(request => request.at <= settled);
+        panel.update({
+            relay: wan?.status ?? null,
+            code: wan?.code ?? 0,
+            requests,
+            paired: pairing.controller ? "online" : pairing.token ? "offline" : "no",
+            elapsed: clock.read(Date.now()).elapsed,
+        });
+        // With the panel closed, a waiting phone shows as a count on the bar button; nothing opens by itself.
+        if (requests.length) {
+            barButton?.setAttribute("data-ct-count", String(requests.length));
+            barButton?.setAttribute("aria-label", labels.waiting(requests.length));
+        }
+        else {
+            barButton?.removeAttribute("data-ct-count");
+            barButton?.removeAttribute("aria-label");
+        }
+        barButton?.setAttribute("aria-pressed", String(panel.open));
+    }
+    const stops = [
+        deck.on("change", change => {
+            const now = Date.now();
+            // The talk starts with the first move on the stage, not with opening a slide from the outline.
+            if (clock.running)
+                clock.enter(change.block - 1, now);
+            else if (last.mode === "stage" && change.mode === "stage")
+                clock.start(change.block - 1, now);
+            if (change.mode !== last.mode || change.block !== last.block || change.slide !== last.slide || change.page !== last.page)
+                overlay.clear();
+            last = { ...change };
+            persist();
+            sendState();
+            refresh();
+        }),
+        deck.on("destroy", () => api.destroy()),
+        local.subscribe(fromLocal),
+        wan?.subscribe(fromRelay),
+        wan?.watch(status => {
+            // Without the relay nobody is connected; the token stays, so the phone resumes when the room is back.
+            if (status !== "open")
+                pairing.offline();
+            refresh();
+        }),
+    ];
+    const interval = window.setInterval(() => {
+        pairing.expire();
+        if (++ticks % STATE_EVERY === 0)
+            sendState();
+        if (panel.open)
+            refresh();
+    }, 1000);
+    const api = {
+        room,
+        get open() {
+            return panel.open;
+        },
+        toggle(open = !panel.open) {
+            if (!alive)
+                return;
+            panel.show(open);
+            refresh();
+        },
+        end() {
+            if (!alive)
+                return;
+            pairing.revoke();
+            api.destroy();
+            save(hostKey(), null);
+        },
+        destroy() {
+            if (!alive)
+                return;
+            alive = false;
+            clearInterval(interval);
+            stops.forEach(stop => stop?.());
+            local.close();
+            wan?.close();
+            overlay.destroy();
+            panel.destroy();
+            for (const name of ["data-ct-count", "aria-label", "aria-pressed"])
+                barButton?.removeAttribute(name);
+            hosts.delete(deck);
+        },
+    };
+    persist();
+    sendState();
+    refresh();
+    return api;
+}

package/dist/remote/store.d.ts

@@ -0,0 +1,9 @@
+/** What survives a reload, in `sessionStorage`: one tab, one talk. Storage may be unavailable; then nothing is kept. */
+/** The host's room, token, and clock, per page. Its presence means "the remote was on in this tab". */
+export declare const hostKey: () => string;
+/** The guest's resume token for a room. */
+export declare const guestKey: (room: string) => string;
+/** The tilt calibration of this session. */
+export declare const TILT_KEY = "contour-deck:tilt";
+export declare function load(key: string): unknown;
+export declare function save(key: string, value: unknown): void;

package/dist/remote/store.js

@@ -0,0 +1,27 @@
+/** What survives a reload, in `sessionStorage`: one tab, one talk. Storage may be unavailable; then nothing is kept. */
+/** The host's room, token, and clock, per page. Its presence means "the remote was on in this tab". */
+export const hostKey = () => `contour-deck:host:${location.pathname}`;
+/** The guest's resume token for a room. */
+export const guestKey = (room) => `contour-deck:guest:${room}`;
+/** The tilt calibration of this session. */
+export const TILT_KEY = "contour-deck:tilt";
+export function load(key) {
+    try {
+        const text = sessionStorage.getItem(key);
+        return text === null ? null : JSON.parse(text);
+    }
+    catch {
+        return null;
+    }
+}
+export function save(key, value) {
+    try {
+        if (value === null)
+            sessionStorage.removeItem(key);
+        else
+            sessionStorage.setItem(key, JSON.stringify(value));
+    }
+    catch {
+        // Private mode or a full quota: the session works, it only does not survive a reload.
+    }
+}

package/dist/remote/style.d.ts

@@ -0,0 +1,2 @@
+/** Adds the stylesheet once per document. `nonce` is for a host with a `style-src` policy. */
+export declare function injectStyle(nonce?: string): void;

package/dist/remote/style.js

@@ -0,0 +1,131 @@
+/**
+ * Styles of the remote, injected with the module so a page pays for them only when the remote loads.
+ * They build on contour-deck/style.css (`.ct-app`, `.ct-btn`, `.ct-badge`, `.ct-meta`, the `--ct-*` variables)
+ * and go first in <head>, so a host's own rules win a tie.
+ */
+const css = `
+.ct-btn[data-ct-act="remote"][data-ct-count]::after { content: attr(data-ct-count); content: attr(data-ct-count) / ""; margin-left: .4em; padding: .1em .4em; background: var(--ct-accent); color: var(--ct-accent-fg); }
+
+/* ---- over the stage: laser dot and ink ---- */
+.ct-ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; color: var(--ct-accent); }
+.ct-laser { position: absolute; left: 0; top: 0; z-index: 6; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .28s; }
+.ct-laser::after { content: ""; position: absolute; width: clamp(12px, 1.6cqw, 28px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #ff2d1a; box-shadow: 0 0 0 2px rgb(255 255 255 / .85), 0 0 14px 5px rgb(255 45 26 / .55); }
+.ct-laser[data-on] { opacity: 1; }
+
+/* ---- the panel on the deck ---- */
+.ct-rp { position: absolute; top: .6rem; right: .6rem; z-index: 9; width: min(23rem, calc(100% - 1.2rem)); max-height: calc(100% - 1.2rem); overflow: auto; display: flex; flex-direction: column; gap: .7rem; padding: .8rem; background: var(--ct-bg); border: 1px solid var(--ct-border); outline: none; font-size: .86rem; }
+.ct-app .ct-rp:focus-visible { outline: none; }
+:is(.ct-rp, .ct-rmt, .ct-pr) [hidden], .ct-rp[hidden] { display: none !important; }
+.ct-rp-head { display: flex; align-items: center; gap: .5rem; }
+.ct-rp h2 { margin: 0 auto 0 0; font-size: 1rem; font-weight: 800; }
+.ct-rp h3 { margin: 0; font-size: .86rem; font-weight: 800; }
+.ct-rp p { margin: 0; color: var(--ct-muted); line-height: 1.5; }
+.ct-rp-ask { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .6rem .7rem; background: var(--ct-tint); }
+.ct-rp-ask h3 { flex-basis: 100%; }
+.ct-rp-code { font: 800 1.9rem/1 var(--ct-mono); letter-spacing: .14em; margin-right: auto; }
+.ct-rp-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
+.ct-rp-row > :last-child { margin-left: auto; }
+.ct-rp-qrs { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
+.ct-rp-qr { margin: 0; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
+.ct-rp-img { aspect-ratio: 1; background: #fff; border: 1px solid var(--ct-border); }
+.ct-rp-img svg { display: block; width: 100%; height: 100%; }
+.ct-rp-url { font: .62rem/1.35 var(--ct-mono); color: var(--ct-muted); overflow-wrap: anywhere; }
+.ct-rp-time { font: 700 1rem/1 var(--ct-mono); }
+.ct-app .ct-btn[data-ct-primary], .ct-app .ct-btn[data-ct-primary]:hover { background: var(--ct-accent); color: var(--ct-accent-fg); border-color: var(--ct-accent); }
+/* A touch screen keeps :hover on the last button tapped; there the tint would stay on it. */
+@media (hover: none) { .ct-app .ct-btn:not([data-ct-primary], [aria-pressed="true"]):hover { background: var(--ct-bg); } }
+
+/* ---- a page of the deck drawn small: the same rules as the stage, on a 1280 px wide sheet scaled down ---- */
+.ct-pv { position: relative; overflow: hidden; aspect-ratio: var(--ct-ratio, 16 / 9); background: var(--ct-bg); border: 1px solid var(--ct-border); }
+.ct-app .ct-pv > .ct-stage { inset: auto; left: 0; top: 0; width: 1280px; height: calc(1280px / var(--ct-ratio, 16 / 9)); transform: scale(var(--ct-k, .25)); transform-origin: 0 0; border: 0; z-index: 0; visibility: visible; pointer-events: none; }
+.ct-pvw { height: 100%; overflow: hidden; }
+
+/* ---- the phone ---- */
+.ct-app.ct-rmt { display: flex; flex-direction: column; grid-template-rows: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); font-size: 1rem; -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
+.ct-rmt .ct-btn { min-height: 3rem; font-size: .8rem; padding: .5rem .3rem; touch-action: manipulation; }
+.ct-rmt-top { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .55rem .8rem; background: var(--ct-panel); }
+.ct-rmt-st[data-st="granted"] { background: var(--ct-fg); color: var(--ct-bg); }
+.ct-rmt-st[data-st="offline"] { background: var(--ct-accent); color: var(--ct-accent-fg); }
+.ct-rmt-pos { font: 650 .74rem/1 var(--ct-mono); }
+.ct-rmt-time { margin-left: auto; font: 800 1.15rem/1 var(--ct-mono); }
+.ct-rmt-time[data-over], .ct-rmt-blk b[data-over] { color: var(--ct-accent); }
+.ct-rmt-blk { flex-basis: 100%; display: flex; gap: .5rem; font-size: .78rem; color: var(--ct-muted); min-width: 0; }
+.ct-rmt-blk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: auto; }
+.ct-rmt-blk b { font: 650 .78rem/1.5 var(--ct-mono); color: var(--ct-fg); white-space: nowrap; }
+.ct-rmt-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; padding: .55rem .8rem 0; }
+.ct-rmt-main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .6rem; padding: .7rem .8rem; overflow: hidden; }
+.ct-rmt-notes { flex: 1; min-height: 0; overflow: auto; font-size: 1.22rem; line-height: 1.75; -webkit-user-select: text; user-select: text; overscroll-behavior: contain; }
+.ct-rmt-notes p { margin: 0 0 .8em; }
+.ct-rmt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
+.ct-rmt-list .ct-btn { width: 100%; display: flex; align-items: baseline; gap: .6rem; text-align: left; font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0; padding: .7rem .8rem; white-space: normal; }
+.ct-rmt-list .ct-btn[aria-current="true"] { background: var(--ct-tint); }
+.ct-rmt-list .ct-btn > :nth-child(3) { margin-left: auto; }
+.ct-rmt-padbox { flex: 1; min-height: 0; display: grid; place-items: end center; container-type: size; }
+.ct-rmt-pad { position: relative; width: min(100cqw, 100cqh * var(--ct-ratio, 16 / 9)); touch-action: none; cursor: crosshair; }
+.ct-rmt-pad .ct-ink { z-index: 2; }
+.ct-rmt-dot { position: absolute; left: 0; top: 0; z-index: 3; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: #ff2d1a; box-shadow: 0 0 0 2px #fff; pointer-events: none; opacity: 0; }
+.ct-rmt-dot[data-on] { opacity: 1; }
+.ct-rmt-dot[data-target] { opacity: 1; background: none; box-shadow: 0 0 0 3px var(--ct-accent), 0 0 0 6px var(--ct-bg); width: 30px; height: 30px; margin: -15px; }
+.ct-rmt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
+.ct-rmt-tools p { margin: 0; flex: 1 1 100%; font-size: .82rem; line-height: 1.5; color: var(--ct-muted); }
+.ct-rmt-tools .ct-btn { flex: 1; }
+.ct-rmt-tools .ct-rmt-hold { flex: 1 1 100%; min-height: 5rem; font-size: 1.1rem; }
+.ct-rmt .ct-rmt-hold[aria-pressed="true"] { background: var(--ct-accent); color: var(--ct-accent-fg); border-color: var(--ct-accent); }
+.ct-rmt-next { display: flex; align-items: baseline; gap: .5rem; padding: .5rem .8rem; background: var(--ct-panel); font-size: .88rem; min-width: 0; }
+.ct-rmt-next span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ct-rmt-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; padding: .55rem .8rem; }
+.ct-rmt .ct-rmt-go { margin: 0 .8rem .8rem; min-height: 5.4rem; font-size: 1.5rem; letter-spacing: .12em; }
+.ct-rmt-card { margin: auto; padding: 1.5rem 1.2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; max-width: 24rem; }
+.ct-rmt-card p { margin: 0; line-height: 1.6; }
+.ct-rmt-card .ct-btn { min-width: 12rem; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
+.ct-rmt-code { font: 800 4.6rem/1 var(--ct-mono); letter-spacing: .12em; padding-left: .12em; }
+.ct-rmt:not([data-ct-phase="granted"]) > :not(.ct-rmt-card), .ct-rmt[data-ct-phase="granted"] > .ct-rmt-card { display: none; }
+.ct-rmt[data-ct-tab="notes"] :is(.ct-rmt-padbox, .ct-rmt-tools), .ct-rmt:not([data-ct-tab="notes"]) .ct-rmt-notes { display: none; }
+.ct-rmt-tools > [data-for]:not([data-show]) { display: none; }
+/* A phone on its side: the page and the tools on the left, the step buttons on the right. */
+@media (orientation: landscape) and (max-height: 520px) {
+  .ct-app.ct-rmt[data-ct-phase="granted"] { display: grid; grid-template: "top top" auto "tabs next" auto "main nav" minmax(0, 1fr) "main go" auto / minmax(0, 3fr) minmax(0, 2fr); }
+  .ct-rmt-top { grid-area: top; padding-block: .35rem; }
+  .ct-rmt-blk { flex-basis: auto; flex: 1; order: 1; }
+  .ct-rmt-time { order: 2; }
+  .ct-rmt-tabs { grid-area: tabs; }
+  .ct-rmt-main { grid-area: main; flex-direction: row; }
+  .ct-rmt-tools { flex: 0 0 38%; align-content: start; }
+  .ct-rmt-next { grid-area: next; margin: .55rem .8rem 0 0; }
+  .ct-rmt-nav { grid-area: nav; grid-template-columns: 1fr 1fr; padding-left: 0; align-content: start; }
+  .ct-rmt .ct-rmt-go { grid-area: go; margin-left: 0; min-height: 4.2rem; }
+  .ct-rmt .ct-rmt-tools .ct-rmt-hold { min-height: 3.6rem; }
+}
+
+/* ---- the presenter window ---- */
+.ct-app.ct-pr { display: grid; grid-template: "top top" auto "now notes" minmax(0, 3fr) "next notes" minmax(0, 2fr) / minmax(0, 3fr) minmax(0, 2fr); gap: .8rem; padding: .8rem; }
+.ct-pr-top { grid-area: top; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
+.ct-pr-top .ct-rmt-time { margin-left: auto; font-size: 1.8rem; }
+.ct-pr-top .ct-rmt-blk { flex-basis: auto; align-items: baseline; }
+.ct-pr-cell { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
+.ct-pr-cell > h2 { margin: 0; display: flex; align-items: baseline; gap: .6rem; font: 650 .7rem/1 var(--ct-mono); letter-spacing: .12em; color: var(--ct-muted); }
+.ct-pr-cell > h2 > span { letter-spacing: 0; font: 700 .9rem/1.2 inherit; font-family: inherit; color: var(--ct-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ct-pr-box { flex: 1; min-height: 0; display: grid; place-items: center start; container-type: size; }
+.ct-pr-box .ct-pv { width: min(100cqw, 100cqh * var(--ct-ratio, 16 / 9)); }
+.ct-pr-notes { grid-area: notes; overflow: auto; padding: .9rem 1rem; border: 1px solid var(--ct-border); font-size: 1.35rem; line-height: 1.75; }
+.ct-pr-notes p { margin: 0 0 .8em; }
+.ct-pr[data-ct-wait] :is(.ct-pr-cell, .ct-pr-notes) { opacity: .35; }
+@media (max-width: 760px) {
+  .ct-app.ct-pr { grid-template: "top" auto "now" minmax(0, 2fr) "notes" minmax(0, 3fr) / minmax(0, 1fr); }
+  .ct-pr-cell[data-next] { display: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ct-laser { transition: none; }
+}
+`;
+/** Adds the stylesheet once per document. `nonce` is for a host with a `style-src` policy. */
+export function injectStyle(nonce) {
+    if (document.querySelector("style[data-ct-remote]"))
+        return;
+    const style = document.createElement("style");
+    style.setAttribute("data-ct-remote", "");
+    if (nonce)
+        style.nonce = nonce;
+    style.textContent = css;
+    document.head.prepend(style);
+}

package/dist/remote/tilt.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Pointing with the phone: from device orientation to a point on the screen. Pure math, no sensors:
+ * the phone is held like a laser pointer, its top edge towards the screen, and five aimed samples
+ * (centre and four corners) calibrate where the screen is in the room.
+ */
+/** A `deviceorientation` reading, in degrees. */
+export interface TiltSample {
+    alpha: number;
+    beta: number;
+    gamma: number;
+}
+/** Where the phone points, in radians: `yaw` grows to the left (counter-clockwise from above), `pitch` grows upwards. */
+export interface Aim {
+    yaw: number;
+    pitch: number;
+}
+/**
+ * The screen as seen from where the presenter stands: the aim at its centre, and the signed angle
+ * from the centre to each edge. Left and right have opposite signs, and so have top and bottom.
+ */
+export interface Calibration extends Aim {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export type CalibrationTarget = "centre" | "topLeft" | "topRight" | "bottomRight" | "bottomLeft";
+/** The order the guided calibration asks for. */
+export declare const CALIBRATION_TARGETS: readonly CalibrationTarget[];
+/** An angle difference brought into (-π, π], so 358° to 2° is +4° and not -356°. */
+export declare function wrap(angle: number): number;
+/**
+ * The direction the top of the screen points at, from a sensor reading.
+ * The reading becomes the rotation matrix R = Rz(alpha)·Rx(beta)·Ry(gamma) of the W3C specification, and
+ * the pointing axis is the edge at the top of the screen as it is turned now (`screenAngle`, the value of
+ * `screen.orientation.angle`): the device's +Y in portrait, +X after a quarter turn. Reading the axis in
+ * the room, and not the three angles one by one, keeps the aim independent of how the wrist is rolled.
+ */
+export declare function aimOf({ alpha, beta, gamma }: TiltSample, screenAngle?: number): Aim;
+/** The average of a few readings taken close together (the hand shakes when the thumb taps), across the yaw seam. */
+export declare function meanAim(aims: readonly Aim[]): Aim;
+/**
+ * The calibration from the five aimed samples, or `null` when they cannot be a screen:
+ * an edge too close to the centre, or both sides of the centre on the same side.
+ */
+export declare function calibrate(aims: Record<CalibrationTarget, Aim>): Calibration | null;
+/** True for a calibration that maps to a screen; also the check for one read back from storage. */
+export declare function isCalibration(value: unknown): value is Calibration;
+/** A calibration for a screen of ordinary size seen from the middle of a room: ±20° wide, ±12° high around `centre`. */
+export declare function defaultCalibration(centre: Aim): Calibration;
+/** The aimed point in screen coordinates, origin at the top left; outside [0, 1] when the aim is past an edge. */
+export declare function project(calibration: Calibration, aim: Aim): Point;
+/** The same screen size, with the centre where the phone points now: the answer to drift, or to a step sideways. */
+export declare function recentre(calibration: Calibration, aim: Aim): Calibration;
+/**
+ * Drift correction while pointing: an aim past an edge drags the calibration along, so the edge stays
+ * under the aim and the pointer answers at once when the hand comes back, as a mouse does at the screen edge.
+ */
+export declare function follow(calibration: Calibration, aim: Aim): Calibration;
+/**
+ * The 1€ filter (Casiez, Roussel, Vogel 2012): a low-pass whose cutoff rises with speed, so a still hand
+ * gives a still pointer and a fast sweep is not held back. `t` is in seconds.
+ */
+export declare function oneEuro(minCutoff?: number, beta?: number, derivativeCutoff?: number): (value: number, t: number) => number;
+export interface Pointer {
+    /** The calibration in force; `follow` moves it while the phone points past an edge. */
+    calibration: Calibration;
+    /** The smoothed point of an aim, clamped to the screen. `t` is in seconds. */
+    update(aim: Aim, t: number): Point;
+    /** Puts the centre where the phone points and forgets the filter's history. */
+    recentre(aim: Aim): void;
+}
+/** Calibration, drift correction, and smoothing in one: feed it aims, read points. */
+export declare function createPointer(calibration: Calibration): Pointer;