contour-deck 0.0.0-stage → 0.2.0

package/dist/remote/pairing.js

@@ -0,0 +1,97 @@
+/**
+ * Who may control the deck: the host's side of the pairing in docs/PROTOCOL.md, as a state machine without DOM.
+ * A guest gets a 4-digit code and waits; the presenter allows or denies it; one guest at a time holds control,
+ * and its token lets it come back after a reconnect without asking again.
+ */
+import { newCode, newToken } from "./protocol.js";
+/** A request the presenter has not answered after this long is denied. */
+export const REQUEST_TTL = 120_000;
+export function createPairing({ send, changed, token: restored = null, now = Date.now }) {
+    let requests = [];
+    let controller = null;
+    let token = restored;
+    const drop = (id) => {
+        const before = requests.length;
+        requests = requests.filter(request => request.id !== id);
+        return requests.length !== before;
+    };
+    /** Hands control to `id`; whoever held it before is told it lost it. */
+    function seat(id, granted) {
+        if (controller && controller !== id)
+            send({ t: "revoke", to: controller });
+        drop(id);
+        controller = id;
+        token = granted;
+        send({ t: "grant", to: id, token: granted });
+        changed();
+    }
+    return {
+        get requests() {
+            return requests;
+        },
+        get controller() {
+            return controller;
+        },
+        get token() {
+            return token;
+        },
+        join(id) {
+            drop(id);
+            const request = { id, code: newCode(), at: now() };
+            requests.push(request);
+            send({ t: "pair", to: id, code: request.code });
+            changed();
+        },
+        leave(id) {
+            const waiting = drop(id);
+            if (controller === id)
+                controller = null;
+            else if (!waiting)
+                return;
+            changed();
+        },
+        resume(id, presented) {
+            // Only a guest the relay announced, and only with the one token in force.
+            if (!token || presented !== token || (controller !== id && !requests.some(request => request.id === id)))
+                return false;
+            seat(id, token);
+            return true;
+        },
+        allow(id) {
+            // A fresh token on every decision: the one of the phone that held control before stops working.
+            if (requests.some(request => request.id === id))
+                seat(id, newToken());
+        },
+        deny(id) {
+            if (!drop(id))
+                return;
+            send({ t: "deny", to: id });
+            changed();
+        },
+        revoke() {
+            if (!controller && !token)
+                return;
+            if (controller)
+                send({ t: "revoke", to: controller });
+            controller = null;
+            token = null;
+            changed();
+        },
+        expire() {
+            const limit = now() - REQUEST_TTL;
+            for (const request of requests.filter(item => item.at <= limit)) {
+                drop(request.id);
+                send({ t: "deny", to: request.id });
+                changed();
+            }
+        },
+        controls: id => controller !== null && id === controller,
+        offline() {
+            if (!controller && !requests.length)
+                return;
+            controller = null;
+            requests = [];
+            changed();
+        },
+    };
+}

package/dist/remote/panel.d.ts

@@ -0,0 +1,38 @@
+import type { RemoteLabels } from "./labels.js";
+import type { PairRequest } from "./pairing.js";
+import type { TransportStatus } from "./transport.js";
+/** Draws a QR code as an SVG string; `null` (or a rejection) shows the link as text only. */
+export type QrEncoder = (text: string) => string | null | Promise<string | null>;
+/** What the panel shows; the host session hands in a new one on every change. */
+export interface PanelView {
+    /** `null` without a relay. */
+    relay: TransportStatus | null;
+    /** Close code of the last relay connection. */
+    code: number;
+    requests: readonly PairRequest[];
+    paired: "no" | "online" | "offline";
+    elapsed: number;
+}
+export interface PanelOptions {
+    /** The viewport of the deck's shell (`.ct-vp`). */
+    parent: HTMLElement;
+    labels: RemoteLabels;
+    qr: QrEncoder;
+    /** The phone-remote link, or `null` without a relay. */
+    remoteLink: string | null;
+    notesLink: string;
+    allow(id: string): void;
+    deny(id: string): void;
+    revoke(): void;
+    presenter(): void;
+    resetTimer(): void;
+    end(): void;
+    close(): void;
+}
+export interface Panel {
+    readonly open: boolean;
+    show(open: boolean): void;
+    update(view: PanelView): void;
+    destroy(): void;
+}
+export declare function createPanel(options: PanelOptions): Panel;

package/dist/remote/panel.js

@@ -0,0 +1,131 @@
+/** The remote panel on the deck: the QR codes, the pairing requests, the paired phone, and the presenter window. */
+import { h } from "../core/dom.js";
+import { formatClock } from "./clock.js";
+export function createPanel(options) {
+    const { labels } = options;
+    const el = h("aside", "ct-rp", "", { role: "dialog", "aria-label": labels.title, tabindex: -1 });
+    el.hidden = true;
+    const button = (action, text, primary = false) => {
+        const control = h("button", "ct-btn", text, { "data-ct-rp": action });
+        if (primary)
+            control.setAttribute("data-ct-primary", "");
+        return control;
+    };
+    const head = el.appendChild(h("div", "ct-rp-head"));
+    const status = h("span", "ct-badge");
+    const closeButton = button("close", "✕");
+    closeButton.setAttribute("aria-label", labels.close);
+    head.append(h("h2", "", labels.title), status, closeButton);
+    /** Requests and the paired phone: the part that changes. */
+    const live = el.appendChild(h("div", "ct-rp-live", "", { "aria-live": "polite" }));
+    live.style.display = "contents";
+    const codes = el.appendChild(h("div", "ct-rp-qrs"));
+    function tile(title, hint, link) {
+        const figure = codes.appendChild(h("figure", "ct-rp-qr"));
+        const image = h("div", "ct-rp-img");
+        image.hidden = true;
+        figure.append(image, h("h3", "", title), h("p", "", hint), h("a", "ct-rp-url", link, { href: link, target: "_blank", rel: "noopener" }));
+        // The encoder belongs to the host page (or is the built-in one): its SVG goes in as markup.
+        void Promise.resolve()
+            .then(() => options.qr(link))
+            .then(svg => {
+            if (!svg)
+                return;
+            image.innerHTML = svg;
+            image.hidden = false;
+        })
+            .catch(() => { });
+    }
+    if (options.remoteLink)
+        tile(labels.remoteQr, labels.remoteHint, options.remoteLink);
+    else
+        codes.before(h("p", "", labels.noRelay));
+    tile(labels.notesQr, labels.notesHint, options.notesLink);
+    const tools = el.appendChild(h("div", "ct-rp-row"));
+    const time = h("b", "ct-rp-time", "0:00");
+    const timer = h("span", "ct-rp-row");
+    timer.append(h("span", "ct-meta", labels.timer), time, button("reset", labels.resetTimer));
+    tools.append(button("presenter", labels.presenter), timer);
+    el.appendChild(h("div", "ct-rp-row")).append(h("span"), button("end", labels.end));
+    const actions = {
+        close: options.close,
+        allow: options.allow,
+        deny: options.deny,
+        revoke: options.revoke,
+        presenter: options.presenter,
+        reset: options.resetTimer,
+        end: options.end,
+    };
+    el.addEventListener("click", event => {
+        const control = event.target.closest("[data-ct-rp]");
+        if (control)
+            actions[control.dataset.ctRp ?? ""]?.(control.dataset.ctId ?? "");
+    });
+    // Escape closes the panel, and only the panel: the deck's own Escape (outline, exit) does not run.
+    const onKey = (event) => {
+        if (event.key !== "Escape" || el.hidden)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        options.close();
+    };
+    document.addEventListener("keydown", onKey, true);
+    options.parent.append(el);
+    let returnTo = null;
+    let drawn = "";
+    return {
+        get open() {
+            return !el.hidden;
+        },
+        show(open) {
+            if (open === !el.hidden)
+                return;
+            el.hidden = !open;
+            if (open) {
+                returnTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+                el.focus({ preventScroll: true });
+            }
+            else {
+                returnTo?.focus({ preventScroll: true });
+                returnTo = null;
+            }
+        },
+        update(view) {
+            time.textContent = formatClock(view.elapsed);
+            const relayText = view.relay === null
+                ? ""
+                : view.relay === "open"
+                    ? labels.relayOpen
+                    : view.code === 4009
+                        ? labels.roomTaken
+                        : view.relay === "closed"
+                            ? labels.relayClosed
+                            : labels.relayConnecting;
+            status.textContent = relayText;
+            status.hidden = !relayText;
+            status.dataset.st = view.relay ?? "";
+            // The requests are rebuilt only when they change, so a button under the finger stays the same element.
+            const key = JSON.stringify([view.requests, view.paired]);
+            if (key === drawn)
+                return;
+            drawn = key;
+            live.replaceChildren(...view.requests.map(request => {
+                const ask = h("section", "ct-rp-ask", "", { "data-ct-id": request.id });
+                const allow = button("allow", labels.allow, true);
+                const deny = button("deny", labels.deny);
+                allow.dataset.ctId = deny.dataset.ctId = request.id;
+                const code = h("b", "ct-rp-code", request.code, { "aria-label": `${labels.code} ${request.code.split("").join(" ")}` });
+                ask.append(h("h3", "", labels.request), h("span", "ct-meta", labels.code), code, allow, deny);
+                return ask;
+            }));
+            if (view.paired !== "no") {
+                const paired = live.appendChild(h("div", "ct-rp-row"));
+                paired.append(h("span", "ct-badge", view.paired === "online" ? labels.paired : labels.pairedOffline), button("revoke", labels.revoke));
+            }
+        },
+        destroy() {
+            document.removeEventListener("keydown", onKey, true);
+            el.remove();
+        },
+    };
+}

package/dist/remote/phone.d.ts

@@ -0,0 +1,10 @@
+import type { RemoteOptions } from "./session.js";
+export interface RemoteViewOptions extends RemoteOptions {
+    /** The room to join. Default: the `room` query parameter. */
+    room?: string;
+}
+export interface RemoteView {
+    /** Closes the connection and removes the view; the page is a document again. */
+    destroy(): void;
+}
+export declare function remoteView(root: HTMLElement, options?: RemoteViewOptions): RemoteView;

package/dist/remote/phone.js

@@ -0,0 +1,407 @@
+/**
+ * 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;
+        retry.hidden = phase !== "denied" && phase !== "revoked";
+        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");
+        },
+    };
+}