@drawcall/feedback 0.0.0-stage → 0.1.0

package/dist/browser/ui.js

@@ -0,0 +1,291 @@
+import { LIMITS } from "../service.js";
+import { hotkey, isHotkey } from "./input.js";
+import { paint, STYLE } from "./style.js";
+import { wait } from "./wait.js";
+/** The typing sheet's heading. */
+export const PROMPT = "What feels off?";
+/**
+ * What a click of the corner button counts as. On desktop it is the key, for players whose key below Esc is unusable
+ * (a Japanese IME toggle) or whose browser can't name it. Quest Browser shows none, since its feedback starts in VR.
+ */
+const CORNER = { desktop: "key", phone: "touch", quest: null };
+const FADE_MS = 300;
+/** Each action's glyph and short label on the corner button. */
+const FACES = {
+    "Give feedback": [`<circle cx="12" cy="12" r="5" style="fill: var(--record)"/>`, "Feedback"],
+    // A stop square, breathing while it records.
+    "Send recording": [`<rect x="7.5" y="7.5" width="9" height="9" rx="2" style="fill: var(--record)"/>`, "Send"],
+    "Take screenshot": [
+        `<path d="M5 9V7a2 2 0 0 1 2-2h2m6 0h2a2 2 0 0 1 2 2v2m0 6v2a2 2 0 0 1-2 2h-2m-6 0H7a2 2 0 0 1-2-2v-2" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/><circle cx="12" cy="12" r="2.25" fill="currentColor"/>`,
+        "Take screenshot",
+    ],
+};
+/** An element with `props` and `children`; null children are left out. */
+export function h(tag, props = {}, ...children) {
+    const element = Object.assign(document.createElement(tag), props);
+    element.append(...children.filter(child => child !== null));
+    return element;
+}
+export const kbd = (key) => h("kbd", { textContent: key });
+export const button = (className, label) => h("button", { className, type: "button" }, label);
+/** The corner button's face: a glyph, what a press does, and on a keyboard the key that does it. */
+export function face(kind, action) {
+    const [glyph, label] = FACES[action];
+    return `<svg viewBox="0 0 24 24" aria-hidden="true">${glyph}</svg><span>${label}</span>${kind === "key" ? kbd(hotkey).outerHTML : ""}`;
+}
+/**
+ * Puts the lines of `view` on a plate; `ticks` collects what redraws their `{ tick }` parts, which screen readers skip
+ * since feedback mode's plate announces every change.
+ */
+export function plate({ big, small, recording, waiting }, ticks = [], lines = h("div", { className: "lines" })) {
+    const paragraph = (line) => h("p", {}, ...line.map(part => {
+        if (typeof part === "string")
+            return part;
+        if ("key" in part)
+            return kbd(part.key);
+        const span = h("span", { className: "tick", textContent: part.tick() });
+        span.setAttribute("aria-hidden", "true");
+        ticks.push(() => (span.textContent = part.tick()));
+        return span;
+    }));
+    lines.replaceChildren(paragraph(big), ...(small ? [paragraph(small)] : []), ...(waiting ? [h("div", { className: "bar" })] : []));
+    if (recording)
+        lines.firstElementChild?.prepend(h("span", { className: "dot" }));
+    return lines;
+}
+/**
+ * Everything the SDK shows, in one shadow root on the page: the cover, feedback mode and the corner button. DOM only,
+ * so never in the screenshot, which is drawn from the canvas; in XR none of it is visible and sounds carry the flow.
+ * Keys and presses inside it don't reach the game, so one that locks the pointer or shoots on a click doesn't take them
+ * too; the SDK's own window capture listeners still see them. Releases still reach the game, so nothing held when it
+ * appeared stays stuck down. Gone on abort.
+ */
+export class Ui {
+    root;
+    theme;
+    /** Whether a turn holds the screen, whose captions and sounds an earlier turn's late outcome must leave alone. */
+    busy = false;
+    #mode = h("div", { className: "mode", hidden: true });
+    #lines = h("div", { className: "lines", role: "status" });
+    #corner = null;
+    #timer;
+    #ticker;
+    /** What the tester typed into a sheet they cancelled, kept for the next one. */
+    #draft = "";
+    /** The corner button's clicks call `press` with the input they count as. */
+    constructor(device, press, theme = {}, signal) {
+        this.theme = theme;
+        const host = h("div");
+        paint(host, theme);
+        this.root = host.attachShadow({ mode: "open" });
+        this.root.append(h("style", { textContent: STYLE }), this.#mode);
+        const kind = CORNER[device];
+        if (kind) {
+            // It never takes focus from the game, whose Space or Enter would press it again.
+            const corner = h("button", { className: `corner ${kind}` });
+            corner.addEventListener("mousedown", event => event.preventDefault());
+            corner.addEventListener("click", () => press(kind));
+            this.#corner = { kind, button: corner };
+            this.root.append(h("div", { className: "dock" }, corner));
+            this.action("Give feedback");
+        }
+        for (const type of ["keydown", "keypress", "pointerdown", "mousedown", "click"])
+            host.addEventListener(type, event => event.stopPropagation());
+        document.body.append(host);
+        signal.addEventListener("abort", () => host.remove(), { once: true });
+    }
+    /** Shows `view` in feedback mode, entering it if needed. */
+    show(view) {
+        clearTimeout(this.#timer);
+        clearInterval(this.#ticker);
+        const ticks = [];
+        this.#mode.replaceChildren(plate(view, ticks, this.#lines));
+        if (ticks.length)
+            this.#ticker = setInterval(() => ticks.forEach(tick => tick()), 250);
+        this.#mode.className = "mode";
+        this.#mode.hidden = false;
+    }
+    /** Shows `view` for `ms`, then leaves, unless something else shows first. */
+    flash(view, ms) {
+        this.show(view);
+        this.#timer = setTimeout(() => this.leave(), ms);
+    }
+    /** Fades out, which ends feedback mode on screen. */
+    leave() {
+        clearInterval(this.#ticker);
+        this.#mode.classList.add("leaving");
+        this.#timer = setTimeout(() => (this.#mode.hidden = true), FADE_MS);
+    }
+    /** A link under the caption that switches how feedback is given, such as "Type instead", until `signal` aborts. */
+    link(label, run, signal) {
+        if (signal.aborted)
+            return;
+        const link = button("quiet", label);
+        link.addEventListener("click", run, { signal });
+        this.#mode.append(link);
+        signal.addEventListener("abort", () => link.remove(), { once: true });
+    }
+    /** Hides the corner button while something else takes the screen, raises it over the cover, or lights it up. */
+    corner(look) {
+        const corner = this.#corner?.button;
+        if (!corner)
+            return;
+        corner.hidden = look === "hidden";
+        corner.classList.toggle("raised", look === "raised");
+        corner.classList.toggle("lit", look === "lit");
+    }
+    action(label) {
+        if (!this.#corner)
+            return;
+        const { kind, button } = this.#corner;
+        button.removeAttribute("aria-disabled");
+        button.setAttribute("aria-label", label);
+        button.innerHTML = face(kind, label);
+    }
+    /** Dims the corner button while a press does nothing, until the next `action`. */
+    dim() {
+        this.#corner?.button.setAttribute("aria-disabled", "true");
+    }
+    /** A hold's progress, 0 to 1, filling the corner button. Without one, only the hold's sound shows it. */
+    hold(progress) {
+        this.#corner?.button.style.setProperty("--hold", String(progress < 1 ? progress : 0));
+    }
+    /**
+     * The typing sheet, in feedback mode's frame with the corner button hidden behind it. Resolves with the text on Send,
+     * with "speak" for "Speak instead" when `speakable`, and with null on Cancel, Escape, or the feedback key in an empty
+     * field. On a keyboard Enter sends and Shift+Enter starts a new line; on a phone Enter is a new line, and the sheet
+     * fills the space above the on-screen keyboard.
+     */
+    sheet(kind, speakable, signal) {
+        return wait(signal, (done, over) => {
+            const phone = kind === "touch";
+            const field = h("textarea", { maxLength: LIMITS.text, value: this.#draft, placeholder: "Type here" });
+            field.setAttribute("aria-label", PROMPT);
+            const cancel = button("quiet", "Cancel");
+            const send = button("primary", "Send");
+            const speak = speakable ? button("quiet", "Speak instead") : null;
+            const hints = phone ? null : h("span", {}, "Enter to send · Shift+Enter for a new line · Esc to cancel");
+            const card = h("div", {}, h("div", { className: "head" }, cancel, h("h2", {}, PROMPT), send), field, hints || speak ? h("div", { className: "foot" }, hints, speak) : null);
+            card.setAttribute("role", "dialog");
+            card.setAttribute("aria-label", PROMPT);
+            const sheet = h("div", { className: phone ? "sheet phone" : "sheet" }, card);
+            // The on-screen keyboard shrinks the visual viewport, not the layout one, so the sheet follows it to keep Send in view.
+            const view = window.visualViewport;
+            const fit = () => {
+                if (!view)
+                    return;
+                sheet.style.top = `${view.offsetTop}px`;
+                sheet.style.height = `${view.height}px`;
+            };
+            if (phone)
+                for (const type of ["resize", "scroll"])
+                    view?.addEventListener(type, fit, { signal: over });
+            if (phone)
+                fit();
+            // The sheet needs the pointer that a game's mouse look holds.
+            if (document.pointerLockElement)
+                document.exitPointerLock();
+            this.show({ big: [PROMPT] });
+            this.#mode.append(sheet);
+            this.corner("hidden");
+            over.addEventListener("abort", () => {
+                field.blur();
+                sheet.remove();
+                this.corner("shown");
+            });
+            const submit = () => {
+                const text = field.value.trim();
+                if (!text)
+                    return;
+                this.#draft = "";
+                done(text);
+            };
+            const update = () => {
+                this.#draft = field.value;
+                send.disabled = !field.value.trim();
+            };
+            update();
+            field.addEventListener("input", update, { signal: over });
+            field.addEventListener("keydown", event => {
+                if (event.isComposing)
+                    return;
+                if (event.key === "Escape" || (isHotkey(event) && !field.value)) {
+                    event.preventDefault();
+                    done(null);
+                }
+                else if (!phone && event.key === "Enter" && !event.shiftKey) {
+                    event.preventDefault();
+                    submit();
+                }
+            }, { signal: over });
+            cancel.addEventListener("click", () => done(null), { signal: over });
+            send.addEventListener("click", submit, { signal: over });
+            speak?.addEventListener("click", () => done("speak"), { signal: over });
+            field.focus();
+        });
+    }
+    /** A full-screen cover, under the corner button, until disposed. */
+    cover() {
+        return new Cover(this);
+    }
+}
+/**
+ * The page of the intro and the closing screen: a modal dialog until released, while the game keeps rendering behind
+ * it. Opening it gives back the pointer a game's mouse look holds, and leaves a fullscreen canvas, which would hide it.
+ */
+export class Cover {
+    #ui;
+    #cover = h("div", { className: "cover" });
+    #card = h("div", { className: "card" });
+    constructor(ui) {
+        this.#ui = ui;
+        if (document.pointerLockElement)
+            document.exitPointerLock();
+        if (document.fullscreenElement && !document.fullscreenElement.contains(document.body)) {
+            document.exitFullscreen().catch(error => console.error("feedback: could not leave fullscreen", error));
+        }
+        this.#cover.setAttribute("role", "dialog");
+        this.#cover.setAttribute("aria-modal", "true");
+        this.#cover.setAttribute("aria-labelledby", "title");
+        this.#cover.addEventListener("keydown", this.#trap);
+        this.#cover.append(this.#card);
+        ui.root.append(this.#cover);
+    }
+    /** Replaces the page, under the game's logo unless `bare`, and focuses its heading, which names the dialog. */
+    show(nodes, bare = false) {
+        const { logo } = this.#ui.theme;
+        this.#card.replaceChildren(...(logo && !bare ? [h("img", { className: "logo", src: logo, alt: "" })] : []), ...nodes);
+        const heading = this.#card.querySelector("h1");
+        if (!heading)
+            return;
+        heading.id = "title";
+        heading.tabIndex = -1;
+        heading.focus({ preventScroll: true });
+    }
+    /** Stops being modal, so focus and screen readers reach what lies outside, such as the corner button. */
+    release() {
+        this.#cover.removeAttribute("aria-modal");
+        this.#cover.removeEventListener("keydown", this.#trap);
+    }
+    /** Lets clicks through to the game, and with `clear` lets it show through, dimmed. */
+    through(clear = false) {
+        this.release();
+        this.#cover.classList.add("through");
+        this.#cover.classList.toggle("clear", clear);
+    }
+    dispose() {
+        this.#cover.remove();
+    }
+    /** Keeps Tab inside the dialog. */
+    #trap = (event) => {
+        if (event.key !== "Tab")
+            return;
+        const stops = [...this.#card.querySelectorAll("input:not(:disabled), textarea:not([hidden]), button:not(:disabled, [hidden], [hidden] *)")];
+        const active = this.#ui.root.activeElement;
+        const edge = event.shiftKey ? stops[0] : stops.at(-1);
+        if (active instanceof HTMLElement && stops.includes(active) && active !== edge)
+            return;
+        event.preventDefault();
+        (event.shiftKey ? stops.at(-1) : stops[0])?.focus();
+    };
+}

package/dist/browser/wait.d.ts

@@ -0,0 +1,10 @@
+/** What `wait` hands its setup: `done` ends the wait with a value, `fail` with an error, and `over` aborts once it ends. */
+export type Arm<T> = (done: (value: T) => void, over: AbortSignal, fail: (error: unknown) => void) => void;
+/**
+ * Resolves with the first value `arm`'s listeners report. Everything it sets up listens on `over`, so nothing outlives
+ * the wait. Rejects with the reason when `signal` aborts first, as on dispose.
+ */
+export declare function wait<T>(signal: AbortSignal, arm: Arm<T>): Promise<T>;
+/** Calls `run` after `ms` unless `signal` aborts first. */
+export declare function after(ms: number, run: () => void, signal: AbortSignal): void;
+export declare function sleep(ms: number, signal: AbortSignal): Promise<void>;

package/dist/browser/wait.js

@@ -0,0 +1,32 @@
+/**
+ * Resolves with the first value `arm`'s listeners report. Everything it sets up listens on `over`, so nothing outlives
+ * the wait. Rejects with the reason when `signal` aborts first, as on dispose.
+ */
+export function wait(signal, arm) {
+    const over = new AbortController();
+    return new Promise((resolve, reject) => {
+        const end = (settle) => (value) => {
+            over.abort();
+            settle(value);
+        };
+        if (signal.aborted)
+            return reject(signal.reason);
+        signal.addEventListener("abort", () => end(reject)(signal.reason), { signal: over.signal });
+        try {
+            arm(end(resolve), over.signal, end(reject));
+        }
+        catch (error) {
+            end(reject)(error);
+        }
+    });
+}
+/** Calls `run` after `ms` unless `signal` aborts first. */
+export function after(ms, run, signal) {
+    if (signal.aborted)
+        return;
+    const timer = setTimeout(run, ms);
+    signal.addEventListener("abort", () => clearTimeout(timer), { once: true });
+}
+export function sleep(ms, signal) {
+    return wait(signal, (done, over) => after(ms, () => done(undefined), over));
+}

package/dist/browser/walkthrough.d.ts

@@ -0,0 +1,12 @@
+import type { Context } from "./run.ts";
+import { type Cover } from "./ui.ts";
+/** How the walkthrough teaches feedback: speaking, typing by choice, or typing because there is no microphone. */
+export type Means = "speak" | "type" | "nomic";
+/**
+ * The narrated walkthrough on the cover: each step shows while its clip plays, and the next follows once it has ended.
+ * Each press of the real input goes to the next step at once, cutting the clip short; a press on the last step, which
+ * lights the real corner button, or "Skip intro" closes the cover, and the press after that starts feedback. On Quest,
+ * whose 2D page has no input to press, the cover lets clicks through to the experience's enter button, its last step
+ * clears the backdrop over it, and the walkthrough ends with that step's clip. Entering XR ends it on any device.
+ */
+export declare function walkthrough(ctx: Context, cover: Cover, means: Means, entered: (run: () => void, signal: AbortSignal) => void): Promise<void>;

package/dist/browser/walkthrough.js

@@ -0,0 +1,137 @@
+import { hotkey } from "./input.js";
+import { CLIPS, KEY, PLACE, PLACED } from "./sounds.js";
+import { asking, SHOW_MS, talking } from "./turn.js";
+import { button, face, h, kbd, plate, PROMPT } from "./ui.js";
+import { after, wait } from "./wait.js";
+/** How long a step stays without its clip, to read it instead: at least this, and more for longer words. */
+const READ_MS = 4000;
+const READ_MS_PER_WORD = 300;
+/** A clip that doesn't end by then, as in a context the browser keeps suspended, is taken as done. */
+const CLIP_MS = 12_000;
+/** The breath between steps. */
+const PAUSE_MS = 500;
+/** The mic can be off for this site or for the whole browser app (an OS or headset setting); both are named. */
+const MIC_OFF = "The mic is off, so you'll type instead. To speak, allow the mic for this site and for your browser in your device's settings.";
+const MIC_OFF_XR = "The mic is off, so feedback won't record in the experience. Allow the mic for this site, and for the browser in the headset's privacy settings.";
+/**
+ * The narrated walkthrough on the cover: each step shows while its clip plays, and the next follows once it has ended.
+ * Each press of the real input goes to the next step at once, cutting the clip short; a press on the last step, which
+ * lights the real corner button, or "Skip intro" closes the cover, and the press after that starts feedback. On Quest,
+ * whose 2D page has no input to press, the cover lets clicks through to the experience's enter button, its last step
+ * clears the backdrop over it, and the walkthrough ends with that step's clip. Entering XR ends it on any device.
+ */
+export async function walkthrough(ctx, cover, means, entered) {
+    const { device, input, ui, sounds, signal } = ctx;
+    const press = device === "desktop" ? "key" : device === "phone" ? "touch" : null;
+    const steps = press ? flat(press, means) : quest(means);
+    if (press)
+        cover.release();
+    else
+        cover.through();
+    for (const [i, step] of steps.entries()) {
+        const last = i === steps.length - 1;
+        if (last && !press)
+            cover.through(true);
+        if (last)
+            ui.corner("lit");
+        const skip = button("quiet", "Skip intro");
+        const next = press && h("span", {}, ...(press === "key" ? ["Press ", kbd(hotkey), " for next"] : ["Tap Feedback for next"]));
+        // The last step has nothing to skip, but keeps the row's space, so the page keeps its height.
+        const controls = h("div", { className: "controls" }, next || null, skip);
+        controls.style.visibility = last ? "hidden" : "";
+        const view = h("div", { className: "walk" }, 
+        // The tag sits over the miniature, so it doesn't read as the real thing.
+        h("p", { className: "progress" }, h("span", {}, `Step ${i + 1} of ${steps.length}`), h("span", { className: "example" }, "Example")), step.screen, h("div", {}, h("h1", {}, ...heading(CLIPS[step.clip].words)), step.note ? h("p", { className: "note" }, step.note) : null), controls);
+        view.dataset.step = "abcde"[i];
+        cover.show([view], true);
+        const end = await wait(signal, (done, over) => {
+            // A flat screen holds the last step for the press; before any other step comes a breath.
+            narrate(sounds, step.clip, over, () => {
+                if (!last)
+                    after(PAUSE_MS, () => done("next"), over);
+                else if (!press)
+                    done("next");
+            });
+            if (press)
+                input.on(null, () => done("next"), over);
+            skip.addEventListener("click", () => done("skip"), { signal: over });
+            entered(() => done("skip"), over);
+        });
+        if (end === "skip")
+            return;
+    }
+}
+/** Plays the clip, then calls `then`; without sound, after the time it takes to read. */
+function narrate(sounds, clip, signal, then) {
+    const { words } = CLIPS[clip];
+    const read = Math.max(READ_MS, words.split(" ").length * READ_MS_PER_WORD);
+    sounds.clip(clip, signal).then(then, error => {
+        console.error(`feedback: could not play "${words}"`, error);
+        after(read, then, signal);
+    });
+    after(Math.max(CLIP_MS, 2 * read), then, signal);
+}
+/** The clip's words as its heading, with the key named as a cap. */
+function heading(words) {
+    const keys = (part) => part.split(KEY).flatMap((piece, i) => (i ? [kbd(hotkey), piece] : [piece]));
+    return words.split(PLACED).flatMap((part, i) => (i ? [kbd(hotkey), ` (${PLACE})`, ...keys(part)] : keys(part)));
+}
+function flat(kind, means) {
+    const keys = kind === "key";
+    return [
+        { clip: "a-welcome", screen: screen(kind, {}) },
+        means === "speak"
+            ? { clip: `b-${kind}`, screen: screen(kind, { action: "Send recording", keys, view: talking(kind, () => 3) }) }
+            : { clip: `b-type-${kind}`, screen: screen(kind, { keys, sheet: true }), note: means === "nomic" ? MIC_OFF : undefined },
+        { clip: `c-${kind}`, screen: screen(kind, { action: "Take screenshot", view: asking(kind, () => SHOW_MS / 1000) }) },
+        { clip: `d-${kind}`, screen: screen(kind, { lit: true, short: true }) },
+    ];
+}
+/**
+ * Which of controllers and hands the tester will use shows only once in XR, so each gets its own step. XR has no typing:
+ * without a microphone each turn explains why it cannot record, so the first speaking step says so too.
+ */
+function quest(means) {
+    const both = hands("controller", "hand");
+    return [
+        { clip: "a-welcome", screen: both },
+        { clip: "b-controller", screen: hands("controller"), note: means === "nomic" ? MIC_OFF_XR : undefined },
+        { clip: "b-hand", screen: hands("hand") },
+        { clip: "c-quest", screen: both.cloneNode(true) },
+        { clip: "d-quest", screen: both.cloneNode(true) },
+    ];
+}
+/** A miniature of the screen, drawn with the real caption and corner button, framed wherever feedback mode shows. */
+function screen(kind, { action = "Give feedback", view, sheet = false, lit = false, keys = false, short = false }) {
+    const corner = h("span", { className: lit ? `corner ${kind} lit` : `corner ${kind}` });
+    corner.innerHTML = face(kind, action);
+    const card = h("div", { className: "sheet" }, h("div", {}, "Cancel", h("b", {}, PROMPT), h("i", {}, "Send")), h("span"));
+    const shown = h("div", { className: "screen" }, keys ? picture() : null, view ? plate(view) : null, sheet ? card : h("div", { className: "dock" }, corner));
+    shown.classList.toggle("framed", Boolean(view) || sheet);
+    shown.classList.toggle("short", short);
+    shown.ariaHidden = "true";
+    return shown;
+}
+/**
+ * The left controller, rendered from Meta's Quest Touch Plus model in @webxr-input-profiles/assets (MIT, see
+ * pictures/LICENSE), and the pinching left hand, standing in for the screen on Quest. The URLs are spelled out in full
+ * so bundlers find the files.
+ */
+const PICTURES = {
+    controller: new URL("./pictures/controller.webp", import.meta.url),
+    hand: new URL("./pictures/hand.webp", import.meta.url),
+};
+function hands(...shown) {
+    const view = h("div", { className: "screen hands" }, ...shown.map(hand => h("img", { src: PICTURES[hand].href, alt: "" })));
+    view.ariaHidden = "true";
+    return view;
+}
+/** The feedback key among its neighbours, lit. */
+function picture() {
+    const cap = (x, y, w, label, opacity = 1) => `<g opacity="${opacity}"><rect x="${x}" y="${y}" width="${w}" height="24" rx="4"/><text x="${x + w / 2}" y="${y + 15}">${label}</text></g>`;
+    const keys = h("span", { className: "keys" });
+    keys.innerHTML = `<svg viewBox="0 0 88 56">${cap(2, 2, 32, "esc")}${cap(38, 2, 22, "F1", 0.5)}${cap(64, 2, 22, "F2", 0.25)}
+    <g class="lit"><rect x="2" y="30" width="32" height="24" rx="4"/><text x="18" y="47"></text></g>${cap(38, 30, 22, "1")}${cap(64, 30, 22, "2", 0.5)}</svg>`;
+    keys.querySelector(".lit text")?.append(hotkey);
+    return keys;
+}

package/dist/browser/xr.d.ts

@@ -0,0 +1,10 @@
+import { type Object3D } from "three";
+import type { Renderer } from "../index.ts";
+/** Renders the left eye of the current XR frame. */
+export interface EyeShot {
+    /** Must run synchronously inside the XR frame, right after the game's render. */
+    take(scene: Object3D): Promise<HTMLCanvasElement>;
+    dispose(): void;
+}
+/** Loads the output pass for this renderer ahead of the shot, which can't wait for an import. */
+export declare function prepareEyeShot(renderer: Renderer): Promise<EyeShot>;

package/dist/browser/xr.js

@@ -0,0 +1,99 @@
+import { HalfFloatType, RenderTarget, WebGLRenderTarget, } from "three";
+import { canvas2d, fit, flip } from "./frame.js";
+/** Loads the output pass for this renderer ahead of the shot, which can't wait for an import. */
+export async function prepareEyeShot(renderer) {
+    return "isWebGPURenderer" in renderer ? webgpu(renderer) : webgl(renderer);
+}
+async function webgl(renderer) {
+    const { OutputPass } = await import("three/examples/jsm/postprocessing/OutputPass.js");
+    const pass = new OutputPass();
+    const linear = new WebGLRenderTarget(1, 1, { type: HalfFloatType });
+    const output = new WebGLRenderTarget(1, 1);
+    return {
+        async take(scene) {
+            // Tone mapping and sRGB, which the renderer applies only on its way to the screen.
+            const size = offscreen(renderer, scene, linear, output, () => pass.render(renderer, output, linear, 0, false));
+            const pixels = new Uint8Array(size.width * size.height * 4);
+            await renderer.readRenderTargetPixelsAsync(output, 0, 0, size.width, size.height, pixels);
+            return paint(flip(pixels, size), size);
+        },
+        dispose() {
+            pass.dispose();
+            linear.dispose();
+            output.dispose();
+        },
+    };
+}
+async function webgpu(renderer) {
+    const { NodeMaterial, QuadMesh } = await import("three/webgpu");
+    const { renderOutput, texture } = await import("three/tsl");
+    const linear = new RenderTarget(1, 1, { type: HalfFloatType });
+    const output = new RenderTarget(1, 1);
+    const material = new NodeMaterial();
+    // QuadMesh shares one geometry across all instances, so only its material is ours to dispose.
+    const quad = new QuadMesh(material);
+    let toneMapping = null;
+    let colorSpace = null;
+    return {
+        async take(scene) {
+            // Tone mapping and sRGB, which the renderer applies only on its way to the screen, so they are passed as
+            // RenderPipeline does, and rebuilt when the game changes them.
+            if (renderer.toneMapping !== toneMapping || renderer.outputColorSpace !== colorSpace) {
+                toneMapping = renderer.toneMapping;
+                colorSpace = renderer.outputColorSpace;
+                material.fragmentNode = renderOutput(texture(linear.texture), renderer.toneMapping, renderer.outputColorSpace);
+                material.needsUpdate = true;
+            }
+            const size = offscreen(renderer, scene, linear, output, () => {
+                renderer.setRenderTarget(output);
+                quad.render(renderer);
+            });
+            const pixels = await renderer.readRenderTargetPixelsAsync(output, 0, 0, size.width, size.height);
+            if (!(pixels instanceof Uint8Array))
+                throw new Error("feedback: expected 8-bit pixels from the output target");
+            // XR runs WebGPURenderer on its WebGL 2 backend, which reads rows bottom-up like WebGL.
+            return paint("isWebGLBackend" in renderer.backend ? flip(pixels, size) : pixels, size);
+        },
+        dispose() {
+            linear.dispose();
+            output.dispose();
+            material.dispose();
+        },
+    };
+}
+/**
+ * Draws `scene` from the left eye into `linear` with XR off, then `post` turns it into display colours in `output`,
+ * both sized to the eye's size, which it returns. The game's render target and XR are restored either way.
+ */
+function offscreen(renderer, scene, linear, output, post) {
+    const { camera, size } = eye(renderer.xr.getCamera());
+    linear.setSize(size.width, size.height);
+    output.setSize(size.width, size.height);
+    const previous = renderer.getRenderTarget();
+    renderer.xr.enabled = false;
+    try {
+        renderer.setRenderTarget(linear);
+        renderer.render(scene, camera);
+        post();
+    }
+    finally {
+        renderer.setRenderTarget(previous);
+        renderer.xr.enabled = true;
+    }
+    return size;
+}
+/** A standalone copy of the left eye's camera, with the rig's transform baked into its world matrix. */
+function eye(rig) {
+    const left = rig.cameras[0];
+    if (!left?.viewport)
+        throw new Error("feedback: the XR camera has no left eye");
+    const camera = left.clone();
+    camera.matrixWorld.decompose(camera.position, camera.quaternion, camera.scale);
+    return { camera, size: fit(left.viewport.z, left.viewport.w) };
+}
+/** A canvas of top-down RGBA pixels. */
+function paint(pixels, size) {
+    const { canvas, context } = canvas2d(size);
+    context.putImageData(new ImageData(new Uint8ClampedArray(pixels), size.width, size.height), 0, 0);
+    return canvas;
+}

package/dist/cli/bin.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli/bin.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+import { getAuthToken } from "@drawcall/auth";
+import { run } from "./index.js";
+process.exitCode = await run(process.argv.slice(2), {
+    fetch: globalThis.fetch,
+    token: () => getAuthToken(),
+    stdout: text => process.stdout.write(`${text}\n`),
+    stderr: text => process.stderr.write(`${text}\n`),
+    baseUrl: process.env.DRAWCALL_FEEDBACK_URL || undefined,
+    // The drawcall CLI forwards `drawcall feedback` here and names itself in this variable.
+    invocation: process.env.DRAWCALL_INVOCATION || undefined,
+});

package/dist/cli/commands.d.ts

@@ -0,0 +1,19 @@
+/** A mistake in the command line, found before any request. */
+export declare class UsageError extends Error {
+}
+export interface Api {
+    call(method: string, path: string, body?: unknown): Promise<Response>;
+    json(method: string, path: string, body?: unknown): Promise<unknown>;
+    /** `projects/<key>` of the project `key` names, else of the account's only one. */
+    project(key: string | undefined): Promise<string>;
+}
+export interface Command {
+    /** Its arguments and flags after the words naming it, besides --project. */
+    usage: string;
+    about: string;
+    /** Whether it takes --project. */
+    scoped: boolean;
+    /** What it prints: JSON, or text for `skill`. */
+    run(args: string[], api: Api): Promise<unknown>;
+}
+export declare const commands: Record<string, Command>;