transitions-refine 0.3.7 → 0.3.9

package/.agents/skills/refine-live/SKILL.md

@@ -197,18 +197,33 @@ separately. You fix that by reading the source. The request looks like:
     "raw": [
       { "label": "div.dropdown-panel", "selector": ".dropdown-panel",
         "properties": ["opacity","transform"],
-        "timings": [{ "property": "opacity", "durationMs": 200, "delayMs": 0, "easing": "ease-out" }] }
+        "timings": [{ "property": "opacity", "durationMs": 200, "delayMs": 0, "easing": "ease-out" }],
+        "cssRules": [
+          ".dropdown .dropdown-panel { opacity: 0; transition: opacity 200ms ease-out 0ms, transform 200ms cubic-bezier(0.22, 1, 0.36, 1) 0ms; }",
+          ".dropdown.is-open .dropdown-panel { opacity: 1; transform: translateY(0); }",
+          ".dropdown.is-closing .dropdown-panel { transition: opacity 150ms ease-in 0ms; opacity: 0; }"
+        ] }
     ]
   }
 }
 ```
 
 **Be fast.** The `raw.timings` are already accurate for each element's *current*
-on-screen state — treat them as ground truth and reuse them verbatim. Read as
-little source as you need: only to (a) group elements into components, (b)
-recover the *opposite* phase (e.g. close) that isn't in the DOM right now, and
-(c) find the toggled state. Don't open files just to re-read timings you were
-already given.
+on-screen state — treat them as ground truth and reuse them verbatim. Most `raw`
+entries also carry **`cssRules`**: the CSS rules harvested live from the page
+(CSSOM) that drive that element across *all* states (base + open + close), with
+`var()` already resolved to concrete values.
+
+**Fast path — prefer `cssRules` over the filesystem.** When an entry has
+`cssRules`, they are authoritative and contain everything you need: the opposite
+phase's timings live on a state-variant selector inside them (e.g.
+`.dd.is-closing .dd-panel`, `.modal[data-closing] .dialog`), and the toggled
+state is visible in those selectors. Derive grouping, phases, toggled state, and
+opposite-phase timings **directly from `cssRules` + `timings`** — do **not**
+glob/grep/read files for any element whose `cssRules` is non-empty; it only
+wastes time. Only fall back to reading source for entries with an empty/missing
+`cssRules` (CORS-locked sheets, styled-components, Tailwind, etc.), and even then
+read the minimum.
 
 Do this:
 
@@ -220,14 +235,16 @@ Do this:
 2. **Split each component into phases** — usually `open` and `close` (a hover-only
    component can be a single phase). The phase matching the current DOM reuses the
    provided timings; the *opposite* phase often lives on a different selector
-   (`.is-open` vs `.is-closing`) with different timings — read source for that one.
-   Report **both** even though only one is in the DOM right now.
+   (`.is-open` vs `.is-closing`) with different timings — take it from the entry's
+   `cssRules` (or, only if it has none, read source). Report **both** even though
+   only one is in the DOM right now.
 3. **List each phase's members** — the elements that animate in that phase. Give
    each a stable `id`, a human `label`, a live-resolvable CSS `selector`, an
    optional `toState` hint (the class/attribute that drives the phase, e.g.
    `.is-open`), and its `propertyTimings`. For the current-state phase, **copy the
    provided `raw.timings` verbatim**; for the opposite phase, **quote the real
-   timings from source — never invent.**
+   timings from the entry's `cssRules`** (already var()-resolved) — or from source
+   if it has none — **never invent.**
 4. **Post the groups** (this completes the job):
 
    ```bash

package/demo.html

@@ -244,7 +244,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; } }
@@ -369,7 +369,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 ── */
@@ -440,7 +440,9 @@
     /* ── value field (slider + input) — exact Figma "Value slider and input" ── */
     .tl-field-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
     .tl-field { position: relative; flex: 1; min-width: 0; height: 32px; border-radius: 8px;
-      background: var(--c-field-bg); transition: box-shadow 0.12s ease; }
+      background: var(--c-field-bg); transition: box-shadow 0.12s ease, background 0.12s ease; }
+    /* match the chevron stepper's hover wash so the whole field reads as one control */
+    .tl-field:hover:not(.is-editing) { background: var(--c-sec-h); }
     /* focused: dual inset ring (Figma Focused state) */
     .tl-field.is-editing { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14), inset 0 0 0 0.5px rgba(255,255,255,0.06); }
     /* inner slider fill — Figma button/tiny: soft drop shadow + inset ring give the
@@ -520,15 +522,17 @@
       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;
       transition: background 0.12s ease; }
-    .tl-select:hover { background: rgba(170,170,170,0.2); }
-    .tl-select.is-open { background: rgba(170,170,170,0.2); }
+    .tl-select:hover { background: var(--c-sec-h); }
+    .tl-select.is-open { background: var(--c-sec-h); }
     .tl-select:disabled { opacity: 0.5; cursor: default; }
     .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; }
@@ -536,9 +540,9 @@
        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;
@@ -590,6 +594,27 @@
       transition: color 0.12s ease; }
     .tl-preview-play:hover { color: #171717; }
     .tl-preview-play:active { color: var(--c-blue); }
+    /* Play ⟷ Pause: cross-blur text swap — same mechanism as the index
+       Copy code → 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. */
+    .tl-play-swap { position: relative; display: inline-block; vertical-align: baseline;
+      line-height: 18px; width: var(--pw-a, auto);
+      transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1); }
+    .tl-play-swap[data-state="pause"] { width: var(--pw-b, auto); }
+    .tl-play-label { 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-play-a { display: inline-block; }
+    .tl-play-b { position: absolute; top: 0; left: 0; }
+    .tl-play-swap .tl-play-a { opacity: 1; filter: blur(0); }
+    .tl-play-swap .tl-play-b { opacity: 0; filter: blur(2px); }
+    .tl-play-swap[data-state="pause"] .tl-play-a { opacity: 0; filter: blur(2px); }
+    .tl-play-swap[data-state="pause"] .tl-play-b { opacity: 1; filter: blur(0); }
+    @media (prefers-reduced-motion: reduce) {
+      .tl-play-swap, .tl-play-label { transition: none !important; }
+    }
     /* position-preview track — Figma 580:9117: dot + dashed rail inside a
        #f6f6f7 rounded card (58px tall, 21px horizontal inset for the dot) */
     .tl-preview-track { height: 58px; background: #f6f6f7; border-radius: 8px;
@@ -659,7 +684,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-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; }
@@ -681,6 +709,70 @@
     /* trailing chevron on link rows (Figma 581:2828 — #696969 right chevron) */
     .tl-menu-chevr { display: flex; flex: none; color: #696969; }
 
+    /* ── 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;
+      --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"] { --t-page-from-x: var(--page-slide-distance); }
+    .tl-set-slide .t-page {
+      position: absolute; top: 0; left: 0; right: 0;
+      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"] {
+      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;
@@ -783,6 +875,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
@@ -874,7 +968,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). */
@@ -942,8 +1036,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; }
@@ -1029,7 +1125,7 @@
        label and the icon+status; whichever is hidden fades out with blur+scale.
        overflow:hidden + nowrap keep the status copy on a single line while the
        box is still narrow mid-morph. */
-    .tl-scan-content { position: relative; z-index: 1; display: grid; width: 100%; height: 100%;
+    .tl-scan-content { position: relative; z-index: 4; display: grid; width: 100%; height: 100%;
       min-width: 0; overflow: hidden; }
     .tl-scan-face { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px;
       min-width: 0; white-space: nowrap;
@@ -1051,8 +1147,14 @@
        position:relative on its [data-beam] container (and it lands later in the
        DOM, so it would win at equal specificity). Raise specificity here so the
        beam stays an absolute overlay filling the button instead of collapsing
-       into flow as a flex sibling (which hid the beam and skewed the width). */
-    .tl-scan-morph .tl-scan-beam { position: absolute; inset: 0; z-index: 0;
+       into flow as a flex sibling (which hid the beam and skewed the width).
+       z-index:3 lifts the beam ABOVE the box's 1px hairline (the .is-scanning
+       ::after `inset 0 0 0 1px` ring at z-index:2). The beam's own stroke is a
+       1px ring at inset 0 with the same radius, so its travelling light now lands
+       pixel-for-pixel ON the hairline instead of being occluded by it — leaving
+       only the diffuse bloom (which read as a thick, offset border). The face
+       content sits at z-index:4 so the glow never washes over the label/status. */
+    .tl-scan-morph .tl-scan-beam { position: absolute; inset: 0; z-index: 3;
       border-radius: inherit; pointer-events: none;
       animation: tl-fade-in 360ms var(--resize-ease) both; }
     /* Beam radius is auto-detected from this fill child; inherit keeps it locked
@@ -1072,33 +1174,8 @@
     .tl-gate-text { margin: 4px 0 0; max-width: 250px; font-size: 13px; font-weight: 400; line-height: 21px;
       color: #676767; text-wrap: pretty; }
     .tl-gate-text .tl-code { color: #4b4b4b; }
-    /* "Agent is scanning your transitions" — pill with dot-matrix loader + a
-       line-style border beam tracing the capsule edge, with a subtext below. */
-    .tl-gate-pill-wrap { position: relative; }
-    .tl-gate-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
-      height: 36px; padding: 6px 12px; border-radius: 36px; background: #fff; color: #17181c;
-      font-size: 13px; font-weight: 400; line-height: 14px; white-space: nowrap;
-      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(196,196,196,0.10); }
-    .tl-gate-pill .tl-dotm { color: #17181c; }
-    .tl-gate-pill-wrap .tl-gate-beam { position: absolute; inset: 0; z-index: 0; border-radius: 36px;
-      pointer-events: none; animation: tl-fade-in 360ms var(--resize-ease, cubic-bezier(0.22,1,0.36,1)) both; }
-    .tl-gate-beam-fill { display: block; width: 100%; height: 100%; border-radius: 36px; background: #fff; }
-    .tl-gate-sub { margin: 16px 0 0; max-width: 244px; font-size: 12px; font-weight: 400; line-height: 14px;
-      color: #6f6f6f; text-wrap: pretty; }
-    /* recovery actions when a scan errored/timed out — never trap the panel */
-    .tl-gate-actions { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; }
-    .tl-gate-btn { height: 32px; padding: 0 14px; border: 0; border-radius: 60px; cursor: pointer;
-      font: 500 12px/14px inherit; color: #2c2c2c; background: #f3f3f3; white-space: nowrap;
-      box-shadow: 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);
-      transition: background 140ms cubic-bezier(0.4,0,0.2,1); }
-    .tl-gate-btn:hover { background: #ececec; }
-    .tl-gate-btn:active { background: #e6e6e6; }
-    .tl-gate-btn-primary { color: #fff; background: #0a84ff;
-      box-shadow: 0 0 0 1px rgba(0,101,208,0.10) inset, 0 -1px 0 0 rgba(3,66,142,0.15) inset, 0 1px 3px 0 rgba(4,41,117,0.08); }
-    .tl-gate-btn-primary:hover { background: #0a78e6; }
     @media (prefers-reduced-motion: reduce) {
-      .tl-gate, .tl-gate-pill-wrap .tl-gate-beam { animation: none !important; }
-      .tl-gate-btn { transition: none !important; } }
+      .tl-gate { animation: none !important; } }
     /* dot-matrix loader — ported from @dotmatrix/dotm-square-14
        (github.com/zzzzshawn/matrix, MIT). A 5×5 dot grid cross-fades through four
        frame masks in the sequence 0→1→2→3→2→1, dot opacities x=1 / o=0.52 / .=0.08.
@@ -1125,7 +1202,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} }
-    .tl-scanning-row { display: inline-flex; align-items: center; gap: 6px; }
+    /* 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);
+      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;
@@ -1208,33 +1294,57 @@
     /* 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.is-applied svg path { stroke: var(--c-text); }
-    /* card resize (transitions.dev 01-card-resize): width tween on Apply -> Applied.
-       250ms cubic-bezier(0.22,1,0.36,1); width is driven explicitly from JS. */
-    .tl-pill-btn.tl-apply-btn {
-      transition: background 0.12s ease, scale 0.12s ease, opacity 0.12s ease,
-                  width 250ms cubic-bezier(0.22, 1, 0.36, 1);
-      will-change: width; }
-    /* success check (transitions.dev 10-success-check): fade + rotate + Y-bob +
-       blur on the wrapper, stroke-draw on the path. GRAY stroke. */
-    .tl-sug-check { display: inline-flex; transform-origin: center; opacity: 0;
-      will-change: transform, opacity, filter; }
+    /* 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-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-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. 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
        11.19223 L12 4.97001" (~12.03 user units, rounded up to 13). JS also sets it
        inline per-render via getTotalLength() for sub-pixel safety. */
     .tl-sug-check svg path { stroke-dasharray: 13; stroke-dashoffset: 13; }
     .tl-sug-check[data-state="in"] {
-      animation:
-        tl-check-fade   500ms cubic-bezier(0.22, 1, 0.36, 1)   forwards,
-        tl-check-rotate 500ms cubic-bezier(0.22, 1, 0.36, 1)   forwards,
-        tl-check-blur   500ms cubic-bezier(0.22, 1, 0.36, 1)   forwards,
-        tl-check-bob    500ms cubic-bezier(0.34, 1.35, 0.64, 1) forwards; }
+      animation: tl-check-fade 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
     .tl-sug-check[data-state="in"] svg path {
       animation: tl-check-draw 500ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards; }
     @keyframes tl-check-fade   { from { opacity: 0; } to { opacity: 1; } }
-    @keyframes tl-check-rotate { from { transform: rotate(80deg); } to { transform: rotate(0deg); } }
-    @keyframes tl-check-blur   { from { filter: blur(10px); } to { filter: blur(0); } }
-    @keyframes tl-check-bob    { from { translate: 0 40px; } to { translate: 0 0; } }
     @keyframes tl-check-draw   { to { stroke-dashoffset: 0; } }
     /* results action bar (Figma node 581:6285): white sticky bar with top hairline
        holding two equal-width pill buttons (Apply all + Scan again). */
@@ -1259,6 +1369,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; }
@@ -1511,7 +1622,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());
@@ -1536,6 +1650,59 @@
       _sel(el){if(el.id)return"#"+el.id;const p=[];let c=el,d=0;while(c&&d<3){let s=c.tagName.toLowerCase();if(c.id){p.unshift("#"+c.id);break;}if(c.className&&typeof c.className==="string"){const cls=c.className.trim().split(/\s+/)[0];if(cls)s+="."+cls;}p.unshift(s);c=c.parentElement;d++;}return p.join(" > ");}
     }
 
+    // ── CSSOM hint harvest ──
+    // The scan's slowest part isn't reasoning — it's the agent NOT knowing where
+    // the source lives, so it globs the whole tree, greps, and wanders into wrong
+    // files (this explodes on real/large repos). We sidestep that: for each
+    // detected element we pull the CSS rules that drive it across ALL states
+    // (base + open + close) straight from the live stylesheets via CSSOM, resolve
+    // var() to concrete values, and hand them to the agent inline. With these the
+    // agent groups + recovers the opposite phase from the payload alone and never
+    // touches the filesystem. Falls back to source-reading when empty (CORS-locked
+    // sheets, styled-components/Tailwind, etc.).
+    const HINT_MAX_RULES = 16;       // per element — base + a few state variants
+    const HINT_MAX_RULE_LEN = 600;   // chars per rule, trimmed
+    function harvestCssHints(entry){
+      try{
+        const refs=(entry.bindings&&entry.bindings.elements)||[];
+        let el=null;
+        for(const r of refs){const e=r&&r.deref&&r.deref();if(e){el=e;break;}}
+        if(!el)return [];
+        // Own classes are the precise anchor: every state variant that targets
+        // this element (`.dd.is-open .dd-panel`, `.dd[data-open] .dd-panel`) still
+        // names the element's own leaf class, so matching on it scopes tightly to
+        // this component without dragging in unrelated utility-class rules.
+        const own=(typeof el.className==="string"?el.className.trim().split(/\s+/):Array.from(el.classList||[])).filter(Boolean);
+        if(!own.length)return [];
+        const esc=s=>s.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");
+        const tokRes=own.map(c=>new RegExp("\\."+esc(c)+"(?![\\w-])"));
+        const matchTok=sel=>tokRes.some(re=>re.test(sel));
+        const cs=getComputedStyle(el);
+        const resolveVars=txt=>txt.replace(/var\(\s*(--[\w-]+)\s*(?:,[^()]*)?\)/g,(m,v)=>{const r=cs.getPropertyValue(v).trim();return r||m;});
+        const out=[];const seen=new Set();
+        const collect=list=>{
+          for(const rule of Array.from(list||[])){
+            if(out.length>=HINT_MAX_RULES)return;
+            // @media / @supports etc. — recurse into nested rules.
+            if(rule.cssRules&&rule.selectorText===undefined){collect(rule.cssRules);continue;}
+            const sel=rule.selectorText;
+            if(!sel||!matchTok(sel))continue;
+            let txt=rule.cssText;if(!txt)continue;
+            txt=resolveVars(txt).replace(/\s+/g," ").trim();
+            if(txt.length>HINT_MAX_RULE_LEN)txt=txt.slice(0,HINT_MAX_RULE_LEN)+" …}";
+            if(seen.has(txt))continue;seen.add(txt);
+            out.push(txt);
+          }
+        };
+        for(const sheet of Array.from(document.styleSheets||[])){
+          if(out.length>=HINT_MAX_RULES)break;
+          let rules;try{rules=sheet.cssRules;}catch{continue;} // cross-origin → skip
+          collect(rules);
+        }
+        return out;
+      }catch{return [];}
+    }
+
     // ── hooks ──
     const TimelineCtx = createContext(null);
     function useReg(){const{registry}=useContext(TimelineCtx);return useSyncExternalStore(useCallback(cb=>registry.subscribe(cb),[registry]),useCallback(()=>registry.getAll(),[registry]),useCallback(()=>registry.getAll(),[registry]));}
@@ -1676,7 +1843,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);
     }
 
@@ -1687,6 +1854,32 @@
         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,onBack,onClose}){
+      const slideRef=useRef(null), p1=useRef(null), p2=useRef(null);
+      useLayoutEffect(()=>{
+        const slide=slideRef.current; if(!slide) return;
+        const active=view==="shortcuts"?p2.current:p1.current;
+        if(active) slide.style.height=active.offsetHeight+"px";
+      });
+      // Escape steps back from the 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==="shortcuts"){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":view==="shortcuts"?"2":"1"},
+        h("div",{ref:p1,className:"tl-set-page t-page","data-page-id":"1","aria-hidden":view==="shortcuts"},mainPage),
+        h("div",{ref:p2,className:"tl-set-page t-page","data-page-id":"2","aria-hidden":view!=="shortcuts"},shortcutsPage));
+    }
+
     // ── 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).
@@ -1753,51 +1946,71 @@
       const names=[...new Set(matches.map(t=>t.member))];
       return names.length===1?names[0]:matches[0].member;
     }
-    // Apply button — card resize (transitions.dev 01) tweens the width on
-    // Apply -> Applied, and the gray checkmark plays the success check (10):
-    // fade + rotate + Y-bob + blur on the wrapper, stroke-draw on the path.
-    // The same <button> node is reused across states so width can tween.
+    // 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 lastW=useRef(0);     // width captured while showing "Apply"
       const prev=useRef(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 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(()=>{});
+      },[]);
+      // drive the stroke-draw: set exact dasharray, and play on the flip to applied.
+      // already-applied items mount fully drawn (data-state stays "in", no replay).
       useLayoutEffect(()=>{
         const btn=ref.current;if(!btn)return;
+        const chk=btn.querySelector(".tl-sug-check");
         const justApplied=applied&&!prev.current;
-        if(applied){
-          const chk=btn.querySelector(".tl-sug-check");
-          if(chk){
-            const path=chk.querySelector("svg path");
-            if(path){ const len=Math.ceil(path.getTotalLength());   // exact path length
-              path.style.strokeDasharray=len; path.style.strokeDashoffset=len; }
+        if(chk){
+          const path=chk.querySelector("svg path");
+          if(path){ const len=Math.ceil(path.getTotalLength());   // exact path length
+            path.style.strokeDasharray=len; path.style.strokeDashoffset=len; }
+          if(applied){
             if(justApplied){
-              // card-resize: explicit from(old "Apply") -> to(new auto) width tween
-              const to=btn.getBoundingClientRect().width, from=lastW.current;
-              if(from&&to&&Math.abs(from-to)>0.5){
-                btn.style.width=from+"px";
-                void btn.offsetWidth;          // reflow so the tween starts from `from`
-                btn.style.width=to+"px";
-                const onEnd=(e)=>{ if(e.target===btn&&e.propertyName==="width"){
-                  btn.style.width=""; btn.removeEventListener("transitionend",onEnd); } };
-                btn.addEventListener("transitionend",onEnd);
-              }
-              // success-check replay: reset, force reflow, play from offset 0
+              // replay from offset 0: reset, force reflow, play
               chk.setAttribute("data-state","out");
               void chk.offsetWidth;
               chk.setAttribute("data-state","in");
             } else { chk.setAttribute("data-state","in"); }
-          }
-        } else { lastW.current=btn.getBoundingClientRect().width; }
+          } else { chk.setAttribute("data-state","out"); }
+        }
         prev.current=applied;
       });
-      if(applied) return h("button",{ref,className:"tl-pill-btn tl-apply-btn is-applied",disabled:true},
-        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");
-      return h("button",{ref,className:"tl-pill-btn tl-apply-btn",onClick:onApply},"Apply");
+      return h("button",{ref,
+        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-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"})))),
+          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}){
       const ref=useRef(null);
@@ -1840,7 +2053,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));
@@ -2013,9 +2226,24 @@
       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"
+      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
@@ -2037,10 +2265,14 @@
       const noMatches=!!ql&&fGroups.length===0&&fFlat.length===0;
       const phaseItem=(e)=>h(MenuItem,{key:e.id,active:active&&e.id===active.id,onClick:()=>{onSelect(e.id);setPick(false);},
         right:active&&e.id===active.id&&h("span",{className:"tl-menu-check"},h(Ic,{name:"accept"}))},
-        h("span",null,e.phaseLabel,h("span",{className:"tl-menu-dim"}," "+e.durationMs+"ms")));
+        h("span",{className:"tl-menu-stack"},
+          h("span",{className:"tl-menu-text"},e.phaseLabel),
+          h("span",{className:"tl-menu-dim tl-menu-sub"},e.durationMs+"ms")));
       const flatItem=(e)=>h(MenuItem,{key:e.id,active:active&&e.id===active.id,onClick:()=>{onSelect(e.id);setPick(false);},
         right:active&&e.id===active.id&&h("span",{className:"tl-menu-check"},h(Ic,{name:"accept"}))},
-        h("span",null,e.label,h("span",{className:"tl-menu-dim"}," "+e.durationMs+"ms")));
+        h("span",{className:"tl-menu-stack"},
+          h("span",{className:"tl-menu-text"},e.label),
+          h("span",{className:"tl-menu-dim tl-menu-sub"},e.durationMs+"ms")));
       return h("div",{className:"tl-header"},
         h("span",{className:"tl-header-label"},"Selected"),
         h("button",{ref:pickRef,className:cx("tl-ghost-btn",pick&&"is-active"),disabled:!active,onClick:()=>setPick(v=>!v)},
@@ -2064,26 +2296,51 @@
                   ...fFlat.map(flatItem))),
         h("span",{className:"tl-header-count"},
           scanning
-            ? h("span",{className:"tl-scanning-row"},h(DotmLoader),h("span",null,"Scanning transitions…"))
+            ? h("span",{className:"t-tt-wrap"},
+                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 ──
+            mainPage:h(React.Fragment,null,
+              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(MenuItem,{onClick:()=>setSettingsView("shortcuts"),
+                right:h("span",{className:"tl-menu-chevr"},h(Ic,{name:"chevronr",size:16}))},"Keyboard shortcuts"),
+              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")),
+            // ── 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"},
@@ -2095,8 +2352,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"}}),
@@ -2110,7 +2368,10 @@
               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",role:"tooltip"},"Minimize",ttHint("."))),
       );
     }
 
@@ -2227,12 +2488,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.
-    const CURVE = { VBW:269, VBH:150, PAD_X:30, PAD_Y:42 };
+    // 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
@@ -2243,6 +2504,7 @@
       const trackRef = useRef(null);
       const dotRef = useRef(null);
       const svgRef = useRef(null);
+      const playSwapRef = useRef(null);
       const [playing, setPlaying] = useState(false);
       const [open, setOpen] = useState(false);
       const safeEasing = (!easing || easing.trim()==="") ? "linear" : easing;
@@ -2316,6 +2578,20 @@
         return ()=>{ cancelled = true; if(anim){try{anim.cancel();}catch{}} if(timer)clearTimeout(timer); };
       },[playing, open, safeEasing, dur]);
 
+      // measure both labels once the panel is open (fonts/layout ready) and
+      // pin the two widths so the slot can tween between them on toggle.
+      useEffect(()=>{
+        if(!open) return;
+        const sw = playSwapRef.current; if(!sw) return;
+        const measure = ()=>{
+          const a = sw.querySelector(".tl-play-a"), b = sw.querySelector(".tl-play-b");
+          if(a) sw.style.setProperty("--pw-a", Math.ceil(a.getBoundingClientRect().width)+"px");
+          if(b) sw.style.setProperty("--pw-b", Math.ceil(b.getBoundingClientRect().width)+"px");
+        };
+        measure();
+        if(document.fonts&&document.fonts.ready) document.fonts.ready.then(measure).catch(()=>{});
+      },[open]);
+
       const p1x = fx(cb[0]), p1y = fy(cb[1]), p2x = fx(cb[2]), p2y = fy(cb[3]);
 
       return h("div",{className:"tl-preview","data-open":open?"true":"false"},
@@ -2346,7 +2622,10 @@
               ),
               h("div",{className:"tl-preview-sub"},
                 h("span",{className:"tl-preview-sub-label"},"Position preview"),
-                h("button",{className:"tl-preview-play",onClick:()=>setPlaying(p=>!p)},playing?"Pause":"Play"),
+                h("button",{className:"tl-preview-play",onClick:()=>setPlaying(p=>!p)},
+                  h("span",{ref:playSwapRef,className:"tl-play-swap","data-state":playing?"pause":"play"},
+                    h("span",{className:"tl-play-label tl-play-a"},"Play"),
+                    h("span",{className:"tl-play-label tl-play-b"},"Pause"))),
               ),
               h("div",{className:"tl-preview-track"},
                 h("div",{className:"tl-preview-rail-wrap",ref:trackRef},
@@ -2717,6 +2996,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
@@ -2725,14 +3007,15 @@
       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);
       // ── grouped scan (agent reads source → Open/Close phases) ──
       const[groupScanState,setGroupScanState]=useState("idle"); // idle | scanning | done | error
-      // Escape hatch for the gate: if a scan errors/times out the user can choose
-      // to proceed with the flat (ungrouped) list instead of being trapped.
-      const[skipGrouping,setSkipGrouping]=useState(false);
       const didGroupScanRef=useRef(false);
       const[refineLabel,setRefineLabel]=useState(null);
       const[appliedIds,setAppliedIds]=useState({});
@@ -2770,12 +3053,14 @@
       // "Start scanning" resolves availability first, then posts the job.
       const startScan=useCallback(async()=>{
         if(!active)return;
+        scanStartedAtRef.current=Date.now();
         setRefinePhase("scanning");setRefineLog([]);
         setRefineSuggestions([]);setRefineSummary(null);setRefineError(null);
         setAppliedIds({});setRefineLabel(active.label);setRefineJobId(null);
         const j=await refreshHealth();
         const avail=j?!!j.llmAvailable:false;
         const mode=(refineMode==="llm"&&!avail)?"deterministic":refineMode;
+        scanModeRef.current=mode;
         if(mode!==refineMode)setRefineMode(mode);
         try{
           const et=active.effectiveTimings||[];
@@ -2804,7 +3089,14 @@
             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"){
+              const finish=()=>{if(!live)return;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);
           }catch(e){if(live){setRefineError("Lost connection to the relay.");setRefinePhase("error");}}
@@ -2843,7 +3135,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
@@ -2911,8 +3203,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
@@ -3001,7 +3314,11 @@
         setGroupScanState("scanning");
         const raw=flat.map(e=>({label:e.label,selector:e.bindings&&e.bindings.selector,
           properties:e.properties,
-          timings:(e.baseLanes||[]).map(l=>({property:l.property,durationMs:l.durationMs,delayMs:l.delayMs,easing:l.easing}))}));
+          timings:(e.baseLanes||[]).map(l=>({property:l.property,durationMs:l.durationMs,delayMs:l.delayMs,easing:l.easing})),
+          // CSS rules (base + open + close states) for this element, var()s
+          // resolved — lets the agent recover the opposite phase + toggled state
+          // without reading source. Empty → agent falls back to source reads.
+          cssRules:harvestCssHints(e)}));
         try{
           const{id}=await relayCreateJob({kind:"scan",url:location.href,raw});
           for(let i=0;i<500;i++){
@@ -3027,7 +3344,6 @@
       const rescanTransitions=useCallback(()=>{
         try{localStorage.removeItem(GROUP_STORE_KEY);}catch{}
         registry.clearGroups();
-        setSkipGrouping(false); // re-engage the gate so a fresh scan can be shown
         runGroupScan();
       },[runGroupScan,GROUP_STORE_KEY,registry]);
       // Gate the auto group-scan behind a live agent: the panel stays on the
@@ -3087,35 +3403,98 @@
       // scanned the page's transitions.
       //   loading    → first /health probe pending (blank, avoids a text flash)
       //   blocked    → no live agent → "Before we start" (run /refine live)
-      //   scanning   → live agent, scan in flight → "Agent is scanning…"
-      //   scan-error → scan failed/timed out → recoverable (retry / continue)
-      //   ready      → live + scan settled (done or idle, or user skipped) → real UI
-      // NOTE: "idle" and "error" must NOT keep us on the scanning screen, or a
-      // timed-out scan (e.g. an older /refine-live skill that can't answer scan
-      // jobs) would trap the panel forever with no way out.
+      //   ready      → live agent → the real UI, immediately. The group scan runs
+      //                in the BACKGROUND (no blocking screen); progress shows as a
+      //                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")
-        : groupScanState==="scanning" ? "scanning"
-        : (groupScanState==="error" && !skipGrouping) ? "scan-error"
         : "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"},
@@ -3124,35 +3503,19 @@
                       h("div",{className:"tl-gate-title"},"Before we start"),
                       h("p",{className:"tl-gate-text"},
                         "Please run the ",h("code",{className:"tl-code"},"/refine live"),
-                        " command in your agent to enable live features, such as scanning and refining transitions."))),
-                  gate==="scanning" && h("div",{className:"tl-gate"},
-                    h("div",{className:"tl-gate-col"},
-                      h("div",{className:"tl-gate-pill-wrap"},
-                        h(BorderBeam,{size:"sm",colorVariant:"ocean",theme:"light",borderRadius:18,duration:2.6,saturation:2,brightness:1.6,className:"tl-gate-beam"},
-                          h("span",{className:"tl-gate-beam-fill"})),
-                        h("span",{className:"tl-gate-pill"},
-                          h(DotmLoader),
-                          h("span",{className:"tl-gate-pill-label"},"Agent is scanning your transitions"))),
-                      h("p",{className:"tl-gate-sub"},"Just a moment while we get things ready."))),
-                  gate==="scan-error" && h("div",{className:"tl-gate"},
-                    h("div",{className:"tl-gate-col"},
-                      h("div",{className:"tl-gate-title"},"We couldn’t scan your transitions"),
-                      h("p",{className:"tl-gate-text"},
-                        "The agent didn’t finish grouping. Make sure ",h("code",{className:"tl-code"},"/refine live"),
-                        " is running with the latest skill, then try again — or continue with the ungrouped list."),
-                      h("div",{className:"tl-gate-actions"},
-                        h("button",{className:"tl-gate-btn tl-gate-btn-primary",onClick:rescanTransitions},"Try again"),
-                        h("button",{className:"tl-gate-btn",onClick:()=>setSkipGrouping(true)},"Continue without grouping"))))),
+                        " 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)),
       );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "transitions-refine",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "description": "Live, agent-driven Refine panel for CSS/Motion transitions — injects a timeline + Refine UI and runs transitions.dev suggestions via your coding agent.",
   "type": "module",
   "bin": {

package/server/relay.mjs

@@ -279,19 +279,19 @@ function buildScanPrompt(job) {
   return [
     "You are GROUPING UI transitions by reading the user's SOURCE CODE. A naive DOM scan only sees each element's current computed transition — it cannot tell open from close, and lists related elements separately. Fix that.",
     "",
-    "Raw DOM-detected transitions (JSON). These timings are ALREADY ACCURATE for the component's CURRENT on-screen state — treat them as ground truth, do NOT re-derive them from source:",
+    "Raw DOM-detected transitions (JSON). Each entry's `timings` are ALREADY ACCURATE for the component's CURRENT on-screen state — treat them as ground truth, do NOT re-derive them from source. Most entries also carry `cssRules`: the CSS rules harvested live from the page (CSSOM) that drive that element across ALL states (base + open + close), with var() already resolved to concrete values.",
     JSON.stringify({ url: r.url, raw: r.raw }, null, 2),
     "",
-    "To stay fast, read as little source as you need — only to (a) group elements into components, (b) recover the OPPOSITE phase (e.g. close) that isn't in the DOM right now, and (c) find the toggled state. Do not open files just to re-read timings you were already given.",
+    "FAST PATH — when an entry has `cssRules`, they are AUTHORITATIVE and contain everything you need: the opposite-phase timings live on a state-variant selector inside them (e.g. `.dd.is-closing .dd-panel`, `.modal[data-closing] .dialog`), and the toggled state is visible in those selectors. Derive grouping, phases, toggled state, and opposite-phase timings DIRECTLY from `cssRules` + `timings`. Do NOT glob, grep, or read files for any element whose `cssRules` is non-empty — it only wastes time. ONLY fall back to reading source for entries with an empty/missing `cssRules` (CORS-locked sheets, styled-components, Tailwind, etc.), and even then read the minimum.",
     "",
     "Steps:",
     "1. Identify each animated UI component (dropdown, modal, tooltip, accordion, drawer, toast…). The provided `label`/`selector`/`properties` usually make the grouping obvious; only read source when the grouping is genuinely unclear.",
-    "2. For each component, split into PHASES — typically `open` and `close` (a hover-only component may have a single phase). The phase matching the CURRENT DOM state reuses the provided timings verbatim. The OPPOSITE phase often lives on a different selector (e.g. `.is-open` vs `.is-closing`) with different timings — read source for that one. Report BOTH even though only one is in the DOM right now.",
+    "2. For each component, split into PHASES — typically `open` and `close` (a hover-only component may have a single phase). The phase matching the CURRENT DOM state reuses the provided timings verbatim. The OPPOSITE phase often lives on a different selector (e.g. `.is-open` vs `.is-closing`) with different timings — take it from this element's `cssRules` (or, only if it has none, read source). Report BOTH even though only one is in the DOM right now.",
     "3. PHASE STATE — how the phase is driven (REQUIRED for playback to work). For each phase provide:",
     "   - `stateTarget`: a CSS selector for the ONE element whose class/attribute is toggled to drive the whole phase (e.g. the dropdown root, the `.modal`, the element with `[data-open]`). It MUST resolve in the live DOM RIGHT NOW, in any state — so it must NOT itself contain the toggled state (write `.t-morph`, never `.t-morph[data-open=\"true\"]`).",
     "   - `fromState` and `toState`: the class/attribute on `stateTarget` at the START and END of this phase, as a token: a class `\".is-open\"`, an attribute `\"[data-open=\\\"true\\\"]\"`, or `null`/`\"\"` for the base/no-class state. OPEN usually goes base→open (`fromState:null`, `toState:\".is-open\"`); CLOSE goes open→base (`fromState:\".is-open\"`, `toState:null`). Get the DIRECTION right — open must animate into the open look, close must animate back out.",
     "4. For each phase, list its MEMBER elements (panel, backdrop, the staggered items…). Give each member a stable `id`, a human `label`, a CSS `selector`, and its `propertyTimings`. For the phase that matches the current DOM, COPY each member's `propertyTimings` straight from the provided `raw.timings` (same per-property duration/delay/easing) — don't change numbers you were handed. The member `selector` MUST resolve in the live DOM RIGHT NOW regardless of phase — use the BASE element selector and do NOT bake the phase's toggled class/attribute into it (write `.t-morph .t-morph-plus`, never `.t-morph[data-open=\"true\"] .t-morph-plus`). The toggled state belongs only in the phase's `stateTarget`/`toState`.",
-    "5. TIMINGS ARE PER-PROPERTY. For the OPPOSITE phase you read from source: list one `propertyTimings` entry per animated property with its own duration/delay/easing; resolve CSS custom properties (e.g. `var(--morph-fade-dur)`) to concrete numbers and convert `s`→ms (`0.25s`→250); never emit a `var(...)` or a guess. Open and close usually have DIFFERENT durations/easings. (The current-state phase just reuses the provided numbers.)",
+    "5. TIMINGS ARE PER-PROPERTY. For the OPPOSITE phase (from `cssRules`, or source if none): list one `propertyTimings` entry per animated property with its own duration/delay/easing; `cssRules` already have var() resolved, but if you ever read a raw `var(...)` resolve it to a concrete number, and convert `s`→ms (`0.25s`→250); never emit a `var(...)` or a guess. Open and close usually have DIFFERENT durations/easings. (The current-state phase just reuses the provided numbers.)",
     "",
     "Output ONLY a JSON object — no prose, no markdown fences — shaped exactly like:",
     '{"summary":"Grouped 3 components.","groups":[{"id":"dropdown","label":"Dropdown","component":"src/Dropdown.tsx","phases":[{"id":"dropdown:open","phase":"open","label":"Open","stateTarget":".dropdown","fromState":null,"toState":".is-open","members":[{"id":"panel","label":"Panel","selector":".dropdown .dropdown-panel","propertyTimings":[{"property":"opacity","durationMs":200,"delayMs":0,"easing":"ease-out"},{"property":"transform","durationMs":200,"delayMs":0,"easing":"cubic-bezier(0.22, 1, 0.36, 1)"}]}]},{"id":"dropdown:close","phase":"close","label":"Close","stateTarget":".dropdown","fromState":".is-open","toState":null,"members":[{"id":"panel","label":"Panel","selector":".dropdown .dropdown-panel","propertyTimings":[{"property":"opacity","durationMs":150,"delayMs":0,"easing":"ease-in"},{"property":"transform","durationMs":150,"delayMs":0,"easing":"ease-in"}]}]}]}]}',