@wtfalch/auth 0.20.0 → 0.23.0

package/dist/person-token.js

@@ -0,0 +1,191 @@
+import { createRemoteJWKSet, customFetch, jwtVerify } from 'jose';
+/** A JWT is three base64url segments; a ZITADEL opaque token is not shaped
+ *  like that at all, so this is enough to route between `jwtVerify` and
+ *  introspection without ever trying to parse either kind as the other. */
+const JWT_SHAPE = /^[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+\.[A-Za-z0-9_-]+$/;
+/** How long a positive introspection result is trusted before this host
+ *  checks again -- bounded well under the token's own `exp` so a revoked
+ *  token can't outlive a ZITADEL-side revocation for long. */
+const INTROSPECTION_CACHE_TTL_MS = 60_000;
+/** An optional endpoint from the discovery document, required to be on the
+ *  issuer's own origin -- a compromised or misconfigured discovery
+ *  response must never point signature checking, or a token's liveness,
+ *  at somebody else's server. */
+function sameOriginEndpoint(value, name, issuerOrigin) {
+    if (value === undefined)
+        return null;
+    if (typeof value !== 'string')
+        throw new Error(`person-token: ${name} is not a string`);
+    if (new URL(value).origin !== issuerOrigin)
+        throw new Error(`person-token: ${name} origin does not match the issuer`);
+    return value;
+}
+async function discoverDocument(issuer, fetchImpl) {
+    const discoveryUrl = `${issuer.replace(/\/$/, '')}/.well-known/openid-configuration`;
+    const issuerOrigin = new URL(issuer).origin;
+    const response = await fetchImpl(discoveryUrl);
+    if (!response.ok) {
+        throw new Error(`person-token: discovery document request failed with ${response.status}`);
+    }
+    const doc = (await response.json());
+    if (typeof doc.jwks_uri !== 'string') {
+        throw new Error('person-token: the issuer publishes no jwks_uri');
+    }
+    if (new URL(doc.jwks_uri).origin !== issuerOrigin) {
+        throw new Error('person-token: jwks_uri origin does not match the issuer');
+    }
+    return {
+        jwksUri: doc.jwks_uri,
+        introspectionEndpoint: sameOriginEndpoint(doc.introspection_endpoint, 'introspection_endpoint', issuerOrigin),
+    };
+}
+/**
+ * A size-bounded, least-recently-used, TTL cache for a positive
+ * introspection result only -- a refusal is never cached, so a transient
+ * issuer problem never sticks as "no" for whatever is left of the entry's
+ * life. Bounded so a flood of distinct garbage tokens cannot grow it
+ * without limit.
+ */
+class PositiveIntrospectionCache {
+    max;
+    entries = new Map();
+    constructor(max = 1000) {
+        this.max = max;
+    }
+    get(token, now) {
+        const entry = this.entries.get(token);
+        if (!entry)
+            return null;
+        if (entry.expiresAt <= now) {
+            this.entries.delete(token);
+            return null;
+        }
+        // Refresh recency: delete-then-set moves it to the end of the Map's
+        // iteration order, which eviction below reads from the front.
+        this.entries.delete(token);
+        this.entries.set(token, entry);
+        return entry.payload;
+    }
+    set(token, payload, expiresAt) {
+        this.entries.delete(token);
+        if (this.entries.size >= this.max) {
+            const oldest = this.entries.keys().next().value;
+            if (oldest !== undefined)
+                this.entries.delete(oldest);
+        }
+        this.entries.set(token, { payload, expiresAt });
+    }
+}
+export function createPersonTokenVerifier(config) {
+    const fetchImpl = config.fetch ?? fetch;
+    let discovery = null;
+    let jwks = null;
+    const introspectionCache = new PositiveIntrospectionCache();
+    const document = () => {
+        discovery ??= discoverDocument(config.issuer, fetchImpl).catch((error) => {
+            discovery = null;
+            throw error;
+        });
+        return discovery;
+    };
+    const keys = () => {
+        jwks ??= document()
+            .then((doc) => createRemoteJWKSet(new URL(doc.jwksUri), {
+            cooldownDuration: config.jwksCooldownMs ?? 5_000,
+            [customFetch]: (url, init) => fetchImpl(url, init),
+        }))
+            .catch((error) => {
+            jwks = null;
+            throw error;
+        });
+        return jwks;
+    };
+    async function verifyJwt(accessToken) {
+        try {
+            const keyset = await keys();
+            const { payload } = await jwtVerify(accessToken, keyset, {
+                issuer: config.issuer,
+                audience: config.audience,
+                algorithms: ['RS256'],
+                clockTolerance: 60,
+            });
+            return payload;
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * RFC 7662 token introspection for an opaque access token: POSTs
+     * `token=<accessToken>` to the issuer's `introspection_endpoint`,
+     * authenticating as this resource server with `client_secret_basic`.
+     * Fails closed on anything that keeps this from reaching a real
+     * `active`/`exp`/`aud` verdict: no credentials configured, no endpoint
+     * published, a network failure, a non-2xx response, or an unparseable
+     * body -- every one of those returns `null`, refused, never accepted.
+     */
+    async function introspect(accessToken) {
+        if (!config.introspectionClientId || !config.introspectionClientSecret)
+            return null;
+        const now = Date.now();
+        const cached = introspectionCache.get(accessToken, now);
+        if (cached)
+            return cached;
+        let endpoint;
+        try {
+            ({ introspectionEndpoint: endpoint } = await document());
+        }
+        catch {
+            return null;
+        }
+        if (!endpoint)
+            return null;
+        const credentials = Buffer.from(`${config.introspectionClientId}:${config.introspectionClientSecret}`).toString('base64');
+        let response;
+        try {
+            response = await fetchImpl(endpoint, {
+                method: 'POST',
+                headers: {
+                    'content-type': 'application/x-www-form-urlencoded',
+                    authorization: `Basic ${credentials}`,
+                },
+                body: new URLSearchParams({ token: accessToken }).toString(),
+            });
+        }
+        catch {
+            return null;
+        }
+        if (!response.ok)
+            return null;
+        let body;
+        try {
+            body = (await response.json());
+        }
+        catch {
+            return null;
+        }
+        if (body.active !== true)
+            return null;
+        if (typeof body.exp !== 'number' || body.exp <= now / 1000)
+            return null;
+        const aud = body.aud;
+        const audiences = Array.isArray(aud) ? aud : aud === undefined ? [] : [aud];
+        if (!audiences.includes(config.audience))
+            return null;
+        if (typeof body.iss === 'string' && body.iss !== config.issuer)
+            return null;
+        const payload = body;
+        introspectionCache.set(accessToken, payload, Math.min(body.exp * 1000, now + INTROSPECTION_CACHE_TTL_MS));
+        return payload;
+    }
+    return {
+        async verify(accessToken) {
+            const payload = JWT_SHAPE.test(accessToken)
+                ? await verifyJwt(accessToken)
+                : await introspect(accessToken);
+            if (!payload || typeof payload.sub !== 'string' || !payload.sub)
+                return null;
+            return { sub: payload.sub };
+        },
+    };
+}

package/dist/qr-door-scene.d.ts

@@ -0,0 +1,66 @@
+export type QrDoorMark = 'agora' | 'boule' | 'archon';
+export interface QrDoorTheme {
+    ink: string;
+    accent: string;
+    paper: string;
+}
+export declare const QR_DOOR_THEME: QrDoorTheme;
+/** Side of the logical drawing space. */
+export declare const QR_DOOR_SIZE = 360;
+/** Half-width of the clearing the doorway sits in. */
+export declare const QR_DOOR_CLEARING = 25;
+/** Largest QR version allowed: version 7 and up put an alignment pattern dead centre, under the door. */
+export declare const QR_DOOR_MAX_VERSION = 6;
+/** Length of the approval animation. */
+export declare const QR_DOOR_DURATION: number;
+export interface QrDoorPoint {
+    x: number;
+    y: number;
+}
+export interface QrDoorPiece {
+    /** Index into `dots` of the module that lifts out. */
+    src: number;
+    sx: number;
+    sy: number;
+    tx: number;
+    ty: number;
+    /** Delay before it lifts, seconds. */
+    dl: number;
+}
+export interface QrDoorScene {
+    mark: QrDoorMark;
+    /** The error-correction level used, highest that keeps the version at or under `QR_DOOR_MAX_VERSION`. */
+    errorCorrection: 'Q' | 'M' | 'L';
+    version: number;
+    /** Modules per side, and module size in logical px. */
+    modules: number;
+    moduleSize: number;
+    /** Dark data modules, finders and the clearing left out. */
+    dots: QrDoorPoint[];
+    /** Centres of the three finder eyes. */
+    finders: QrDoorPoint[];
+    pieces: QrDoorPiece[];
+    camera: {
+        Zg: number;
+        zg: number;
+        Dp: number;
+        kk: number;
+        zf: number;
+        t1: number;
+    };
+}
+/**
+ * Builds the scene for `url` (the device grant's verification URL). Tries
+ * error correction Q, then M, then L, keeping the first that fits in version 6.
+ * The clearing knocks out about 3% of modules, well inside even L's 7%.
+ * Throws a `RangeError` for a URL too long for version 6 at any level.
+ */
+export declare function buildQrDoorScene(url: string, mark: QrDoorMark): QrDoorScene;
+/** Icon size (logical px) at time `t` after approval. Continuous by construction. */
+export declare function qrDoorIconSize(scene: QrDoorScene, t: number): number;
+type Ctx = CanvasRenderingContext2D;
+/** The code at rest, waiting for the phone. */
+export declare function drawQrDoorRest(c: Ctx, s: QrDoorScene, th?: QrDoorTheme): void;
+/** The frame `t` seconds after approval; `t` is clamped to `[0, QR_DOOR_DURATION]`. */
+export declare function drawQrDoorScene(c: Ctx, s: QrDoorScene, time: number, th?: QrDoorTheme): void;
+export {};

package/dist/qr-door-scene.js

@@ -0,0 +1,404 @@
+/**
+ * "The code builds the door": the QR sign-in code, and the short animation it
+ * plays once the phone approves. Framework-free canvas drawing; `./qr-door`
+ * wraps it in a React component.
+ *
+ * At rest it is an ordinary, scannable QR code for the device grant's `url`
+ * with a small clearing in the middle. On approval, modules lift out of the
+ * code and land on the outline of the app's mark, the solid line traces in
+ * behind them, a person (the mark's red dot) steps into the doorway, and one
+ * perspective camera move carries you through it to the app's icon.
+ *
+ * Everything is drawn in a fixed 360×360 logical space; the caller sets the
+ * canvas transform for its size and devicePixelRatio. `buildQrDoorScene` does
+ * the one-off work (QR matrix, which module flies where, the camera solve) and
+ * is plain data, safe on a server. `drawQrDoorRest` and `drawQrDoorScene` need
+ * a canvas and are a pure function of (scene, t): scrub, test or freeze them.
+ *
+ * Browser file for drawing: nothing here touches OIDC, cookies or `node:`.
+ */
+import QRCode from 'qrcode';
+const MARKS = {
+    agora: {
+        d: 'M5.6 18.2V12.6a6.4 6.4 0 0 1 12.8 0V18.2',
+        dot: [12, 15.1],
+        len: 31.3,
+        hc: [12, 13.4],
+        hr: 5.2,
+        segs: [
+            ['L', 5.6, 18.2, 5.6, 12.6],
+            ['A', 12, 12.6, 6.4, 180, 360],
+            ['L', 18.4, 12.6, 18.4, 18.2],
+        ],
+        hole: 'M7.3 18.2V12.6a4.7 4.7 0 0 1 9.4 0V18.2Z',
+    },
+    boule: {
+        d: 'M8.6 17.89A6.8 6.8 0 1 1 15.4 17.89',
+        dot: [12, 12],
+        len: 35.6,
+        hc: [12, 12],
+        hr: 5.1,
+        segs: [['A', 12, 12, 6.8, 120, 420]],
+        hole: 'M6.9 12a5.1 5.1 0 1 0 10.2 0a5.1 5.1 0 1 0 -10.2 0Z',
+    },
+    archon: {
+        d: 'M9.3 19.28A5.4 5.4 0 1 1 14.7 19.28',
+        dot: [12, 4.3],
+        len: 28.3,
+        hc: [12, 14.6],
+        hr: 3.7,
+        segs: [['A', 12, 14.6, 5.4, 120, 420]],
+        hole: 'M8.3 14.6a3.7 3.7 0 1 0 7.4 0a3.7 3.7 0 1 0 -7.4 0Z',
+    },
+};
+export const QR_DOOR_THEME = { ink: '#1D1B16', accent: '#B23A0C', paper: '#F6F3EC' };
+/* ---------- geometry (logical px) ---------- */
+/** Side of the logical drawing space. */
+export const QR_DOOR_SIZE = 360;
+const L = QR_DOOR_SIZE;
+const C0 = L / 2;
+const CODE = 290;
+const O = (L - CODE) / 2;
+const ICON = 228;
+const TAU = Math.PI * 2;
+/** Icon units to px for the doorway drawn in the code. */
+const S1 = 2.9;
+/** Half-width of the clearing the doorway sits in. */
+export const QR_DOOR_CLEARING = 25;
+/** Icon size when first seen through the doorway, and the instant the doorway clears the stage. */
+const START = 9;
+const S0 = 88;
+/** Finder-eye corner rounding. Above about 0.5 strict decoders stop finding the eyes. */
+const EYE_ROUND = 0.4;
+/** Largest QR version allowed: version 7 and up put an alignment pattern dead centre, under the door. */
+export const QR_DOOR_MAX_VERSION = 6;
+/* ---------- timeline (seconds after approval) ---------- */
+const WALK = 0.95;
+const DOLLY = 1.55;
+/** Length of the approval animation. */
+export const QR_DOOR_DURATION = WALK + DOLLY + 0.3;
+/* ---------- easing ---------- */
+const clamp = (v, a = 0, b = 1) => (v < a ? a : v > b ? b : v);
+const seg = (u, a, b) => clamp((u - a) / (b - a));
+const lerp = (a, b, t) => a + (b - a) * t;
+const io = (t) => (t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2);
+const sine = (t) => -(Math.cos(Math.PI * t) - 1) / 2;
+const back = (t) => 1 + 2.5 * (t - 1) ** 3 + 1.5 * (t - 1) ** 2;
+/**
+ * Builds the scene for `url` (the device grant's verification URL). Tries
+ * error correction Q, then M, then L, keeping the first that fits in version 6.
+ * The clearing knocks out about 3% of modules, well inside even L's 7%.
+ * Throws a `RangeError` for a URL too long for version 6 at any level.
+ */
+export function buildQrDoorScene(url, mark) {
+    const geo = MARKS[mark];
+    let qr = null;
+    let errorCorrection = 'Q';
+    for (const level of ['Q', 'M', 'L']) {
+        const candidate = QRCode.create(url, { errorCorrectionLevel: level });
+        if (candidate.version <= QR_DOOR_MAX_VERSION) {
+            qr = candidate;
+            errorCorrection = level;
+            break;
+        }
+    }
+    if (!qr) {
+        throw new RangeError(`qr-door: ${url.length} characters needs a QR version above ${QR_DOOR_MAX_VERSION}`);
+    }
+    const n = qr.modules.size;
+    const data = qr.modules.data;
+    const m = CODE / n;
+    const isFinder = (x, y) => (x < 7 && y < 7) || (x > n - 8 && y < 7) || (x < 7 && y > n - 8);
+    const dots = [];
+    for (let y = 0; y < n; y++) {
+        for (let x = 0; x < n; x++) {
+            if (!data[y * n + x] || isFinder(x, y))
+                continue;
+            const px = O + (x + 0.5) * m;
+            const py = O + (y + 0.5) * m;
+            if (Math.abs(px - C0) < QR_DOOR_CLEARING && Math.abs(py - C0) < QR_DOOR_CLEARING)
+                continue;
+            dots.push({ x: px, y: py });
+        }
+    }
+    const finders = [
+        [0, 0],
+        [n - 7, 0],
+        [0, n - 7],
+    ].map(([fx, fy]) => ({ x: O + (fx + 3.5) * m, y: O + (fy + 3.5) * m }));
+    // Sample the outline evenly and give each sample the nearest module not yet taken.
+    const poly = [];
+    for (const s of geo.segs) {
+        if (s[0] === 'L') {
+            for (let i = 0; i <= 30; i++)
+                poly.push([lerp(s[1], s[3], i / 30), lerp(s[2], s[4], i / 30)]);
+        }
+        else {
+            for (let i = 0; i <= 120; i++) {
+                const a = ((s[4] + ((s[5] - s[4]) * i) / 120) * Math.PI) / 180;
+                poly.push([s[1] + s[3] * Math.cos(a), s[2] + s[3] * Math.sin(a)]);
+            }
+        }
+    }
+    const cum = [0];
+    for (let i = 1; i < poly.length; i++)
+        cum.push(cum[i - 1] + Math.hypot(poly[i][0] - poly[i - 1][0], poly[i][1] - poly[i - 1][1]));
+    const len = cum[cum.length - 1];
+    const count = Math.ceil((len * S1) / 3.6);
+    const used = new Set();
+    const pieces = [];
+    for (let j = 0; j < count; j++) {
+        const l = (j / (count - 1)) * len;
+        let q = 1;
+        while (q < cum.length - 1 && cum[q] < l)
+            q++;
+        const a = poly[q - 1];
+        const b = poly[q];
+        const f = clamp((l - cum[q - 1]) / (cum[q] - cum[q - 1] || 1));
+        const tx = C0 + (lerp(a[0], b[0], f) - geo.hc[0]) * S1;
+        const ty = C0 + (lerp(a[1], b[1], f) - geo.hc[1]) * S1;
+        let best = -1;
+        let bd = Number.POSITIVE_INFINITY;
+        for (let d = 0; d < dots.length; d++) {
+            if (used.has(d))
+                continue;
+            const dd = Math.hypot(dots[d].x - tx, dots[d].y - ty);
+            if (dd < bd) {
+                bd = dd;
+                best = d;
+            }
+        }
+        used.add(best);
+        pieces.push({ src: best, sx: dots[best].x, sy: dots[best].y, tx, ty, dl: (j / count) * 0.32 });
+    }
+    // One perspective camera: the code is a plane at depth 1, the icon at depth Dp.
+    // Solved so the icon is START px when first seen, S0 px the instant the doorway
+    // fills the stage, and ICON px at rest -- no hand-off between two zooms.
+    const Zg = (1.06 * 255) / (geo.hr * S1);
+    const zg = 1 - 1 / Zg;
+    const Dp = (zg * S0) / (S0 - START);
+    const kk = START * Dp;
+    const zf = Dp - kk / ICON;
+    let lo = 0;
+    let hi = 1;
+    for (let i = 0; i < 30; i++) {
+        const mid = (lo + hi) / 2;
+        if (io(mid) * zf < zg)
+            lo = mid;
+        else
+            hi = mid;
+    }
+    return {
+        mark,
+        errorCorrection,
+        version: qr.version,
+        modules: n,
+        moduleSize: m,
+        dots,
+        finders,
+        pieces,
+        camera: { Zg, zg, Dp, kk, zf, t1: WALK + DOLLY * hi },
+    };
+}
+/** Icon size (logical px) at time `t` after approval. Continuous by construction. */
+export function qrDoorIconSize(scene, t) {
+    const c = scene.camera;
+    const z = c.zf * io(seg(t, WALK, WALK + DOLLY));
+    return c.kk / (c.Dp - z);
+}
+const paths = new Map();
+function pathsFor(mark) {
+    let p = paths.get(mark);
+    if (!p) {
+        p = { stroke: new Path2D(MARKS[mark].d), hole: new Path2D(MARKS[mark].hole) };
+        paths.set(mark, p);
+    }
+    return p;
+}
+function rr(c, x, y, w, h, r) {
+    c.moveTo(x + r, y);
+    c.arcTo(x + w, y, x + w, y + h, r);
+    c.arcTo(x + w, y + h, x, y + h, r);
+    c.arcTo(x, y + h, x, y, r);
+    c.arcTo(x, y, x + w, y, r);
+    c.closePath();
+}
+function finder(c, s, p, th) {
+    const M = s.moduleSize;
+    const h = 3.5 * M;
+    c.save();
+    c.translate(p.x - h, p.y - h);
+    c.fillStyle = th.ink;
+    c.beginPath();
+    rr(c, 0, 0, 7 * M, 7 * M, 1.6 * M * EYE_ROUND);
+    rr(c, M, M, 5 * M, 5 * M, 0.8 * M * EYE_ROUND);
+    c.fill('evenodd');
+    c.beginPath();
+    rr(c, 2 * M, 2 * M, 3 * M, 3 * M, 0.75 * M * EYE_ROUND);
+    c.fill();
+    c.restore();
+}
+function circles(c, xyr, color) {
+    c.fillStyle = color;
+    c.beginPath();
+    for (let i = 0; i < xyr.length; i += 3) {
+        const r = xyr[i + 2];
+        if (r <= 0.1)
+            continue;
+        c.moveTo(xyr[i] + r, xyr[i + 1]);
+        c.arc(xyr[i], xyr[i + 1], r, 0, TAU);
+    }
+    c.fill();
+}
+function stroke(c, s, th, dash) {
+    c.lineWidth = 3.4;
+    c.lineCap = 'round';
+    c.strokeStyle = th.ink;
+    if (dash)
+        c.setLineDash(dash);
+    c.stroke(pathsFor(s.mark).stroke);
+    c.setLineDash([]);
+}
+function icon(c, s, th, size) {
+    const k = size / 24;
+    c.save();
+    c.translate(C0 - size / 2, C0 - size / 2);
+    c.scale(k, k);
+    c.save();
+    c.shadowColor = 'rgba(29,27,22,.16)';
+    c.shadowBlur = 18 / k;
+    c.shadowOffsetY = 6 / k;
+    c.beginPath();
+    rr(c, 0.25, 0.25, 23.5, 23.5, 5.4);
+    c.fillStyle = th.paper;
+    c.fill();
+    c.shadowColor = 'transparent';
+    c.lineWidth = 0.2;
+    c.strokeStyle = 'rgba(29,27,22,.14)';
+    c.stroke();
+    c.restore();
+    stroke(c, s, th);
+    c.restore();
+}
+/** The code at rest, waiting for the phone. */
+export function drawQrDoorRest(c, s, th = QR_DOOR_THEME) {
+    c.fillStyle = th.paper;
+    c.fillRect(0, 0, L, L);
+    const r = 0.42 * s.moduleSize;
+    const a = [];
+    for (const p of s.dots)
+        a.push(p.x, p.y, r);
+    circles(c, a, th.ink);
+    for (const f of s.finders)
+        finder(c, s, f, th);
+}
+/** The frame `t` seconds after approval; `t` is clamped to `[0, QR_DOOR_DURATION]`. */
+export function drawQrDoorScene(c, s, time, th = QR_DOOR_THEME) {
+    const t = clamp(time, 0, QR_DOOR_DURATION);
+    const geo = MARKS[s.mark];
+    const cam = s.camera;
+    const hc = geo.hc;
+    const R0 = 0.42 * s.moduleSize;
+    const halfLine = 1.7 * S1;
+    const { hole: holePath } = pathsFor(s.mark);
+    // The opening: modules fly onto the outline; the line traces in behind the landings.
+    // Each lands at exactly half the line's width, so there is no cross-fade to see.
+    const trace = clamp((t - 0.345) / 0.32);
+    const hole = io(seg(t, 0.55, 0.8));
+    const arrive = back(seg(t, 0.72, 0.95));
+    const lifted = new Set();
+    for (const p of s.pieces)
+        if (t > p.dl)
+            lifted.add(p.src);
+    // The walk: one camera for both planes.
+    const z = cam.zf * io(seg(t, WALK, WALK + DOLLY));
+    const gone = z >= cam.zg;
+    const zoom = gone ? cam.Zg : 1 / (1 - z);
+    const isz = cam.kk / (cam.Dp - z);
+    const k = isz / ICON;
+    // Far side: dotted ground and the icon, visible through the doorway from the start of the walk.
+    c.fillStyle = th.paper;
+    c.fillRect(0, 0, L, L);
+    const sp = Math.max(22 * k, 4.5);
+    const dr = sp * 0.05;
+    const g0 = C0 - Math.ceil(C0 / sp) * sp;
+    c.fillStyle = 'rgba(29,27,22,.13)';
+    c.beginPath();
+    for (let gx = g0; gx < L + sp; gx += sp) {
+        for (let gy = g0; gy < L + sp; gy += sp) {
+            c.moveTo(gx + dr, gy);
+            c.arc(gx, gy, dr, 0, TAU);
+        }
+    }
+    c.fill();
+    const iconAlpha = sine(seg(t, WALK - 0.1, WALK + 0.35));
+    if (iconAlpha > 0) {
+        c.save();
+        c.globalAlpha = iconAlpha;
+        icon(c, s, th, isz);
+        c.restore();
+    }
+    // The person: from the doorway to the icon's own dot, then rides with it.
+    const w = io(seg(t, WALK, cam.t1));
+    const px = lerp(C0 + (geo.dot[0] - hc[0]) * S1, C0 + ((geo.dot[0] - 12) * isz) / 24, w);
+    const py = lerp(C0 + (geo.dot[1] - hc[1]) * S1, C0 + ((geo.dot[1] - 12) * isz) / 24, w);
+    const pr = lerp(2.6 * S1 * arrive, (2.6 * isz) / 24, w);
+    // Near side: the code, the doorway cut out of it, rushing past the camera.
+    if (!gone) {
+        c.save();
+        c.translate(C0, C0);
+        c.scale(zoom, zoom);
+        c.translate(-C0, -C0);
+        c.save();
+        const clip = new Path2D();
+        clip.rect(-4000, -4000, 8000 + L, 8000 + L);
+        if (hole > 0) {
+            clip.addPath(holePath, new DOMMatrix()
+                .translate(C0 - hc[0] * S1, C0 - hc[1] * S1)
+                .scale(S1)
+                .translate(hc[0], hc[1])
+                .scale(hole)
+                .translate(-hc[0], -hc[1]));
+        }
+        c.clip(clip, 'evenodd');
+        c.fillStyle = th.paper;
+        c.fillRect(-4000, -4000, 8000 + L, 8000 + L);
+        const rest = [];
+        s.dots.forEach((p, i) => {
+            if (!lifted.has(i))
+                rest.push(p.x, p.y, R0);
+        });
+        circles(c, rest, th.ink);
+        for (const f of s.finders)
+            finder(c, s, f, th);
+        c.restore();
+        if (trace < 1) {
+            const fly = [];
+            for (const p of s.pieces) {
+                if (t <= p.dl)
+                    continue;
+                const e = io(seg(t, p.dl, p.dl + 0.32));
+                const lift = Math.sin(Math.PI * e) * 10;
+                fly.push(lerp(p.sx, p.tx, e), lerp(p.sy, p.ty, e) - lift, lerp(R0, halfLine, e));
+            }
+            circles(c, fly, th.ink);
+        }
+        c.restore();
+    }
+    if (pr > 0.1) {
+        c.fillStyle = th.accent;
+        c.beginPath();
+        c.arc(px, py, pr, 0, TAU);
+        c.fill();
+    }
+    if (!gone && trace > 0) {
+        c.save();
+        c.translate(C0, C0);
+        c.scale(zoom, zoom);
+        c.translate(-C0, -C0);
+        c.translate(C0 - hc[0] * S1, C0 - hc[1] * S1);
+        c.scale(S1, S1);
+        stroke(c, s, th, trace < 1 ? [geo.len * trace, geo.len * 2] : undefined);
+        c.restore();
+    }
+}

package/dist/qr-door.d.ts

@@ -0,0 +1,15 @@
+import { type QrDoorMark, type QrDoorTheme } from './qr-door-scene.js';
+export { QR_DOOR_DURATION, QR_DOOR_THEME, type QrDoorMark, type QrDoorScene, type QrDoorTheme, buildQrDoorScene, drawQrDoorRest, drawQrDoorScene, } from './qr-door-scene.js';
+export interface QrDoorProps {
+    /** What the phone scans: `startQrSignIn()`'s `url`. */
+    url: string;
+    /** Whose door: the app's mark. */
+    mark: QrDoorMark;
+    /** True once `pollQrSignIn()` answered `signed_in`. */
+    approved: boolean;
+    /** Called when the walk-through ends, or at once under reduced motion. Navigate here. */
+    onDone?: () => void;
+    theme?: Partial<QrDoorTheme>;
+    className?: string;
+}
+export declare function QrDoor({ url, mark, approved, onDone, theme, className }: QrDoorProps): import("react/jsx-runtime").JSX.Element;