@vitrinka/web 0.1.0

package/build/recorder/config.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Runtime configuration — the web recorder has no build-time env baking (the
+ * host app hands `url` to `VitrinkaRecorderRoot`, typically from
+ * `NEXT_PUBLIC_VITRINKA_URL`), so the API client reads the target from here.
+ *
+ * AUTH: the bearer is either an explicit `recorderKey` prop (an admin-minted
+ * `vkr_` recorder key — CI, e2e, unattended builds) or, when none is passed,
+ * the token minted by the DEVICE LINK (`@vitrinka/link`) and stored under
+ * `vitrinka.recorder.link`. Both are ingest-only `vkr_` tokens; the package
+ * treats them as opaque strings and never inspects the prefix.
+ */
+import type { Linked } from '@vitrinka/link';
+export interface RecorderConfig {
+    /** vitrinka base URL, trailing slash stripped. */
+    url: string;
+    /** An explicit recorder key; empty = use the stored device link. */
+    key?: string;
+    /** Reported in session meta (`appVersion`). */
+    appVersion?: string;
+    /** Explicit server lane; omitted = the key's project rule decides. */
+    environment?: string;
+    /** Device-link label; defaults to `<browser> on <os> · <host>`. */
+    label?: string;
+}
+export declare function configureRecorder(next: RecorderConfig): void;
+export declare function recorderConfig(): Readonly<RecorderConfig>;
+/** The recorder is enabled by the URL alone; auth comes from a key or a link. */
+export declare function vitrinkaConfigured(): boolean;
+/** Recorder's own traffic — the network capture layer must skip it. */
+export declare function isVitrinkaUrl(url: string): boolean;
+/** Storage key of the linked token (`vitrinka.recorder.link` in localStorage). */
+export declare const LINK_KEY = "link";
+export declare function readLink(): Linked | null;
+export declare function storeLink(link: Linked): void;
+export declare function clearLink(): void;
+/** Has the recorder something to authenticate with? */
+export declare function vitrinkaLinked(): boolean;
+/** The bearer for the session doors: the explicit key wins over the link. */
+export declare function bearerToken(): string;
+/** Device-link label from the UA — deliberately simple, no parser dependency. */
+export declare function defaultLinkLabel(): string;
+/**
+ * Read the conventional env pair when the host app did not pass props. Written
+ * as literal `process.env.NEXT_PUBLIC_*` reads so a Next/webpack/Vite define
+ * step can inline them; guarded so a runtime without `process` reads nothing.
+ */
+export declare function envConfig(): {
+    url: string;
+    key: string;
+};

package/build/recorder/config.js

@@ -0,0 +1,100 @@
+import { notify } from './state';
+import { getRecorderStorage } from './storage';
+const config = { url: '', key: '' };
+export function configureRecorder(next) {
+    config.url = next.url.replace(/\/+$/, '');
+    config.key = next.key ?? '';
+    config.appVersion = next.appVersion;
+    config.environment = next.environment;
+    config.label = next.label;
+}
+export function recorderConfig() {
+    return config;
+}
+/** The recorder is enabled by the URL alone; auth comes from a key or a link. */
+export function vitrinkaConfigured() {
+    return config.url !== '';
+}
+/** Recorder's own traffic — the network capture layer must skip it. */
+export function isVitrinkaUrl(url) {
+    return config.url !== '' && url.startsWith(config.url);
+}
+// -- the stored device link --------------------------------------------------
+/** Storage key of the linked token (`vitrinka.recorder.link` in localStorage). */
+export const LINK_KEY = 'link';
+export function readLink() {
+    const raw = getRecorderStorage().getString(LINK_KEY);
+    if (!raw)
+        return null;
+    try {
+        const l = JSON.parse(raw);
+        return typeof l.token === 'string' && l.token ? l : null;
+    }
+    catch {
+        return null;
+    }
+}
+export function storeLink(link) {
+    getRecorderStorage().set(LINK_KEY, JSON.stringify(link));
+    notify();
+}
+export function clearLink() {
+    getRecorderStorage().remove(LINK_KEY);
+    notify();
+}
+/** Has the recorder something to authenticate with? */
+export function vitrinkaLinked() {
+    return Boolean(config.key) || readLink() !== null;
+}
+/** The bearer for the session doors: the explicit key wins over the link. */
+export function bearerToken() {
+    return config.key || readLink()?.token || '';
+}
+/** Device-link label from the UA — deliberately simple, no parser dependency. */
+export function defaultLinkLabel() {
+    if (config.label)
+        return config.label;
+    const ua = globalThis.navigator?.userAgent ?? '';
+    const browser = /Edg\//.test(ua)
+        ? 'Edge'
+        : /OPR\//.test(ua)
+            ? 'Opera'
+            : /Chrome\//.test(ua)
+                ? 'Chrome'
+                : /Firefox\//.test(ua)
+                    ? 'Firefox'
+                    : /Safari\//.test(ua)
+                        ? 'Safari'
+                        : 'Browser';
+    const os = /iPhone|iPad/.test(ua)
+        ? 'iOS'
+        : /Android/.test(ua)
+            ? 'Android'
+            : /Mac OS X/.test(ua)
+                ? 'macOS'
+                : /Windows/.test(ua)
+                    ? 'Windows'
+                    : /Linux/.test(ua)
+                        ? 'Linux'
+                        : 'unknown OS';
+    const host = globalThis.location?.host ?? '';
+    return `${browser} on ${os}${host ? ` · ${host}` : ''}`;
+}
+/**
+ * Read the conventional env pair when the host app did not pass props. Written
+ * as literal `process.env.NEXT_PUBLIC_*` reads so a Next/webpack/Vite define
+ * step can inline them; guarded so a runtime without `process` reads nothing.
+ */
+export function envConfig() {
+    try {
+        if (typeof process === 'undefined' || !process.env)
+            return { url: '', key: '' };
+        return {
+            url: process.env.NEXT_PUBLIC_VITRINKA_URL ?? '',
+            key: process.env.NEXT_PUBLIC_VITRINKA_KEY ?? '',
+        };
+    }
+    catch {
+        return { url: '', key: '' };
+    }
+}

package/build/recorder/control.d.ts

@@ -0,0 +1,29 @@
+import { type StartOptions } from './session';
+export interface RecorderStatus {
+    recording: boolean;
+    sessionId?: string;
+    project?: string;
+    environment?: string;
+    title?: string;
+    boardUrl?: string;
+    paused?: boolean;
+    dead?: boolean;
+    deadReason?: string;
+    elapsedMs?: number;
+    events?: number;
+    queued?: number;
+    synced?: boolean;
+    healthState?: string;
+}
+export interface RecorderControl {
+    start(opts?: StartOptions): Promise<RecorderStatus>;
+    pause(): Promise<boolean>;
+    stop(): Promise<{
+        boardUrl?: string;
+    } & RecorderStatus>;
+    note(text: string): void;
+    status(): RecorderStatus;
+}
+export declare function snapshot(): RecorderStatus;
+export declare const CONTROL_KEY = "__vitrinkaRecorder";
+export declare function installControl(): () => void;

package/build/recorder/control.js

@@ -0,0 +1,63 @@
+/**
+ * Programmatic control handle — `window.__vitrinkaRecorder`. The web sibling
+ * of the Expo recorder's devtools channel: an agent driving the page with
+ * Playwright can start a journey, drop notes and stop it without touching
+ * the HUD, and read a status snapshot back.
+ */
+import { getState, health } from './queue';
+import { addNote, elapsedOf, startSession, stopSession, togglePause } from './session';
+export function snapshot() {
+    const rec = getState();
+    if (!rec)
+        return { recording: false };
+    const h = health();
+    return {
+        recording: true,
+        sessionId: rec.sessionId,
+        project: rec.project,
+        environment: rec.environment,
+        title: rec.title,
+        boardUrl: rec.boardUrl,
+        paused: rec.paused,
+        dead: Boolean(rec.dead),
+        deadReason: rec.deadReason ?? '',
+        elapsedMs: elapsedOf(rec),
+        events: rec.seq,
+        queued: h.queued,
+        synced: h.synced,
+        healthState: h.state,
+    };
+}
+export const CONTROL_KEY = '__vitrinkaRecorder';
+export function installControl() {
+    const control = {
+        async start(opts = {}) {
+            // Idempotent: a second start must not orphan the first recording.
+            if (getState())
+                throw new Error('vitrinka: a session is already recording');
+            await startSession(opts);
+            return snapshot();
+        },
+        pause: () => togglePause(),
+        async stop() {
+            const captured = snapshot();
+            const done = await stopSession();
+            return { ...captured, boardUrl: done?.board?.url ?? captured.boardUrl };
+        },
+        note(text) {
+            const t = text.trim();
+            if (!getState())
+                throw new Error('vitrinka: no session is recording');
+            if (!t)
+                throw new Error('vitrinka: note text is empty');
+            addNote(t);
+        },
+        status: snapshot,
+    };
+    const g = globalThis;
+    g[CONTROL_KEY] = control;
+    return () => {
+        if (g[CONTROL_KEY] === control)
+            delete g[CONTROL_KEY];
+    };
+}

package/build/recorder/hud/AnnotateOverlay.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Annotate mode (⌖): crosshair, the hovered element outlined, a drag past
+ * 6px switches to a marquee; the page dims and a hint bar says what to do.
+ * Click → element pick (selector + rect), drag → region (rect). The chrome
+ * lives in the shadow root so the page cannot restyle it; the pointer
+ * handlers are document-level CAPTURE listeners so the page never sees the
+ * pick click.
+ */
+import { type ReactElement } from 'react';
+export interface Pick {
+    /** Viewport rect in CSS pixels. */
+    rect: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    selector: string;
+    text: string;
+}
+export interface AnnotateOverlayProps {
+    onPick: (pick: Pick) => void;
+    onCancel: () => void;
+}
+export declare function AnnotateOverlay({ onPick, onCancel }: AnnotateOverlayProps): ReactElement;

package/build/recorder/hud/AnnotateOverlay.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Annotate mode (⌖): crosshair, the hovered element outlined, a drag past
+ * 6px switches to a marquee; the page dims and a hint bar says what to do.
+ * Click → element pick (selector + rect), drag → region (rect). The chrome
+ * lives in the shadow root so the page cannot restyle it; the pointer
+ * handlers are document-level CAPTURE listeners so the page never sees the
+ * pick click.
+ */
+import { useEffect, useState } from 'react';
+import { elementText, shortSelector } from '../capture/click';
+import { AnnotateIcon } from './icons';
+import { insideHud } from './host';
+export function AnnotateOverlay({ onPick, onCancel }) {
+    const [box, setBox] = useState(null);
+    useEffect(() => {
+        let downAt = null;
+        let dragging = false;
+        document.documentElement.style.cursor = 'crosshair';
+        let raf = 0;
+        let last = null;
+        const same = (a, b) => a === b || (a !== null && b !== null && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h);
+        const place = (next) => setBox((prev) => (same(prev, next) ? prev : next));
+        const frame = () => {
+            raf = 0;
+            if (!last)
+                return;
+            const { x, y } = last;
+            if (downAt && (dragging || Math.hypot(x - downAt.x, y - downAt.y) > 6)) {
+                dragging = true;
+                place({
+                    x: Math.min(downAt.x, x),
+                    y: Math.min(downAt.y, y),
+                    w: Math.abs(x - downAt.x),
+                    h: Math.abs(y - downAt.y),
+                });
+                return;
+            }
+            const el = document.elementFromPoint(x, y);
+            if (!el || insideHud(el)) {
+                place(null);
+                return;
+            }
+            const r = el.getBoundingClientRect();
+            place({ x: r.x - 3, y: r.y - 3, w: r.width + 2, h: r.height + 2 });
+        };
+        const move = (e) => {
+            last = { x: e.clientX, y: e.clientY };
+            if (raf === 0)
+                raf = requestAnimationFrame(frame);
+        };
+        const down = (e) => {
+            if (insideHud(e.target))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            downAt = { x: e.clientX, y: e.clientY };
+        };
+        const up = (e) => {
+            if (!downAt)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            const start = downAt;
+            const wasDrag = dragging;
+            downAt = null;
+            dragging = false;
+            if (wasDrag) {
+                const x = Math.min(start.x, e.clientX);
+                const y = Math.min(start.y, e.clientY);
+                const w = Math.abs(e.clientX - start.x);
+                const h = Math.abs(e.clientY - start.y);
+                if (w < 4 || h < 4) {
+                    onCancel();
+                    return;
+                }
+                onPick({ rect: { x, y, w, h }, selector: '', text: '' });
+                return;
+            }
+            const el = document.elementFromPoint(e.clientX, e.clientY);
+            if (!el || insideHud(el)) {
+                onCancel();
+                return;
+            }
+            const r = el.getBoundingClientRect();
+            onPick({
+                rect: { x: r.x, y: r.y, w: r.width, h: r.height },
+                selector: shortSelector(el),
+                text: elementText(el),
+            });
+        };
+        const swallowClick = (e) => {
+            if (insideHud(e.target))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        const key = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                e.stopPropagation();
+                onCancel();
+            }
+        };
+        document.addEventListener('pointermove', move, true);
+        document.addEventListener('pointerdown', down, true);
+        document.addEventListener('pointerup', up, true);
+        document.addEventListener('click', swallowClick, true);
+        document.addEventListener('keydown', key, true);
+        return () => {
+            document.documentElement.style.cursor = '';
+            if (raf !== 0)
+                cancelAnimationFrame(raf);
+            document.removeEventListener('pointermove', move, true);
+            document.removeEventListener('pointerdown', down, true);
+            document.removeEventListener('pointerup', up, true);
+            document.removeEventListener('click', swallowClick, true);
+            document.removeEventListener('keydown', key, true);
+        };
+    }, [onPick, onCancel]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "dim", "data-e2e": "annotate-dim" }), box ? (_jsx("div", { className: "outline", style: { left: box.x, top: box.y, width: box.w, height: box.h } })) : null, _jsxs("div", { className: "hint", children: [_jsx(AnnotateIcon, {}), " annotate \u2014 click an element or drag an area \u00B7 enter sends \u00B7 esc cancels"] })] }));
+}

package/build/recorder/hud/Hud.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The HUD tree, rendered into the shadow host by its own React root. Owns
+ * the sheet (open/title/ctx/pick + the surviving draft), annotate mode, the
+ * keyboard shortcuts and the Esc-anywhere / click-outside close.
+ */
+import { type ReactElement } from 'react';
+export interface HudProps {
+    /** The HUD host's own mount (the sheet portals here when no dialog is open). */
+    hostMount: HTMLElement;
+    defaultTitle: () => string;
+}
+export declare function Hud({ hostMount, defaultTitle }: HudProps): ReactElement;

package/build/recorder/hud/Hud.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The HUD tree, rendered into the shadow host by its own React root. Owns
+ * the sheet (open/title/ctx/pick + the surviving draft), annotate mode, the
+ * keyboard shortcuts and the Esc-anywhere / click-outside close.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { readLink, recorderConfig, vitrinkaLinked } from '../config';
+import { forgetLink, linkDevice, LinkExpired } from '../link';
+import { getState } from '../queue';
+import { addAnnotation, addNote, startSession, stopSession, togglePause } from '../session';
+import { annotateState, setAnnotating, subscribe } from '../state';
+import { AnnotateOverlay } from './AnnotateOverlay';
+import { createSheetHost, insideHud, sheetTarget } from './host';
+import { LinkSheet } from './LinkSheet';
+import { RecorderPill } from './RecorderPill';
+import { Sheet } from './Sheet';
+import { HUD_CSS } from './styles';
+let version = 0;
+const bump = () => ++version;
+function useRecorderState() {
+    return useSyncExternalStore((cb) => subscribe(() => { bump(); cb(); }), () => version, () => version);
+}
+export function Hud({ hostMount, defaultTitle }) {
+    useRecorderState();
+    const rec = getState();
+    const [sheet, setSheet] = useState(null);
+    const [draft, setDraft] = useState('');
+    const [starting, setStarting] = useState(false);
+    const [stopping, setStopping] = useState(false);
+    const annotating = annotateState.active;
+    const linked = vitrinkaLinked();
+    const canUnlink = !recorderConfig().key && readLink() !== null;
+    // Device link (Netflix-style code): the sheet paints the phase, this owns it.
+    const [link, setLink] = useState(null);
+    const linkRef = useRef(null);
+    const closeLink = useCallback(() => {
+        linkRef.current?.cancel();
+        linkRef.current = null;
+        setLink(null);
+    }, []);
+    const beginLink = useCallback(() => {
+        linkRef.current?.cancel();
+        setSheet(null);
+        setLink({ phase: 'starting', flow: null });
+        linkDevice()
+            .then((flow) => {
+            linkRef.current = flow;
+            setLink({ phase: 'waiting', flow });
+            return flow.linked.then(() => {
+                if (linkRef.current !== flow)
+                    return;
+                linkRef.current = null;
+                setLink(null);
+                // Linked: start recording exactly as if a key had been passed.
+                onStartRef.current();
+            }, (e) => {
+                if (linkRef.current !== flow)
+                    return;
+                linkRef.current = null;
+                if (e instanceof LinkExpired)
+                    setLink({ phase: 'expired', flow });
+                else if (!(e instanceof Error && e.name === 'AbortError'))
+                    setLink({ phase: 'error', flow, error: e instanceof Error ? e.message : String(e) });
+            });
+        })
+            .catch((e) => setLink({ phase: 'error', flow: null, error: e instanceof Error ? e.message : String(e) }));
+    }, []);
+    const onUnlink = useCallback(() => {
+        closeLink();
+        setSheet(null);
+        setAnnotating(false);
+        forgetLink();
+    }, [closeLink]);
+    const closeSheet = useCallback(() => setSheet(null), []);
+    const openNote = useCallback(() => {
+        if (!getState())
+            return;
+        setAnnotating(false);
+        setSheet({ title: 'Note', ctx: `step · ${location.pathname}`, pick: null });
+    }, []);
+    const toggleAnnotate = useCallback(() => {
+        if (!getState())
+            return;
+        setSheet(null);
+        setAnnotating(!annotateState.active);
+    }, []);
+    const onPick = useCallback((pick) => {
+        setAnnotating(false);
+        const ctx = pick.selector
+            ? `${pick.selector} · ${location.pathname}`
+            : `${Math.round(pick.rect.w)}×${Math.round(pick.rect.h)} · ${location.pathname}`;
+        setSheet({ title: pick.selector ? 'Annotate element' : 'Annotate region', ctx, pick });
+    }, []);
+    const cancelAnnotate = useCallback(() => setAnnotating(false), []);
+    const onSend = useCallback((text, task) => {
+        const s = sheet;
+        setSheet(null);
+        if (!s)
+            return;
+        if (s.pick) {
+            addAnnotation(text, s.pick.rect, s.pick.selector, { task });
+            setDraft('');
+        }
+        else if (text) {
+            addNote(text);
+            setDraft('');
+        }
+    }, [sheet]);
+    const onStart = useCallback(() => {
+        if (!vitrinkaLinked()) {
+            beginLink();
+            return;
+        }
+        setStarting(true);
+        startSession({ title: defaultTitle() })
+            .catch((e) => console.warn('vitrinka: start failed', e))
+            .finally(() => setStarting(false));
+    }, [defaultTitle, beginLink]);
+    const onStartRef = useRef(onStart);
+    onStartRef.current = onStart;
+    const onStop = useCallback(() => {
+        setSheet(null);
+        setAnnotating(false);
+        setStopping(true);
+        stopSession()
+            .catch((e) => console.warn('vitrinka: stop —', e instanceof Error ? e.message : e))
+            .finally(() => setStopping(false));
+    }, []);
+    const onPause = useCallback(() => {
+        void togglePause();
+    }, []);
+    // Shortcuts (window keydown): ⌥⇧A annotate · ⌥⇧N note · ⌥⇧P pause.
+    useEffect(() => {
+        const key = (e) => {
+            if (!e.altKey || !e.shiftKey || e.metaKey || e.ctrlKey)
+                return;
+            if (e.code === 'KeyA')
+                toggleAnnotate();
+            else if (e.code === 'KeyN')
+                openNote();
+            else if (e.code === 'KeyP')
+                onPause();
+            else
+                return;
+            e.preventDefault();
+        };
+        window.addEventListener('keydown', key);
+        return () => window.removeEventListener('keydown', key);
+    }, [toggleAnnotate, openNote, onPause]);
+    // Esc anywhere and click-outside close the sheet (capture-phase, so the
+    // page's own dialog never sees the Esc that closed ours).
+    useEffect(() => {
+        if (!sheet)
+            return;
+        const key = (e) => {
+            if (e.key !== 'Escape' || insideHud(e.target))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            closeSheet();
+        };
+        const down = (e) => {
+            if (insideHud(e.target))
+                return;
+            closeSheet();
+        };
+        document.addEventListener('keydown', key, true);
+        document.addEventListener('pointerdown', down, true);
+        return () => {
+            document.removeEventListener('keydown', key, true);
+            document.removeEventListener('pointerdown', down, true);
+        };
+    }, [sheet, link, closeSheet, closeLink]);
+    // The sheet's portal target (D4): a host inside the topmost open dialog
+    // when one exists, else the HUD host. Resolved per open.
+    const portal = useMemo(() => {
+        if (!sheet)
+            return null;
+        const target = sheetTarget();
+        if (!target)
+            return { mount: hostMount, destroy: () => undefined, own: false };
+        const h = createSheetHost(target);
+        return { ...h, own: true };
+    }, [sheet, hostMount]);
+    useEffect(() => () => portal?.destroy(), [portal]);
+    const sheetEl = sheet && portal ? (_jsxs(_Fragment, { children: [portal.own ? _jsx("style", { children: HUD_CSS }) : null, _jsx("div", { className: "sheetwrap", style: portal.own ? undefined : { position: 'absolute', right: 0, bottom: 52 }, children: _jsx(Sheet, { title: sheet.title, ctx: sheet.ctx, pick: sheet.pick !== null, draft: draft, onDraft: setDraft, onSend: onSend, onClose: closeSheet }) })] })) : null;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: HUD_CSS }), annotating && rec ? _jsx(AnnotateOverlay, { onPick: onPick, onCancel: cancelAnnotate }) : null, _jsxs("div", { style: { position: 'relative' }, children: [_jsx(RecorderPill, { rec: rec, composing: sheet !== null, annotating: annotating, stopping: stopping, starting: starting, linked: linked, canUnlink: canUnlink, onLink: beginLink, onUnlink: onUnlink, onStart: onStart, onPause: onPause, onNote: openNote, onAnnotate: toggleAnnotate, onStop: onStop }), sheetEl && portal ? createPortal(sheetEl, portal.mount) : null, link ? (_jsx("div", { className: "sheetwrap", style: { position: 'absolute', right: 0, bottom: 52 }, children: _jsx(LinkSheet, { phase: link.phase, start: link.flow?.start ?? null, error: link.error, onRetry: beginLink, onClose: closeLink }) })) : null] })] }));
+}

package/build/recorder/hud/LinkSheet.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The link sheet: the 9-char code, "Open vitrinka" for the same-device path,
+ * the server-rendered QR for the desktop→phone path, and the waiting line.
+ * Polling runs in the parent; this only paints the state.
+ */
+import type { ReactElement } from 'react';
+import type { LinkStart } from '@vitrinka/link';
+export type LinkPhase = 'starting' | 'waiting' | 'expired' | 'error';
+export interface LinkSheetProps {
+    phase: LinkPhase;
+    start: LinkStart | null;
+    error?: string;
+    onRetry: () => void;
+    onClose: () => void;
+}
+export declare const LINK_STRINGS: {
+    readonly title: "Link recorder";
+    readonly open: "Open vitrinka";
+    readonly waiting: "waiting for approval…";
+    readonly starting: "asking vitrinka for a code…";
+    readonly expired: "code expired — try again";
+    readonly retry: "Try again";
+    readonly qrAlt: "Scan to link";
+    readonly hint: "approve on this device, or scan from your phone";
+};
+export declare function LinkSheet({ phase, start, error, onRetry, onClose }: LinkSheetProps): ReactElement;

package/build/recorder/hud/LinkSheet.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CloseIcon, NewTabIcon } from './icons';
+export const LINK_STRINGS = {
+    title: 'Link recorder',
+    open: 'Open vitrinka',
+    waiting: 'waiting for approval…',
+    starting: 'asking vitrinka for a code…',
+    expired: 'code expired — try again',
+    retry: 'Try again',
+    qrAlt: 'Scan to link',
+    hint: 'approve on this device, or scan from your phone',
+};
+export function LinkSheet({ phase, start, error, onRetry, onClose }) {
+    return (_jsxs("div", { className: "pop link", role: "dialog", "aria-labelledby": "vt-link-title", "data-e2e": "link-sheet", children: [_jsxs("div", { className: "pop-head", children: [_jsxs("label", { children: [_jsx("i", {}), _jsx("span", { id: "vt-link-title", children: LINK_STRINGS.title })] }), _jsx("button", { type: "button", className: "closeb", "aria-label": "Close", onClick: onClose, children: _jsx(CloseIcon, {}) })] }), phase === 'starting' || !start ? (_jsx("div", { className: "linkline", children: phase === 'error' ? error || 'could not start the link' : LINK_STRINGS.starting })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "code", "data-e2e": "link-code", children: start.user_code }), _jsxs("div", { className: "linkrow", children: [_jsxs("a", { className: "sendb", href: start.verifyUrl, target: "_blank", rel: "noopener noreferrer", children: [_jsx(NewTabIcon, {}), _jsx("span", { children: LINK_STRINGS.open })] }), _jsx("img", { className: "qr", src: start.qrUrl, alt: LINK_STRINGS.qrAlt, width: 96, height: 96 })] }), _jsxs("div", { className: phase === 'expired' || phase === 'error' ? 'linkline bad' : 'linkline', children: [phase === 'waiting' ? LINK_STRINGS.waiting : phase === 'expired' ? LINK_STRINGS.expired : error, phase === 'expired' || phase === 'error' ? (_jsx("button", { type: "button", className: "retry", onClick: onRetry, children: LINK_STRINGS.retry })) : null] })] })), _jsx("div", { className: "hints", children: LINK_STRINGS.hint })] }));
+}