transitions-refine 0.3.8 → 0.3.10

package/demo.html

@@ -39,6 +39,9 @@
       --drop-btn: 0 1px 3px 0 rgba(4,41,117,0.08);
       /* secondary/raised white button (Reset, Settings, Copy, Accept) — exact spec */
       --shadow-btn: 0 1px 3px 0 rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.06), inset 0 -1px 0 0 rgba(0,0,0,0.10), inset 0 0 0 1px rgba(196,196,196,0.10);
+      /* inset-only portion of --shadow-btn — for overlay rings that must reproduce
+         the Reset button's visible border on top of a separate fill layer */
+      --shadow-btn-inset: inset 0 0 0 1px rgba(0,0,0,0.06), inset 0 -1px 0 0 rgba(0,0,0,0.10), inset 0 0 0 1px rgba(196,196,196,0.10);
       --drop-line: 0 1px 3px 0 rgba(0,0,0,0.08);
       --shadow-border: 0 0 0 1px rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.06), 0 2px 4px 0 rgba(0,0,0,0.04);
       --shadow-border-hover: 0 0 0 1px rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.08), 0 2px 4px 0 rgba(0,0,0,0.06);
@@ -244,7 +247,7 @@
       padding: 6px 10px 6px 16px;
       font-family: "Inter", system-ui, -apple-system, sans-serif;
       cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
-      box-shadow: var(--drop), var(--ring); transition: background 0.15s, scale 0.12s ease;
+      box-shadow: var(--shadow-btn); transition: background 0.15s, scale 0.12s ease;
       animation: tl-pill-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both; }
     @keyframes tl-pill-in { from { opacity: 0; transform: translateY(6px) scale(0.96); }
       to { opacity: 1; transform: none; } }
@@ -327,7 +330,7 @@
       border: none; border-radius: 8px; background: transparent; color: var(--c-blue);
       box-shadow: var(--drop-btn);
       font: inherit; font-size: 13px; font-weight: 500; line-height: 14px;
-      cursor: pointer; white-space: nowrap; transition: color 0.12s ease; }
+      cursor: pointer; white-space: nowrap; transition: color 0.12s ease, scale 0.12s ease; }
     .tl-refine-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
       background: var(--c-blue-bg);
       background: color(display-p3 0 0.451 0.898 / 0.06);
@@ -339,7 +342,7 @@
     /* Figma: wand icon stroke is #0073E5, distinct from the #0071e2 label */
     .tl-refine-btn > svg { color: var(--c-blue-pressed); }
     .tl-refine-btn:hover:not(:disabled)::before { background: var(--c-blue-bg-h); background: color(display-p3 0 0.451 0.898 / 0.10); }
-    .tl-refine-btn:active:not(:disabled) { color: var(--c-blue-pressed); }
+    .tl-refine-btn:active:not(:disabled) { color: var(--c-blue-pressed); scale: 0.96; }
     .tl-refine-btn:active:not(:disabled)::before { background: var(--c-blue-bg-h); background: color(display-p3 0 0.451 0.898 / 0.10); }
     .tl-refine-btn:disabled { cursor: default; color: var(--c-blue); }
     .tl-refine-btn:disabled::before { background: var(--c-blue-bg); background: color(display-p3 0 0.451 0.898 / 0.06); }
@@ -369,7 +372,7 @@
     .tl-insp-title { display: flex; align-items: center; font-size: 13px; font-weight: 500; line-height: 18px; color: #171717; margin-bottom: 16px; text-transform: capitalize; }
     /* full-bleed divider between the Delay field and the Easing/Springs tabs
        (Figma 580:9049 — spans the inspector edge-to-edge past the 16px padding) */
-    .tl-inspector-divider { height: 1px; background: var(--c-line); margin: 0 -16px; }
+    .tl-inspector-divider { height: 1px; background: var(--c-line); margin: 4px -16px; }
     .tl-insp-label { font-size: 12px; line-height: 18px; color: #737373; margin: 10px 0 6px; }
 
     /* ── tracks / ruler ── */
@@ -412,7 +415,15 @@
     .tl-bar { position: absolute; top: 50%; height: 24px; transform: translateY(-50%); background: var(--c-track);
       border-radius: 8px; min-width: 24px; cursor: grab;
       box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08), inset 0 0 0 1px rgba(0,0,0,0.06), inset 0 -1px 0 0 rgba(0,0,0,0.1), inset 0 0 0 1px rgba(196,196,196,0.1);
-      transition: background 0.12s ease; }
+      /* card resize (transitions.dev #01): tween left/width when timing changes
+         programmatically (Apply, snap, value-field edit). Suppressed mid-drag
+         (.is-dragging) so the bar tracks the cursor 1:1. */
+      transition: background 0.12s ease,
+        left 220ms cubic-bezier(0.22, 1, 0.36, 1),
+        width 220ms cubic-bezier(0.22, 1, 0.36, 1); will-change: left, width; }
+    .tl-bar.is-dragging { transition: background 0.12s ease; }
+    @media (prefers-reduced-motion: reduce) {
+      .tl-bar { transition: background 0.12s ease !important; } }
     .tl-prop-row:hover .tl-bar, .tl-prop-row.selected .tl-bar { background: var(--c-track-h); }
     .tl-bar:active { cursor: grabbing; }
     /* resize handles — Figma node 13044:2625: 2×14px, #767676 @60%, centered, ~5px edge inset */
@@ -450,18 +461,23 @@
     .tl-field-fill { position: absolute; left: 0; top: 0; bottom: 0; min-width: 32px; border-radius: 8px;
       background: var(--c-fill);
       box-shadow: inset 0 0 0 1px rgba(0,0,0,0.02), inset 0 -1px 0 0 rgba(0,0,0,0.08), inset 0 0 0 1px rgba(191,191,191,0.10), 0 1px 3px 0 rgba(0,0,0,0.06);
-      pointer-events: none; transition: background 0.12s ease, opacity 0.12s ease; z-index: 1; }
-    .tl-field.is-dragging .tl-field-fill { background: var(--c-fill-a); }
+      /* card resize (#01): tween width on programmatic changes + release snap;
+         suppressed mid-drag so it tracks the cursor 1:1. */
+      pointer-events: none; transition: background 0.12s ease, opacity 0.12s ease,
+        width 220ms cubic-bezier(0.22, 1, 0.36, 1); z-index: 1; }
+    .tl-field.is-dragging .tl-field-fill { background: var(--c-fill-a); transition: background 0.12s ease, opacity 0.12s ease; }
+    @media (prefers-reduced-motion: reduce) {
+      .tl-field-fill { transition: background 0.12s ease, opacity 0.12s ease !important; } }
     .tl-field.is-dragging .tl-field-label { opacity: 0.7; }
     .tl-field.is-editing .tl-field-fill { opacity: 0; }
     .tl-field-track { position: absolute; inset: 0; cursor: ew-resize; z-index: 2; }
     .tl-field-label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
       font-size: 13px; font-weight: 500; color: var(--c-text-mut); pointer-events: none; z-index: 3; }
     .tl-field-value { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
-      font-size: 13px; color: var(--c-text); font-weight: 500; cursor: text; z-index: 3;
+      font-size: 13px; color: var(--c-text); font-weight: 400; cursor: text; z-index: 3;
       font-variant-numeric: tabular-nums; }
     .tl-field-input { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 64px;
-      text-align: right; border: none; background: transparent; font: inherit; font-size: 13px; font-weight: 500;
+      text-align: right; border: none; background: transparent; font: inherit; font-size: 13px; font-weight: 400;
       color: var(--c-text); outline: none; z-index: 4; font-variant-numeric: tabular-nums; }
     /* thumb at the right edge of the fill (Figma #767676 2×20px, inset 8px, hover 60% / drag 100%) */
     .tl-field-thumb { position: absolute; right: 8px; top: 7px; height: 18px; width: 2px;
@@ -520,7 +536,7 @@
     /* select trigger — Logram design system (node 13064:2418): flat #f7f7f7 fill */
     .tl-select { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 32px;
       border: none; border-radius: 8px; background: #f7f7f7; padding: 6px 10px 6px 12px;
-      font: inherit; font-size: 13px; font-weight: 500; line-height: 16px; color: #1b1b1b; cursor: pointer; text-align: left;
+      font: inherit; font-size: 13px; font-weight: 400; line-height: 16px; color: #1b1b1b; cursor: pointer; text-align: left;
       transition: background 0.12s ease; }
     .tl-select:hover { background: var(--c-sec-h); }
     .tl-select.is-open { background: var(--c-sec-h); }
@@ -528,9 +544,11 @@
     .tl-select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .tl-select-chev { display: flex; color: var(--c-ruler); flex: none; }
     /* easing curve — exact Figma (node 580:11158): #f6f6f7, 8px radius, no grid */
+    /* overflow:visible so overshoot handles/lines spill past the box while
+       dragging instead of being clipped to the rectangle. */
     .tl-curve { background: #f6f6f7; border-radius: 8px;
-      padding: 0; position: relative; overflow: hidden; }
-    .tl-curve svg { display: block; cursor: crosshair; width: 100%; height: auto; }
+      padding: 0; position: relative; overflow: visible; }
+    .tl-curve svg { display: block; cursor: crosshair; width: 100%; height: auto; overflow: visible; }
     .tl-curve-handle { cursor: grab; }
     .tl-curve-handle:active { cursor: grabbing; }
     .tl-cubic-row { display: flex; gap: 4px; }
@@ -538,13 +556,13 @@
        32px #f7f7f7 pill, hover overlay + inset focus ring. */
     .tl-cubic-cell { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: center;
       gap: 4px; height: 32px; box-sizing: border-box;
-      padding: 0 8px; border-radius: 8px; background: #f7f7f7;
+      padding: 0 8px; border-radius: 8px; background: var(--c-field-bg);
       box-shadow: inset 0 0 0 0 rgba(0,0,0,0.14); transition: box-shadow 0.12s ease, background 0.12s ease; }
-    .tl-cubic-cell:hover { background: linear-gradient(rgba(170,170,170,0.2),rgba(170,170,170,0.2)), #f7f7f7; }
+    .tl-cubic-cell:hover { background: var(--c-sec-h); }
     .tl-cubic-cell:focus-within { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14); }
     .tl-cubic-row input { flex: 1; min-width: 0; width: 100%; height: 100%; border: none; background: transparent;
       box-sizing: border-box; padding: 0; text-align: left;
-      font: inherit; font-size: 12px; font-weight: 500; line-height: 16px; color: #1b1b1b; outline: none;
+      font: inherit; font-size: 12px; font-weight: 400; line-height: 16px; color: #1b1b1b; outline: none;
       -moz-appearance: textfield; appearance: textfield; }
     .tl-cubic-row input::-webkit-outer-spin-button, .tl-cubic-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; width: 0; }
     .tl-cubic-row input::placeholder { color: #979797; }
@@ -682,9 +700,10 @@
     .tl-menu-item:focus-visible { outline: none; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,115,229,0.4); }
     .tl-menu-item.disabled { color: var(--c-disabled); pointer-events: none; }
     .tl-menu-item-label { flex: 1; min-width: 0; display: flex; align-items: center; }
-    .tl-menu-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .tl-menu-stack { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
-    .tl-menu-sub { font-size: 11px; line-height: 14px; }
+    .tl-menu-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .tl-menu-stack { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: baseline; gap: 6px; }
+    .tl-menu-stack .tl-menu-text { flex: 0 1 auto; }
+    .tl-menu-sub { flex: 0 0 auto; font-size: 13px; line-height: 18px; }
     .tl-menu-dim { color: #979797; }
     .tl-menu-check { display: flex; color: var(--c-text-strong); flex: none; }
     .tl-menu-empty { padding: 10px 8px; color: var(--c-disabled); font-size: 13px; }
@@ -706,6 +725,83 @@
     /* trailing chevron on link rows (Figma 581:2828 — #696969 right chevron) */
     .tl-menu-chevr { display: flex; flex: none; color: #696969; }
 
+    /* trailing slot on a menu row — current value + chevron (Figma: Theme row
+       shows "System" then a right chevron and opens the theme picker sub-page). */
+    .tl-menu-trail { display: flex; align-items: center; gap: 4px; }
+    .tl-menu-value { font-size: 11px; line-height: 14px; color: #8b8b8b;
+      font-variant-numeric: tabular-nums; }
+
+    /* ── settings dropdown sub-page slider (transitions.dev · 08-page-side-by-side) ──
+       One dropdown surface that pages internally: main settings ↔ keyboard
+       shortcuts. Both pages stay mounted so they can cross-slide; the surface
+       height follows the active page (card-resize-style) so it grows/shrinks
+       smoothly instead of jumping. Page 1 exits left, page 2 exits right. */
+    .tl-set-slide.t-page-slide {
+      position: relative;
+      /* bleed past the .tl-menu 6px padding so the clipped (overflow:hidden)
+         viewport reaches the menu edges — lets dividers go truly full-width.
+         The 6px row inset is restored on .tl-set-page below. */
+      margin-left: -6px; margin-right: -6px;
+      --page-slide-dur: 250ms;            /* Fast — page slide */
+      --page-fade-dur: 250ms;
+      --page-slide-distance: 8px;         /* Base distance */
+      --page-blur: 3px;                   /* Medium blur */
+      --page-stagger: 0ms;
+      --page-exit-enabled: 1;
+      --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);  /* Smooth ease out */
+      --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
+      transition: height var(--page-slide-dur) var(--page-slide-ease);
+      overflow: hidden;
+    }
+    .tl-set-slide .t-page[data-page-id="1"] { --t-page-from-x: calc(var(--page-slide-distance) * -1); }
+    .tl-set-slide .t-page[data-page-id="2"],
+    .tl-set-slide .t-page[data-page-id="3"] { --t-page-from-x: var(--page-slide-distance); }
+    .tl-set-slide .t-page {
+      position: absolute; top: 0; left: 0; right: 0;
+      box-sizing: border-box; padding-left: 6px; padding-right: 6px;
+      opacity: 0; pointer-events: none;
+      transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
+      filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
+      transition:
+        opacity   var(--page-fade-dur)  var(--page-fade-ease),
+        transform var(--page-slide-dur) var(--page-slide-ease),
+        filter    var(--page-slide-dur) var(--page-slide-ease);
+      will-change: opacity, transform, filter;
+    }
+    .tl-set-slide[data-page="1"] .t-page[data-page-id="1"],
+    .tl-set-slide[data-page="2"] .t-page[data-page-id="2"],
+    .tl-set-slide[data-page="3"] .t-page[data-page-id="3"] {
+      opacity: 1; pointer-events: auto; transform: translateX(0); filter: blur(0);
+      transition-delay: var(--page-stagger);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .tl-set-slide.t-page-slide,
+      .tl-set-slide .t-page { transition: none !important; }
+    }
+    /* sub-page back header — mirrors the menu-item row metrics (h-32, rounded-8,
+       13/16 label) so the surface feels continuous between pages. */
+    .tl-set-back { display: flex; align-items: center; gap: 4px; width: 100%; box-sizing: border-box;
+      min-height: 32px; padding: 0 8px 0 4px; border: none; background: transparent; border-radius: 8px;
+      font: inherit; font-size: 13px; font-weight: 500; line-height: 16px; color: #1b1b1b;
+      cursor: pointer; text-align: left; transition: background 0.1s ease, box-shadow 0.1s ease; }
+    .tl-set-back:hover { background: #f4f4f5; }
+    .tl-set-back:active { background: #ededee; }
+    .tl-set-back:focus-visible { outline: none; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,115,229,0.4); }
+    /* reuse the right chevron flipped to point back; the menu chevron color */
+    .tl-set-back-ic { display: flex; flex: none; color: #696969; transform: scaleX(-1); }
+    .tl-set-back-title { flex: 1; min-width: 0; }
+    /* shortcut row — label left, keycap cluster right; same h-32 rhythm as rows */
+    .tl-kbd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
+      min-height: 32px; padding: 0 8px; font-size: 13px; line-height: 16px; color: #1b1b1b; }
+    .tl-kbd-row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .tl-kbd-cluster { display: flex; align-items: center; gap: 4px; flex: none; }
+    .tl-kbd-plus { color: #b8b8b8; font-size: 11px; line-height: 1; }
+    /* keycap — hairline via inset shadow (shadows over borders), tabular monospace */
+    .tl-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
+      padding: 0 5px; box-sizing: border-box; border-radius: 5px; background: #f4f4f5;
+      box-shadow: inset 0 0 0 1px #ececed; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+      font-size: 11px; line-height: 1; font-weight: 500; color: #4c4c4c; font-variant-numeric: tabular-nums; }
+
     /* ═════ transitions.dev — menu dropdown (verbatim) ═════ */
     .t-dropdown {
       transform-origin: top left;
@@ -808,6 +904,8 @@
     }
     /* below-variant for triggers near the panel top edge */
     .t-tt.tl-tt-below { bottom: auto; top: calc(100% + 8px); transform-origin: 50% 0; font-size: 12px; }
+    /* small gray shortcut hint inside a tooltip (matches the cheat-sheet keys) */
+    .tl-tt-kbd { margin-left: 8px; opacity: 0.4; }
     /* multi-line message variant (e.g. Accept error) — long text wraps to a
        readable measure instead of one overflowing line. Right-anchored so the
        wide bubble grows leftward and never clips off the panel edge. Mirrors the
@@ -818,6 +916,12 @@
       transform: translate(0, 0) scale(var(--tt-scale)); }
     .t-tt-wrap:hover .t-tt.tl-tt-msg,
     .t-tt-trigger:focus-visible + .t-tt.tl-tt-msg { transform: translate(0, 0) scale(1); }
+    /* right-anchored variant for the panel's rightmost trigger (Minimize) so the
+       bubble grows leftward from the right edge and never clips off the panel. */
+    .t-tt.tl-tt-right { left: auto; right: 0; transform-origin: 100% 0;
+      transform: translate(0, 0) scale(var(--tt-scale)); }
+    .t-tt-wrap:hover .t-tt.tl-tt-right,
+    .t-tt-trigger:focus-visible + .t-tt.tl-tt-right { transform: translate(0, 0) scale(1); }
 
     /* ═════ transitions.dev — panel reveal (per-phase distance/ease/scale) ═════ */
     /* base = closed / close-end state: resolved travel + scale come from the
@@ -899,7 +1003,7 @@
     .pc-btn.primary:hover { background: #000; }
 
     .tl-refine-btn.is-active { color: var(--c-blue-pressed); }
-    .tl-refine-btn.is-active::before { background: color(display-p3 0 0.451 0.898 / 0.12); }
+    .tl-refine-btn.is-active::before { background: var(--c-blue-bg-a); background: color(display-p3 0 0.451 0.898 / 0.12); }
 
     /* refine panel slides in from the right using transitions.dev panel reveal
        tokens (translate + opacity + cross-blur, per-phase open/close dur/ease). */
@@ -949,7 +1053,7 @@
     /* header: title block (left) + Agent/Deterministic mode dropdown (right) */
     /* match the timeline top bar exactly: 7.5px/14px padding, centered, 52px tall (36px row + 15 + 1px border) */
     .tl-refine-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
-      gap: 8px; box-sizing: border-box; padding: 7.5px 14px;
+      gap: 8px; box-sizing: border-box; padding: 7.5px 7.5px 7.5px 14px;
       border-bottom: 1px solid #f0f0f0; }
     .tl-refine-titles { min-width: 0; }
     .tl-refine-titles h3 { font-size: 13px; font-weight: 500; line-height: 14px; color: #17181c; }
@@ -967,8 +1071,10 @@
       width: 36px; height: 36px; border: none; background: transparent; border-radius: 60px; cursor: pointer;
       color: #676767; transition: background 0.14s ease, color 0.14s ease; }
     .tl-refine-close:hover { background: rgba(170,170,170,0.10); color: #17181c; }
-    /* refine-type tabs (Small refinements / Replace transition) */
-    .tl-refine-tabs { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; padding: 17px 16px 0; }
+    /* refine-type tabs — toolbar strip (Figma 587:9258): 48px white bar, hairline
+       bottom divider, segments inset 16px and packed gap:0 like a segmented control */
+    .tl-refine-tabs { flex: 0 0 auto; box-sizing: border-box; display: flex; align-items: center; gap: 0;
+      height: 48px; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; }
     .tl-refine-tab { height: 32px; padding: 6px 12px; border: none; background: transparent; cursor: pointer;
       border-radius: 8px; font: inherit; font-size: 13px; font-weight: 500; line-height: 14px; color: #676767;
       transition: background 0.14s ease, color 0.14s ease; }
@@ -976,6 +1082,49 @@
     .tl-refine-tab[aria-selected="true"] { background: rgba(170,170,170,0.10); color: #17181c; }
     .tl-refine-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
       padding: 0 16px; }
+    /* ── refine-type tab content slider (transitions.dev · 08-page-side-by-side) ──
+       Switching the type tabs (Small refinements ↔ Replace transition) slides the
+       body content side-by-side: the outgoing page exits with blur+fade while the
+       incoming page slides in from the opposite edge. Both pages stay mounted so
+       they cross-slide. Page 1 (Small, tab index 0) exits left; page 2 (Replace,
+       tab index 1) exits right — going to Replace brings new content in from the
+       right, going back brings it from the left. Mirrors the settings dropdown's
+       .tl-set-slide tokens exactly. Pages are absolutely stacked and fill the
+       fixed body region, scrolling internally, so no height tween is needed. */
+    .tl-refine-body.tl-refine-pages.t-page-slide {
+      position: relative; overflow: hidden; padding: 0;
+      --page-slide-dur: 250ms;            /* Fast — page slide */
+      --page-fade-dur: 250ms;
+      --page-slide-distance: 8px;         /* Base distance */
+      --page-blur: 3px;                   /* Medium blur */
+      --page-stagger: 0ms;
+      --page-exit-enabled: 1;
+      --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);  /* Smooth ease out */
+      --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    .tl-refine-pages .t-page[data-page-id="1"] { --t-page-from-x: calc(var(--page-slide-distance) * -1); }
+    .tl-refine-pages .t-page[data-page-id="2"] { --t-page-from-x: var(--page-slide-distance); }
+    .tl-refine-pages .t-page {
+      position: absolute; inset: 0; overflow-y: auto;
+      display: flex; flex-direction: column; box-sizing: border-box; padding: 0 16px;
+      opacity: 0; pointer-events: none;
+      transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
+      filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
+      transition:
+        opacity   var(--page-fade-dur)  var(--page-fade-ease),
+        transform var(--page-slide-dur) var(--page-slide-ease),
+        filter    var(--page-slide-dur) var(--page-slide-ease);
+      will-change: opacity, transform, filter;
+    }
+    .tl-refine-pages[data-page="1"] .t-page[data-page-id="1"],
+    .tl-refine-pages[data-page="2"] .t-page[data-page-id="2"] {
+      opacity: 1; pointer-events: auto; transform: translateX(0); filter: blur(0);
+      transition-delay: var(--page-stagger);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .tl-refine-pages.t-page-slide,
+      .tl-refine-pages .t-page { transition: none !important; }
+    }
     /* idle + unavailable share a vertically-centred column */
     .tl-refine-center { flex: 1; display: flex; flex-direction: column; align-items: center;
       justify-content: center; gap: 12px; text-align: center; padding: 16px 0; }
@@ -1021,7 +1170,8 @@
         height var(--resize-dur) var(--resize-ease),
         border-radius var(--resize-dur) var(--resize-ease),
         color var(--resize-dur) var(--resize-ease),
-        box-shadow var(--resize-dur) var(--resize-ease); }
+        box-shadow var(--resize-dur) var(--resize-ease),
+        scale 0.12s ease; }
     .tl-scan-morph::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
       background: var(--c-blue-bg);
       background: color(display-p3 0 0.451 0.898 / 0.06);
@@ -1033,7 +1183,7 @@
     .tl-refine-foot .tl-scan-morph { margin-bottom: 20px; }
     .tl-scan-morph:hover:not(:disabled):not(.is-scanning)::before {
       background: var(--c-blue-bg-h); background: color(display-p3 0 0.451 0.898 / 0.10); }
-    .tl-scan-morph:active:not(.is-scanning):not(:disabled) { color: var(--c-blue-pressed); }
+    .tl-scan-morph:active:not(.is-scanning):not(:disabled) { color: var(--c-blue-pressed); scale: 0.96; }
     .tl-scan-morph:active:not(.is-scanning):not(:disabled)::before {
       background: var(--c-blue-bg-h); background: color(display-p3 0 0.451 0.898 / 0.10); }
     .tl-scan-morph:disabled:not(.is-scanning) { cursor: default; color: var(--c-blue); }
@@ -1043,12 +1193,12 @@
       color: var(--c-blue-pressed); opacity: 0.5; }
     .tl-scan-morph.is-scanning { width: 100%; height: 49px; border-radius: 60px;
       padding: 8px 16px; cursor: default; color: #676767; background: transparent;
-      box-shadow: none; }
+      box-shadow: var(--shadow-btn); }
     .tl-scan-morph.is-scanning::before {
       background: #fff;
       transition: background var(--resize-dur) var(--resize-ease); }
     .tl-scan-morph.is-scanning::after {
-      box-shadow: inset 0 0 0 1px #f0f0f0;
+      box-shadow: var(--shadow-btn-inset);
       transition: box-shadow var(--resize-dur) var(--resize-ease); }
     /* Two faces share one grid cell and cross-blur (icon swap, 09) between the
        label and the icon+status; whichever is hidden fades out with blur+scale.
@@ -1131,10 +1281,16 @@
     @keyframes tl-dotm-e { 0%{opacity:1} 16.667%{opacity:.52} 33.333%{opacity:.08} 50%{opacity:.52} 66.667%{opacity:.08} 83.333%{opacity:.52} 100%{opacity:1} }
     @keyframes tl-dotm-f { 0%{opacity:.08} 16.667%{opacity:1} 33.333%{opacity:.52} 50%{opacity:.08} 66.667%{opacity:.52} 83.333%{opacity:1} 100%{opacity:.08} }
     @keyframes tl-dotm-g { 0%{opacity:.08} 16.667%{opacity:.52} 33.333%{opacity:.08} 50%{opacity:.08} 66.667%{opacity:.08} 83.333%{opacity:.52} 100%{opacity:.08} }
-    /* background-scan note in the header count slot — plain text, hover for the
-       tooltip explaining what the agent is doing. Dotted underline hints it. */
+    /* background-scan note in the header count slot — dot-matrix loader + shimmer
+       text (transitions.dev shimmer text 15). Hover shows the tooltip. */
+    /* the tooltip wrap fills the count slot's height; center its content so the
+       loader + text sit on the slot's vertical midline instead of its bottom. */
+    .tl-header-count .t-tt-wrap { display: inline-flex; align-items: center; align-self: center; }
     .tl-scan-note { cursor: help; color: var(--c-count);
-      text-decoration: underline dotted rgba(0,0,0,0.28); text-underline-offset: 2px; }
+      display: inline-flex; align-items: center; gap: 6px; }
+    .tl-scan-note .tl-dotm { width: 14px; height: 14px; }
+    .tl-scan-shimmer { --shimmer-dur: 2000ms; --shimmer-base: var(--c-count); --shimmer-highlight: #17181c;
+      --shimmer-band: 400%; --shimmer-ease: linear; }
     /* loading status text — transitions.dev shimmer text (15) + text states swap (04) */
     .tl-refine-status-text {
       --shimmer-dur: 2000ms; --shimmer-base: #9a9a9a; --shimmer-highlight: #17181c;
@@ -1165,7 +1321,7 @@
       font: inherit; transition: background 0.12s ease; }
     .tl-mode-row:hover { background: rgba(170,170,170,0.08); }
     .tl-mode-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
-    .tl-mode-row-title { font-size: 14px; font-weight: 500; line-height: 16px; color: #1b1b1b; }
+    .tl-mode-row-title { font-size: 13px; font-weight: 500; line-height: 16px; color: #1b1b1b; }
     .tl-mode-row-desc { font-size: 12px; font-weight: 400; line-height: 18px; color: #676767; text-wrap: balance; }
     .tl-mode-row-check { flex: 0 0 auto; width: 16px; height: 16px; display: flex; color: #17181c; }
     @keyframes tl-fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@@ -1212,37 +1368,56 @@
       transition: background 0.12s ease, scale 0.12s ease, opacity 0.12s ease; }
     .tl-pill-btn .tl-dim { color: #696969; }
     .tl-pill-btn:hover:not(:disabled) { background: #fafafa; }
-    .tl-pill-btn:active:not(:disabled) { scale: 0.98; }
-    .tl-pill-btn:disabled { opacity: 0.45; cursor: default; }
-    /* applied state — GRAY, never green (matches Accept icon --c-text #17181c) */
-    .tl-pill-btn.is-applied { color: var(--c-text); cursor: default; }
+    .tl-pill-btn:active:not(:disabled) { scale: 0.96; }
+    /* disabled — flat grey fill matching the active segmented tab, no raised
+       shadow, muted text (instead of a faded white button). */
+    .tl-pill-btn:disabled { cursor: not-allowed; opacity: 1; color: var(--c-disabled);
+      background: rgba(170,170,170,0.1); box-shadow: none; }
+    /* applied state — GRAY, never green (matches Accept icon --c-text #17181c).
+       Flat grey fill matching the active segmented tab, no raised shadow. */
+    .tl-pill-btn.is-applied { color: var(--c-text); cursor: not-allowed; opacity: 1;
+      background: rgba(170,170,170,0.1); box-shadow: none; }
     .tl-pill-btn.is-applied svg path { stroke: var(--c-text); }
-    /* Apply ⟷ Applied: cross-blur text swap — same mechanism as the Play/Pause
-       button above (and the index Copy → Copied tooltip). Both words stack in one
-       slot; the active one is sharp/opaque, the other blurred/transparent, and they
-       cross-blur in place while the slot width tweens between the two measured widths.
-       The "Applied" label (b) carries the success check to the left of its text. */
-    .tl-apply-swap { position: relative; display: inline-block; vertical-align: middle;
-      line-height: 14px; width: var(--aw-a, auto);
-      transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1); }
-    .tl-apply-swap[data-state="applied"] { width: var(--aw-b, auto); }
-    .tl-apply-label { white-space: pre;
+    /* Apply ⟷ Applied: a LEADING check is revealed first and pushes the text to
+       the right, then the differing SUFFIX cross-blurs. The shared stem "Appl"
+       stays put while "y" ⟷ "ied" cross-blur in a slot whose width tweens between
+       the two measured widths. Both the leading check space AND the suffix slot
+       use the SAME resize token (--apply-resize-*: card resize, smooth ease out),
+       so the whole button grows in one synchronized motion. The check lives in its
+       own overflow:hidden box whose width tweens 0 -> (icon + gap), shoving the
+       text rightward — the check itself stroke-draws IN PLACE (no translate). */
+    .tl-apply-swap { position: relative; display: inline-flex; align-items: center;
+      vertical-align: middle; line-height: 14px;
+      --apply-resize-dur: 400ms; --apply-resize-ease: cubic-bezier(0.22, 1, 0.36, 1); }
+    /* leading check slot: collapsed to width 0 at rest; expands to the measured
+       icon+gap width (--chk-w) when applied, using the same token as the suffix
+       resize. overflow:hidden clips the pinned-left check so it reveals in place
+       (left edge fixed) rather than translating. */
+    .tl-apply-check { display: inline-flex; align-items: center; overflow: hidden;
+      flex: 0 0 auto; width: 0;
+      transition: width var(--apply-resize-dur) var(--apply-resize-ease); }
+    .tl-apply-swap[data-state="applied"] .tl-apply-check { width: var(--chk-w, 19px); }
+    .tl-apply-stem { display: inline-block; }
+    .tl-apply-suffix { position: relative; display: inline-block; width: var(--sfx-y, auto);
+      transition: width var(--apply-resize-dur) var(--apply-resize-ease); }
+    .tl-apply-swap[data-state="applied"] .tl-apply-suffix { width: var(--sfx-ied, auto); }
+    .tl-apply-seg { white-space: pre;
       transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
                   filter 180ms cubic-bezier(0.22, 1, 0.36, 1);
       will-change: opacity, filter; }
-    .tl-apply-a { display: inline-block; }
-    .tl-apply-b { position: absolute; top: 0; left: 0; display: inline-flex;
-      align-items: center; gap: 6px; }
-    .tl-apply-swap .tl-apply-a { opacity: 1; filter: blur(0); }
-    .tl-apply-swap .tl-apply-b { opacity: 0; filter: blur(2px); }
-    .tl-apply-swap[data-state="applied"] .tl-apply-a { opacity: 0; filter: blur(2px); }
-    .tl-apply-swap[data-state="applied"] .tl-apply-b { opacity: 1; filter: blur(0); }
+    .tl-apply-y { display: inline-block; }
+    .tl-apply-ied { position: absolute; top: 0; left: 0; display: inline-block; }
+    .tl-apply-swap .tl-apply-y { opacity: 1; filter: blur(0); }
+    .tl-apply-swap .tl-apply-ied { opacity: 0; filter: blur(2px); }
+    .tl-apply-swap[data-state="applied"] .tl-apply-y { opacity: 0; filter: blur(2px); }
+    .tl-apply-swap[data-state="applied"] .tl-apply-ied { opacity: 1; filter: blur(0); }
     @media (prefers-reduced-motion: reduce) {
-      .tl-apply-swap, .tl-apply-label { transition: none !important; }
+      .tl-apply-suffix, .tl-apply-seg { transition: none !important; }
     }
     /* success check (transitions.dev 10-success-check): stroke-draw on the path with
        a plain opacity fade — IN PLACE, no rotate / Y-bob / scale, so the check never
-       moves while it draws. GRAY stroke. */
+       moves while it draws. It is the leading element, unclipped by the .tl-apply-check
+       width tween that pushes the text. GRAY stroke. */
     .tl-sug-check { display: inline-flex; opacity: 0; will-change: opacity; }
     .tl-sug-check svg { display: block; overflow: visible; }
     /* stroke-dasharray = path.getTotalLength() of ICONS.accept "M4 8.4268 L6.46155
@@ -1278,6 +1453,7 @@
       .tl-refine-results .t-stagger-line { transition: none !important; }
       .t-resize, .tl-scan-morph { transition: none !important; }
       .tl-pill-btn.tl-apply-btn { transition: background 0.12s ease, scale 0.12s ease, opacity 0.12s ease !important; }
+      .tl-apply-check { transition: none !important; }
       .tl-sug-check { animation: none !important; opacity: 1; }
       .tl-sug-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
       .tl-scan-face { transition: none !important; }
@@ -1530,7 +1706,10 @@
       _sched(){if(this.rafId!==null)return;this.rafId=requestAnimationFrame(()=>{this.rafId=null;if(this.running&&!this.paused)this.scan();});}
       scan(){const seen=new Map();const w=document.createTreeWalker(this.root,NodeFilter.SHOW_ELEMENT);let n=w.currentNode;while(n){if(n instanceof HTMLElement)this._proc(n,seen);n=w.nextNode();}this.registry.replaceAll(Array.from(seen.values()));}
       _proc(el,seen){
-        if(el.closest("[data-timeline-panel]"))return;
+        // Skip the Refine UI itself: the panel ([data-timeline-panel]) plus any of
+        // our surfaces that portal OUT of it (dropdown menus, toasts) — those carry
+        // [data-tl-ui]. Without this the scanner lists the tool's own transitions.
+        if(el.closest("[data-timeline-panel],[data-tl-ui]"))return;
         const s=getComputedStyle(el); const rp=s.transitionProperty;
         if(!rp||rp==="none"||rp==="all")return;
         const props=rp.split(",").map(p=>p.trim());
@@ -1663,6 +1842,8 @@
     // accept checkmark (Figma node 580:9057) — slimmer 1.5px check centered in a
     // square 16-frame (the glyph spans ~50% width, like the source icon frame).
     ICONS.accept = {vb:"0 0 16 16", svg:`<path d="M4 8.4268L6.46155 11.19223L12 4.97001" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`};
+    // external-link (Figma "link-external-01") — box with an arrow leaving the top-right
+    ICONS.linkout = {vb:"0 0 16 16", svg:`<path d="M9.5 3.5H12.5V6.5M12.5 3.5L7.5 8.5M11.5 9.25V11.5C11.5 12.0523 11.0523 12.5 10.5 12.5H4.5C3.94772 12.5 3.5 12.0523 3.5 11.5V5.5C3.5 4.94772 3.94772 4.5 4.5 4.5H6.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`};
     function Ic({name, size=16}){
       const ic = ICONS[name];
       if(!ic) return null;
@@ -1748,7 +1929,7 @@
       const origin=pos?pos.origin:"top-left";
       const cls=closing?"is-closing":shown?"is-open":"";
       return createPortal(
-        h("div",{ref,className:cx("t-dropdown","tl-menu",cls),"data-origin":origin,style},children),
+        h("div",{ref,className:cx("t-dropdown","tl-menu",cls),"data-origin":origin,"data-tl-ui":"",style},children),
         target);
     }
 
@@ -1759,21 +1940,153 @@
         right);
     }
 
+    // Settings dropdown body that pages between the main menu and the keyboard-
+    // shortcuts cheat-sheet (transitions.dev · 08-page-side-by-side). Both pages
+    // stay mounted so they cross-slide; the container height follows the active
+    // page so the one dropdown surface resizes smoothly between pages. Lives
+    // inside the Dropdown portal, so its layout effect fires when the surface
+    // mounts (the parent Header doesn't re-render on the portal's own mount).
+    function SettingsSlide({view,mainPage,shortcutsPage,themePage,onBack,onClose}){
+      const slideRef=useRef(null), p1=useRef(null), p2=useRef(null), p3=useRef(null);
+      const pageNum=view==="shortcuts"?"2":view==="theme"?"3":"1";
+      useLayoutEffect(()=>{
+        const slide=slideRef.current; if(!slide) return;
+        const active=view==="shortcuts"?p2.current:view==="theme"?p3.current:p1.current;
+        if(active) slide.style.height=active.offsetHeight+"px";
+      });
+      // Escape steps back from a sub-page first, then closes the dropdown —
+      // mirrors the picker's nested-dismiss behaviour.
+      useEffect(()=>{
+        const onKey=e=>{ if(e.key!=="Escape")return;
+          if(view!=="main"){onBack&&onBack();} else {onClose&&onClose();} };
+        document.addEventListener("keydown",onKey);
+        return()=>document.removeEventListener("keydown",onKey);
+      },[view,onBack,onClose]);
+      return h("div",{ref:slideRef,className:"tl-set-slide t-page-slide","data-page":pageNum},
+        h("div",{ref:p1,className:"tl-set-page t-page","data-page-id":"1","aria-hidden":view!=="main"},mainPage),
+        h("div",{ref:p2,className:"tl-set-page t-page","data-page-id":"2","aria-hidden":view!=="shortcuts"},shortcutsPage),
+        h("div",{ref:p3,className:"tl-set-page t-page","data-page-id":"3","aria-hidden":view!=="theme"},themePage));
+    }
+
     // ── refine relay client ──
     // Talks to the local relay (server/relay.mjs). The browser posts a job and
     // polls; the relay answers each job with one agent run (one-shot).
     const RELAY_URL = (window.REFINE_RELAY_URL) || "http://localhost:7331";
+
+    // ── demo/mock agent (guarded — additive, OFF by default) ──
+    // When `window.__TX_REFINE_MOCK` is set (the standalone website-demo.html),
+    // the three relay fns below short-circuit to a built-in mock so the panel is
+    // fully interactive with NO relay/LLM/CLI. When the flag is UNSET this whole
+    // block is inert and every fn falls through to the real fetch path unchanged.
+    const TX_MOCK = typeof window!=="undefined" && window.__TX_REFINE_MOCK;
+    const _txMockJobs = new Map(); // id → { request, createdAt }
+    const _txMockId = ()=>"mock-"+Date.now()+"-"+Math.random().toString(36).slice(2,8);
+    const _txMs = (n)=>(n==null?"":Math.round(n)+"ms");
+    const _TX_EASE = "cubic-bezier(0.22, 1, 0.36, 1)"; // transitions.dev standard ease-out
+    // Build a "done" result shaped by the stored request kind (mirrors relay.mjs
+    // parseScanOutput/parseApplyOutput/parseAgentOutput shapes).
+    function _txMockResult(request){
+      const kind = request && request.kind;
+      if(kind==="scan")  return { groups: _txMockGroups(request), summary: "Grouped 1 component — Menu dropdown (open + close)." };
+      if(kind==="apply") return { applied: true, summary: "Demo mode — simulated writing the change to your source. (No files touched.)", files: [] };
+      return _txMockSuggestions(request);
+    }
+    // scan → one "Menu dropdown" group with Open + Close phases. Members are
+    // derived from the raw DOM-detected transitions so the timeline shows real
+    // lanes; selectors come straight from the live scan so they resolve in the
+    // DOM. Shape mirrors relay.mjs buildScanPrompt's groups[] (id/label/phases →
+    // phase{id,phase,label,stateTarget,fromState,toState,members[{id,label,
+    // selector,propertyTimings}]}) and what TransitionRegistry.setGroups expects.
+    function _txMockGroups(request){
+      const raw = (request && request.raw) || [];
+      const base = raw.length ? raw : [{label:"Menu", selector:".wd-dd .wd-dd-menu", properties:["opacity","transform"]}];
+      // OPEN phase matches the current DOM → copy the scanned timings verbatim
+      // (so the timeline shows the element's real, possibly off-token values).
+      const open = base.map((e,i)=>({
+        id:"m"+i,
+        label:e.label||("Element "+(i+1)),
+        selector:e.selector||".wd-dd .wd-dd-menu",
+        propertyTimings:((e.timings&&e.timings.length)?e.timings:(e.properties||["opacity","transform"]).map(p=>({property:p,durationMs:280,delayMs:0,easing:"ease"})))
+          .map(t=>({property:t.property, durationMs:t.durationMs!=null?t.durationMs:280, delayMs:t.delayMs||0, easing:t.easing||"ease"})),
+      }));
+      // CLOSE phase lives on a state variant the DOM scan can't see; the recipe's
+      // faster close (the authored 180ms) is recovered here, mirroring how the
+      // real agent reads the opposite-phase timings from cssRules.
+      const close = open.map(m=>({ ...m, propertyTimings:m.propertyTimings.map(t=>({property:t.property, durationMs:180, delayMs:0, easing:"ease"})) }));
+      const phases=[
+        {id:"menu-dropdown:open", phase:"open",  label:"Open",  stateTarget:".wd-dd", fromState:null,       toState:".is-open", members:open},
+        {id:"menu-dropdown:close",phase:"close", label:"Close", stateTarget:".wd-dd", fromState:".is-open", toState:null,       members:close},
+      ];
+      return [{ id:"menu-dropdown", label:"Menu dropdown", component:null, phases }];
+    }
+    // refine → deterministic, transitions.dev-token-aligned suggestions. patches
+    // derive property/member from request.timings so Apply changes a real lane.
+    // Shape mirrors relay.mjs's suggestion contract (id/kind/property/title/from/
+    // to/patch/reason, + reference on the replace card).
+    function _txMockSuggestions(request){
+      const t = (request && request.timings) || [];
+      const p0 = (t[0]&&t[0].property) || "opacity";
+      const m0 = (t[0]&&t[0].member) || null;
+      const p1 = (t[1]&&t[1].property) || p0;
+      const m1 = (t[1]&&t[1].member) || m0;
+      const from0 = _txMs(t[0]&&t[0].durationMs) || "—";
+      const fromE = (t[0]&&t[0].easing) || "ease";
+      const mp = (member, rest)=> member ? {member, ...rest} : rest;
+      const suggestions=[
+        { id:"mock-dur-fast", kind:"duration", property:p0, member:m0,
+          title:"Duration → Fast", from:from0, to:"250ms",
+          patch:mp(m0,{property:p0, durationMs:250}),
+          reason:"Open motion snaps to the 250ms “medium” token — standard UI motion on transitions.dev." },
+        { id:"mock-dur-quick", kind:"duration", property:p1, member:m1,
+          title:"Duration → Quick", from:_txMs(t[1]&&t[1].durationMs)||from0, to:"150ms",
+          patch:mp(m1,{property:p1, durationMs:150}),
+          reason:"Closing feels crisper at the 150ms “fast” token — quick state changes." },
+        { id:"mock-ease-smooth", kind:"easing", property:p0, member:m0,
+          title:"Easing → Smooth ease out", from:fromE, to:_TX_EASE,
+          patch:mp(m0,{property:p0, easing:_TX_EASE}),
+          reason:"transitions.dev standard ease-out — a gentle decelerate to rest." },
+        { id:"mock-replace-menu", kind:"replace", property:p0, member:m0,
+          title:"Menu dropdown", reference:"05-menu-dropdown.md",
+          patch:mp(m0,{property:"all", durationMs:250, easing:_TX_EASE}),
+          reason:"Best-fit transitions.dev recipe (#05 Menu dropdown): scale 0.97→1 + fade, 250ms open / 150ms close on cubic-bezier(0.22, 1, 0.36, 1)." },
+      ];
+      return { suggestions, summary:"3 motion-token tweaks and 1 transitions.dev recipe match for the Menu dropdown." };
+    }
+    // statusLog so the panel's shimmer status copy has something to show.
+    function _txMockLog(request, createdAt){
+      const kind = request && request.kind;
+      const head = kind==="scan" ? "Grouping transitions from your source…"
+                 : kind==="apply" ? "Writing “"+((request&&request.label)||"transition")+"” to your code…"
+                 : "Scanning “"+((request&&request.label)||"transition")+"”…";
+      return [{message:head, at:createdAt}, {message:"Reading the Transitions.dev skill…", at:createdAt+350}];
+    }
+
     async function relayCreateJob(request){
+      if(TX_MOCK){
+        const id=_txMockId();
+        _txMockJobs.set(id,{request,createdAt:Date.now()});
+        return { id, status:"pending" };
+      }
       const r = await fetch(RELAY_URL+"/jobs",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({request})});
       if(!r.ok) throw new Error("relay POST /jobs failed ("+r.status+")");
       return r.json(); // { id, status }
     }
     async function relayGetJob(id){
+      if(TX_MOCK){
+        const rec=_txMockJobs.get(id);
+        if(!rec) return { id, status:"error", statusLog:[], result:null, error:"mock: unknown job" };
+        const elapsed=Date.now()-rec.createdAt;
+        const log=_txMockLog(rec.request, rec.createdAt);
+        // ~800ms simulated work: the first poll(s) see "running", then "done".
+        if(elapsed<800) return { id, status:"running", statusLog:[log[0]], result:null, error:null };
+        return { id, status:"done", statusLog:log, result:_txMockResult(rec.request), error:null };
+      }
       const r = await fetch(RELAY_URL+"/jobs/"+id);
       if(!r.ok) throw new Error("relay GET /jobs/:id failed ("+r.status+")");
       return r.json();
     }
     async function relayHealth(){
+      if(TX_MOCK) return { ok:true, auto:true, llmAvailable:true, cliInstalled:true, jobs:0 };
       const r = await fetch(RELAY_URL+"/health");
       if(!r.ok) throw new Error("relay /health failed ("+r.status+")");
       return r.json(); // { ok, auto, llmAvailable, jobs }
@@ -1825,25 +2138,32 @@
       const names=[...new Set(matches.map(t=>t.member))];
       return names.length===1?names[0]:matches[0].member;
     }
-    // Apply button — "Apply" ⟷ "Applied" cross-blur text swap (transitions.dev 04,
-    // same mechanism as the Play/Pause button): both labels stack in one slot, the
-    // active one is sharp/opaque and the other blurred/transparent, and the slot
-    // width tweens between the two measured widths (--aw-a -> --aw-b). The gray
-    // checkmark draws its stroke path IN PLACE (transitions.dev 10, no rotate/bob/
-    // scale) — just opacity fade + stroke-dashoffset draw. The same <button> node is
-    // reused across states so the swap slot and its widths persist.
+    // Apply button — "Apply" ⟷ "✓ Applied". On apply, a LEADING gray check is
+    // revealed first and pushes the text to the right: .tl-apply-check tweens its
+    // width 0 -> (icon + 6px gap) using the SAME resize token as the suffix slot
+    // (--apply-resize-*, smooth ease out), so the check expansion + the "y" -> "ied"
+    // suffix resize grow the button in one synchronized motion. The stem "Appl"
+    // stays put and "y" ⟷ "ied" cross-blur (transitions.dev 04). The check itself
+    // stroke-draws IN PLACE (transitions.dev 10, no rotate/bob/scale/translate) —
+    // it is pinned to the slot's left edge and the overflow clip reveals it, so it
+    // never translates. The same <button> node is reused across states.
     function ApplyBtn({applied,onApply}){
       const ref=useRef(null);
       const prev=useRef(applied);
-      // measure both labels once (after fonts/layout) and pin the two slot widths
-      // so the swap can tween between "Apply" and the checked "Applied".
+      // measure both suffixes once (after fonts/layout) and pin the two slot widths
+      // so the suffix can tween between "y" and the checked "ied".
       useLayoutEffect(()=>{
         const btn=ref.current;if(!btn)return;
         const sw=btn.querySelector(".tl-apply-swap"); if(!sw) return;
+        const CHK_GAP=6; // space between the leading check and "Applied"
         const measure=()=>{
-          const a=sw.querySelector(".tl-apply-a"), b=sw.querySelector(".tl-apply-b");
-          if(a) sw.style.setProperty("--aw-a", Math.ceil(a.getBoundingClientRect().width)+"px");
-          if(b) sw.style.setProperty("--aw-b", Math.ceil(b.getBoundingClientRect().width)+"px");
+          const y=sw.querySelector(".tl-apply-y"), ied=sw.querySelector(".tl-apply-ied");
+          if(y) sw.style.setProperty("--sfx-y", Math.ceil(y.getBoundingClientRect().width)+"px");
+          if(ied) sw.style.setProperty("--sfx-ied", Math.ceil(ied.getBoundingClientRect().width)+"px");
+          // leading check slot target width = icon natural width + gap; it stays
+          // measurable even while clipped (the inner .tl-sug-check keeps its size).
+          const chk=sw.querySelector(".tl-sug-check");
+          if(chk) sw.style.setProperty("--chk-w", (Math.ceil(chk.getBoundingClientRect().width)+CHK_GAP)+"px");
         };
         measure();
         if(document.fonts&&document.fonts.ready) document.fonts.ready.then(measure).catch(()=>{});
@@ -1873,23 +2193,32 @@
         className:cx("tl-pill-btn tl-apply-btn",applied&&"is-applied"),
         disabled:applied,onClick:applied?undefined:onApply},
         h("span",{className:"tl-apply-swap","data-state":applied?"applied":"apply"},
-          h("span",{className:"tl-apply-label tl-apply-a"},"Apply"),
-          h("span",{className:"tl-apply-label tl-apply-b"},
+          h("span",{className:"tl-apply-check"},
             h("span",{className:"tl-sug-check","data-state":"out","aria-hidden":"true"},
               h("svg",{width:13,height:13,viewBox:"0 0 16 16",fill:"none",
                 xmlns:"http://www.w3.org/2000/svg",style:{display:"block"}},
                 h("path",{d:"M4 8.4268L6.46155 11.19223L12 4.97001",stroke:"currentColor",
-                  strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}))),
-            "Applied")));
+                  strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})))),
+          h("span",{className:"tl-apply-stem"},"Appl"),
+          h("span",{className:"tl-apply-suffix"},
+            h("span",{className:"tl-apply-seg tl-apply-y"},"y"),
+            h("span",{className:"tl-apply-seg tl-apply-ied"},"ied"))));
     }
-    function RefineResults({suggestions,appliedIds,onApply,lanes}){
+    function RefineResults({suggestions,appliedIds,onApply,lanes,revealedRef,active=true}){
       const ref=useRef(null);
       useEffect(()=>{
         const el=ref.current;if(!el)return;
+        // Both type tabs keep their results mounted so they can cross-slide
+        // (page-side-by-side). Only the visible page plays the staggered reveal,
+        // and only once per scan; the hidden page just shows its final state so
+        // switching tabs slides finished content in without re-staggering.
+        if(!active){ el.classList.add("is-shown"); return; }
+        if(revealedRef&&revealedRef.current){ el.classList.add("is-shown"); return; }
         el.classList.remove("is-shown");
         void el.offsetHeight; // reflow from the start state before playing
         el.classList.add("is-shown");
-      },[]);
+        if(revealedRef) revealedRef.current=true;
+      },[active]);
       const delay=(i)=>({transitionDelay:"calc(var(--stagger-stagger) * "+i+")"});
       // category chip label + color modifier, keyed by the suggestion kind
       const CAT={easing:["Easing","is-easing"],duration:["Duration","is-duration"],
@@ -1923,7 +2252,7 @@
                   : h(React.Fragment,null,
                       s.title&&h("div",{className:"tl-sug-title"},s.title),
                       (s.from||s.to)&&h("div",{className:"tl-sug-delta"},
-                        s.from&&h("span",{className:"tl-sug-from"},s.from),
+              s.from&&h("span",{className:"tl-sug-from"},s.from),
                         s.to&&h("span",{className:"tl-sug-to"},s.to))),
                 s.reason&&h("div",{className:"tl-sug-reason"},s.reason)),
               applyBtn));
@@ -1937,6 +2266,11 @@
       const[modeOpen,setModeOpen]=useState(false);
       const[statusIx,setStatusIx]=useState(0);
       const modeRef=useRef(null);
+      // The results reveal should play once per scan, not on every tab switch.
+      // This persists across RefineResults remounts; reset it when a new scan
+      // starts (or the panel returns to idle) so fresh results animate again.
+      const revealedRef=useRef(false);
+      useEffect(()=>{ if(phase==="scanning"||phase==="idle") revealedRef.current=false; },[phase]);
       useEffect(()=>{
         let raf, to;
         if(open){
@@ -1977,14 +2311,11 @@
       // null (unknown / still probing) is treated as ready so the panel doesn't
       // flash the "unavailable" copy before /health resolves.
       const agentReady = !agentMode || llmAvailable!==false;
-      const typeDesc = (REFINE_TYPES.find(t=>t.key===refineType)||REFINE_TYPES[0]).desc;
       const modeLabel = (REFINE_MODES.find(m=>m.key===mode)||REFINE_MODES[0]).label;
-      // Idle empty-state copy is mode-aware: Agent (llm) keeps the type's
-      // agent-oriented desc; Deterministic has no agent, so it describes the
-      // math-snap behavior (and that "replace" needs Agent mode).
-      const idleDesc = agentMode ? typeDesc : (refineType==="replace"
-        ? "Deterministic mode can't pick a recipe to replace the transition — switch to Agent mode for replacements."
-        : "Deterministic mode snaps your transition's timing to the nearest Transitions.dev motion tokens — mathematically, with no agent or credits.");
+      // Idle empty-state copy is mode-aware (computed per type in bodyFor):
+      // Agent (llm) keeps the type's agent-oriented desc; Deterministic has no
+      // agent, so it describes the math-snap behavior (and that "replace" needs
+      // Agent mode).
       // One persistent control for the whole foot: in idle/done/error it's the
       // pill button; while scanning it carries `.is-scanning` and the same DOM
       // node morphs (card resize) into the loading rectangle with the border-beam.
@@ -2005,25 +2336,58 @@
               h(ShimmerSwapText,{text:REFINE_STATUS[statusIx]}))));
       };
 
-      let body, foot, footBar=false;
+      // Body content for a given refine type. Both type tabs render their own
+      // body so they can cross-slide (page-side-by-side). Phase is global, so
+      // only the type-specific bits (filtered suggestions, empty/idle copy)
+      // change per page. `isActive` tells the results list whether to play its
+      // reveal (only the visible page does).
+      const bodyFor=(rt,isActive)=>{
+        const vis = suggestions.filter(s=> rt==="replace" ? s.kind==="replace" : s.kind!=="replace");
+        if(phase==="scanning"){
+          return h("div",{className:"tl-refine-center"});
+        }
+        if(phase==="error"){
+          return h("div",{className:"tl-refine-center"},
+            h("div",{className:"tl-refine-unavail-title"},"Something went wrong."),
+            h("div",{className:"tl-refine-unavail-text"},error||"The agent reported an error."));
+        }
+        if(phase==="done"){
+          if(vis.length===0){
+            const emptyMsg = rt==="replace"
+              ? "I didn't find any transition that would be a good fit as a replacement."
+              : "Already aligned to the transitions.dev motion tokens. Nothing to refine.";
+            return h("div",{className:"tl-refine-center"},
+              h("p",{className:"tl-refine-idle-text"},emptyMsg));
+          }
+          return h(RefineResults,{suggestions:vis,appliedIds,onApply,lanes:lanes||[],revealedRef,active:isActive});
+        }
+        // idle
+        if(!agentReady){
+          const cliMissing = cliInstalled===false;
+          return h("div",{className:"tl-refine-center"},
+            h("div",{className:"tl-refine-unavail-title"},"Agent unavailable."),
+            cliMissing
+              ? h("p",{className:"tl-refine-unavail-text"},"Install Cursor CLI by ",h("code",{className:"tl-code"},"/refine live")," command in your agent to enable live functionality.")
+              : h("p",{className:"tl-refine-unavail-text"},"Run the ",h("code",{className:"tl-code"},"/refine live")," command in your agent to enable live functionality."));
+        }
+        const idleDescR = agentMode ? (REFINE_TYPES.find(t=>t.key===rt)||REFINE_TYPES[0]).desc : (rt==="replace"
+          ? "Deterministic mode can't pick a recipe to replace the transition — switch to Agent mode for replacements."
+          : "Deterministic mode snaps your transition's timing to the nearest Transitions.dev motion tokens — mathematically, with no agent or credits.");
+        return h("div",{className:"tl-refine-center"},
+          h("p",{className:"tl-refine-idle-text"},idleDescR));
+      };
+
+      // Foot tracks the active type (it lives below the sliding body, so it
+      // just updates in place on a tab switch).
+      let foot, footBar=false;
       if(phase==="scanning"){
-        body = h("div",{className:"tl-refine-center"});
         foot = startBtn();
       } else if(phase==="error"){
-        body = h("div",{className:"tl-refine-center"},
-          h("div",{className:"tl-refine-unavail-title"},"Something went wrong."),
-          h("div",{className:"tl-refine-unavail-text"},error||"The agent reported an error."));
         foot = startBtn({label:"Try again"});
       } else if(phase==="done"){
         if(visible.length===0){
-          const emptyMsg = refineType==="replace"
-            ? "I didn't find any transition that would be a good fit as a replacement."
-            : "Already aligned to the transitions.dev motion tokens. Nothing to refine.";
-          body = h("div",{className:"tl-refine-center"},
-            h("p",{className:"tl-refine-idle-text"},emptyMsg));
           foot = startBtn({label:"Scan again"});
         } else {
-          body = h(RefineResults,{suggestions:visible,appliedIds,onApply,lanes:lanes||[]});
           footBar = true;
           foot = h(React.Fragment,null,
             h("button",{className:"tl-pill-btn",disabled:pending.length===0,
@@ -2032,19 +2396,7 @@
             h("button",{className:"tl-pill-btn",onClick:onStart},"Scan again"));
         }
       } else { // idle
-        if(!agentReady){
-          const cliMissing = cliInstalled===false;
-          body = h("div",{className:"tl-refine-center"},
-            h("div",{className:"tl-refine-unavail-title"},"Agent unavailable."),
-            cliMissing
-              ? h("p",{className:"tl-refine-unavail-text"},"Install Cursor CLI by ",h("code",{className:"tl-code"},"/refine live")," command in your agent to enable live functionality.")
-              : h("p",{className:"tl-refine-unavail-text"},"Run the ",h("code",{className:"tl-code"},"/refine live")," command in your agent to enable live functionality."));
-          foot = startBtn({disabled:true});
-        } else {
-          body = h("div",{className:"tl-refine-center"},
-            h("p",{className:"tl-refine-idle-text"},idleDesc));
-          foot = startBtn({});
-        }
+        foot = startBtn(agentReady?{}:{disabled:true});
       }
 
       return h("div",{className:"tl-refine-panel","data-open":panelOpen?"true":"false","data-phase":slidePhase,
@@ -2072,7 +2424,11 @@
             REFINE_TYPES.map(t=>h("button",{key:t.key,className:"tl-refine-tab",role:"tab",
               "aria-selected":refineType===t.key?"true":"false",
               onClick:()=>{if(t.key!==refineType)onType(t.key);}},t.label))),
-          h("div",{className:"tl-refine-body"},body),
+          h("div",{className:"tl-refine-body tl-refine-pages t-page-slide","data-page":refineType==="replace"?"2":"1"},
+            h("div",{className:"tl-refine-page t-page","data-page-id":"1","aria-hidden":refineType!=="small"},
+              bodyFor("small",refineType==="small")),
+            h("div",{className:"tl-refine-page t-page","data-page-id":"2","aria-hidden":refineType!=="replace"},
+              bodyFor("replace",refineType==="replace"))),
           h("div",{className:cx("tl-refine-foot",footBar&&"is-bar")},foot)));
     }
 
@@ -2096,9 +2452,27 @@
       return out;
     }
 
-    function Header({entries,active,onSelect,onReset,onCopy,copied,snap,setSnap,onMinimize,onRefine,refineActive,onAccept,acceptState,acceptDisabled,acceptError,scanning,onRescan}){
-      const[pick,setPick]=useState(false);
+    function Header({entries,active,onSelect,onReset,onCopy,copied,snap,setSnap,onMinimize,onRefine,refineActive,onAccept,acceptState,acceptDisabled,acceptError,scanning,onRescan,pick,setPick}){
       const[setg,setSetg]=useState(false);
+      // settings dropdown sub-page (main menu ↔ keyboard-shortcuts cheat sheet)
+      const[settingsView,setSettingsView]=useState("main"); // "main" | "shortcuts"
+      // theme preference — UI only for now (dark theme not wired up yet)
+      const[themePref,setThemePref]=useState("system"); // "light" | "dark" | "system"
+      const THEME_OPTS=[{key:"light",label:"Light"},{key:"dark",label:"Dark"},{key:"system",label:"System"}];
+      const isMac=typeof navigator!=="undefined"&&/mac/i.test((navigator.userAgentData&&navigator.userAgentData.platform)||navigator.platform||navigator.userAgent||"");
+      const modKey=isMac?"Cmd":"Ctrl";
+      // small gray shortcut hint appended inside a tooltip (e.g. "⌘A")
+      const ttHint=(k)=>h("span",{className:"tl-tt-kbd"},(isMac?"\u2318":"Ctrl ")+k);
+      // ⌫ = Backspace, ↑/↓ = arrows; letters/Enter shown verbatim
+      const SHORTCUTS=[
+        {label:"Accept changes",k:"Enter"},
+        {label:"Reset values",k:"\u232B"},
+        {label:"Copy values",k:"C"},
+        {label:"Toggle Refine panel",k:"E"},
+        {label:"Open transition picker",k:"K"},
+        {label:"Previous transition",k:"\u2191"},
+        {label:"Next transition",k:"\u2193"},
+      ];
       const pickRef=useRef(null), gearRef=useRef(null);
       const[q,setQ]=useState("");
       useEffect(()=>{if(!pick)setQ("");},[pick]); // reset search when the picker closes
@@ -2152,28 +2526,65 @@
         h("span",{className:"tl-header-count"},
           scanning
             ? h("span",{className:"t-tt-wrap"},
-                h("span",{className:"tl-scan-note",tabIndex:0},"Agent scanning transitions…"),
+                h("span",{className:"tl-scan-note",tabIndex:0},
+                  h(DotmLoader),
+                  h("span",{className:"t-shimmer tl-scan-shimmer","data-text":"Agent scanning transitions…"},"Agent scanning transitions…")),
                 h("span",{className:"t-tt tl-tt-below tl-tt-msg",role:"tooltip"},
                   "Agent is working on understanding your transitions and creating grouping and naming. This usually takes a few seconds to a minute."))
             : entries.length+" transition"+(entries.length===1?"":"s")+" found"),
         h("button",{ref:gearRef,className:cx("tl-icon-btn",setg&&"is-active"),title:"Settings",onClick:()=>setSetg(v=>!v)},h(Ic,{name:"dotsv"})),
-        h(Dropdown,{open:setg,onClose:()=>setSetg(false),triggerRef:gearRef,width:210,align:"right"},
-          h("div",{className:"tl-menu-head"},
-            h("span",null,"Transitions.dev ",h("span",{className:"tl-menu-head-name"},"Refine")),
-            h("span",{className:"tl-menu-head-ver"},REFINE_VERSION)),
-          h("div",{className:"tl-menu-divider"}),
-          h(MenuItem,{disabled:!active,onClick:()=>{onCopy&&onCopy();setSetg(false);},
-            left:h("span",{className:"tl-menu-icon"},h(Ic,{name:"copy"})),
-            right:copied&&h("span",{className:"tl-menu-check"},h(Ic,{name:"accept"}))},copied?"Copied":"Copy values"),
-          h(MenuItem,{disabled:scanning,onClick:()=>{setSetg(false);onRescan&&onRescan();},
-            left:h("span",{className:"tl-menu-icon"},h(Ic,{name:"restart"}))},
-            scanning?"Rescanning…":"Rescan transitions"),
-          h("div",{className:"tl-menu-divider"}),
-          h(MenuItem,{onClick:()=>{setSetg(false);window.open("https://transitions.dev","_blank","noopener");},
-            right:h("span",{className:"tl-menu-chevr"},h(Ic,{name:"chevronr",size:16}))},"Learn more")),
+        h(Dropdown,{open:setg,onClose:()=>{setSetg(false);setSettingsView("main");},triggerRef:gearRef,width:240,align:"right"},
+          h(SettingsSlide,{view:settingsView,
+            onBack:()=>setSettingsView("main"),
+            onClose:()=>{setSetg(false);setSettingsView("main");},
+            // ── main settings page (Figma 580:4723) ──
+            mainPage:h(React.Fragment,null,
+              h(MenuItem,{disabled:!active,onClick:()=>{onCopy&&onCopy();setSetg(false);},
+                left:h("span",{className:"tl-menu-icon"},h(Ic,{name:"copy"})),
+                right:copied&&h("span",{className:"tl-menu-check"},h(Ic,{name:"accept"}))},copied?"Copied":"Copy values"),
+              h(MenuItem,{disabled:scanning,onClick:()=>{setSetg(false);onRescan&&onRescan();},
+                left:h("span",{className:"tl-menu-icon"},h(Ic,{name:"restart"}))},
+                scanning?"Rescanning…":"Rescan transitions"),
+              h("div",{className:"tl-menu-divider"}),
+              // theme picker row — shows the current value + chevron; opens the sub-page
+              h(MenuItem,{onClick:()=>setSettingsView("theme"),
+                right:h("span",{className:"tl-menu-trail"},
+                  h("span",{className:"tl-menu-value"},(THEME_OPTS.find(o=>o.key===themePref)||{}).label),
+                  h("span",{className:"tl-menu-chevr"},h(Ic,{name:"chevronr",size:16})))},"Theme"),
+              h(MenuItem,{onClick:()=>setSettingsView("shortcuts"),
+                right:h("span",{className:"tl-menu-chevr"},h(Ic,{name:"chevronr",size:16}))},"Keyboard shortcuts"),
+              h(MenuItem,{onClick:()=>{setSetg(false);window.open("https://transitions.dev","_blank","noopener");},
+                right:h("span",{className:"tl-menu-chevr"},h(Ic,{name:"linkout",size:16}))},"Send feedback"),
+              h(MenuItem,{onClick:()=>{setSetg(false);window.open("https://transitions.dev","_blank","noopener");},
+                right:h("span",{className:"tl-menu-chevr"},h(Ic,{name:"linkout",size:16}))},"Learn more"),
+              h("div",{className:"tl-menu-divider"}),
+              h("div",{className:"tl-menu-head"},
+                h("span",null,"Transitions.dev ",h("span",{className:"tl-menu-head-name"},"Refine")),
+                h("span",{className:"tl-menu-head-ver"},REFINE_VERSION))),
+            // ── theme sub-page (Light / Dark / System — System default) ──
+            themePage:h(React.Fragment,null,
+              h("button",{type:"button",className:"tl-set-back",onClick:()=>setSettingsView("main")},
+                h("span",{className:"tl-set-back-ic"},h(Ic,{name:"chevronr",size:16})),
+                h("span",{className:"tl-set-back-title"},"Theme")),
+              h("div",{className:"tl-menu-divider"}),
+              ...THEME_OPTS.map(o=>h(MenuItem,{key:o.key,onClick:()=>{setThemePref(o.key);setSettingsView("main");},
+                right:themePref===o.key&&h("span",{className:"tl-menu-check"},h(Ic,{name:"accept"}))},o.label))),
+            // ── keyboard-shortcuts sub-page ──
+            shortcutsPage:h(React.Fragment,null,
+              h("button",{type:"button",className:"tl-set-back",onClick:()=>setSettingsView("main")},
+                h("span",{className:"tl-set-back-ic"},h(Ic,{name:"chevronr",size:16})),
+                h("span",{className:"tl-set-back-title"},"Keyboard shortcuts")),
+              h("div",{className:"tl-menu-divider"}),
+              ...SHORTCUTS.map((s,i)=>h("div",{key:i,className:"tl-kbd-row"},
+                h("span",{className:"tl-kbd-row-label"},s.label),
+                h("span",{className:"tl-kbd-cluster"},
+                  h("kbd",{className:"tl-kbd"},modKey),
+                  h("span",{className:"tl-kbd-plus"},"+"),
+                  h("kbd",{className:"tl-kbd"},s.k)))))}),
+          ),
         h("span",{className:"t-tt-wrap"},
           h("button",{className:"tl-sec-btn t-tt-trigger",disabled:!active,onClick:onReset},"Reset"),
-          h("span",{className:"t-tt tl-tt-below",role:"tooltip"},"Reset values")),
+          h("span",{className:"t-tt tl-tt-below",role:"tooltip"},"Reset values",ttHint("\u232B"))),
         h("span",{className:"t-tt-wrap"},
           h("button",{className:cx("tl-accept-btn",acceptState==="saving"&&"is-saving",acceptState==="done"&&"is-done"),
             disabled:!active||acceptDisabled||acceptState==="saving"||acceptState==="done",onClick:onAccept,"aria-label":"Accept changes to your code"},
@@ -2185,8 +2596,9 @@
             acceptState==="error"&&acceptError?acceptError
               :acceptState==="done"?"Saved to your code"
               :acceptDisabled?"No changes to save"
-              :"Save changes to your codebase")),
-        h("button",{className:cx("tl-refine-btn",refineActive&&"is-active"),disabled:!active,onClick:onRefine},
+              :h(React.Fragment,null,"Save changes to your codebase",ttHint("A")))),
+        h("span",{className:"t-tt-wrap"},
+          h("button",{className:cx("tl-refine-btn t-tt-trigger",refineActive&&"is-active"),disabled:!active,onClick:onRefine},
             h(Ic,{name:"wand"}),
             h("span",{className:"tl-refine-sparks","aria-hidden":"true"},
               h("i",{style:{"--ox":"-1px","--oy":"-3px","--sx":"0px","--sy":"-11px","--sd":"900ms","--sdelay":"0ms"}}),
@@ -2200,35 +2612,57 @@
               h("i",{style:{"--ox":"-5px","--oy":"-2px","--sx":"-9px","--sy":"-9px","--sd":"930ms","--sdelay":"180ms"}}),
               h("i",{style:{"--ox":"3px","--oy":"1px","--sx":"12px","--sy":"1px","--sd":"980ms","--sdelay":"300ms"}})),
             h("span",null,"Refine")),
-        h("button",{className:"tl-icon-btn ghost",title:"Minimize",onClick:onMinimize},h(Ic,{name:"minimize"})),
+          h("span",{className:"t-tt tl-tt-below",role:"tooltip"},"Refine",ttHint("R"))),
+        h("span",{className:"t-tt-wrap"},
+          h("button",{className:"tl-icon-btn ghost t-tt-trigger","aria-label":"Minimize",onClick:onMinimize},h(Ic,{name:"minimize"})),
+          h("span",{className:"t-tt tl-tt-below tl-tt-right",role:"tooltip"},"Minimize",ttHint("."))),
       );
     }
 
     function PropTrack({property, member, delayMs, durationMs, selected, onSelect, onDelayChange, onDurationChange, snap, scaleMs, lockDuration, labelW}){
       const trackRef=useRef(null);
-      const grid = snap ? 25 : 1;
-      const pxToMs=useCallback(px=>{if(!trackRef.current)return 0;const w=trackRef.current.getBoundingClientRect().width;return Math.round((px/w)*scaleMs/grid)*grid;},[grid,scaleMs]);
+      const [dragging,setDragging]=useState(false);
+      // 1ms resolution while dragging so the bar moves smoothly; the snap grid
+      // (25ms) is applied only on release when `snap` is on.
+      const SNAP_GRID = 25;
+      const pxToMs=useCallback((px,g)=>{if(!trackRef.current)return 0;const w=trackRef.current.getBoundingClientRect().width;const gg=g||1;return Math.round((px/w)*scaleMs/gg)*gg;},[scaleMs]);
 
       const startDrag=useCallback((mode,e)=>{
         e.preventDefault(); e.stopPropagation();
         onSelect();
         // a spring controls its own duration, so its bar can be moved (delay) but not resized
         if(lockDuration && mode!=="move") return;
+        setDragging(true);
         const startX=e.clientX; const sd=delayMs; const sdur=durationMs;
+        let lastDel=sd, lastDur=sdur;
         const onMove=e2=>{
-          const dx=e2.clientX-startX; const dMs=pxToMs(dx);
+          const dx=e2.clientX-startX; const dMs=pxToMs(dx,1); // smooth: 1ms steps
           if(mode==="move"){
-            onDelayChange(Math.max(0,Math.min(sd+dMs,scaleMs-sdur)));
+            lastDel=Math.max(0,Math.min(sd+dMs,scaleMs-sdur));
+            onDelayChange(lastDel);
           } else if(mode==="left"){
-            const rawDel=sd+dMs; const clampedDel=Math.max(0,Math.min(rawDel,sd+sdur-grid));
-            onDelayChange(clampedDel); onDurationChange(sdur-(clampedDel-sd));
+            const rawDel=sd+dMs; const clampedDel=Math.max(0,Math.min(rawDel,sd+sdur-1));
+            lastDel=clampedDel; lastDur=sdur-(clampedDel-sd);
+            onDelayChange(lastDel); onDurationChange(lastDur);
           } else {
-            onDurationChange(Math.max(grid,Math.min(sdur+dMs,scaleMs-sd)));
+            lastDur=Math.max(1,Math.min(sdur+dMs,scaleMs-sd));
+            onDurationChange(lastDur);
           }
         };
-        const onUp=()=>{window.removeEventListener("mousemove",onMove);window.removeEventListener("mouseup",onUp);};
+        const onUp=()=>{
+          setDragging(false);
+          // snap to the grid once, on release (bar tweens there since the
+          // is-dragging transition lock is now removed).
+          if(snap){
+            const g=SNAP_GRID, sn=v=>Math.round(v/g)*g;
+            if(mode==="move"){ onDelayChange(Math.max(0,Math.min(sn(lastDel),scaleMs-sdur))); }
+            else if(mode==="left"){ onDelayChange(Math.max(0,sn(lastDel))); onDurationChange(Math.max(g,sn(lastDur))); }
+            else { onDurationChange(Math.max(g,Math.min(sn(lastDur),scaleMs-sd))); }
+          }
+          window.removeEventListener("mousemove",onMove);window.removeEventListener("mouseup",onUp);
+        };
         window.addEventListener("mousemove",onMove);window.addEventListener("mouseup",onUp);
-      },[delayMs,durationMs,pxToMs,grid,scaleMs,onSelect,onDelayChange,onDurationChange,lockDuration]);
+      },[delayMs,durationMs,pxToMs,snap,scaleMs,onSelect,onDelayChange,onDurationChange,lockDuration]);
 
       const delPct=(delayMs/scaleMs)*100; const durPct=(durationMs/scaleMs)*100;
       return h("div",{className:cx("tl-prop-row",selected&&"selected",lockDuration&&"is-spring"),onClick:onSelect},
@@ -2237,7 +2671,7 @@
             member&&h("span",{className:"tl-prop-member"},member),
             h("span",{className:"tl-prop-prop"},property))),
         h("div",{className:"tl-prop-track",ref:trackRef},
-          h("div",{className:"tl-bar",style:{left:delPct+"%",width:durPct+"%"},onMouseDown:e=>startDrag("move",e),
+          h("div",{className:cx("tl-bar",dragging&&"is-dragging"),style:{left:delPct+"%",width:durPct+"%"},onMouseDown:e=>startDrag("move",e),
             title:lockDuration?"Spring duration is derived \u2014 drag to move, resize is locked":undefined},
             h("span",{className:"tl-bar-handle left"}),
             h("span",{className:"tl-bar-handle right"}),
@@ -2257,7 +2691,8 @@
       const[dragging,setDragging]=useState(false);
       const[menu,setMenu]=useState(false);
       const pct = Math.min(Math.max((value - min) / (max - min), 0), 1) * 100;
-      const grid = snap ? step : Math.max(1, Math.round(step/5));
+      // fine grid while dragging (smooth); the snap `step` is applied on release.
+      const dragGrid = Math.max(1, Math.round(step/5));
       const selectAll = useCallback(e=>{
         const el = e && e.target ? e.target : inputRef.current;
         if(!el) return;
@@ -2265,25 +2700,27 @@
         requestAnimationFrame(()=>el.select());
       },[]);
 
-      const setFromX = useCallback(clientX => {
+      const setFromX = useCallback((clientX, g) => {
         if(!trackRef.current) return;
         const rect = trackRef.current.getBoundingClientRect();
         const ratio = Math.max(0, Math.min((clientX - rect.left) / rect.width, 1));
         const raw = min + ratio * (max - min);
-        const snapped = Math.round(raw / grid) * grid;
+        const gg = g || 1;
+        const snapped = Math.round(raw / gg) * gg;
         onChange(Math.max(min, Math.min(max, snapped)));
-      },[min,max,grid,onChange]);
+      },[min,max,onChange]);
 
       const startDrag = useCallback(e=>{
         if(editing || readOnly) return;
         e.preventDefault();
         setDragging(true);
-        setFromX(e.clientX);
-        const onMove = e2 => setFromX(e2.clientX);
-        const onUp = () => { setDragging(false); window.removeEventListener("mousemove",onMove); window.removeEventListener("mouseup",onUp); };
+        let lastX = e.clientX;
+        setFromX(e.clientX, dragGrid); // smooth fine steps during drag
+        const onMove = e2 => { lastX = e2.clientX; setFromX(e2.clientX, dragGrid); };
+        const onUp = () => { setDragging(false); if(snap) setFromX(lastX, step); window.removeEventListener("mousemove",onMove); window.removeEventListener("mouseup",onUp); };
         window.addEventListener("mousemove",onMove);
         window.addEventListener("mouseup",onUp);
-      },[setFromX,editing]);
+      },[setFromX,editing,readOnly,snap,step,dragGrid]);
 
       const beginEdit = useCallback(e=>{ e.stopPropagation(); if(readOnly) return; setDraft(String(value)); setEditing(true); },[value,readOnly]);
       const commit = useCallback(()=>{ const n=parseFloat(draft); if(!isNaN(n)) onChange(Math.max(min,Math.min(max,Math.round(n)))); setEditing(false); },[draft,min,max,onChange]);
@@ -2317,15 +2754,12 @@
     }
 
     // shared plot geometry for both the easing curve and the spring curve.
-    // Compact, landscape box: small horizontal padding (bezier x is clamped 0..1
-    // so there is no horizontal overshoot to reserve room for) makes the curve
-    // fill the width, while PAD_Y keeps the 0..1 band vertically centered with
-    // equal headroom above/below so overshoot/undershoot handles (clamped to the
-    // -0.5..1.5 range) stay visible instead of being clipped at the edges.
-    // square plot with equal padding on all sides — standard cubic-bezier
-    // graph ratio (easing.dev): the 0→1 region is a square, centered, with
-    // matching overshoot headroom above 1 and below 0.
-    const CURVE = { VBW:240, VBH:240, PAD_X:48, PAD_Y:48 };
+    // Square plot with equal padding on all sides (standard cubic-bezier graph
+    // ratio, easing.dev): the 0→1 region is centered with identical top/bottom
+    // (and left/right) margins. The box no longer reserves room for overshoot —
+    // overshoot/undershoot handles overflow the box freely (the curve container
+    // is overflow:visible) so dragging is never clamped to the rectangle.
+    const CURVE = { VBW:240, VBH:240, PAD_X:24, PAD_Y:24 };
 
     // Unified "Preview" section (Figma node 580:11158) — collapsible, collapsed by
     // default (transitions.dev · 21-accordion). Holds BOTH the timing curve card
@@ -2828,6 +3262,9 @@
       const[panelHeight,setPanelHeight]=useState(440);
       const[resizing,setResizing]=useState(false);
       const[snap,setSnap]=useState(true);
+      // transition picker open state — lifted out of Header so the panel-focused
+      // Cmd/Ctrl+K shortcut can open it.
+      const[pickOpen,setPickOpen]=useState(false);
       // ── refine ──
       const[refineOpen,setRefineOpen]=useState(false);
       const[refinePhase,setRefinePhase]=useState("idle"); // idle | scanning | done | error
@@ -2836,6 +3273,10 @@
       const[refineSuggestions,setRefineSuggestions]=useState([]);
       const[refineSummary,setRefineSummary]=useState(null);
       const[refineError,setRefineError]=useState(null);
+      // deterministic scans answer almost instantly, so enforce a 2s floor on the
+      // "scanning" phase for that mode only (LLM scans stay immediate).
+      const scanStartedAtRef=useRef(0);
+      const scanModeRef=useRef("llm");
       // ── accept (write to source) ──
       const[acceptState,setAcceptState]=useState("idle"); // idle | saving | done | error
       const[acceptError,setAcceptError]=useState(null);
@@ -2876,33 +3317,76 @@
         refreshHealth();
       },[active,refineOpen,refreshHealth]);
       // "Start scanning" resolves availability first, then posts the job.
-      const startScan=useCallback(async()=>{
+      // per-(transition,type) result cache so switching tabs reuses a prior scan
+      // instead of re-asking the agent. In llm mode each scan is scoped to the
+      // active tab (Small = token tweaks, Replace = recipe) so the common Small
+      // view skips the recipe selection + reference-file read. Deterministic stays
+      // a single instant "both" pass that feeds both tabs.
+      const refineCacheRef=useRef(new Map());     // `${id}::${type}` -> {suggestions,summary}
+      const refineScanTypeRef=useRef("small");    // which type the in-flight job targets
+      // results are not comparable across transitions — drop the cache when the
+      // target transition changes.
+      useEffect(()=>{refineCacheRef.current.clear();},[active&&active.id]);
+      // recompute the displayed suggestions from whatever types are cached for a
+      // transition (the panel filters by kind per tab, so a merged array is fine).
+      const applyMerged=useCallback((id)=>{
+        const c=refineCacheRef.current;
+        const both=c.get(id+"::both");
+        if(both){setRefineSuggestions(both.suggestions||[]);setRefineSummary(both.summary||null);return;}
+        const small=c.get(id+"::small"), repl=c.get(id+"::replace");
+        setRefineSuggestions([...(small?small.suggestions:[]),...(repl?repl.suggestions:[])]);
+        setRefineSummary((small&&small.summary)||(repl&&repl.summary)||null);
+      },[]);
+      const startScan=useCallback(async(typeArg,opts)=>{
         if(!active)return;
-        setRefinePhase("scanning");setRefineLog([]);
-        setRefineSuggestions([]);setRefineSummary(null);setRefineError(null);
-        setAppliedIds({});setRefineLabel(active.label);setRefineJobId(null);
-        const j=await refreshHealth();
-        const avail=j?!!j.llmAvailable:false;
+        opts=opts||{};
+        // Resolve availability from the continuously-polled /health (2s cadence)
+        // rather than a serial probe on the click path. Unknown (null) counts as
+        // available so the first click isn't blocked; a dead relay surfaces via
+        // the POST below (→ error state).
+        const avail=llmAvailable!==false;
         const mode=(refineMode==="llm"&&!avail)?"deterministic":refineMode;
         if(mode!==refineMode)setRefineMode(mode);
+        scanModeRef.current=mode;
+        // deterministic → one "both" pass (instant, free). llm → scope to the
+        // active tab so Small skips recipe work; Replace asks for it on demand.
+        // NOTE: this is also wired as a button onClick, so typeArg may be a click
+        // event — only honour it when it's an explicit "small"/"replace" string.
+        const reqType=(typeArg==="small"||typeArg==="replace")?typeArg:refineType;
+        const type=mode==="deterministic"?"both":reqType;
+        refineScanTypeRef.current=type;
+        scanStartedAtRef.current=Date.now();
+        setRefinePhase("scanning");setRefineLog([]);setRefineError(null);
+        setRefineLabel(active.label);setRefineJobId(null);
+        if(!opts.keepApplied)setAppliedIds({});
+        // re-scan only this type; keep the other tab's cached result for the merge.
+        refineCacheRef.current.delete(active.id+"::"+type);
         try{
           const et=active.effectiveTimings||[];
           const timings=et.map(t=>({property:t.property,member:t.member||null,durationMs:t.durationMs,delayMs:t.delayMs,easing:t.easing}));
           const selector=(active.bindings&&active.bindings.selector)||(et[0]&&et[0].selector)||null;
-          // always scan for BOTH kinds (token tweaks + a whole-transition replacement)
-          // in one pass; the tabs just filter which kind they show.
           const{id}=await relayCreateJob({transitionId:active.id,label:active.label,selector,
-            phase:active.phase||null,group:active.groupLabel||null,timings,mode,refineType:"both"});
+            phase:active.phase||null,group:active.groupLabel||null,timings,mode,refineType:type});
           setRefineJobId(id);
         }catch(e){
           setRefinePhase("error");
           setRefineError(h(React.Fragment,null,"Couldn't reach the refine relay. Start it with ",h("code",{className:"tl-code"},"npx transitions-refine live"),"."));
         }
-      },[active,refineMode,refineType,refreshHealth]);
-      const changeRefineMode=useCallback((mode)=>{setRefineMode(mode);setRefinePhase("idle");refreshHealth();},[refreshHealth]);
-      // switching tabs only changes which kind of suggestion is shown — it never
-      // interrupts a scan or discards results, since one scan covers both kinds.
-      const changeRefineType=useCallback((t)=>{setRefineType(t);},[]);
+      },[active,refineMode,refineType,llmAvailable]);
+      const changeRefineMode=useCallback((mode)=>{setRefineMode(mode);setRefinePhase("idle");refineCacheRef.current.clear();refreshHealth();},[refreshHealth]);
+      // Switching tabs reuses a cached scan when present; otherwise (llm only) it
+      // scans the newly-selected type on demand — the trade-off for not scanning
+      // the recipe upfront. Deterministic feeds both tabs from one "both" pass, so
+      // its tab switch is a pure filter. Before any scan (idle/error), tabs just
+      // preview copy and never auto-scan.
+      const changeRefineType=useCallback((t)=>{
+        setRefineType(t);
+        if(!active)return;
+        if(scanModeRef.current==="deterministic")return;
+        if(refinePhase!=="done"&&refinePhase!=="scanning")return;
+        if(refineCacheRef.current.has(active.id+"::"+t)){applyMerged(active.id);setRefinePhase("done");return;}
+        startScan(t,{keepApplied:true});
+      },[active,refinePhase,applyMerged,startScan]);
       // poll the relay while a job is running
       useEffect(()=>{
         if(!refineJobId||refinePhase!=="scanning")return;
@@ -2912,12 +3396,27 @@
             const job=await relayGetJob(refineJobId);
             if(!live)return;
             if(Array.isArray(job.statusLog))setRefineLog(job.statusLog);
-            if(job.status==="done"){setRefineSuggestions((job.result&&job.result.suggestions)||[]);setRefineSummary(job.result&&job.result.summary);setRefinePhase("done");return;}
+            if(job.status==="done"){
+              try{console.log("[refine] "+refineScanTypeRef.current+" job done in "+(Date.now()-scanStartedAtRef.current)+"ms");}catch{}
+              const finish=()=>{if(!live)return;
+                // cache this scan's result under its type, then show the merged set
+                // (so the other tab's cached suggestions stay visible).
+                const type=refineScanTypeRef.current;
+                const id=active?active.id:"";
+                refineCacheRef.current.set(id+"::"+type,{suggestions:(job.result&&job.result.suggestions)||[],summary:(job.result&&job.result.summary)||null});
+                if(active)applyMerged(active.id);else{setRefineSuggestions((job.result&&job.result.suggestions)||[]);setRefineSummary(job.result&&job.result.summary);}
+                setRefinePhase("done");};
+              // deterministic mode floors the scanning phase at 2s so it doesn't flash by.
+              const minMs=scanModeRef.current==="deterministic"?2000:0;
+              const wait=Math.max(0,minMs-(Date.now()-scanStartedAtRef.current));
+              if(wait>0){to=setTimeout(finish,wait);}else{finish();}
+              return;
+            }
             if(job.status==="error"){setRefineError(job.error||"The agent reported an error.");setRefinePhase("error");return;}
-            to=setTimeout(tick,500);
+            to=setTimeout(tick,200);
           }catch(e){if(live){setRefineError("Lost connection to the relay.");setRefinePhase("error");}}
         };
-        to=setTimeout(tick,400);
+        to=setTimeout(tick,200);
         return()=>{live=false;if(to)clearTimeout(to);};
       },[refineJobId,refinePhase]);
       const applySuggestion=useCallback((s)=>{
@@ -2951,7 +3450,7 @@
         if(typeof document==="undefined")return;
         const applied=liveAppliedRef.current;
         const desired=new Map(); // el → css
-        const add=(els,css)=>{ for(const el of els){ if(!el||(el.closest&&el.closest("[data-timeline-panel]")))continue; desired.set(el,css); } };
+        const add=(els,css)=>{ for(const el of els){ if(!el||(el.closest&&el.closest("[data-timeline-panel],[data-tl-ui]")))continue; desired.set(el,css); } };
         for(const item of entries){
           const ov=registry.getPropOverrides(item.id);
           if(!ov||!Object.keys(ov).length)continue; // only edited transitions go live
@@ -3019,8 +3518,29 @@
         }else{
           text="transition: "+et.map(decl).join(",\n       ")+";";
         }
-        navigator.clipboard.writeText(text).then(()=>{setCopied(true);setTimeout(()=>setCopied(false),1500);}).catch(()=>{});
-        showToast("Values copied");
+        const onCopied=()=>{setCopied(true);setTimeout(()=>setCopied(false),1500);showToast("Values copied");};
+        const onCopyFail=()=>{showToast("Couldn't copy");};
+        // navigator.clipboard needs a secure context (https/localhost); when the
+        // host page is plain http — or Safari blocks the async API — fall back to
+        // a hidden-textarea execCommand("copy") so copy still works everywhere.
+        const legacyCopy=()=>{
+          try{
+            const ta=document.createElement("textarea");
+            ta.value=text; ta.setAttribute("readonly","");
+            ta.style.position="fixed"; ta.style.top="-9999px"; ta.style.opacity="0";
+            document.body.appendChild(ta);
+            ta.focus(); ta.select();
+            try{ta.setSelectionRange(0,text.length);}catch(e){}
+            const ok=document.execCommand("copy");
+            document.body.removeChild(ta);
+            ok?onCopied():onCopyFail();
+          }catch(e){onCopyFail();}
+        };
+        try{
+          if(navigator.clipboard&&navigator.clipboard.writeText){
+            navigator.clipboard.writeText(text).then(onCopied).catch(legacyCopy);
+          }else legacyCopy();
+        }catch(e){legacyCopy();}
       },[active,showToast]);
       const resetOverrides=useCallback(()=>{if(active)registry.clearOverride(active.id);},[registry,active]);
       // Accept → send an "apply" job so the agent writes the edited timings into
@@ -3100,6 +3620,11 @@
         if(scanTokenRef.current!==token)return;
         const flat=registry.getAll().filter(e=>e.kind!=="phase");
         if(!flat.length){setGroupScanState("idle");return;}
+        // Hardcoded grouping (window.__TX_SEED_GROUPS): a host/demo page can ship a
+        // pre-computed agent grouping so the panel groups instantly with NO relay
+        // or agent round-trip. demo.html uses this to bake in the agent's scan.
+        const seed=typeof window!=="undefined"&&Array.isArray(window.__TX_SEED_GROUPS)?window.__TX_SEED_GROUPS:null;
+        if(seed&&seed.length){registry.setGroups(seed);setGroupScanState("done");return;}
         // valid cache (same content signature) → apply instantly, skip the agent.
         // A stale cache (different sig, e.g. content changed) falls through to a
         // fresh scan and is overwritten below.
@@ -3148,7 +3673,12 @@
       // (signature match, no agent) or kicks off a fresh agent scan. Rescan is
       // manual after that.
       useEffect(()=>{
-        if(!live||didGroupScanRef.current)return;
+        // A host/demo page can hardcode a grouping via window.__TX_SEED_GROUPS so
+        // the panel shows it WITHOUT a live agent (demo.html bakes in the agent's
+        // initial scan this way). Otherwise the agent group-scan stays gated behind
+        // a live agent as usual.
+        const seeded=typeof window!=="undefined"&&Array.isArray(window.__TX_SEED_GROUPS)&&window.__TX_SEED_GROUPS.length;
+        if((!live&&!seeded)||didGroupScanRef.current)return;
         didGroupScanRef.current=true;
         runGroupScan();
       },[live,runGroupScan]);
@@ -3203,27 +3733,93 @@
       //                small "Agent scanning transitions…" note in the header count
       //                slot. A failed scan just leaves the flat list (Rescan in
       //                Settings to retry) — it never traps the panel.
+      // ── keyboard shortcuts (panel-focused, Cmd/Ctrl based) ──
+      // Fire only when the panel is focused or hovered so we never hijack the
+      // host app. A latest-values ref keeps the single window listener stable.
+      const panelRootRef=useRef(null);
+      const hoveredRef=useRef(false);
+      const panelHotRef=useRef(false);
+      const recomputeHot=useCallback(()=>{
+        const el=panelRootRef.current;
+        panelHotRef.current=hoveredRef.current||!!(el&&document.activeElement&&el.contains(document.activeElement));
+      },[]);
+      const kbdRef=useRef({});
+      kbdRef.current={entries,active,acceptState,acceptDisabled:computeChanges(active).length===0,minimized,
+        openRefine,resetOverrides,copyValues,onAccept,setActiveId,setMinimized,setPickOpen};
+      useEffect(()=>{
+        const onKey=e=>{
+          const mod=e.metaKey||e.ctrlKey;
+          if(!mod)return;
+          const L=kbdRef.current;
+          // Cmd+. always restores a minimized panel (panel root isn't in the DOM
+          // then, so the hot/input gates can't apply). All other combos require
+          // the panel to be focused/hovered and not typing in a field.
+          const isRestore=e.key==="."&&L.minimized;
+          recomputeHot();
+          if(!isRestore){
+            if(!panelHotRef.current)return;
+            const t=e.target;
+            if(t&&(t.tagName==="INPUT"||t.tagName==="TEXTAREA"||t.isContentEditable))return;
+          }
+          const handle=fn=>{e.preventDefault();e.stopPropagation();fn&&fn();};
+          switch(e.key){
+            case"a":case"A": // Accept changes (same enabled condition as the Accept button)
+              handle(()=>{if(L.active&&!L.acceptDisabled&&L.acceptState!=="saving"&&L.acceptState!=="done")L.onAccept&&L.onAccept();});
+              break;
+            case"Backspace": // Reset values
+              handle(()=>{if(L.active)L.resetOverrides&&L.resetOverrides();});
+              break;
+            case"c":case"C":{ // Copy values — only when no text is selected (native copy wins otherwise)
+              const sel=window.getSelection();
+              if(sel&&!sel.isCollapsed)return;
+              handle(()=>{if(L.active)L.copyValues&&L.copyValues();});
+              break;}
+            case"r":case"R": // Toggle Refine panel
+              handle(()=>{if(L.active)L.openRefine&&L.openRefine();});
+              break;
+            case"k":case"K": // Open transition picker
+              handle(()=>{if(L.active)L.setPickOpen&&L.setPickOpen(true);});
+              break;
+            case"ArrowUp":
+            case"ArrowDown":{ // Previous / next transition
+              const list=L.entries||[];
+              if(!list.length)break;
+              const dir=e.key==="ArrowUp"?-1:1;
+              const cur=L.active?list.findIndex(x=>x.id===L.active.id):-1;
+              let ni=cur<0?(dir>0?0:list.length-1):cur+dir;
+              ni=Math.max(0,Math.min(list.length-1,ni));
+              if(list[ni])handle(()=>L.setActiveId&&L.setActiveId(list[ni].id));
+              break;}
+            case".": // Minimize / restore panel
+              handle(()=>L.setMinimized&&L.setMinimized(v=>!v));
+              break;
+          }
+        };
+        window.addEventListener("keydown",onKey);
+        return()=>window.removeEventListener("keydown",onKey);
+      },[recomputeHot]);
       const gate = !live
         ? (llmAvailable===null ? "loading" : "blocked")
         : "ready";
       return h(React.Fragment,null,
-        render&&h("div",{className:"t-panel-slide","data-timeline-panel":true,
+        render&&h("div",{className:"t-panel-slide","data-timeline-panel":true,ref:panelRootRef,
+            onMouseEnter:()=>{hoveredRef.current=true;},onMouseLeave:()=>{hoveredRef.current=false;},
             "data-open":panelOpen?"true":"false","data-phase":phase,style:{height:panelHeight+"px"}},
           h("div",{className:cx("tl-resize-handle",resizing&&"dragging"),onMouseDown:startResize,title:"Drag to resize"}),
           h("div",{className:"tl-panel-body"},
             gate==="ready"
               ? h(React.Fragment,null,
-                  h("div",{className:"tl-panel-main"},
-                    h(Header,{entries,active,onSelect:setActiveId,onReset:resetOverrides,onCopy:copyValues,copied,
-                      snap,setSnap,onMinimize:()=>setMinimized(true),onRefine:openRefine,refineActive:refineOpen,
-                      onAccept,acceptState,acceptDisabled:computeChanges(active).length===0,acceptError,
-                      scanning:groupScanState==="scanning",onRescan:rescanTransitions}),
-                    active
-                      ?h(Body,{entry:active,onPropChange:(prop,o)=>setPropOverride(prop,o),snap})
-                      :h("div",{className:"tl-empty"},"Select a transition to inspect and edit it")),
-                  h(RefinePanel,{open:refineOpen,onClose:()=>setRefineOpen(false),phase:refinePhase,label:refineLabel,
-                    refineType,onType:changeRefineType,suggestions:refineSuggestions,summary:refineSummary,error:refineError,
-                    appliedIds,onApply:applySuggestion,onApplyAll:applyAllSuggestions,
+            h("div",{className:"tl-panel-main"},
+              h(Header,{entries,active,onSelect:setActiveId,onReset:resetOverrides,onCopy:copyValues,copied,
+                snap,setSnap,onMinimize:()=>setMinimized(true),onRefine:openRefine,refineActive:refineOpen,
+                onAccept,acceptState,acceptDisabled:computeChanges(active).length===0,acceptError,
+                scanning:groupScanState==="scanning",onRescan:rescanTransitions,pick:pickOpen,setPick:setPickOpen}),
+              active
+                ?h(Body,{entry:active,onPropChange:(prop,o)=>setPropOverride(prop,o),snap})
+                :h("div",{className:"tl-empty"},"Select a transition to inspect and edit it")),
+            h(RefinePanel,{open:refineOpen,onClose:()=>setRefineOpen(false),phase:refinePhase,label:refineLabel,
+              refineType,onType:changeRefineType,suggestions:refineSuggestions,summary:refineSummary,error:refineError,
+              appliedIds,onApply:applySuggestion,onApplyAll:applyAllSuggestions,
                     mode:refineMode,onMode:changeRefineMode,llmAvailable,cliInstalled,onStart:startScan,
                     lanes:active?.effectiveTimings||[]}))
               : h("div",{className:"tl-panel-main"},
@@ -3234,21 +3830,57 @@
                         "Please run the ",h("code",{className:"tl-code"},"/refine live"),
                         " command in your agent to enable live features, such as scanning and refining transitions.")))),
             toast&&createPortal(
-              h("div",{className:"tl-toast-wrap","aria-live":"polite"},
+              h("div",{className:"tl-toast-wrap","data-tl-ui":"","aria-live":"polite"},
                 h("div",{className:cx("tl-toast",toast.closing&&"is-closing")},
                   h("span",{className:"tl-toast-ic"},
                     toast.loader?h(DotmLoader):h(Ic,{name:"accept",size:14})),
-                  h("span",null,toast.msg))),
+                  toast.loader
+                    ? h("span",{className:"t-shimmer tl-scan-shimmer","data-text":toast.msg},toast.msg)
+                    : h("span",null,toast.msg))),
               document.body),
           ),
         ),
-        minimized&&h("div",{className:"tl-pill",onClick:()=>setMinimized(false)},
+        minimized&&h("div",{className:"tl-pill","data-tl-ui":"",onClick:()=>setMinimized(false)},
           h("span",{className:"tl-pill-label"},"Transitions"),
           h("span",{className:cx("tl-pill-count",String(entries.length).length===1&&"is-single")},entries.length)),
       );
     }
 
     // ── demo boxes ──
+    // Hardcoded grouping — the transitions.dev agent's initial scan of this demo
+    // (run once via the live relay), baked in so the panel groups the morph
+    // instantly with NO relay/agent round-trip. Member labels are cleaned up from
+    // the agent's output ("Morph container"→"Container", "Morph menu"→"Menu panel").
+    // Edit here if the morph's transitions change, or delete window.__TX_SEED_GROUPS
+    // to fall back to a live agent scan. Shape mirrors relay.mjs buildScanPrompt's
+    // groups[] (the same structure TransitionRegistry.setGroups consumes). This is
+    // below the inject CUT_MARKER, so it never ships in the injected/website build.
+    const _mEO="cubic-bezier(0.22, 1, 0.36, 1)";    // smooth ease-out (open)
+    const _mEM="cubic-bezier(0.34, 1.25, 0.64, 1)"; // morph ease (close settle)
+    const _mpt=(property,durationMs,easing)=>({property,durationMs,delayMs:0,easing});
+    const MORPH_SEED_GROUPS=[
+      {id:"morph",label:"Plus \u2192 menu morph",component:null,phases:[
+        {id:"morph:open",phase:"open",label:"Open",stateTarget:".t-morph",fromState:null,toState:'[data-open="true"]',members:[
+          {id:"morph-container",label:"Container",selector:".t-morph",propertyTimings:[
+            _mpt("width",250,_mEO),_mpt("height",250,_mEO),_mpt("border-radius",250,_mEO)]},
+          {id:"morph-plus",label:"Plus button",selector:".t-morph .t-morph-plus",propertyTimings:[
+            _mpt("opacity",200,_mEO),_mpt("transform",350,_mEO),_mpt("filter",200,_mEO)]},
+          {id:"morph-menu",label:"Menu panel",selector:".t-morph .t-morph-menu",propertyTimings:[
+            _mpt("opacity",200,_mEO),_mpt("transform",350,_mEO),_mpt("filter",200,_mEO)]}]},
+        {id:"morph:close",phase:"close",label:"Close",stateTarget:".t-morph",fromState:'[data-open="true"]',toState:null,members:[
+          {id:"morph-container",label:"Container",selector:".t-morph",propertyTimings:[
+            _mpt("width",400,_mEM),_mpt("height",350,_mEM),_mpt("border-radius",350,_mEM)]},
+          {id:"morph-plus",label:"Plus button",selector:".t-morph .t-morph-plus",propertyTimings:[
+            _mpt("opacity",200,_mEO),_mpt("transform",350,_mEO),_mpt("filter",200,_mEO)]},
+          {id:"morph-menu",label:"Menu panel",selector:".t-morph .t-morph-menu",propertyTimings:[
+            _mpt("opacity",200,_mEO),_mpt("transform",350,_mEO),_mpt("filter",200,_mEO)]}]}]},
+      {id:"morph-item",label:"Menu item hover",component:null,phases:[
+        {id:"morph-item:hover",phase:"hover",label:"Hover",stateTarget:".t-morph-menu button.morph-item",fromState:null,toState:":hover",members:[
+          {id:"morph-item-bg",label:"Menu item",selector:".t-morph-menu button.morph-item",propertyTimings:[
+            _mpt("background",120,"ease")]}]}]},
+    ];
+    if(typeof window!=="undefined")window.__TX_SEED_GROUPS=MORPH_SEED_GROUPS;
+
     // Plus → menu morph — transitions.dev (20-plus-menu-morph.md). The trigger
     // button morphs into the panel it opens; CSS owns the morph, JS only flips
     // data-open and mirrors it to aria-expanded, closing on outside-click / Escape.
@@ -3387,9 +4019,20 @@
       // to show them for testing. (This whole block is below the inject CUT_MARKER,
       // so it never ships in the injected build.)
       const showControls=(()=>{try{return new URLSearchParams(location.search).has("controls");}catch(e){return false;}})();
+      // TESTING ONLY (not part of the tool): top-right toggle to hide the demo
+      // page content so the panel can be inspected against a blank page.
+      const[demoHidden,setDemoHidden]=useState(false);
       return h(TimelineCtx.Provider,{value:ctx},
         showControls&&h(PanelControls),
-        h("div",{ref:rootRef,className:"demo-root"},h("div",{className:"demo-header"},h("h1",null,"Timeline Inspector \u2014 Demo"),h("p",null,"A single transitions.dev element: the plus \u2192 menu morph. Its transitions are auto-detected \u2014 select one below, drag the bars to edit timing, then interact with the component itself to preview the change.")),
+        h("button",{type:"button",onClick:()=>setDemoHidden(v=>!v),
+          title:"Testing only: hide/show demo page content",
+          style:{position:"fixed",top:"12px",right:"12px",zIndex:2147483000,
+            height:"28px",padding:"0 10px",borderRadius:"8px",cursor:"pointer",
+            border:"1px solid rgba(0,0,0,0.12)",background:"#fff",color:"#444",
+            font:"500 12px/1 ui-sans-serif,system-ui,sans-serif",
+            boxShadow:"0 1px 3px rgba(0,0,0,0.12)"}},
+          demoHidden?"Show demo":"Hide demo"),
+        h("div",{ref:rootRef,className:"demo-root",style:{display:demoHidden?"none":undefined}},h("div",{className:"demo-header"},h("h1",null,"Timeline Inspector \u2014 Demo"),h("p",null,"A single transitions.dev element: the plus \u2192 menu morph. Its transitions are auto-detected \u2014 select one below, drag the bars to edit timing, then interact with the component itself to preview the change.")),
           h("div",{className:"demo-grid"},h(BoxMorph))),
         h(TimelinePanel));
     }