contour-deck 0.1.0 → 0.2.1

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,40 @@
+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;
+    /** After 4009: takes the host seat back for this tab. */
+    retake(): 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,137 @@
+/** 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);
+    // Another tab with the same key holds the seat (4009); this tab takes it back only when asked.
+    const retake = el.appendChild(h("div", "ct-rp-row"));
+    retake.append(h("p", "", labels.roomTaken), button("retake", labels.useThisWindow, true));
+    retake.hidden = true;
+    /** 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,
+        retake: options.retake,
+        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;
+            retake.hidden = !(view.relay === "closed" && view.code === 4009);
+            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;