@vitrinka/web 0.1.0 → 0.1.2

package/build/recorder/hud/Sheet.js

@@ -1,15 +1,16 @@
 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
+ * 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 { useEffect, useRef, useState } from 'react';
 import { ArrowUpIcon, CloseIcon } from './icons';
-export function Sheet({ title, ctx, pick, draft, onDraft, onSend, onClose }) {
+export function Sheet({ className, origin, title, ctx, pick, draft, onDraft, onSend, onClose }) {
     const ta = useRef(null);
     const [task, setTask] = useState(false);
     useEffect(() => {
@@ -32,5 +33,5 @@ export function Sheet({ title, ctx, pick, draft, onDraft, onSend, onClose }) {
             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" })] }));
+    return (_jsxs("div", { className: `pop ${className}`, "data-origin": origin, role: "dialog", "aria-labelledby": "vt-pop-title", onKeyDown: onKey, children: [_jsxs("div", { className: "pop-head", children: [_jsxs("span", { className: "title", 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/layer.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Where a sheet opens and how it enters and leaves (recorder-hud-subtle D5).
+ * On desktop and tablet a sheet is a popover anchored to the dock, opening
+ * toward the viewport centre from whichever spot the dock rests on; on a
+ * phone (narrow + coarse pointer) it is a bottom sheet over the visual
+ * viewport, so it rides above the on-screen keyboard. Coordinates are
+ * relative to the sheet host's own origin box, which may sit inside a
+ * transformed dialog.
+ */
+import { type Place } from '@vitrinka/link/dock';
+import { type CSSProperties } from 'react';
+export declare const PHONE_QUERY = "(max-width: 640px) and (pointer: coarse)";
+export declare const FINE_QUERY = "(pointer: fine)";
+/** A live media query (false where matchMedia is missing). */
+export declare function useMedia(query: string): boolean;
+/** Re-render while `active` whenever the visual viewport moves (keyboard, pinch, rotate). */
+export declare function useViewportTick(active: boolean): number;
+/**
+ * Mount-and-animate for a surface that opens and closes: `is-open` one frame
+ * after mounting (so the pre-open state paints first), `is-closing` for
+ * `closeMs` before unmounting.
+ */
+export declare function usePresence(open: boolean, closeMs: number): {
+    mounted: boolean;
+    cls: '' | 'is-open' | 'is-closing';
+};
+export interface Box {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** The dock's resting box — layout only, so a spring in flight does not skew the anchor. */
+export declare function restingBox(el: HTMLElement): Box;
+/** The viewport position of the host a sheet renders in (its 0×0 origin box). */
+export declare function hostOrigin(mount: HTMLElement): {
+    x: number;
+    y: number;
+};
+/** A popover anchored to the dock, growing from the corner nearest it. */
+export declare function anchoredLayer(dock: Box, place: Place, origin: {
+    x: number;
+    y: number;
+}): {
+    style: CSSProperties;
+    origin: string;
+};
+/** A phone bottom sheet: the full visual viewport, content pinned to its bottom edge. */
+export declare function phoneLayer(origin: {
+    x: number;
+    y: number;
+}): CSSProperties;

package/build/recorder/hud/layer.js

@@ -0,0 +1,121 @@
+/**
+ * Where a sheet opens and how it enters and leaves (recorder-hud-subtle D5).
+ * On desktop and tablet a sheet is a popover anchored to the dock, opening
+ * toward the viewport centre from whichever spot the dock rests on; on a
+ * phone (narrow + coarse pointer) it is a bottom sheet over the visual
+ * viewport, so it rides above the on-screen keyboard. Coordinates are
+ * relative to the sheet host's own origin box, which may sit inside a
+ * transformed dialog.
+ */
+import { colOf, rowOf, untuck } from '@vitrinka/link/dock';
+import { useEffect, useState, useSyncExternalStore } from 'react';
+export const PHONE_QUERY = '(max-width: 640px) and (pointer: coarse)';
+export const FINE_QUERY = '(pointer: fine)';
+/** A live media query (false where matchMedia is missing). */
+export function useMedia(query) {
+    return useSyncExternalStore((cb) => {
+        const m = globalThis.matchMedia?.(query);
+        m?.addEventListener('change', cb);
+        return () => m?.removeEventListener('change', cb);
+    }, () => globalThis.matchMedia?.(query).matches ?? false, () => false);
+}
+/** Re-render while `active` whenever the visual viewport moves (keyboard, pinch, rotate). */
+export function useViewportTick(active) {
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        if (!active)
+            return;
+        const bump = () => setTick((n) => n + 1);
+        const vv = globalThis.visualViewport;
+        vv?.addEventListener('resize', bump);
+        vv?.addEventListener('scroll', bump);
+        addEventListener('resize', bump);
+        return () => {
+            vv?.removeEventListener('resize', bump);
+            vv?.removeEventListener('scroll', bump);
+            removeEventListener('resize', bump);
+        };
+    }, [active]);
+    return tick;
+}
+/**
+ * Mount-and-animate for a surface that opens and closes: `is-open` one frame
+ * after mounting (so the pre-open state paints first), `is-closing` for
+ * `closeMs` before unmounting.
+ */
+export function usePresence(open, closeMs) {
+    const [mounted, setMounted] = useState(false);
+    const [cls, setCls] = useState('');
+    useEffect(() => {
+        if (open) {
+            setMounted(true);
+            let inner = 0;
+            const outer = requestAnimationFrame(() => {
+                inner = requestAnimationFrame(() => setCls('is-open'));
+            });
+            return () => {
+                cancelAnimationFrame(outer);
+                cancelAnimationFrame(inner);
+            };
+        }
+        setCls((c) => (c === '' ? c : 'is-closing'));
+        const t = setTimeout(() => {
+            setMounted(false);
+            setCls('');
+        }, closeMs);
+        return () => clearTimeout(t);
+    }, [open, closeMs]);
+    return { mounted: open || mounted, cls };
+}
+/** The dock's resting box — layout only, so a spring in flight does not skew the anchor. */
+export function restingBox(el) {
+    const left = el.offsetLeft;
+    const top = el.offsetTop;
+    return { left, top, right: left + el.offsetWidth, bottom: top + el.offsetHeight };
+}
+/** The viewport position of the host a sheet renders in (its 0×0 origin box). */
+export function hostOrigin(mount) {
+    const root = mount.getRootNode();
+    const host = root instanceof ShadowRoot ? root.host : null;
+    if (!host)
+        return { x: 0, y: 0 };
+    const r = host.getBoundingClientRect();
+    return { x: r.left, y: r.top };
+}
+const GAP = 8;
+/** A popover anchored to the dock, growing from the corner nearest it. */
+export function anchoredLayer(dock, place, origin) {
+    const spot = untuck(place);
+    const row = rowOf(spot);
+    const col = colOf(spot);
+    let ax;
+    let tx;
+    let ay;
+    let ty;
+    if ('tuck' in place) {
+        ax = place.tuck === 'left' ? dock.right + GAP : dock.left - GAP;
+        tx = place.tuck === 'left' ? '0' : '-100%';
+        ay = row === 't' ? dock.top : dock.bottom;
+        ty = row === 't' ? '0' : '-100%';
+    }
+    else {
+        ax = col === 'l' ? dock.left : col === 'r' ? dock.right : innerWidth / 2;
+        tx = col === 'l' ? '0' : col === 'r' ? '-100%' : '-50%';
+        ay = row === 't' ? dock.bottom + GAP : dock.top - GAP;
+        ty = row === 't' ? '0' : '-100%';
+    }
+    return {
+        style: { left: ax - origin.x, top: ay - origin.y, translate: `${tx} ${ty}` },
+        origin: `${row === 't' ? 'top' : 'bottom'}-${col === 'l' ? 'left' : col === 'c' ? 'center' : 'right'}`,
+    };
+}
+/** A phone bottom sheet: the full visual viewport, content pinned to its bottom edge. */
+export function phoneLayer(origin) {
+    const vv = globalThis.visualViewport;
+    return {
+        left: (vv?.offsetLeft ?? 0) - origin.x,
+        top: (vv?.offsetTop ?? 0) - origin.y,
+        width: vv?.width ?? innerWidth,
+        height: vv?.height ?? innerHeight,
+    };
+}

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

@@ -1,13 +1,27 @@
 /**
- * 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.
+ * The HUD's stylesheet. Lives inside the shadow root (a `<style>` element),
+ * so it never touches host CSS and host CSS never touches it.
+ *
+ * Shapes (recorder-hud-subtle): the 28px glass PUCK at idle, the dot+timer
+ * CAPSULE while recording that unfolds into the TRAY on intent, the 6px edge
+ * TAB when tucked. The `.dock` rests on one of six spots (`data-row` t|b ×
+ * `data-col` l|c|r) by viewport insets, so an unfolding tray always grows
+ * toward the centre; a drag moves it by `transform` only. Motion follows
+ * the transitions.dev token scale.
+ */
+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.hud {\n  --ink: rgba(26,22,23,.72); --ink-pop: rgba(26,22,23,.88); --ink-solid: #1d1a1b;\n  --ink-2: rgba(255,255,255,.08); --edge: rgba(255,255,255,.11); --rim: rgba(0,0,0,.30);\n  --fg: #f4efea; --fg-2: rgba(244,239,234,.66); --fg-3: rgba(244,239,234,.44);\n  --rec: #ff3b57; --warn: #f0a63a;\n  --m: 16px; --h: 28px; --b: 24px;\n  --duration-quick: 150ms; --duration-fast: 250ms; --duration-resize: 300ms; --duration-medium: 350ms; --duration-snap: 500ms;\n  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: ease-in-out; --ease-out: ease-out;\n  --ease-spring: var(--ease-smooth-out);\n  --scale-open: .97; --scale-closing: .99; --blur-small: 2px; --rise: 16px;\n  color: var(--fg); font-size: 12px;\n}\n@supports (transition-timing-function: linear(0, 1)) {\n  /* a damped spring, ~4% overshoot over 500ms \u2014 the settle after a throw */\n  .hud { --ease-spring: linear(0, 0.042, 0.143, 0.274, 0.414, 0.549, 0.67, 0.773, 0.856, 0.921, 0.968, 1.001, 1.021, 1.033, 1.038, 1.038, 1.035, 1.031, 1.025, 1.02, 1.015, 1.011, 1.007, 1.004, 1); }\n}\n@media (pointer: coarse) { .hud { --m: 12px; --h: 32px; --b: 30px; } }\n/* scoped under .hud so a control's own `all:unset` reset cannot wipe the surface */\n.hud .glass, .hud .menu, .hud .pop, .hud .detail, .hud .hint {\n  background: var(--ink);\n  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);\n  box-shadow: inset 0 0 0 1px var(--edge), 0 0 0 .5px var(--rim), 0 10px 28px -10px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.28);\n  color: var(--fg);\n}\n.hud .menu, .hud .pop { background: var(--ink-pop); }\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  .hud .glass, .hud .menu, .hud .pop, .hud .detail, .hud .hint { background: var(--ink-solid); }\n}\n.sr { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }\n\n/* the dock: one of six spots, or tucked into a side edge */\n.dock { position:fixed; z-index:4; display:flex; pointer-events:auto; }\n.dock[data-row=\"b\"] { bottom: calc(var(--m) + env(safe-area-inset-bottom, 0px)); }\n.dock[data-row=\"t\"] { top: calc(var(--m) + env(safe-area-inset-top, 0px)); }\n.dock[data-col=\"l\"] { left: calc(var(--m) + env(safe-area-inset-left, 0px)); }\n.dock[data-col=\"r\"] { right: calc(var(--m) + env(safe-area-inset-right, 0px)); }\n.dock[data-col=\"c\"] { left: calc(50% - var(--hw, 36px) / 2); }\n.dock[data-tuck] { top: clamp(8px, calc(var(--ty, .5) * 100% - 28px), calc(100% - 64px)); }\n.dock[data-tuck=\"left\"] { left:0; }\n.dock[data-tuck=\"right\"] { right:0; }\n.dock.settling { transition: transform var(--duration-snap) var(--ease-spring); }\n.dock.dragging .glass { box-shadow: inset 0 0 0 1px var(--edge), 0 0 0 .5px var(--rim), 0 18px 40px -12px rgba(0,0,0,.55), 0 4px 10px -4px rgba(0,0,0,.3); }\n\n/* the recording dot: a soft ripple while recording, still otherwise */\n.dot { position:relative; width:8px; height:8px; flex:none; border-radius:50%; background:var(--rec); }\n.dot::after { content:\"\"; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(255,59,87,.5); animation:ripple 2s var(--ease-out) infinite; }\n@keyframes ripple { 0% { box-shadow:0 0 0 0 rgba(255,59,87,.45); } 70%, 100% { box-shadow:0 0 0 7px rgba(255,59,87,0); } }\n.bar[data-state=\"paused\"] .dot { background:var(--fg-3); }\n.bar[data-state=\"bad\"] .dot { background:var(--warn); }\n.bar[data-state=\"paused\"] .dot::after, .bar[data-state=\"bad\"] .dot::after { animation:none; }\n\n/* idle: the puck \u2014 ring = not linked, dot = ready; the label slides out on intent */\n.puck { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; height:var(--h); min-width:var(--h);\n  padding:0 calc((var(--h) - 10px) / 2); border-radius:999px; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none;\n  font-weight:600; font-size:12px; color:var(--fg); }\n.dock[data-col=\"r\"] .puck { flex-direction:row-reverse; }\n.ring { width:10px; height:10px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--fg-2);\n  transition: background-color var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out); }\n.puck[data-state=\"ready\"] .ring { background:var(--fg-2); box-shadow:none; }\n.puck[data-state=\"busy\"] .ring { background:var(--fg-3); box-shadow:none; animation:breathe 1.2s var(--ease-in-out) infinite; }\n@keyframes breathe { 50% { opacity:.35; } }\n.lab { display:grid; grid-template-columns:0fr; opacity:0;\n  transition: grid-template-columns var(--duration-resize) var(--ease-smooth-out), opacity var(--duration-quick) var(--ease-out); }\n/* the gap to the ring is a clipped pseudo-element: padding would keep a folded label 10px wide */\n.lab > span { min-width:0; overflow:hidden; white-space:nowrap; }\n.lab > span::before, .lab > span::after { content:\"\"; display:inline-block; }\n.lab > span::before { width:8px; }\n.lab > span::after { width:2px; }\n.dock[data-col=\"r\"] .lab > span::before { width:2px; }\n.dock[data-col=\"r\"] .lab > span::after { width:8px; }\n.puck:focus-visible .lab { grid-template-columns:1fr; opacity:1; }\n.puck:focus-visible { outline:2px solid var(--rec); outline-offset:2px; }\n@media (hover: hover) {\n  .puck:hover .lab { grid-template-columns:1fr; opacity:1; }\n  .puck[data-state=\"ready\"]:hover .ring { background:var(--rec); }\n  .puck[data-state=\"unlinked\"]:hover .ring { box-shadow:inset 0 0 0 1.5px var(--fg); }\n}\n\n/* recording: the capsule (handle) + the tray it unfolds */\n.bar { position:relative; display:inline-flex; align-items:center; height:var(--h); border-radius:999px; }\n.dock[data-col=\"r\"] .bar, .dock[data-col=\"r\"] .tray-in { flex-direction:row-reverse; }\n.handle { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:7px; height:var(--h);\n  padding:0 11px 0 10px; border-radius:999px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }\n.dock.dragging .handle { cursor:grabbing; }\n.handle:focus-visible { outline:2px solid var(--rec); outline-offset:2px; }\n.time { font-weight:600; font-size:12px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:.01em; min-width:34px; }\n.tray { display:grid; grid-template-columns:0fr; transition: grid-template-columns var(--duration-resize) var(--ease-smooth-out); }\n.tray-in { min-width:0; overflow:hidden; display:flex; align-items:center; gap:1px; padding:34px 3px; margin:-34px 0;\n  pointer-events:none; opacity:0; filter:blur(var(--blur-small));\n  transition: opacity var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out); }\n.tray-in > * { pointer-events:auto; }\n.bar[data-open] .tray { grid-template-columns:1fr; }\n.bar[data-open] .tray-in { opacity:1; filter:none; transition-duration: var(--duration-fast); transition-delay: 60ms; }\n.sep { width:1px; height:14px; flex:none; margin:0 5px; background:var(--edge); }\n.sync { display:inline-grid; place-items:center; width:18px; flex:none; font-size:11px; color:var(--fg-3); }\n.sync.warn, .sync.bad { color:var(--warn); }\nbutton.tb { all:unset; pointer-events:auto; box-sizing:border-box; position:relative; flex:none; display:inline-grid; place-items:center;\n  width:var(--b); height:var(--b); border-radius:999px; color:var(--fg-2); cursor:pointer; font-size:13px;\n  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out); }\nbutton.tb.b-annotate { color:var(--rec); }\nbutton.tb.on { background:var(--rec); color:#fff; }\nbutton.tb:focus-visible { outline:2px solid var(--rec); outline-offset:-2px; }\n@media (hover: hover) { button.tb:hover { background:var(--ink-2); color:var(--fg); } button.tb.on:hover { background:var(--rec); color:#fff; } }\nkbd { position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); padding:4px 6px; border-radius:6px;\n  background:var(--ink-pop); box-shadow:inset 0 0 0 1px var(--edge); color:var(--fg-2); font:600 10px/1 -apple-system, BlinkMacSystemFont, sans-serif;\n  letter-spacing:.02em; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--duration-quick) var(--ease-out); }\n.dock[data-row=\"t\"] kbd { bottom:auto; top:calc(100% + 8px); }\n@media (hover: hover) { button.tb:hover kbd { opacity:1; transition-delay:400ms; } }\nbutton.tb:focus-visible kbd { opacity:1; }\n.bar.composing kbd { opacity:0 !important; }\n\n/* the health line: only when something needs saying */\n.detail { position:absolute; width:max-content; max-width:260px; padding:6px 11px; border-radius:999px; color:var(--fg-2); font-size:11px; line-height:1.35;\n  opacity:0; transform:translateY(4px); pointer-events:none;\n  transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); }\n.dock[data-row=\"b\"] .detail { bottom:calc(100% + 6px); }\n.dock[data-row=\"t\"] .detail { top:calc(100% + 6px); transform:translateY(-4px); }\n.dock[data-col=\"r\"] .detail { right:0; }\n.dock[data-col=\"l\"] .detail, .dock[data-col=\"c\"] .detail { left:0; }\n.detail.show { opacity:1; transform:none; }\n.detail.bad { color:var(--fg); box-shadow: inset 0 0 0 1px rgba(240,166,58,.55), 0 10px 28px -10px rgba(0,0,0,.5); }\n\n/* the edge tab a tucked HUD becomes */\n.tab { all:unset; box-sizing:border-box; position:relative; display:block; width:22px; height:56px; cursor:pointer; touch-action:none; }\n.tab::before { content:\"\"; position:absolute; top:0; bottom:0; width:6px; background:var(--ink);\n  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);\n  box-shadow: inset 0 0 0 1px var(--edge), 0 0 0 .5px var(--rim), 0 6px 18px -6px rgba(0,0,0,.5);\n  transition: width var(--duration-quick) var(--ease-out); }\n.tab::after { content:\"\"; position:absolute; top:16px; bottom:16px; width:2px; border-radius:1px; background:var(--fg-3); }\n.dock[data-tuck=\"left\"] .tab::before { left:0; border-radius:0 7px 7px 0; }\n.dock[data-tuck=\"right\"] .tab::before { right:0; border-radius:7px 0 0 7px; }\n.dock[data-tuck=\"left\"] .tab::after { left:2px; }\n.dock[data-tuck=\"right\"] .tab::after { right:2px; }\n.tab[data-state=\"rec\"]::after { background:var(--rec); }\n.tab[data-state=\"bad\"]::after { background:var(--warn); }\n.tab:focus-visible::before { width:10px; outline:2px solid var(--rec); outline-offset:1px; }\n@media (hover: hover) { .tab:hover::before { width:9px; } }\n\n/* the \u22EF menu \u2014 grows from the bar toward the viewport centre */\n.menu { position:absolute; min-width:188px; padding:5px; border-radius:12px; display:flex; flex-direction:column; gap:1px; z-index:5; }\n.dock[data-row=\"b\"] .menu { bottom:calc(100% + 8px); }\n.dock[data-row=\"t\"] .menu { top:calc(100% + 8px); }\n.dock[data-col=\"r\"] .menu { right:0; }\n.dock[data-col=\"l\"] .menu, .dock[data-col=\"c\"] .menu { left:0; }\n.menu > button { all:unset; box-sizing:border-box; cursor:pointer; padding:8px 10px; border-radius:7px; color:var(--fg);\n  font-size:12.5px; line-height:1; display:flex; gap:9px; align-items:center; }\n.menu > button svg { color:var(--fg-2); }\n.menu > button:focus-visible { outline:2px solid var(--rec); outline-offset:-2px; }\n@media (hover: hover) { .menu > button:hover { background:var(--ink-2); } .menu > button.danger:hover, .menu > button.danger:hover svg { color:var(--rec); } }\n.moveto { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 6px 6px 10px; margin-top:3px;\n  border-top:1px solid var(--edge); color:var(--fg-2); font-size:12px; }\n.spots { display:grid; grid-template-columns:repeat(3, 24px); grid-template-rows:repeat(2, 24px); gap:0 2px; }\n.spots button { all:unset; box-sizing:border-box; position:relative; cursor:pointer; border-radius:5px; }\n.spots button::before { content:\"\"; position:absolute; inset:7px 5px; border-radius:3px; background:var(--ink-2); box-shadow:inset 0 0 0 1px var(--edge); }\n.spots button[aria-checked=\"true\"]::before { background:var(--rec); box-shadow:none; }\n.spots button:focus-visible { outline:2px solid var(--rec); outline-offset:-2px; }\n@media (hover: hover) { .spots button:hover::before { background:var(--fg-3); } .spots button[aria-checked=\"true\"]:hover::before { background:var(--rec); } }\n\n/* presence: dropdown-style grow from the anchor on open, a softer shrink on close */\n.grow { transform:scale(var(--scale-open)); opacity:0;\n  transition: transform var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out); }\n.grow[data-origin=\"bottom-right\"] { transform-origin:bottom right; }\n.grow[data-origin=\"bottom-left\"] { transform-origin:bottom left; }\n.grow[data-origin=\"bottom-center\"] { transform-origin:bottom center; }\n.grow[data-origin=\"top-right\"] { transform-origin:top right; }\n.grow[data-origin=\"top-left\"] { transform-origin:top left; }\n.grow[data-origin=\"top-center\"] { transform-origin:top center; }\n.grow.is-open { transform:scale(1); opacity:1; }\n.grow.is-closing { transform:scale(var(--scale-closing)); opacity:0; pointer-events:none;\n  transition-duration: var(--duration-quick); }\n/* phone: the sheet rises from the bottom edge (toast motion) */\n.rise { transform:translateY(var(--rise)) scale(var(--scale-open)); opacity:0; filter:blur(var(--blur-small));\n  transition: transform var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out), filter var(--duration-fast) var(--ease-smooth-out); }\n.rise.is-open { transform:none; opacity:1; filter:none; transition-duration: var(--duration-medium); }\n.rise.is-closing { pointer-events:none; }\n\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,.18); }\n.outline { position:fixed; z-index:2; pointer-events:none; border:2px solid var(--rec); border-radius:6px;\n  box-shadow:0 0 0 4px rgba(255,59,87,.15); }\n.hint { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:3; padding:8px 14px;\n  border-radius:999px; font-size:12px; font-weight:600; line-height:1; white-space:nowrap; display:flex; gap:8px; align-items:center; }\n.hint svg { color:var(--rec); }\n.hint .keys { color:var(--fg-3); font-weight:500; margin-left:-4px; }\n@media (pointer: coarse) { .hint .keys { display:none; } }\n.hud[data-spot=\"tc\"] .hint { top:auto; bottom:14px; }\n\n/* sheets: a popover anchored to the dock, or a phone bottom sheet */\n.anchor { position:fixed; z-index:6; pointer-events:none; }\n.anchor > * { pointer-events:auto; }\n.phone { position:fixed; z-index:6; display:flex; flex-direction:column; justify-content:flex-end;\n  padding:0 8px calc(8px + env(safe-area-inset-bottom, 0px)); pointer-events:none; }\n.phone > * { pointer-events:auto; }\n.pop { width:min(288px, calc(100vw - 24px)); padding:12px; border-radius:14px; }\n.phone .pop { width:100%; border-radius:18px; padding:14px; }\n.pop-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }\n.title { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--fg); }\n.title i { width:3px; height:11px; border-radius:1px; background:var(--rec); }\n.closeb { all:unset; box-sizing:border-box; cursor:pointer; width:24px; height:24px; border-radius:7px; color:var(--fg-3);\n  display:inline-grid; place-items:center; font-size:12px; }\n.closeb:focus-visible, .sendb:focus-visible, .retry:focus-visible, .dest button:focus-visible { outline:2px solid var(--rec); outline-offset:2px; }\n@media (hover: hover) { .closeb:hover { color:var(--fg); background:var(--ink-2); } }\ntextarea { width:100%; margin-top:10px; padding:9px 11px; min-height:64px; resize:vertical; background:rgba(0,0,0,.28);\n  border:0; box-shadow:inset 0 0 0 1px var(--edge); border-radius:9px; color:var(--fg);\n  font:400 14px/1.4 -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif; }\n@media (pointer: coarse) { textarea { font-size:16px; } .hints { display:none; } }\ntextarea::placeholder { color:var(--fg-3); }\ntextarea:focus { outline:none; box-shadow:inset 0 0 0 1px var(--fg-3); }\n.row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; margin-top:10px; }\n.row.nodest { grid-template-columns:minmax(0,1fr) auto; }\n.ctx { font-size:11px; line-height:1.35; color:var(--fg-3); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }\n.row.nodest .ctx { text-align:left; }\n.dest { display:inline-flex; padding:2px; border-radius:8px; background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px var(--edge); }\n.dest button { all:unset; box-sizing:border-box; cursor:pointer; padding:5px 8px; min-height:24px; border-radius:6px; color:var(--fg-3);\n  font-size:11.5px; font-weight:600; line-height:14px; transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out); }\n.dest button[aria-pressed=\"true\"] { background:var(--ink-2); color:var(--fg); }\n.sendb { all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px;\n  border-radius:8px; background:var(--rec); color:#fff; font-size:12.5px; font-weight:600; line-height:1; text-decoration:none; }\n@media (hover: hover) { .sendb:hover { background:#ff5670; } }\n.hints { margin-top:9px; font-size:11px; line-height:1; color:var(--fg-3); }\n";
+/**
+ * Inline style of the HUD host: a 0×0 fixed box at the viewport origin (the
+ * dock and sheets are fixed children of its shadow root). Zero-size keeps
+ * rrweb's placeholder for this blocked node empty in every replay, and
+ * `pointer-events:none` lets the page under the HUD's gaps take every
+ * click. Overrides the [popover] UA sheet.
  */
-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. */
+/** Inline style of a sheet host portaled into a dialog — the same 0×0 origin box. */
 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 LINK_CSS = "\n.linkgrid { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; margin-top:10px; }\n.linkgrid.noqr { grid-template-columns:minmax(0,1fr); }\n.code { font-size:22px; font-weight:700; line-height:1.2; letter-spacing:.08em; font-variant-numeric:tabular-nums; color:var(--fg); }\n.linkgrid .sendb { justify-self:start; margin-top:6px; }\n.qr { grid-column:2; grid-row:1 / span 3; width:76px; height:76px; border-radius:8px; background:#fff; padding:4px; }\n.linkline { margin-top:8px; font-size:11px; line-height:1.4; color:var(--fg-2); display:flex; gap:10px; align-items:center; }\n.linkline.bad { color:var(--warn); }\n.retry { all:unset; box-sizing:border-box; cursor:pointer; min-height:24px; padding:4px 9px; border-radius:7px; box-shadow:inset 0 0 0 1px var(--edge);\n  color:var(--fg); font-size:11.5px; font-weight:600; line-height:1; }\n@media (hover: hover) { .retry:hover { background:var(--ink-2); } }\n";
+/** Reduced motion: no ripple, no springs, no slides — every state change is instant. */
+export declare const MOTION_CSS = "\n@media (prefers-reduced-motion: reduce) {\n  .hud *, .hud *::before, .hud *::after { transition-duration:0ms !important; transition-delay:0ms !important; animation:none !important; }\n}\n";
 export declare const HUD_CSS: string;