contour-deck 0.1.0 → 0.2.1

package/dist/remote/phone.js

@@ -0,0 +1,408 @@
+/**
+ * The phone remote, `?view=remote&room=…`: the same page as the deck, showing its own notes and a small
+ * copy of the current page, and sending commands, the pointer, ink, and tilt to the deck through the relay.
+ */
+import { h } from "../core/dom.js";
+import { defaultLabels } from "../core/labels.js";
+import { notesHtml } from "../core/notes.js";
+import { createGuest } from "./guest.js";
+import { createInk } from "./ink.js";
+import { defaultRemoteLabels } from "./labels.js";
+import { pageLink } from "./links.js";
+import { isRoom } from "./protocol.js";
+import { createSensor } from "./sensor.js";
+import { load, save, TILT_KEY } from "./store.js";
+import { injectStyle } from "./style.js";
+import { calibrate, CALIBRATION_TARGETS, createPointer, defaultCalibration, isCalibration, meanAim } from "./tilt.js";
+import { relay } from "./transport.js";
+import { createPreview, createTimers, keepAwake, pageAt, positionLabel, readOutline, statePos, upNext } from "./view.js";
+/** Where each calibration target sits on the screen. */
+const TARGET_AT = {
+    centre: { x: 0.5, y: 0.5 },
+    topLeft: { x: 0, y: 0 },
+    topRight: { x: 1, y: 0 },
+    bottomRight: { x: 1, y: 1 },
+    bottomLeft: { x: 0, y: 1 },
+};
+/** Readings averaged for one calibration sample: about a tenth of a second. */
+const STEADY = 6;
+/** Ink points closer than this to the last one are not sent. */
+const INK_STEP = 0.004;
+export function remoteView(root, options = {}) {
+    injectStyle(options.nonce);
+    const labels = { ...defaultRemoteLabels, ...options.labels };
+    const outline = readOutline(root, options.skip);
+    const room = options.room ?? new URLSearchParams(location.search).get("room");
+    const abort = new AbortController();
+    const { signal } = abort;
+    /* ---- shell ---- */
+    const app = h("div", "ct-app ct-rmt", "", { "data-ct-mode": "stage", "data-ct-phase": "connecting", "data-ct-tab": "notes" });
+    const button = (action, text, primary = false) => {
+        const el = h("button", "ct-btn", text, { "data-ct-do": action });
+        if (primary)
+            el.setAttribute("data-ct-primary", "");
+        return el;
+    };
+    // Before control: one card with the state of the pairing, and the way to the notes that needs no connection.
+    const card = app.appendChild(h("div", "ct-rmt-card"));
+    const cardBadge = card.appendChild(h("span", "ct-badge"));
+    const cardCode = card.appendChild(h("b", "ct-rmt-code"));
+    const cardText = card.appendChild(h("p", "", "", { "aria-live": "polite" }));
+    const retry = card.appendChild(button("retry", labels.retry, true));
+    card.append(h("a", "ct-btn", labels.notesOnly, { href: pageLink("notes") }));
+    const top = app.appendChild(h("header", "ct-rmt-top"));
+    const status = h("span", "ct-badge ct-rmt-st");
+    const position = h("span", "ct-rmt-pos");
+    const timers = createTimers(labels, outline);
+    top.append(status, position, timers.time, timers.block);
+    const tabs = app.appendChild(h("nav", "ct-rmt-tabs"));
+    const tabNames = [
+        ["notes", labels.tabNotes],
+        ["pointer", labels.tabPointer],
+        ["ink", labels.tabInk],
+        ["tilt", labels.tabTilt],
+    ];
+    const tabButtons = tabNames.map(([name, text]) => tabs.appendChild(button(`tab:${name}`, text)));
+    const main = app.appendChild(h("main", "ct-rmt-main"));
+    const notes = main.appendChild(h("div", "ct-rmt-notes"));
+    const padBox = main.appendChild(h("div", "ct-rmt-padbox"));
+    const pad = padBox.appendChild(h("div", "ct-rmt-pad"));
+    const preview = createPreview(root);
+    const canvas = h("canvas", "ct-ink");
+    const dot = h("i", "ct-rmt-dot");
+    pad.append(preview.el, canvas, dot);
+    const ink = createInk(canvas);
+    const tools = main.appendChild(h("div", "ct-rmt-tools"));
+    const hint = tools.appendChild(h("p", "", "", { "aria-live": "polite" }));
+    const hold = button("hold", labels.tiltHold);
+    hold.classList.add("ct-rmt-hold");
+    const toolButtons = [
+        ["ink", button("clear", labels.clearInk)],
+        ["tilt-off", button("tilt", labels.tiltEnable, true)],
+        ["tilt-on", hold],
+        ["tilt-on", button("recentre", labels.tiltRecentre)],
+        ["tilt-on", button("calibrate", labels.tiltCalibrate)],
+        ["tilt-cal", button("aimed", labels.tiltAimed, true)],
+        ["tilt-cal", button("cancel", labels.tiltCancel)],
+    ];
+    for (const [when, el] of toolButtons) {
+        el.dataset.for = when;
+        tools.append(el);
+    }
+    const next = app.appendChild(h("div", "ct-rmt-next"));
+    const nextKind = next.appendChild(h("span", "ct-meta", labels.upNext));
+    const nextText = next.appendChild(h("span"));
+    const nav = app.appendChild(h("nav", "ct-rmt-nav"));
+    nav.append(button("cmd:prev", defaultLabels.prev), button("cmd:slidePrev", labels.slidePrev), button("cmd:slideNext", labels.slideNext), button("cmd:overview", defaultLabels.overview));
+    const go = app.appendChild(button("cmd:next", defaultLabels.next, true));
+    go.classList.add("ct-rmt-go");
+    root.after(app);
+    document.documentElement.setAttribute("data-ct-open", "");
+    keepAwake(signal);
+    /* ---- connection ---- */
+    const relayBase = options.relay;
+    const guest = relayBase && isRoom(room) ? createGuest({ room, open: () => relay(relayBase, { room, role: "guest" }) }) : null;
+    let tab = "notes";
+    let drawnPage = "";
+    let tilt = "off";
+    let pointer = null;
+    let calibrated = false;
+    let calibrating = null;
+    let pointing = false;
+    let tiltNote = "";
+    let lastPoint = { x: 0.5, y: 0.5 };
+    const recent = [];
+    const kept = load(TILT_KEY);
+    if (isCalibration(kept)) {
+        pointer = createPointer(kept);
+        calibrated = true;
+    }
+    function showDot(point, on, target = false) {
+        dot.style.transform = `translate(${point.x * pad.clientWidth}px,${point.y * pad.clientHeight}px)`;
+        dot.toggleAttribute("data-on", on);
+        dot.toggleAttribute("data-target", target);
+    }
+    /** The laser on the deck and its twin on the pad. */
+    function point(at, on) {
+        lastPoint = at;
+        guest?.point(at.x, at.y, on);
+        showDot(at, on);
+    }
+    /* ---- drawing what the guest knows ---- */
+    function drawCard() {
+        if (!guest) {
+            cardBadge.textContent = labels.title;
+            cardText.textContent = labels.badLink;
+            cardCode.hidden = retry.hidden = true;
+            return "denied";
+        }
+        const { phase, closeCode } = guest;
+        cardCode.hidden = phase !== "pairing";
+        cardCode.textContent = guest.code;
+        // A full room is not retried by itself: each try counts against the relay's limit for this network.
+        retry.hidden = phase !== "denied" && phase !== "revoked" && !(phase === "offline" && closeCode === 4029);
+        cardBadge.textContent = phase === "pairing" ? labels.code : phase === "offline" ? labels.offline : labels.title;
+        cardText.textContent =
+            phase === "pairing"
+                ? labels.pairHint
+                : phase === "denied"
+                    ? labels.denied
+                    : phase === "revoked"
+                        ? labels.revoked
+                        : phase === "offline" && (closeCode === 4004 || closeCode === 4000)
+                            ? labels.noHost
+                            : phase === "offline" && closeCode === 4029
+                                ? labels.full
+                                : labels.connecting;
+        return phase;
+    }
+    function drawTools() {
+        const state = guest?.state;
+        const shown = state?.mode === "overview" ? "notes" : tab;
+        app.dataset.ctTab = shown;
+        tabButtons.forEach((el, i) => el.setAttribute("aria-pressed", String(tabNames[i][0] === shown)));
+        const mode = shown !== "tilt" ? shown : calibrating ? "tilt-cal" : tilt === "on" ? "tilt-on" : "tilt-off";
+        for (const [when, el] of toolButtons)
+            el.toggleAttribute("data-show", when === mode);
+        hold.setAttribute("aria-pressed", String(pointing));
+        if (shown === "pointer")
+            hint.textContent = labels.pointerHint;
+        else if (shown === "ink")
+            hint.textContent = labels.inkHint;
+        else if (shown !== "tilt")
+            hint.textContent = "";
+        else if (calibrating) {
+            const target = CALIBRATION_TARGETS[calibrating.index];
+            hint.textContent = labels.tiltAim(labels.tiltTargets[target], calibrating.index + 1, CALIBRATION_TARGETS.length);
+        }
+        else if (tilt === "denied")
+            hint.textContent = labels.tiltDenied;
+        else if (tilt === "unsupported")
+            hint.textContent = labels.tiltUnsupported;
+        else
+            hint.textContent = tiltNote || (tilt === "on" ? (calibrated ? labels.tiltCalibrated : labels.tiltUncalibrated) : "");
+    }
+    function draw() {
+        app.dataset.ctPhase = drawCard();
+        const state = guest?.state;
+        if (!guest || guest.phase !== "granted" || !state) {
+            status.textContent = labels.connecting;
+            return;
+        }
+        status.textContent = labels.connected;
+        status.dataset.st = "granted";
+        timers.draw(state, guest.stateAt);
+        if (state.ratio)
+            app.style.setProperty("--ct-ratio", String(state.ratio));
+        const pos = statePos(outline, state);
+        position.textContent = !pos || state.mode === "overview" ? labels.inOverview : positionLabel(outline, pos, state);
+        const key = `${state.mode} ${state.at}`;
+        if (key !== drawnPage) {
+            drawnPage = key;
+            // A new page: its notes from the top, and the ink of the old one gone, as on the deck.
+            ink.clear();
+            notes.scrollTop = 0;
+            if (state.mode === "overview") {
+                const list = h("ul", "ct-rmt-list");
+                outline.blocks.forEach((block, b) => {
+                    const open = list.appendChild(h("li")).appendChild(button(`open:${b + 1}`, ""));
+                    if (pos?.b === b)
+                        open.setAttribute("aria-current", "true");
+                    open.append(h("span", "ct-meta", block.short), h("span", "", block.title));
+                    if (block.minutes)
+                        open.append(h("span", "ct-meta", defaultLabels.minutes(block.minutes)));
+                });
+                notes.replaceChildren(list);
+            }
+            else if (pos) {
+                notes.innerHTML = notesHtml(pageAt(outline, pos));
+                if (!notes.childNodes.length)
+                    notes.append(h("p", "", defaultLabels.noNotes));
+            }
+        }
+        if (pos) {
+            preview.show(pageAt(outline, pos), state.step);
+            const up = upNext(outline, pos, state.step);
+            const kinds = { step: labels.nextStep, page: labels.nextPage, slide: labels.nextSlide, end: labels.theEnd };
+            // On the outline the step button opens the slide the deck is on.
+            const outside = state.mode === "overview";
+            nextKind.textContent = outside ? labels.upNext : `${labels.upNext}｜${kinds[up.kind]}`;
+            nextText.textContent = outside ? outline.blocks[pos.b].slides[pos.s].title : up.text;
+        }
+        drawTools();
+    }
+    /* ---- pad: pointer and ink ---- */
+    let finger = -1;
+    let stroke = null;
+    let strokeKey = "";
+    let strokes = 0;
+    let inked = { x: -1, y: -1 };
+    const onPad = (event) => {
+        const box = pad.getBoundingClientRect();
+        const unit = (value) => Math.min(1, Math.max(0, value));
+        return { x: unit((event.clientX - box.left) / box.width), y: unit((event.clientY - box.top) / box.height) };
+    };
+    function inkTo(at) {
+        if (Math.hypot(at.x - inked.x, at.y - inked.y) < INK_STEP)
+            return;
+        inked = at;
+        stroke?.add(at.x, at.y);
+        ink.add(strokeKey, [at.x, at.y]);
+    }
+    pad.addEventListener("pointerdown", event => {
+        if (finger !== -1 || (tab !== "pointer" && tab !== "ink") || guest?.phase !== "granted")
+            return;
+        finger = event.pointerId;
+        pad.setPointerCapture(finger);
+        const at = onPad(event);
+        if (tab === "pointer")
+            return point(at, true);
+        stroke = guest.stroke();
+        strokeKey = `own:${++strokes}`;
+        inked = { x: -1, y: -1 };
+        inkTo(at);
+    }, { signal });
+    pad.addEventListener("pointermove", event => {
+        if (event.pointerId !== finger)
+            return;
+        if (!stroke)
+            return point(onPad(event), true);
+        for (const sample of event.getCoalescedEvents?.() ?? [event])
+            inkTo(onPad(sample));
+    }, { signal });
+    const lift = (event) => {
+        if (event.pointerId !== finger)
+            return;
+        finger = -1;
+        if (stroke)
+            stroke.end();
+        else
+            point(lastPoint, false);
+        stroke = null;
+    };
+    pad.addEventListener("pointerup", lift, { signal });
+    pad.addEventListener("pointercancel", lift, { signal });
+    const padSize = new ResizeObserver(() => ink.resize());
+    padSize.observe(pad);
+    /* ---- tilt ---- */
+    const sensor = createSensor((aim, t) => {
+        recent.push(aim);
+        if (recent.length > STEADY)
+            recent.shift();
+        if (!pointing || calibrating)
+            return;
+        // Without a calibration, the direction of the first press is the middle of a screen of ordinary size.
+        pointer ??= createPointer(defaultCalibration(aim));
+        point(pointer.update(aim, t), true);
+    });
+    function stopPointing() {
+        if (!pointing)
+            return;
+        pointing = false;
+        point(lastPoint, false);
+        // Drift correction moved the calibration while pointing; a measured one is worth keeping.
+        if (calibrated && pointer)
+            save(TILT_KEY, pointer.calibration);
+        drawTools();
+    }
+    hold.addEventListener("pointerdown", event => {
+        if (tilt !== "on")
+            return;
+        hold.setPointerCapture(event.pointerId);
+        pointing = true;
+        tiltNote = "";
+        drawTools();
+    }, { signal });
+    for (const type of ["pointerup", "pointercancel", "lostpointercapture"])
+        hold.addEventListener(type, stopPointing, { signal });
+    function aimAtTarget() {
+        if (!calibrating)
+            return;
+        const at = TARGET_AT[CALIBRATION_TARGETS[calibrating.index]];
+        // The deck shows the dot on the spot to aim at; the pad marks the same spot.
+        guest?.point(at.x, at.y, true);
+        showDot(at, false, true);
+        drawTools();
+    }
+    function endCalibration(note) {
+        calibrating = null;
+        tiltNote = note;
+        point(TARGET_AT.centre, false);
+        drawTools();
+    }
+    const actions = {
+        cmd(c) {
+            guest?.command(c);
+            navigator.vibrate?.(8);
+        },
+        open: at => guest?.command("open", at),
+        tab(name) {
+            if (tab === "tilt" && name !== "tilt") {
+                stopPointing();
+                if (calibrating)
+                    endCalibration("");
+            }
+            tab = name;
+            point(lastPoint, false);
+            drawTools();
+            ink.resize();
+        },
+        clear() {
+            ink.clear();
+            guest?.clearInk();
+        },
+        retry: () => guest?.retry(),
+        async tilt() {
+            const result = await sensor.start();
+            tilt = result === "ok" ? "on" : result;
+            drawTools();
+        },
+        recentre() {
+            if (!pointer || !recent.length)
+                return;
+            pointer.recentre(meanAim(recent));
+            if (calibrated)
+                save(TILT_KEY, pointer.calibration);
+        },
+        calibrate() {
+            stopPointing();
+            calibrating = { index: 0, aims: {} };
+            aimAtTarget();
+        },
+        aimed() {
+            if (!calibrating || !recent.length)
+                return;
+            calibrating.aims[CALIBRATION_TARGETS[calibrating.index]] = meanAim(recent);
+            if (++calibrating.index < CALIBRATION_TARGETS.length)
+                return aimAtTarget();
+            const result = calibrate(calibrating.aims);
+            if (result) {
+                pointer = createPointer(result);
+                calibrated = true;
+                save(TILT_KEY, result);
+            }
+            endCalibration(result ? labels.tiltCalibrated : labels.tiltBad);
+        },
+        cancel: () => endCalibration(""),
+    };
+    app.addEventListener("click", event => {
+        const [action, value = ""] = (event.target.closest("[data-ct-do]")?.dataset.ctDo ?? "").split(":");
+        void actions[action]?.(value);
+    }, { signal });
+    const stop = guest?.subscribe(draw);
+    const ticking = window.setInterval(() => guest && timers.draw(guest.state, guest.stateAt), 500);
+    draw();
+    return {
+        destroy() {
+            abort.abort();
+            stop?.();
+            clearInterval(ticking);
+            sensor.stop();
+            padSize.disconnect();
+            guest?.close();
+            preview.destroy();
+            app.remove();
+            document.documentElement.removeAttribute("data-ct-open");
+        },
+    };
+}

package/dist/remote/presenter.d.ts

@@ -0,0 +1,2 @@
+import type { RemoteViewOptions, RemoteView } from "./phone.js";
+export declare function presenterView(root: HTMLElement, options?: RemoteViewOptions): RemoteView;

package/dist/remote/presenter.js

@@ -0,0 +1,126 @@
+/**
+ * The presenter window, `?view=presenter&room=…`: a second window of the same browser that follows the deck
+ * over BroadcastChannel and shows the current page, what comes next, the notes, and the clocks.
+ */
+import { h } from "../core/dom.js";
+import { defaultLabels } from "../core/labels.js";
+import { notesHtml } from "../core/notes.js";
+import { createGuest } from "./guest.js";
+import { defaultRemoteLabels } from "./labels.js";
+import { injectStyle } from "./style.js";
+import { broadcast } from "./transport.js";
+import { createPreview, createTimers, keepAwake, pageAt, positionLabel, readOutline, statePos, upNext } from "./view.js";
+/** The keys of the deck, as commands. */
+const KEYS = {
+    " ": "next",
+    Enter: "next",
+    PageDown: "next",
+    PageUp: "prev",
+    Backspace: "prev",
+    ArrowRight: "slideNext",
+    ArrowLeft: "slidePrev",
+    ArrowDown: "pageNext",
+    ArrowUp: "pagePrev",
+    Escape: "overview",
+    o: "overview",
+};
+export function presenterView(root, options = {}) {
+    injectStyle(options.nonce);
+    const labels = { ...defaultRemoteLabels, ...options.labels };
+    const outline = readOutline(root, options.skip);
+    const room = options.room ?? new URLSearchParams(location.search).get("room") ?? "";
+    const abort = new AbortController();
+    const { signal } = abort;
+    const app = h("div", "ct-app ct-pr", "", { "data-ct-mode": "stage", "data-ct-wait": "" });
+    const top = app.appendChild(h("header", "ct-pr-top"));
+    const position = h("span", "ct-rmt-pos", labels.noDeck);
+    const timers = createTimers(labels, outline);
+    const button = (command, text) => h("button", "ct-btn", text, { "data-ct-do": command });
+    top.append(button("prev", defaultLabels.prev), button("next", defaultLabels.next), button("overview", defaultLabels.overview), position, timers.block, timers.time);
+    function cell(title, next = false) {
+        const el = app.appendChild(h("section", "ct-pr-cell"));
+        if (next)
+            el.setAttribute("data-next", "");
+        const head = el.appendChild(h("h2", "", title));
+        const caption = head.appendChild(h("span"));
+        const preview = createPreview(root);
+        el.appendChild(h("div", "ct-pr-box")).append(preview.el);
+        return { preview, caption };
+    }
+    const now = cell(labels.now);
+    const coming = cell(labels.upNext, true);
+    const notes = app.appendChild(h("div", "ct-pr-notes"));
+    root.after(app);
+    document.documentElement.setAttribute("data-ct-open", "");
+    keepAwake(signal);
+    const guest = createGuest({ room, open: () => broadcast(room), trusted: true });
+    let drawnPage = "";
+    function draw() {
+        const { state } = guest;
+        app.toggleAttribute("data-ct-wait", !state);
+        if (!state)
+            return;
+        timers.draw(state, guest.stateAt);
+        app.style.setProperty("--ct-ratio", String(state.ratio ?? 16 / 9));
+        const pos = statePos(outline, state);
+        if (!pos)
+            return;
+        const overview = state.mode === "overview";
+        position.textContent = (overview ? `${labels.inOverview} · ` : "") + positionLabel(outline, pos, state);
+        const page = pageAt(outline, pos);
+        now.preview.show(page, state.step);
+        now.caption.textContent = outline.blocks[pos.b].slides[pos.s].title;
+        const up = upNext(outline, pos, state.step);
+        const kinds = { step: labels.nextStep, page: labels.nextPage, slide: labels.nextSlide, end: labels.theEnd };
+        coming.preview.show(up.kind === "end" ? null : pageAt(outline, up.pos), up.step);
+        coming.caption.textContent = up.kind === "end" ? kinds.end : `${kinds[up.kind]}｜${up.text}`;
+        if (state.at === drawnPage)
+            return;
+        drawnPage = state.at;
+        notes.scrollTop = 0;
+        notes.innerHTML = notesHtml(page);
+        if (!notes.childNodes.length)
+            notes.append(h("p", "", defaultLabels.noNotes));
+    }
+    app.addEventListener("click", event => {
+        const command = event.target.closest("[data-ct-do]")?.dataset.ctDo;
+        if (command)
+            guest.command(command);
+    }, { signal });
+    document.addEventListener("keydown", event => {
+        if (event.metaKey || event.ctrlKey || event.altKey)
+            return;
+        const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+        const onButton = !!event.target.closest?.("button,a");
+        if (onButton && (key === " " || key === "Enter"))
+            return;
+        const command = key === " " && event.shiftKey ? "prev" : KEYS[key];
+        if (!command)
+            return;
+        event.preventDefault();
+        guest.command(command);
+    }, { signal });
+    // The mouse over the current page is the laser pointer on the deck.
+    const sheet = now.preview.el;
+    const aim = (event, on) => {
+        const box = sheet.getBoundingClientRect();
+        guest.point((event.clientX - box.left) / box.width, (event.clientY - box.top) / box.height, on);
+    };
+    sheet.addEventListener("pointermove", event => aim(event, true), { signal });
+    sheet.addEventListener("pointerleave", event => aim(event, false), { signal });
+    const stop = guest.subscribe(draw);
+    const ticking = window.setInterval(() => timers.draw(guest.state, guest.stateAt), 500);
+    draw();
+    return {
+        destroy() {
+            abort.abort();
+            stop();
+            clearInterval(ticking);
+            guest.close();
+            now.preview.destroy();
+            coming.preview.destroy();
+            app.remove();
+            document.documentElement.removeAttribute("data-ct-open");
+        },
+    };
+}

package/dist/remote/protocol.d.ts

@@ -0,0 +1,106 @@
+/** The wire messages of docs/PROTOCOL.md, and the checks every incoming frame passes before it is used. */
+/** Frames above this size are dropped by the relay (it closes the socket with 1009). */
+export declare const MAX_FRAME = 2048;
+/** An `ink` message carries at most this many points. */
+export declare const MAX_POINTS = 64;
+export type Command = "next" | "prev" | "slideNext" | "slidePrev" | "pageNext" | "pagePrev" | "overview" | "open";
+/** Where the deck is and how the time stands; sent to the granted guest and to the presenter window. */
+export interface StateMessage {
+    t: "state";
+    mode: "overview" | "stage";
+    /** `b.s.p`, 1-based. */
+    at: string;
+    step: number;
+    steps: number;
+    /** Seconds since the talk started; 0 while the clock has not started. */
+    elapsed: number;
+    /** Planned seconds of the whole talk, or `null` when no block has minutes. */
+    total: number | null;
+    blockElapsed: number;
+    blockMinutes: number | null;
+    /** Width over height of the stage, so a phone draws on a pad of the same shape. Not in protocol v1; optional. */
+    ratio?: number;
+}
+/** What the relay itself sends. */
+export type RelayMessage = {
+    t: "hello";
+    id: string;
+    role: "host" | "guest";
+} | {
+    t: "join";
+    id: string;
+} | {
+    t: "leave";
+    id: string;
+};
+/** Host to guest. `to` addresses one guest; the relay strips nothing, the guest ignores it. */
+export type HostMessage = {
+    t: "pair";
+    to: string;
+    code: string;
+} | {
+    t: "grant";
+    to: string;
+    token: string;
+} | {
+    t: "deny";
+    to: string;
+} | {
+    t: "revoke";
+    to: string;
+} | {
+    t: "pong";
+    to?: string;
+} | (StateMessage & {
+    to?: string;
+});
+/** Guest to host. The relay sets `from`; over BroadcastChannel there is none. */
+export type GuestMessage = {
+    t: "resume";
+    token: string;
+} | {
+    t: "cmd";
+    c: Command;
+    at?: string;
+} | {
+    t: "ptr";
+    x: number;
+    y: number;
+    on: boolean;
+} | {
+    t: "ink";
+    s: number;
+    pts: number[];
+    end?: boolean;
+} | {
+    t: "ink-clear";
+} | {
+    t: "ping";
+};
+export type Message = RelayMessage | HostMessage | GuestMessage;
+type Fields = Record<string, unknown>;
+/** A frame as an object with a string `t`, or `null`. */
+export declare function decode(frame: unknown): (Fields & {
+    t: string;
+}) | null;
+/**
+ * A message a guest may send, with every field checked and every coordinate clamped to [0, 1];
+ * `null` for anything else. This is the only door for input from outside the host's own page.
+ */
+export declare function guestMessage(value: Fields): GuestMessage | null;
+/** A `state` message as the guest reads it; a field of the wrong type takes its neutral value. */
+export declare function stateMessage(value: Fields): StateMessage | null;
+/**
+ * A host key: 26 characters of Crockford base32 from `crypto.getRandomValues` (the first carries 3 bits, 128 in all).
+ * It stays in the host's tab; the relay gives the host seat of a room only to the key whose hash is the room.
+ */
+export declare const newKey: () => string;
+/** A room name, and the shape of a host key too. */
+export declare const isRoom: (value: unknown) => value is string;
+/** The room of a host key: the first 26 Crockford base32 characters of SHA-256 of the key (docs/PROTOCOL.md). */
+export declare function roomOf(key: string): Promise<string>;
+/** A resume token: 22 characters of base64url, 132 random bits. */
+export declare const newToken: () => string;
+/** A fresh 4-digit pairing code, without modulo bias. */
+export declare function newCode(): string;
+export {};