transitions-refine 0.3.9 → 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);
@@ -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); }
@@ -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); }
@@ -546,7 +562,7 @@
     .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; }
@@ -709,6 +725,12 @@
     /* 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
@@ -716,6 +738,10 @@
        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 */
@@ -728,9 +754,11 @@
       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[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)));
@@ -741,7 +769,8 @@
       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="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);
     }
@@ -887,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
@@ -1018,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; }
@@ -1047,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; }
@@ -1092,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);
@@ -1104,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); }
@@ -1114,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.
@@ -1242,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; } }
@@ -1289,10 +1368,15 @@
       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: a LEADING check is revealed first and pushes the text to
        the right, then the differing SUFFIX cross-blurs. The shared stem "Appl"
@@ -1758,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;
@@ -1860,41 +1946,147 @@
     // 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);
+    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:p1.current;
+        const active=view==="shortcuts"?p2.current:view==="theme"?p3.current:p1.current;
         if(active) slide.style.height=active.offsetHeight+"px";
       });
-      // Escape steps back from the sub-page first, then closes the dropdown —
+      // 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==="shortcuts"){onBack&&onBack();} else {onClose&&onClose();} };
+          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":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));
+      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 }
@@ -2012,14 +2204,21 @@
             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"],
@@ -2067,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){
@@ -2107,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.
@@ -2135,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,
@@ -2162,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,
@@ -2202,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)));
     }
 
@@ -2230,6 +2456,9 @@
       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")
@@ -2308,23 +2537,38 @@
           h(SettingsSlide,{view:settingsView,
             onBack:()=>setSettingsView("main"),
             onClose:()=>{setSetg(false);setSettingsView("main");},
-            // ── main settings page ──
+            // ── main settings page (Figma 580:4723) ──
             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("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("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")),
+                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")},
@@ -2371,35 +2615,54 @@
           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("."))),
+          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},
@@ -2408,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"}),
@@ -2428,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;
@@ -2436,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]);
@@ -3051,35 +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;
-        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;
+        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;
-        scanModeRef.current=mode;
         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;
@@ -3090,7 +3397,15 @@
             if(!live)return;
             if(Array.isArray(job.statusLog))setRefineLog(job.statusLog);
             if(job.status==="done"){
-              const finish=()=>{if(!live)return;setRefineSuggestions((job.result&&job.result.suggestions)||[]);setRefineSummary(job.result&&job.result.summary);setRefinePhase("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));
@@ -3098,10 +3413,10 @@
               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)=>{
@@ -3305,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.
@@ -3353,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]);
@@ -3522,6 +3847,40 @@
     }
 
     // ── 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.
@@ -3660,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));
     }