transitions-refine 0.1.3 → 0.3.0

package/demo.html

@@ -249,50 +249,6 @@
     @media (prefers-reduced-motion: reduce) {
       .tl-refine-btn:hover:not(:disabled) .tl-refine-sparks i { animation: none; } }
 
-    /* ── transport row ── */
-    .tl-transport { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--c-line); }
-    .tl-transport-left { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
-    .tl-transport-center { flex: 0 0 auto; display: flex; justify-content: center; }
-    .tl-transport-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
-    .tl-transport .tl-ghost-btn,
-    .tl-transport .tl-icon-btn,
-    .tl-transport .tl-play-btn { border-radius: 60px; }
-    .tl-timecode { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; color: var(--c-text); min-width: 70px; }
-    .tl-speed { font-variant-numeric: tabular-nums; }
-    .tl-zoom { position: relative; width: 72px; height: 15px; flex: none; }
-    /* slider — Logram design system (node 13064:2539): 15px frame, track at y=5, 15px knob at y=0 */
-    .tl-zoom-track { position: absolute; left: 0; right: 0; top: 5px; height: 5px; pointer-events: none;
-      background: rgba(115,115,115,0.1); border: 1px solid rgba(0,0,0,0.08); border-radius: 7px; box-sizing: border-box; }
-    .tl-zoom input[type="range"] { position: relative; z-index: 1; width: 100%; height: 15px; margin: 0;
-      -webkit-appearance: none; appearance: none; background: transparent; outline: none; cursor: pointer; }
-    .tl-zoom input[type="range"]::-webkit-slider-runnable-track { height: 15px; background: transparent; border: none; }
-    .tl-zoom input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
-      width: 15px; height: 15px; margin-top: 0; border-radius: 50%; background: #fff; cursor: pointer;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(126,126,126,0.1), inset 0 -1px 0 rgba(0,0,0,0.1); }
-    .tl-zoom input[type="range"]::-moz-range-track { height: 15px; background: transparent; border: none; }
-    .tl-zoom input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: none; border-radius: 50%;
-      background: #fff; cursor: pointer;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(126,126,126,0.1), inset 0 -1px 0 rgba(0,0,0,0.1); }
-    /* play/pause circle — Figma: drop shadow + inset ring overlay */
-    .tl-play-btn { position: relative; isolation: isolate; overflow: hidden;
-      display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
-      border: none; border-radius: 50%; background: var(--c-circle); color: #17181c;
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04); cursor: pointer;
-      transition: background 0.12s ease, scale 0.12s ease; }
-    .tl-play-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
-      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 0 -1px 0 0 rgba(0, 0, 0, 0.06),
-        inset 0 0 0 1px rgba(196, 196, 196, 0.10); pointer-events: none; }
-    .tl-play-btn > * { position: relative; z-index: 1; }
-    .tl-play-btn:hover:not(:disabled) { background: var(--c-circle-h); }
-    .tl-play-btn:active:not(:disabled) { background: var(--c-circle-a); scale: 0.96; }
-    .tl-play-btn:disabled { opacity: 0.5; cursor: default; }
-    /* center both icon layers in the swap cell so the differently-sized play (10×12)
-       and pause (16²) svgs share one center; nudge ONLY the play triangle right for
-       optical centering (skill: play-button triangles). left/position (not transform)
-       so it doesn't clash with the icon-swap scale animation; pause stays dead-center. */
-    .tl-play-btn .t-icon { place-self: center; }
-    .tl-play-btn .t-icon[data-icon="a"] { position: relative; left: 1px; }
-
     /* ── body / floating cards row ── */
     .tl-body { display: flex; flex: 1; min-height: 0; gap: 0; }
     .tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
@@ -323,9 +279,16 @@
       position: relative; z-index: 5; cursor: grabbing; }
     .tl-prop-row.reordering .tl-prop-grip { color: var(--c-ruler); cursor: grabbing; }
     .tl-prop-label { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--c-text-mut2); white-space: nowrap; overflow: hidden;
-      text-overflow: ellipsis; text-transform: capitalize; }
+      text-overflow: ellipsis; text-transform: capitalize; display: flex; align-items: center; gap: 6px; min-width: 0; }
     .tl-prop-row.selected .tl-prop-label { color: #171717; }
-    /* 16px left inset of the plot area (kept in sync with ruler/playhead/scrub) */
+    .tl-prop-member { flex: none; font-size: 11px; font-weight: 600; line-height: 14px; padding: 1px 6px; border-radius: 60px;
+      background: var(--c-sec, rgba(0,0,0,0.05)); color: var(--c-text-faint); text-transform: none; max-width: 96px;
+      overflow: hidden; text-overflow: ellipsis; }
+    .tl-prop-row.selected .tl-prop-member { color: var(--c-text-mut2); }
+    .tl-prop-prop { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    .tl-insp-member { display: inline-block; font-size: 11px; font-weight: 600; line-height: 14px; padding: 1px 6px; border-radius: 60px;
+      background: var(--c-sec, rgba(0,0,0,0.05)); color: var(--c-text-faint); text-transform: none; margin-right: 6px; vertical-align: middle; }
+    /* 16px left inset of the plot area (kept in sync with the ruler) */
     .tl-prop-track { position: relative; flex: 1; user-select: none; margin-left: 16px; }
     /* timeline line — capsule (fully rounded), Figma #eeeeef default / #e9e9e9 hover */
     .tl-bar { position: absolute; top: 50%; height: 24px; transform: translateY(-50%); background: var(--c-track);
@@ -345,13 +308,16 @@
     .tl-bar-grip { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; z-index: 2; }
     .tl-bar-grip.left { left: -5px; } .tl-bar-grip.right { right: -5px; }
 
-    .tl-playhead-layer { position: absolute; top: 14px; bottom: 0; left: 166px; right: 0;
-      pointer-events: none; z-index: 4; }
-    .tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #1A7AFF; transform: translateX(-1px); }
-    .tl-playhead-head { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 16.666px; height: 24px;
-      overflow: visible; filter: drop-shadow(0 1px 3px rgba(0,0,0,.25)); }
-    .tl-scrub-zone { position: absolute; top: 0; height: 30px; left: 166px; right: 0;
-      z-index: 6; cursor: ew-resize; }
+    /* draggable divider between the label column and the bars column. The hit
+       area is wide for easy grabbing; the visible line is thin and only accents
+       on hover / while dragging (matches the panel's 0.12s hover house style). */
+    .tl-col-resizer { position: absolute; top: 0; bottom: 0; width: 11px; transform: translateX(-50%);
+      cursor: col-resize; z-index: 6; display: flex; justify-content: center; }
+    .tl-col-resizer-line { width: 1px; height: 100%; background: transparent;
+      transition: background 0.12s ease, width 0.12s ease; }
+    .tl-col-resizer:hover .tl-col-resizer-line,
+    .tl-col-resizer.dragging .tl-col-resizer-line { width: 2px; background: #1A7AFF; }
+    @media (prefers-reduced-motion: reduce) { .tl-col-resizer-line { transition: none; } }
 
     /* ── value field (slider + input) — exact Figma "Value slider and input" ── */
     .tl-field-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
@@ -548,6 +514,9 @@
     .tl-menu-help svg { display: block; }
     .tl-menu-check { display: flex; color: var(--c-text-strong); flex: none; }
     .tl-menu-empty { padding: 10px; color: var(--c-disabled); font-size: 13px; }
+    .tl-menu-section { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; line-height: 14px;
+      letter-spacing: 0.02em; text-transform: uppercase; color: var(--c-text-faint); }
+    .tl-menu-section:not(:first-child) { margin-top: 2px; border-top: 1px solid var(--c-border, rgba(0,0,0,0.06)); padding-top: 8px; }
 
     /* ═════ transitions.dev — menu dropdown (verbatim) ═════ */
     .t-dropdown {
@@ -1009,6 +978,13 @@
       if(cur)parts.push(cur); return parts;
     }
     function transitionSignature(props,dur,del,ease) { return [...props].sort().join(",")+"|"+dur+"|"+del+"|"+ease; }
+    // Serialise a set of effective lanes back into a CSS `transition` shorthand.
+    function transitionLanesToCss(lanes){ return (lanes||[]).map(t=>`${t.property} ${formatCssTime(t.durationMs)} ${t.easing} ${formatCssTime(t.delayMs)}`).join(", "); }
+    // Elements we've live-applied edited timings to. Maps element → its ORIGINAL
+    // source lanes ({z}), so the DomScanner keeps the entry pinned to the source
+    // signature/timings even while our inline `transition` overrides the DOM —
+    // otherwise the timing-based id would churn and orphan the user's edits.
+    const _TX_LIVE_BASE = new WeakMap();
 
     const EASING_PRESETS = [
       { keyword:"linear", cubic:[0,0,1,1] }, { keyword:"ease", cubic:[0.25,0.1,0.25,1] },
@@ -1115,36 +1091,104 @@
       return out;
     }
 
-    // ── registry (per-property overrides) ──
+    // ── registry (per-lane overrides) ──
+    // A "lane" is one animated property of one element. For flat DOM transitions
+    // a lane's id is just the property; for agent-grouped phases it is
+    // `memberId::property`, so two members can each animate e.g. `opacity`.
+    // Selectable items are either flat DOM entries (kind "flat") or one phase of
+    // an agent group (kind "phase"); a phase fans out into per-member lanes.
     class TransitionRegistry {
-      entries=new Map(); listeners=new Set(); propOverrides=new Map(); snapshot=[]; effectiveCache=new Map();
-      register(e){ this.entries.set(e.id,e); this._notify(); }
-      unregister(id){ this.entries.delete(id); this.propOverrides.delete(id); this._notify(); }
-      replaceAll(list){ this.entries.clear(); for(const e of list) this.entries.set(e.id,e); this._notify(); }
+      entries=new Map();        // flat DOM entries by id
+      groups=[];                // agent groups: [{id,label,component,phases:[{id,phase,label,members:[...]}]}]
+      claimedEntryIds=new Set();// flat entries covered by a group member (hidden from "Ungrouped")
+      listeners=new Set(); laneOverrides=new Map(); snapshot=[]; effectiveCache=new Map();
+      register(e){ this.entries.set(e.id,e); this._recomputeClaimed(); this._notify(); }
+      unregister(id){ this.entries.delete(id); this.laneOverrides.delete(id); this._recomputeClaimed(); this._notify(); }
+      replaceAll(list){ this.entries.clear(); for(const e of list) this.entries.set(e.id,e); this._recomputeClaimed(); this._notify(); }
+      setGroups(groups){ this.groups = Array.isArray(groups)?groups:[]; this._recomputeClaimed(); this._notify(); }
+      clearGroups(){ this.groups=[]; this.claimedEntryIds.clear(); this._notify(); }
       get(id){ return this.entries.get(id); }
       getAll(){ return this.snapshot; }
       getEffective(id){ return this.effectiveCache.get(id); }
-      setPropOverride(id, prop, o){
-        const m = this.propOverrides.get(id) || {};
-        m[prop] = { ...m[prop], ...o };
-        this.propOverrides.set(id, m);
+      // overrides are keyed by selectable-item id, then by laneId
+      setPropOverride(id, laneId, o){
+        const m = this.laneOverrides.get(id) || {};
+        m[laneId] = { ...m[laneId], ...o };
+        this.laneOverrides.set(id, m);
         this._notify();
       }
-      clearOverride(id){ this.propOverrides.delete(id); this._notify(); }
-      getPropOverrides(id){ return this.propOverrides.get(id); }
+      clearOverride(id){ this.laneOverrides.delete(id); this._notify(); }
+      getPropOverrides(id){ return this.laneOverrides.get(id); }
       subscribe(fn){ this.listeners.add(fn); return ()=>this.listeners.delete(fn); }
+      // A flat entry is "claimed" when every live element it is bound to is also
+      // matched by some group member's selector, so we don't list it twice.
+      _recomputeClaimed(){
+        this.claimedEntryIds.clear();
+        if(!this.groups.length||typeof document==="undefined")return;
+        const memberEls=new Set();
+        for(const g of this.groups)for(const ph of (g.phases||[]))for(const m of (ph.members||[])){
+          if(!m.selector)continue;
+          let els=[];try{els=Array.from(document.querySelectorAll(m.selector));}catch{}
+          for(const el of els)memberEls.add(el);
+        }
+        if(!memberEls.size)return;
+        for(const[id,entry]of this.entries){
+          const els=((entry.bindings&&entry.bindings.elements)||[]).map(w=>w.deref&&w.deref()).filter(Boolean);
+          if(els.length&&els.every(el=>memberEls.has(el)))this.claimedEntryIds.add(id);
+        }
+      }
+      _baseLanesFlat(entry){
+        const timings=(entry.propertyTimings||entry.properties.map(p=>({property:p,durationMs:entry.durationMs,delayMs:entry.delayMs,easing:entry.easing})));
+        return timings.map(t=>({laneId:t.property,property:t.property,memberId:null,member:null,selector:entry.bindings&&entry.bindings.selector,durationMs:t.durationMs,delayMs:t.delayMs,easing:t.easing,spring:t.spring}));
+      }
+      _baseLanesPhase(phase){
+        const out=[];
+        for(const m of (phase.members||[])){
+          for(const t of (m.propertyTimings||[])){
+            out.push({laneId:m.id+"::"+t.property,property:t.property,memberId:m.id,member:m.label||m.id,selector:m.selector,toState:m.toState,durationMs:t.durationMs,delayMs:t.delayMs,easing:t.easing,spring:t.spring});
+          }
+        }
+        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};});
+      }
       _notify(){
-        this.snapshot=Array.from(this.entries.values());
         this.effectiveCache.clear();
+        const items=[];
+        // 1) agent groups → one selectable item per phase
+        for(const g of this.groups){
+          for(const ph of (g.phases||[])){
+            const id=ph.id||(g.id+":"+(ph.phase||ph.label||"phase"));
+            const po=this.laneOverrides.get(id)||{};
+            const baseLanes=this._baseLanesPhase(ph);
+            const effTimings=this._applyOverrides(baseLanes,po);
+            const repDur=effTimings.reduce((mx,t)=>Math.max(mx,(t.durationMs||0)+(t.delayMs||0)),0);
+            const members=(ph.members||[]).map(m=>{
+              const mb=baseLanes.filter(l=>l.memberId===m.id);
+              return {memberId:m.id,label:m.label||m.id,selector:m.selector,toState:m.toState,
+                lanes:this._applyOverrides(mb,po),baseLanes:mb};
+            });
+            const item={id,kind:"phase",groupId:g.id,groupLabel:g.label||g.id,component:g.component||null,
+              phase:ph.phase||null,phaseLabel:ph.label||ph.phase||"Phase",
+              stateTarget:ph.stateTarget||null,fromState:(ph.fromState??null),toState:(ph.toState??null),
+              label:(g.label||g.id)+" · "+(ph.label||ph.phase||"Phase"),durationMs:repDur,
+              members,effectiveTimings:effTimings,baseLanes};
+            this.effectiveCache.set(id,item);
+            items.push(item);
+          }
+        }
+        // 2) flat DOM entries not claimed by a group → "Ungrouped"
         for(const[id,entry]of this.entries){
-          const po = this.propOverrides.get(id) || {};
-          const timings = (entry.propertyTimings || entry.properties.map(p=>({property:p,durationMs:entry.durationMs,delayMs:entry.delayMs,easing:entry.easing})));
-          const effTimings = timings.map(t => {
-            const o = po[t.property];
-            return { property:t.property, durationMs:o?.durationMs??t.durationMs, delayMs:o?.delayMs??t.delayMs, easing:o?.easing??t.easing, spring:o?.spring??t.spring };
-          });
-          this.effectiveCache.set(id, { ...entry, effectiveTimings: effTimings });
+          if(this.claimedEntryIds.has(id))continue;
+          const po=this.laneOverrides.get(id)||{};
+          const baseLanes=this._baseLanesFlat(entry);
+          const effTimings=this._applyOverrides(baseLanes,po);
+          const item={...entry,kind:"flat",groupId:null,groupLabel:null,effectiveTimings:effTimings,baseLanes};
+          this.effectiveCache.set(id,item);
+          items.push(item);
         }
+        this.snapshot=items;
         for(const fn of this.listeners) fn(this.snapshot);
       }
     }
@@ -1259,6 +1303,53 @@
       for(const p of keys)from[p]=cs.getPropertyValue(p)||cs[_txCamel(p)]||"";
       return {from,to};
     }
+    // Toggle a phase's state class/attribute (e.g. ".is-open" or "[data-open]")
+    // and read the resulting computed values, so a phase plays its real end-state
+    // even when the source uses a toggled class the DOM isn't currently in.
+    function _txToState(el,et,toState){
+      if(typeof document==="undefined"||!el.matches||!toState)return null;
+      const props=et.map(t=>t.property).filter(p=>p&&p!=="all");
+      if(!props.length)return null;
+      const s=String(toState).trim();
+      let applied=null; // {undo}
+      try{
+        if(s[0]==="."){const c=s.slice(1);if(c&&!el.classList.contains(c)){el.classList.add(c);applied=()=>el.classList.remove(c);}}
+        else if(s[0]==="["){
+          const m=s.match(/^\[\s*([\w-]+)\s*(?:([~|^$*]?=)\s*"?([^"\]]*)"?\s*)?\]$/);
+          if(m){const name=m[1],val=m[3]!=null?m[3]:"";if(el.getAttribute(name)!==val){el.setAttribute(name,val);applied=()=>el.removeAttribute(name);}}
+        }
+      }catch{}
+      if(!applied)return null; // already in that state, or unparseable
+      const cs=getComputedStyle(el);const to={};
+      for(const p of props)to[p]=cs.getPropertyValue(p)||cs[_txCamel(p)]||"";
+      try{applied();}catch{}
+      const cs0=getComputedStyle(el);const from={};
+      for(const p of props)from[p]=cs0.getPropertyValue(p)||cs0[_txCamel(p)]||"";
+      const keys=Object.keys(to).filter(p=>to[p]!=null&&to[p]!==""&&to[p]!==from[p]);
+      if(!keys.length)return null;
+      const f={},t={};for(const p of keys){f[p]=from[p];t[p]=to[p];}
+      return {from:f,to:t};
+    }
+
+    // Add/remove a single state token (".class" or "[attr=val]"/"[attr]") on an
+    // element. Returns false for tokens we can't toggle (e.g. pseudo ":hover").
+    function _applyStateToken(el,token,add){
+      const s=String(token||"").trim();
+      if(!s)return true;
+      if(s[0]==="."){const c=s.slice(1);if(!c)return false;if(add)el.classList.add(c);else el.classList.remove(c);return true;}
+      if(s[0]==="["){
+        const m=s.match(/^\[\s*([\w-]+)\s*(?:[~|^$*]?=\s*"?([^"\]]*)"?\s*)?\]$/);
+        if(!m)return false;
+        const name=m[1],val=m[2]!=null?m[2]:"";
+        if(add)el.setAttribute(name,val);else el.removeAttribute(name);
+        return true;
+      }
+      return false; // pseudo (:hover/:focus) or unrecognised → not class-toggleable
+    }
+    function _tokenToggleable(token){
+      const s=String(token||"").trim();
+      return !s || s[0]==="."||s[0]==="[";
+    }
 
     class PreviewController {
       state="idle"; listeners=new Set(); cleanups=[]; animations=[]; progressListeners=new Set(); _rafId=null; scanner=null; _gen=0;
@@ -1269,7 +1360,25 @@
       subscribe(fn){this.listeners.add(fn);return()=>this.listeners.delete(fn);}
       onProgress(fn){this.progressListeners.add(fn);return()=>this.progressListeners.delete(fn);}
       play(entry){this.stop();this._gen++;this._current=entry;
-        if(this.scanner)this.scanner.pause();if(entry.bindings.type==="css")this._playCss(entry,this._gen);this._setState("playing");}
+        if(this.scanner)this.scanner.pause();this._playCss(entry,this._gen);this._setState("playing");}
+      // Resolve a selectable item to a flat list of {el, et, toState} arm targets.
+      // Phase items fan out to their members (selector may match several elements,
+      // e.g. staggered items); flat items use their bound DOM elements.
+      _targets(entry){
+        const out=[];
+        if(entry.kind==="phase"){
+          for(const m of (entry.members||[])){
+            if(!m.selector||!m.lanes||!m.lanes.length)continue;
+            let els=[];try{els=Array.from(document.querySelectorAll(m.selector));}catch{}
+            for(const el of els)out.push({el,et:m.lanes,toState:m.toState});
+          }
+          return out;
+        }
+        if(!entry.bindings||entry.bindings.type!=="css")return out;
+        const et=entry.effectiveTimings||entry.properties.map(p=>({property:p,durationMs:entry.durationMs,delayMs:entry.delayMs,easing:entry.easing}));
+        for(const wr of entry.bindings.elements){const el=wr.deref&&wr.deref();if(el)out.push({el,et,toState:null});}
+        return out;
+      }
       pause(){if(this.state!=="playing")return;for(const a of this.animations){try{a.pause();}catch{}}this._stopPL();this._setState("paused");}
       resume(){if(this.state!=="paused")return;for(const a of this.animations){try{a.play();}catch{}}this._startPL();this._setState("playing");}
       stop(){this._stopPL();for(const a of this.animations){try{a.cancel();}catch{}}this.animations=[];for(const c of this.cleanups)c();this.cleanups=[];this._ep(0);if(this.scanner)this.scanner.unpause();this._setState("idle");}
@@ -1278,20 +1387,81 @@
         this.stop();this._gen++;const gen=this._gen;
         this._pendingSeek=seekMs;
         if(this.scanner)this.scanner.pause();
-        if(entry.bindings.type!=="css")return;
+        const armed=this._armAll(entry);
+        const els=armed.els;
+        if(!els.length){this._setState("paused");if(seekMs!=null)this._ep(seekMs);return;}
+        this.cleanups.push(armed.restore);
         this.animations=[];
-        const et=entry.effectiveTimings||entry.properties.map(p=>({property:p,durationMs:entry.durationMs,delayMs:entry.delayMs,easing:entry.easing}));
-        for(const wr of entry.bindings.elements){const el=wr.deref();if(!el)continue;
-          const restore=this._arm(el,et);
-          requestAnimationFrame(()=>{if(this._gen!==gen)return;const running=el.getAnimations();
-            for(const a of running){a.pause();a.playbackRate=this.rate;this.animations.push(a);}
-            const t=this._pendingSeek??seekMs;
-            if(t!=null){for(const a of this.animations){try{a.currentTime=t;}catch{}}this._ep(t);}
-          });
-          this.cleanups.push(restore);}
+        requestAnimationFrame(()=>{if(this._gen!==gen)return;
+          const running=[];for(const el of els){for(const a of el.getAnimations()){a.pause();a.playbackRate=this.rate;running.push(a);}}
+          this.animations=running;
+          const t=this._pendingSeek??seekMs;
+          if(t!=null){for(const a of this.animations){try{a.currentTime=t;}catch{}}this._ep(t);}
+        });
         this._setState("paused");
         if(seekMs!=null)this._ep(seekMs);
       }
+      // Snapshot/restore the toggled state on a root element.
+      _snapshotState(el,toggleTokens){
+        const attrs={},classes={};
+        for(const t of toggleTokens){const s=String(t).trim();
+          if(s[0]===".")classes[s.slice(1)]=el.classList.contains(s.slice(1));
+          else if(s[0]==="["){const m=s.match(/^\[\s*([\w-]+)/);if(m)attrs[m[1]]=el.getAttribute(m[1]);}}
+        return {attrs,classes};
+      }
+      _restoreState(el,snap){
+        for(const c in snap.classes){if(snap.classes[c])el.classList.add(c);else el.classList.remove(c);}
+        for(const n in snap.attrs){const v=snap.attrs[n];if(v==null)el.removeAttribute(n);else el.setAttribute(n,v);}
+      }
+      _setRootState(el,target,toggleTokens){
+        for(const t of toggleTokens)_applyStateToken(el,t,false);
+        if(target)_applyStateToken(el,target,true);
+      }
+      // Arm a whole phase by toggling the REAL driving state on its stateTarget,
+      // so the actual CSS animates every member in the correct direction (open
+      // base→state, close state→base). Edited timings are applied inline on the
+      // member elements so they override the source. Returns {els, restore} or
+      // null to fall back to per-member arming.
+      _armPhase(entry,root){
+        const fromState=entry.fromState??null, toState=entry.toState??null;
+        if(![fromState,toState].every(_tokenToggleable))return null; // pseudo states → legacy
+        const toggleTokens=[fromState,toState].filter(Boolean);
+        if(!toggleTokens.length)return null;
+        const memberEls=[];
+        for(const m of (entry.members||[])){
+          if(!m.selector||!m.lanes||!m.lanes.length)continue;
+          let els=[];try{els=Array.from(document.querySelectorAll(m.selector));}catch{}
+          for(const el of els)memberEls.push({el,lanes:m.lanes});
+        }
+        if(!memberEls.length)return null;
+        const savedRoot=this._snapshotState(root,toggleTokens);
+        const savedStyles=memberEls.map(({el})=>el.style.cssText);
+        // 1. suppress transitions and commit the FROM state
+        for(const {el} of memberEls)el.style.transition="none";
+        this._setRootState(root,fromState,toggleTokens);
+        void root.offsetWidth;for(const {el} of memberEls)void el.offsetWidth;
+        // 2. apply the (possibly edited) per-member timings inline
+        for(const {el,lanes} of memberEls){
+          el.style.transition=lanes.map(t=>`${t.property} ${formatCssTime(t.durationMs)} ${t.easing} ${formatCssTime(t.delayMs)}`).join(", ");
+        }
+        // 3. toggle to the TO state → real CSS transitions fire on every member
+        this._setRootState(root,toState,toggleTokens);
+        const restore=()=>{try{this._restoreState(root,savedRoot);}catch{}
+          memberEls.forEach(({el},i)=>{try{el.style.cssText=savedStyles[i];}catch{}});};
+        return {els:memberEls.map(m=>m.el),restore};
+      }
+      // Resolve an entry to armed element(s) + a restore fn. Phase items with a
+      // toggleable stateTarget use _armPhase; everything else uses per-target arm.
+      _armAll(entry){
+        if(entry&&entry.kind==="phase"&&entry.stateTarget&&typeof document!=="undefined"){
+          let root=null;try{root=document.querySelector(entry.stateTarget);}catch{}
+          if(root){const r=this._armPhase(entry,root);if(r)return r;}
+        }
+        const targets=this._targets(entry);
+        const els=[],restores=[];
+        for(const {el,et,toState} of targets){restores.push(this._arm(el,et,toState));els.push(el);}
+        return {els,restore:()=>{for(const c of restores){try{c();}catch{}}}};
+      }
       seek(timeMs){
         if(this.state==="idle")return;
         if(this.state==="playing"){for(const a of this.animations){try{a.pause();}catch{}}this._stopPL();this._setState("paused");}
@@ -1307,10 +1477,12 @@
       //   3. a synthetic opacity/transform pulse to preview the timing,
       //   4. click the element (last resort, may have side effects).
       // Returns a restore fn.
-      _arm(el,et){
+      _arm(el,et,toState){
         const saved=el.style.cssText;
         const tv=et.map(t=>`${t.property} ${formatCssTime(t.durationMs)} ${t.easing} ${formatCssTime(t.delayMs)}`).join(", ");
-        const states=_txCaptured(el,et)||_txDiscover(el,et);
+        // toState (a phase's driving class/attr) is the most reliable source of
+        // the real end-state; fall back to a captured run, then CSSOM discovery.
+        const states=(toState&&_txToState(el,et,toState))||_txCaptured(el,et)||_txDiscover(el,et);
         if(states){
           const props=et.map(t=>t.property).filter(p=>states.from[p]!=null&&states.to[p]!=null);
           if(props.length){
@@ -1335,13 +1507,18 @@
         el.style.transition=tv;el.click();
         return ()=>{try{el.style.cssText=saved;}catch{}};
       }
-      _playCss(entry,gen){if(entry.bindings.type!=="css")return;this.animations=[];
-        const et = entry.effectiveTimings || entry.properties.map(p=>({property:p,durationMs:entry.durationMs,delayMs:entry.delayMs,easing:entry.easing}));
-        for(const wr of entry.bindings.elements){const el=wr.deref();if(!el)continue;
-          const restore=this._arm(el,et);
-          requestAnimationFrame(()=>{if(this._gen!==gen)return;const running=el.getAnimations();for(const a of running){a.playbackRate=this.rate;this.animations.push(a);}this._startPL();
-            if(running.length>0){Promise.allSettled(running.map(a=>a.finished)).then(()=>{if(this._gen!==gen||this.state!=="playing")return;if(this.loop&&this._current){this.play(this._current);}else{this._finish();}});}else{this._finish();}});
-          this.cleanups.push(restore);}}
+      _playCss(entry,gen){
+        const armed=this._armAll(entry);
+        const els=armed.els;
+        this.animations=[];
+        if(!els.length){this._finish();return;}
+        this.cleanups.push(armed.restore);
+        requestAnimationFrame(()=>{if(this._gen!==gen)return;
+          const running=[];for(const el of els){for(const a of el.getAnimations()){a.playbackRate=this.rate;running.push(a);}}
+          this.animations=running;this._startPL();
+          const onDone=()=>{if(this._gen!==gen||this.state!=="playing")return;if(this.loop&&this._current){this.play(this._current);}else{this._finish();}};
+          if(running.length>0){Promise.allSettled(running.map(a=>a.finished)).then(onDone);}else{onDone();}
+        });}
       _startPL(){this._stopPL();const tick=()=>{if(this.animations.length>0){let cur=0;for(const a of this.animations){const c=Number(a.currentTime)||0;if(c>cur)cur=c;}this._ep(cur);}this._rafId=requestAnimationFrame(tick);};this._rafId=requestAnimationFrame(tick);}
       _stopPL(){if(this._rafId!==null){cancelAnimationFrame(this._rafId);this._rafId=null;}}
       _ep(p){for(const fn of this.progressListeners)fn(p);}
@@ -1353,7 +1530,7 @@
       observer=null;rafId=null;running=false;paused=false;
       constructor(root,reg){this.root=root;this.registry=reg;}
       pause(){this.paused=true;} unpause(){this.paused=false;this._sched();}
-      start(){if(this.running)return;this.running=true;_txInstallCapture();this.scan();this.observer=new MutationObserver(()=>this._sched());this.observer.observe(this.root,{childList:true,subtree:true,attributes:true,attributeFilter:["class","style"]});}
+      start(){if(this.running)return;this.running=true;this.scan();this.observer=new MutationObserver(()=>this._sched());this.observer.observe(this.root,{childList:true,subtree:true,attributes:true,attributeFilter:["class","style"]});}
       stop(){this.running=false;this.observer?.disconnect();this.observer=null;if(this.rafId!==null){cancelAnimationFrame(this.rafId);this.rafId=null;}}
       _sched(){if(this.rafId!==null)return;this.rafId=requestAnimationFrame(()=>{this.rafId=null;if(this.running&&!this.paused)this.scan();});}
       scan(){const seen=new Map();const w=document.createTreeWalker(this.root,NodeFilter.SHOW_ELEMENT);let n=w.currentNode;while(n){if(n instanceof HTMLElement)this._proc(n,seen);n=w.nextNode();}this.registry.replaceAll(Array.from(seen.values()));}
@@ -1365,7 +1542,11 @@
         const durs=(s.transitionDuration||"0s").split(",");
         const dels=(s.transitionDelay||"0s").split(",");
         const eass=splitCssValues(s.transitionTimingFunction||"ease");
-        const z=zipTransitionLists(props,durs,dels,eass);
+        let z=zipTransitionLists(props,durs,dels,eass);
+        // If we've live-applied edited timings here, keep the entry pinned to the
+        // ORIGINAL source lanes so its id/overrides stay stable across rescans.
+        const _lb=_TX_LIVE_BASE.get(el);
+        if(_lb){ if(_lb.z&&_lb.z.length) z=_lb.z; else return; }
         if(!z.length||z.every(x=>x.durationMs===0&&x.delayMs===0))return;
         const pDur=z[0].durationMs,pDel=z[0].delayMs,pEase=z[0].easing;
         const allP=z.map(x=>x.property);
@@ -1383,19 +1564,11 @@
     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]));}
     function useActive(){const{activeId,setActiveId,registry}=useContext(TimelineCtx);const active=useSyncExternalStore(useCallback(cb=>registry.subscribe(cb),[registry]),useCallback(()=>activeId?registry.getEffective(activeId):undefined,[registry,activeId]),useCallback(()=>activeId?registry.getEffective(activeId):undefined,[registry,activeId]));return{active,setActiveId};}
-    function usePlayback(){const{preview,registry,activeId}=useContext(TimelineCtx);const state=useSyncExternalStore(useCallback(cb=>preview.subscribe(cb),[preview]),useCallback(()=>preview.getState(),[preview]),useCallback(()=>preview.getState(),[preview]));
-      return{state,play:useCallback(()=>{if(!activeId)return;const e=registry.getEffective(activeId);if(e)preview.play(e);},[preview,registry,activeId]),pause:useCallback(()=>preview.pause(),[preview]),resume:useCallback(()=>preview.resume(),[preview]),restart:useCallback(()=>{if(!activeId)return;const e=registry.getEffective(activeId);if(e)preview.restart(e);},[preview,registry,activeId]),stop:useCallback(()=>preview.stop(),[preview])};}
     function usePropOverride(){const{registry,activeId}=useContext(TimelineCtx);return{setPropOverride:useCallback((prop,o)=>{if(activeId)registry.setPropOverride(activeId,prop,o);},[registry,activeId])};}
 
     // ── components ──
-    const BASE_SCALE_MS = 5000;
-    const ZOOM_MIN = 25;
-    const ZOOM_MAX = 400;
-    const ZOOM_DEFAULT = 100;
-    const scaleFromZoom = zoom => Math.round(BASE_SCALE_MS * 100 / zoom);
     const LABEL_W = 150;
     const CLOSE_MS = 150;
-    const SPEEDS = [0.25, 0.5, 1, 2];
     const DURATION_TOKENS = [
       {label:"Duration-fast", ms:150, usage:"Quick state changes — hovers, toggles, button presses, dropdown & modal close, text swaps."},
       {label:"Duration-medium", ms:250, usage:"Standard UI motion — icon swaps, dropdown & modal open, sliding tabs, page slides."},
@@ -1409,8 +1582,6 @@
       {label:"Long", ms:300, usage:"Pronounced wait — use sparingly to draw attention."},
     ];
     function cx(...a){ return a.filter(Boolean).join(" "); }
-    function fmtTimecode(ms){ const m=Math.floor(ms/60000); const s=Math.floor((ms%60000)/1000); const c=Math.floor((ms%1000)/10); const p=n=>String(n).padStart(2,"0"); return p(m)+":"+p(s)+":"+p(c); }
-    function fmtSpeed(s){ return s+"x"; }
 
     // ── icons ──
     // Exact SVGs exported from the Logram ❖ Design System Figma file (no recreations).
@@ -1445,13 +1616,6 @@
         style:{display:"block"},dangerouslySetInnerHTML:{__html:ic.svg}});
     }
 
-    function usePreviewTime(){
-      const{preview}=useContext(TimelineCtx);
-      const[ms,setMs]=useState(0);
-      useEffect(()=>preview.onProgress(setMs),[preview]);
-      return ms;
-    }
-
     // portaled, origin-aware dropdown surface (transitions.dev menu-dropdown)
     function Dropdown({open,onClose,triggerRef,width,align,children}){
       const ref=useRef(null);
@@ -1748,17 +1912,19 @@
           h("div",{className:"tl-refine-foot"},foot)));
     }
 
-    // Diff the active transition's effective (edited/refined) timings against its
+    // Diff the active item's effective (edited/refined) lanes against their
     // 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){
       if(!active)return[];
-      const base=active.propertyTimings||(active.properties||[]).map(p=>({property:p,durationMs:active.durationMs,delayMs:active.delayMs,easing:active.easing}));
-      const bmap=new Map(base.map(t=>[t.property,t]));
+      const base=active.baseLanes||[];
+      const bmap=new Map(base.map(t=>[t.laneId,t]));
       const out=[];
       for(const t of (active.effectiveTimings||[])){
-        const b=bmap.get(t.property);if(!b)continue;
+        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,
+          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}});
         }
@@ -1766,10 +1932,26 @@
       return out;
     }
 
-    function Header({entries,active,onSelect,onReset,onCopy,copied,loop,setLoop,snap,setSnap,onMinimize,onRefine,refineActive,onAccept,acceptState,acceptDisabled,acceptError}){
+    function Header({entries,active,onSelect,onReset,onCopy,copied,snap,setSnap,onMinimize,onRefine,refineActive,onAccept,acceptState,acceptDisabled,acceptError,scanning}){
       const[pick,setPick]=useState(false);
       const[setg,setSetg]=useState(false);
       const pickRef=useRef(null), gearRef=useRef(null);
+      // Split selectable items into agent groups (component → phases) and the
+      // flat, ungrouped DOM transitions, preserving order.
+      const groupList=[]; const groupMap=new Map(); const flatItems=[];
+      for(const e of entries){
+        if(e.kind==="phase"){
+          let g=groupMap.get(e.groupId);
+          if(!g){g={id:e.groupId,label:e.groupLabel,phases:[]};groupMap.set(e.groupId,g);groupList.push(g);}
+          g.phases.push(e);
+        }else flatItems.push(e);
+      }
+      const phaseItem=(e)=>h(MenuItem,{key:e.id,active:active&&e.id===active.id,onClick:()=>{onSelect(e.id);setPick(false);},
+        right:active&&e.id===active.id&&h("span",{className:"tl-menu-check"},h(Ic,{name:"check"}))},
+        h("span",null,e.phaseLabel,h("span",{className:"tl-menu-dim"}," "+e.durationMs+"ms")));
+      const flatItem=(e)=>h(MenuItem,{key:e.id,active:active&&e.id===active.id,onClick:()=>{onSelect(e.id);setPick(false);},
+        right:active&&e.id===active.id&&h("span",{className:"tl-menu-check"},h(Ic,{name:"check"}))},
+        h("span",null,e.label,h("span",{className:"tl-menu-dim"}," "+e.durationMs+"ms")));
       return h("div",{className:"tl-header"},
         h("span",{className:"tl-header-label"},"Selected"),
         h("button",{ref:pickRef,className:cx("tl-ghost-btn",pick&&"is-active"),disabled:!active,onClick:()=>setPick(v=>!v)},
@@ -1779,13 +1961,16 @@
         h(Dropdown,{open:pick,onClose:()=>setPick(false),triggerRef:pickRef,width:Math.max(240,(pickRef.current&&pickRef.current.offsetWidth)||240),align:"left"},
           entries.length===0
             ? h("div",{className:"tl-menu-empty"},"No transitions found")
-            : entries.map(e=>h(MenuItem,{key:e.id,active:active&&e.id===active.id,onClick:()=>{onSelect(e.id);setPick(false);},
-                right:active&&e.id===active.id&&h("span",{className:"tl-menu-check"},h(Ic,{name:"check"}))},
-                h("span",null,e.label,h("span",{className:"tl-menu-dim"}," "+e.durationMs+"ms")))) ),
-        h("span",{className:"tl-header-count"},entries.length+" transition"+(entries.length===1?"":"s")+" found"),
+            : h(React.Fragment,null,
+                ...groupList.map(g=>h(React.Fragment,{key:g.id},
+                  h("div",{className:"tl-menu-section"},g.label),
+                  ...g.phases.map(phaseItem))),
+                flatItems.length>0&&groupList.length>0&&h("div",{className:"tl-menu-section"},"Ungrouped"),
+                ...flatItems.map(flatItem))),
+        h("span",{className:"tl-header-count"},
+          scanning?"Grouping…":entries.length+" transition"+(entries.length===1?"":"s")+" found"),
         h("button",{ref:gearRef,className:cx("tl-icon-btn",setg&&"is-active"),title:"Settings",onClick:()=>setSetg(v=>!v)},h(Ic,{name:"gear"})),
         h(Dropdown,{open:setg,onClose:()=>setSetg(false),triggerRef:gearRef,width:210,align:"right"},
-          h(MenuItem,{onClick:()=>setLoop(v=>!v),right:loop&&h("span",{className:"tl-menu-check"},h(Ic,{name:"check"}))},"Loop playback"),
           h(MenuItem,{onClick:()=>setSnap(v=>!v),right:snap&&h("span",{className:"tl-menu-check"},h(Ic,{name:"check"}))},"Snap to grid")),
         h("span",{className:"t-tt-wrap"},
           h("button",{className:"tl-sec-btn t-tt-trigger",disabled:!active,onClick:onReset},"Reset"),
@@ -1826,7 +2011,7 @@
       );
     }
 
-    function PropTrack({property, delayMs, durationMs, selected, dragging, onSelect, onReorder, onDelayChange, onDurationChange, snap, scaleMs, lockDuration}){
+    function PropTrack({property, member, delayMs, durationMs, selected, dragging, onSelect, onReorder, 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]);
@@ -1854,9 +2039,11 @@
 
       const delPct=(delayMs/scaleMs)*100; const durPct=(durationMs/scaleMs)*100;
       return h("div",{className:cx("tl-prop-row",selected&&"selected",dragging&&"reordering",lockDuration&&"is-spring"),onClick:onSelect},
-        h("div",{className:"tl-prop-head"},
+        h("div",{className:"tl-prop-head",style:labelW!=null?{flexBasis:labelW+"px"}:undefined},
           h("span",{className:"tl-prop-grip",title:"Drag to reorder",onMouseDown:onReorder},h(Ic,{name:"dots"})),
-          h("span",{className:"tl-prop-label"},property)),
+          h("span",{className:"tl-prop-label"},
+            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),
             title:lockDuration?"Spring duration is derived \u2014 drag to move, resize is locked":undefined},
@@ -2235,82 +2422,63 @@
       );
     }
 
-    function ScrubZone({scaleMs}){
-      const { preview, registry, activeId } = useContext(TimelineCtx);
-      const areaRef = useRef(null);
-      const startedRef = useRef(false);
-
-      const pxToMs = useCallback(clientX=>{
-        if(!areaRef.current) return 0;
-        const rect = areaRef.current.getBoundingClientRect();
-        const ratio = Math.max(0, Math.min((clientX - rect.left) / rect.width, 1));
-        return ratio * scaleMs;
-      },[scaleMs]);
-
-      const doSeek = useCallback(ms=>{
-        if(preview.getState()==="idle" && !startedRef.current){
-          if(!activeId) return;
-          const entry = registry.getEffective(activeId);
-          if(!entry) return;
-          startedRef.current = true;
-          preview.playPaused(entry, ms);
-        } else {
-          preview.seek(ms);
-        }
-      },[preview,registry,activeId]);
-
-      const startScrub = useCallback(e=>{
-        e.preventDefault();
-        startedRef.current = false;
-        doSeek(pxToMs(e.clientX));
-        const onMove = e2 => doSeek(pxToMs(e2.clientX));
-        const onUp = () => { startedRef.current = false; window.removeEventListener("mousemove",onMove); window.removeEventListener("mouseup",onUp); };
-        window.addEventListener("mousemove",onMove);
-        window.addEventListener("mouseup",onUp);
-      },[doSeek,pxToMs]);
-
-      return h("div",{className:"tl-scrub-zone",ref:areaRef,onMouseDown:startScrub});
-    }
-
-    function Tracks({et, selProp, setSelProp, onPropChange, snap, scaleMs}){
-      const t = usePreviewTime();
-      const ratio = Math.min(t / scaleMs, 1);
+    function Tracks({et, selLane, setSelLane, onPropChange, snap, scaleMs}){
       const ROW_H = 48;
       const rowsRef = useRef(null);
+      const tracksRef = useRef(null);
       const [order, setOrder] = useState([]);
-      const [dragProp, setDragProp] = useState(null);
-      const propKey = et.map(x=>x.property).join("|");
+      const [dragLane, setDragLane] = useState(null);
+      // Width of the label column (shared by the ruler spacer + every prop-row
+      // head). Draggable via the divider; the bars column is flex:1 so it just
+      // takes the remaining space and the bars stay proportional to scaleMs.
+      const LABEL_MIN = 96, LABEL_TRACK_MIN = 160;
+      const [labelW, setLabelW] = useState(LABEL_W);
+      const [colDragging, setColDragging] = useState(false);
+      const startColResize = useCallback(e=>{
+        e.preventDefault(); e.stopPropagation();
+        const startX = e.clientX, startW = labelW;
+        const maxW = tracksRef.current
+          ? Math.max(LABEL_MIN, tracksRef.current.getBoundingClientRect().width - LABEL_TRACK_MIN)
+          : 360;
+        setColDragging(true);
+        document.body.style.cursor = "col-resize"; document.body.style.userSelect = "none";
+        const onMove = e2 => setLabelW(Math.max(LABEL_MIN, Math.min(maxW, startW + (e2.clientX - startX))));
+        const onUp = () => { setColDragging(false); document.body.style.cursor=""; document.body.style.userSelect="";
+          window.removeEventListener("mousemove",onMove); window.removeEventListener("mouseup",onUp); };
+        window.addEventListener("mousemove",onMove); window.addEventListener("mouseup",onUp);
+      },[labelW]);
+      const laneKey = et.map(x=>x.laneId).join("|");
       useEffect(()=>{
-        const props = et.map(x=>x.property);
+        const ids = et.map(x=>x.laneId);
         setOrder(prev=>{
-          const kept = prev.filter(p=>props.includes(p));
-          const added = props.filter(p=>!kept.includes(p));
+          const kept = prev.filter(p=>ids.includes(p));
+          const added = ids.filter(p=>!kept.includes(p));
           return [...kept, ...added];
         });
-      },[propKey]);
-      const orderedRows = order.map(p=>et.find(x=>x.property===p)).filter(Boolean);
-      const startReorder = useCallback((property,e)=>{
+      },[laneKey]);
+      const orderedRows = order.map(p=>et.find(x=>x.laneId===p)).filter(Boolean);
+      const startReorder = useCallback((laneId,e)=>{
         e.preventDefault(); e.stopPropagation();
-        setSelProp(property);
-        setDragProp(property);
+        setSelLane(laneId);
+        setDragLane(laneId);
         const top = rowsRef.current ? rowsRef.current.getBoundingClientRect().top : 0;
         const onMove = e2=>{
           const idx = Math.floor((e2.clientY - top) / ROW_H);
           setOrder(prev=>{
-            const cur = prev.indexOf(property);
+            const cur = prev.indexOf(laneId);
             if(cur<0) return prev;
             const target = Math.max(0, Math.min(prev.length-1, idx));
             if(target===cur) return prev;
             const next = prev.slice();
             next.splice(cur,1);
-            next.splice(target,0,property);
+            next.splice(target,0,laneId);
             return next;
           });
         };
-        const onUp = ()=>{ setDragProp(null); window.removeEventListener("mousemove",onMove); window.removeEventListener("mouseup",onUp); };
+        const onUp = ()=>{ setDragLane(null); window.removeEventListener("mousemove",onMove); window.removeEventListener("mouseup",onUp); };
         window.addEventListener("mousemove",onMove); window.addEventListener("mouseup",onUp);
-      },[setSelProp]);
-      const majorStep = scaleMs <= 10000 ? 1000 : scaleMs <= 25000 ? 5000 : 10000;
+      },[setSelLane]);
+      const majorStep = scaleMs <= 2000 ? 500 : scaleMs <= 10000 ? 1000 : scaleMs <= 25000 ? 5000 : 10000;
       const minorStep = majorStep / 4;
       const ruler=[];
       for(let ms=0; ms<=scaleMs; ms+=majorStep){
@@ -2321,107 +2489,75 @@
         if(ms%majorStep===0) continue;
         ruler.push(h("span",{key:"t"+ms,className:"tick",style:{left:((ms/scaleMs)*100)+"%"}}));
       }
-      return h("div",{className:"tl-tracks"},
+      return h("div",{className:"tl-tracks",ref:tracksRef},
         h("div",{className:"tl-ruler-row"},
-          h("div",{className:"tl-ruler-spacer"}),
+          h("div",{className:"tl-ruler-spacer",style:{flexBasis:labelW+"px"}}),
           h("div",{className:"tl-ruler"},...ruler)),
         h("div",{className:"tl-rows",ref:rowsRef},
           ...orderedRows.map(row=>h(PropTrack,{
-            key:row.property, property:row.property,
+            key:row.laneId, property:row.property, member:row.member,
             delayMs:row.delayMs, durationMs:row.durationMs, lockDuration:!!row.spring,
-            selected:row.property===selProp, dragging:row.property===dragProp, snap, scaleMs,
-            onSelect:()=>setSelProp(row.property),
-            onReorder:e=>startReorder(row.property,e),
-            onDelayChange:ms=>onPropChange(row.property,{delayMs:ms}),
-            onDurationChange:ms=>onPropChange(row.property,{durationMs:ms}),
+            selected:row.laneId===selLane, dragging:row.laneId===dragLane, snap, scaleMs, labelW,
+            onSelect:()=>setSelLane(row.laneId),
+            onReorder:e=>startReorder(row.laneId,e),
+            onDelayChange:ms=>onPropChange(row.laneId,{delayMs:ms}),
+            onDurationChange:ms=>onPropChange(row.laneId,{durationMs:ms}),
           }))),
-        h(ScrubZone,{scaleMs}),
-        h("div",{className:"tl-playhead-layer"},
-          h("div",{className:"tl-playhead",style:{left:(ratio*100)+"%"}},
-            h("svg",{className:"tl-playhead-head",viewBox:"0 0 16.666 24",width:"16.666",height:"24",fill:"none"},
-              h("path",{d:"M13.666 7.333C13.666 11.609 9.333 15.666 9.333 19.942L9.333 24L7.333 24L7.333 19.942C7.333 15.666 3 11.609 3 7.333C3 4.387 5.387 2 8.333 2C11.279 2 13.666 4.387 13.666 7.333Z",fill:"#1A7AFF"}))),
-        ),
+        h("div",{className:cx("tl-col-resizer",colDragging&&"dragging"),style:{left:labelW+"px"},
+          onMouseDown:startColResize,title:"Drag to resize columns","aria-label":"Resize label column",role:"separator"},
+          h("span",{className:"tl-col-resizer-line"})),
       );
     }
 
-    function Inspector({entry, selProp, onPropChange, snap}){
+    function Inspector({entry, selLane, onPropChange, snap}){
       const et = entry.effectiveTimings || [];
-      const sel = et.find(t=>t.property===selProp) || et[0];
+      const sel = et.find(t=>t.laneId===selLane) || et[0];
       if(!sel) return h("div",{className:"tl-inspector"});
       const cubic = easingToCubic(sel.easing);
       const isSpring = !!sel.spring;
       return h("div",{className:"tl-inspector"},
-        h("div",{className:"tl-insp-title"},sel.property),
+        h("div",{className:"tl-insp-title"},
+          sel.member&&h("span",{className:"tl-insp-member"},sel.member),
+          h("span",null,sel.property)),
         h(ValueField,{label:"Duration",value:sel.durationMs,min:0,max:5000,step:25,tokens:DURATION_TOKENS,snap,
           readOnly:isSpring,
           readOnlyHint:"Duration is set by the spring. A spring's settle time is derived from its stiffness, damping and mass \u2014 so it can't be edited directly. Switch to the Easing tab to set a fixed duration.",
-          onChange:v=>onPropChange(sel.property,{durationMs:v})}),
+          onChange:v=>onPropChange(sel.laneId,{durationMs:v})}),
         h(ValueField,{label:"Delay",value:sel.delayMs,min:0,max:5000,step:25,tokens:DELAY_TOKENS,snap,
-          onChange:v=>onPropChange(sel.property,{delayMs:v})}),
-        h(EasingEditor,{easing:sel.easing, cubic, spring:sel.spring, durationMs:sel.durationMs, propKey:sel.property,
-          apply:partial=>onPropChange(sel.property,partial)}),
+          onChange:v=>onPropChange(sel.laneId,{delayMs:v})}),
+        h(EasingEditor,{easing:sel.easing, cubic, spring:sel.spring, durationMs:sel.durationMs, propKey:sel.laneId,
+          apply:partial=>onPropChange(sel.laneId,partial)}),
       );
     }
 
-    function Body({entry, onPropChange, state, play, pause, resume, restart, stop, speed, setSpeed, snap}){
+    function Body({entry, onPropChange, snap}){
       const et = entry.effectiveTimings || [];
-      const [selProp, setSelProp] = useState(et[0]?.property ?? null);
-      const [zoom, setZoom] = useState(ZOOM_DEFAULT);
-      const scaleMs = scaleFromZoom(zoom);
+      const [selLane, setSelLane] = useState(et[0]?.laneId ?? null);
+      // No playback: the real component is the preview. The track scale just
+      // auto-fits the longest lane (duration+delay) with a little headroom so
+      // the static bars stay readable across short and long transitions.
+      const maxEnd = et.reduce((m,t)=>Math.max(m,(t.durationMs||0)+(t.delayMs||0)),0);
+      const scaleMs = Math.max(500, Math.ceil((maxEnd*1.15)/250)*250);
       useEffect(()=>{
-        if(et.length && !et.find(t=>t.property===selProp)) setSelProp(et[0]?.property);
-      },[et,selProp]);
+        if(et.length && !et.find(t=>t.laneId===selLane)) setSelLane(et[0]?.laneId);
+      },[et,selLane]);
 
       return h("div",{className:"tl-body"},
         h("div",{className:"tl-main"},
-          h(Transport,{state,disabled:!entry,onPlay:play,onPause:pause,onResume:resume,onRestart:restart,onStop:stop,speed,setSpeed,zoom,setZoom}),
-          h(Tracks,{et,selProp,setSelProp,onPropChange,snap,scaleMs}),
-        ),
-        h(Inspector,{entry,selProp,onPropChange,snap}),
-      );
-    }
-
-    function Transport({state,disabled,onPlay,onPause,onResume,onRestart,onStop,speed,setSpeed,zoom,setZoom}){
-      const t = usePreviewTime();
-      const spRef = useRef(null);
-      const [sp,setSp] = useState(false);
-      const playing = state==="playing";
-      const onMain = () => playing ? onPause() : state==="paused" ? onResume() : onPlay();
-      return h("div",{className:"tl-transport"},
-        h("div",{className:"tl-transport-left"},
-          h("span",{className:"tl-timecode"}, fmtTimecode(t)),
-          h("button",{ref:spRef,className:cx("tl-ghost-btn","tl-speed",sp&&"is-active"),onClick:()=>setSp(v=>!v)},
-            fmtSpeed(speed), h("span",{className:"tl-ghost-chev"},h(Ic,{name:"chevron"}))),
-          h(Dropdown,{open:sp,onClose:()=>setSp(false),triggerRef:spRef,width:120,align:"left"},
-            SPEEDS.map(s=>h(MenuItem,{key:s,active:s===speed,onClick:()=>{setSpeed(s);setSp(false);},
-              right:s===speed&&h("span",{className:"tl-menu-check"},h(Ic,{name:"check"}))},fmtSpeed(s)))) ),
-        h("div",{className:"tl-transport-center"},
-          h("button",{className:"tl-play-btn",disabled,onClick:onMain,title:playing?"Pause":"Play"},
-            h("span",{className:"t-icon-swap","data-state":playing?"b":"a"},
-              h("span",{className:"t-icon","data-icon":"a"},h(Ic,{name:"play",size:12})),
-              h("span",{className:"t-icon","data-icon":"b"},h(Ic,{name:"pause",size:16}))))),
-        h("div",{className:"tl-transport-right"},
-          h("div",{className:"tl-zoom",title:"Timeline zoom"},
-            h("div",{className:"tl-zoom-track","aria-hidden":true}),
-            h("input",{type:"range",min:ZOOM_MIN,max:ZOOM_MAX,value:zoom,
-              onChange:e=>setZoom(Number(e.target.value))})),
-          h("span",{className:"t-tt-wrap"},
-            h("button",{className:"tl-icon-btn ghost t-tt-trigger",disabled,"aria-label":"Replay",onClick:onRestart},h(Ic,{name:"restart"})),
-            h("span",{className:"t-tt tl-tt-below",role:"tooltip"},"Replay")),
+          h(Tracks,{et,selLane,setSelLane,onPropChange,snap,scaleMs}),
         ),
+        h(Inspector,{entry,selLane,onPropChange,snap}),
       );
     }
 
     function TimelinePanel(){
       const entries=useReg(); const{active,setActiveId}=useActive();
-      const{state,play,pause,resume,restart,stop}=usePlayback(); const{setPropOverride}=usePropOverride();
-      const{registry,preview}=useContext(TimelineCtx);
+      const{setPropOverride}=usePropOverride();
+      const{registry}=useContext(TimelineCtx);
       const[copied,setCopied]=useState(false);
       const[minimized,setMinimized]=useState(false);
       const[panelHeight,setPanelHeight]=useState(440);
       const[resizing,setResizing]=useState(false);
-      const[speed,setSpeed]=useState(1);
-      const[loop,setLoop]=useState(false);
       const[snap,setSnap]=useState(true);
       // ── refine ──
       const[refineOpen,setRefineOpen]=useState(false);
@@ -2434,6 +2570,9 @@
       // ── accept (write to source) ──
       const[acceptState,setAcceptState]=useState("idle"); // idle | saving | done | error
       const[acceptError,setAcceptError]=useState(null);
+      // ── grouped scan (agent reads source → Open/Close phases) ──
+      const[groupScanState,setGroupScanState]=useState("idle"); // idle | scanning | done | error
+      const didGroupScanRef=useRef(false);
       const[refineLabel,setRefineLabel]=useState(null);
       const[appliedIds,setAppliedIds]=useState({});
       const[refineMode,setRefineMode]=useState("llm"); // llm (Agent) | deterministic
@@ -2467,8 +2606,11 @@
         const mode=(refineMode==="llm"&&!avail)?"deterministic":refineMode;
         if(mode!==refineMode)setRefineMode(mode);
         try{
-          const timings=(active.effectiveTimings||[]).map(t=>({property:t.property,durationMs:t.durationMs,delayMs:t.delayMs,easing:t.easing}));
-          const{id}=await relayCreateJob({transitionId:active.id,label:active.label,selector:active.bindings&&active.bindings.selector,timings,mode,refineType});
+          const et=active.effectiveTimings||[];
+          const timings=et.map(t=>({property:t.property,durationMs:t.durationMs,delayMs:t.delayMs,easing:t.easing}));
+          const selector=(active.bindings&&active.bindings.selector)||(et[0]&&et[0].selector)||null;
+          const{id}=await relayCreateJob({transitionId:active.id,label:active.label,selector,
+            phase:active.phase||null,group:active.groupLabel||null,timings,mode,refineType});
           setRefineJobId(id);
         }catch(e){
           setRefinePhase("error");
@@ -2500,17 +2642,74 @@
         if(p.durationMs!=null)o.durationMs=p.durationMs;
         if(p.delayMs!=null)o.delayMs=p.delayMs;
         if(p.easing!=null)o.easing=p.easing;
-        setPropOverride(p.property,o);
+        // 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);
         setAppliedIds(prev=>({...prev,[s.id]:true}));
-      },[setPropOverride]);
+      },[setPropOverride,active]);
       const applyAllSuggestions=useCallback(()=>{
         for(const s of refineSuggestions){if(!appliedIds[s.id])applySuggestion(s);}
       },[refineSuggestions,appliedIds,applySuggestion]);
       const panelMinH=200;
       const panelMaxH=useCallback(()=>Math.round(window.innerHeight*0.92),[]);
       useEffect(()=>{if(!active&&entries.length>0)setActiveId(entries[0].id);},[active,entries,setActiveId]);
-      useEffect(()=>{preview.setRate(speed);},[preview,speed]);
-      useEffect(()=>{preview.setLoop(loop);},[preview,loop]);
+      // ── live styling ──────────────────────────────────────────────────────
+      // With playback gone, the real component IS the preview. So whenever a
+      // transition has edits, mirror its effective timings onto the live
+      // element(s) as an inline `transition`, and revert when edits are cleared.
+      // Interacting with the component then animates with the edited values.
+      const liveAppliedRef=useRef(new Map()); // el → {prevInline, css}
+      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]")))continue; desired.set(el,css); } };
+        for(const item of entries){
+          const ov=registry.getPropOverrides(item.id);
+          if(!ov||!Object.keys(ov).length)continue; // only edited transitions go live
+          if(item.kind==="phase"){
+            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));
+            }
+          }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));
+          }
+        }
+        // apply new / changed
+        for(const [el,css] of desired){
+          const cur=applied.get(el);
+          if(cur&&cur.css===css)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});
+          try{el.style.transition=css;}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{}
+          _TX_LIVE_BASE.delete(el);
+          applied.delete(el);
+        }
+      },[entries,registry]);
+      // 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); }
+        applied.clear();
+      },[]);
       const startResize=useCallback(e=>{
         e.preventDefault();
         const startY=e.clientY; const startH=panelHeight;
@@ -2524,10 +2723,19 @@
       const copyValues=useCallback(()=>{
         if(!active)return;
         const et=active.effectiveTimings||[];
-        const css=et.map(t=>
-          `${t.property} ${formatCssTime(t.durationMs)} ${t.easing} ${formatCssTime(t.delayMs)}`
-        ).join(",\n       ");
-        navigator.clipboard.writeText("transition: "+css+";").then(()=>{setCopied(true);setTimeout(()=>setCopied(false),1500);});
+        const decl=t=>`${t.property} ${formatCssTime(t.durationMs)} ${t.easing} ${formatCssTime(t.delayMs)}`;
+        let text;
+        if(et.some(t=>t.member)){
+          // grouped phase: one transition block per member, labelled
+          const byMember=new Map();
+          for(const t of et){const k=t.memberId||t.member||"";if(!byMember.has(k))byMember.set(k,{member:t.member,selector:t.selector,lanes:[]});byMember.get(k).lanes.push(t);}
+          text=[...byMember.values()].map(m=>
+            `/* ${m.member||"element"}${m.selector?" — "+m.selector:""} */\ntransition: ${m.lanes.map(decl).join(",\n            ")};`
+          ).join("\n\n");
+        }else{
+          text="transition: "+et.map(decl).join(",\n       ")+";";
+        }
+        navigator.clipboard.writeText(text).then(()=>{setCopied(true);setTimeout(()=>setCopied(false),1500);});
       },[active]);
       const resetOverrides=useCallback(()=>{if(active)registry.clearOverride(active.id);},[registry,active]);
       // Accept → send an "apply" job so the agent writes the edited timings into
@@ -2538,7 +2746,9 @@
         setAcceptState("saving");setAcceptError(null);
         try{
           const{id}=await relayCreateJob({kind:"apply",transitionId:active.id,label:active.label,
-            selector:active.bindings&&active.bindings.selector,changes});
+            selector:active.bindings&&active.bindings.selector,
+            group:active.groupLabel||null,phase:active.phase||null,component:active.component||null,
+            changes});
           let settled=false;
           for(let i=0;i<240&&!settled;i++){
             await new Promise(r=>setTimeout(r,500));
@@ -2559,6 +2769,47 @@
       },[active]);
       // reset Accept feedback when switching transitions
       useEffect(()=>{setAcceptState("idle");setAcceptError(null);},[active&&active.id]);
+      // Auto-run the grouped scan once, after the flat DOM scan has populated.
+      // The agent reads the source and returns Open/Close phases; if no agent is
+      // live (or the relay is down) we silently keep the flat DOM scan.
+      // Lifecycle is tied to `registry` only (a stable ref), never to
+      // `entries.length`. On dynamic pages the DOM scanner makes entries.length
+      // fluctuate; keying the effect on it tore down the in-flight poll before
+      // the agent answered and the once-guard blocked a restart → permanent
+      // "Grouping…". Here a single run waits for flat entries to appear, fires
+      // one scan job, then polls to completion regardless of DOM churn; only an
+      // actual unmount cancels it.
+      useEffect(()=>{
+        if(didGroupScanRef.current)return;
+        let stopped=false;
+        const run=async()=>{
+          while(!stopped){
+            const flat0=registry.getAll().filter(e=>e.kind!=="phase");
+            if(flat0.length)break;
+            await new Promise(r=>setTimeout(r,300));
+          }
+          if(stopped||didGroupScanRef.current)return;
+          didGroupScanRef.current=true;
+          setGroupScanState("scanning");
+          const flat=registry.getAll().filter(e=>e.kind!=="phase");
+          const raw=flat.map(e=>({label:e.label,selector:e.bindings&&e.bindings.selector,
+            properties:e.properties,
+            timings:(e.baseLanes||[]).map(l=>({property:l.property,durationMs:l.durationMs,delayMs:l.delayMs,easing:l.easing}))}));
+          try{
+            const{id}=await relayCreateJob({kind:"scan",url:location.href,raw});
+            for(let i=0;i<520&&!stopped;i++){
+              await new Promise(r=>setTimeout(r,500));
+              const job=await relayGetJob(id);
+              if(stopped)return;
+              if(job.status==="done"){const groups=(job.result&&job.result.groups)||[];if(groups.length)registry.setGroups(groups);setGroupScanState("done");return;}
+              if(job.status==="error"){setGroupScanState("error");return;}
+            }
+            if(!stopped)setGroupScanState("error");
+          }catch(e){ if(!stopped)setGroupScanState("error"); /* relay down → stay flat */ }
+        };
+        run();
+        return ()=>{stopped=true;};
+      },[registry]);
 
       // whole-component open/close uses the transitions.dev panel reveal:
       // keep the panel mounted while it animates, flip data-open on the next
@@ -2607,11 +2858,11 @@
           h("div",{className:"tl-panel-body"},
             h("div",{className:"tl-panel-main"},
               h(Header,{entries,active,onSelect:setActiveId,onReset:resetOverrides,onCopy:copyValues,copied,
-                loop,setLoop,snap,setSnap,onMinimize:()=>setMinimized(true),onRefine:openRefine,refineActive:refineOpen,
-                onAccept,acceptState,acceptDisabled:computeChanges(active).length===0,acceptError}),
+                snap,setSnap,onMinimize:()=>setMinimized(true),onRefine:openRefine,refineActive:refineOpen,
+                onAccept,acceptState,acceptDisabled:computeChanges(active).length===0,acceptError,
+                scanning:groupScanState==="scanning"}),
               active
-                ?h(Body,{entry:active,onPropChange:(prop,o)=>setPropOverride(prop,o),
-                    state,play,pause,resume,restart,stop,speed,setSpeed,snap})
+                ?h(Body,{entry:active,onPropChange:(prop,o)=>setPropOverride(prop,o),snap})
                 :h("div",{className:"tl-empty"},"Select a transition to inspect and edit it")),
             h(RefinePanel,{open:refineOpen,onClose:()=>setRefineOpen(false),phase:refinePhase,label:refineLabel,
               refineType,onType:changeRefineType,suggestions:refineSuggestions,summary:refineSummary,error:refineError,
@@ -2731,16 +2982,16 @@
     }
 
     function App(){
-      const rootRef=useRef(null);const registry=useMemo(()=>new TransitionRegistry(),[]);const preview=useMemo(()=>new PreviewController(),[]);const[activeId,setActiveId]=useState(null);
-      useEffect(()=>{const root=rootRef.current??document.body;const scanner=new DomScanner(root,registry);preview.setScanner(scanner);scanner.start();return()=>{scanner.stop();preview.setScanner(null);};},[registry,preview]);
-      const ctx=useMemo(()=>({registry,preview,activeId,setActiveId}),[registry,preview,activeId]);
+      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 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;}})();
       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,"CSS transitions are automatically detected. Select one below, drag the bars to edit timing, then Play.")),
+        h("div",{ref:rootRef,className:"demo-root"},h("div",{className:"demo-header"},h("h1",null,"Timeline Inspector \u2014 Demo"),h("p",null,"CSS transitions are automatically detected. Select one below, drag the bars to edit timing, then interact with the component itself to preview it.")),
           h("div",{className:"demo-grid"},h(BoxResize),h(BoxOpacity),h(BoxSlide),h(BoxColor))),
         h(TimelinePanel));
     }