@vitrinka/web 0.1.1 → 0.1.2

package/build/recorder/hud/styles.js

@@ -1,111 +1,266 @@
 /**
- * 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 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; }
+.hud {
+  --ink: rgba(26,22,23,.72); --ink-pop: rgba(26,22,23,.88); --ink-solid: #1d1a1b;
+  --ink-2: rgba(255,255,255,.08); --edge: rgba(255,255,255,.11); --rim: rgba(0,0,0,.30);
+  --fg: #f4efea; --fg-2: rgba(244,239,234,.66); --fg-3: rgba(244,239,234,.44);
+  --rec: #ff3b57; --warn: #f0a63a;
+  --m: 16px; --h: 28px; --b: 24px;
+  --duration-quick: 150ms; --duration-fast: 250ms; --duration-resize: 300ms; --duration-medium: 350ms; --duration-snap: 500ms;
+  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: ease-in-out; --ease-out: ease-out;
+  --ease-spring: var(--ease-smooth-out);
+  --scale-open: .97; --scale-closing: .99; --blur-small: 2px; --rise: 16px;
+  color: var(--fg); font-size: 12px;
+}
+@supports (transition-timing-function: linear(0, 1)) {
+  /* a damped spring, ~4% overshoot over 500ms — the settle after a throw */
+  .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); }
+}
+@media (pointer: coarse) { .hud { --m: 12px; --h: 32px; --b: 30px; } }
+/* scoped under .hud so a control's own \`all:unset\` reset cannot wipe the surface */
+.hud .glass, .hud .menu, .hud .pop, .hud .detail, .hud .hint {
+  background: var(--ink);
+  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
+  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);
+  color: var(--fg);
+}
+.hud .menu, .hud .pop { background: var(--ink-pop); }
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .hud .glass, .hud .menu, .hud .pop, .hud .detail, .hud .hint { background: var(--ink-solid); }
+}
+.sr { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
+
+/* the dock: one of six spots, or tucked into a side edge */
+.dock { position:fixed; z-index:4; display:flex; pointer-events:auto; }
+.dock[data-row="b"] { bottom: calc(var(--m) + env(safe-area-inset-bottom, 0px)); }
+.dock[data-row="t"] { top: calc(var(--m) + env(safe-area-inset-top, 0px)); }
+.dock[data-col="l"] { left: calc(var(--m) + env(safe-area-inset-left, 0px)); }
+.dock[data-col="r"] { right: calc(var(--m) + env(safe-area-inset-right, 0px)); }
+.dock[data-col="c"] { left: calc(50% - var(--hw, 36px) / 2); }
+.dock[data-tuck] { top: clamp(8px, calc(var(--ty, .5) * 100% - 28px), calc(100% - 64px)); }
+.dock[data-tuck="left"] { left:0; }
+.dock[data-tuck="right"] { right:0; }
+.dock.settling { transition: transform var(--duration-snap) var(--ease-spring); }
+.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); }
+
+/* the recording dot: a soft ripple while recording, still otherwise */
+.dot { position:relative; width:8px; height:8px; flex:none; border-radius:50%; background:var(--rec); }
+.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; }
+@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); } }
+.bar[data-state="paused"] .dot { background:var(--fg-3); }
+.bar[data-state="bad"] .dot { background:var(--warn); }
+.bar[data-state="paused"] .dot::after, .bar[data-state="bad"] .dot::after { animation:none; }
+
+/* idle: the puck — ring = not linked, dot = ready; the label slides out on intent */
+.puck { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; height:var(--h); min-width:var(--h);
+  padding:0 calc((var(--h) - 10px) / 2); border-radius:999px; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none;
+  font-weight:600; font-size:12px; color:var(--fg); }
+.dock[data-col="r"] .puck { flex-direction:row-reverse; }
+.ring { width:10px; height:10px; flex:none; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--fg-2);
+  transition: background-color var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out); }
+.puck[data-state="ready"] .ring { background:var(--fg-2); box-shadow:none; }
+.puck[data-state="busy"] .ring { background:var(--fg-3); box-shadow:none; animation:breathe 1.2s var(--ease-in-out) infinite; }
+@keyframes breathe { 50% { opacity:.35; } }
+.lab { display:grid; grid-template-columns:0fr; opacity:0;
+  transition: grid-template-columns var(--duration-resize) var(--ease-smooth-out), opacity var(--duration-quick) var(--ease-out); }
+/* the gap to the ring is a clipped pseudo-element: padding would keep a folded label 10px wide */
+.lab > span { min-width:0; overflow:hidden; white-space:nowrap; }
+.lab > span::before, .lab > span::after { content:""; display:inline-block; }
+.lab > span::before { width:8px; }
+.lab > span::after { width:2px; }
+.dock[data-col="r"] .lab > span::before { width:2px; }
+.dock[data-col="r"] .lab > span::after { width:8px; }
+.puck:focus-visible .lab { grid-template-columns:1fr; opacity:1; }
+.puck:focus-visible { outline:2px solid var(--rec); outline-offset:2px; }
+@media (hover: hover) {
+  .puck:hover .lab { grid-template-columns:1fr; opacity:1; }
+  .puck[data-state="ready"]:hover .ring { background:var(--rec); }
+  .puck[data-state="unlinked"]:hover .ring { box-shadow:inset 0 0 0 1.5px var(--fg); }
+}
+
+/* recording: the capsule (handle) + the tray it unfolds */
+.bar { position:relative; display:inline-flex; align-items:center; height:var(--h); border-radius:999px; }
+.dock[data-col="r"] .bar, .dock[data-col="r"] .tray-in { flex-direction:row-reverse; }
+.handle { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:7px; height:var(--h);
+  padding:0 11px 0 10px; border-radius:999px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
+.dock.dragging .handle { cursor:grabbing; }
+.handle:focus-visible { outline:2px solid var(--rec); outline-offset:2px; }
+.time { font-weight:600; font-size:12px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:.01em; min-width:34px; }
+.tray { display:grid; grid-template-columns:0fr; transition: grid-template-columns var(--duration-resize) var(--ease-smooth-out); }
+.tray-in { min-width:0; overflow:hidden; display:flex; align-items:center; gap:1px; padding:34px 3px; margin:-34px 0;
+  pointer-events:none; opacity:0; filter:blur(var(--blur-small));
+  transition: opacity var(--duration-quick) var(--ease-in-out), filter var(--duration-quick) var(--ease-in-out); }
+.tray-in > * { pointer-events:auto; }
+.bar[data-open] .tray { grid-template-columns:1fr; }
+.bar[data-open] .tray-in { opacity:1; filter:none; transition-duration: var(--duration-fast); transition-delay: 60ms; }
+.sep { width:1px; height:14px; flex:none; margin:0 5px; background:var(--edge); }
+.sync { display:inline-grid; place-items:center; width:18px; flex:none; font-size:11px; color:var(--fg-3); }
+.sync.warn, .sync.bad { color:var(--warn); }
+button.tb { all:unset; pointer-events:auto; box-sizing:border-box; position:relative; flex:none; display:inline-grid; place-items:center;
+  width:var(--b); height:var(--b); border-radius:999px; color:var(--fg-2); cursor:pointer; font-size:13px;
+  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out); }
+button.tb.b-annotate { color:var(--rec); }
+button.tb.on { background:var(--rec); color:#fff; }
+button.tb:focus-visible { outline:2px solid var(--rec); outline-offset:-2px; }
+@media (hover: hover) { button.tb:hover { background:var(--ink-2); color:var(--fg); } button.tb.on:hover { background:var(--rec); color:#fff; } }
+kbd { position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); padding:4px 6px; border-radius:6px;
+  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;
+  letter-spacing:.02em; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--duration-quick) var(--ease-out); }
+.dock[data-row="t"] kbd { bottom:auto; top:calc(100% + 8px); }
+@media (hover: hover) { button.tb:hover kbd { opacity:1; transition-delay:400ms; } }
+button.tb:focus-visible kbd { opacity:1; }
+.bar.composing kbd { opacity:0 !important; }
+
+/* the health line: only when something needs saying */
+.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;
+  opacity:0; transform:translateY(4px); pointer-events:none;
+  transition: opacity var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); }
+.dock[data-row="b"] .detail { bottom:calc(100% + 6px); }
+.dock[data-row="t"] .detail { top:calc(100% + 6px); transform:translateY(-4px); }
+.dock[data-col="r"] .detail { right:0; }
+.dock[data-col="l"] .detail, .dock[data-col="c"] .detail { left:0; }
 .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; }
+.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); }
+
+/* the edge tab a tucked HUD becomes */
+.tab { all:unset; box-sizing:border-box; position:relative; display:block; width:22px; height:56px; cursor:pointer; touch-action:none; }
+.tab::before { content:""; position:absolute; top:0; bottom:0; width:6px; background:var(--ink);
+  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
+  box-shadow: inset 0 0 0 1px var(--edge), 0 0 0 .5px var(--rim), 0 6px 18px -6px rgba(0,0,0,.5);
+  transition: width var(--duration-quick) var(--ease-out); }
+.tab::after { content:""; position:absolute; top:16px; bottom:16px; width:2px; border-radius:1px; background:var(--fg-3); }
+.dock[data-tuck="left"] .tab::before { left:0; border-radius:0 7px 7px 0; }
+.dock[data-tuck="right"] .tab::before { right:0; border-radius:7px 0 0 7px; }
+.dock[data-tuck="left"] .tab::after { left:2px; }
+.dock[data-tuck="right"] .tab::after { right:2px; }
+.tab[data-state="rec"]::after { background:var(--rec); }
+.tab[data-state="bad"]::after { background:var(--warn); }
+.tab:focus-visible::before { width:10px; outline:2px solid var(--rec); outline-offset:1px; }
+@media (hover: hover) { .tab:hover::before { width:9px; } }
+
+/* the ⋯ menu — grows from the bar toward the viewport centre */
+.menu { position:absolute; min-width:188px; padding:5px; border-radius:12px; display:flex; flex-direction:column; gap:1px; z-index:5; }
+.dock[data-row="b"] .menu { bottom:calc(100% + 8px); }
+.dock[data-row="t"] .menu { top:calc(100% + 8px); }
+.dock[data-col="r"] .menu { right:0; }
+.dock[data-col="l"] .menu, .dock[data-col="c"] .menu { left:0; }
+.menu > button { all:unset; box-sizing:border-box; cursor:pointer; padding:8px 10px; border-radius:7px; color:var(--fg);
+  font-size:12.5px; line-height:1; display:flex; gap:9px; align-items:center; }
+.menu > button svg { color:var(--fg-2); }
+.menu > button:focus-visible { outline:2px solid var(--rec); outline-offset:-2px; }
+@media (hover: hover) { .menu > button:hover { background:var(--ink-2); } .menu > button.danger:hover, .menu > button.danger:hover svg { color:var(--rec); } }
+.moveto { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 6px 6px 10px; margin-top:3px;
+  border-top:1px solid var(--edge); color:var(--fg-2); font-size:12px; }
+.spots { display:grid; grid-template-columns:repeat(3, 24px); grid-template-rows:repeat(2, 24px); gap:0 2px; }
+.spots button { all:unset; box-sizing:border-box; position:relative; cursor:pointer; border-radius:5px; }
+.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); }
+.spots button[aria-checked="true"]::before { background:var(--rec); box-shadow:none; }
+.spots button:focus-visible { outline:2px solid var(--rec); outline-offset:-2px; }
+@media (hover: hover) { .spots button:hover::before { background:var(--fg-3); } .spots button[aria-checked="true"]:hover::before { background:var(--rec); } }
+
+/* presence: dropdown-style grow from the anchor on open, a softer shrink on close */
+.grow { transform:scale(var(--scale-open)); opacity:0;
+  transition: transform var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out); }
+.grow[data-origin="bottom-right"] { transform-origin:bottom right; }
+.grow[data-origin="bottom-left"] { transform-origin:bottom left; }
+.grow[data-origin="bottom-center"] { transform-origin:bottom center; }
+.grow[data-origin="top-right"] { transform-origin:top right; }
+.grow[data-origin="top-left"] { transform-origin:top left; }
+.grow[data-origin="top-center"] { transform-origin:top center; }
+.grow.is-open { transform:scale(1); opacity:1; }
+.grow.is-closing { transform:scale(var(--scale-closing)); opacity:0; pointer-events:none;
+  transition-duration: var(--duration-quick); }
+/* phone: the sheet rises from the bottom edge (toast motion) */
+.rise { transform:translateY(var(--rise)) scale(var(--scale-open)); opacity:0; filter:blur(var(--blur-small));
+  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); }
+.rise.is-open { transform:none; opacity:1; filter:none; transition-duration: var(--duration-medium); }
+.rise.is-closing { pointer-events:none; }
+
 /* 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;
+.dim { position:fixed; inset:0; z-index:1; pointer-events:none; background:rgba(0,0,0,.18); }
+.outline { position:fixed; z-index:2; pointer-events:none; border:2px solid var(--rec); 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; }
+.hint { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:3; padding:8px 14px;
+  border-radius:999px; font-size:12px; font-weight:600; line-height:1; white-space:nowrap; display:flex; gap:8px; align-items:center; }
+.hint svg { color:var(--rec); }
+.hint .keys { color:var(--fg-3); font-weight:500; margin-left:-4px; }
+@media (pointer: coarse) { .hint .keys { display:none; } }
+.hud[data-spot="tc"] .hint { top:auto; bottom:14px; }
+
+/* sheets: a popover anchored to the dock, or a phone bottom sheet */
+.anchor { position:fixed; z-index:6; pointer-events:none; }
+.anchor > * { pointer-events:auto; }
+.phone { position:fixed; z-index:6; display:flex; flex-direction:column; justify-content:flex-end;
+  padding:0 8px calc(8px + env(safe-area-inset-bottom, 0px)); pointer-events:none; }
+.phone > * { pointer-events:auto; }
+.pop { width:min(288px, calc(100vw - 24px)); padding:12px; border-radius:14px; }
+.phone .pop { width:100%; border-radius:18px; padding:14px; }
 .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; }
+.title { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--fg); }
+.title i { width:3px; height:11px; border-radius:1px; background:var(--rec); }
+.closeb { all:unset; box-sizing:border-box; cursor:pointer; width:24px; height:24px; border-radius:7px; color:var(--fg-3);
+  display:inline-grid; place-items:center; font-size:12px; }
+.closeb:focus-visible, .sendb:focus-visible, .retry:focus-visible, .dest button:focus-visible { outline:2px solid var(--rec); outline-offset:2px; }
+@media (hover: hover) { .closeb:hover { color:var(--fg); background:var(--ink-2); } }
+textarea { width:100%; margin-top:10px; padding:9px 11px; min-height:64px; resize:vertical; background:rgba(0,0,0,.28);
+  border:0; box-shadow:inset 0 0 0 1px var(--edge); border-radius:9px; color:var(--fg);
+  font:400 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+@media (pointer: coarse) { textarea { font-size:16px; } .hints { display:none; } }
+textarea::placeholder { color:var(--fg-3); }
+textarea:focus { outline:none; box-shadow:inset 0 0 0 1px var(--fg-3); }
+.row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; 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; }
+.ctx { font-size:11px; line-height:1.35; color:var(--fg-3); 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; }
+.dest { display:inline-flex; padding:2px; border-radius:8px; background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 1px var(--edge); }
+.dest button { all:unset; box-sizing:border-box; cursor:pointer; padding:5px 8px; min-height:24px; border-radius:6px; color:var(--fg-3);
+  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); }
+.dest button[aria-pressed="true"] { background:var(--ink-2); color:var(--fg); }
+.sendb { all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px;
+  border-radius:8px; background:var(--rec); color:#fff; font-size:12.5px; font-weight:600; line-height:1; text-decoration:none; }
+@media (hover: hover) { .sendb:hover { background:#ff5670; } }
+.hints { margin-top:9px; font-size:11px; line-height:1; color:var(--fg-3); }
 `;
-/** 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;';
+/**
+ * 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 const HOST_STYLE = 'all:initial;position:fixed;z-index:2147483647;inset:0 auto auto 0;margin:0;padding:0;border:0;' +
+    'background:transparent;overflow:visible;width:0;height:0;pointer-events:none;color-scheme:normal;';
+/** Inline style of a sheet host portaled into a dialog — the same 0×0 origin box. */
+export const SHEET_HOST_STYLE = HOST_STYLE;
 /** 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; }
+.linkgrid { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center; margin-top:10px; }
+.linkgrid.noqr { grid-template-columns:minmax(0,1fr); }
+.code { font-size:22px; font-weight:700; line-height:1.2; letter-spacing:.08em; font-variant-numeric:tabular-nums; color:var(--fg); }
+.linkgrid .sendb { justify-self:start; margin-top:6px; }
+.qr { grid-column:2; grid-row:1 / span 3; width:76px; height:76px; border-radius:8px; background:#fff; padding:4px; }
+.linkline { margin-top:8px; font-size:11px; line-height:1.4; color:var(--fg-2); display:flex; gap:10px; align-items:center; }
+.linkline.bad { color:var(--warn); }
+.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);
+  color:var(--fg); font-size:11.5px; font-weight:600; line-height:1; }
+@media (hover: hover) { .retry:hover { background:var(--ink-2); } }
+`;
+/** Reduced motion: no ripple, no springs, no slides — every state change is instant. */
+export const MOTION_CSS = `
+@media (prefers-reduced-motion: reduce) {
+  .hud *, .hud *::before, .hud *::after { transition-duration:0ms !important; transition-delay:0ms !important; animation:none !important; }
+}
 `;
-export const HUD_CSS = HUD_CSS_BASE + LINK_CSS;
+export const HUD_CSS = HUD_CSS_BASE + LINK_CSS + MOTION_CSS;

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

@@ -0,0 +1,32 @@
+/**
+ * Where the HUD rests and how it moves (recorder-hud-subtle D2). The dock
+ * sits on one of six spots by CSS insets (see `.dock` in styles.ts), so a
+ * resize or rotation needs no JS; a drag moves it by `transform` only and a
+ * release settles through `@vitrinka/link/dock` — a flick lands where it is
+ * aimed, a push past a side edge tucks it into a tab. The move to the new
+ * spot is a FLIP: the dock re-anchors, then springs from where it was let
+ * go. Arrow keys on a focused handle are the non-drag alternative.
+ * The place is remembered per origin in the recorder's storage.
+ */
+import { type Place, type Spot } from '@vitrinka/link/dock';
+import { type KeyboardEvent, type MouseEvent, type PointerEvent, type RefObject } from 'react';
+export interface DockHandle {
+    onPointerDown: (e: PointerEvent<HTMLElement>) => void;
+    onPointerMove: (e: PointerEvent<HTMLElement>) => void;
+    onPointerUp: (e: PointerEvent<HTMLElement>) => void;
+    onPointerCancel: (e: PointerEvent<HTMLElement>) => void;
+    onKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
+}
+export interface Dock {
+    place: Place;
+    /** The spot the dock anchors by (a tucked dock: its side and half). */
+    spot: Spot;
+    ref: RefObject<HTMLDivElement | null>;
+    dragging: boolean;
+    /** Spread on every drag handle: the capsule handle, the puck, the tab. */
+    handle: DockHandle;
+    /** On the dock element: swallows the click that ends a drag. */
+    onClickCapture: (e: MouseEvent) => void;
+    moveTo: (next: Place) => void;
+}
+export declare function useDock(onMoveStart: () => void): Dock;

package/build/recorder/hud/useDock.js

@@ -0,0 +1,168 @@
+/**
+ * Where the HUD rests and how it moves (recorder-hud-subtle D2). The dock
+ * sits on one of six spots by CSS insets (see `.dock` in styles.ts), so a
+ * resize or rotation needs no JS; a drag moves it by `transform` only and a
+ * release settles through `@vitrinka/link/dock` — a flick lands where it is
+ * aimed, a push past a side edge tucks it into a tab. The move to the new
+ * spot is a FLIP: the dock re-anchors, then springs from where it was let
+ * go. Arrow keys on a focused handle are the non-drag alternative.
+ * The place is remembered per origin in the recorder's storage.
+ */
+import { colOf, neighbour, parsePlace, rowOf, settle, untuck } from '@vitrinka/link/dock';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { getRecorderStorage } from '../storage';
+const DOCK_KEY = 'dock';
+/** Travel before a press becomes a drag — below it a press stays a tap. */
+const DRAG_SLOP = 4;
+/** Velocity is read over the last this-many ms of the drag. */
+const VELOCITY_WINDOW = 100;
+const ARROWS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);
+function reducedMotion() {
+    return globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+}
+function margin() {
+    return globalThis.matchMedia?.('(pointer: coarse)').matches ? 12 : 16;
+}
+/** The point of `r` a place is anchored by: its corner, its middle on the c column, its mid-height when tucked. */
+function anchorPoint(r, place) {
+    const spot = untuck(place);
+    const x = colOf(spot) === 'l' ? r.left : colOf(spot) === 'r' ? r.right : r.left + r.width / 2;
+    const y = 'tuck' in place ? r.top + r.height / 2 : rowOf(spot) === 't' ? r.top : r.bottom;
+    return { x, y };
+}
+export function useDock(onMoveStart) {
+    const [place, setPlace] = useState(() => parsePlace(getRecorderStorage().getString(DOCK_KEY)));
+    const [dragging, setDragging] = useState(false);
+    const ref = useRef(null);
+    const from = useRef(null);
+    const press = useRef(null);
+    const swallowClick = useRef(false);
+    const onMoveStartRef = useRef(onMoveStart);
+    onMoveStartRef.current = onMoveStart;
+    const moveTo = useCallback((next) => {
+        const el = ref.current;
+        if (el)
+            from.current = el.getBoundingClientRect();
+        setPlace(next);
+        try {
+            getRecorderStorage().set(DOCK_KEY, JSON.stringify(next));
+        }
+        catch (e) {
+            console.warn('vitrinka: could not remember the HUD position', e);
+        }
+    }, []);
+    // FLIP: the dock has re-anchored; spring it from where it was let go.
+    useLayoutEffect(() => {
+        const el = ref.current;
+        const prev = from.current;
+        from.current = null;
+        if (!el || !prev)
+            return;
+        el.classList.remove('settling');
+        el.style.transform = '';
+        if (reducedMotion())
+            return;
+        const next = el.getBoundingClientRect();
+        const a = anchorPoint(prev, place);
+        const b = anchorPoint(next, place);
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+        if (Math.abs(dx) < 1 && Math.abs(dy) < 1)
+            return;
+        el.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
+        void el.offsetWidth;
+        el.classList.add('settling');
+        el.style.transform = '';
+        const done = () => el.classList.remove('settling');
+        el.addEventListener('transitionend', done, { once: true });
+    }, [place]);
+    // The centre column anchors the handle's middle: keep --hw = its width.
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || typeof ResizeObserver !== 'function')
+            return;
+        const ro = new ResizeObserver(() => {
+            const h = el.querySelector('.handle, .puck, .tab');
+            if (h)
+                el.style.setProperty('--hw', `${h.offsetWidth}px`);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    const release = useCallback((e, cancelled) => {
+        const p = press.current;
+        press.current = null;
+        if (!p || p.id !== e.pointerId)
+            return;
+        if (e.currentTarget.hasPointerCapture?.(e.pointerId))
+            e.currentTarget.releasePointerCapture(e.pointerId);
+        if (!p.moved)
+            return;
+        setDragging(false);
+        swallowClick.current = true;
+        setTimeout(() => (swallowClick.current = false), 0);
+        const el = ref.current;
+        if (!el)
+            return;
+        const r = el.getBoundingClientRect();
+        if (cancelled) {
+            moveTo(place);
+            return;
+        }
+        const s = p.samples;
+        const first = s[0];
+        const last = s[s.length - 1];
+        const dt = first && last ? (last.t - first.t) / 1000 : 0;
+        const v = first && last && dt > 0 ? { x: (last.x - first.x) / dt, y: (last.y - first.y) / dt } : { x: 0, y: 0 };
+        const m = margin();
+        moveTo(settle({ x: r.left, y: r.top, w: r.width, h: r.height }, v, { w: innerWidth, h: innerHeight }, { top: m, right: m, bottom: m, left: m }));
+    }, [moveTo, place]);
+    const handle = useMemo(() => ({
+        onPointerDown: (e) => {
+            if (e.button !== 0 || !e.isPrimary)
+                return;
+            press.current = { id: e.pointerId, x: e.clientX, y: e.clientY, moved: false, samples: [] };
+            // Capture at once: a fast first move would otherwise leave the handle
+            // before the drag begins and the page would get the rest.
+            e.currentTarget.setPointerCapture?.(e.pointerId);
+        },
+        onPointerMove: (e) => {
+            const p = press.current;
+            const el = ref.current;
+            if (!p || p.id !== e.pointerId || !el)
+                return;
+            const dx = e.clientX - p.x;
+            const dy = e.clientY - p.y;
+            if (!p.moved) {
+                if (Math.hypot(dx, dy) < DRAG_SLOP)
+                    return;
+                p.moved = true;
+                el.classList.remove('settling');
+                setDragging(true);
+                onMoveStartRef.current();
+            }
+            el.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
+            const t = e.timeStamp;
+            p.samples.push({ x: e.clientX, y: e.clientY, t });
+            while (p.samples.length > 2 && t - p.samples[0].t > VELOCITY_WINDOW)
+                p.samples.shift();
+        },
+        onPointerUp: (e) => release(e, false),
+        onPointerCancel: (e) => release(e, true),
+        onKeyDown: (e) => {
+            if (!ARROWS.has(e.key) || e.altKey || e.metaKey || e.ctrlKey)
+                return;
+            e.preventDefault();
+            onMoveStartRef.current();
+            moveTo(neighbour(place, e.key));
+        },
+    }), [moveTo, place, release]);
+    const onClickCapture = useCallback((e) => {
+        if (!swallowClick.current)
+            return;
+        swallowClick.current = false;
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    return { place, spot: untuck(place), ref, dragging, handle, onClickCapture, moveTo };
+}

package/build/recorder/session.d.ts

@@ -17,8 +17,8 @@ import { type SessionState } from './queue';
 export { currentRoute, notify, subscribe } from './state';
 export type { SessionDone } from '../protocol';
 /** Sent as `meta.recorder`; bumped with the package version. */
-export declare const RECORDER_VERSION = "0.1.1";
-export declare const RECORDER_ID = "web/0.1.1";
+export declare const RECORDER_VERSION = "0.1.2";
+export declare const RECORDER_ID = "web/0.1.2";
 /** What `POST /api/v1/sessions` answers (the fields this recorder keeps). */
 export interface SessionOut {
     id: string;

package/build/recorder/session.js

@@ -5,7 +5,7 @@ import { armReconcile, capturesSettled, disarmReconcile, drainBuffer, getState,
 import { currentRoute, notify } from './state';
 export { currentRoute, notify, subscribe } from './state';
 /** Sent as `meta.recorder`; bumped with the package version. */
-export const RECORDER_VERSION = '0.1.1';
+export const RECORDER_VERSION = '0.1.2';
 export const RECORDER_ID = `web/${RECORDER_VERSION}`;
 /**
  * Re-apply a RECOVERED session's redaction policy after a reload — and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitrinka/web",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "vitrinka toolkit for React DOM apps — the journey recorder: capture manual-testing sessions (rrweb DOM stream, clicks, navigation, network, console, notes) straight into vitrinka boards.",
   "license": "Elastic-2.0",
   "repository": {
@@ -45,7 +45,7 @@
     "prepublishOnly": "tsc -p tsconfig.build.json"
   },
   "dependencies": {
-    "@vitrinka/link": "^0.1.1",
+    "@vitrinka/link": "^0.1.2",
     "@vitrinka/redact": "^0.1.0"
   },
   "peerDependencies": {