transitions-refine 0.3.9 → 0.3.11

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);
@@ -48,7 +51,7 @@
 
       /* transitions.dev — menu dropdown */
       --dropdown-open-dur: 250ms; --dropdown-close-dur: 150ms;
-      --dropdown-pre-scale: 0.97; --dropdown-closing-scale: 0.99;
+      --dropdown-pre-scale: 0.8; --dropdown-closing-scale: 0.99;
       --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
       /* transitions.dev — icon swap */
       --icon-swap-dur: 200ms; --icon-swap-blur: 2px; --icon-swap-start-scale: 0.25; --icon-swap-ease: ease-in-out;
@@ -88,15 +91,15 @@
     /* @inject-skip-start (demo-only page + sample-box styles — excluded from the injected build) */
     body {
       font-family: "Inter", system-ui, -apple-system, sans-serif;
-      background: #fafafa;
+      background: #EEEEEE;
       color: var(--c-text);
       min-height: 100vh;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
 
-    .demo-root { max-width: 900px; margin: 0 auto; padding: 48px 24px 120px; }
-    .demo-header { margin-bottom: 40px; }
+    .demo-root { max-width: 900px; margin: 0 auto; padding: 24px 24px 120px; }
+    .demo-header { margin-bottom: 18px; }
     .demo-header h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: #171717; }
     .demo-header p  { color: var(--c-ruler); font-size: 14px; margin-top: 6px; }
     .demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
@@ -191,6 +194,130 @@
     @media (prefers-reduced-motion: reduce) {
       .t-morph, .t-morph-plus, .t-morph-menu { transition: none !important; }
     }
+
+    /* transitions.dev motion tokens for the extra prototypes (verbatim from
+       05-menu-dropdown.md / 06-modal.md). Demo-only — excluded from the build. */
+    :root {
+      --dropdown-open-dur: 250ms; --dropdown-close-dur: 150ms;
+      --dropdown-pre-scale: 0.8; --dropdown-closing-scale: 0.99;
+      --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
+      --modal-open-dur: 250ms; --modal-close-dur: 150ms;
+      --modal-scale: 0.96; --modal-scale-close: 0.96;
+      --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
+      --modal-overlay-bg: rgba(15, 17, 21, 0.45);
+    }
+
+    /* ── prototype switcher tabs (sliding pill — 16-tabs-sliding.md) ── */
+    .proto-tabs {
+      position: relative; display: inline-flex; align-items: center; gap: 3px;
+      margin-top: 18px; padding: 3px; border-radius: 48px; background: #f1f1f1;
+    }
+    .proto-tab {
+      position: relative; appearance: none; border: 0; background: transparent;
+      height: 30px; padding: 4px 14px; border-radius: 48px; cursor: pointer;
+      font: 500 13px/1 "Inter", system-ui, sans-serif; color: rgba(15,15,15,0.6);
+      z-index: 1; transition: color var(--dropdown-open-dur) var(--dropdown-ease);
+    }
+    .proto-tab:not(.is-active):hover { color: rgba(15,15,15,0.85); }
+    .proto-tab.is-active { color: #0f0f0f; }
+    .proto-tabs-pill {
+      position: absolute; top: 3px; left: 0; height: 30px; width: 0;
+      background: #fff; border-radius: 48px; transform: translateX(0);
+      box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
+      transition:
+        transform var(--dropdown-open-dur) var(--dropdown-ease),
+        width     var(--dropdown-open-dur) var(--dropdown-ease);
+      will-change: transform, width; z-index: 0; pointer-events: none;
+    }
+
+    /* ── prototype: Menu dropdown (05-menu-dropdown.md) ── */
+    .dd-stage { position: relative; min-height: 224px; display: flex; justify-content: center; padding-top: 4px; }
+    .dd { position: relative; display: inline-block; }
+    .dd-trigger {
+      display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
+      font: 500 14px/1 "Inter", system-ui, sans-serif; color: #1b1b1b;
+      background: #fff; border: 0; border-radius: 10px; cursor: pointer;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(0,0,0,0.06), inset 0 -1px 0 rgba(0,0,0,0.10);
+    }
+    .dd-trigger:hover { background: #f9f9f9; }
+    .dd-caret { transition: transform var(--dropdown-open-dur) var(--dropdown-ease); }
+    .dd.is-open .dd-caret { transform: rotate(180deg); }
+    /* recipe surface */
+    .t-dropdown {
+      transform-origin: top left; transform: scale(var(--dropdown-pre-scale));
+      opacity: 0; pointer-events: none;
+      transition:
+        transform var(--dropdown-open-dur) var(--dropdown-ease),
+        opacity   var(--dropdown-open-dur) var(--dropdown-ease);
+      will-change: transform, opacity;
+    }
+    .t-dropdown.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
+    .t-dropdown.is-closing {
+      transform: scale(var(--dropdown-closing-scale)); opacity: 0; pointer-events: none;
+      transition:
+        transform var(--dropdown-close-dur) var(--dropdown-ease),
+        opacity   var(--dropdown-close-dur) var(--dropdown-ease);
+    }
+    .dd-menu {
+      position: absolute; top: calc(100% + 8px); left: 0; min-width: 216px; padding: 6px;
+      background: #fff; border-radius: 12px;
+      box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.05), 0 4px 42px rgba(0,0,0,0.06);
+      z-index: 5;
+    }
+    .dd-title { padding: 6px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #9b9b9b; }
+    .dd-item {
+      display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
+      font: 500 13px/1 "Inter", system-ui, sans-serif; color: #2f2f2f;
+      background: transparent; border: 0; border-radius: 8px; cursor: pointer; text-align: left;
+    }
+    .dd-item:hover { background: #f4f4f5; }
+
+    /* ── prototype: Modal (06-modal.md) ── */
+    .modal-stage {
+      position: relative; height: 240px; border-radius: 12px; overflow: hidden;
+      background: #f6f7f9; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
+      display: grid; place-items: center;
+    }
+    .modal-open-btn {
+      position: relative; z-index: 0; padding: 9px 16px;
+      font: 500 14px/1 "Inter", system-ui, sans-serif; color: #fff;
+      background: #171717; border: 0; border-radius: 10px; cursor: pointer;
+    }
+    .modal-backdrop {
+      position: absolute; inset: 0; z-index: 1; background: var(--modal-overlay-bg);
+      opacity: 0; pointer-events: none; cursor: pointer;
+      transition: opacity var(--modal-open-dur) var(--modal-ease);
+    }
+    .modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
+    .modal-backdrop.is-closing { opacity: 0; transition: opacity var(--modal-close-dur) var(--modal-ease); }
+    .t-modal {
+      position: relative; z-index: 2; width: 264px; padding: 20px; background: #fff;
+      border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.18);
+      transform-origin: center; transform: scale(var(--modal-scale)); opacity: 0; pointer-events: none;
+      transition:
+        transform var(--modal-open-dur) var(--modal-ease),
+        opacity   var(--modal-open-dur) var(--modal-ease);
+      will-change: transform, opacity;
+    }
+    .t-modal.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
+    .t-modal.is-closing {
+      transform: scale(var(--modal-scale-close)); opacity: 0; pointer-events: none;
+      transition:
+        transform var(--modal-close-dur) var(--modal-ease),
+        opacity   var(--modal-close-dur) var(--modal-ease);
+    }
+    .modal-card-title { font-size: 15px; font-weight: 600; color: #171717; }
+    .modal-card-body { margin-top: 6px; font-size: 13px; color: var(--c-ruler); line-height: 1.5; }
+    .modal-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 8px; }
+    .modal-btn { padding: 8px 13px; font: 500 13px/1 "Inter", system-ui, sans-serif; border: 0; border-radius: 8px; cursor: pointer; }
+    .modal-btn.secondary { background: #f1f1f2; color: #2f2f2f; }
+    .modal-btn.secondary:hover { background: #e9e9eb; }
+    .modal-btn.primary { background: #e5484d; color: #fff; }
+    .modal-btn.primary:hover { background: #d93b40; }
+
+    @media (prefers-reduced-motion: reduce) {
+      .proto-tabs-pill, .proto-tab, .dd-caret, .t-dropdown, .modal-backdrop, .t-modal { transition: none !important; }
+    }
     /* @inject-skip-end */
 
     /* ───────────────────── timeline panel ───────────────────── */
@@ -259,10 +386,32 @@
     .tl-pill-count.is-single { width: 20px; padding: 0; }
 
     /* ── header row ── */
+    /* container-type lets the children below respond to the header's own width
+       (the panel is full-viewport-width, so this tracks the viewport too). */
     .tl-header { flex: none; position: relative; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 7.5px 14px;
-      border-bottom: 1px solid var(--c-line); }
-    .tl-header-label { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--c-text-mut2); white-space: nowrap; }
-    .tl-header-count { margin-left: auto; display: inline-flex; align-items: center; font-size: 13px; line-height: 18px; color: var(--c-count); white-space: nowrap; }
+      border-bottom: 1px solid var(--c-line); container-type: inline-size; }
+    .tl-header-label { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--c-text-mut2); white-space: nowrap; flex: none; }
+    /* count is the FIRST thing to give up space (high shrink) and clips to … */
+    .tl-header-count { margin-left: auto; display: inline-flex; align-items: center; font-size: 13px; line-height: 18px; color: var(--c-count); white-space: nowrap;
+      min-width: 0; flex: 0 99 auto; overflow: hidden; }
+    .tl-count-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    /* the transition picker truncates its name SECOND (lower shrink than count) */
+    .tl-header .tl-ghost-btn { min-width: 0; flex: 0 1 auto; }
+    .tl-ghost-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .tl-header .tl-ghost-btn .tl-dim, .tl-header .tl-ghost-chev { flex: none; }
+    /* the right-hand cluster never shrinks or gets pushed off — minimize stays put */
+    .tl-header .tl-icon-btn, .tl-header .tl-sec-btn,
+    .tl-header .tl-accept-btn, .tl-header .tl-refine-btn,
+    .tl-header > .t-tt-wrap { flex: none; }
+    /* still too tight → drop the "Selected" label, then collapse Accept + Refine
+       to circular icon-only buttons (radius is already 60px → perfect circle). */
+    @container (max-width: 540px) {
+      .tl-header-label { display: none; }
+    }
+    @container (max-width: 470px) {
+      .tl-accept-btn .tl-btn-label, .tl-refine-btn .tl-btn-label { display: none; }
+      .tl-accept-btn, .tl-refine-btn { width: 36px; padding: 0; justify-content: center; gap: 0; }
+    }
 
     /* ── buttons ── */
     /* topbar buttons share a fully rounded 60px corner radius */
@@ -327,7 +476,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 +488,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 +561,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 +607,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 +682,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 +708,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 +871,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 +884,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 +900,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 +915,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 +1062,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 +1199,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 +1228,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 +1316,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 +1329,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 +1339,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.
@@ -1210,6 +1435,41 @@
     .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-error { color: var(--c-warn, #c2410c); }
+    .tl-scan-error svg { flex: none; }
+    /* /refine live chip — warns the chat-loop mode bills credits while idle */
+    .tl-live-wrap { display: inline-flex; }
+    .tl-live-chip { display: inline-flex; align-items: center; gap: 6px;
+      height: 22px; padding: 0 4px 0 8px; border-radius: 999px;
+      font-size: 11px; font-weight: 600; line-height: 1; cursor: help;
+      color: #b45309; background: rgba(217,119,6,0.12);
+      border: 1px solid rgba(217,119,6,0.28);
+      /* mount: token dropdown-open feel — 250ms Fast, scale 0.97, smooth ease out */
+      animation: tl-live-in 250ms cubic-bezier(0.22,1,0.36,1) both; }
+    html[data-theme="dark"] .tl-live-chip { color: #fbbf24;
+      background: rgba(251,191,36,0.13); border-color: rgba(251,191,36,0.3); }
+    .tl-live-chip.is-stopped { color: var(--c-count); background: rgba(127,127,127,0.1);
+      border-color: rgba(127,127,127,0.26); padding: 0 8px; }
+    .tl-live-chip.is-stopped svg { flex: none; }
+    .tl-live-dot { width: 7px; height: 7px; border-radius: 50%;
+      background: currentColor; flex: none;
+      animation: tl-live-pulse 1600ms linear infinite; }
+    .tl-live-stop { all: unset; cursor: pointer; font: inherit; font-size: 10px;
+      font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
+      color: inherit; padding: 3px 7px; border-radius: 999px;
+      background: rgba(217,119,6,0.16);
+      transition: background 150ms cubic-bezier(0.22,1,0.36,1); }
+    html[data-theme="dark"] .tl-live-stop { background: rgba(251,191,36,0.18); }
+    .tl-live-stop:hover { background: rgba(217,119,6,0.32); }
+    html[data-theme="dark"] .tl-live-stop:hover { background: rgba(251,191,36,0.34); }
+    .tl-live-stop:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
+    @keyframes tl-live-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
+    @keyframes tl-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
+    @media (prefers-reduced-motion: reduce) {
+      .tl-live-chip { animation: none; }
+      .tl-live-dot { animation: none; }
+      .tl-live-stop { transition: none; }
+    }
     .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) */
@@ -1242,7 +1502,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; } }
@@ -1266,6 +1526,7 @@
     .tl-sug-cat.is-easing   { color: #a830fd; background: rgba(173,68,247,0.06); box-shadow: inset 0 0 0 1px rgba(173,68,247,0.18); }
     .tl-sug-cat.is-duration { color: #3097fd; background: rgba(111,183,255,0.08); box-shadow: inset 0 0 0 1px rgba(48,151,253,0.18); }
     .tl-sug-cat.is-scale    { color: #26953b; background: rgba(38,149,59,0.06);  box-shadow: inset 0 0 0 1px rgba(38,149,59,0.18); }
+    .tl-sug-cat.is-blur     { color: #0e9aa7; background: rgba(14,154,167,0.07); box-shadow: inset 0 0 0 1px rgba(14,154,167,0.20); }
     .tl-sug-cat.is-distance, .tl-sug-cat.is-delay { color: #c35c00; background: rgba(247,152,68,0.06); box-shadow: inset 0 0 0 1px rgba(205,115,36,0.18); }
     .tl-sug-cat.is-replace  { color: #3097fd; background: rgba(111,183,255,0.08); box-shadow: inset 0 0 0 1px rgba(48,151,253,0.18); }
     /* content stack */
@@ -1279,6 +1540,12 @@
     .tl-sug-from { color: #7b7b7b; text-decoration: line-through; }
     .tl-sug-to { color: #1b1b1b; }
     .tl-sug-reason { font-size: 12px; font-weight: 400; line-height: 18px; color: #6d6d6d; }
+    /* "Updates Open + Close" — a recipe swap writes every related phase together */
+    .tl-sug-phases { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px;
+      font-size: 11px; font-weight: 500; line-height: 16px; color: #6d6d6d; }
+    .tl-sug-phase { display: inline-flex; align-items: baseline; gap: 4px;
+      padding: 1px 7px; border-radius: 20px; background: rgba(15,15,15,0.05); color: #4a4a4a; }
+    .tl-sug-phase-dur { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: #1b1b1b; }
     /* shared white pill button (Figma 580:757) — card Apply + bottom-bar actions */
     .tl-pill-btn { align-self: flex-start; box-sizing: border-box; display: inline-flex; align-items: center;
       justify-content: center; gap: 8px; height: 32px; padding: 6px 12px; border: none; cursor: pointer;
@@ -1289,10 +1556,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"
@@ -1570,7 +1842,10 @@
         return out;
       }
       _applyOverrides(baseLanes,po){
-        return baseLanes.map(t=>{const o=po[t.laneId];return {...t,durationMs:o?.durationMs??t.durationMs,delayMs:o?.delayMs??t.delayMs,easing:o?.easing??t.easing,spring:o?.spring??t.spring};});
+        return baseLanes.map(t=>{const o=po[t.laneId]||{};return {...t,durationMs:o.durationMs??t.durationMs,delayMs:o.delayMs??t.delayMs,easing:o.easing??t.easing,spring:o.spring??t.spring,
+          // value overrides (scale/blur) come only from applied refine suggestions;
+          // they carry their own from-value + backing var so Accept + live preview work.
+          scale:o.scale??t.scale,blur:o.blur??t.blur,varName:o.varName??t.varName,scaleFrom:o.scaleFrom??t.scaleFrom,blurFrom:o.blurFrom??t.blurFrom};});
       }
       _notify(){
         this.effectiveCache.clear();
@@ -1703,6 +1978,56 @@
       }catch{return [];}
     }
 
+    // Read the non-resting ("pre") VALUE a lane animates from the live stylesheets:
+    // transform-scale (≠1) and filter-blur (≠0), plus the CSS custom property
+    // backing it (var-backed values are the ones we can live-preview). Returns
+    // {scale?|blur?, varName?}. Only meaningful for transform/filter lanes.
+    function readElValueHint(el, property){
+      const out={};
+      try{
+        if(!el||(property!=="transform"&&property!=="filter"))return out;
+        const own=(typeof el.className==="string"?el.className.trim().split(/\s+/):Array.from(el.classList||[])).filter(Boolean);
+        const cs=getComputedStyle(el);
+        const esc=s=>s.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");
+        const tokRes=own.map(c=>new RegExp("\\."+esc(c)+"(?![\\w-])"));
+        const matchTok=sel=>!own.length||tokRes.some(re=>re.test(sel));
+        let bestScale=null,bestBlur=null;
+        const consider=txt=>{
+          if(property==="transform"){
+            const tm=txt.match(/transform\s*:\s*([^;}]+)/i);
+            if(tm){const sc=tm[1].match(/scale\(\s*([^),]+)/i);
+              if(sc){const inner=sc[1].trim();const vm=inner.match(/var\(\s*(--[\w-]+)/);
+                const num=vm?parseFloat(cs.getPropertyValue(vm[1])):parseFloat(inner);
+                // pick the value furthest from the resting 1 (the real pre-scale).
+                if(Number.isFinite(num)&&Math.abs(num-1)>1e-4&&(!bestScale||Math.abs(num-1)>Math.abs(bestScale.scale-1)))
+                  bestScale={scale:num,...(vm?{varName:vm[1]}:{})};}}
+          }else{
+            const fm=txt.match(/filter\s*:\s*([^;}]+)/i);
+            if(fm){const bl=fm[1].match(/blur\(\s*([^)]+)\)/i);
+              if(bl){const inner=bl[1].trim();const vm=inner.match(/var\(\s*(--[\w-]+)/);
+                const num=vm?parseFloat(cs.getPropertyValue(vm[1])):parseFloat(inner);
+                if(Number.isFinite(num)&&num>1e-4&&(!bestBlur||num>bestBlur.blur))
+                  bestBlur={blur:num,...(vm?{varName:vm[1]}:{})};}}
+          }
+        };
+        const collect=list=>{for(const rule of Array.from(list||[])){
+          if(rule.cssRules&&rule.selectorText===undefined){collect(rule.cssRules);continue;}
+          const sel=rule.selectorText;if(!sel||!matchTok(sel))continue;
+          if(rule.cssText)consider(rule.cssText);}};
+        for(const sheet of Array.from(document.styleSheets||[])){let r;try{r=sheet.cssRules;}catch{continue;}collect(r);}
+        if(bestScale)Object.assign(out,bestScale);
+        if(bestBlur)Object.assign(out,bestBlur);
+      }catch{}
+      return out;
+    }
+    // Same, resolving the element from a CSS selector (used when only a lane's
+    // selector is known, e.g. a grouped phase member).
+    function laneValueHint(selector, property){
+      if(!selector||(property!=="transform"&&property!=="filter"))return {};
+      let el=null;try{el=document.querySelector(selector);}catch{return {};}
+      return el?readElValueHint(el,property):{};
+    }
+
     // ── 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]));}
@@ -1758,6 +2083,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,44 +2187,218 @@
     // 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 }];
+    }
+    // ── deterministic motion-token engine (mirrors server/motion-tokens.mjs) ──
+    // The website demo answers Refine locally, so it must reach the SAME verdict
+    // the shipped agent would: flag ONLY values that are genuinely off the
+    // transitions.dev tokens (by usage where the skill says so). For the demo
+    // dropdown that means the lone real issue — the 0.8 pre-scale — is the
+    // suggestion, instead of a pile of tweaks for values that are already on-grid.
+    const _TX_DUR_TOKENS   = [{v:150,name:"Fast",usage:"quick state changes"},{v:250,name:"Medium",usage:"standard UI motion"},{v:400,name:"Slow",usage:"larger surfaces"}];
+    const _TX_SCALE_TOKENS = [{v:0.96,name:"Large",usage:"modal open / close"},{v:0.97,name:"Medium",usage:"dropdown open"},{v:0.98,name:"Small",usage:"tooltip open"},{v:0.99,name:"Tiny",usage:"dropdown close"}];
+    const _TX_BLUR_TOKENS  = [{v:2,name:"Small",usage:"panel reveal, icon swap, text swap"},{v:3,name:"Medium",usage:"page slide, text reveal"},{v:8,name:"Large",usage:"success check open"}];
+    const _TX_TOKEN_EASE   = new Set(["cubic-bezier(0.22,1,0.36,1)","ease-in-out","ease-out","linear","cubic-bezier(0.34,1.36,0.64,1)","cubic-bezier(0.34,3.85,0.64,1)"]);
+    const _txLc       = s=>String(s||"").toLowerCase();
+    const _txNormEase = s=>String(s||"").replace(/\s+/g,"").toLowerCase();
+    const _txNearest  = (arr,val)=>{let best=arr[0],bd=Infinity;for(const t of arr){const d=Math.abs(t.v-val);if(d<bd){bd=d;best=t;}}return{token:best,delta:bd};};
+    const _txScaleUsage = (hint)=>{const h=_txLc(hint);if(!h)return null;const close=/clos/.test(h);
+      if(/\bmodal\b|\bdialog\b|\blightbox\b/.test(h))return _TX_SCALE_TOKENS.find(t=>t.v===0.96);
+      if(/\btooltip\b|\btip\b|\bpopover\b/.test(h))return _TX_SCALE_TOKENS.find(t=>t.v===0.98);
+      if(/\bdropdown\b|drop-down|\bmenu\b|\bselect\b|\bcombobox\b|\bcaret\b/.test(h))return _TX_SCALE_TOKENS.find(t=>t.v===(close?0.99:0.97));
+      return null;};
+    const _txBlurUsage = (hint)=>{const h=_txLc(hint);if(!h)return null;
+      if(/success|check/.test(h))return _TX_BLUR_TOKENS.find(t=>t.v===8);
+      if(/\bpage\b|\bslide\b/.test(h))return _TX_BLUR_TOKENS.find(t=>t.v===3);
+      if(/text/.test(h)&&/reveal/.test(h))return _TX_BLUR_TOKENS.find(t=>t.v===3);
+      if(/panel|icon|swap|skeleton|number|digit|reveal/.test(h))return _TX_BLUR_TOKENS.find(t=>t.v===2);
+      return null;};
+    const _txRefineEasing = (e)=>{const n=_txNormEase(e);if(!n)return false;if(_TX_TOKEN_EASE.has(n))return false;return n==="ease"||n==="ease-in"||n.startsWith("cubic-bezier")||n.startsWith("linear(");};
+    // Token-faithful tweaks for one lane list (mirrors refineTimings()).
+    function _txTokenTweaks(timings, ctx){
+      const out=[]; const c=ctx||{};
+      for(const t of (timings||[])){
+        const prop=t.property||"all";
+        const member=t.member||null;
+        const hint=[c.label,c.selector,c.phase,t.property,t.member].filter(Boolean).join(" ");
+        const mp=(rest)=> member ? {member, ...rest} : rest;
+        if(Number.isFinite(t.durationMs)){const {token,delta}=_txNearest(_TX_DUR_TOKENS,t.durationMs);
+          if(delta>10)out.push({id:"mock-"+prop+"-duration",kind:"duration",property:prop,member,
+            title:"Duration → "+token.name,from:t.durationMs+"ms",to:token.v+"ms",
+            patch:mp({property:prop,durationMs:token.v}),
+            reason:token.name+" ("+token.v+"ms) is the closest motion token — used for "+token.usage+". "+t.durationMs+"ms is off-grid."});}
+        if(_txRefineEasing(t.easing))out.push({id:"mock-"+prop+"-easing",kind:"easing",property:prop,member,
+          title:"Easing → Smooth ease out",from:t.easing,to:_TX_EASE,
+          patch:mp({property:prop,easing:_TX_EASE}),
+          reason:'"'+t.easing+'" is a generic curve. The transitions.dev standard ease-out reads more intentional on opens, closes, slides, and resizes.'});
+        if(Number.isFinite(t.scale)&&Math.abs(t.scale-1)>1e-4){const usage=_txScaleUsage(hint);const {token:near,delta}=_txNearest(_TX_SCALE_TOKENS,t.scale);const token=usage||near;
+          if(token&&(usage||delta>5e-3)&&Math.abs(token.v-t.scale)>1e-4)out.push({id:"mock-"+prop+"-scale",kind:"scale",property:prop,member,
+            title:"Scale → "+token.name,from:String(t.scale),to:String(token.v),
+            patch:mp({property:prop,scale:token.v,...(t.varName?{varName:t.varName}:{})}),
+            reason:token.name+" ("+token.v+") is the transitions.dev scale token for "+token.usage+". "+t.scale+" is "+(usage?"off the usage token":"off-grid")+"."});}
+        if(Number.isFinite(t.blur)&&t.blur>1e-4){const usage=_txBlurUsage(hint);const {token:near,delta}=_txNearest(_TX_BLUR_TOKENS,t.blur);const token=usage||near;
+          if(token&&(usage||delta>0.5)&&Math.abs(token.v-t.blur)>1e-4)out.push({id:"mock-"+prop+"-blur",kind:"blur",property:prop,member,
+            title:"Blur → "+token.name,from:t.blur+"px",to:token.v+"px",
+            patch:mp({property:prop,blur:token.v,...(t.varName?{varName:t.varName}:{})}),
+            reason:token.name+" ("+token.v+"px) is the transitions.dev blur token for "+token.usage+". "+t.blur+"px is "+(usage?"off the usage token":"off-grid")+"."});}
+      }
+      return out;
+    }
+    // refine → token-faithful suggestions (same verdict the shipped agent reaches)
+    // plus the best-fit recipe for the Replace tab. 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).
+    function _txMockSuggestions(request){
+      const t = (request && request.timings) || [];
+      const ctx = { label:(request&&request.label)||null, selector:(request&&request.selector)||null, phase:(request&&request.phase)||null };
+      const p0 = (t[0]&&t[0].property) || "opacity";
+      const m0 = (t[0]&&t[0].member) || null;
+      const mp = (member, rest)=> member ? {member, ...rest} : rest;
+      // motion-token tweaks: ONLY off-token values, exactly like the real engine.
+      const tweaks = _txTokenTweaks(t, ctx);
+      // related phases (open + close) → a recipe swap updates them together: one
+      // `patches` entry per phase, open slower than close (250ms / 150ms tokens).
+      const reqPhases = (request && Array.isArray(request.phases)) ? request.phases.filter(p=>p&&p.phase) : [];
+      const replacePatches = reqPhases.length>1
+        ? reqPhases.map(p=>({phase:p.phase, property:"all", durationMs:/close/i.test(p.phase)?150:250, easing:_TX_EASE, scale:/close/i.test(p.phase)?0.99:0.97}))
+        : null;
+      const replace = { 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, scale:0.97}),
+        ...(replacePatches?{patches:replacePatches}:{}),
+        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)." };
+      const suggestions=[...tweaks, replace];
+      // Scope to the requested refineType so per-tab caches merge cleanly.
+      const rt=(request&&request.refineType)||"both";
+      const scoped=rt==="replace"?suggestions.filter(s=>s.kind==="replace")
+        :rt==="small"?suggestions.filter(s=>s.kind!=="replace")
+        :suggestions;
+      const nTweak=tweaks.length;
+      const tweakWord=nTweak+" motion-token tweak"+(nTweak===1?"":"s");
+      const summary=rt==="replace"?"1 transitions.dev recipe match for the Menu dropdown."
+        :rt==="small"?(nTweak?tweakWord+" for the Menu dropdown.":"The Menu dropdown is already on-grid — no motion-token tweaks needed.")
+        :tweakWord+" and 1 transitions.dev recipe match for the Menu dropdown.";
+      return { suggestions:scoped, summary };
+    }
+    // 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();
+        // Website demo: random 4–6s “agent work” so the scanning loader feels real.
+        const delayMs=4000+Math.floor(Math.random()*2001);
+        _txMockJobs.set(id,{request,createdAt:Date.now(),delayMs});
+        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);
+        const wait=rec.delayMs!=null?rec.delayMs:800;
+        if(elapsed<wait) 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, agentCmd:true, pollerActive:false, 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 }
+      return r.json(); // { ok, auto, llmAvailable, pollerActive, agentCmd, cliInstalled, jobs }
+    }
+    // Ask the relay to stop the in-chat `/refine live` loop (the credit-burning
+    // poller). No-op for a wired REFINE_AGENT_CMD (it never polls /jobs/next).
+    async function relayStopLive(){
+      if(TX_MOCK) return { ok:true };
+      const r = await fetch(RELAY_URL+"/poller/stop",{method:"POST"});
+      if(!r.ok) throw new Error("relay POST /poller/stop failed ("+r.status+")");
+      return r.json();
     }
 
     const REFINE_MODES=[
@@ -1944,7 +2445,20 @@
       const matches=lanes.filter(t=>t.property===s.property&&t.member);
       if(!matches.length) return null;
       const names=[...new Set(matches.map(t=>t.member))];
-      return names.length===1?names[0]:matches[0].member;
+      if(names.length===1) return names[0];
+      // Ambiguous: several lanes share this property (e.g. a caret that rotates
+      // AND a panel that scales both animate `transform`). For a value-bearing
+      // kind, attribute to the lane that actually carries that value rather than
+      // blindly taking the first — read the live non-resting value per lane.
+      if(s.kind==="scale"||s.kind==="blur"){
+        const key=s.kind;
+        const owner=matches.find(t=>{
+          const v=laneValueHint(t.selector,t.property);
+          return key==="scale"?(v.scale!=null&&Math.abs(v.scale-1)>1e-4):(v.blur!=null&&v.blur>1e-4);
+        });
+        if(owner) return owner.member;
+      }
+      return matches[0].member;
     }
     // 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
@@ -2012,18 +2526,25 @@
             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"],
-        delay:["Delay","is-delay"],scale:["Scale","is-scale"],distance:["Distance","is-distance"],
+        delay:["Delay","is-delay"],scale:["Scale","is-scale"],blur:["Blur","is-blur"],distance:["Distance","is-distance"],
         replace:["Transition replacement","is-replace"]};
       const cap=(p)=>p&&p!=="all"?p.charAt(0).toUpperCase()+p.slice(1):"";
       let i=0;
@@ -2048,8 +2569,14 @@
             h("div",{className:"tl-sug-body"},
               h("div",{className:"tl-sug-text"},
                 isReplace
-                  ? h("div",{className:"tl-sug-title"},
-                      "Current transition",h("br"),"\u2192 "+(s.title||"transition")+" from transitions.dev")
+                  ? h(React.Fragment,null,
+                      h("div",{className:"tl-sug-title"},
+                        "Current transition",h("br"),"\u2192 "+(s.title||"transition")+" from transitions.dev"),
+                      Array.isArray(s.patches)&&s.patches.length>1&&h("div",{className:"tl-sug-phases"},
+                        "Updates ",
+                        s.patches.map((pp,pi)=>h("span",{className:"tl-sug-phase",key:pi},
+                          (cap(pp.phase)||pp.phase||"Phase"),
+                          pp.durationMs!=null&&h("span",{className:"tl-sug-phase-dur"},pp.durationMs+"ms")))))
                   : h(React.Fragment,null,
                       s.title&&h("div",{className:"tl-sug-title"},s.title),
                       (s.from||s.to)&&h("div",{className:"tl-sug-delta"},
@@ -2059,6 +2586,20 @@
               applyBtn));
         }));
     }
+    // Shared "Connect with your agent" copy — used by the full-panel gate and by
+    // the Refine area when no live agent is connected, so both read identically.
+    // `cliMissing` swaps the body to an install-first hint.
+    function AgentConnectBody({cliMissing}){
+      return cliMissing
+        ? h("p",{className:"tl-gate-text"},"Install an agent CLI, then run ",
+            h("code",{className:"tl-code"},"npx transitions-refine live"),
+            " (recommended) or ",h("code",{className:"tl-code"},"/refine live")," in your editor.")
+        : h("p",{className:"tl-gate-text"},
+            "Run ",h("code",{className:"tl-code"},"npx transitions-refine live"),
+            " in your project to start the relay with a persistent agent — works for hours, no chat loop. Or run ",
+            h("code",{className:"tl-code"},"/refine live"),
+            " in your editor if the relay is already up without an agent wired.");
+    }
     function RefinePanel({open,onClose,phase,label,refineType,onType,suggestions,summary,error,appliedIds,onApply,onApplyAll,mode,onMode,llmAvailable,cliInstalled,onStart,lanes}){
       // mount-on-open; keep mounted through the panel-reveal slide-out, then unmount
       const[render,setRender]=useState(open);
@@ -2067,6 +2608,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 +2653,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 +2678,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){
+          // Same "Connect with your agent" copy as the full-panel gate, so opening
+          // Refine after a post-scan auto-stop reads identically. Re-running
+          // /refine live makes the agent available and Start scanning works again.
+          return h("div",{className:"tl-refine-center"},
+            h("div",{className:"tl-refine-unavail-title"},"Connect with your agent"),
+            h(AgentConnectBody,{cliMissing:cliInstalled===false}));
+        }
+        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 +2738,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 +2766,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)));
     }
 
@@ -2210,26 +2778,50 @@
     // originally-scanned values — the set of changes Accept writes to source.
     // Each change carries member/selector/phase context so the agent can target
     // the right state rule (e.g. .is-open vs .is-closing) for a grouped phase.
-    function computeChanges(active){
+    function computeChanges(active,allEntries){
       if(!active)return[];
-      const base=active.baseLanes||[];
-      const bmap=new Map(base.map(t=>[t.laneId,t]));
+      // Write the active phase plus — for a grouped phase — its sibling phases
+      // (open/close) so a recipe swap applied across both is saved to both. Only
+      // phases that actually have edits contribute changes, so a single-phase tweak
+      // still writes just that phase. Each change carries its own `phase`.
+      let targets=[active];
+      if(active.kind==="phase"&&active.groupId&&Array.isArray(allEntries)){
+        const sibs=allEntries.filter(e=>e.kind==="phase"&&e.groupId===active.groupId&&e.id!==active.id);
+        targets=targets.concat(sibs);
+      }
       const out=[];
-      for(const t of (active.effectiveTimings||[])){
-        const b=bmap.get(t.laneId);if(!b)continue;
-        if(t.durationMs!==b.durationMs||t.delayMs!==b.delayMs||(t.easing||"")!==(b.easing||"")){
-          out.push({property:t.property,member:t.member||null,selector:t.selector||null,
-            from:{durationMs:b.durationMs,delayMs:b.delayMs,easing:b.easing},
-            to:{durationMs:t.durationMs,delayMs:t.delayMs,easing:t.easing}});
+      for(const tgt of targets){
+        const base=tgt.baseLanes||[];
+        const bmap=new Map(base.map(t=>[t.laneId,t]));
+        for(const t of (tgt.effectiveTimings||[])){
+          const b=bmap.get(t.laneId);if(!b)continue;
+          if(t.durationMs!==b.durationMs||t.delayMs!==b.delayMs||(t.easing||"")!==(b.easing||"")){
+            out.push({property:t.property,member:t.member||null,selector:t.selector||null,phase:tgt.phase||null,
+              from:{durationMs:b.durationMs,delayMs:b.delayMs,easing:b.easing},
+              to:{durationMs:t.durationMs,delayMs:t.delayMs,easing:t.easing}});
+          }
+          // value edits (scale/blur) live as overrides on the effective lane and
+          // carry their own from-value + backing var; emit one change each.
+          if(t.scale!=null){
+            out.push({property:t.property,member:t.member||null,selector:t.selector||null,phase:tgt.phase||null,varName:t.varName||null,
+              from:{scale:t.scaleFrom},to:{scale:t.scale}});
+          }
+          if(t.blur!=null){
+            out.push({property:t.property,member:t.member||null,selector:t.selector||null,phase:tgt.phase||null,varName:t.varName||null,
+              from:{blur:t.blurFrom},to:{blur:t.blur}});
+          }
         }
       }
       return out;
     }
 
-    function Header({entries,active,onSelect,onReset,onCopy,copied,snap,setSnap,onMinimize,onRefine,refineActive,onAccept,acceptState,acceptDisabled,acceptError,scanning,onRescan,pick,setPick}){
+    function Header({entries,active,onSelect,onReset,onCopy,copied,snap,setSnap,onMinimize,onRefine,refineActive,onAccept,acceptState,acceptDisabled,acceptError,scanning,scanError,onRescan,pick,setPick,chatLoop,liveStopped,onStopLive}){
       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")
@@ -2276,7 +2868,7 @@
       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)},
-          active?h(React.Fragment,null,h("span",null,active.label),h("span",{className:"tl-dim"}," "+active.durationMs+"ms"))
+          active?h(React.Fragment,null,h("span",{className:"tl-ghost-label"},active.label),h("span",{className:"tl-dim"}," "+active.durationMs+"ms"))
                 :h("span",{className:"tl-dim"},"None"),
           h("span",{className:"tl-ghost-chev"},h(Ic,{name:"chevron"}))),
         h(Dropdown,{open:pick,onClose:()=>setPick(false),triggerRef:pickRef,width:Math.max(240,(pickRef.current&&pickRef.current.offsetWidth)||240),align:"left"},
@@ -2292,7 +2884,6 @@
                   ...fGroups.map(g=>h(React.Fragment,{key:g.id},
                     h("div",{className:"tl-menu-section"},g.label),
                     ...g.phases.map(phaseItem))),
-                  fFlat.length>0&&fGroups.length>0&&h("div",{className:"tl-menu-section"},"Ungrouped"),
                   ...fFlat.map(flatItem))),
         h("span",{className:"tl-header-count"},
           scanning
@@ -2302,29 +2893,70 @@
                   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"),
+            : scanError
+              ? h("span",{className:"t-tt-wrap"},
+                  h("span",{className:"tl-scan-note tl-scan-error",tabIndex:0},
+                    h(Ic,{name:"help",size:13}),
+                    h("span",null,"Couldn’t group — agent offline")),
+                  h("span",{className:"t-tt tl-tt-below tl-tt-msg",role:"tooltip"},
+                    /refine live|REFINE_AGENT_CMD/i.test(scanError)
+                      ? scanError
+                      : scanError+" — grouping needs the agent. Run `npx transitions-refine live` (or `/refine live` in your editor)."))
+              : h("span",{className:"tl-count-text"},entries.length+" transition"+(entries.length===1?"":"s")+" found")),
+        chatLoop
+          ? h("span",{className:"t-tt-wrap tl-live-wrap"},
+              h("span",{className:"tl-live-chip",tabIndex:0},
+                h("span",{className:"tl-live-dot"}),
+                h("span",null,"Live"),
+                h("button",{className:"tl-live-stop",title:"Stop /refine live",
+                  onClick:(e)=>{e.stopPropagation();onStopLive&&onStopLive();}},"Stop")),
+              h("span",{className:"t-tt tl-tt-below tl-tt-msg",role:"tooltip"},
+                "`/refine live` is polling in your editor chat — it uses agent credits while idle. Stop it when you’re done, or it auto-stops after 10 min idle."))
+          : liveStopped
+            ? h("span",{className:"t-tt-wrap tl-live-wrap"},
+                h("span",{className:"tl-live-chip is-stopped",tabIndex:0},
+                  h(Ic,{name:"check",size:12}),
+                  h("span",null,"Live stopped")),
+                h("span",{className:"t-tt tl-tt-below tl-tt-msg",role:"tooltip"},
+                  "The `/refine live` loop was asked to stop and will exit on its next poll. Run `/refine live` again to resume."))
+            : null,
         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);setSettingsView("main");},triggerRef:gearRef,width:240,align:"right"},
           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")},
@@ -2347,14 +2979,14 @@
             acceptState==="saving"
               ? h("span",{className:"tl-accept-spin","aria-hidden":"true"})
               : h(Ic,{name:"accept"}),
-            h("span",null,acceptState==="done"?"Done":"Accept")),
+            h("span",{className:"tl-btn-label"},acceptState==="done"?"Done":"Accept")),
           h("span",{className:cx("t-tt","tl-tt-below",acceptState==="error"&&acceptError&&"tl-tt-msg"),role:"tooltip"},
             acceptState==="error"&&acceptError?acceptError
               :acceptState==="done"?"Saved to your code"
               :acceptDisabled?"No changes to save"
               :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("button",{className:cx("tl-refine-btn t-tt-trigger",refineActive&&"is-active"),disabled:!active,onClick:onRefine,"aria-label":"Refine"},
             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"}}),
@@ -2367,39 +2999,58 @@
               h("i",{style:{"--ox":"2px","--oy":"5px","--sx":"9px","--sy":"9px","--sd":"1000ms","--sdelay":"760ms"}}),
               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("span",{className:"tl-btn-label"},"Refine")),
           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=()=>{
+          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);
         };
-        const onUp=()=>{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 +3059,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 +3079,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 +3088,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]);
@@ -3016,18 +3670,85 @@
       const[acceptError,setAcceptError]=useState(null);
       // ── grouped scan (agent reads source → Open/Close phases) ──
       const[groupScanState,setGroupScanState]=useState("idle"); // idle | scanning | done | error
+      // Whether the one-time grouping scan has produced groups. Once true the main
+      // panel stays usable even after a chat-loop agent disconnects (so the panel
+      // doesn't snap back to the gate). Seeded synchronously from a cached grouping
+      // or a host-baked seed so a returning user never flashes the gate. (Key is
+      // inlined to match GROUP_STORE_KEY, which is defined further down.)
+      const[scanned,setScanned]=useState(()=>{
+        try{
+          if(typeof window!=="undefined"&&Array.isArray(window.__TX_SEED_GROUPS)&&window.__TX_SEED_GROUPS.length)return true;
+          const c=JSON.parse(localStorage.getItem("tlGroups:"+location.pathname)||"null");
+          return !!(c&&Array.isArray(c.groups)&&c.groups.length);
+        }catch{return false;}
+      });
+      // last scan failure message (relay surfaces "needs the agent. Run /refine
+      // live …") so a failed Rescan can explain WHY nothing re-grouped instead of
+      // silently showing the same flat count.
+      const[groupScanErr,setGroupScanErr]=useState(null);
       const didGroupScanRef=useRef(false);
+      // One failed agent spawn (e.g. cursor-agent's cli-config race on cold start)
+      // shouldn't leave the panel stuck flat until a manual rescan. Allow a couple
+      // of automatic re-tries with backoff before giving up; reset on success and
+      // on manual rescan so each fresh scan gets its own retry budget.
+      const groupScanRetryRef=useRef(0);
+      const GROUP_SCAN_MAX_RETRIES=2;
       const[refineLabel,setRefineLabel]=useState(null);
       const[appliedIds,setAppliedIds]=useState({});
       const[refineMode,setRefineMode]=useState("llm"); // llm (Agent) | deterministic
       const[refineType,setRefineType]=useState("small"); // small | replace
       const[llmAvailable,setLlmAvailable]=useState(null); // null=unknown, true/false from /health
       const[cliInstalled,setCliInstalled]=useState(null); // null=unknown, true/false from /health
+      // chatLoop = LLM served by the in-chat `/refine live` poll loop (pollerActive
+      // and no wired REFINE_AGENT_CMD). This is the mode that bills agent turns
+      // while idle, so the header shows a credit warning + Stop for it.
+      const[chatLoop,setChatLoop]=useState(false);
+      const[liveStopped,setLiveStopped]=useState(false); // user hit Stop → show paused chip
+      // After a Stop, the loop stays pollerActive for its ~120s TTL while it
+      // winds down, so we can't just re-read pollerActive. stopPendingRef tracks
+      // "a stop was requested"; sawPollerGoneRef flips once the poller actually
+      // disappears, so only a poller that returns *after that* counts as a fresh
+      // `/refine live` and flips the chip back to Live. (Refs because
+      // refreshHealth is a []-deps callback and would otherwise read stale state.)
+      const stopPendingRef=useRef(false);
+      const sawPollerGoneRef=useRef(false);
+      // A quiet stop (the after-scan auto-stop) drains the loop without showing the
+      // "Live stopped" chip — it's a normal connect-for-scan, not a user Stop.
+      const quietStopRef=useRef(false);
+      // Latest chatLoop value for callbacks (runGroupScan, autoStopAfterScan) that
+      // are []-deps and would otherwise read a stale value.
+      const chatLoopRef=useRef(false);
       // probe the relay so the idle panel can show the right availability copy
       const refreshHealth=useCallback(async()=>{
         try{const j=await relayHealth();setLlmAvailable(!!j.llmAvailable);
-          setCliInstalled(j.cliInstalled==null?null:!!j.cliInstalled);return j;}
-        catch{setLlmAvailable(false);setCliInstalled(false);return null;}
+          setCliInstalled(j.cliInstalled==null?null:!!j.cliInstalled);
+          const loop=!!j.pollerActive&&!j.agentCmd;
+          if(!stopPendingRef.current){chatLoopRef.current=loop;setChatLoop(loop);setLiveStopped(false);return j;}
+          if(!j.pollerActive)sawPollerGoneRef.current=true;
+          if(loop&&sawPollerGoneRef.current){ // a fresh loop started after the stop
+            stopPendingRef.current=false;quietStopRef.current=false;
+            chatLoopRef.current=true;setChatLoop(true);setLiveStopped(false);
+          }else{chatLoopRef.current=false;setChatLoop(false);setLiveStopped(!quietStopRef.current);} // draining
+          return j;}
+        catch{chatLoopRef.current=false;setLlmAvailable(false);setCliInstalled(false);setChatLoop(false);return null;}
+      },[]);
+      const stopLive=useCallback(async()=>{
+        quietStopRef.current=false;
+        stopPendingRef.current=true;sawPollerGoneRef.current=false;
+        chatLoopRef.current=false;setLiveStopped(true);setChatLoop(false);
+        try{await relayStopLive();}catch{}
+        refreshHealth();
+      },[refreshHealth]);
+      // Quiet auto-stop after the one-time grouping scan: in chat-loop mode the
+      // loop has done its only needed job (the scan), so stop it to avoid idle
+      // credit burn. Drains like a normal stop but shows no chip; the Refine area
+      // then shows "Connect with your agent" until the user re-runs /refine live.
+      const autoStopAfterScan=useCallback(async()=>{
+        if(!chatLoopRef.current)return; // only the in-chat loop burns idle credits
+        quietStopRef.current=true;
+        stopPendingRef.current=true;sawPollerGoneRef.current=false;
+        chatLoopRef.current=false;setChatLoop(false);setLiveStopped(false);
+        try{await relayStopLive();}catch{}
       },[]);
       // a live agent = the relay reports an agent it can drive (REFINE_AGENT_CMD
       // wired OR a `/refine live` loop polling). Until then the panel is gated.
@@ -3051,35 +3772,91 @@
         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}));
+          // attach the lane's non-resting scale/blur value (+ backing var) so the
+          // agent + deterministic engine can refine transform/filter VALUES too.
+          const withVal=(t)=>{const v=laneValueHint(t.selector,t.property);return {property:t.property,member:t.member||null,durationMs:t.durationMs,delayMs:t.delayMs,easing:t.easing,
+            ...(v.scale!=null?{scale:v.scale}:{}),...(v.blur!=null?{blur:v.blur}:{}),...(v.varName?{varName:v.varName}:{})};};
+          const timings=et.map(withVal);
           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.
+          // A recipe swap (replace/both) on a grouped phase should update its related
+          // phases (open + close) together — they're one motion. Send the whole
+          // group's phases so the agent can return a per-phase `patches` array.
+          let phases;
+          if((type==="replace"||type==="both")&&active.kind==="phase"&&active.groupId){
+            const gp=entries.filter(e=>e.kind==="phase"&&e.groupId===active.groupId);
+            if(gp.length>1)phases=gp.map(e=>({phase:e.phase||e.phaseLabel||"phase",label:e.phaseLabel||e.phase||"Phase",
+              timings:(e.effectiveTimings||[]).map(withVal)}));
+          }
           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,phases});
           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,entries]);
+      const changeRefineMode=useCallback((mode)=>{setRefineMode(mode);setRefinePhase("idle");refineCacheRef.current.clear();refreshHealth();},[refreshHealth]);
+      // Switching tabs reuses a cached scan when present; otherwise (llm only) the
+      // tab drops back to its idle state and waits for an explicit Start-scanning
+      // click — switching never auto-runs a scan. 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;}
+        // No cached result for this tab → show its idle scan button and wait for
+        // the user. (A scan in progress is left running so it can finish.)
+        if(refinePhase==="done")setRefinePhase("idle");
+      },[active,refinePhase,applyMerged]);
       // poll the relay while a job is running
       useEffect(()=>{
         if(!refineJobId||refinePhase!=="scanning")return;
@@ -3090,7 +3867,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,27 +3883,50 @@
               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)=>{
-        const p=s.patch||{};if(!p.property)return;
-        const o={};
-        if(p.durationMs!=null)o.durationMs=p.durationMs;
-        if(p.delayMs!=null)o.delayMs=p.delayMs;
-        if(p.easing!=null)o.easing=p.easing;
-        // map a property patch onto the matching lane(s) — for a grouped phase the
-        // same property can appear on several members, so apply to each.
-        const et=(active&&active.effectiveTimings)||[];
-        let lanes=p.property==="all"?et:et.filter(t=>t.property===p.property);
-        if(p.member)lanes=lanes.filter(t=>(t.member===p.member||t.memberId===p.member));
-        const ids=lanes.length?lanes.map(t=>t.laneId):[p.property];
-        for(const id of ids)setPropOverride(id,o);
+        // A replace suggestion may carry `patches` (one per related phase, e.g.
+        // open + close) — a recipe swap is one motion, so applying it writes BOTH.
+        // Otherwise fall back to the single `patch` on the active phase.
+        const patches=Array.isArray(s.patches)&&s.patches.length
+          ? s.patches
+          : (s.patch&&s.patch.property?[{...s.patch,phase:(active&&active.phase)||null}]:[]);
+        if(!patches.length)return;
+        const groupId=active&&active.groupId;
+        for(const p of patches){
+          if(!p.property)continue;
+          const o={};
+          if(p.durationMs!=null)o.durationMs=p.durationMs;
+          if(p.delayMs!=null)o.delayMs=p.delayMs;
+          if(p.easing!=null)o.easing=p.easing;
+          // value edits: keep the new value, the backing var, and the from-value
+          // (parsed off the suggestion) so computeChanges can write source on Accept.
+          if(p.scale!=null){o.scale=p.scale;o.scaleFrom=(s.from!=null?parseFloat(s.from):undefined);}
+          if(p.blur!=null){o.blur=p.blur;o.blurFrom=(s.from!=null?parseFloat(s.from):undefined);}
+          if(p.varName!=null)o.varName=p.varName;
+          // resolve the phase entry this patch targets (its sibling open/close
+          // lives in the same group); default to the active entry.
+          let target=active;
+          if(p.phase&&groupId){
+            const found=entries.find(e=>e.kind==="phase"&&e.groupId===groupId&&e.phase===p.phase);
+            if(found)target=found;
+          }
+          if(!target)continue;
+          // map the property patch onto the matching lane(s) — a property can span
+          // several members in a grouped phase, so apply to each.
+          const et=target.effectiveTimings||[];
+          let lanes=p.property==="all"?et:et.filter(t=>t.property===p.property);
+          if(p.member)lanes=lanes.filter(t=>(t.member===p.member||t.memberId===p.member));
+          const ids=lanes.length?lanes.map(t=>t.laneId):[p.property];
+          for(const id of ids)registry.setPropOverride(target.id,id,o);
+        }
         setAppliedIds(prev=>({...prev,[s.id]:true}));
-      },[setPropOverride,active]);
+      },[registry,active,entries]);
       const applyAllSuggestions=useCallback(()=>{
         for(const s of refineSuggestions){if(!appliedIds[s.id])applySuggestion(s);}
       },[refineSuggestions,appliedIds,applySuggestion]);
@@ -3134,8 +3942,13 @@
       useEffect(()=>{
         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],[data-tl-ui]")))continue; desired.set(el,css); } };
+        const desired=new Map(); // el → {css, vars:{name:value}}
+        // collect the var-backed scale/blur overrides on a set of lanes into a
+        // {varName: cssValue} map (scale → unitless, blur → px) for live preview.
+        const lanesToVars=(lanes)=>{const v={};for(const l of (lanes||[])){if(!l.varName)continue;
+          if(l.scale!=null)v[l.varName]=String(l.scale);
+          if(l.blur!=null)v[l.varName]=l.blur+"px";}return v;};
+        const add=(els,css,vars)=>{ for(const el of els){ if(!el||(el.closest&&el.closest("[data-timeline-panel],[data-tl-ui]")))continue; desired.set(el,{css,vars:vars||{}}); } };
         for(const item of entries){
           const ov=registry.getPropOverrides(item.id);
           if(!ov||!Object.keys(ov).length)continue; // only edited transitions go live
@@ -3143,31 +3956,40 @@
             for(const m of (item.members||[])){
               if(!m.selector||!m.lanes||!m.lanes.length)continue;
               let els=[];try{els=Array.from(document.querySelectorAll(m.selector));}catch{}
-              add(els,transitionLanesToCss(m.lanes));
+              add(els,transitionLanesToCss(m.lanes),lanesToVars(m.lanes));
             }
           }else{
             const lanes=item.effectiveTimings||[];
             if(!lanes.length)continue;
             const els=((item.bindings&&item.bindings.elements)||[]).map(w=>w.deref&&w.deref()).filter(Boolean);
-            add(els,transitionLanesToCss(lanes));
+            add(els,transitionLanesToCss(lanes),lanesToVars(lanes));
           }
         }
+        const varsKey=v=>Object.keys(v).sort().map(k=>k+":"+v[k]).join(";");
         // apply new / changed
-        for(const [el,css] of desired){
+        for(const [el,d] of desired){
+          const css=d.css,vars=d.vars||{},vk=varsKey(vars);
           const cur=applied.get(el);
-          if(cur&&cur.css===css)continue;
+          if(cur&&cur.css===css&&cur.vk===vk)continue;
           if(!cur){
             const s=getComputedStyle(el);
             const z=zipTransitionLists((s.transitionProperty||"").split(","),(s.transitionDuration||"0s").split(","),(s.transitionDelay||"0s").split(","),splitCssValues(s.transitionTimingFunction||"ease"));
             _TX_LIVE_BASE.set(el,{z});
-            applied.set(el,{prevInline:el.style.transition||"",css});
-          }else applied.set(el,{prevInline:cur.prevInline,css});
+            applied.set(el,{prevInline:el.style.transition||"",css,vars,vk,prevVars:Object.fromEntries(Object.keys(vars).map(n=>[n,el.style.getPropertyValue(n)]))});
+          }else{
+            // revert vars the new desired set no longer drives before re-applying
+            for(const n of Object.keys(cur.vars||{})){if(!(n in vars)){try{const pv=(cur.prevVars||{})[n];if(pv)el.style.setProperty(n,pv);else el.style.removeProperty(n);}catch{}}}
+            const prevVars={...(cur.prevVars||{})};for(const n of Object.keys(vars)){if(!(n in prevVars))prevVars[n]=el.style.getPropertyValue(n);}
+            applied.set(el,{prevInline:cur.prevInline,css,vars,vk,prevVars});
+          }
           try{el.style.transition=css;}catch{}
+          for(const n of Object.keys(vars)){try{el.style.setProperty(n,vars[n]);}catch{}}
         }
         // revert elements that no longer have edits
         for(const [el,rec] of Array.from(applied)){
           if(desired.has(el))continue;
           try{el.style.transition=rec.prevInline;}catch{}
+          for(const n of Object.keys(rec.vars||{})){try{const pv=(rec.prevVars||{})[n];if(pv)el.style.setProperty(n,pv);else el.style.removeProperty(n);}catch{}}
           _TX_LIVE_BASE.delete(el);
           applied.delete(el);
         }
@@ -3175,7 +3997,7 @@
       // restore everything on unmount
       useEffect(()=>()=>{
         const applied=liveAppliedRef.current;
-        for(const [el,rec] of applied){ try{el.style.transition=rec.prevInline;}catch{} _TX_LIVE_BASE.delete(el); }
+        for(const [el,rec] of applied){ try{el.style.transition=rec.prevInline;}catch{} for(const n of Object.keys(rec.vars||{})){try{const pv=(rec.prevVars||{})[n];if(pv)el.style.setProperty(n,pv);else el.style.removeProperty(n);}catch{}} _TX_LIVE_BASE.delete(el); }
         applied.clear();
       },[]);
       const startResize=useCallback(e=>{
@@ -3227,11 +4049,20 @@
           }else legacyCopy();
         }catch(e){legacyCopy();}
       },[active,showToast]);
-      const resetOverrides=useCallback(()=>{if(active)registry.clearOverride(active.id);},[registry,active]);
+      // Reset the selected transition. For a grouped phase, clear ALL of its
+      // related phases (open/close) too — a recipe swap edits them as one motion,
+      // so Reset should revert them as one.
+      const resetOverrides=useCallback(()=>{
+        if(!active)return;
+        registry.clearOverride(active.id);
+        if(active.kind==="phase"&&active.groupId){
+          for(const e of entries)if(e.kind==="phase"&&e.groupId===active.groupId&&e.id!==active.id)registry.clearOverride(e.id);
+        }
+      },[registry,active,entries]);
       // Accept → send an "apply" job so the agent writes the edited timings into
       // the user's source, then reflect saving / done / error on the button.
       const onAccept=useCallback(async()=>{
-        const changes=computeChanges(active);
+        const changes=computeChanges(active,entries);
         if(!active||!changes.length)return;
         setAcceptState("saving");setAcceptError(null);
         try{
@@ -3256,7 +4087,7 @@
           setAcceptState("error");
           setAcceptError("Couldn't reach the relay. Run: npx transitions-refine live");
         }
-      },[active]);
+      },[active,entries]);
       // reset Accept feedback when switching transitions
       useEffect(()=>{setAcceptState("idle");setAcceptError(null);},[active&&active.id]);
       // while the agent is applying changes, surface the sticky loader toast
@@ -3286,8 +4117,15 @@
       },[GROUP_STORE_KEY]);
       // monotonic token so an unmount or a newer rescan supersedes an in-flight poll
       const scanTokenRef=useRef(0);
-      const runGroupScan=useCallback(async()=>{
+      const runGroupScan=useCallback(async(opts)=>{
+        opts=opts||{};
         const token=++scanTokenRef.current;
+        // Hardcoded grouping (window.__TX_SEED_GROUPS): apply INSTANTLY on first load
+        // — no relay, no agent, no settle loop. Manual "Rescan transitions" passes
+        // skipSeed so the user gets a real agent scan instead of re-applying the bake-in.
+        const seedNow=!opts.skipSeed&&typeof window!=="undefined"&&Array.isArray(window.__TX_SEED_GROUPS)&&window.__TX_SEED_GROUPS.length?window.__TX_SEED_GROUPS:null;
+        if(seedNow){registry.setGroups(seedNow);groupScanRetryRef.current=0;setScanned(true);setGroupScanState("done");if(!opts.skipSeed)autoStopAfterScan();return;}
+        setGroupScanErr(null);
         setGroupScanState("scanning");
         // wait for the flat DOM scan to settle (count stable twice) so the agent
         // sees every transition, not a partial set discovered progressively.
@@ -3310,7 +4148,7 @@
         // fresh scan and is overwritten below.
         const sig=flatSig(flat);
         const cached=readGroupCache();
-        if(cached&&cached.sig===sig){registry.setGroups(cached.groups);setGroupScanState("done");return;}
+        if(cached&&cached.sig===sig){registry.setGroups(cached.groups);groupScanRetryRef.current=0;setScanned(true);setGroupScanState("done");if(!opts.skipSeed)autoStopAfterScan();return;}
         setGroupScanState("scanning");
         const raw=flat.map(e=>({label:e.label,selector:e.bindings&&e.bindings.selector,
           properties:e.properties,
@@ -3328,14 +4166,30 @@
             const job=await relayGetJob(id);
             if(job.status==="done"){
               const groups=(job.result&&job.result.groups)||[];
-              if(groups.length){registry.setGroups(groups);
+              if(groups.length){registry.setGroups(groups);setScanned(true);
                 try{localStorage.setItem(GROUP_STORE_KEY,JSON.stringify({groups,sig,ts:Date.now()}));}catch{}}
-              setGroupScanState("done");return;}
-            if(job.status==="error"){setGroupScanState("error");return;}
+              groupScanRetryRef.current=0;setGroupScanState("done");if(!opts.skipSeed)autoStopAfterScan();return;}
+            if(job.status==="error"){throw new Error(job.error||"scan job errored");}
+          }
+          throw new Error("scan timed out");
+        }catch(e){
+          // Transient failure (a cold-start agent spawn racing on its CLI config,
+          // a relay blip): auto-retry a couple of times with backoff before
+          // surfacing the error, instead of leaving the panel stuck flat.
+          if(scanTokenRef.current!==token)return;
+          if(groupScanRetryRef.current<GROUP_SCAN_MAX_RETRIES){
+            groupScanRetryRef.current++;
+            const backoff=700*groupScanRetryRef.current;
+            setGroupScanState("scanning");
+            setTimeout(()=>{if(scanTokenRef.current===token)runGroupScan(opts);},backoff);
+            return;
           }
+          // gave up → stay flat, retry next open/rescan. Keep the relay's reason
+          // (agent unavailable / run /refine live) so the header can surface it.
+          setGroupScanErr(String((e&&e.message)||e||"Scan failed"));
           setGroupScanState("error");
-        }catch(e){ setGroupScanState("error"); /* relay down → stay flat, retry next open */ }
-      },[registry,GROUP_STORE_KEY,flatSig,readGroupCache]);
+        }
+      },[registry,GROUP_STORE_KEY,flatSig,readGroupCache,autoStopAfterScan]);
       // manual "Rescan transitions" — drop the cache AND clear the in-memory
       // groups first. Once groups claim every DOM transition the snapshot has no
       // "flat" entries left, so the settle loop above would otherwise spin forever
@@ -3343,20 +4197,28 @@
       // the flat entries the agent needs to re-group.
       const rescanTransitions=useCallback(()=>{
         try{localStorage.removeItem(GROUP_STORE_KEY);}catch{}
+        groupScanRetryRef.current=0; // fresh manual scan → fresh retry budget
         registry.clearGroups();
-        runGroupScan();
+        runGroupScan({skipSeed:true});
       },[runGroupScan,GROUP_STORE_KEY,registry]);
       // Gate the auto group-scan behind a live agent: the panel stays on the
-      // "Before we start" screen until `/refine live` (or a wired REFINE_AGENT_CMD)
-      // makes the relay report an agent. The first time we see a live agent we run
-      // the resolver once — it settles the flat scan, then re-applies cached groups
-      // (signature match, no agent) or kicks off a fresh agent scan. Rescan is
-      // manual after that.
+      // "Connect with your agent" screen until `/refine live` (or a wired
+      // REFINE_AGENT_CMD) makes the relay report an agent. The first time we see a
+      // live agent we run the resolver once — it settles the flat scan, then
+      // re-applies cached groups (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). A prior cached grouping likewise lets a returning
+        // user skip the gate — apply it without a live agent. 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;
+        const cachedExists=!!readGroupCache();
+        if((!live&&!seeded&&!cachedExists)||didGroupScanRef.current)return;
         didGroupScanRef.current=true;
         runGroupScan();
-      },[live,runGroupScan]);
+      },[live,runGroupScan,readGroupCache]);
       useEffect(()=>()=>{scanTokenRef.current++;},[]);
 
       // whole-component open/close uses the transitions.dev panel reveal:
@@ -3419,7 +4281,7 @@
         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,
+      kbdRef.current={entries,active,acceptState,acceptDisabled:computeChanges(active,entries).length===0,minimized,
         openRefine,resetOverrides,copyValues,onAccept,setActiveId,setMinimized,setPickOpen};
       useEffect(()=>{
         const onKey=e=>{
@@ -3473,9 +4335,12 @@
         window.addEventListener("keydown",onKey);
         return()=>window.removeEventListener("keydown",onKey);
       },[recomputeHot]);
-      const gate = !live
-        ? (llmAvailable===null ? "loading" : "blocked")
-        : "ready";
+      // Ready once a live agent is connected OR the one-time grouping scan has
+      // produced groups (so the panel stays usable after a chat-loop agent
+      // auto-stops post-scan). Only an un-scanned, agent-less panel shows the gate.
+      const gate = (live || scanned)
+        ? "ready"
+        : (llmAvailable===null ? "loading" : "blocked");
       return h(React.Fragment,null,
         render&&h("div",{className:"t-panel-slide","data-timeline-panel":true,ref:panelRootRef,
             onMouseEnter:()=>{hoveredRef.current=true;},onMouseLeave:()=>{hoveredRef.current=false;},
@@ -3487,8 +4352,10 @@
             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}),
+                onAccept,acceptState,acceptDisabled:computeChanges(active,entries).length===0,acceptError,
+                scanning:groupScanState==="scanning",scanError:groupScanState==="error"?groupScanErr:null,
+                onRescan:rescanTransitions,pick:pickOpen,setPick:setPickOpen,
+                chatLoop,liveStopped,onStopLive:stopLive}),
               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")),
@@ -3500,10 +4367,8 @@
               : h("div",{className:"tl-panel-main"},
                   gate==="blocked" && h("div",{className:"tl-gate"},
                     h("div",{className:"tl-gate-col"},
-                      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.")))),
+                      h("div",{className:"tl-gate-title"},"Connect with your agent"),
+                      h(AgentConnectBody,{cliMissing:cliInstalled===false})))),
             toast&&createPortal(
               h("div",{className:"tl-toast-wrap","data-tl-ui":"","aria-live":"polite"},
                 h("div",{className:cx("tl-toast",toast.closing&&"is-closing")},
@@ -3522,6 +4387,72 @@
     }
 
     // ── demo boxes ──
+    // Hardcoded groupings — the transitions.dev agent's initial scan of each
+    // prototype, baked in so the panel groups instantly with NO relay/agent
+    // round-trip. The active prototype's seed is written to window.__TX_SEED_GROUPS
+    // by App (PROTO_SEEDS map below). Member labels are cleaned up from the agent's
+    // output. Edit here if a prototype's transitions change, or clear the seed 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")]}]}]},
+    ];
+    // Menu dropdown (05-menu-dropdown.md) — the surface scales+fades from its
+    // trigger; the caret flips. Close runs shorter and dips to a smaller scale.
+    const DROPDOWN_SEED_GROUPS=[
+      {id:"dropdown",label:"Menu dropdown",component:null,phases:[
+        {id:"dropdown:open",phase:"open",label:"Open",stateTarget:".t-dropdown",fromState:null,toState:".is-open",members:[
+          {id:"dd-caret",label:"Caret",selector:".dd-caret",propertyTimings:[
+            _mpt("transform",250,_mEO)]},
+          {id:"dd-menu",label:"Menu",selector:".t-dropdown",propertyTimings:[
+            _mpt("transform",250,_mEO),_mpt("opacity",250,_mEO)]}]},
+        {id:"dropdown:close",phase:"close",label:"Close",stateTarget:".t-dropdown",fromState:".is-open",toState:null,members:[
+          {id:"dd-caret",label:"Caret",selector:".dd-caret",propertyTimings:[
+            _mpt("transform",250,_mEO)]},
+          {id:"dd-menu",label:"Menu",selector:".t-dropdown",propertyTimings:[
+            _mpt("transform",150,_mEO),_mpt("opacity",150,_mEO)]}]}]},
+    ];
+    // Modal (06-modal.md) — the dialog scales up from center over a fading
+    // backdrop; close dips back down. Both phases share the standard ease-out.
+    const MODAL_SEED_GROUPS=[
+      {id:"modal",label:"Modal",component:null,phases:[
+        {id:"modal:open",phase:"open",label:"Open",stateTarget:".t-modal",fromState:null,toState:".is-open",members:[
+          {id:"modal-backdrop",label:"Backdrop",selector:".modal-backdrop",propertyTimings:[
+            _mpt("opacity",250,_mEO)]},
+          {id:"modal-dialog",label:"Dialog",selector:".t-modal",propertyTimings:[
+            _mpt("transform",250,_mEO),_mpt("opacity",250,_mEO)]}]},
+        {id:"modal:close",phase:"close",label:"Close",stateTarget:".t-modal",fromState:".is-open",toState:null,members:[
+          {id:"modal-backdrop",label:"Backdrop",selector:".modal-backdrop",propertyTimings:[
+            _mpt("opacity",150,_mEO)]},
+          {id:"modal-dialog",label:"Dialog",selector:".t-modal",propertyTimings:[
+            _mpt("transform",150,_mEO),_mpt("opacity",150,_mEO)]}]}]},
+    ];
+    // Active prototype → seed. App writes window.__TX_SEED_GROUPS[proto] before the
+    // (remounted) panel runs its group scan, so each tab groups agent-free.
+    const PROTO_SEEDS={morph:MORPH_SEED_GROUPS,dropdown:DROPDOWN_SEED_GROUPS,modal:MODAL_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.
@@ -3553,6 +4484,100 @@
                 h("path",{d:"M10 4.5v11M4.5 10h11",stroke:"currentColor","strokeWidth":1.8,"strokeLinecap":"round"}))))));
     }
 
+    // Menu dropdown — transitions.dev (05-menu-dropdown.md). The .t-dropdown surface
+    // owns the scale+fade; close swaps .is-open for .is-closing, then drops the class
+    // after --dropdown-close-dur so the closing scale animates before it resets.
+    function BoxDropdown(){
+      const[open,setOpen]=useState(false);
+      const[closing,setClosing]=useState(false);
+      const ref=useRef(null), toRef=useRef(null);
+      const close=useCallback(()=>{
+        setOpen(false);setClosing(true);
+        if(toRef.current)clearTimeout(toRef.current);
+        toRef.current=setTimeout(()=>setClosing(false),150);
+      },[]);
+      const toggle=useCallback(()=>{setOpen(o=>{if(o){close();return false;}setClosing(false);return true;});},[close]);
+      useEffect(()=>{
+        const onDoc=e=>{if(ref.current&&!ref.current.contains(e.target))close();};
+        const onKey=e=>{if(e.key==="Escape")close();};
+        document.addEventListener("click",onDoc);
+        document.addEventListener("keydown",onKey);
+        return()=>{document.removeEventListener("click",onDoc);document.removeEventListener("keydown",onKey);if(toRef.current)clearTimeout(toRef.current);};
+      },[close]);
+      const item=(label,icon)=>h("button",{className:"dd-item",type:"button",onClick:close},
+        h(Ic,{name:icon,size:16}),label);
+      return h("div",{className:"card"},
+        h("h2",null,"Menu dropdown"),
+        h("p",null,"Click Menu. The panel grows from its trigger with a scale + fade and the caret flips. Closing runs shorter and dips to a smaller scale."),
+        h("div",{className:"dd-stage"},
+          h("div",{className:cx("dd",open&&"is-open"),ref},
+            h("button",{className:"dd-trigger",type:"button","aria-haspopup":"menu","aria-expanded":String(open),
+              onClick:e=>{e.stopPropagation();toggle();}},
+              "Menu",
+              h("svg",{className:"dd-caret",width:14,height:14,viewBox:"0 0 16 16",fill:"none","aria-hidden":"true"},
+                h("path",{d:"M4 6l4 4 4-4",stroke:"currentColor","strokeWidth":1.6,"strokeLinecap":"round","strokeLinejoin":"round"}))),
+            h("div",{className:cx("t-dropdown","dd-menu",open&&"is-open",closing&&"is-closing"),"data-origin":"top-left",role:"menu","aria-hidden":String(!open)},
+              h("div",{className:"dd-title"},"Actions"),
+              item("New file","copy"),
+              item("Refresh","restart"),
+              item("Settings","gear")))));
+    }
+
+    // Modal — transitions.dev (06-modal.md). The .t-modal dialog scales up from
+    // center over a fading .modal-backdrop; same close-then-cleanup pattern as the
+    // dropdown. Scoped to the stage (not full-viewport) so it stays in the scan root.
+    function BoxModal(){
+      const[open,setOpen]=useState(false);
+      const[closing,setClosing]=useState(false);
+      const toRef=useRef(null);
+      const close=useCallback(()=>{
+        setOpen(false);setClosing(true);
+        if(toRef.current)clearTimeout(toRef.current);
+        toRef.current=setTimeout(()=>setClosing(false),150);
+      },[]);
+      const openIt=useCallback(()=>{setClosing(false);setOpen(true);},[]);
+      useEffect(()=>{
+        const onKey=e=>{if(e.key==="Escape")close();};
+        document.addEventListener("keydown",onKey);
+        return()=>{document.removeEventListener("keydown",onKey);if(toRef.current)clearTimeout(toRef.current);};
+      },[close]);
+      const st=(base)=>cx(base,open&&"is-open",closing&&"is-closing");
+      return h("div",{className:"card"},
+        h("h2",null,"Modal"),
+        h("p",null,"Open the dialog. It scales up from 0.96 over a fading backdrop; closing dips back down. Click the backdrop or press Escape to dismiss."),
+        h("div",{className:"modal-stage"},
+          h("button",{className:"modal-open-btn",type:"button",onClick:openIt},"Open dialog"),
+          h("div",{className:st("modal-backdrop"),onClick:close,"aria-hidden":"true"}),
+          h("div",{className:st("t-modal"),role:"dialog","aria-modal":"true","aria-hidden":String(!open)},
+            h("div",{className:"modal-card-title"},"Delete project?"),
+            h("div",{className:"modal-card-body"},"This permanently removes the project and all of its files. This action can\u2019t be undone."),
+            h("div",{className:"modal-actions"},
+              h("button",{className:"modal-btn secondary",type:"button",onClick:close},"Cancel"),
+              h("button",{className:"modal-btn primary",type:"button",onClick:close},"Delete")))));
+    }
+
+    // Prototype switcher — sliding-pill tabs (16-tabs-sliding.md). JS measures the
+    // active tab's offsetLeft/Width onto the pill; CSS tweens. First paint + resize
+    // snap without a transition; only a user switch animates.
+    function ProtoTabs({value,onChange,items}){
+      const pillRef=useRef(null), tabRefs=useRef({}), firstRef=useRef(true);
+      const place=useCallback((animate)=>{
+        const t=tabRefs.current[value], pill=pillRef.current;
+        if(!t||!pill)return;
+        if(!animate){const prev=pill.style.transition;pill.style.transition="none";
+          pill.style.transform="translateX("+t.offsetLeft+"px)";pill.style.width=t.offsetWidth+"px";
+          void pill.offsetWidth;pill.style.transition=prev;}
+        else{pill.style.transform="translateX("+t.offsetLeft+"px)";pill.style.width=t.offsetWidth+"px";}
+      },[value]);
+      useLayoutEffect(()=>{place(firstRef.current?false:true);firstRef.current=false;},[value,place]);
+      useEffect(()=>{const onR=()=>place(false);window.addEventListener("resize",onR);return()=>window.removeEventListener("resize",onR);},[place]);
+      return h("div",{className:"proto-tabs",role:"tablist"},
+        h("span",{className:"proto-tabs-pill","aria-hidden":"true",ref:pillRef}),
+        items.map(it=>h("button",{key:it.key,role:"tab",type:"button","aria-selected":String(value===it.key),
+          className:cx("proto-tab",value===it.key&&"is-active"),ref:el=>{tabRefs.current[it.key]=el;},
+          onClick:()=>onChange(it.key)},it.label)));
+    }
+
     // ── live controls for the whole-panel reveal transition (demo harness) ──
     // transitions.dev motion tokens (values lifted verbatim from the skill's _root.css)
     // transitions.dev easing motion tokens. `token` is the actual skill CSS var
@@ -3652,19 +4677,51 @@
       );
     }
 
+    // Prototypes the demo can switch between. Each owns a component + a description
+    // + a baked-in seed grouping (PROTO_SEEDS) so the panel groups it agent-free.
+    const PROTOS=[
+      {key:"morph",   label:"Morph menu", comp:BoxMorph,    desc:"the plus \u2192 menu morph"},
+      {key:"dropdown",label:"Dropdown",   comp:BoxDropdown, desc:"an anchored menu dropdown"},
+      {key:"modal",   label:"Modal",      comp:BoxModal,    desc:"a centered modal dialog"},
+    ];
     function App(){
-      const rootRef=useRef(null);const registry=useMemo(()=>new TransitionRegistry(),[]);const[activeId,setActiveId]=useState(null);
-      useEffect(()=>{const root=rootRef.current??document.body;const scanner=new DomScanner(root,registry);scanner.start();return()=>{scanner.stop();};},[registry]);
+      const[proto,setProto]=useState("dropdown");
+      // Fresh registry per prototype so switching tabs starts the scan clean. The
+      // active prototype's baked grouping is published before the (remounted) panel
+      // runs its seeded group scan — see runGroupScan's window.__TX_SEED_GROUPS path.
+      if(typeof window!=="undefined")window.__TX_SEED_GROUPS=PROTO_SEEDS[proto];
+      const rootRef=useRef(null);const scanRef=useRef(null);
+      const registry=useMemo(()=>new TransitionRegistry(),[proto]);
+      const[activeId,setActiveId]=useState(null);
+      // Scan only the prototype stage (not the header), so the switcher tabs' own
+      // pill transition is never picked up as a demo transition.
+      useEffect(()=>{const root=scanRef.current??document.body;const scanner=new DomScanner(root,registry);scanner.start();return()=>{scanner.stop();};},[registry]);
       const ctx=useMemo(()=>({registry,activeId,setActiveId}),[registry,activeId]);
       // Demo-only tweak controls: hidden by default. Append ?controls to the URL
       // 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);
+      const active=PROTOS.find(p=>p.key===proto)||PROTOS[0];
       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("div",{className:"demo-grid"},h(BoxMorph))),
-        h(TimelinePanel));
+        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 live transitions.dev component: ",active.desc,". 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(ProtoTabs,{value:proto,onChange:setProto,items:PROTOS})),
+          h("div",{ref:scanRef,className:"demo-grid"},h(active.comp,{key:proto}))),
+        h(TimelinePanel,{key:proto}));
     }
 
     createRoot(document.getElementById("root")).render(h(App));