@vitrinka/web 0.1.0

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

@@ -0,0 +1,36 @@
+/**
+ * The pill — the extension's HUD: rec dot · timer · name · sync glyph ·
+ * ⏸ ✎ ⌖ with keycaps on hover (⌥⇧P / ⌥⇧N / ⌥⇧A on Apple platforms, Alt⇧
+ * elsewhere), a ⋯ menu (Open board · Stop), and a one-line health detail
+ * that unfolds only when something is wrong. Idle (no session): a quiet grip
+ * that starts a recording.
+ */
+import { type ReactElement } from 'react';
+import { type RecorderHealth, type SessionState } from '../queue';
+export declare const MOD: string;
+/** The extension's renderHealth: glyph + class + optional detail line. */
+export declare function healthLine(h: RecorderHealth, stopping: boolean): {
+    glyph: ReactElement | string;
+    cls: string;
+    line: string;
+    bad: boolean;
+};
+export interface RecorderPillProps {
+    rec: SessionState | null;
+    composing: boolean;
+    annotating: boolean;
+    stopping: boolean;
+    starting: boolean;
+    /** Something to authenticate with (an explicit key or a stored link). */
+    linked: boolean;
+    /** A stored link can be forgotten; an explicit key cannot. */
+    canUnlink: boolean;
+    onLink: () => void;
+    onUnlink: () => void;
+    onStart: () => void;
+    onPause: () => void;
+    onNote: () => void;
+    onAnnotate: () => void;
+    onStop: () => void;
+}
+export declare function RecorderPill(p: RecorderPillProps): ReactElement;

package/build/recorder/hud/RecorderPill.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The pill — the extension's HUD: rec dot · timer · name · sync glyph ·
+ * ⏸ ✎ ⌖ with keycaps on hover (⌥⇧P / ⌥⇧N / ⌥⇧A on Apple platforms, Alt⇧
+ * elsewhere), a ⋯ menu (Open board · Stop), and a one-line health detail
+ * that unfolds only when something is wrong. Idle (no session): a quiet grip
+ * that starts a recording.
+ */
+import { useEffect, useState } from 'react';
+import { health } from '../queue';
+import { elapsedOf } from '../session';
+import { AnnotateIcon, CheckIcon, CloseIcon, MoreIcon, NewTabIcon, PauseIcon, PencilIcon, PlayIcon, StopIcon } from './icons';
+export const MOD = /Mac|iPhone|iPad/.test(globalThis.navigator?.platform ?? '') ? '⌥⇧' : 'Alt⇧';
+function fmtAge(ms) {
+    return ms < 1000 ? 'just now' : ms < 60000 ? `${Math.round(ms / 1000)}s` : `${Math.round(ms / 60000)}m`;
+}
+function fmtClock(ms) {
+    const s = Math.max(0, Math.floor(ms / 1000));
+    return `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`;
+}
+/** The extension's renderHealth: glyph + class + optional detail line. */
+export function healthLine(h, stopping) {
+    if (stopping)
+        return { glyph: '⟳', cls: 'busy', line: `wrapping up · ${h.queued} left`, bad: false };
+    switch (h.state) {
+        case 'offline':
+            return {
+                glyph: '⚠',
+                cls: 'bad',
+                line: `offline${h.sinceSyncMs ? ' ' + fmtAge(h.sinceSyncMs) : ''} · ${h.queued} held · retrying`,
+                bad: true,
+            };
+        case 'dead':
+            return { glyph: '⛔', cls: 'bad', line: h.deadReason || 'this session ended on the server', bad: true };
+        case 'backlog':
+            return { glyph: '⟳', cls: 'busy', line: `syncing · ${h.queued} queued`, bad: false };
+        default:
+            return { glyph: h.synced ? _jsx(CheckIcon, {}) : '·', cls: '', line: '', bad: false };
+    }
+}
+export function RecorderPill(p) {
+    const [, tick] = useState(0);
+    const [menu, setMenu] = useState(false);
+    useEffect(() => {
+        const t = setInterval(() => tick((n) => n + 1), 1000);
+        return () => clearInterval(t);
+    }, []);
+    useEffect(() => {
+        if (!p.rec)
+            setMenu(false);
+    }, [p.rec]);
+    if (!p.rec && !p.linked) {
+        return (_jsx("div", { className: "stack", children: _jsxs("button", { type: "button", className: "grip link", "aria-label": "Link recorder", onClick: p.onLink, children: [_jsx("span", { className: "dot" }), _jsx("span", { children: "Link recorder" })] }) }));
+    }
+    if (!p.rec) {
+        return (_jsx("div", { className: "stack", children: _jsx("button", { type: "button", className: p.starting ? 'grip busy' : 'grip', "aria-label": "Start recording", title: "Start a vitrinka recording", onClick: p.onStart, disabled: p.starting, children: _jsx("span", { className: "dot" }) }) }));
+    }
+    const rec = p.rec;
+    const h = health();
+    const hl = healthLine(h, p.stopping);
+    const paused = rec.paused || rec.dead || p.stopping;
+    const cls = ['pill', paused ? 'paused' : '', p.composing ? 'composing' : ''].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: "stack", children: [_jsxs("div", { className: cls, "data-e2e": "recorder-pill", children: [_jsx("span", { className: "dot" }), _jsx("span", { className: "time", children: fmtClock(elapsedOf(rec)) }), _jsx("span", { className: "name", children: rec.title || `${rec.project} · ${rec.environment}` }), _jsx("span", { className: `sync${hl.cls ? ' ' + hl.cls : ''}`, title: "everything captured has reached vitrinka", children: hl.glyph }), _jsxs("button", { type: "button", className: "b-pause", "aria-label": rec.paused ? 'Resume' : 'Pause', onClick: p.onPause, children: [rec.paused ? _jsx(PlayIcon, {}) : _jsx(PauseIcon, {}), _jsxs("kbd", { children: [MOD, "P ", rec.paused ? 'resume' : 'pause'] })] }), _jsxs("button", { type: "button", className: "b-note", "aria-label": "Note", onClick: p.onNote, children: [_jsx(PencilIcon, {}), _jsxs("kbd", { children: [MOD, "N note"] })] }), _jsxs("button", { type: "button", className: p.annotating ? 'snap b-snap on' : 'snap b-snap', "aria-label": "Annotate", "aria-pressed": p.annotating, onClick: p.onAnnotate, children: [_jsx(AnnotateIcon, {}), _jsxs("kbd", { children: [MOD, "A annotate"] })] }), _jsxs("span", { className: "menuwrap", children: [_jsx("button", { type: "button", className: "b-more", "aria-label": "More", "aria-expanded": menu, onClick: () => setMenu((m) => !m), children: _jsx(MoreIcon, {}) }), menu ? (_jsxs("div", { className: "menu", role: "menu", children: [rec.boardUrl ? (_jsxs("button", { type: "button", role: "menuitem", onClick: () => {
+                                            setMenu(false);
+                                            window.open(rec.boardUrl, '_blank', 'noopener');
+                                        }, children: [_jsx(NewTabIcon, {}), " Open board"] })) : null, _jsxs("button", { type: "button", role: "menuitem", className: "danger", onClick: () => {
+                                            setMenu(false);
+                                            p.onStop();
+                                        }, children: [_jsx(StopIcon, {}), " Stop recording"] }), p.canUnlink ? (_jsxs("button", { type: "button", role: "menuitem", onClick: () => {
+                                            setMenu(false);
+                                            p.onUnlink();
+                                        }, children: [_jsx(CloseIcon, {}), " Unlink"] })) : null] })) : null] })] }), _jsx("div", { className: ['detail', hl.line ? 'show' : '', hl.bad ? 'bad' : ''].filter(Boolean).join(' '), children: hl.line })] }));
+}

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

@@ -0,0 +1,20 @@
+/**
+ * The composer sheet — the extension's hud.html, as a component: 360px, a
+ * 16px textarea, ✕ in the kicker, a three-column footer (board|task ·
+ * context · ↑ Send) and the hint line. Enter sends, ⇧Enter newlines, Esc
+ * cancels. The DRAFT is owned by the caller so a cancel keeps it until the
+ * next send (recorder-hud-polish D3); the board|task choice resets on every
+ * open — a destination is per observation, not a mode.
+ */
+import { type ReactElement } from 'react';
+export interface SheetProps {
+    title: string;
+    ctx: string;
+    /** True when the sheet composes an annotation (shows board|task). */
+    pick: boolean;
+    draft: string;
+    onDraft: (text: string) => void;
+    onSend: (text: string, task: boolean) => void;
+    onClose: () => void;
+}
+export declare function Sheet({ title, ctx, pick, draft, onDraft, onSend, onClose }: SheetProps): ReactElement;

package/build/recorder/hud/Sheet.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The composer sheet — the extension's hud.html, as a component: 360px, a
+ * 16px textarea, ✕ in the kicker, a three-column footer (board|task ·
+ * context · ↑ Send) and the hint line. Enter sends, ⇧Enter newlines, Esc
+ * cancels. The DRAFT is owned by the caller so a cancel keeps it until the
+ * next send (recorder-hud-polish D3); the board|task choice resets on every
+ * open — a destination is per observation, not a mode.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { ArrowUpIcon, CloseIcon } from './icons';
+export function Sheet({ title, ctx, pick, draft, onDraft, onSend, onClose }) {
+    const ta = useRef(null);
+    const [task, setTask] = useState(false);
+    useEffect(() => {
+        const el = ta.current;
+        if (!el)
+            return;
+        el.focus();
+        el.setSelectionRange(el.value.length, el.value.length);
+    }, []);
+    const send = () => onSend(draft.trim(), task);
+    const onKey = (e) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            onClose();
+        }
+    };
+    const onTaKey = (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            send();
+        }
+    };
+    return (_jsxs("div", { className: "pop", role: "dialog", "aria-labelledby": "vt-pop-title", onKeyDown: onKey, children: [_jsxs("div", { className: "pop-head", children: [_jsxs("label", { children: [_jsx("i", {}), _jsx("span", { id: "vt-pop-title", children: title })] }), _jsx("button", { type: "button", className: "closeb", "aria-label": "Close", onClick: onClose, children: _jsx(CloseIcon, {}) })] }), _jsx("textarea", { ref: ta, placeholder: "what's wrong / what to refine\u2026", value: draft, onChange: (e) => onDraft(e.target.value), onKeyDown: onTaKey }), _jsxs("div", { className: pick ? 'row' : 'row nodest', children: [pick ? (_jsxs("span", { className: "dest", role: "group", "aria-label": "Where this snap lands", children: [_jsx("button", { type: "button", "aria-pressed": !task, onClick: () => setTask(false), children: "board" }), _jsx("button", { type: "button", "aria-pressed": task, onClick: () => setTask(true), children: "task" })] })) : null, _jsx("span", { className: "ctx", children: ctx }), _jsxs("button", { type: "button", className: "sendb", onClick: send, children: [_jsx(ArrowUpIcon, {}), _jsx("span", { children: "Send" })] })] }), _jsx("div", { className: "hints", children: "\u21A9 send \u00B7 \u21E7\u21A9 newline \u00B7 esc cancel" })] }));
+}

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

@@ -0,0 +1,27 @@
+export declare function shield(el: HTMLElement): void;
+export interface HudHost {
+    host: HTMLElement;
+    /** The React mount point inside the shadow root. */
+    mount: HTMLElement;
+    /** True while a modal/dialog is open — the sheet portals into it. */
+    destroy: () => void;
+}
+export declare function createHudHost(): HudHost;
+/**
+ * Where the composer sheet portals (D4): the topmost open `<dialog>` (last in
+ * document order), else the last open ARIA dialog (`[role="dialog"]
+ * [data-state="open"]` — Radix and friends), else null = the HUD host itself.
+ * Inside the dialog's subtree a focus trap and a modal's inert both leave
+ * the sheet alone.
+ */
+export declare function sheetTarget(): Element | null;
+/**
+ * A sheet host: its own open shadow root (so the HUD stylesheet applies
+ * inside a foreign dialog too), shielded, appended to `target`.
+ */
+export declare function createSheetHost(target: Element): {
+    mount: HTMLElement;
+    destroy: () => void;
+};
+/** Is `t` inside any HUD surface (host or a portaled sheet)? */
+export declare function insideHud(t: EventTarget | null): boolean;

package/build/recorder/hud/host.js

@@ -0,0 +1,170 @@
+/**
+ * The HUD host (D4): one element appended to `document.documentElement`,
+ * carrying an OPEN shadow root the React HUD renders into. `popover="manual"`
+ * where supported so it paints in the top layer above every page z-index;
+ * a MutationObserver re-raises it whenever a dialog opens or closes, so it
+ * stays above a later top-layer entrant.
+ *
+ * The propagation SHIELD: nothing the tester does on the HUD reaches the host
+ * page. Shadow retargeting makes every event look like it happened on the
+ * host element, and a page's "close on outside pointerdown / focus" logic
+ * would close the very dialog being reported. Bubble-phase stops on the host
+ * — no preventDefault, so buttons and the textarea still focus.
+ */
+import { RRWEB_BLOCK_ATTR } from '../capture/rrweb';
+import { HOST_STYLE, SHEET_HOST_STYLE } from './styles';
+const SHIELDED = [
+    'pointerdown', 'pointerup', 'pointermove', 'pointerover', 'pointerout', 'pointercancel',
+    'mousedown', 'mouseup', 'mousemove', 'mouseover', 'mouseout', 'click', 'dblclick', 'auxclick',
+    'contextmenu', 'touchstart', 'touchend', 'touchmove', 'touchcancel', 'wheel',
+    'focusin', 'focusout', 'keydown', 'keyup', 'keypress',
+];
+export function shield(el) {
+    for (const t of SHIELDED)
+        el.addEventListener(t, (e) => e.stopPropagation());
+}
+export function createHudHost() {
+    const host = document.createElement('div');
+    host.setAttribute(RRWEB_BLOCK_ATTR, '');
+    host.setAttribute('data-vitrinka-hud', '');
+    host.style.cssText = HOST_STYLE;
+    const root = host.attachShadow({ mode: 'open' });
+    const mount = document.createElement('div');
+    root.append(mount);
+    shield(host);
+    document.documentElement.append(host);
+    const canPop = typeof host.showPopover === 'function';
+    const raise = () => {
+        if (!canPop || !host.isConnected)
+            return;
+        try {
+            host.hidePopover?.();
+        }
+        catch {
+            // not shown
+        }
+        try {
+            host.showPopover?.();
+        }
+        catch {
+            // detached
+        }
+    };
+    if (canPop)
+        host.popover = 'manual';
+    raise();
+    let scheduled = false;
+    const schedule = () => {
+        if (scheduled)
+            return;
+        scheduled = true;
+        queueMicrotask(() => {
+            scheduled = false;
+            raise();
+        });
+    };
+    // A dialog can mount anywhere in the tree, so the whole document is watched
+    // — but the WORK is kept off the mutation hot path: records are collected
+    // and inspected at most once per animation frame, text nodes and childless
+    // elements are dismissed without a query, and the first hit ends the scan.
+    // Attribute records are already narrowed by attributeFilter.
+    const touchesDialog = (m) => {
+        if (m.type === 'attributes')
+            return m.target instanceof Element && isDialog(m.target);
+        for (const list of [m.addedNodes, m.removedNodes]) {
+            for (const n of list) {
+                if (!(n instanceof Element))
+                    continue;
+                if (isDialog(n))
+                    return true;
+                if (n.childElementCount > 0 && n.querySelector(DIALOG_SEL))
+                    return true;
+            }
+        }
+        return false;
+    };
+    let pending = [];
+    let scanRaf = 0;
+    const scan = () => {
+        scanRaf = 0;
+        const batch = pending;
+        pending = [];
+        if (batch.some(touchesDialog))
+            schedule();
+    };
+    const mo = new MutationObserver((muts) => {
+        for (const m of muts)
+            pending.push(m);
+        if (scanRaf === 0) {
+            scanRaf =
+                typeof requestAnimationFrame === 'function'
+                    ? requestAnimationFrame(scan)
+                    : setTimeout(scan, 16);
+        }
+    });
+    mo.observe(document.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['open', 'data-state'],
+    });
+    return {
+        host,
+        mount,
+        destroy: () => {
+            mo.disconnect();
+            if (scanRaf !== 0 && typeof cancelAnimationFrame === 'function')
+                cancelAnimationFrame(scanRaf);
+            pending = [];
+            try {
+                host.hidePopover?.();
+            }
+            catch {
+                // not shown
+            }
+            host.remove();
+        },
+    };
+}
+const DIALOG_SEL = 'dialog,[role="dialog"]';
+function isDialog(el) {
+    return el.matches(DIALOG_SEL);
+}
+/**
+ * Where the composer sheet portals (D4): the topmost open `<dialog>` (last in
+ * document order), else the last open ARIA dialog (`[role="dialog"]
+ * [data-state="open"]` — Radix and friends), else null = the HUD host itself.
+ * Inside the dialog's subtree a focus trap and a modal's inert both leave
+ * the sheet alone.
+ */
+export function sheetTarget() {
+    const native = document.querySelectorAll('dialog[open]');
+    const lastNative = native[native.length - 1];
+    if (lastNative)
+        return lastNative;
+    const aria = document.querySelectorAll('[role="dialog"][data-state="open"]');
+    return aria[aria.length - 1] ?? null;
+}
+/**
+ * A sheet host: its own open shadow root (so the HUD stylesheet applies
+ * inside a foreign dialog too), shielded, appended to `target`.
+ */
+export function createSheetHost(target) {
+    const el = document.createElement('div');
+    el.setAttribute(RRWEB_BLOCK_ATTR, '');
+    el.setAttribute('data-vitrinka-sheet', '');
+    el.style.cssText = SHEET_HOST_STYLE;
+    const root = el.attachShadow({ mode: 'open' });
+    const mount = document.createElement('div');
+    root.append(mount);
+    shield(el);
+    target.append(el);
+    return { mount, destroy: () => el.remove() };
+}
+/** Is `t` inside any HUD surface (host or a portaled sheet)? */
+export function insideHud(t) {
+    if (!(t instanceof Node))
+        return false;
+    const el = t instanceof Element ? t : t.parentElement;
+    return Boolean(el?.closest('[data-vitrinka-hud],[data-vitrinka-sheet]'));
+}

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

@@ -0,0 +1,15 @@
+/**
+ * The manifest glyphs the extension draws (vendor/vitrinka-icons.js), as
+ * React elements: 1em, currentColor, sized by the host's font.
+ */
+import type { ReactElement } from 'react';
+export declare function CheckIcon(): ReactElement;
+export declare function PauseIcon(): ReactElement;
+export declare function PlayIcon(): ReactElement;
+export declare function PencilIcon(): ReactElement;
+export declare function AnnotateIcon(): ReactElement;
+export declare function CloseIcon(): ReactElement;
+export declare function ArrowUpIcon(): ReactElement;
+export declare function MoreIcon(): ReactElement;
+export declare function NewTabIcon(): ReactElement;
+export declare function StopIcon(): ReactElement;

package/build/recorder/hud/icons.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const base = {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    strokeWidth: 2,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round',
+    'aria-hidden': true,
+};
+export function CheckIcon() {
+    return (_jsx("svg", { ...base, children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }));
+}
+export function PauseIcon() {
+    return (_jsxs("svg", { ...base, children: [_jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" }), _jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" })] }));
+}
+export function PlayIcon() {
+    return (_jsx("svg", { ...base, children: _jsx("path", { d: "M6 4l14 8-14 8z" }) }));
+}
+export function PencilIcon() {
+    return (_jsxs("svg", { ...base, children: [_jsx("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }), _jsx("path", { d: "m15 5 4 4" })] }));
+}
+export function AnnotateIcon() {
+    return (_jsxs("svg", { ...base, children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "22", x2: "18", y1: "12", y2: "12" }), _jsx("line", { x1: "6", x2: "2", y1: "12", y2: "12" }), _jsx("line", { x1: "12", x2: "12", y1: "6", y2: "2" }), _jsx("line", { x1: "12", x2: "12", y1: "22", y2: "18" })] }));
+}
+export function CloseIcon() {
+    return (_jsxs("svg", { ...base, children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }));
+}
+export function ArrowUpIcon() {
+    return (_jsxs("svg", { ...base, children: [_jsx("path", { d: "M12 19V5" }), _jsx("path", { d: "m5 12 7-7 7 7" })] }));
+}
+export function MoreIcon() {
+    return (_jsxs("svg", { ...base, children: [_jsx("circle", { cx: "12", cy: "12", r: "1" }), _jsx("circle", { cx: "19", cy: "12", r: "1" }), _jsx("circle", { cx: "5", cy: "12", r: "1" })] }));
+}
+export function NewTabIcon() {
+    return (_jsxs("svg", { ...base, children: [_jsx("path", { d: "M15 3h6v6" }), _jsx("path", { d: "M10 14 21 3" }), _jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })] }));
+}
+export function StopIcon() {
+    return (_jsx("svg", { ...base, children: _jsx("rect", { x: "5", y: "5", width: "14", height: "14", rx: "2" }) }));
+}

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

@@ -0,0 +1,13 @@
+/**
+ * The HUD's stylesheet — the extension's pill/sheet/pick CSS, verbatim where
+ * it applies. Lives inside the shadow root (a `<style>` element), so it never
+ * touches host CSS and host CSS never touches it.
+ */
+export declare const HUD_CSS_BASE = "\n* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; }\nsvg { width:1em; height:1em; vertical-align:-.125em; }\n.stack { position:relative; z-index:4; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }\n.pill { display:flex; align-items:center; gap:10px; padding:8px 10px 8px 14px;\n  background:#1d1a1b; border:1px solid #292526; border-radius:999px;\n  box-shadow:0 8px 30px rgba(0,0,0,.35); color:#f0eae4; }\n.dot { width:10px; height:10px; border-radius:50%; background:#ff3b57; animation:p 1.4s ease infinite; }\n.paused .dot { animation:none; background:#756e68; }\n@keyframes p { 50% { opacity:.35; } }\n.sync { font:600 11px/1 ui-monospace, Menlo, monospace; color:#5f7a5f; }\n.sync.warn { color:#e8a33d; }\n.sync.bad { color:#ff3b57; }\n.sync.busy { color:#a8a099; }\n.detail { max-width:320px; padding:6px 12px; border-radius:999px;\n  background:#1d1a1b; border:1px solid #292526; color:#a8a099;\n  font:500 10px/1.4 ui-monospace, Menlo, monospace;\n  opacity:0; transform:translateY(-3px); transition:opacity .24s ease, transform .24s ease;\n  pointer-events:none; }\n.detail.show { opacity:1; transform:none; }\n.detail.bad { border-color:#ff3b57; color:#f0eae4; }\n.time { font:600 11px/1 ui-monospace, Menlo, monospace; }\n.name { font:500 10px/1 ui-monospace, Menlo, monospace; color:#756e68;\n  border-left:1px solid #292526; padding-left:10px; max-width:140px;\n  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\nbutton { all:unset; cursor:pointer; position:relative; width:28px; height:28px; border-radius:50%;\n  border:1px solid #363132; color:#a8a099; font-size:12px; text-align:center; line-height:28px; }\nbutton:hover { color:#f0eae4; border-color:#756e68; }\nbutton:focus-visible, .sendb:focus-visible, .closeb:focus-visible { outline:2px solid #ff3b57; outline-offset:2px; }\nbutton.snap { background:#ff3b57; border-color:#ff3b57; color:#fff; }\nbutton.snap.on { background:#f0eae4; border-color:#f0eae4; color:#1d1a1b; }\nkbd { position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);\n  padding:4px 6px; border-radius:5px; background:#252122; border:1px solid #363132;\n  color:#a8a099; font:600 9.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.06em;\n  white-space:nowrap; opacity:0; transition:opacity .16s ease; pointer-events:none; }\n.b-snap kbd, .b-more kbd { left:auto; right:0; transform:none; }\nbutton:hover kbd, button:focus-visible kbd { opacity:1; }\n.pill.composing kbd { opacity:0; }\n/* idle grip: a quiet dot until a recording starts */\n.grip { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;\n  background:#1d1a1b; border:1px solid #292526; box-shadow:0 8px 30px rgba(0,0,0,.35); }\n.grip .dot { animation:none; opacity:.9; }\n.grip:hover .dot { animation:p 1.4s ease infinite; }\n.grip.busy .dot { background:#756e68; }\n/* menu (Open board \u00B7 Stop) */\n.menu { position:absolute; right:0; bottom:44px; min-width:160px; padding:6px;\n  background:#1d1a1b; border:1px solid #292526; border-radius:10px;\n  box-shadow:0 8px 30px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:2px; }\n.menu button { all:unset; cursor:pointer; padding:7px 10px; border-radius:6px; color:#d8d2cc;\n  font:500 12px/1 -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; display:flex; gap:8px; align-items:center; }\n.menu button:hover { background:#252122; color:#f0eae4; }\n.menu button.danger:hover { color:#ff3b57; }\n.menuwrap { position:relative; }\n/* pick chrome (annotate mode): dim, outline, hint \u2014 shadow-root children */\n.dim { position:fixed; inset:0; z-index:1; pointer-events:none; background:rgba(0,0,0,.22); }\n.outline { position:fixed; z-index:2; pointer-events:none; border:2px solid #ff3b57; border-radius:6px;\n  box-shadow:0 0 0 4px rgba(255,59,87,.15); }\n.hint { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:3; padding:8px 16px;\n  border-radius:999px; background:#1d1a1b; border:1px solid #ff3b57; box-shadow:0 8px 30px rgba(0,0,0,.4);\n  font:600 12px/1 -apple-system,BlinkMacSystemFont,sans-serif; color:#f0eae4; white-space:nowrap; }\n/* the composer sheet (360px) */\n.pop { width:360px; padding:14px; background:#1d1a1b; border:1px solid #292526; border-radius:14px;\n  box-shadow:0 8px 30px rgba(0,0,0,.35); color:#f0eae4; }\n.pop-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }\nlabel { display:flex; align-items:center; gap:7px; font:700 9.5px/1 ui-monospace, Menlo, monospace;\n  letter-spacing:.18em; text-transform:uppercase; color:#756e68; }\nlabel i { width:3px; height:10px; background:#ff3b57; }\n.closeb { all:unset; cursor:pointer; width:24px; height:24px; border-radius:6px; color:#756e68; font-size:13px; text-align:center; line-height:24px; }\n.closeb:hover { color:#f0eae4; background:#252122; }\ntextarea { width:100%; margin-top:10px; padding:10px 12px; min-height:72px; resize:vertical;\n  background:#141213; border:1px solid #363132; border-radius:8px; color:#f0eae4;\n  font:400 16px/1.4 -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; }\ntextarea:focus { outline:none; border-color:#756e68; }\n.row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; margin-top:10px; }\n.row.nodest { grid-template-columns:minmax(0,1fr) auto; }\n.ctx { font:500 10px/1.35 ui-monospace, Menlo, monospace; color:#756e68; text-align:center;\n  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n.row.nodest .ctx { text-align:left; }\n.dest { display:flex; align-items:center; gap:9px; }\n.dest button { all:unset; cursor:pointer; padding:2px 0; color:#756e68; font:600 9px/1 ui-monospace, Menlo, monospace;\n  letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid transparent; }\n.dest button[aria-pressed=\"true\"] { color:#f0eae4; border-bottom-color:#ff3b57; }\n.sendb { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px;\n  background:#ff3b57; color:#fff; font-size:13px; font-weight:600; line-height:1; }\n.sendb:hover { background:#ff5670; }\n.hints { margin-top:8px; font:500 9.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.06em; color:#756e68; }\n";
+/** Inline style of the HUD host — fixed bottom-right, above everything; overrides the [popover] UA sheet. */
+export declare const HOST_STYLE: string;
+/** Inline style of a sheet host portaled into a dialog: the same corner, above the dialog's own chrome. */
+export declare const SHEET_HOST_STYLE: string;
+/** Link-sheet additions (appended to HUD_CSS). */
+export declare const LINK_CSS = "\n.pop.link .code { margin-top:12px; font:700 28px/1.2 ui-monospace, Menlo, monospace; letter-spacing:.14em; text-align:center; color:#f0eae4; }\n.linkrow { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:12px; }\n.linkrow .sendb { text-decoration:none; }\n.qr { width:96px; height:96px; border-radius:8px; background:#fff; padding:4px; }\n.linkline { margin-top:10px; font:500 10px/1.4 ui-monospace, Menlo, monospace; color:#756e68; display:flex; gap:10px; align-items:center; }\n.linkline.bad { color:#ff3b57; }\n.retry { all:unset; cursor:pointer; padding:3px 8px; border-radius:6px; border:1px solid #363132; color:#a8a099; font:600 10px/1 ui-monospace, Menlo, monospace; }\n.retry:hover { color:#f0eae4; border-color:#756e68; }\n.grip.link { width:auto; border-radius:999px; padding:0 14px; gap:8px; color:#f0eae4; font:600 11px/1 -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; }\n";
+export declare const HUD_CSS: string;

package/build/recorder/hud/styles.js

@@ -0,0 +1,111 @@
+/**
+ * The HUD's stylesheet — the extension's pill/sheet/pick CSS, verbatim where
+ * it applies. Lives inside the shadow root (a `<style>` element), so it never
+ * touches host CSS and host CSS never touches it.
+ */
+export const HUD_CSS_BASE = `
+* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+svg { width:1em; height:1em; vertical-align:-.125em; }
+.stack { position:relative; z-index:4; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
+.pill { display:flex; align-items:center; gap:10px; padding:8px 10px 8px 14px;
+  background:#1d1a1b; border:1px solid #292526; border-radius:999px;
+  box-shadow:0 8px 30px rgba(0,0,0,.35); color:#f0eae4; }
+.dot { width:10px; height:10px; border-radius:50%; background:#ff3b57; animation:p 1.4s ease infinite; }
+.paused .dot { animation:none; background:#756e68; }
+@keyframes p { 50% { opacity:.35; } }
+.sync { font:600 11px/1 ui-monospace, Menlo, monospace; color:#5f7a5f; }
+.sync.warn { color:#e8a33d; }
+.sync.bad { color:#ff3b57; }
+.sync.busy { color:#a8a099; }
+.detail { max-width:320px; padding:6px 12px; border-radius:999px;
+  background:#1d1a1b; border:1px solid #292526; color:#a8a099;
+  font:500 10px/1.4 ui-monospace, Menlo, monospace;
+  opacity:0; transform:translateY(-3px); transition:opacity .24s ease, transform .24s ease;
+  pointer-events:none; }
+.detail.show { opacity:1; transform:none; }
+.detail.bad { border-color:#ff3b57; color:#f0eae4; }
+.time { font:600 11px/1 ui-monospace, Menlo, monospace; }
+.name { font:500 10px/1 ui-monospace, Menlo, monospace; color:#756e68;
+  border-left:1px solid #292526; padding-left:10px; max-width:140px;
+  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+button { all:unset; cursor:pointer; position:relative; width:28px; height:28px; border-radius:50%;
+  border:1px solid #363132; color:#a8a099; font-size:12px; text-align:center; line-height:28px; }
+button:hover { color:#f0eae4; border-color:#756e68; }
+button:focus-visible, .sendb:focus-visible, .closeb:focus-visible { outline:2px solid #ff3b57; outline-offset:2px; }
+button.snap { background:#ff3b57; border-color:#ff3b57; color:#fff; }
+button.snap.on { background:#f0eae4; border-color:#f0eae4; color:#1d1a1b; }
+kbd { position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
+  padding:4px 6px; border-radius:5px; background:#252122; border:1px solid #363132;
+  color:#a8a099; font:600 9.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.06em;
+  white-space:nowrap; opacity:0; transition:opacity .16s ease; pointer-events:none; }
+.b-snap kbd, .b-more kbd { left:auto; right:0; transform:none; }
+button:hover kbd, button:focus-visible kbd { opacity:1; }
+.pill.composing kbd { opacity:0; }
+/* idle grip: a quiet dot until a recording starts */
+.grip { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
+  background:#1d1a1b; border:1px solid #292526; box-shadow:0 8px 30px rgba(0,0,0,.35); }
+.grip .dot { animation:none; opacity:.9; }
+.grip:hover .dot { animation:p 1.4s ease infinite; }
+.grip.busy .dot { background:#756e68; }
+/* menu (Open board · Stop) */
+.menu { position:absolute; right:0; bottom:44px; min-width:160px; padding:6px;
+  background:#1d1a1b; border:1px solid #292526; border-radius:10px;
+  box-shadow:0 8px 30px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:2px; }
+.menu button { all:unset; cursor:pointer; padding:7px 10px; border-radius:6px; color:#d8d2cc;
+  font:500 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; display:flex; gap:8px; align-items:center; }
+.menu button:hover { background:#252122; color:#f0eae4; }
+.menu button.danger:hover { color:#ff3b57; }
+.menuwrap { position:relative; }
+/* pick chrome (annotate mode): dim, outline, hint — shadow-root children */
+.dim { position:fixed; inset:0; z-index:1; pointer-events:none; background:rgba(0,0,0,.22); }
+.outline { position:fixed; z-index:2; pointer-events:none; border:2px solid #ff3b57; border-radius:6px;
+  box-shadow:0 0 0 4px rgba(255,59,87,.15); }
+.hint { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:3; padding:8px 16px;
+  border-radius:999px; background:#1d1a1b; border:1px solid #ff3b57; box-shadow:0 8px 30px rgba(0,0,0,.4);
+  font:600 12px/1 -apple-system,BlinkMacSystemFont,sans-serif; color:#f0eae4; white-space:nowrap; }
+/* the composer sheet (360px) */
+.pop { width:360px; padding:14px; background:#1d1a1b; border:1px solid #292526; border-radius:14px;
+  box-shadow:0 8px 30px rgba(0,0,0,.35); color:#f0eae4; }
+.pop-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
+label { display:flex; align-items:center; gap:7px; font:700 9.5px/1 ui-monospace, Menlo, monospace;
+  letter-spacing:.18em; text-transform:uppercase; color:#756e68; }
+label i { width:3px; height:10px; background:#ff3b57; }
+.closeb { all:unset; cursor:pointer; width:24px; height:24px; border-radius:6px; color:#756e68; font-size:13px; text-align:center; line-height:24px; }
+.closeb:hover { color:#f0eae4; background:#252122; }
+textarea { width:100%; margin-top:10px; padding:10px 12px; min-height:72px; resize:vertical;
+  background:#141213; border:1px solid #363132; border-radius:8px; color:#f0eae4;
+  font:400 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+textarea:focus { outline:none; border-color:#756e68; }
+.row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; margin-top:10px; }
+.row.nodest { grid-template-columns:minmax(0,1fr) auto; }
+.ctx { font:500 10px/1.35 ui-monospace, Menlo, monospace; color:#756e68; text-align:center;
+  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.row.nodest .ctx { text-align:left; }
+.dest { display:flex; align-items:center; gap:9px; }
+.dest button { all:unset; cursor:pointer; padding:2px 0; color:#756e68; font:600 9px/1 ui-monospace, Menlo, monospace;
+  letter-spacing:.12em; text-transform:uppercase; border-bottom:1px solid transparent; }
+.dest button[aria-pressed="true"] { color:#f0eae4; border-bottom-color:#ff3b57; }
+.sendb { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px;
+  background:#ff3b57; color:#fff; font-size:13px; font-weight:600; line-height:1; }
+.sendb:hover { background:#ff5670; }
+.hints { margin-top:8px; font:500 9.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.06em; color:#756e68; }
+`;
+/** Inline style of the HUD host — fixed bottom-right, above everything; overrides the [popover] UA sheet. */
+export const HOST_STYLE = 'all:initial;position:fixed;z-index:2147483647;inset:auto 20px 20px auto;margin:0;padding:0;border:0;' +
+    'background:transparent;overflow:visible;width:auto;height:auto;color-scheme:normal;';
+/** Inline style of a sheet host portaled into a dialog: the same corner, above the dialog's own chrome. */
+export const SHEET_HOST_STYLE = 'all:initial;position:fixed;z-index:2147483647;right:20px;bottom:76px;margin:0;padding:0;border:0;' +
+    'background:transparent;overflow:visible;width:auto;height:auto;color-scheme:normal;';
+/** Link-sheet additions (appended to HUD_CSS). */
+export const LINK_CSS = `
+.pop.link .code { margin-top:12px; font:700 28px/1.2 ui-monospace, Menlo, monospace; letter-spacing:.14em; text-align:center; color:#f0eae4; }
+.linkrow { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:12px; }
+.linkrow .sendb { text-decoration:none; }
+.qr { width:96px; height:96px; border-radius:8px; background:#fff; padding:4px; }
+.linkline { margin-top:10px; font:500 10px/1.4 ui-monospace, Menlo, monospace; color:#756e68; display:flex; gap:10px; align-items:center; }
+.linkline.bad { color:#ff3b57; }
+.retry { all:unset; cursor:pointer; padding:3px 8px; border-radius:6px; border:1px solid #363132; color:#a8a099; font:600 10px/1 ui-monospace, Menlo, monospace; }
+.retry:hover { color:#f0eae4; border-color:#756e68; }
+.grip.link { width:auto; border-radius:999px; padding:0 14px; gap:8px; color:#f0eae4; font:600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+`;
+export const HUD_CSS = HUD_CSS_BASE + LINK_CSS;

package/build/recorder/index.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Vitrinka journey recorder for React DOM apps — `@vitrinka/web/recorder`.
+ *
+ * The runtime strip: when `url` is empty, `VitrinkaRecorderRoot` renders its
+ * children and starts NOTHING, and `VitrinkaRecorderPill` renders null. Auth
+ * is a device link minted from the pill (`@vitrinka/link`) or, for CI and
+ * unattended builds, an explicit `recorderKey`; `withVitrinkaRecorder`
+ * (`@vitrinka/web/next`) refuses a production build that carries a baked key
+ * outside an allowed lane.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+import { useRecorderRoute } from './RecorderProvider';
+export { useRecorderRoute };
+export type { RecorderControl, RecorderStatus } from './control';
+export type { RecorderConfig } from './config';
+export { configureRecorderStorage, type RecorderStorage } from './storage';
+export interface VitrinkaRecorderRootProps {
+    /** vitrinka base URL; defaults to `NEXT_PUBLIC_VITRINKA_URL`. */
+    url?: string;
+    /**
+     * A `vkr_` recorder key; defaults to `NEXT_PUBLIC_VITRINKA_KEY`. Named
+     * `recorderKey` because React reserves `key` and never delivers it as a prop.
+     */
+    recorderKey?: string;
+    /** Device-link label shown in vitrinka; defaults to `<browser> on <os> · <host>`. */
+    label?: string;
+    /** Reported in session meta. */
+    appVersion?: string;
+    /** Explicit server lane; omitted = the key's project rule decides. */
+    environment?: string;
+    /** A router's pathname, when the History wrap is not enough. */
+    route?: string | null;
+    children?: ReactNode;
+}
+/** Wrap the app root. Starts the capture lanes only when `url` + `key` are present. */
+export declare function VitrinkaRecorderRoot(props: VitrinkaRecorderRootProps): ReactElement;
+export interface VitrinkaRecorderPillProps {
+    /** Session title when the tester starts from the pill; defaults to `document.title`. */
+    title?: string;
+}
+/**
+ * The HUD — mount it anywhere under the root (it renders into its own shadow
+ * host on `<html>`, never into the app's DOM). Renders null when the root is
+ * inert.
+ */
+export declare function VitrinkaRecorderPill(props: VitrinkaRecorderPillProps): null;