@vitrinka/web 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @vitrinka/web
 
+## 0.1.2
+
+- **A HUD that is barely there.** Idle, it is a 28px glass puck (a hollow
+  ring until the device is linked) whose label slides out on hover or focus.
+  While recording it rests as a dot-and-timer capsule and unfolds into the
+  tools (sync · pause · note · annotate · more) on hover, focus or tap,
+  folding back 2.5s after you leave; the health line still opens by itself
+  when something is wrong. Smoked-glass surface, readable on light and dark
+  pages. Accessible names are unchanged; the capsule is `Recorder controls`
+  (`aria-expanded`), and a polite status line tells screen readers whether
+  it is recording, paused or offline.
+- **Move it anywhere.** Drag the capsule or puck and it lands on one of six
+  spots (corners, top and bottom centre); a flick lands where it is thrown.
+  Push it past a side edge and it tucks into a 6px tab (`Show recorder`).
+  Arrow keys on the focused handle and the menu's **Move to** picker move it
+  without dragging. The spot is remembered per site.
+- **Sheets open toward the page centre** from wherever the HUD sits, at most
+  288px wide; on a phone they are a bottom sheet above the keyboard, and the
+  link sheet drops the QR on touch devices (a phone cannot scan itself).
+- `prefers-reduced-motion` stills the ripple, the springs and the slides.
+- Needs `@vitrinka/link` 0.1.2 (`@vitrinka/link/dock`).
+
+## 0.1.1
+
+- **The recorder never changes the page under test**: rrweb records images by
+  URL (`inlineImages: false`). Inlining made rrweb set
+  `crossOrigin="anonymous"` on the page's own no-CORS cross-origin `<img>`,
+  which refetched it in CORS mode and broke it on hosts without ACAO.
+- **Link into the right workspace**: a `url` addressing `/w/<slug>`
+  preselects that workspace on the approve page, and a token approved into
+  any other one is discarded; the link sheet says `linked into <x> — this app
+  records into <slug>; link again and pick <slug>`. Needs `@vitrinka/link`
+  ≥ 0.1.1.
+
 ## 0.1.0
 
 - Initial release: the React DOM journey recorder (`@vitrinka/web/recorder`)

package/README.md

@@ -56,8 +56,10 @@ testers **link their device from the pill**: the pill shows **Link
 recorder**, the sheet shows a short code, **Open vitrinka** (approve on this
 device) and a QR (scan from your phone); once approved the server mints an
 ingest-only `vkr_` token, stored in `localStorage` under
-`vitrinka.recorder.link`, and recording starts. **Unlink** in the ⋯ menu
-forgets it — so does a 401 from the server. `recorderKey` (an admin-minted
+`vitrinka.recorder.link`, and recording starts. A `url` addressing
+`/w/<slug>` preselects that workspace on the approve page; a token approved
+into another workspace is discarded and the sheet says which one to pick.
+**Unlink** in the ⋯ menu forgets it — so does a 401 from the server. `recorderKey` (an admin-minted
 `vkr_` key) is for CI, e2e and unattended builds only; when passed it wins
 over the link. The prop is `recorderKey`, not `key`: React reserves `key`
 and never delivers it to a component.
@@ -109,16 +111,27 @@ returned unchanged otherwise.
 
 ## Using the pill
 
-Unlinked: **Link recorder** bottom-right. Linked and idle: a quiet dot — click to **start** (the session title is
-`document.title`, or the `title` prop). Recording: rec dot · timer · name ·
-sync glyph · controls (keycaps show on hover):
+Idle, the HUD is a 28px glass puck: a hollow ring until the device is linked
+(**Link recorder**), a muted dot once it is (**Start recording** — the session
+title is `document.title`, or the `title` prop); the label slides out on hover
+or focus. Recording, it rests as a dot + timer capsule (**Recorder controls**)
+that unfolds into the tools on hover, focus or tap and folds back 2.5s after
+you leave (keycaps show on hover):
 
 | Control | Shortcut | What |
 |---|---|---|
 | ⏸ Pause / ▶ Resume | ⌥⇧P (Alt⇧P) | freezes the clock and capture |
-| ✎ Note | ⌥⇧N | the 360px sheet — Enter sends, ⇧Enter newline, Esc / ✕ / click-outside cancel (the draft survives a cancel) |
+| ✎ Note | ⌥⇧N | the note sheet — Enter sends, ⇧Enter newline, Esc / ✕ / click-outside cancel (the draft survives a cancel) |
 | ⌖ Annotate | ⌥⇧A | click an element or drag a region, then describe it; `board` (an annotation on the board) or `task` (also filed as an intake draft) |
-| ⋯ | | **Open board** (the server-minted link) · **Stop recording** · **Unlink** |
+| ⋯ | | **Open board** (the server-minted link) · **Stop recording** · **Unlink** · **Move to** |
+
+Move it anywhere: drag the puck or capsule and it lands on one of six spots
+(corners, top and bottom centre) — a flick lands where it is thrown; push it
+past a side edge and it tucks into a 6px tab (**Show recorder** brings it
+back). Arrow keys on the focused handle and **Move to** do the same without a
+drag; the spot is remembered per site. Sheets (≤ 288px) open toward the
+middle of the page from wherever it sits; on a phone they are a bottom sheet
+above the keyboard and the link sheet drops the QR.
 
 The sync glyph is honest: ✓ means the server confirmed it holds everything
 captured; a second line unfolds only for a backlog, an outage (`offline ·
@@ -146,7 +159,7 @@ __vitrinkaRecorder.status(); // { recording, sessionId, elapsedMs, queued, synce
 
 | Lane | Event `kind` | Payload |
 |---|---|---|
-| rrweb | `rrweb` | `{count}` + `blobKey` — the batch itself is uploaded as a chunk; inputs always masked, all text under a `maskAllText` policy |
+| rrweb | `rrweb` | `{count}` + `blobKey` — the batch itself is uploaded as a chunk; inputs always masked, all text under a `maskAllText` policy; images recorded by URL, never inlined (inlining would alter the page's own `<img>`) |
 | clicks | `click` | `{selector, text, rect, route}` |
 | navigation | `nav` | `{url, route, spa}` |
 | network | `net` | `{method, url, status, ms, reqHeaders, resHeaders, reqBody, resBody, via}` — redacted, capped at 64 KiB per body; the recorder's own uploads are never recorded |

package/build/recorder/capture/rrweb.js

@@ -30,7 +30,11 @@ export function startRRWeb() {
                 buf.push(ev);
             },
             checkoutEveryNms: CHECKOUT_MS,
-            inlineImages: true,
+            // Never inline: to read a no-CORS cross-origin image rrweb sets
+            // crossOrigin='anonymous' on the page's own <img>, the browser refetches
+            // it in CORS mode and a host without ACAO shows a broken image — the
+            // recorder must never change the page under test. Replay loads by URL.
+            inlineImages: false,
             collectFonts: true,
             maskAllInputs: mask.maskAllInputs,
             ...(mask.maskTextSelector ? { maskTextSelector: mask.maskTextSelector } : {}),

package/build/recorder/hud/AnnotateOverlay.js

@@ -118,5 +118,5 @@ export function AnnotateOverlay({ onPick, onCancel }) {
             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"] })] }));
+    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, {}), " Click an element or drag an area", _jsx("span", { className: "keys", children: " \u00B7 esc cancels" })] })] }));
 }

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

@@ -1,8 +1,3 @@
-/**
- * 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). */

package/build/recorder/hud/Hud.js

@@ -1,22 +1,27 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, 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.
+ * the dock (where the HUD rests), the sheet (open/title/ctx/pick + the
+ * surviving draft) and where it opens, annotate mode, the keyboard
+ * shortcuts, the Esc-anywhere / click-outside close and the status line a
+ * screen reader hears while the capsule is folded.
  */
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { colOf, rowOf } from '@vitrinka/link/dock';
+import { useCallback, useEffect, useLayoutEffect, 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 { getState, health } 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 { anchoredLayer, hostOrigin, PHONE_QUERY, phoneLayer, restingBox, useMedia, usePresence, useViewportTick } from './layer';
 import { LinkSheet } from './LinkSheet';
 import { RecorderPill } from './RecorderPill';
 import { Sheet } from './Sheet';
 import { HUD_CSS } from './styles';
+import { useDock } from './useDock';
 let version = 0;
 const bump = () => ++version;
 function useRecorderState() {
@@ -74,6 +79,9 @@ export function Hud({ hostMount, defaultTitle }) {
         forgetLink();
     }, [closeLink]);
     const closeSheet = useCallback(() => setSheet(null), []);
+    // A drag closes the composer (its draft survives); the link sheet follows the dock.
+    const dock = useDock(closeSheet);
+    const phone = useMedia(PHONE_QUERY);
     const openNote = useCallback(() => {
         if (!getState())
             return;
@@ -131,7 +139,9 @@ export function Hud({ hostMount, defaultTitle }) {
     const onPause = useCallback(() => {
         void togglePause();
     }, []);
-    // Shortcuts (window keydown): ⌥⇧A annotate · ⌥⇧N note · ⌥⇧P pause.
+    // Shortcuts (window keydown, CAPTURE — the host's shield stops a keydown
+    // from a focused HUD control before it could bubble to window, and a drag
+    // leaves the handle focused): ⌥⇧A annotate · ⌥⇧N note · ⌥⇧P pause.
     useEffect(() => {
         const key = (e) => {
             if (!e.altKey || !e.shiftKey || e.metaKey || e.ctrlKey)
@@ -146,8 +156,8 @@ export function Hud({ hostMount, defaultTitle }) {
                 return;
             e.preventDefault();
         };
-        window.addEventListener('keydown', key);
-        return () => window.removeEventListener('keydown', key);
+        window.addEventListener('keydown', key, true);
+        return () => window.removeEventListener('keydown', key, true);
     }, [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).
@@ -173,18 +183,61 @@ export function Hud({ hostMount, defaultTitle }) {
             document.removeEventListener('pointerdown', down, true);
         };
     }, [sheet, link, closeSheet, closeLink]);
+    // Sheets enter and leave (presence) with their last content kept for the
+    // closing frames.
+    const sheetP = usePresence(sheet !== null, 150);
+    const linkP = usePresence(link !== null, 150);
+    const lastSheet = useRef(null);
+    const lastLink = useRef(null);
+    if (sheet)
+        lastSheet.current = sheet;
+    if (link)
+        lastLink.current = link;
+    const shownSheet = sheet ?? lastSheet.current;
+    const shownLink = link ?? lastLink.current;
     // The sheet's portal target (D4): a host inside the topmost open dialog
-    // when one exists, else the HUD host. Resolved per open.
+    // when one exists, else the HUD host. Resolved per open, kept while it closes.
     const portal = useMemo(() => {
-        if (!sheet)
+        if (!sheetP.mounted)
             return null;
         const target = sheetTarget();
         if (!target)
             return { mount: hostMount, destroy: () => undefined, own: false };
         const h = createSheetHost(target);
         return { ...h, own: true };
-    }, [sheet, hostMount]);
+    }, [sheetP.mounted, 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] })] }));
+    // Where the open layer sits (D5): anchored to the dock's resting box and
+    // opening toward the centre, or a phone bottom sheet over the visual viewport.
+    const layerOpen = sheet !== null || link !== null;
+    const vvTick = useViewportTick(layerOpen && phone);
+    const [layer, setLayer] = useState({ style: {}, origin: 'bottom-right' });
+    useLayoutEffect(() => {
+        const el = dock.ref.current;
+        if (!layerOpen || !el)
+            return;
+        const o = hostOrigin(sheet && portal ? portal.mount : hostMount);
+        setLayer(phone ? { style: phoneLayer(o), origin: 'bottom-center' } : anchoredLayer(restingBox(el), dock.place, o));
+    }, [layerOpen, sheet, portal, hostMount, dock.place, dock.ref, phone, vvTick]);
+    const layerCls = phone ? 'phone' : 'anchor';
+    const motionCls = phone ? 'rise' : 'grow';
+    const sheetEl = shownSheet && portal ? (_jsxs("div", { className: "hud", children: [portal.own ? _jsx("style", { children: HUD_CSS }) : null, _jsx("div", { className: layerCls, style: layer.style, children: _jsx(Sheet, { className: `${motionCls} ${sheetP.cls}`, origin: layer.origin, title: shownSheet.title, ctx: shownSheet.ctx, pick: shownSheet.pick !== null, draft: draft, onDraft: setDraft, onSend: onSend, onClose: closeSheet }) })] })) : null;
+    // Stable phrases only: a live region re-announces on every text change.
+    const hs = rec ? health().state : null;
+    const status = !rec
+        ? linked
+            ? 'Recorder ready'
+            : 'Recorder not linked'
+        : hs === 'dead'
+            ? 'Recording ended on the server'
+            : hs === 'offline'
+                ? 'Recorder offline, retrying'
+                : rec.paused
+                    ? 'Recording paused'
+                    : 'Recording';
+    const place = dock.place;
+    const dockAttrs = 'tuck' in place
+        ? { 'data-tuck': place.tuck, style: { '--ty': String(place.y) } }
+        : { 'data-row': rowOf(place.spot), 'data-col': colOf(place.spot) };
+    return (_jsxs("div", { className: "hud", "data-spot": 'spot' in place ? place.spot : undefined, children: [_jsx("style", { children: HUD_CSS }), annotating && rec ? _jsx(AnnotateOverlay, { onPick: onPick, onCancel: cancelAnnotate }) : null, _jsx("div", { ref: dock.ref, className: dock.dragging ? 'dock dragging' : 'dock', ...dockAttrs, onClickCapture: dock.onClickCapture, children: _jsx(RecorderPill, { rec: rec, composing: sheet !== null, annotating: annotating, stopping: stopping, starting: starting, linked: linked, canUnlink: canUnlink, place: place, dragging: dock.dragging, handle: dock.handle, onMove: dock.moveTo, onLink: beginLink, onUnlink: onUnlink, onStart: onStart, onPause: onPause, onNote: openNote, onAnnotate: toggleAnnotate, onStop: onStop }) }), sheetEl && portal ? createPortal(sheetEl, portal.mount) : null, linkP.mounted && shownLink ? (_jsx("div", { className: layerCls, style: layer.style, children: _jsx(LinkSheet, { className: `${motionCls} ${linkP.cls}`, origin: layer.origin, phase: shownLink.phase, start: shownLink.flow?.start ?? null, error: shownLink.error, onRetry: beginLink, onClose: closeLink }) })) : null, _jsx("div", { className: "sr", role: "status", "aria-live": "polite", children: status })] }));
 }

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

@@ -1,12 +1,17 @@
 /**
  * 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.
+ * the server-rendered QR for the desktop→phone path (fine pointers only),
+ * 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 {
+    /** Presence classes (`grow`/`rise` + `is-open`/`is-closing`). */
+    className: string;
+    /** The corner it grows from (`bottom-right`, …). */
+    origin: string;
     phase: LinkPhase;
     start: LinkStart | null;
     error?: string;
@@ -21,6 +26,7 @@ export declare const LINK_STRINGS: {
     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";
+    readonly hint: "Approve here, or scan it with your phone.";
+    readonly hintTouch: "Approve it in vitrinka, then come back here.";
 };
-export declare function LinkSheet({ phase, start, error, onRetry, onClose }: LinkSheetProps): ReactElement;
+export declare function LinkSheet({ className, origin, phase, start, error, onRetry, onClose }: LinkSheetProps): ReactElement;

package/build/recorder/hud/LinkSheet.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { CloseIcon, NewTabIcon } from './icons';
+import { FINE_QUERY, useMedia } from './layer';
 export const LINK_STRINGS = {
     title: 'Link recorder',
     open: 'Open vitrinka',
@@ -8,8 +9,11 @@ export const LINK_STRINGS = {
     expired: 'code expired — try again',
     retry: 'Try again',
     qrAlt: 'Scan to link',
-    hint: 'approve on this device, or scan from your phone',
+    hint: 'Approve here, or scan it with your phone.',
+    hintTouch: 'Approve it in vitrinka, then come back here.',
 };
-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 })] }));
+export function LinkSheet({ className, origin, phase, start, error, onRetry, onClose }) {
+    // The QR serves the desktop→phone path; a touch device cannot scan itself (D5).
+    const qr = useMedia(FINE_QUERY);
+    return (_jsxs("div", { className: `pop link ${className}`, "data-origin": origin, role: "dialog", "aria-labelledby": "vt-link-title", "data-e2e": "link-sheet", children: [_jsxs("div", { className: "pop-head", children: [_jsxs("span", { className: "title", 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: [_jsxs("div", { className: qr ? 'linkgrid' : 'linkgrid noqr', children: [_jsx("div", { className: "code", "data-e2e": "link-code", children: start.user_code }), _jsxs("a", { className: "sendb", href: start.verifyUrl, target: "_blank", rel: "noopener noreferrer", children: [_jsx(NewTabIcon, {}), _jsx("span", { children: LINK_STRINGS.open })] }), qr ? _jsx("img", { className: "qr", src: start.qrUrl, alt: LINK_STRINGS.qrAlt, width: 76, height: 76 }) : null] }), _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: qr ? LINK_STRINGS.hint : LINK_STRINGS.hintTouch })] }));
 }

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

@@ -1,13 +1,18 @@
 /**
- * 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.
+ * The HUD's face (recorder-hud-subtle D1/D4). Idle: a 28px glass PUCK — a
+ * hollow ring before the device is linked, a muted dot once it is — whose
+ * label slides out on hover/focus. Recording: a CAPSULE of rec dot + timer
+ * that unfolds into the TRAY (sync · ⏸ ✎ ⌖ ⋯, keycaps on hover) on hover,
+ * focus or tap and folds back ~2.5s after the pointer and focus leave; a
+ * one-line health detail unfolds only when something is wrong. Tucked: a 6px
+ * edge TAB. The capsule handle, the puck and the tab are the drag handles.
  */
+import { type Place, type Spot } from '@vitrinka/link/dock';
 import { type ReactElement } from 'react';
 import { type RecorderHealth, type SessionState } from '../queue';
+import type { DockHandle } from './useDock';
 export declare const MOD: string;
+export declare const SPOT_NAMES: Record<Spot, string>;
 /** The extension's renderHealth: glyph + class + optional detail line. */
 export declare function healthLine(h: RecorderHealth, stopping: boolean): {
     glyph: ReactElement | string;
@@ -25,6 +30,10 @@ export interface RecorderPillProps {
     linked: boolean;
     /** A stored link can be forgotten; an explicit key cannot. */
     canUnlink: boolean;
+    place: Place;
+    dragging: boolean;
+    handle: DockHandle;
+    onMove: (place: Place) => void;
     onLink: () => void;
     onUnlink: () => void;
     onStart: () => void;

package/build/recorder/hud/RecorderPill.js

@@ -1,16 +1,32 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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.
+ * The HUD's face (recorder-hud-subtle D1/D4). Idle: a 28px glass PUCK — a
+ * hollow ring before the device is linked, a muted dot once it is — whose
+ * label slides out on hover/focus. Recording: a CAPSULE of rec dot + timer
+ * that unfolds into the TRAY (sync · ⏸ ✎ ⌖ ⋯, keycaps on hover) on hover,
+ * focus or tap and folds back ~2.5s after the pointer and focus leave; a
+ * one-line health detail unfolds only when something is wrong. Tucked: a 6px
+ * edge TAB. The capsule handle, the puck and the tab are the drag handles.
  */
-import { useEffect, useState } from 'react';
+import { SPOTS, untuck } from '@vitrinka/link/dock';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { health } from '../queue';
 import { elapsedOf } from '../session';
 import { AnnotateIcon, CheckIcon, CloseIcon, MoreIcon, NewTabIcon, PauseIcon, PencilIcon, PlayIcon, StopIcon } from './icons';
+import { usePresence } from './layer';
 export const MOD = /Mac|iPhone|iPad/.test(globalThis.navigator?.platform ?? '') ? '⌥⇧' : 'Alt⇧';
+/** How long the tray stays unfolded after the pointer and focus leave it. */
+const FOLD_MS = 2500;
+/** …and after a touch interaction inside it (no hover to keep it open). */
+const FOLD_TOUCH_MS = 4000;
+export const SPOT_NAMES = {
+    tl: 'top left',
+    tc: 'top centre',
+    tr: 'top right',
+    bl: 'bottom left',
+    bc: 'bottom centre',
+    br: 'bottom right',
+};
 function fmtAge(ms) {
     return ms < 1000 ? 'just now' : ms < 60000 ? `${Math.round(ms / 1000)}s` : `${Math.round(ms / 60000)}m`;
 }
@@ -41,33 +57,156 @@ export function healthLine(h, stopping) {
 export function RecorderPill(p) {
     const [, tick] = useState(0);
     const [menu, setMenu] = useState(false);
+    const [open, setOpen] = useState(false);
+    const fold = useRef(undefined);
+    const hovered = useRef(false);
+    const barRef = useRef(null);
+    const moreRef = useRef(null);
+    const menuP = usePresence(menu, 150);
+    const hold = menu || p.composing || p.annotating;
     useEffect(() => {
         const t = setInterval(() => tick((n) => n + 1), 1000);
         return () => clearInterval(t);
     }, []);
     useEffect(() => {
-        if (!p.rec)
+        if (!p.rec) {
             setMenu(false);
+            setOpen(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" })] }) }));
+    const cancelFold = useCallback(() => clearTimeout(fold.current), []);
+    // A hovering pointer or keyboard focus inside keeps the tray; a tap's
+    // focus does not (touch has no "leave" to fold on).
+    const foldIn = useCallback((ms) => {
+        cancelFold();
+        fold.current = setTimeout(() => {
+            if (!hovered.current && !barRef.current?.querySelector(':focus-visible'))
+                setOpen(false);
+        }, ms);
+    }, [cancelFold]);
+    useEffect(() => cancelFold, [cancelFold]);
+    // A drag folds everything; a held tray (menu, sheet, annotate) never folds,
+    // and folds on the usual delay once the hold ends and nothing keeps it.
+    useEffect(() => {
+        if (p.dragging) {
+            cancelFold();
+            setMenu(false);
+            setOpen(false);
+        }
+    }, [p.dragging, cancelFold]);
+    useEffect(() => {
+        if (hold)
+            cancelFold();
+        else if (open)
+            foldIn(FOLD_MS);
+    }, [hold, open, cancelFold, foldIn]);
+    // Folded tools are out of the tab order and the accessibility tree
+    // (imperative: React 18 and 19 disagree on the `inert` prop).
+    const trayRef = useRef(null);
+    const unfolded = open || hold;
+    useLayoutEffect(() => {
+        if (trayRef.current)
+            trayRef.current.inert = !unfolded;
+    });
+    // Hover is read with NATIVE pointerenter/leave: React synthesises enter
+    // from over/out pairs and drops an `over` whose related target belongs to
+    // any React root — on a React page the pointer always arrives from the
+    // app's own tree, so a synthetic onPointerEnter never fires on the HUD.
+    const holdRef = useRef(hold);
+    holdRef.current = hold;
+    const hasBar = p.rec !== null && !('tuck' in p.place);
+    useLayoutEffect(() => {
+        const bar = barRef.current;
+        if (!bar)
+            return;
+        // The capsule often appears UNDER a resting pointer (it replaces the
+        // puck that was just clicked): that pointer never "enters", so seed it.
+        if (bar.matches(':hover')) {
+            hovered.current = true;
+            setOpen(true);
+        }
+        const enter = (e) => {
+            if (e.pointerType !== 'mouse')
+                return;
+            hovered.current = true;
+            cancelFold();
+            setOpen(true);
+        };
+        const leave = (e) => {
+            if (e.pointerType !== 'mouse')
+                return;
+            hovered.current = false;
+            if (!holdRef.current)
+                foldIn(FOLD_MS);
+        };
+        bar.addEventListener('pointerenter', enter);
+        bar.addEventListener('pointerleave', leave);
+        return () => {
+            bar.removeEventListener('pointerenter', enter);
+            bar.removeEventListener('pointerleave', leave);
+        };
+    }, [hasBar, cancelFold, foldIn]);
+    // The menu closes on Esc (focus back on ⋯) and on a press anywhere else.
+    useEffect(() => {
+        if (!menu)
+            return;
+        const key = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            setMenu(false);
+            moreRef.current?.focus();
+        };
+        const down = (e) => {
+            if (!e.composedPath().includes(barRef.current))
+                setMenu(false);
+        };
+        document.addEventListener('keydown', key, true);
+        document.addEventListener('pointerdown', down, true);
+        return () => {
+            document.removeEventListener('keydown', key, true);
+            document.removeEventListener('pointerdown', down, true);
+        };
+    }, [menu]);
+    if ('tuck' in p.place) {
+        const h = p.rec ? healthLine(health(), p.stopping) : null;
+        return (_jsx("button", { type: "button", className: "tab", "aria-label": "Show recorder", "data-state": h?.bad ? 'bad' : p.rec && !p.rec.paused ? 'rec' : 'idle', ...p.handle, onClick: () => p.onMove({ spot: untuck(p.place) }) }));
     }
     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 unlinked = !p.linked;
+        const label = unlinked ? 'Link recorder' : 'Start recording';
+        return (_jsxs("button", { type: "button", className: "puck glass", "data-state": unlinked ? 'unlinked' : p.starting ? 'busy' : 'ready', "aria-label": label, onClick: unlinked ? p.onLink : p.onStart, disabled: p.starting, ...p.handle, children: [_jsx("span", { className: "ring" }), _jsx("span", { className: "lab", "aria-hidden": "true", children: _jsx("span", { children: label }) })] }));
     }
     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 })] }));
+    const hl = healthLine(health(), p.stopping);
+    const state = hl.bad ? 'bad' : rec.paused || rec.dead || p.stopping ? 'paused' : 'rec';
+    const current = 'spot' in p.place ? p.place.spot : null;
+    const origin = `${current?.[0] === 't' ? 'top' : 'bottom'}-${current?.[1] === 'r' ? 'right' : 'left'}`;
+    const onTouch = (e) => {
+        if (e.pointerType !== 'mouse' && open)
+            foldIn(FOLD_TOUCH_MS);
+    };
+    // Keyboard focus unfolds; a tap's focus is left to the tap's own toggle.
+    const onFocus = (e) => {
+        if (!e.target.matches(':focus-visible'))
+            return;
+        cancelFold();
+        setOpen(true);
+    };
+    const onBlur = (e) => {
+        if (barRef.current?.contains(e.relatedTarget))
+            return;
+        if (!hold)
+            foldIn(FOLD_MS);
+    };
+    const toggle = () => {
+        setOpen((o) => !o);
+        foldIn(FOLD_TOUCH_MS);
+    };
+    const act = (fn) => () => {
+        setMenu(false);
+        fn();
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: barRef, className: p.composing ? 'bar glass composing' : 'bar glass', "data-e2e": "recorder-pill", "data-state": state, "data-open": unfolded ? '' : undefined, onPointerDown: onTouch, onFocus: onFocus, onBlur: onBlur, children: [_jsxs("button", { type: "button", className: "handle", "aria-label": "Recorder controls", "aria-expanded": unfolded, onClick: toggle, ...p.handle, children: [_jsx("span", { className: "dot" }), _jsx("span", { className: "time", children: fmtClock(elapsedOf(rec)) })] }), _jsx("div", { ref: trayRef, className: "tray", children: _jsxs("div", { className: "tray-in", children: [_jsx("span", { className: "sep" }), _jsx("span", { className: `sync${hl.cls ? ' ' + hl.cls : ''}`, title: "everything captured has reached vitrinka", children: hl.glyph }), _jsxs("button", { type: "button", className: "tb 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: "tb b-note", "aria-label": "Note", onClick: p.onNote, children: [_jsx(PencilIcon, {}), _jsxs("kbd", { children: [MOD, "N note"] })] }), _jsxs("button", { type: "button", className: p.annotating ? 'tb b-annotate on' : 'tb b-annotate', "aria-label": "Annotate", "aria-pressed": p.annotating, onClick: p.onAnnotate, children: [_jsx(AnnotateIcon, {}), _jsxs("kbd", { children: [MOD, "A annotate"] })] }), _jsx("button", { ref: moreRef, type: "button", className: "tb b-more", "aria-label": "More", "aria-haspopup": "menu", "aria-expanded": menu, onClick: () => setMenu((m) => !m), children: _jsx(MoreIcon, {}) })] }) }), menuP.mounted ? (_jsxs("div", { className: `menu grow ${menuP.cls}`, "data-origin": origin, role: "menu", "aria-label": "Recorder", children: [rec.boardUrl ? (_jsxs("button", { type: "button", role: "menuitem", onClick: act(() => window.open(rec.boardUrl, '_blank', 'noopener')), children: [_jsx(NewTabIcon, {}), " Open board"] })) : null, _jsxs("button", { type: "button", role: "menuitem", className: "danger", onClick: act(p.onStop), children: [_jsx(StopIcon, {}), " Stop recording"] }), p.canUnlink ? (_jsxs("button", { type: "button", role: "menuitem", onClick: act(p.onUnlink), children: [_jsx(CloseIcon, {}), " Unlink"] })) : null, _jsxs("div", { className: "moveto", role: "group", "aria-label": "Move to", children: [_jsx("span", { "aria-hidden": "true", children: "Move to" }), _jsx("span", { className: "spots", children: SPOTS.map((s) => (_jsx("button", { type: "button", role: "menuitemradio", "aria-checked": current === s, "aria-label": `Move to ${SPOT_NAMES[s]}`, onClick: act(() => p.onMove({ spot: s })) }, s))) })] })] })) : null] }), _jsx("div", { className: ['detail', hl.line ? 'show' : '', hl.bad ? 'bad' : ''].filter(Boolean).join(' '), "aria-hidden": !hl.line, children: hl.line })] }));
 }

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

@@ -1,13 +1,18 @@
 /**
- * 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
+ * The composer sheet — the extension's hud.html, as a component: ≤ 288px
+ * anchored to the dock (a bottom sheet on phones), a 14px textarea (16px on
+ * touch, so iOS never zooms), ✕ in the title row, a three-column footer
+ * (board|task · context · ↑ Send) and the hint line (hidden on touch). 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 {
+    /** Presence classes (`grow`/`rise` + `is-open`/`is-closing`). */
+    className: string;
+    /** The corner it grows from (`bottom-right`, …). */
+    origin: string;
     title: string;
     ctx: string;
     /** True when the sheet composes an annotation (shows board|task). */
@@ -17,4 +22,4 @@ export interface SheetProps {
     onSend: (text: string, task: boolean) => void;
     onClose: () => void;
 }
-export declare function Sheet({ title, ctx, pick, draft, onDraft, onSend, onClose }: SheetProps): ReactElement;
+export declare function Sheet({ className, origin, title, ctx, pick, draft, onDraft, onSend, onClose }: SheetProps): ReactElement;