contour-deck 0.1.0 → 0.2.1

package/dist/remote/protocol.js

@@ -0,0 +1,123 @@
+/** 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 const MAX_FRAME = 2048;
+/** An `ink` message carries at most this many points. */
+export const MAX_POINTS = 64;
+const COMMANDS = ["next", "prev", "slideNext", "slidePrev", "pageNext", "pagePrev", "overview", "open"];
+const isFields = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const text = (value, max) => typeof value === "string" && value.length > 0 && value.length <= max;
+const finite = (value) => typeof value === "number" && Number.isFinite(value);
+const unit = (value) => Math.min(1, Math.max(0, value));
+/** A frame as an object with a string `t`, or `null`. */
+export function decode(frame) {
+    if (typeof frame !== "string" || frame.length > MAX_FRAME)
+        return null;
+    try {
+        const value = JSON.parse(frame);
+        return isFields(value) && typeof value.t === "string" ? value : null;
+    }
+    catch {
+        return 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 function guestMessage(value) {
+    switch (value.t) {
+        case "resume":
+            return text(value.token, 64) ? { t: "resume", token: value.token } : null;
+        case "cmd": {
+            if (typeof value.c !== "string" || !COMMANDS.includes(value.c))
+                return null;
+            const c = value.c;
+            if (c !== "open")
+                return { t: "cmd", c };
+            return text(value.at, 64) ? { t: "cmd", c, at: value.at } : null;
+        }
+        case "ptr":
+            return finite(value.x) && finite(value.y) && typeof value.on === "boolean"
+                ? { t: "ptr", x: unit(value.x), y: unit(value.y), on: value.on }
+                : null;
+        case "ink": {
+            const { s, pts } = value;
+            if (!finite(s) || !Array.isArray(pts) || pts.length < 2 || pts.length > MAX_POINTS * 2 || pts.length % 2)
+                return null;
+            if (!pts.every(finite))
+                return null;
+            return { t: "ink", s, pts: pts.map(unit), ...(value.end === true ? { end: true } : {}) };
+        }
+        case "ink-clear":
+            return { t: "ink-clear" };
+        case "ping":
+            return { t: "ping" };
+        default:
+            return null;
+    }
+}
+const number = (value, fallback = 0) => (finite(value) ? value : fallback);
+/** A `state` message as the guest reads it; a field of the wrong type takes its neutral value. */
+export function stateMessage(value) {
+    if (value.t !== "state" || typeof value.at !== "string")
+        return null;
+    return {
+        t: "state",
+        mode: value.mode === "overview" ? "overview" : "stage",
+        at: value.at.slice(0, 32),
+        step: number(value.step),
+        steps: number(value.steps),
+        elapsed: number(value.elapsed),
+        total: finite(value.total) ? value.total : null,
+        blockElapsed: number(value.blockElapsed),
+        blockMinutes: finite(value.blockMinutes) ? value.blockMinutes : null,
+        ...(finite(value.ratio) && value.ratio > 0 ? { ratio: value.ratio } : {}),
+    };
+}
+const CROCKFORD = "0123456789ABCDEFGHJKMNPQRSTVWXYZ";
+const BASE64URL = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+function randomText(alphabet, bits, length) {
+    const bytes = crypto.getRandomValues(new Uint8Array(Math.ceil((length * bits) / 8)));
+    let out = "";
+    let buffer = 0;
+    let held = 0;
+    for (const byte of bytes) {
+        buffer = (buffer << 8) | byte;
+        held += 8;
+        while (held >= bits && out.length < length) {
+            held -= bits;
+            out += alphabet[(buffer >> held) & ((1 << bits) - 1)];
+        }
+        buffer &= (1 << held) - 1;
+    }
+    return out;
+}
+/**
+ * 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 const newKey = () => CROCKFORD[crypto.getRandomValues(new Uint8Array(1))[0] & 7] + randomText(CROCKFORD, 5, 25);
+/** A room name, and the shape of a host key too. */
+export const isRoom = (value) => typeof value === "string" && /^[0-9A-HJKMNP-TV-Z]{26}$/.test(value);
+/** The room of a host key: the first 26 Crockford base32 characters of SHA-256 of the key (docs/PROTOCOL.md). */
+export async function roomOf(key) {
+    if (!globalThis.crypto?.subtle)
+        throw new Error("contour-deck: the remote relay needs a secure context (https or localhost)");
+    const hash = new Uint8Array(await crypto.subtle.digest("SHA-256", new TextEncoder().encode(key)));
+    let room = "";
+    for (let bit = 0; room.length < 26; bit += 5) {
+        const at = bit >> 3;
+        room += CROCKFORD[(((hash[at] << 8) | hash[at + 1]) >> (11 - (bit & 7))) & 31];
+    }
+    return room;
+}
+/** A resume token: 22 characters of base64url, 132 random bits. */
+export const newToken = () => randomText(BASE64URL, 6, 22);
+/** A fresh 4-digit pairing code, without modulo bias. */
+export function newCode() {
+    const one = new Uint16Array(1);
+    do
+        crypto.getRandomValues(one);
+    while (one[0] >= 60000);
+    return String(one[0] % 10000).padStart(4, "0");
+}

package/dist/remote/qr.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A small QR encoder for the pairing links: byte mode, error correction M, versions 1 to 12
+ * (up to 287 bytes of UTF-8). A host that already ships a QR library passes its own through the `qr` option.
+ */
+/** The modules of the QR code of `text` (`true` is dark), `[row][column]`, or `null` when it does not fit. */
+export declare function qrMatrix(text: string): boolean[][] | null;
+/** The QR code of `text` as an SVG string, dark on white whatever the theme; `null` when the text is too long. */
+export declare function qrSvg(text: string): string | null;

package/dist/remote/qr.js

@@ -0,0 +1,266 @@
+/**
+ * A small QR encoder for the pairing links: byte mode, error correction M, versions 1 to 12
+ * (up to 287 bytes of UTF-8). A host that already ships a QR library passes its own through the `qr` option.
+ */
+/** Error-correction codewords per block and the number of blocks at level M, for versions 1 to 12. */
+const BLOCKS = [[10, 1], [16, 1], [26, 1], [18, 2], [24, 2], [16, 4], [18, 4], [22, 4], [22, 5], [26, 5], [30, 5], [22, 8]];
+function gfMul(x, y) {
+    let z = 0;
+    for (let i = 7; i >= 0; i--) {
+        z = (z << 1) ^ ((z >>> 7) * 0x11d);
+        z ^= ((y >>> i) & 1) * x;
+    }
+    return z;
+}
+/** Reed-Solomon remainder of `data` for `degree` error-correction codewords. */
+function errorCorrection(data, degree) {
+    const divisor = new Array(degree).fill(0);
+    divisor[degree - 1] = 1;
+    let root = 1;
+    for (let i = 0; i < degree; i++) {
+        for (let j = 0; j < degree; j++) {
+            divisor[j] = gfMul(divisor[j], root);
+            if (j + 1 < degree)
+                divisor[j] ^= divisor[j + 1];
+        }
+        root = gfMul(root, 2);
+    }
+    const result = new Array(degree).fill(0);
+    for (const byte of data) {
+        const factor = byte ^ result.shift();
+        result.push(0);
+        divisor.forEach((coefficient, i) => (result[i] ^= gfMul(coefficient, factor)));
+    }
+    return result;
+}
+/** Codewords a version holds in all, data and error correction. */
+function rawCodewords(version) {
+    let modules = (16 * version + 128) * version + 64;
+    if (version >= 2) {
+        const align = Math.floor(version / 7) + 2;
+        modules -= (25 * align - 10) * align - 55;
+        if (version >= 7)
+            modules -= 36;
+    }
+    return modules >> 3;
+}
+function alignmentCentres(version, size) {
+    if (version === 1)
+        return [];
+    const count = Math.floor(version / 7) + 2;
+    const step = Math.ceil((version * 4 + 4) / (count * 2 - 2)) * 2;
+    const centres = [6];
+    for (let at = size - 7; centres.length < count; at -= step)
+        centres.splice(1, 0, at);
+    return centres;
+}
+const MASKS = [
+    (x, y) => (x + y) % 2 === 0,
+    (_, y) => y % 2 === 0,
+    x => x % 3 === 0,
+    (x, y) => (x + y) % 3 === 0,
+    (x, y) => (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0,
+    (x, y) => ((x * y) % 2) + ((x * y) % 3) === 0,
+    (x, y) => (((x * y) % 2) + ((x * y) % 3)) % 2 === 0,
+    (x, y) => (((x + y) % 2) + ((x * y) % 3)) % 2 === 0,
+];
+/** The penalty score of the standard: long runs, 2×2 blocks, finder look-alikes, and dark balance. */
+function penalty(modules) {
+    const size = modules.length;
+    let score = 0;
+    let dark = 0;
+    const lines = [];
+    for (let i = 0; i < size; i++) {
+        let row = "";
+        let column = "";
+        for (let j = 0; j < size; j++) {
+            row += modules[i][j] ? 1 : 0;
+            column += modules[j][i] ? 1 : 0;
+            if (modules[i][j])
+                dark++;
+            if (i && j && modules[i][j] === modules[i - 1][j] && modules[i][j] === modules[i][j - 1] && modules[i][j] === modules[i - 1][j - 1])
+                score += 3;
+        }
+        lines.push(row, column);
+    }
+    for (const line of lines) {
+        for (const run of line.match(/0{5,}|1{5,}/g) ?? [])
+            score += run.length - 2;
+        for (let at = 0; at <= size - 11; at++) {
+            const window = line.substr(at, 11);
+            if (window === "10111010000" || window === "00001011101")
+                score += 40;
+        }
+    }
+    return score + Math.floor(Math.abs((dark * 20) / (size * size) - 10)) * 10;
+}
+/** The modules of the QR code of `text` (`true` is dark), `[row][column]`, or `null` when it does not fit. */
+export function qrMatrix(text) {
+    const bytes = Array.from(new TextEncoder().encode(text));
+    let version = 0;
+    let dataLength = 0;
+    for (let v = 1; v <= BLOCKS.length && !version; v++) {
+        const [ecLength, blocks] = BLOCKS[v - 1];
+        dataLength = rawCodewords(v) - ecLength * blocks;
+        if (4 + (v < 10 ? 8 : 16) + bytes.length * 8 <= dataLength * 8)
+            version = v;
+    }
+    if (!version)
+        return null;
+    const [ecLength, blockCount] = BLOCKS[version - 1];
+    const size = version * 4 + 17;
+    /* ---- data codewords: mode, length, bytes, terminator, padding ---- */
+    const bits = [];
+    const push = (value, length) => {
+        for (let i = length - 1; i >= 0; i--)
+            bits.push((value >>> i) & 1);
+    };
+    push(4, 4);
+    push(bytes.length, version < 10 ? 8 : 16);
+    for (const byte of bytes)
+        push(byte, 8);
+    push(0, Math.min(4, dataLength * 8 - bits.length));
+    push(0, (8 - (bits.length % 8)) % 8);
+    for (let pad = 0xec; bits.length < dataLength * 8; pad ^= 0xec ^ 0x11)
+        push(pad, 8);
+    const data = [];
+    for (let i = 0; i < bits.length; i += 8)
+        data.push(bits.slice(i, i + 8).reduce((byte, bit) => (byte << 1) | bit, 0));
+    /* ---- blocks with error correction, interleaved ---- */
+    const shortBlocks = blockCount - (rawCodewords(version) % blockCount);
+    const shortLength = Math.floor(rawCodewords(version) / blockCount) - ecLength;
+    const blocks = [];
+    for (let i = 0, at = 0; i < blockCount; i++) {
+        const part = data.slice(at, (at += shortLength + (i < shortBlocks ? 0 : 1)));
+        blocks.push({ data: part, ec: errorCorrection(part, ecLength) });
+    }
+    const codewords = [];
+    for (let i = 0; i <= shortLength; i++)
+        for (const block of blocks)
+            if (i < block.data.length)
+                codewords.push(block.data[i]);
+    for (let i = 0; i < ecLength; i++)
+        for (const block of blocks)
+            codewords.push(block.ec[i]);
+    /* ---- function patterns ---- */
+    const modules = Array.from({ length: size }, () => new Array(size).fill(false));
+    const reserved = Array.from({ length: size }, () => new Array(size).fill(false));
+    const set = (x, y, dark) => {
+        if (x < 0 || y < 0 || x >= size || y >= size)
+            return;
+        modules[y][x] = dark;
+        reserved[y][x] = true;
+    };
+    for (let i = 0; i < size; i++) {
+        set(6, i, i % 2 === 0);
+        set(i, 6, i % 2 === 0);
+    }
+    for (const [cx, cy] of [[3, 3], [size - 4, 3], [3, size - 4]]) {
+        for (let dy = -4; dy <= 4; dy++) {
+            for (let dx = -4; dx <= 4; dx++) {
+                const ring = Math.max(Math.abs(dx), Math.abs(dy));
+                set(cx + dx, cy + dy, ring !== 2 && ring !== 4);
+            }
+        }
+    }
+    const centres = alignmentCentres(version, size);
+    centres.forEach((cy, i) => centres.forEach((cx, j) => {
+        // The three corners with a finder pattern have no alignment pattern.
+        if ((i === 0 && j === 0) || (i === 0 && j === centres.length - 1) || (i === centres.length - 1 && j === 0))
+            return;
+        for (let dy = -2; dy <= 2; dy++)
+            for (let dx = -2; dx <= 2; dx++)
+                set(cx + dx, cy + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+    }));
+    const format = (mask) => {
+        // Level M is 00, so the five data bits are the mask alone.
+        let remainder = mask;
+        for (let i = 0; i < 10; i++)
+            remainder = (remainder << 1) ^ ((remainder >>> 9) * 0x537);
+        const word = ((mask << 10) | remainder) ^ 0x5412;
+        const bit = (i) => ((word >>> i) & 1) === 1;
+        for (let i = 0; i <= 5; i++)
+            set(8, i, bit(i));
+        set(8, 7, bit(6));
+        set(8, 8, bit(7));
+        set(7, 8, bit(8));
+        for (let i = 9; i < 15; i++)
+            set(14 - i, 8, bit(i));
+        for (let i = 0; i < 8; i++)
+            set(size - 1 - i, 8, bit(i));
+        for (let i = 8; i < 15; i++)
+            set(8, size - 15 + i, bit(i));
+        set(8, size - 8, true);
+    };
+    format(0);
+    if (version >= 7) {
+        let remainder = version;
+        for (let i = 0; i < 12; i++)
+            remainder = (remainder << 1) ^ ((remainder >>> 11) * 0x1f25);
+        const word = (version << 12) | remainder;
+        for (let i = 0; i < 18; i++) {
+            const dark = ((word >>> i) & 1) === 1;
+            const a = size - 11 + (i % 3);
+            const b = Math.floor(i / 3);
+            set(a, b, dark);
+            set(b, a, dark);
+        }
+    }
+    /* ---- data in the zigzag, then the mask with the lowest penalty ---- */
+    let index = 0;
+    for (let right = size - 1; right >= 1; right -= 2) {
+        if (right === 6)
+            right = 5;
+        for (let step = 0; step < size; step++) {
+            for (let j = 0; j < 2; j++) {
+                const x = right - j;
+                const y = ((right + 1) & 2) === 0 ? size - 1 - step : step;
+                if (reserved[y][x] || index >= codewords.length * 8)
+                    continue;
+                modules[y][x] = ((codewords[index >>> 3] >>> (7 - (index & 7))) & 1) === 1;
+                index++;
+            }
+        }
+    }
+    const flip = (mask) => {
+        for (let y = 0; y < size; y++)
+            for (let x = 0; x < size; x++)
+                if (!reserved[y][x] && MASKS[mask](x, y))
+                    modules[y][x] = !modules[y][x];
+    };
+    let best = 0;
+    let lowest = Infinity;
+    for (let mask = 0; mask < 8; mask++) {
+        flip(mask);
+        format(mask);
+        const score = penalty(modules);
+        if (score < lowest)
+            [best, lowest] = [mask, score];
+        flip(mask);
+    }
+    flip(best);
+    format(best);
+    return modules;
+}
+/** Quiet zone around the code, in modules. */
+const QUIET = 4;
+/** The QR code of `text` as an SVG string, dark on white whatever the theme; `null` when the text is too long. */
+export function qrSvg(text) {
+    const modules = qrMatrix(text);
+    if (!modules)
+        return null;
+    const side = modules.length + QUIET * 2;
+    let path = "";
+    modules.forEach((row, y) => {
+        for (let x = 0; x < row.length; x++) {
+            if (!row[x])
+                continue;
+            let run = 1;
+            while (row[x + run])
+                run++;
+            path += `M${x + QUIET} ${y + QUIET}h${run}v1h-${run}z`;
+            x += run;
+        }
+    });
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${side} ${side}" shape-rendering="crispEdges"><path fill="#fff" d="M0 0h${side}v${side}H0z"/><path d="${path}"/></svg>`;
+}

package/dist/remote/sensor.d.ts

@@ -0,0 +1,9 @@
+import type { Aim } from "./tilt.js";
+export type SensorResult = "ok" | "denied" | "unsupported";
+export interface Sensor {
+    /** Asks for the sensor. Call it from a tap: iOS shows its permission prompt only then. */
+    start(): Promise<SensorResult>;
+    stop(): void;
+}
+/** Calls `onAim` with the direction the phone points at, and the time in seconds, for every reading. */
+export declare function createSensor(onAim: (aim: Aim, t: number) => void): Sensor;

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>;