@cloudware-de/gatekeeper-widget 0.0.0-stage → 0.1.0

package/dist/element/widget.js

@@ -0,0 +1,852 @@
+/**
+ * Custom Element: Checkbox, Token, Startzeitpunkt, Hard-Timeout.
+ * Spec: specs/002-widget/tasks.md T-204 T-205 T-209 T-210
+ * Spec: specs/002-widget/spec.md §Öffentliches Custom-Element-API
+ * Spec: specs/002-widget/spec.md Pflichtumfang Start / Timeout / Token
+ * Spec: specs/002-widget/spec.md §Formular-Kanten
+ * Spec: specs/002-widget/spec.md §Öffentliches Custom-Element-API (template)
+ * Verfassung: Artikel 5, 6, 10. ADR-008.
+ */
+import { InstanceClientError } from "../client/instance.js";
+import { LOAD_NOTICE } from "../copy/load-notice.js";
+import { EnvelopeIsolationError } from "../envelope/run.js";
+import { terminateTrackedWorkers } from "../runtime/workers.js";
+import { HARD_TIMEOUT_MS, TOKEN_TTL_MS, isAbortError, expiresAtOf, isChallengeExpired, issuedAtOf, parseStartMode, readSubmitHold, } from "./start.js";
+import { attestChallenge, createBoundClient, mergeRedeemBody, readBaseUrl, readSiteKey, readWasmUrl, } from "./session.js";
+import { HONEYPOT_FIELD } from "./honeypot.js";
+import { applyTemplateToHost } from "./templates/host.js";
+import { combinedLookCss } from "./templates/sheets.js";
+import { isWasmOom } from "../pow/oom.js";
+import { challengeExpiredMessage, isWidgetUiState, labelForHost, missingTokenMessage, } from "./states.js";
+export { HONEYPOT_FIELD } from "./honeypot.js";
+const TAG = "gatekeep-widget";
+const DEFAULT_FIELD_NAME = "gatekeep-token";
+let nextBoxId = 0;
+function nextId(prefix) {
+    nextBoxId += 1;
+    return `${prefix}-${nextBoxId}`;
+}
+export class WidgetRedeemError extends Error {
+    errorCodes;
+    constructor(message, errorCodes) {
+        super(message);
+        this.name = "WidgetRedeemError";
+        this.errorCodes = errorCodes;
+    }
+}
+function fieldNameOf(host) {
+    const name = host.getAttribute("name")?.trim();
+    if (name) {
+        return name;
+    }
+    const data = host.getAttribute("data-field-name")?.trim();
+    return data && data.length > 0 ? data : DEFAULT_FIELD_NAME;
+}
+function codesFromUnknown(err) {
+    if (err instanceof InstanceClientError && err.errorCodes.length > 0) {
+        return [...err.errorCodes];
+    }
+    if (err instanceof WidgetRedeemError && err.errorCodes.length > 0) {
+        return [...err.errorCodes];
+    }
+    if (err instanceof EnvelopeIsolationError) {
+        return [err.code];
+    }
+    if (err !== null && typeof err === "object" && "errorCodes" in err) {
+        const codes = err.errorCodes;
+        if (Array.isArray(codes) &&
+            codes.length > 0 &&
+            codes.every((item) => typeof item === "string")) {
+            return codes;
+        }
+    }
+    if (err instanceof Error && "code" in err && typeof err.code === "string" && err.code.length > 0) {
+        return [err.code];
+    }
+    return ["invalid_solution"];
+}
+function defaultDelay(callback, ms) {
+    const id = setTimeout(callback, ms);
+    return { cancel: () => clearTimeout(id) };
+}
+export class GatekeepWidget extends HTMLElement {
+    static formAssociated = true;
+    static get observedAttributes() {
+        return [
+            "label-unchecked",
+            "label-checked",
+            "missing-token",
+            "expired-challenge",
+            "submit-hold",
+            "template",
+        ];
+    }
+    #internals = null;
+    #state = "idle";
+    #checkbox = null;
+    #labelEl = null;
+    #hidden = null;
+    #honeypot = null;
+    #token = null;
+    #issuedAtMs = null;
+    #pendingSolution = undefined;
+    #redeemClient = null;
+    #prepareHooks = null;
+    #transport;
+    #attestation = null;
+    #inFlight = null;
+    #prepareFlight = null;
+    #nowMs = () => Date.now();
+    #delay = defaultDelay;
+    #timeoutHandle = null;
+    #ttlHandle = null;
+    #expiryHandle = null;
+    #challengeExpired = false;
+    #submitHeld = false;
+    #abort = null;
+    #challenge = undefined;
+    #issueContext = null;
+    #downgraded = false;
+    #sessionActive = false;
+    #form = null;
+    #boundFormFocus = (event) => {
+        this.#onFormInteraction(event);
+    };
+    #boundFormKeydown = (event) => {
+        this.#onFormInteraction(event);
+    };
+    #boundFormSubmit = (event) => {
+        this.#onFormSubmit(event);
+    };
+    #boundInvalid = () => {
+        if (this.#holdEnabled()) {
+            this.#submitHeld = true;
+        }
+    };
+    constructor() {
+        super();
+        try {
+            this.#internals = this.attachInternals();
+        }
+        catch {
+            this.#internals = null;
+        }
+        applyTemplateToHost(this);
+        const root = this.attachShadow({ mode: "open" });
+        root.innerHTML = `<style>
+${combinedLookCss()}</style>
+<div class="gk-root">
+<label class="gk">
+  <input class="gk-box" type="checkbox" />
+  <span class="gk-label"></span>
+</label>
+<p class="gk-load"></p>
+</div>`;
+        this.#checkbox = root.querySelector("input[type=checkbox]");
+        this.#labelEl = root.querySelector("label.gk");
+        const notice = root.querySelector(".gk-load");
+        const id = nextId("gk-box");
+        const noticeId = nextId("gk-load");
+        if (notice instanceof HTMLElement) {
+            notice.id = noticeId;
+            notice.textContent = LOAD_NOTICE;
+        }
+        if (this.#checkbox) {
+            this.#checkbox.id = id;
+            this.#checkbox.setAttribute("aria-describedby", noticeId);
+            this.#checkbox.addEventListener("click", (event) => {
+                event.preventDefault();
+                void this.#onRedeemGesture();
+            });
+            this.#checkbox.addEventListener("keydown", (event) => {
+                if (event.key === " " || event.key === "Enter") {
+                    event.preventDefault();
+                    if (event.key === " ") {
+                        void this.#onRedeemGesture();
+                    }
+                }
+            });
+        }
+        if (this.#labelEl) {
+            this.#labelEl.htmlFor = id;
+        }
+        this.addEventListener("invalid", this.#boundInvalid);
+        this.#ensureHoneypot();
+        this.#writeFormValue(null);
+        this.#render();
+    }
+    connectedCallback() {
+        this.#bindForm();
+        if (this.#startMode() === "auto") {
+            queueMicrotask(() => {
+                void this.#beginPrepare();
+            });
+        }
+    }
+    disconnectedCallback() {
+        this.#unbindForm();
+        this.#clearTimeout();
+        this.#clearExpiry();
+        terminateTrackedWorkers();
+        this.#abort?.abort();
+        this.#sessionActive = false;
+        this.#prepareFlight = null;
+    }
+    get uiState() {
+        return this.#state;
+    }
+    /**
+     * T-204: UI-Zustand setzen, damit ARIA-Labels prüfbar sind.
+     */
+    applyUiState(state) {
+        if (!isWidgetUiState(state)) {
+            throw new TypeError(`unknown widget UI state: ${state}`);
+        }
+        this.#state = state;
+        this.#render();
+    }
+    get siteKey() {
+        return readSiteKey(this);
+    }
+    get baseUrl() {
+        return readBaseUrl(this);
+    }
+    get wasmUrl() {
+        return readWasmUrl(this);
+    }
+    setRedeemClient(client) {
+        this.#redeemClient = client;
+    }
+    setPrepareHooks(hooks) {
+        this.#prepareHooks = hooks;
+    }
+    setTransport(transport) {
+        this.#transport = transport;
+    }
+    setPendingSolution(solution) {
+        this.#pendingSolution = solution;
+    }
+    setNowMs(nowMs) {
+        this.#nowMs = nowMs;
+    }
+    setDelay(delay) {
+        this.#delay = delay;
+    }
+    getResponse() {
+        if (this.#honeypotFilled()) {
+            return null;
+        }
+        if (this.#token === null || this.isExpired()) {
+            return null;
+        }
+        return this.#token;
+    }
+    isExpired() {
+        if (this.#token === null || this.#issuedAtMs === null) {
+            return true;
+        }
+        return this.#nowMs() - this.#issuedAtMs >= TOKEN_TTL_MS;
+    }
+    /**
+     * T-210: fehlt die Lösung, zuerst Challenge/PoW.
+     * Checkbox-Klick löst ein, wenn die Lösung schon da ist.
+     */
+    async solve() {
+        await this.#beginPrepare();
+        return this.#redeemOnly();
+    }
+    reset() {
+        this.#clearTimeout();
+        this.#clearTtl();
+        this.#clearExpiry();
+        this.#challengeExpired = false;
+        this.#abort?.abort();
+        this.#abort = null;
+        this.#token = null;
+        this.#issuedAtMs = null;
+        this.#pendingSolution = undefined;
+        this.#inFlight = null;
+        this.#prepareFlight = null;
+        this.#challenge = undefined;
+        this.#issueContext = null;
+        this.#attestation = null;
+        this.#downgraded = false;
+        this.#sessionActive = false;
+        this.#submitHeld = false;
+        this.#writeFormValue(null);
+        this.applyUiState("idle");
+        this.dispatchEvent(new CustomEvent("gatekeep:reset", { bubbles: true, composed: true }));
+    }
+    attributeChangedCallback(name) {
+        if (name === "template") {
+            applyTemplateToHost(this);
+        }
+        this.#render();
+    }
+    #startMode() {
+        return parseStartMode(this.getAttribute("start-mode"));
+    }
+    #holdEnabled() {
+        return readSubmitHold(this);
+    }
+    #bindForm() {
+        this.#unbindForm();
+        const form = this.closest("form");
+        this.#form = form;
+        form?.addEventListener("focusin", this.#boundFormFocus);
+        form?.addEventListener("keydown", this.#boundFormKeydown);
+        form?.addEventListener("submit", this.#boundFormSubmit);
+    }
+    #unbindForm() {
+        this.#form?.removeEventListener("focusin", this.#boundFormFocus);
+        this.#form?.removeEventListener("keydown", this.#boundFormKeydown);
+        this.#form?.removeEventListener("submit", this.#boundFormSubmit);
+        this.#form = null;
+    }
+    #onFormSubmit(event) {
+        if (this.getResponse() !== null) {
+            return;
+        }
+        event.preventDefault();
+        if (this.#holdEnabled()) {
+            this.#submitHeld = true;
+        }
+    }
+    #onFormInteraction(event) {
+        if (this.#startMode() !== "interaction") {
+            return;
+        }
+        if (event.composedPath().includes(this)) {
+            return;
+        }
+        void this.#beginPrepare();
+    }
+    #fieldName() {
+        return fieldNameOf(this);
+    }
+    #ensureHoneypot() {
+        if (this.#honeypot) {
+            return;
+        }
+        const input = document.createElement("input");
+        input.type = "text";
+        input.name = HONEYPOT_FIELD;
+        input.autocomplete = "off";
+        input.tabIndex = -1;
+        input.setAttribute("aria-hidden", "true");
+        input.setAttribute("data-gatekeep-honeypot", "1");
+        input.style.position = "absolute";
+        input.style.left = "-9999px";
+        input.style.width = "1px";
+        input.style.height = "1px";
+        input.style.overflow = "hidden";
+        input.style.clipPath = "inset(50%)";
+        input.style.border = "0";
+        input.style.padding = "0";
+        input.style.margin = "0";
+        this.append(input);
+        this.#honeypot = input;
+    }
+    #honeypotFilled() {
+        this.#ensureHoneypot();
+        const root = this.#form ?? this;
+        const fields = root.querySelectorAll(`input[name="${HONEYPOT_FIELD}"]`);
+        for (let i = 0; i < fields.length; i += 1) {
+            const node = fields.item(i);
+            if (node instanceof HTMLInputElement && node.value.trim() !== "") {
+                return true;
+            }
+        }
+        return false;
+    }
+    #syncHidden(value) {
+        const fieldName = this.#fieldName();
+        if (!this.#hidden) {
+            const input = document.createElement("input");
+            input.type = "hidden";
+            this.append(input);
+            this.#hidden = input;
+        }
+        this.#hidden.value = value;
+        if (this.#internals) {
+            this.#hidden.removeAttribute("name");
+            this.#hidden.setAttribute("form", "");
+        }
+        else {
+            this.#hidden.name = fieldName;
+            this.#hidden.removeAttribute("form");
+        }
+    }
+    #writeFormValue(token) {
+        const fieldName = this.#fieldName();
+        if (this.#internals) {
+            if (!this.hasAttribute("name")) {
+                this.setAttribute("name", fieldName);
+            }
+            this.#internals.setFormValue(token);
+        }
+        this.#syncHidden(token ?? "");
+        this.#syncValidity();
+    }
+    #syncValidity() {
+        const token = this.getResponse();
+        const message = token === null
+            ? this.#challengeExpired
+                ? challengeExpiredMessage(this)
+                : missingTokenMessage(this)
+            : "";
+        if (this.#checkbox) {
+            this.#checkbox.setCustomValidity(message);
+        }
+        if (this.#hidden) {
+            this.#hidden.setCustomValidity(message);
+        }
+        if (!this.#internals) {
+            return;
+        }
+        try {
+            if (token === null) {
+                const box = this.#checkbox;
+                if (box) {
+                    this.#internals.setValidity({ customError: true }, message, box);
+                }
+                else {
+                    this.#internals.setValidity({ customError: true }, message);
+                }
+            }
+            else {
+                this.#internals.setValidity({});
+            }
+        }
+        catch {
+            // Internals-Validity nicht verfügbar; setCustomValidity bleibt.
+        }
+    }
+    #flushHeldSubmit() {
+        if (!this.#submitHeld) {
+            return;
+        }
+        this.#submitHeld = false;
+        if (!this.#holdEnabled()) {
+            return;
+        }
+        const form = this.#form ?? this.closest("form");
+        if (!form) {
+            return;
+        }
+        if (typeof form.requestSubmit === "function") {
+            form.requestSubmit();
+        }
+        else {
+            form.submit();
+        }
+    }
+    #emitError(errorCodes) {
+        this.dispatchEvent(new CustomEvent("gatekeep:error", {
+            bubbles: true,
+            composed: true,
+            detail: { errorCodes: [...errorCodes] },
+        }));
+    }
+    #emitStart() {
+        this.dispatchEvent(new CustomEvent("gatekeep:start", { bubbles: true, composed: true }));
+    }
+    #emitProgress(detail) {
+        this.dispatchEvent(new CustomEvent("gatekeep:progress", {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
+    }
+    #clearTimeout() {
+        this.#timeoutHandle?.cancel();
+        this.#timeoutHandle = null;
+    }
+    #clearTtl() {
+        this.#ttlHandle?.cancel();
+        this.#ttlHandle = null;
+    }
+    #clearExpiry() {
+        this.#expiryHandle?.cancel();
+        this.#expiryHandle = null;
+    }
+    #pendingExpired() {
+        return (isChallengeExpired(this.#challenge, this.#nowMs()) ||
+            isChallengeExpired(this.#pendingSolution, this.#nowMs()));
+    }
+    #armChallengeExpiry() {
+        this.#clearExpiry();
+        const expiresAt = expiresAtOf(this.#challenge);
+        if (expiresAt === null) {
+            return;
+        }
+        const delay = expiresAt - this.#nowMs();
+        if (delay <= 0) {
+            return;
+        }
+        this.#expiryHandle = this.#delay(() => {
+            this.#expiryHandle = null;
+            void this.#onChallengeTtl();
+        }, delay);
+    }
+    #clearSessionForRetry() {
+        this.#clearTimeout();
+        this.#clearExpiry();
+        this.#abort?.abort();
+        this.#abort = null;
+        this.#pendingSolution = undefined;
+        this.#challenge = undefined;
+        this.#issueContext = null;
+        this.#attestation = null;
+        this.#downgraded = false;
+        this.#sessionActive = false;
+        this.#prepareFlight = null;
+    }
+    async #reissueAfterExpiry() {
+        this.#challengeExpired = true;
+        this.applyUiState("timeout");
+        if (this.#pendingExpired() || this.#pendingSolution !== undefined) {
+            this.#emitError(["invalid_solution"]);
+            this.#clearSessionForRetry();
+        }
+        await this.#beginPrepare();
+    }
+    async #onChallengeTtl() {
+        if (this.getResponse() !== null) {
+            return;
+        }
+        if (this.#inFlight) {
+            return;
+        }
+        this.#challengeExpired = true;
+        this.applyUiState("timeout");
+        this.#emitError(["invalid_solution"]);
+        this.#clearSessionForRetry();
+        await this.#beginPrepare();
+    }
+    #armTimeout(issuedAtMs) {
+        this.#clearTimeout();
+        const delay = Math.max(0, issuedAtMs + HARD_TIMEOUT_MS - this.#nowMs());
+        this.#timeoutHandle = this.#delay(() => {
+            void this.#onHardTimeout();
+        }, delay);
+    }
+    #armTokenTtl() {
+        this.#clearTtl();
+        if (this.#issuedAtMs === null) {
+            return;
+        }
+        const delay = Math.max(0, this.#issuedAtMs + TOKEN_TTL_MS - this.#nowMs());
+        this.#ttlHandle = this.#delay(() => {
+            this.#ttlHandle = null;
+            this.reset();
+        }, delay);
+    }
+    async #beginPrepare() {
+        if (this.#honeypotFilled()) {
+            return;
+        }
+        if (this.#sessionActive) {
+            return this.#prepareFlight ?? Promise.resolve();
+        }
+        if (this.#prepareFlight) {
+            return this.#prepareFlight;
+        }
+        if (this.#pendingSolution !== undefined && this.#pendingSolution !== null) {
+            return;
+        }
+        if (!this.#effectiveHooks()) {
+            return;
+        }
+        this.#sessionActive = true;
+        const run = this.#prepareOnce();
+        this.#prepareFlight = run;
+        try {
+            await run;
+        }
+        finally {
+            if (this.#prepareFlight === run) {
+                this.#prepareFlight = null;
+            }
+        }
+    }
+    #boundClient() {
+        return createBoundClient(this, this.#transport);
+    }
+    #effectiveRedeemClient() {
+        return this.#redeemClient ?? this.#boundClient();
+    }
+    #defaultHooks() {
+        const client = this.#boundClient();
+        if (!client) {
+            return null;
+        }
+        const wasmUrl = this.wasmUrl;
+        return {
+            requestChallenge: (request) => client.requestChallenge(request),
+            solve: async (challenge, ctx) => {
+                const { runSolve } = await import("../pow/run.js");
+                return runSolve(challenge, {
+                    onProgress: ctx.onProgress,
+                    wasmUrl,
+                });
+            },
+        };
+    }
+    #effectiveHooks() {
+        return this.#prepareHooks ?? this.#defaultHooks();
+    }
+    async #prepareOnce() {
+        const hooks = this.#effectiveHooks();
+        if (!hooks) {
+            return;
+        }
+        this.#sessionActive = true;
+        this.#abort?.abort();
+        this.#abort = new AbortController();
+        const signal = this.#abort.signal;
+        const wasmUrl = this.wasmUrl;
+        this.#emitStart();
+        this.applyUiState("working");
+        try {
+            const issue = {
+                hostname: globalThis.location?.hostname || "localhost",
+                action: this.getAttribute("action") ?? "",
+                cdata: this.getAttribute("cdata") ?? "",
+            };
+            const challenge = await hooks.requestChallenge(issue);
+            if (signal.aborted) {
+                return;
+            }
+            this.#challenge = challenge;
+            this.#issueContext = { challenge, ...issue };
+            this.#attestation = await attestChallenge(challenge);
+            this.#downgraded = false;
+            this.#armTimeout(issuedAtOf(challenge, this.#nowMs()));
+            const solveStarted = this.#nowMs();
+            const solution = await hooks.solve(challenge, {
+                onProgress: (detail) => this.#emitProgress(detail),
+                signal,
+                wasmUrl,
+            });
+            if (signal.aborted) {
+                return;
+            }
+            this.#clearTimeout();
+            if (this.#issueContext === null) {
+                return;
+            }
+            const solveMs = Math.max(0, Math.round(this.#nowMs() - solveStarted));
+            this.#pendingSolution = mergeRedeemBody(solution, this.#attestation, {
+                ...this.#issueContext,
+                solveMs,
+            });
+            this.#challengeExpired = false;
+            this.#armChallengeExpiry();
+            if (this.#state === "working" || this.#state === "timeout") {
+                this.applyUiState("idle");
+            }
+        }
+        catch (err) {
+            if (isAbortError(err) || signal.aborted) {
+                return;
+            }
+            const codes = codesFromUnknown(err);
+            if ((isWasmOom(err) || codes.includes("challenge_timeout")) && !this.#downgraded) {
+                await this.#onHardTimeout();
+                return;
+            }
+            this.#clearTimeout();
+            this.applyUiState("error");
+            this.#emitError(codes);
+        }
+    }
+    async #onHardTimeout() {
+        this.#timeoutHandle = null;
+        if (this.#pendingSolution !== undefined && this.#pendingSolution !== null) {
+            return;
+        }
+        this.applyUiState("timeout");
+        if (this.#downgraded) {
+            this.#abort?.abort();
+            this.#emitError(["challenge_timeout"]);
+            return;
+        }
+        const hooks = this.#effectiveHooks();
+        const challenge = this.#challenge;
+        if (!hooks?.downgrade || challenge === undefined) {
+            this.#abort?.abort();
+            this.#downgraded = true;
+            this.#emitError(["challenge_timeout"]);
+            return;
+        }
+        this.#abort?.abort();
+        this.#abort = new AbortController();
+        const signal = this.#abort.signal;
+        this.#downgraded = true;
+        try {
+            const next = await hooks.downgrade(challenge, this.#nowMs());
+            if (signal.aborted) {
+                return;
+            }
+            this.#challenge = next;
+            if (this.#issueContext !== null) {
+                this.#issueContext = { ...this.#issueContext, challenge: next };
+            }
+            this.#armTimeout(issuedAtOf(next, this.#nowMs()));
+            this.#attestation = await attestChallenge(next);
+            const solveStarted = this.#nowMs();
+            const solution = await hooks.solve(next, {
+                onProgress: (detail) => this.#emitProgress(detail),
+                signal,
+                wasmUrl: this.wasmUrl,
+            });
+            if (signal.aborted) {
+                return;
+            }
+            this.#clearTimeout();
+            const context = this.#issueContext ?? {
+                challenge: next,
+                hostname: globalThis.location?.hostname || "localhost",
+            };
+            const solveMs = Math.max(0, Math.round(this.#nowMs() - solveStarted));
+            this.#pendingSolution = mergeRedeemBody(solution, this.#attestation, {
+                ...context,
+                solveMs,
+            });
+            this.#challengeExpired = false;
+            this.#armChallengeExpiry();
+            if (this.#state === "working" || this.#state === "timeout") {
+                this.applyUiState("idle");
+            }
+        }
+        catch (err) {
+            if (isAbortError(err) || signal.aborted) {
+                return;
+            }
+            this.#clearTimeout();
+            this.applyUiState("timeout");
+            this.#emitError(codesFromUnknown(err).includes("challenge_timeout")
+                ? ["challenge_timeout"]
+                : codesFromUnknown(err));
+        }
+    }
+    async #onRedeemGesture() {
+        try {
+            if (this.#pendingExpired() || this.#challengeExpired) {
+                await this.#reissueAfterExpiry();
+            }
+            await this.#beginPrepare();
+            if (this.#pendingSolution === undefined || this.#pendingSolution === null) {
+                return;
+            }
+            await this.#redeemOnly();
+        }
+        catch {
+            // Event trägt den Code; Gesture darf nicht als unhandled rejection enden.
+        }
+    }
+    async #redeemOnly() {
+        if (this.#inFlight) {
+            return this.#inFlight;
+        }
+        if (this.#token !== null && !this.isExpired()) {
+            return this.#token;
+        }
+        const run = this.#redeemOnce();
+        this.#inFlight = run;
+        try {
+            return await run;
+        }
+        finally {
+            if (this.#inFlight === run) {
+                this.#inFlight = null;
+            }
+        }
+    }
+    async #redeemOnce() {
+        if (this.#pendingExpired()) {
+            await this.#reissueAfterExpiry();
+        }
+        return this.#acceptRedeem(true);
+    }
+    async #acceptRedeem(allowExpiryRetry) {
+        if (this.#honeypotFilled()) {
+            this.#token = null;
+            this.#writeFormValue(null);
+            this.#emitError(["missing_token"]);
+            throw new WidgetRedeemError("missing_token", ["missing_token"]);
+        }
+        const client = this.#effectiveRedeemClient();
+        const solution = this.#pendingSolution;
+        if (!client || solution === undefined || solution === null) {
+            this.#emitError(["missing_token"]);
+            throw new WidgetRedeemError("missing_token", ["missing_token"]);
+        }
+        this.applyUiState("working");
+        try {
+            const result = await client.redeem(solution);
+            this.#challengeExpired = false;
+            this.#clearExpiry();
+            this.#token = result.token;
+            this.#issuedAtMs = this.#nowMs();
+            this.#writeFormValue(result.token);
+            this.applyUiState("success");
+            this.#armTokenTtl();
+            this.dispatchEvent(new CustomEvent("gatekeep:success", {
+                bubbles: true,
+                composed: true,
+                detail: { token: result.token },
+            }));
+            this.#flushHeldSubmit();
+            return result.token;
+        }
+        catch (err) {
+            if (err instanceof WidgetRedeemError) {
+                throw err;
+            }
+            const codes = codesFromUnknown(err);
+            if (allowExpiryRetry && codes.includes("invalid_solution") && this.#pendingExpired()) {
+                await this.#reissueAfterExpiry();
+                return this.#acceptRedeem(false);
+            }
+            this.#challengeExpired = false;
+            this.applyUiState("error");
+            this.#emitError(codes);
+            throw err instanceof Error
+                ? err
+                : new WidgetRedeemError("redeem failed", codes);
+        }
+    }
+    #captionText() {
+        if (this.#challengeExpired && (this.#state === "timeout" || this.#state === "error")) {
+            return challengeExpiredMessage(this);
+        }
+        return labelForHost(this, this.#state);
+    }
+    #render() {
+        const box = this.#checkbox;
+        const label = this.#labelEl;
+        if (!box || !label) {
+            return;
+        }
+        const text = this.#captionText();
+        box.setAttribute("aria-label", text);
+        box.setAttribute("aria-busy", this.#state === "working" ? "true" : "false");
+        box.checked = this.#state === "success";
+        const caption = label.querySelector(".gk-label");
+        if (caption) {
+            caption.textContent = text;
+        }
+        if (this.#internals) {
+            this.#internals.ariaLabel = text;
+        }
+        this.#syncValidity();
+    }
+}
+export function defineGatekeepWidget() {
+    if (!customElements.get(TAG)) {
+        customElements.define(TAG, GatekeepWidget);
+    }
+}
+//# sourceMappingURL=widget.js.map