gsap-timeline-viewer 0.1.0 → 0.1.2

package/dist/gsap-timeline-viewer.iife.js

@@ -1,13 +1,27 @@
-var GSAPTimelineViewer=function(o){"use strict";var C=Object.defineProperty;var D=(o,c,h)=>c in o?C(o,c,{enumerable:!0,configurable:!0,writable:!0,value:h}):o[c]=h;var s=(o,c,h)=>D(o,typeof c!="symbol"?c+"":c,h);let c=0;function h(n){if(!n||n.length===0)return"Unknown";const i=n[0];return i.id?`#${i.id}`:i.classList&&i.classList.length>0?`.${i.classList[0]}`:i.tagName?i.tagName.toLowerCase():"element"}function k(n){const i=["ease","duration","delay","onComplete","onStart","onUpdate","onCompleteParams","onStartParams","onUpdateParams","repeat","repeatDelay","yoyo","stagger","overwrite","immediateRender","lazy","autoAlpha","id","paused","reversed","startAt"];return Object.keys(n).filter(t=>!i.includes(t))}function S(n){const i=[];return n.getChildren(!0,!0,!1).forEach((e,a)=>{if(!("targets"in e))return;const r=e,l=r.targets(),d=r.vars||{},p=k(d);let v="";if(d.id&&typeof d.id=="string")v=d.id;else{const f=h(l),x=p.slice(0,2).join(", ");v=x?`${f} (${x})`:f}const b=e.startTime(),y=e.duration();i.push({id:`tween-${++c}`,label:v,startTime:b,endTime:b+y,duration:y,targets:h(l),properties:p,colorIndex:a%6})}),{duration:n.duration(),tweens:i}}function w(){c=0}function g(n,i=!0){const t=Math.abs(n);return i?t.toFixed(2):t.toFixed(0)}const T=":host{--gtv-bg: #1a1a1a;--gtv-bg-secondary: #252525;--gtv-border: #333;--gtv-text: #e0e0e0;--gtv-text-muted: #888;--gtv-accent: #4a9eff;--gtv-playhead: #4a9eff;--gtv-ruler-bg: #1f1f1f;--gtv-track-height: 28px;--gtv-controls-height: 40px;--gtv-ruler-height: 24px;--gtv-track-1: #3b82f6;--gtv-track-2: #f59e0b;--gtv-track-3: #ec4899;--gtv-track-4: #10b981;--gtv-track-5: #8b5cf6;--gtv-track-6: #ef4444}*{box-sizing:border-box;margin:0;padding:0}.gtv-container{position:fixed;bottom:0;left:0;right:0;background:var(--gtv-bg);border-top:1px solid var(--gtv-border);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;color:var(--gtv-text);z-index:999999;display:flex;flex-direction:column}.gtv-container.collapsed{height:auto!important}.gtv-container.collapsed .gtv-timeline-area{display:none}.gtv-controls{display:flex;align-items:center;justify-content:space-between;height:var(--gtv-controls-height);padding:0 12px;background:var(--gtv-bg-secondary);border-bottom:1px solid var(--gtv-border);gap:16px}.gtv-controls-left,.gtv-controls-center,.gtv-controls-right{display:flex;align-items:center;gap:8px}.gtv-controls-center{flex:0 0 auto}.gtv-time-display{font-variant-numeric:tabular-nums;min-width:100px;text-align:center}.gtv-time-current{color:var(--gtv-text)}.gtv-time-total{color:var(--gtv-text-muted)}.gtv-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:4px;color:var(--gtv-text);cursor:pointer;transition:background .15s}.gtv-btn:hover{background:#ffffff1a}.gtv-btn:active{background:#ffffff26}.gtv-btn.active{color:var(--gtv-accent)}.gtv-btn svg{width:16px;height:16px;fill:currentColor}.gtv-btn-play svg{width:20px;height:20px}.gtv-speed-btn{width:auto;padding:0 8px;font-size:11px;font-weight:500}.gtv-collapse-btn{margin-left:auto}.gtv-timeline-area{display:flex;flex-direction:column;overflow:hidden;flex:1}.gtv-ruler{position:relative;height:var(--gtv-ruler-height);background:var(--gtv-ruler-bg);border-bottom:1px solid var(--gtv-border);overflow:hidden;flex-shrink:0}.gtv-ruler-inner{position:relative;height:100%}.gtv-ruler-marker{position:absolute;top:0;height:100%;display:flex;flex-direction:column;align-items:center}.gtv-ruler-marker-line{width:1px;height:6px;background:var(--gtv-text-muted)}.gtv-ruler-marker-label{font-size:10px;color:var(--gtv-text-muted);margin-top:2px}.gtv-tracks-container{position:relative;overflow-y:auto;overflow-x:hidden;flex:1}.gtv-tracks-scroll{position:relative;min-height:100%}.gtv-track{position:relative;height:var(--gtv-track-height);border-bottom:1px solid var(--gtv-border)}.gtv-track-bar{position:absolute;top:4px;height:calc(var(--gtv-track-height) - 8px);border-radius:4px;display:flex;align-items:center;padding:0 8px;font-size:11px;font-weight:500;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;transition:filter .15s}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-track-bar.is-active{box-shadow:0 0 0 2px var(--gtv-accent)}.gtv-playhead-container{position:absolute;top:0;bottom:0;width:1px;pointer-events:none;z-index:10}.gtv-playhead-head{position:absolute;top:0;left:-5px;width:11px;height:11px;background:var(--gtv-playhead);clip-path:polygon(50% 100%,0 0,100% 0)}.gtv-playhead-line{position:absolute;top:11px;bottom:0;left:0;width:1px;background:var(--gtv-playhead)}.gtv-scrub-area{position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer}.gtv-empty{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--gtv-text-muted)}",L=["var(--gtv-track-1)","var(--gtv-track-2)","var(--gtv-track-3)","var(--gtv-track-4)","var(--gtv-track-5)","var(--gtv-track-6)"],u=[.25,.5,1,2,4];class m extends HTMLElement{constructor(){super();s(this,"shadow");s(this,"timeline",null);s(this,"timelineData",null);s(this,"isPlaying",!1);s(this,"isLooping",!1);s(this,"speedIndex",2);s(this,"collapsed",!1);s(this,"height",200);s(this,"isDragging",!1);s(this,"container");s(this,"playBtn");s(this,"loopBtn");s(this,"speedBtn");s(this,"timeDisplay");s(this,"rulerInner");s(this,"tracksScroll");s(this,"playhead");s(this,"scrubArea");this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.setupEventListeners()}disconnectedCallback(){this.detachTimeline()}setTimeline(t){this.detachTimeline(),this.timeline=t,w(),this.timelineData=S(t),t.eventCallback("onUpdate",()=>this.onTimelineUpdate()),this.renderTracks(),this.updatePlayhead(),this.updateTimeDisplay(),this.updatePlayState()}detachTimeline(){this.timeline&&(this.timeline.eventCallback("onUpdate",null),this.timeline=null,this.timelineData=null)}render(){this.shadow.innerHTML=`
-      <style>${T}</style>
+var GSAPTimelineViewer=function(v){"use strict";var j=Object.defineProperty;var V=(v,u,b)=>u in v?j(v,u,{enumerable:!0,configurable:!0,writable:!0,value:b}):v[u]=b;var l=(v,u,b)=>V(v,typeof u!="symbol"?u+"":u,b);let u=0;function b(c){if(!c||c.length===0)return"Unknown";const s=c[0];return s.id?`#${s.id}`:s.classList&&s.classList.length>0?`.${s.classList[0]}`:s.tagName?s.tagName.toLowerCase():"element"}function D(c){const s=["ease","duration","delay","onComplete","onStart","onUpdate","onCompleteParams","onStartParams","onUpdateParams","repeat","repeatDelay","yoyo","stagger","overwrite","immediateRender","lazy","autoAlpha","id","paused","reversed","startAt"];return Object.keys(c).filter(t=>!s.includes(t))}function A(c){const s=[];c.getChildren(!0,!0,!1).forEach((e,i)=>{if(!("targets"in e))return;const a=e,r=a.targets(),n=a.vars||{},g=D(n);let m="";if(n.id&&typeof n.id=="string")m=n.id;else{const w=b(r),S=g.slice(0,2).join(", ");m=S?`${w} (${S})`:w}const p=e.startTime(),d=e.duration();let y="none";n.ease&&(y=typeof n.ease=="string"?n.ease:"custom");let f,M;if(n.stagger&&r.length>1&&(typeof n.stagger=="number"?f=n.stagger:typeof n.stagger=="object"&&(f=n.stagger.each||0),f)){const w=d-f*(r.length-1);M=r.map((S,R)=>{const C=p+R*f;return{targetLabel:b([S]),startTime:C,endTime:C+w}})}s.push({id:`tween-${++u}`,label:m,startTime:p,endTime:p+d,duration:d,targets:b(r),properties:g,colorIndex:i%6,hasStagger:!!n.stagger,ease:y,staggerValue:f,staggerChildren:M})});for(let e=1;e<s.length;e++){const i=s[e-1],a=s[e],r=i.endTime-a.startTime;Math.abs(r)>.001&&(a.overlapWithPrev=Math.round(r*1e3)/1e3)}return{duration:c.duration(),tweens:s}}function E(){u=0}function x(c,s=!0){const t=Math.abs(c);return s?t.toFixed(2):t.toFixed(0)}const H=":host{--gtv-bg: #1a1a1a;--gtv-bg-secondary: #252525;--gtv-border: #333;--gtv-text: #e0e0e0;--gtv-text-muted: #888;--gtv-accent: oklch(65% .15 220);--gtv-playhead: oklch(65% .15 220);--gtv-ruler-bg: #1f1f1f;--gtv-track-height: 28px;--gtv-controls-height: 40px;--gtv-ruler-height: 24px;--gtv-timeline-padding: 16px;--gtv-track-1: oklch(50% .12 220);--gtv-track-1-active: oklch(60% .15 220);--gtv-track-2: oklch(50% .12 70);--gtv-track-2-active: oklch(60% .15 70);--gtv-track-3: oklch(50% .12 350);--gtv-track-3-active: oklch(60% .15 350);--gtv-track-4: oklch(50% .12 160);--gtv-track-4-active: oklch(60% .15 160);--gtv-track-5: oklch(50% .12 290);--gtv-track-5-active: oklch(60% .15 290);--gtv-track-6: oklch(50% .12 25);--gtv-track-6-active: oklch(60% .15 25)}*{box-sizing:border-box;margin:0;padding:0}.gtv-container{position:fixed;bottom:0;left:0;right:0;background:var(--gtv-bg);border-top:1px solid var(--gtv-border);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;color:var(--gtv-text);z-index:999999;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}.gtv-container.collapsed{height:auto!important}.gtv-container.collapsed .gtv-timeline-area{display:none}.gtv-controls{position:relative;display:flex;align-items:center;justify-content:center;height:var(--gtv-controls-height);padding:0 12px;background:var(--gtv-bg-secondary);border-bottom:1px solid var(--gtv-border);gap:8px}.gtv-controls-left{position:absolute;left:12px;display:flex;align-items:center;gap:8px}.gtv-controls-center{display:flex;align-items:center;gap:8px}.gtv-controls-right{position:absolute;right:12px;display:flex;align-items:center;gap:8px}.gtv-time-display{font-variant-numeric:tabular-nums;min-width:100px;text-align:center}.gtv-time-current{color:var(--gtv-text)}.gtv-time-total{color:var(--gtv-text-muted)}.gtv-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:4px;color:var(--gtv-text);cursor:pointer;transition:background .15s}.gtv-btn:hover{background:#ffffff1a}.gtv-btn:active{background:#ffffff26}.gtv-btn.active{color:var(--gtv-accent)}.gtv-btn svg{width:16px;height:16px;fill:currentColor}.gtv-btn-play svg{width:20px;height:20px}.gtv-speed-btn{width:auto;padding:0 8px;font-size:11px;font-weight:500}.gtv-timeline-select{background:var(--gtv-bg);border:1px solid var(--gtv-border);border-radius:4px;color:var(--gtv-text);font-size:11px;padding:4px 8px;cursor:pointer;max-width:140px}.gtv-timeline-select:focus{outline:none;border-color:var(--gtv-accent)}.gtv-collapse-btn{margin-left:auto}.gtv-timeline-area{position:relative;display:flex;flex-direction:column;overflow:hidden;flex:1}.gtv-resize-handle{position:absolute;top:0;left:0;right:0;height:6px;cursor:ns-resize;z-index:20}.gtv-resize-handle:hover,.gtv-resize-handle:active{background:#ffffff1a}.gtv-ruler{position:relative;height:var(--gtv-ruler-height);background:var(--gtv-ruler-bg);border-bottom:1px solid var(--gtv-border);overflow:visible;flex-shrink:0;padding:0 var(--gtv-timeline-padding)}.gtv-ruler-inner{position:relative;height:100%;width:100%}.gtv-ruler-marker{position:absolute;top:0;display:flex;flex-direction:column;align-items:center}.gtv-ruler-marker-line{width:1px;height:6px;background:var(--gtv-text-muted)}.gtv-ruler-marker-label{font-size:10px;color:var(--gtv-text-muted);margin-top:2px}.gtv-grid-line{position:absolute;top:0;width:1px;height:100%;background:var(--gtv-border);pointer-events:none}.gtv-tracks-container{position:relative;overflow-y:auto;overflow-x:hidden;flex:1;padding:0 var(--gtv-timeline-padding)}.gtv-tracks-scroll{position:relative;min-height:100%;width:100%}.gtv-track{position:relative;padding-top:var(--gtv-track-height)}.gtv-track-bar{position:absolute;top:4px;height:calc(var(--gtv-track-height) - 8px);border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;font-size:11px;font-weight:500;color:#fff;overflow:hidden;cursor:default;transition:filter .15s}.gtv-track-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.gtv-track-stagger{opacity:.7;font-size:10px;font-weight:400;flex-shrink:0}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-playhead-wrapper{position:absolute;top:0;bottom:0;left:var(--gtv-timeline-padding);right:var(--gtv-timeline-padding);pointer-events:none;z-index:15}.gtv-playhead{position:absolute;top:0;bottom:0;width:0;left:0}.gtv-playhead-head{position:absolute;top:6px;left:-5px;width:11px;height:11px;background:var(--gtv-playhead);clip-path:polygon(50% 100%,0 0,100% 0)}.gtv-playhead-line{position:absolute;top:6px;bottom:0;left:0;width:1px;background:var(--gtv-playhead)}.gtv-scrub-area{position:absolute;top:0;left:0;right:0;bottom:0;cursor:ew-resize}.gtv-track[data-expandable=true] .gtv-track-bar{cursor:pointer}.gtv-expand-icon{transition:transform .2s}.gtv-track.expanded .gtv-expand-icon{transform:rotate(180deg)}.gtv-stagger-children{display:none;position:relative;width:100%}.gtv-track.expanded .gtv-stagger-children{display:block}.gtv-stagger-child{position:relative;width:100%;height:calc(var(--gtv-track-height) - 6px)}.gtv-stagger-child-bar{position:absolute;top:2px;height:calc(var(--gtv-track-height) - 12px);border-radius:3px;display:flex;align-items:center;padding:0 6px;font-size:10px;color:#fff;opacity:.7;overflow:hidden}.gtv-stagger-child-bar .gtv-track-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gtv-overlap-region{position:absolute;top:4px;height:calc(var(--gtv-track-height) - 8px);background:repeating-linear-gradient(-45deg,transparent,transparent 2px,rgba(255,255,255,.15) 2px,rgba(255,255,255,.15) 4px);border-radius:4px;pointer-events:none;z-index:5}.gtv-gap-connector{position:absolute;top:50%;height:1px;border-top:1px dashed var(--gtv-text-muted);pointer-events:none}.gtv-offset-badge{position:absolute;top:50%;transform:translate(-100%,-50%);margin-left:-4px;font-size:9px;font-weight:500;padding:2px 5px;border-radius:3px;white-space:nowrap;pointer-events:none;z-index:10}.gtv-offset-overlap,.gtv-offset-gap{background:var(--gtv-bg-secondary);border:1px solid var(--gtv-border);color:var(--gtv-text-muted)}.gtv-empty{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--gtv-text-muted)}",L=[.25,.5,1,2,4],$=40;class T extends HTMLElement{constructor(){super();l(this,"shadow");l(this,"timeline",null);l(this,"timelineData",null);l(this,"isPlaying",!1);l(this,"isLooping",!1);l(this,"speedIndex",2);l(this,"collapsed",!1);l(this,"height",200);l(this,"isDragging",!1);l(this,"manageBodyPadding",!0);l(this,"isAutofit",!1);l(this,"container");l(this,"playBtn");l(this,"loopBtn");l(this,"speedBtn");l(this,"timeDisplay");l(this,"rulerInner");l(this,"tracksScroll");l(this,"playhead");l(this,"scrubArea");l(this,"resizeHandle");l(this,"timelineSelect");l(this,"isResizing",!1);this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.setupEventListeners(),this.updateBodyPadding()}disconnectedCallback(){this.detachTimeline(),this.clearBodyPadding()}setTimeline(t){this.detachTimeline(),this.timeline=t,E(),this.timelineData=A(t),t.eventCallback("onUpdate",()=>this.onTimelineUpdate()),this.renderTracks(),this.updatePlayhead(),this.updateTimeDisplay(),this.updatePlayState(),requestAnimationFrame(()=>this.applyAutofit())}updateTimelineSelector(){Promise.resolve().then(()=>B).then(({TimelineViewer:t})=>{const e=t.getTimelines(),i=this.timelineSelect.value;this.timelineSelect.innerHTML="",e.forEach((a,r)=>{const n=document.createElement("option");n.value=r,n.textContent=r,this.timelineSelect.appendChild(n)}),i&&e.has(i)&&(this.timelineSelect.value=i)})}setSelectedTimeline(t){this.timelineSelect.value=t}detachTimeline(){this.timeline&&(this.timeline.eventCallback("onUpdate",null),this.timeline=null,this.timelineData=null)}render(){this.shadow.innerHTML=`
+      <style>${H}</style>
       <div class="gtv-container ${this.collapsed?"collapsed":""}" style="height: ${this.height}px;">
         <!-- Controls Bar -->
         <div class="gtv-controls">
           <div class="gtv-controls-left">
+            <select class="gtv-timeline-select" title="Select timeline">
+              <option value="">No timeline</option>
+            </select>
+            <button class="gtv-btn" data-action="loop" title="Loop (L)">
+              <svg viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
+            </button>
+            <button class="gtv-btn gtv-speed-btn" data-action="speed" title="Playback speed">1x</button>
+          </div>
+
+          <div class="gtv-controls-center">
+            <span class="gtv-time-display">
+              <span class="gtv-time-current">0.00</span>
+              <span class="gtv-time-total"> / 0.00</span>
+            </span>
             <button class="gtv-btn" data-action="skip-start" title="Skip to start">
               <svg viewBox="0 0 24 24"><path d="M6 6h2v12H6V6zm3.5 6l8.5 6V6l-8.5 6z"/></svg>
             </button>
-            <button class="gtv-btn gtv-btn-play" data-action="play" title="Play/Pause">
+            <button class="gtv-btn gtv-btn-play" data-action="play" title="Play/Pause (Space)">
               <svg class="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
               <svg class="pause-icon" viewBox="0 0 24 24" style="display: none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
             </button>
@@ -16,18 +30,10 @@ var GSAPTimelineViewer=function(o){"use strict";var C=Object.defineProperty;var
             </button>
           </div>
 
-          <div class="gtv-controls-center">
-            <button class="gtv-btn" data-action="loop" title="Loop">
-              <svg viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
-            </button>
-            <span class="gtv-time-display">
-              <span class="gtv-time-current">0.00</span>
-              <span class="gtv-time-total"> / 0.00</span>
-            </span>
-            <button class="gtv-btn gtv-speed-btn" data-action="speed" title="Playback speed">1x</button>
-          </div>
-
           <div class="gtv-controls-right">
+            <button class="gtv-btn" data-action="autofit" title="Auto-fit height">
+              <svg viewBox="0 0 24 24"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+            </button>
             <button class="gtv-btn gtv-collapse-btn" data-action="collapse" title="Collapse/Expand">
               <svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>
             </button>
@@ -36,37 +42,59 @@ var GSAPTimelineViewer=function(o){"use strict";var C=Object.defineProperty;var
 
         <!-- Timeline Area -->
         <div class="gtv-timeline-area">
+          <!-- Resize Handle -->
+          <div class="gtv-resize-handle"></div>
+
           <!-- Ruler -->
           <div class="gtv-ruler">
             <div class="gtv-ruler-inner"></div>
-            <div class="gtv-playhead-container">
-              <div class="gtv-playhead-head"></div>
-            </div>
           </div>
 
           <!-- Tracks -->
           <div class="gtv-tracks-container">
             <div class="gtv-tracks-scroll">
               <div class="gtv-scrub-area"></div>
-              <div class="gtv-playhead-container">
-                <div class="gtv-playhead-line"></div>
-              </div>
             </div>
             <div class="gtv-empty">No timeline attached. Call setTimeline() to visualize a GSAP timeline.</div>
           </div>
+
+          <!-- Playhead spans entire timeline area -->
+          <div class="gtv-playhead-wrapper">
+            <div class="gtv-playhead">
+              <div class="gtv-playhead-head"></div>
+              <div class="gtv-playhead-line"></div>
+            </div>
+          </div>
         </div>
       </div>
-    `,this.container=this.shadow.querySelector(".gtv-container"),this.playBtn=this.shadow.querySelector('[data-action="play"]'),this.loopBtn=this.shadow.querySelector('[data-action="loop"]'),this.speedBtn=this.shadow.querySelector('[data-action="speed"]'),this.timeDisplay=this.shadow.querySelector(".gtv-time-display"),this.rulerInner=this.shadow.querySelector(".gtv-ruler-inner"),this.tracksScroll=this.shadow.querySelector(".gtv-tracks-scroll"),this.playhead=this.shadow.querySelector(".gtv-ruler .gtv-playhead-container"),this.scrubArea=this.shadow.querySelector(".gtv-scrub-area")}setupEventListeners(){this.shadow.addEventListener("click",t=>{const a=t.target.closest("[data-action]");if(!a)return;switch(a.dataset.action){case"play":this.togglePlay();break;case"skip-start":this.skipToStart();break;case"skip-end":this.skipToEnd();break;case"loop":this.toggleLoop();break;case"speed":this.cycleSpeed();break;case"collapse":this.toggleCollapse();break}}),this.scrubArea.addEventListener("mousedown",t=>this.startScrub(t)),this.shadow.querySelector(".gtv-ruler").addEventListener("mousedown",t=>this.startScrub(t)),document.addEventListener("mousemove",t=>this.onScrub(t)),document.addEventListener("mouseup",()=>this.endScrub()),document.addEventListener("keydown",t=>{t.target===document.body&&t.code==="Space"&&(t.preventDefault(),this.togglePlay())})}startScrub(t){this.timeline&&(this.isDragging=!0,this.scrubToPosition(t))}onScrub(t){!this.isDragging||!this.timeline||this.scrubToPosition(t)}endScrub(){this.isDragging=!1}scrubToPosition(t){if(!this.timeline||!this.timelineData)return;const e=this.rulerInner.getBoundingClientRect(),r=Math.max(0,Math.min(t.clientX-e.left,e.width))/e.width;this.timeline.progress(r),this.timeline.pause(),this.updatePlayState()}togglePlay(){this.timeline&&(this.timeline.paused()||this.timeline.progress()===1?this.timeline.progress()===1?this.timeline.restart():this.timeline.play():this.timeline.pause(),this.updatePlayState())}skipToStart(){this.timeline&&(this.timeline.progress(0),this.timeline.pause(),this.updatePlayState())}skipToEnd(){this.timeline&&(this.timeline.progress(1),this.timeline.pause(),this.updatePlayState())}toggleLoop(){this.timeline&&(this.isLooping=!this.isLooping,this.timeline.repeat(this.isLooping?-1:0),this.loopBtn.classList.toggle("active",this.isLooping))}cycleSpeed(){if(!this.timeline)return;this.speedIndex=(this.speedIndex+1)%u.length;const t=u[this.speedIndex];this.timeline.timeScale(t),this.speedBtn.textContent=`${t}x`}toggleCollapse(){this.collapsed=!this.collapsed,this.container.classList.toggle("collapsed",this.collapsed);const t=this.shadow.querySelector('[data-action="collapse"]');t.innerHTML=this.collapsed?'<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>':'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>'}updatePlayState(){if(!this.timeline)return;this.isPlaying=!this.timeline.paused()&&this.timeline.progress()<1;const t=this.playBtn.querySelector(".play-icon"),e=this.playBtn.querySelector(".pause-icon");t.style.display=this.isPlaying?"none":"block",e.style.display=this.isPlaying?"block":"none"}onTimelineUpdate(){this.updatePlayhead(),this.updateTimeDisplay(),this.updateActiveTracks(),this.updatePlayState()}updatePlayhead(){if(!this.timeline||!this.timelineData)return;const e=`${this.timeline.progress()*100}%`;this.playhead.style.left=e;const a=this.tracksScroll.querySelector(".gtv-playhead-container");a&&(a.style.left=e)}updateTimeDisplay(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time(),e=this.timelineData.duration,a=this.timeDisplay.querySelector(".gtv-time-current"),r=this.timeDisplay.querySelector(".gtv-time-total");a.textContent=g(t),r.textContent=` / ${g(e)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((a,r)=>{const l=this.timelineData.tweens[r],d=t>=l.startTime&&t<=l.endTime;a.classList.toggle("is-active",d)})}renderTracks(){if(!this.timelineData)return;const{duration:t,tweens:e}=this.timelineData,a=this.shadow.querySelector(".gtv-empty");a.style.display=e.length>0?"none":"flex",this.renderRuler(t);const r=e.map(p=>this.renderTrack(p,t)).join(""),l=this.tracksScroll.querySelector(".gtv-scrub-area"),d=this.tracksScroll.querySelector(".gtv-playhead-container");this.tracksScroll.innerHTML=r,this.tracksScroll.prepend(l),this.tracksScroll.appendChild(d),this.scrubArea=l}renderRuler(t){const e=[],a=this.calculateInterval(t);for(let r=0;r<=t;r+=a){const l=r/t*100;e.push(`
-        <div class="gtv-ruler-marker" style="left: ${l}%;">
+    `,this.container=this.shadow.querySelector(".gtv-container"),this.playBtn=this.shadow.querySelector('[data-action="play"]'),this.loopBtn=this.shadow.querySelector('[data-action="loop"]'),this.speedBtn=this.shadow.querySelector('[data-action="speed"]'),this.timeDisplay=this.shadow.querySelector(".gtv-time-display"),this.rulerInner=this.shadow.querySelector(".gtv-ruler-inner"),this.tracksScroll=this.shadow.querySelector(".gtv-tracks-scroll"),this.playhead=this.shadow.querySelector(".gtv-playhead"),this.scrubArea=this.shadow.querySelector(".gtv-scrub-area"),this.resizeHandle=this.shadow.querySelector(".gtv-resize-handle"),this.timelineSelect=this.shadow.querySelector(".gtv-timeline-select")}setupEventListeners(){this.shadow.addEventListener("click",t=>{const i=t.target.closest("[data-action]");if(!i)return;switch(i.dataset.action){case"play":this.togglePlay();break;case"skip-start":this.skipToStart();break;case"skip-end":this.skipToEnd();break;case"loop":this.toggleLoop();break;case"speed":this.cycleSpeed();break;case"collapse":this.toggleCollapse();break;case"autofit":this.toggleAutofit();break}}),this.timelineSelect.addEventListener("change",()=>{const t=this.timelineSelect.value;t&&Promise.resolve().then(()=>B).then(({TimelineViewer:e})=>{var i;(i=e.getInstance())==null||i.select(t)})}),this.shadow.addEventListener("click",t=>{const i=t.target.closest(".gtv-track-bar");if(i){const a=i.closest(".gtv-track");(a==null?void 0:a.dataset.expandable)==="true"&&(t.stopPropagation(),a.classList.toggle("expanded"),requestAnimationFrame(()=>this.applyAutofit()))}}),this.scrubArea.addEventListener("mousedown",t=>this.startScrub(t)),this.shadow.querySelector(".gtv-ruler").addEventListener("mousedown",t=>this.startScrub(t)),this.shadow.querySelector(".gtv-tracks-container").addEventListener("mousedown",t=>{t.target.closest(".gtv-track-bar")||this.startScrub(t)}),document.addEventListener("mousemove",t=>{this.onScrub(t),this.onResize(t)}),document.addEventListener("mouseup",()=>{this.endScrub(),this.endResize()}),this.resizeHandle.addEventListener("mousedown",t=>this.startResize(t)),document.addEventListener("keydown",t=>{if(t.target===document.body)switch(t.code){case"Space":t.preventDefault(),this.togglePlay();break;case"KeyJ":t.preventDefault(),this.jumpToPrevPoint();break;case"KeyK":t.preventDefault(),this.jumpToNextPoint();break;case"KeyL":t.preventDefault(),this.toggleLoop();break}})}startScrub(t){this.timeline&&(t.preventDefault(),this.isDragging=!0,document.body.style.cursor="ew-resize",document.body.style.userSelect="none",this.scrubToPosition(t))}onScrub(t){!this.isDragging||!this.timeline||this.scrubToPosition(t)}endScrub(){this.isDragging=!1,document.body.style.cursor="",document.body.style.userSelect=""}startResize(t){t.preventDefault(),this.isResizing=!0,document.body.style.cursor="ns-resize",document.body.style.userSelect="none"}onResize(t){if(!this.isResizing)return;const e=window.innerHeight,i=e-t.clientY;this.height=Math.max(100,Math.min(i,e-100)),this.container.style.height=`${this.height}px`,this.updateBodyPadding()}endResize(){this.isResizing&&(this.isResizing=!1,document.body.style.cursor="",document.body.style.userSelect="")}updateBodyPadding(){if(!this.manageBodyPadding)return;const t=this.collapsed?$:this.height;document.body.style.paddingBottom=`${t}px`}clearBodyPadding(){this.manageBodyPadding&&(document.body.style.paddingBottom="")}scrubToPosition(t){if(!this.timeline||!this.timelineData)return;const e=this.rulerInner.getBoundingClientRect(),a=Math.max(0,Math.min(t.clientX-e.left,e.width))/e.width;this.timeline.progress(a),this.timeline.pause(),this.updatePlayState()}togglePlay(){this.timeline&&(this.timeline.paused()||this.timeline.progress()===1?this.timeline.progress()===1?this.timeline.restart():this.timeline.play():this.timeline.pause(),this.updatePlayState())}skipToStart(){this.timeline&&(this.timeline.progress(0),this.timeline.pause(),this.updatePlayState())}skipToEnd(){this.timeline&&(this.timeline.progress(1),this.timeline.pause(),this.updatePlayState())}getTimePoints(){if(!this.timelineData)return[0];const t=new Set;return t.add(0),t.add(Math.round(this.timelineData.duration*1e3)/1e3),this.timelineData.tweens.forEach(e=>{t.add(Math.round(e.startTime*1e3)/1e3),t.add(Math.round(e.endTime*1e3)/1e3)}),Array.from(t).sort((e,i)=>e-i)}jumpToPrevPoint(){if(!this.timeline||!this.timelineData)return;const t=Math.round(this.timeline.time()*1e3)/1e3,e=this.getTimePoints();let i=0;for(const a of e)if(a<t-.001)i=a;else break;this.timeline.time(i),this.timeline.pause(),this.updatePlayState()}jumpToNextPoint(){if(!this.timeline||!this.timelineData)return;const t=Math.round(this.timeline.time()*1e3)/1e3,e=this.getTimePoints();let i=this.timelineData.duration;for(const a of e)if(a>t+.001){i=a;break}this.timeline.time(i),this.timeline.pause(),this.updatePlayState()}toggleLoop(){this.timeline&&(this.isLooping=!this.isLooping,this.timeline.repeat(this.isLooping?-1:0),this.loopBtn.classList.toggle("active",this.isLooping))}cycleSpeed(){if(!this.timeline)return;this.speedIndex=(this.speedIndex+1)%L.length;const t=L[this.speedIndex];this.timeline.timeScale(t),this.speedBtn.textContent=`${t}x`}toggleCollapse(){this.collapsed=!this.collapsed,this.container.classList.toggle("collapsed",this.collapsed);const t=this.shadow.querySelector('[data-action="collapse"]');t.innerHTML=this.collapsed?'<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>':'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>',this.updateBodyPadding()}toggleAutofit(){this.isAutofit=!this.isAutofit,this.shadow.querySelector('[data-action="autofit"]').classList.toggle("active",this.isAutofit),this.isAutofit&&this.applyAutofit()}applyAutofit(){if(!this.isAutofit||this.collapsed)return;const t=this.shadow.querySelectorAll(".gtv-track");let e=0;const i=28,a=22;t.forEach(p=>{if(e+=i,p.classList.contains("expanded")){const d=p.querySelectorAll(".gtv-stagger-child");e+=d.length*a}});const r=24,n=16,g=100,m=window.innerHeight-100;this.height=Math.max(g,Math.min($+r+e+n,m)),this.container.style.height=`${this.height}px`,this.updateBodyPadding()}updatePlayState(){if(!this.timeline)return;this.isPlaying=!this.timeline.paused()&&this.timeline.progress()<1;const t=this.playBtn.querySelector(".play-icon"),e=this.playBtn.querySelector(".pause-icon");t.style.display=this.isPlaying?"none":"block",e.style.display=this.isPlaying?"block":"none"}onTimelineUpdate(){this.updatePlayhead(),this.updateTimeDisplay(),this.updateActiveTracks(),this.updatePlayState()}updatePlayhead(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.progress();this.playhead.style.left=`${t*100}%`}updateTimeDisplay(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time(),e=this.timelineData.duration,i=this.timeDisplay.querySelector(".gtv-time-current"),a=this.timeDisplay.querySelector(".gtv-time-total");i.textContent=x(t),a.textContent=` / ${x(e)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((i,a)=>{const r=this.timelineData.tweens[a],n=t>=r.startTime&&t<=r.endTime,g=i.dataset.color;n?i.style.background=`var(--gtv-track-${g}-active)`:i.style.background=`var(--gtv-track-${g})`})}renderTracks(){if(!this.timelineData)return;const{duration:t,tweens:e}=this.timelineData,i=this.shadow.querySelector(".gtv-empty");i.style.display=e.length>0?"none":"flex",this.renderRuler(t);const a=this.renderGridLines(t),r=e.map(g=>this.renderTrack(g,t)).join(""),n=this.tracksScroll.querySelector(".gtv-scrub-area");this.tracksScroll.innerHTML=a+r,this.tracksScroll.prepend(n),this.scrubArea=n}renderGridLines(t){const e=[],i=this.calculateInterval(t);for(let a=0;a<=t;a+=i){const r=a/t*100;e.push(`<div class="gtv-grid-line" style="left: ${r}%;"></div>`)}return e.join("")}renderRuler(t){const e=[],i=this.calculateInterval(t);for(let a=0;a<=t;a+=i){const r=a/t*100;e.push(`
+        <div class="gtv-ruler-marker" style="left: ${r}%;">
           <div class="gtv-ruler-marker-line"></div>
-          <span class="gtv-ruler-marker-label">${g(r,!1)}s</span>
+          <span class="gtv-ruler-marker-label">${x(a,!1)}s</span>
         </div>
-      `)}this.rulerInner.innerHTML=e.join("")}calculateInterval(t){return t<=1?.25:t<=3?.5:t<=10?1:t<=30?5:10}renderTrack(t,e){const a=t.startTime/e*100,r=t.duration/e*100,l=L[t.colorIndex];return`
-      <div class="gtv-track">
+      `)}this.rulerInner.innerHTML=e.join("")}calculateInterval(t){return t<=1?.25:t<=3?.5:t<=10?1:t<=30?5:10}renderTrack(t,e){const i=t.startTime/e*100,a=t.duration/e*100,r=t.colorIndex+1;let n="";t.hasStagger&&t.staggerChildren&&t.staggerChildren.length>0&&(n='<span class="gtv-track-stagger"><svg class="gtv-expand-icon" viewBox="0 0 24 24" width="10" height="10"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg> Stagger</span>');let g="";if(t.staggerChildren&&t.staggerChildren.length>0){const p=t.staggerChildren.map(d=>{const y=d.startTime/e*100,f=(d.endTime-d.startTime)/e*100;return`
+          <div class="gtv-stagger-child">
+            <div class="gtv-stagger-child-bar"
+                 style="left: ${y}%; width: ${f}%; background: var(--gtv-track-${r});">
+              <span class="gtv-track-label">${d.targetLabel}</span>
+            </div>
+          </div>
+        `}).join("");g=`<div class="gtv-stagger-children" data-for="${t.id}">${p}</div>`}let m="";if(t.overlapWithPrev!==void 0){const p=t.overlapWithPrev>0,d=Math.abs(t.overlapWithPrev)/e*100,y=p?`-${x(t.overlapWithPrev)}s`:`+${x(Math.abs(t.overlapWithPrev))}s`;p?m=`
+          <div class="gtv-overlap-region" style="left: ${i}%; width: ${d}%;"></div>
+          <span class="gtv-offset-badge gtv-offset-overlap" style="left: ${i}%;">${y}</span>
+        `:m=`
+          <div class="gtv-gap-connector" style="left: ${i-d}%; width: ${d}%;"></div>
+          <span class="gtv-offset-badge gtv-offset-gap" style="left: ${i}%;">${y}</span>
+        `}return`
+      <div class="gtv-track" data-expandable="${t.hasStagger&&t.staggerChildren?"true":"false"}">
+        ${m}
         <div class="gtv-track-bar"
-             style="left: ${a}%; width: ${r}%; background: ${l};"
-             title="${t.label} (${g(t.startTime)}s - ${g(t.endTime)}s)">
-          ${t.label}
+             data-color="${r}"
+             data-tween-id="${t.id}"
+             style="left: ${i}%; width: ${a}%; background: var(--gtv-track-${r});">
+          <span class="gtv-track-label">${t.label}</span>
+          ${n}
         </div>
+        ${g}
       </div>
-    `}}customElements.define("gsap-timeline-viewer",m);class P{constructor(i){s(this,"element");this.element=document.createElement("gsap-timeline-viewer"),i.height&&this.element.style.setProperty("--viewer-height",`${i.height}px`),i.timeline&&setTimeout(()=>{this.element.setTimeline(i.timeline)},0)}attach(i=document.body){i.appendChild(this.element)}detach(){this.element.remove()}setTimeline(i){this.element.setTimeline(i)}get htmlElement(){return this.element}}return o.TimelineViewer=P,o.TimelineViewerElement=m,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),o}({});
+    `}}customElements.define("gsap-timeline-viewer",T);const h=new Map;let o=null,z=!0,q=0,P=null;function I(){const c=window.gsap;!c||P||(P=c.timeline.bind(c),c.timeline=function(s){const t=P(s);if(z){let e;s!=null&&s.id&&typeof s.id=="string"?e=s.id:e=`Timeline ${++q}`,h.has(e)||(h.set(e,t),o&&(o.htmlElement.updateTimelineSelector(),h.size===1&&o.select(e)))}return t})}class k{constructor(s={}){l(this,"element");l(this,"currentTimelineName",null);this.element=document.createElement("gsap-timeline-viewer"),s.height&&this.element.style.setProperty("--viewer-height",`${s.height}px`)}static create(s={}){return o||(z=s.autoDetect!==!1,z&&I(),o=new k(s),document.body.appendChild(o.element),setTimeout(()=>{if(o.element.updateTimelineSelector(),s.defaultTimeline&&h.has(s.defaultTimeline))o.select(s.defaultTimeline);else if(h.size>0){const t=h.keys().next().value;t&&o.select(t)}},0),o)}static register(s,t){h.set(s,t),o&&(o.element.updateTimelineSelector(),h.size===1&&o.select(s))}static unregister(s){h.delete(s),o&&o.element.updateTimelineSelector()}static getTimelines(){return h}static getInstance(){return o}select(s){const t=h.get(s);t&&(this.currentTimelineName=s,this.element.setTimeline(t),this.element.setSelectedTimeline(s))}getCurrentTimelineName(){return this.currentTimelineName}destroy(){this.element.remove(),o=null}get htmlElement(){return this.element}}const B=Object.freeze(Object.defineProperty({__proto__:null,TimelineViewer:k,TimelineViewerElement:T},Symbol.toStringTag,{value:"Module"}));return v.TimelineViewer=k,v.TimelineViewerElement=T,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"}),v}({});

package/dist/gsap-timeline-viewer.js

@@ -1,14 +1,14 @@
-var f = Object.defineProperty;
-var x = (a, e, t) => e in a ? f(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
-var s = (a, e, t) => x(a, typeof e != "symbol" ? e + "" : e, t);
-let y = 0;
-function m(a) {
-  if (!a || a.length === 0) return "Unknown";
-  const e = a[0];
-  return e.id ? `#${e.id}` : e.classList && e.classList.length > 0 ? `.${e.classList[0]}` : e.tagName ? e.tagName.toLowerCase() : "element";
+var M = Object.defineProperty;
+var A = (o, i, t) => i in o ? M(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
+var l = (o, i, t) => A(o, typeof i != "symbol" ? i + "" : i, t);
+let B = 0;
+function x(o) {
+  if (!o || o.length === 0) return "Unknown";
+  const i = o[0];
+  return i.id ? `#${i.id}` : i.classList && i.classList.length > 0 ? `.${i.classList[0]}` : i.tagName ? i.tagName.toLowerCase() : "element";
 }
-function k(a) {
-  const e = [
+function E(o) {
+  const i = [
     "ease",
     "duration",
     "delay",
@@ -31,99 +31,146 @@ function k(a) {
     "reversed",
     "startAt"
   ];
-  return Object.keys(a).filter((t) => !e.includes(t));
+  return Object.keys(o).filter((t) => !i.includes(t));
 }
-function S(a) {
-  const e = [];
-  return a.getChildren(!0, !0, !1).forEach((i, r) => {
-    if (!("targets" in i)) return;
-    const n = i, l = n.targets(), o = n.vars || {}, d = k(o);
-    let h = "";
-    if (o.id && typeof o.id == "string")
-      h = o.id;
+function H(o) {
+  const i = [];
+  o.getChildren(!0, !0, !1).forEach((e, s) => {
+    if (!("targets" in e)) return;
+    const a = e, r = a.targets(), n = a.vars || {}, g = E(n);
+    let v = "";
+    if (n.id && typeof n.id == "string")
+      v = n.id;
     else {
-      const v = m(l), u = d.slice(0, 2).join(", ");
-      h = u ? `${v} (${u})` : v;
+      const b = x(r), y = g.slice(0, 2).join(", ");
+      v = y ? `${b} (${y})` : b;
     }
-    const g = i.startTime(), p = i.duration();
-    e.push({
-      id: `tween-${++y}`,
-      label: h,
-      startTime: g,
-      endTime: g + p,
-      duration: p,
-      targets: m(l),
-      properties: d,
-      colorIndex: r % 6
+    const h = e.startTime(), d = e.duration();
+    let m = "none";
+    n.ease && (m = typeof n.ease == "string" ? n.ease : "custom");
+    let u, T;
+    if (n.stagger && r.length > 1 && (typeof n.stagger == "number" ? u = n.stagger : typeof n.stagger == "object" && (u = n.stagger.each || 0), u)) {
+      const b = d - u * (r.length - 1);
+      T = r.map((y, D) => {
+        const z = h + D * u;
+        return {
+          targetLabel: x([y]),
+          startTime: z,
+          endTime: z + b
+        };
+      });
+    }
+    i.push({
+      id: `tween-${++B}`,
+      label: v,
+      startTime: h,
+      endTime: h + d,
+      duration: d,
+      targets: x(r),
+      properties: g,
+      colorIndex: s % 6,
+      hasStagger: !!n.stagger,
+      ease: m,
+      staggerValue: u,
+      staggerChildren: T
     });
-  }), {
-    duration: a.duration(),
-    tweens: e
+  });
+  for (let e = 1; e < i.length; e++) {
+    const s = i[e - 1], a = i[e], r = s.endTime - a.startTime;
+    Math.abs(r) > 1e-3 && (a.overlapWithPrev = Math.round(r * 1e3) / 1e3);
+  }
+  return {
+    duration: o.duration(),
+    tweens: i
   };
 }
-function w() {
-  y = 0;
+function q() {
+  B = 0;
 }
-function c(a, e = !0) {
-  const t = Math.abs(a);
-  return e ? t.toFixed(2) : t.toFixed(0);
+function f(o, i = !0) {
+  const t = Math.abs(o);
+  return i ? t.toFixed(2) : t.toFixed(0);
 }
-const T = ":host{--gtv-bg: #1a1a1a;--gtv-bg-secondary: #252525;--gtv-border: #333;--gtv-text: #e0e0e0;--gtv-text-muted: #888;--gtv-accent: #4a9eff;--gtv-playhead: #4a9eff;--gtv-ruler-bg: #1f1f1f;--gtv-track-height: 28px;--gtv-controls-height: 40px;--gtv-ruler-height: 24px;--gtv-track-1: #3b82f6;--gtv-track-2: #f59e0b;--gtv-track-3: #ec4899;--gtv-track-4: #10b981;--gtv-track-5: #8b5cf6;--gtv-track-6: #ef4444}*{box-sizing:border-box;margin:0;padding:0}.gtv-container{position:fixed;bottom:0;left:0;right:0;background:var(--gtv-bg);border-top:1px solid var(--gtv-border);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;color:var(--gtv-text);z-index:999999;display:flex;flex-direction:column}.gtv-container.collapsed{height:auto!important}.gtv-container.collapsed .gtv-timeline-area{display:none}.gtv-controls{display:flex;align-items:center;justify-content:space-between;height:var(--gtv-controls-height);padding:0 12px;background:var(--gtv-bg-secondary);border-bottom:1px solid var(--gtv-border);gap:16px}.gtv-controls-left,.gtv-controls-center,.gtv-controls-right{display:flex;align-items:center;gap:8px}.gtv-controls-center{flex:0 0 auto}.gtv-time-display{font-variant-numeric:tabular-nums;min-width:100px;text-align:center}.gtv-time-current{color:var(--gtv-text)}.gtv-time-total{color:var(--gtv-text-muted)}.gtv-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:4px;color:var(--gtv-text);cursor:pointer;transition:background .15s}.gtv-btn:hover{background:#ffffff1a}.gtv-btn:active{background:#ffffff26}.gtv-btn.active{color:var(--gtv-accent)}.gtv-btn svg{width:16px;height:16px;fill:currentColor}.gtv-btn-play svg{width:20px;height:20px}.gtv-speed-btn{width:auto;padding:0 8px;font-size:11px;font-weight:500}.gtv-collapse-btn{margin-left:auto}.gtv-timeline-area{display:flex;flex-direction:column;overflow:hidden;flex:1}.gtv-ruler{position:relative;height:var(--gtv-ruler-height);background:var(--gtv-ruler-bg);border-bottom:1px solid var(--gtv-border);overflow:hidden;flex-shrink:0}.gtv-ruler-inner{position:relative;height:100%}.gtv-ruler-marker{position:absolute;top:0;height:100%;display:flex;flex-direction:column;align-items:center}.gtv-ruler-marker-line{width:1px;height:6px;background:var(--gtv-text-muted)}.gtv-ruler-marker-label{font-size:10px;color:var(--gtv-text-muted);margin-top:2px}.gtv-tracks-container{position:relative;overflow-y:auto;overflow-x:hidden;flex:1}.gtv-tracks-scroll{position:relative;min-height:100%}.gtv-track{position:relative;height:var(--gtv-track-height);border-bottom:1px solid var(--gtv-border)}.gtv-track-bar{position:absolute;top:4px;height:calc(var(--gtv-track-height) - 8px);border-radius:4px;display:flex;align-items:center;padding:0 8px;font-size:11px;font-weight:500;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;transition:filter .15s}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-track-bar.is-active{box-shadow:0 0 0 2px var(--gtv-accent)}.gtv-playhead-container{position:absolute;top:0;bottom:0;width:1px;pointer-events:none;z-index:10}.gtv-playhead-head{position:absolute;top:0;left:-5px;width:11px;height:11px;background:var(--gtv-playhead);clip-path:polygon(50% 100%,0 0,100% 0)}.gtv-playhead-line{position:absolute;top:11px;bottom:0;left:0;width:1px;background:var(--gtv-playhead)}.gtv-scrub-area{position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer}.gtv-empty{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--gtv-text-muted)}", L = [
-  "var(--gtv-track-1)",
-  "var(--gtv-track-2)",
-  "var(--gtv-track-3)",
-  "var(--gtv-track-4)",
-  "var(--gtv-track-5)",
-  "var(--gtv-track-6)"
-], b = [0.25, 0.5, 1, 2, 4];
-class P extends HTMLElement {
+const I = ":host{--gtv-bg: #1a1a1a;--gtv-bg-secondary: #252525;--gtv-border: #333;--gtv-text: #e0e0e0;--gtv-text-muted: #888;--gtv-accent: oklch(65% .15 220);--gtv-playhead: oklch(65% .15 220);--gtv-ruler-bg: #1f1f1f;--gtv-track-height: 28px;--gtv-controls-height: 40px;--gtv-ruler-height: 24px;--gtv-timeline-padding: 16px;--gtv-track-1: oklch(50% .12 220);--gtv-track-1-active: oklch(60% .15 220);--gtv-track-2: oklch(50% .12 70);--gtv-track-2-active: oklch(60% .15 70);--gtv-track-3: oklch(50% .12 350);--gtv-track-3-active: oklch(60% .15 350);--gtv-track-4: oklch(50% .12 160);--gtv-track-4-active: oklch(60% .15 160);--gtv-track-5: oklch(50% .12 290);--gtv-track-5-active: oklch(60% .15 290);--gtv-track-6: oklch(50% .12 25);--gtv-track-6-active: oklch(60% .15 25)}*{box-sizing:border-box;margin:0;padding:0}.gtv-container{position:fixed;bottom:0;left:0;right:0;background:var(--gtv-bg);border-top:1px solid var(--gtv-border);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;color:var(--gtv-text);z-index:999999;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}.gtv-container.collapsed{height:auto!important}.gtv-container.collapsed .gtv-timeline-area{display:none}.gtv-controls{position:relative;display:flex;align-items:center;justify-content:center;height:var(--gtv-controls-height);padding:0 12px;background:var(--gtv-bg-secondary);border-bottom:1px solid var(--gtv-border);gap:8px}.gtv-controls-left{position:absolute;left:12px;display:flex;align-items:center;gap:8px}.gtv-controls-center{display:flex;align-items:center;gap:8px}.gtv-controls-right{position:absolute;right:12px;display:flex;align-items:center;gap:8px}.gtv-time-display{font-variant-numeric:tabular-nums;min-width:100px;text-align:center}.gtv-time-current{color:var(--gtv-text)}.gtv-time-total{color:var(--gtv-text-muted)}.gtv-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:4px;color:var(--gtv-text);cursor:pointer;transition:background .15s}.gtv-btn:hover{background:#ffffff1a}.gtv-btn:active{background:#ffffff26}.gtv-btn.active{color:var(--gtv-accent)}.gtv-btn svg{width:16px;height:16px;fill:currentColor}.gtv-btn-play svg{width:20px;height:20px}.gtv-speed-btn{width:auto;padding:0 8px;font-size:11px;font-weight:500}.gtv-timeline-select{background:var(--gtv-bg);border:1px solid var(--gtv-border);border-radius:4px;color:var(--gtv-text);font-size:11px;padding:4px 8px;cursor:pointer;max-width:140px}.gtv-timeline-select:focus{outline:none;border-color:var(--gtv-accent)}.gtv-collapse-btn{margin-left:auto}.gtv-timeline-area{position:relative;display:flex;flex-direction:column;overflow:hidden;flex:1}.gtv-resize-handle{position:absolute;top:0;left:0;right:0;height:6px;cursor:ns-resize;z-index:20}.gtv-resize-handle:hover,.gtv-resize-handle:active{background:#ffffff1a}.gtv-ruler{position:relative;height:var(--gtv-ruler-height);background:var(--gtv-ruler-bg);border-bottom:1px solid var(--gtv-border);overflow:visible;flex-shrink:0;padding:0 var(--gtv-timeline-padding)}.gtv-ruler-inner{position:relative;height:100%;width:100%}.gtv-ruler-marker{position:absolute;top:0;display:flex;flex-direction:column;align-items:center}.gtv-ruler-marker-line{width:1px;height:6px;background:var(--gtv-text-muted)}.gtv-ruler-marker-label{font-size:10px;color:var(--gtv-text-muted);margin-top:2px}.gtv-grid-line{position:absolute;top:0;width:1px;height:100%;background:var(--gtv-border);pointer-events:none}.gtv-tracks-container{position:relative;overflow-y:auto;overflow-x:hidden;flex:1;padding:0 var(--gtv-timeline-padding)}.gtv-tracks-scroll{position:relative;min-height:100%;width:100%}.gtv-track{position:relative;padding-top:var(--gtv-track-height)}.gtv-track-bar{position:absolute;top:4px;height:calc(var(--gtv-track-height) - 8px);border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;font-size:11px;font-weight:500;color:#fff;overflow:hidden;cursor:default;transition:filter .15s}.gtv-track-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.gtv-track-stagger{opacity:.7;font-size:10px;font-weight:400;flex-shrink:0}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-playhead-wrapper{position:absolute;top:0;bottom:0;left:var(--gtv-timeline-padding);right:var(--gtv-timeline-padding);pointer-events:none;z-index:15}.gtv-playhead{position:absolute;top:0;bottom:0;width:0;left:0}.gtv-playhead-head{position:absolute;top:6px;left:-5px;width:11px;height:11px;background:var(--gtv-playhead);clip-path:polygon(50% 100%,0 0,100% 0)}.gtv-playhead-line{position:absolute;top:6px;bottom:0;left:0;width:1px;background:var(--gtv-playhead)}.gtv-scrub-area{position:absolute;top:0;left:0;right:0;bottom:0;cursor:ew-resize}.gtv-track[data-expandable=true] .gtv-track-bar{cursor:pointer}.gtv-expand-icon{transition:transform .2s}.gtv-track.expanded .gtv-expand-icon{transform:rotate(180deg)}.gtv-stagger-children{display:none;position:relative;width:100%}.gtv-track.expanded .gtv-stagger-children{display:block}.gtv-stagger-child{position:relative;width:100%;height:calc(var(--gtv-track-height) - 6px)}.gtv-stagger-child-bar{position:absolute;top:2px;height:calc(var(--gtv-track-height) - 12px);border-radius:3px;display:flex;align-items:center;padding:0 6px;font-size:10px;color:#fff;opacity:.7;overflow:hidden}.gtv-stagger-child-bar .gtv-track-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gtv-overlap-region{position:absolute;top:4px;height:calc(var(--gtv-track-height) - 8px);background:repeating-linear-gradient(-45deg,transparent,transparent 2px,rgba(255,255,255,.15) 2px,rgba(255,255,255,.15) 4px);border-radius:4px;pointer-events:none;z-index:5}.gtv-gap-connector{position:absolute;top:50%;height:1px;border-top:1px dashed var(--gtv-text-muted);pointer-events:none}.gtv-offset-badge{position:absolute;top:50%;transform:translate(-100%,-50%);margin-left:-4px;font-size:9px;font-weight:500;padding:2px 5px;border-radius:3px;white-space:nowrap;pointer-events:none;z-index:10}.gtv-offset-overlap,.gtv-offset-gap{background:var(--gtv-bg-secondary);border:1px solid var(--gtv-border);color:var(--gtv-text-muted)}.gtv-empty{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--gtv-text-muted)}", P = [0.25, 0.5, 1, 2, 4], L = 40;
+class C extends HTMLElement {
   constructor() {
     super();
-    s(this, "shadow");
-    s(this, "timeline", null);
-    s(this, "timelineData", null);
-    s(this, "isPlaying", !1);
-    s(this, "isLooping", !1);
-    s(this, "speedIndex", 2);
+    l(this, "shadow");
+    l(this, "timeline", null);
+    l(this, "timelineData", null);
+    l(this, "isPlaying", !1);
+    l(this, "isLooping", !1);
+    l(this, "speedIndex", 2);
     // 1x
-    s(this, "collapsed", !1);
-    s(this, "height", 200);
-    s(this, "isDragging", !1);
+    l(this, "collapsed", !1);
+    l(this, "height", 200);
+    l(this, "isDragging", !1);
+    l(this, "manageBodyPadding", !0);
+    l(this, "isAutofit", !1);
     // DOM references
-    s(this, "container");
-    s(this, "playBtn");
-    s(this, "loopBtn");
-    s(this, "speedBtn");
-    s(this, "timeDisplay");
-    s(this, "rulerInner");
-    s(this, "tracksScroll");
-    s(this, "playhead");
-    s(this, "scrubArea");
+    l(this, "container");
+    l(this, "playBtn");
+    l(this, "loopBtn");
+    l(this, "speedBtn");
+    l(this, "timeDisplay");
+    l(this, "rulerInner");
+    l(this, "tracksScroll");
+    l(this, "playhead");
+    l(this, "scrubArea");
+    l(this, "resizeHandle");
+    l(this, "timelineSelect");
+    l(this, "isResizing", !1);
     this.shadow = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    this.render(), this.setupEventListeners();
+    this.render(), this.setupEventListeners(), this.updateBodyPadding();
   }
   disconnectedCallback() {
-    this.detachTimeline();
+    this.detachTimeline(), this.clearBodyPadding();
   }
   setTimeline(t) {
-    this.detachTimeline(), this.timeline = t, w(), this.timelineData = S(t), t.eventCallback("onUpdate", () => this.onTimelineUpdate()), this.renderTracks(), this.updatePlayhead(), this.updateTimeDisplay(), this.updatePlayState();
+    this.detachTimeline(), this.timeline = t, q(), this.timelineData = H(t), t.eventCallback("onUpdate", () => this.onTimelineUpdate()), this.renderTracks(), this.updatePlayhead(), this.updateTimeDisplay(), this.updatePlayState(), requestAnimationFrame(() => this.applyAutofit());
+  }
+  updateTimelineSelector() {
+    Promise.resolve().then(() => $).then(({ TimelineViewer: t }) => {
+      const e = t.getTimelines(), s = this.timelineSelect.value;
+      this.timelineSelect.innerHTML = "", e.forEach((a, r) => {
+        const n = document.createElement("option");
+        n.value = r, n.textContent = r, this.timelineSelect.appendChild(n);
+      }), s && e.has(s) && (this.timelineSelect.value = s);
+    });
+  }
+  setSelectedTimeline(t) {
+    this.timelineSelect.value = t;
   }
   detachTimeline() {
     this.timeline && (this.timeline.eventCallback("onUpdate", null), this.timeline = null, this.timelineData = null);
   }
   render() {
     this.shadow.innerHTML = `
-      <style>${T}</style>
+      <style>${I}</style>
       <div class="gtv-container ${this.collapsed ? "collapsed" : ""}" style="height: ${this.height}px;">
         <!-- Controls Bar -->
         <div class="gtv-controls">
           <div class="gtv-controls-left">
+            <select class="gtv-timeline-select" title="Select timeline">
+              <option value="">No timeline</option>
+            </select>
+            <button class="gtv-btn" data-action="loop" title="Loop (L)">
+              <svg viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
+            </button>
+            <button class="gtv-btn gtv-speed-btn" data-action="speed" title="Playback speed">1x</button>
+          </div>
+
+          <div class="gtv-controls-center">
+            <span class="gtv-time-display">
+              <span class="gtv-time-current">0.00</span>
+              <span class="gtv-time-total"> / 0.00</span>
+            </span>
             <button class="gtv-btn" data-action="skip-start" title="Skip to start">
               <svg viewBox="0 0 24 24"><path d="M6 6h2v12H6V6zm3.5 6l8.5 6V6l-8.5 6z"/></svg>
             </button>
-            <button class="gtv-btn gtv-btn-play" data-action="play" title="Play/Pause">
+            <button class="gtv-btn gtv-btn-play" data-action="play" title="Play/Pause (Space)">
               <svg class="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
               <svg class="pause-icon" viewBox="0 0 24 24" style="display: none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
             </button>
@@ -132,18 +179,10 @@ class P extends HTMLElement {
             </button>
           </div>
 
-          <div class="gtv-controls-center">
-            <button class="gtv-btn" data-action="loop" title="Loop">
-              <svg viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
-            </button>
-            <span class="gtv-time-display">
-              <span class="gtv-time-current">0.00</span>
-              <span class="gtv-time-total"> / 0.00</span>
-            </span>
-            <button class="gtv-btn gtv-speed-btn" data-action="speed" title="Playback speed">1x</button>
-          </div>
-
           <div class="gtv-controls-right">
+            <button class="gtv-btn" data-action="autofit" title="Auto-fit height">
+              <svg viewBox="0 0 24 24"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+            </button>
             <button class="gtv-btn gtv-collapse-btn" data-action="collapse" title="Collapse/Expand">
               <svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>
             </button>
@@ -152,33 +191,38 @@ class P extends HTMLElement {
 
         <!-- Timeline Area -->
         <div class="gtv-timeline-area">
+          <!-- Resize Handle -->
+          <div class="gtv-resize-handle"></div>
+
           <!-- Ruler -->
           <div class="gtv-ruler">
             <div class="gtv-ruler-inner"></div>
-            <div class="gtv-playhead-container">
-              <div class="gtv-playhead-head"></div>
-            </div>
           </div>
 
           <!-- Tracks -->
           <div class="gtv-tracks-container">
             <div class="gtv-tracks-scroll">
               <div class="gtv-scrub-area"></div>
-              <div class="gtv-playhead-container">
-                <div class="gtv-playhead-line"></div>
-              </div>
             </div>
             <div class="gtv-empty">No timeline attached. Call setTimeline() to visualize a GSAP timeline.</div>
           </div>
+
+          <!-- Playhead spans entire timeline area -->
+          <div class="gtv-playhead-wrapper">
+            <div class="gtv-playhead">
+              <div class="gtv-playhead-head"></div>
+              <div class="gtv-playhead-line"></div>
+            </div>
+          </div>
         </div>
       </div>
-    `, this.container = this.shadow.querySelector(".gtv-container"), this.playBtn = this.shadow.querySelector('[data-action="play"]'), this.loopBtn = this.shadow.querySelector('[data-action="loop"]'), this.speedBtn = this.shadow.querySelector('[data-action="speed"]'), this.timeDisplay = this.shadow.querySelector(".gtv-time-display"), this.rulerInner = this.shadow.querySelector(".gtv-ruler-inner"), this.tracksScroll = this.shadow.querySelector(".gtv-tracks-scroll"), this.playhead = this.shadow.querySelector(".gtv-ruler .gtv-playhead-container"), this.scrubArea = this.shadow.querySelector(".gtv-scrub-area");
+    `, this.container = this.shadow.querySelector(".gtv-container"), this.playBtn = this.shadow.querySelector('[data-action="play"]'), this.loopBtn = this.shadow.querySelector('[data-action="loop"]'), this.speedBtn = this.shadow.querySelector('[data-action="speed"]'), this.timeDisplay = this.shadow.querySelector(".gtv-time-display"), this.rulerInner = this.shadow.querySelector(".gtv-ruler-inner"), this.tracksScroll = this.shadow.querySelector(".gtv-tracks-scroll"), this.playhead = this.shadow.querySelector(".gtv-playhead"), this.scrubArea = this.shadow.querySelector(".gtv-scrub-area"), this.resizeHandle = this.shadow.querySelector(".gtv-resize-handle"), this.timelineSelect = this.shadow.querySelector(".gtv-timeline-select");
   }
   setupEventListeners() {
     this.shadow.addEventListener("click", (t) => {
-      const r = t.target.closest("[data-action]");
-      if (!r) return;
-      switch (r.dataset.action) {
+      const s = t.target.closest("[data-action]");
+      if (!s) return;
+      switch (s.dataset.action) {
         case "play":
           this.togglePlay();
           break;
@@ -197,24 +241,78 @@ class P extends HTMLElement {
         case "collapse":
           this.toggleCollapse();
           break;
+        case "autofit":
+          this.toggleAutofit();
+          break;
       }
-    }), this.scrubArea.addEventListener("mousedown", (t) => this.startScrub(t)), this.shadow.querySelector(".gtv-ruler").addEventListener("mousedown", (t) => this.startScrub(t)), document.addEventListener("mousemove", (t) => this.onScrub(t)), document.addEventListener("mouseup", () => this.endScrub()), document.addEventListener("keydown", (t) => {
-      t.target === document.body && t.code === "Space" && (t.preventDefault(), this.togglePlay());
+    }), this.timelineSelect.addEventListener("change", () => {
+      const t = this.timelineSelect.value;
+      t && Promise.resolve().then(() => $).then(({ TimelineViewer: e }) => {
+        var s;
+        (s = e.getInstance()) == null || s.select(t);
+      });
+    }), this.shadow.addEventListener("click", (t) => {
+      const s = t.target.closest(".gtv-track-bar");
+      if (s) {
+        const a = s.closest(".gtv-track");
+        (a == null ? void 0 : a.dataset.expandable) === "true" && (t.stopPropagation(), a.classList.toggle("expanded"), requestAnimationFrame(() => this.applyAutofit()));
+      }
+    }), this.scrubArea.addEventListener("mousedown", (t) => this.startScrub(t)), this.shadow.querySelector(".gtv-ruler").addEventListener("mousedown", (t) => this.startScrub(t)), this.shadow.querySelector(".gtv-tracks-container").addEventListener("mousedown", (t) => {
+      t.target.closest(".gtv-track-bar") || this.startScrub(t);
+    }), document.addEventListener("mousemove", (t) => {
+      this.onScrub(t), this.onResize(t);
+    }), document.addEventListener("mouseup", () => {
+      this.endScrub(), this.endResize();
+    }), this.resizeHandle.addEventListener("mousedown", (t) => this.startResize(t)), document.addEventListener("keydown", (t) => {
+      if (t.target === document.body)
+        switch (t.code) {
+          case "Space":
+            t.preventDefault(), this.togglePlay();
+            break;
+          case "KeyJ":
+            t.preventDefault(), this.jumpToPrevPoint();
+            break;
+          case "KeyK":
+            t.preventDefault(), this.jumpToNextPoint();
+            break;
+          case "KeyL":
+            t.preventDefault(), this.toggleLoop();
+            break;
+        }
     });
   }
   startScrub(t) {
-    this.timeline && (this.isDragging = !0, this.scrubToPosition(t));
+    this.timeline && (t.preventDefault(), this.isDragging = !0, document.body.style.cursor = "ew-resize", document.body.style.userSelect = "none", this.scrubToPosition(t));
   }
   onScrub(t) {
     !this.isDragging || !this.timeline || this.scrubToPosition(t);
   }
   endScrub() {
-    this.isDragging = !1;
+    this.isDragging = !1, document.body.style.cursor = "", document.body.style.userSelect = "";
+  }
+  startResize(t) {
+    t.preventDefault(), this.isResizing = !0, document.body.style.cursor = "ns-resize", document.body.style.userSelect = "none";
+  }
+  onResize(t) {
+    if (!this.isResizing) return;
+    const e = window.innerHeight, s = e - t.clientY;
+    this.height = Math.max(100, Math.min(s, e - 100)), this.container.style.height = `${this.height}px`, this.updateBodyPadding();
+  }
+  endResize() {
+    this.isResizing && (this.isResizing = !1, document.body.style.cursor = "", document.body.style.userSelect = "");
+  }
+  updateBodyPadding() {
+    if (!this.manageBodyPadding) return;
+    const t = this.collapsed ? L : this.height;
+    document.body.style.paddingBottom = `${t}px`;
+  }
+  clearBodyPadding() {
+    this.manageBodyPadding && (document.body.style.paddingBottom = "");
   }
   scrubToPosition(t) {
     if (!this.timeline || !this.timelineData) return;
-    const i = this.rulerInner.getBoundingClientRect(), n = Math.max(0, Math.min(t.clientX - i.left, i.width)) / i.width;
-    this.timeline.progress(n), this.timeline.pause(), this.updatePlayState();
+    const e = this.rulerInner.getBoundingClientRect(), a = Math.max(0, Math.min(t.clientX - e.left, e.width)) / e.width;
+    this.timeline.progress(a), this.timeline.pause(), this.updatePlayState();
   }
   togglePlay() {
     this.timeline && (this.timeline.paused() || this.timeline.progress() === 1 ? this.timeline.progress() === 1 ? this.timeline.restart() : this.timeline.play() : this.timeline.pause(), this.updatePlayState());
@@ -225,107 +323,256 @@ class P extends HTMLElement {
   skipToEnd() {
     this.timeline && (this.timeline.progress(1), this.timeline.pause(), this.updatePlayState());
   }
+  getTimePoints() {
+    if (!this.timelineData) return [0];
+    const t = /* @__PURE__ */ new Set();
+    return t.add(0), t.add(Math.round(this.timelineData.duration * 1e3) / 1e3), this.timelineData.tweens.forEach((e) => {
+      t.add(Math.round(e.startTime * 1e3) / 1e3), t.add(Math.round(e.endTime * 1e3) / 1e3);
+    }), Array.from(t).sort((e, s) => e - s);
+  }
+  jumpToPrevPoint() {
+    if (!this.timeline || !this.timelineData) return;
+    const t = Math.round(this.timeline.time() * 1e3) / 1e3, e = this.getTimePoints();
+    let s = 0;
+    for (const a of e)
+      if (a < t - 1e-3)
+        s = a;
+      else
+        break;
+    this.timeline.time(s), this.timeline.pause(), this.updatePlayState();
+  }
+  jumpToNextPoint() {
+    if (!this.timeline || !this.timelineData) return;
+    const t = Math.round(this.timeline.time() * 1e3) / 1e3, e = this.getTimePoints();
+    let s = this.timelineData.duration;
+    for (const a of e)
+      if (a > t + 1e-3) {
+        s = a;
+        break;
+      }
+    this.timeline.time(s), this.timeline.pause(), this.updatePlayState();
+  }
   toggleLoop() {
     this.timeline && (this.isLooping = !this.isLooping, this.timeline.repeat(this.isLooping ? -1 : 0), this.loopBtn.classList.toggle("active", this.isLooping));
   }
   cycleSpeed() {
     if (!this.timeline) return;
-    this.speedIndex = (this.speedIndex + 1) % b.length;
-    const t = b[this.speedIndex];
+    this.speedIndex = (this.speedIndex + 1) % P.length;
+    const t = P[this.speedIndex];
     this.timeline.timeScale(t), this.speedBtn.textContent = `${t}x`;
   }
   toggleCollapse() {
     this.collapsed = !this.collapsed, this.container.classList.toggle("collapsed", this.collapsed);
     const t = this.shadow.querySelector('[data-action="collapse"]');
-    t.innerHTML = this.collapsed ? '<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>' : '<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>';
+    t.innerHTML = this.collapsed ? '<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>' : '<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>', this.updateBodyPadding();
+  }
+  toggleAutofit() {
+    this.isAutofit = !this.isAutofit, this.shadow.querySelector('[data-action="autofit"]').classList.toggle("active", this.isAutofit), this.isAutofit && this.applyAutofit();
+  }
+  applyAutofit() {
+    if (!this.isAutofit || this.collapsed) return;
+    const t = this.shadow.querySelectorAll(".gtv-track");
+    let e = 0;
+    const s = 28, a = 22;
+    t.forEach((h) => {
+      if (e += s, h.classList.contains("expanded")) {
+        const d = h.querySelectorAll(".gtv-stagger-child");
+        e += d.length * a;
+      }
+    });
+    const r = 24, n = 16, g = 100, v = window.innerHeight - 100;
+    this.height = Math.max(g, Math.min(L + r + e + n, v)), this.container.style.height = `${this.height}px`, this.updateBodyPadding();
   }
   updatePlayState() {
     if (!this.timeline) return;
     this.isPlaying = !this.timeline.paused() && this.timeline.progress() < 1;
-    const t = this.playBtn.querySelector(".play-icon"), i = this.playBtn.querySelector(".pause-icon");
-    t.style.display = this.isPlaying ? "none" : "block", i.style.display = this.isPlaying ? "block" : "none";
+    const t = this.playBtn.querySelector(".play-icon"), e = this.playBtn.querySelector(".pause-icon");
+    t.style.display = this.isPlaying ? "none" : "block", e.style.display = this.isPlaying ? "block" : "none";
   }
   onTimelineUpdate() {
     this.updatePlayhead(), this.updateTimeDisplay(), this.updateActiveTracks(), this.updatePlayState();
   }
   updatePlayhead() {
     if (!this.timeline || !this.timelineData) return;
-    const i = `${this.timeline.progress() * 100}%`;
-    this.playhead.style.left = i;
-    const r = this.tracksScroll.querySelector(".gtv-playhead-container");
-    r && (r.style.left = i);
+    const t = this.timeline.progress();
+    this.playhead.style.left = `${t * 100}%`;
   }
   updateTimeDisplay() {
     if (!this.timeline || !this.timelineData) return;
-    const t = this.timeline.time(), i = this.timelineData.duration, r = this.timeDisplay.querySelector(".gtv-time-current"), n = this.timeDisplay.querySelector(".gtv-time-total");
-    r.textContent = c(t), n.textContent = ` / ${c(i)}`;
+    const t = this.timeline.time(), e = this.timelineData.duration, s = this.timeDisplay.querySelector(".gtv-time-current"), a = this.timeDisplay.querySelector(".gtv-time-total");
+    s.textContent = f(t), a.textContent = ` / ${f(e)}`;
   }
   updateActiveTracks() {
     if (!this.timeline || !this.timelineData) return;
     const t = this.timeline.time();
-    this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((r, n) => {
-      const l = this.timelineData.tweens[n], o = t >= l.startTime && t <= l.endTime;
-      r.classList.toggle("is-active", o);
+    this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((s, a) => {
+      const r = this.timelineData.tweens[a], n = t >= r.startTime && t <= r.endTime, g = s.dataset.color;
+      n ? s.style.background = `var(--gtv-track-${g}-active)` : s.style.background = `var(--gtv-track-${g})`;
     });
   }
   renderTracks() {
     if (!this.timelineData) return;
-    const { duration: t, tweens: i } = this.timelineData, r = this.shadow.querySelector(".gtv-empty");
-    r.style.display = i.length > 0 ? "none" : "flex", this.renderRuler(t);
-    const n = i.map((d) => this.renderTrack(d, t)).join(""), l = this.tracksScroll.querySelector(".gtv-scrub-area"), o = this.tracksScroll.querySelector(".gtv-playhead-container");
-    this.tracksScroll.innerHTML = n, this.tracksScroll.prepend(l), this.tracksScroll.appendChild(o), this.scrubArea = l;
+    const { duration: t, tweens: e } = this.timelineData, s = this.shadow.querySelector(".gtv-empty");
+    s.style.display = e.length > 0 ? "none" : "flex", this.renderRuler(t);
+    const a = this.renderGridLines(t), r = e.map((g) => this.renderTrack(g, t)).join(""), n = this.tracksScroll.querySelector(".gtv-scrub-area");
+    this.tracksScroll.innerHTML = a + r, this.tracksScroll.prepend(n), this.scrubArea = n;
+  }
+  renderGridLines(t) {
+    const e = [], s = this.calculateInterval(t);
+    for (let a = 0; a <= t; a += s) {
+      const r = a / t * 100;
+      e.push(`<div class="gtv-grid-line" style="left: ${r}%;"></div>`);
+    }
+    return e.join("");
   }
   renderRuler(t) {
-    const i = [], r = this.calculateInterval(t);
-    for (let n = 0; n <= t; n += r) {
-      const l = n / t * 100;
-      i.push(`
-        <div class="gtv-ruler-marker" style="left: ${l}%;">
+    const e = [], s = this.calculateInterval(t);
+    for (let a = 0; a <= t; a += s) {
+      const r = a / t * 100;
+      e.push(`
+        <div class="gtv-ruler-marker" style="left: ${r}%;">
           <div class="gtv-ruler-marker-line"></div>
-          <span class="gtv-ruler-marker-label">${c(n, !1)}s</span>
+          <span class="gtv-ruler-marker-label">${f(a, !1)}s</span>
         </div>
       `);
     }
-    this.rulerInner.innerHTML = i.join("");
+    this.rulerInner.innerHTML = e.join("");
   }
   calculateInterval(t) {
     return t <= 1 ? 0.25 : t <= 3 ? 0.5 : t <= 10 ? 1 : t <= 30 ? 5 : 10;
   }
-  renderTrack(t, i) {
-    const r = t.startTime / i * 100, n = t.duration / i * 100, l = L[t.colorIndex];
+  renderTrack(t, e) {
+    const s = t.startTime / e * 100, a = t.duration / e * 100, r = t.colorIndex + 1;
+    let n = "";
+    t.hasStagger && t.staggerChildren && t.staggerChildren.length > 0 && (n = '<span class="gtv-track-stagger"><svg class="gtv-expand-icon" viewBox="0 0 24 24" width="10" height="10"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg> Stagger</span>');
+    let g = "";
+    if (t.staggerChildren && t.staggerChildren.length > 0) {
+      const h = t.staggerChildren.map((d) => {
+        const m = d.startTime / e * 100, u = (d.endTime - d.startTime) / e * 100;
+        return `
+          <div class="gtv-stagger-child">
+            <div class="gtv-stagger-child-bar"
+                 style="left: ${m}%; width: ${u}%; background: var(--gtv-track-${r});">
+              <span class="gtv-track-label">${d.targetLabel}</span>
+            </div>
+          </div>
+        `;
+      }).join("");
+      g = `<div class="gtv-stagger-children" data-for="${t.id}">${h}</div>`;
+    }
+    let v = "";
+    if (t.overlapWithPrev !== void 0) {
+      const h = t.overlapWithPrev > 0, d = Math.abs(t.overlapWithPrev) / e * 100, m = h ? `-${f(t.overlapWithPrev)}s` : `+${f(Math.abs(t.overlapWithPrev))}s`;
+      h ? v = `
+          <div class="gtv-overlap-region" style="left: ${s}%; width: ${d}%;"></div>
+          <span class="gtv-offset-badge gtv-offset-overlap" style="left: ${s}%;">${m}</span>
+        ` : v = `
+          <div class="gtv-gap-connector" style="left: ${s - d}%; width: ${d}%;"></div>
+          <span class="gtv-offset-badge gtv-offset-gap" style="left: ${s}%;">${m}</span>
+        `;
+    }
     return `
-      <div class="gtv-track">
+      <div class="gtv-track" data-expandable="${t.hasStagger && t.staggerChildren ? "true" : "false"}">
+        ${v}
         <div class="gtv-track-bar"
-             style="left: ${r}%; width: ${n}%; background: ${l};"
-             title="${t.label} (${c(t.startTime)}s - ${c(t.endTime)}s)">
-          ${t.label}
+             data-color="${r}"
+             data-tween-id="${t.id}"
+             style="left: ${s}%; width: ${a}%; background: var(--gtv-track-${r});">
+          <span class="gtv-track-label">${t.label}</span>
+          ${n}
         </div>
+        ${g}
       </div>
     `;
   }
 }
-customElements.define("gsap-timeline-viewer", P);
-class D {
-  constructor(e) {
-    s(this, "element");
-    this.element = document.createElement("gsap-timeline-viewer"), e.height && this.element.style.setProperty("--viewer-height", `${e.height}px`), e.timeline && setTimeout(() => {
-      this.element.setTimeline(e.timeline);
-    }, 0);
+customElements.define("gsap-timeline-viewer", C);
+const p = /* @__PURE__ */ new Map();
+let c = null, w = !0, R = 0, k = null;
+function j() {
+  const o = window.gsap;
+  !o || k || (k = o.timeline.bind(o), o.timeline = function(i) {
+    const t = k(i);
+    if (w) {
+      let e;
+      i != null && i.id && typeof i.id == "string" ? e = i.id : e = `Timeline ${++R}`, p.has(e) || (p.set(e, t), c && (c.htmlElement.updateTimelineSelector(), p.size === 1 && c.select(e)));
+    }
+    return t;
+  });
+}
+class S {
+  constructor(i = {}) {
+    l(this, "element");
+    l(this, "currentTimelineName", null);
+    this.element = document.createElement("gsap-timeline-viewer"), i.height && this.element.style.setProperty("--viewer-height", `${i.height}px`);
+  }
+  /**
+   * Create and attach the timeline viewer to the page.
+   * Call this once - subsequent calls return the existing instance.
+   */
+  static create(i = {}) {
+    return c || (w = i.autoDetect !== !1, w && j(), c = new S(i), document.body.appendChild(c.element), setTimeout(() => {
+      if (c.element.updateTimelineSelector(), i.defaultTimeline && p.has(i.defaultTimeline))
+        c.select(i.defaultTimeline);
+      else if (p.size > 0) {
+        const t = p.keys().next().value;
+        t && c.select(t);
+      }
+    }, 0), c);
+  }
+  /**
+   * Register a timeline with a name so it appears in the dropdown.
+   */
+  static register(i, t) {
+    p.set(i, t), c && (c.element.updateTimelineSelector(), p.size === 1 && c.select(i));
+  }
+  /**
+   * Unregister a timeline.
+   */
+  static unregister(i) {
+    p.delete(i), c && c.element.updateTimelineSelector();
+  }
+  /**
+   * Get all registered timelines.
+   */
+  static getTimelines() {
+    return p;
+  }
+  /**
+   * Get the viewer instance (if created).
+   */
+  static getInstance() {
+    return c;
   }
-  attach(e = document.body) {
-    e.appendChild(this.element);
+  /**
+   * Select a timeline by name.
+   */
+  select(i) {
+    const t = p.get(i);
+    t && (this.currentTimelineName = i, this.element.setTimeline(t), this.element.setSelectedTimeline(i));
   }
-  detach() {
-    this.element.remove();
+  /**
+   * Get current timeline name.
+   */
+  getCurrentTimelineName() {
+    return this.currentTimelineName;
   }
-  setTimeline(e) {
-    this.element.setTimeline(e);
+  /**
+   * Remove the viewer from the page.
+   */
+  destroy() {
+    this.element.remove(), c = null;
   }
   get htmlElement() {
     return this.element;
   }
 }
+const $ = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  TimelineViewer: S,
+  TimelineViewerElement: C
+}, Symbol.toStringTag, { value: "Module" }));
 export {
-  D as TimelineViewer,
-  P as TimelineViewerElement
+  S as TimelineViewer,
+  C as TimelineViewerElement
 };

package/dist/gsap-timeline-viewer.umd.cjs

@@ -1,13 +1,27 @@
-(function(l,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(l=typeof globalThis<"u"?globalThis:l||self,n(l.GSAPTimelineViewer={}))})(this,function(l){"use strict";var C=Object.defineProperty;var D=(l,n,h)=>n in l?C(l,n,{enumerable:!0,configurable:!0,writable:!0,value:h}):l[n]=h;var s=(l,n,h)=>D(l,typeof n!="symbol"?n+"":n,h);let n=0;function h(o){if(!o||o.length===0)return"Unknown";const i=o[0];return i.id?`#${i.id}`:i.classList&&i.classList.length>0?`.${i.classList[0]}`:i.tagName?i.tagName.toLowerCase():"element"}function k(o){const i=["ease","duration","delay","onComplete","onStart","onUpdate","onCompleteParams","onStartParams","onUpdateParams","repeat","repeatDelay","yoyo","stagger","overwrite","immediateRender","lazy","autoAlpha","id","paused","reversed","startAt"];return Object.keys(o).filter(t=>!i.includes(t))}function S(o){const i=[];return o.getChildren(!0,!0,!1).forEach((e,a)=>{if(!("targets"in e))return;const r=e,c=r.targets(),d=r.vars||{},p=k(d);let v="";if(d.id&&typeof d.id=="string")v=d.id;else{const y=h(c),x=p.slice(0,2).join(", ");v=x?`${y} (${x})`:y}const f=e.startTime(),b=e.duration();i.push({id:`tween-${++n}`,label:v,startTime:f,endTime:f+b,duration:b,targets:h(c),properties:p,colorIndex:a%6})}),{duration:o.duration(),tweens:i}}function w(){n=0}function g(o,i=!0){const t=Math.abs(o);return i?t.toFixed(2):t.toFixed(0)}const T=":host{--gtv-bg: #1a1a1a;--gtv-bg-secondary: #252525;--gtv-border: #333;--gtv-text: #e0e0e0;--gtv-text-muted: #888;--gtv-accent: #4a9eff;--gtv-playhead: #4a9eff;--gtv-ruler-bg: #1f1f1f;--gtv-track-height: 28px;--gtv-controls-height: 40px;--gtv-ruler-height: 24px;--gtv-track-1: #3b82f6;--gtv-track-2: #f59e0b;--gtv-track-3: #ec4899;--gtv-track-4: #10b981;--gtv-track-5: #8b5cf6;--gtv-track-6: #ef4444}*{box-sizing:border-box;margin:0;padding:0}.gtv-container{position:fixed;bottom:0;left:0;right:0;background:var(--gtv-bg);border-top:1px solid var(--gtv-border);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;color:var(--gtv-text);z-index:999999;display:flex;flex-direction:column}.gtv-container.collapsed{height:auto!important}.gtv-container.collapsed .gtv-timeline-area{display:none}.gtv-controls{display:flex;align-items:center;justify-content:space-between;height:var(--gtv-controls-height);padding:0 12px;background:var(--gtv-bg-secondary);border-bottom:1px solid var(--gtv-border);gap:16px}.gtv-controls-left,.gtv-controls-center,.gtv-controls-right{display:flex;align-items:center;gap:8px}.gtv-controls-center{flex:0 0 auto}.gtv-time-display{font-variant-numeric:tabular-nums;min-width:100px;text-align:center}.gtv-time-current{color:var(--gtv-text)}.gtv-time-total{color:var(--gtv-text-muted)}.gtv-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:4px;color:var(--gtv-text);cursor:pointer;transition:background .15s}.gtv-btn:hover{background:#ffffff1a}.gtv-btn:active{background:#ffffff26}.gtv-btn.active{color:var(--gtv-accent)}.gtv-btn svg{width:16px;height:16px;fill:currentColor}.gtv-btn-play svg{width:20px;height:20px}.gtv-speed-btn{width:auto;padding:0 8px;font-size:11px;font-weight:500}.gtv-collapse-btn{margin-left:auto}.gtv-timeline-area{display:flex;flex-direction:column;overflow:hidden;flex:1}.gtv-ruler{position:relative;height:var(--gtv-ruler-height);background:var(--gtv-ruler-bg);border-bottom:1px solid var(--gtv-border);overflow:hidden;flex-shrink:0}.gtv-ruler-inner{position:relative;height:100%}.gtv-ruler-marker{position:absolute;top:0;height:100%;display:flex;flex-direction:column;align-items:center}.gtv-ruler-marker-line{width:1px;height:6px;background:var(--gtv-text-muted)}.gtv-ruler-marker-label{font-size:10px;color:var(--gtv-text-muted);margin-top:2px}.gtv-tracks-container{position:relative;overflow-y:auto;overflow-x:hidden;flex:1}.gtv-tracks-scroll{position:relative;min-height:100%}.gtv-track{position:relative;height:var(--gtv-track-height);border-bottom:1px solid var(--gtv-border)}.gtv-track-bar{position:absolute;top:4px;height:calc(var(--gtv-track-height) - 8px);border-radius:4px;display:flex;align-items:center;padding:0 8px;font-size:11px;font-weight:500;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;transition:filter .15s}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-track-bar.is-active{box-shadow:0 0 0 2px var(--gtv-accent)}.gtv-playhead-container{position:absolute;top:0;bottom:0;width:1px;pointer-events:none;z-index:10}.gtv-playhead-head{position:absolute;top:0;left:-5px;width:11px;height:11px;background:var(--gtv-playhead);clip-path:polygon(50% 100%,0 0,100% 0)}.gtv-playhead-line{position:absolute;top:11px;bottom:0;left:0;width:1px;background:var(--gtv-playhead)}.gtv-scrub-area{position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer}.gtv-empty{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--gtv-text-muted)}",L=["var(--gtv-track-1)","var(--gtv-track-2)","var(--gtv-track-3)","var(--gtv-track-4)","var(--gtv-track-5)","var(--gtv-track-6)"],u=[.25,.5,1,2,4];class m extends HTMLElement{constructor(){super();s(this,"shadow");s(this,"timeline",null);s(this,"timelineData",null);s(this,"isPlaying",!1);s(this,"isLooping",!1);s(this,"speedIndex",2);s(this,"collapsed",!1);s(this,"height",200);s(this,"isDragging",!1);s(this,"container");s(this,"playBtn");s(this,"loopBtn");s(this,"speedBtn");s(this,"timeDisplay");s(this,"rulerInner");s(this,"tracksScroll");s(this,"playhead");s(this,"scrubArea");this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.setupEventListeners()}disconnectedCallback(){this.detachTimeline()}setTimeline(t){this.detachTimeline(),this.timeline=t,w(),this.timelineData=S(t),t.eventCallback("onUpdate",()=>this.onTimelineUpdate()),this.renderTracks(),this.updatePlayhead(),this.updateTimeDisplay(),this.updatePlayState()}detachTimeline(){this.timeline&&(this.timeline.eventCallback("onUpdate",null),this.timeline=null,this.timelineData=null)}render(){this.shadow.innerHTML=`
-      <style>${T}</style>
+(function(h,d){typeof exports=="object"&&typeof module<"u"?d(exports):typeof define=="function"&&define.amd?define(["exports"],d):(h=typeof globalThis<"u"?globalThis:h||self,d(h.GSAPTimelineViewer={}))})(this,function(h){"use strict";var R=Object.defineProperty;var V=(h,d,b)=>d in h?R(h,d,{enumerable:!0,configurable:!0,writable:!0,value:b}):h[d]=b;var l=(h,d,b)=>V(h,typeof d!="symbol"?d+"":d,b);let d=0;function b(c){if(!c||c.length===0)return"Unknown";const s=c[0];return s.id?`#${s.id}`:s.classList&&s.classList.length>0?`.${s.classList[0]}`:s.tagName?s.tagName.toLowerCase():"element"}function D(c){const s=["ease","duration","delay","onComplete","onStart","onUpdate","onCompleteParams","onStartParams","onUpdateParams","repeat","repeatDelay","yoyo","stagger","overwrite","immediateRender","lazy","autoAlpha","id","paused","reversed","startAt"];return Object.keys(c).filter(t=>!s.includes(t))}function A(c){const s=[];c.getChildren(!0,!0,!1).forEach((e,i)=>{if(!("targets"in e))return;const a=e,r=a.targets(),n=a.vars||{},p=D(n);let m="";if(n.id&&typeof n.id=="string")m=n.id;else{const w=b(r),S=p.slice(0,2).join(", ");m=S?`${w} (${S})`:w}const u=e.startTime(),g=e.duration();let y="none";n.ease&&(y=typeof n.ease=="string"?n.ease:"custom");let f,M;if(n.stagger&&r.length>1&&(typeof n.stagger=="number"?f=n.stagger:typeof n.stagger=="object"&&(f=n.stagger.each||0),f)){const w=g-f*(r.length-1);M=r.map((S,j)=>{const C=u+j*f;return{targetLabel:b([S]),startTime:C,endTime:C+w}})}s.push({id:`tween-${++d}`,label:m,startTime:u,endTime:u+g,duration:g,targets:b(r),properties:p,colorIndex:i%6,hasStagger:!!n.stagger,ease:y,staggerValue:f,staggerChildren:M})});for(let e=1;e<s.length;e++){const i=s[e-1],a=s[e],r=i.endTime-a.startTime;Math.abs(r)>.001&&(a.overlapWithPrev=Math.round(r*1e3)/1e3)}return{duration:c.duration(),tweens:s}}function E(){d=0}function x(c,s=!0){const t=Math.abs(c);return s?t.toFixed(2):t.toFixed(0)}const H=":host{--gtv-bg: #1a1a1a;--gtv-bg-secondary: #252525;--gtv-border: #333;--gtv-text: #e0e0e0;--gtv-text-muted: #888;--gtv-accent: oklch(65% .15 220);--gtv-playhead: oklch(65% .15 220);--gtv-ruler-bg: #1f1f1f;--gtv-track-height: 28px;--gtv-controls-height: 40px;--gtv-ruler-height: 24px;--gtv-timeline-padding: 16px;--gtv-track-1: oklch(50% .12 220);--gtv-track-1-active: oklch(60% .15 220);--gtv-track-2: oklch(50% .12 70);--gtv-track-2-active: oklch(60% .15 70);--gtv-track-3: oklch(50% .12 350);--gtv-track-3-active: oklch(60% .15 350);--gtv-track-4: oklch(50% .12 160);--gtv-track-4-active: oklch(60% .15 160);--gtv-track-5: oklch(50% .12 290);--gtv-track-5-active: oklch(60% .15 290);--gtv-track-6: oklch(50% .12 25);--gtv-track-6-active: oklch(60% .15 25)}*{box-sizing:border-box;margin:0;padding:0}.gtv-container{position:fixed;bottom:0;left:0;right:0;background:var(--gtv-bg);border-top:1px solid var(--gtv-border);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;color:var(--gtv-text);z-index:999999;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}.gtv-container.collapsed{height:auto!important}.gtv-container.collapsed .gtv-timeline-area{display:none}.gtv-controls{position:relative;display:flex;align-items:center;justify-content:center;height:var(--gtv-controls-height);padding:0 12px;background:var(--gtv-bg-secondary);border-bottom:1px solid var(--gtv-border);gap:8px}.gtv-controls-left{position:absolute;left:12px;display:flex;align-items:center;gap:8px}.gtv-controls-center{display:flex;align-items:center;gap:8px}.gtv-controls-right{position:absolute;right:12px;display:flex;align-items:center;gap:8px}.gtv-time-display{font-variant-numeric:tabular-nums;min-width:100px;text-align:center}.gtv-time-current{color:var(--gtv-text)}.gtv-time-total{color:var(--gtv-text-muted)}.gtv-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:4px;color:var(--gtv-text);cursor:pointer;transition:background .15s}.gtv-btn:hover{background:#ffffff1a}.gtv-btn:active{background:#ffffff26}.gtv-btn.active{color:var(--gtv-accent)}.gtv-btn svg{width:16px;height:16px;fill:currentColor}.gtv-btn-play svg{width:20px;height:20px}.gtv-speed-btn{width:auto;padding:0 8px;font-size:11px;font-weight:500}.gtv-timeline-select{background:var(--gtv-bg);border:1px solid var(--gtv-border);border-radius:4px;color:var(--gtv-text);font-size:11px;padding:4px 8px;cursor:pointer;max-width:140px}.gtv-timeline-select:focus{outline:none;border-color:var(--gtv-accent)}.gtv-collapse-btn{margin-left:auto}.gtv-timeline-area{position:relative;display:flex;flex-direction:column;overflow:hidden;flex:1}.gtv-resize-handle{position:absolute;top:0;left:0;right:0;height:6px;cursor:ns-resize;z-index:20}.gtv-resize-handle:hover,.gtv-resize-handle:active{background:#ffffff1a}.gtv-ruler{position:relative;height:var(--gtv-ruler-height);background:var(--gtv-ruler-bg);border-bottom:1px solid var(--gtv-border);overflow:visible;flex-shrink:0;padding:0 var(--gtv-timeline-padding)}.gtv-ruler-inner{position:relative;height:100%;width:100%}.gtv-ruler-marker{position:absolute;top:0;display:flex;flex-direction:column;align-items:center}.gtv-ruler-marker-line{width:1px;height:6px;background:var(--gtv-text-muted)}.gtv-ruler-marker-label{font-size:10px;color:var(--gtv-text-muted);margin-top:2px}.gtv-grid-line{position:absolute;top:0;width:1px;height:100%;background:var(--gtv-border);pointer-events:none}.gtv-tracks-container{position:relative;overflow-y:auto;overflow-x:hidden;flex:1;padding:0 var(--gtv-timeline-padding)}.gtv-tracks-scroll{position:relative;min-height:100%;width:100%}.gtv-track{position:relative;padding-top:var(--gtv-track-height)}.gtv-track-bar{position:absolute;top:4px;height:calc(var(--gtv-track-height) - 8px);border-radius:4px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;font-size:11px;font-weight:500;color:#fff;overflow:hidden;cursor:default;transition:filter .15s}.gtv-track-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.gtv-track-stagger{opacity:.7;font-size:10px;font-weight:400;flex-shrink:0}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-playhead-wrapper{position:absolute;top:0;bottom:0;left:var(--gtv-timeline-padding);right:var(--gtv-timeline-padding);pointer-events:none;z-index:15}.gtv-playhead{position:absolute;top:0;bottom:0;width:0;left:0}.gtv-playhead-head{position:absolute;top:6px;left:-5px;width:11px;height:11px;background:var(--gtv-playhead);clip-path:polygon(50% 100%,0 0,100% 0)}.gtv-playhead-line{position:absolute;top:6px;bottom:0;left:0;width:1px;background:var(--gtv-playhead)}.gtv-scrub-area{position:absolute;top:0;left:0;right:0;bottom:0;cursor:ew-resize}.gtv-track[data-expandable=true] .gtv-track-bar{cursor:pointer}.gtv-expand-icon{transition:transform .2s}.gtv-track.expanded .gtv-expand-icon{transform:rotate(180deg)}.gtv-stagger-children{display:none;position:relative;width:100%}.gtv-track.expanded .gtv-stagger-children{display:block}.gtv-stagger-child{position:relative;width:100%;height:calc(var(--gtv-track-height) - 6px)}.gtv-stagger-child-bar{position:absolute;top:2px;height:calc(var(--gtv-track-height) - 12px);border-radius:3px;display:flex;align-items:center;padding:0 6px;font-size:10px;color:#fff;opacity:.7;overflow:hidden}.gtv-stagger-child-bar .gtv-track-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gtv-overlap-region{position:absolute;top:4px;height:calc(var(--gtv-track-height) - 8px);background:repeating-linear-gradient(-45deg,transparent,transparent 2px,rgba(255,255,255,.15) 2px,rgba(255,255,255,.15) 4px);border-radius:4px;pointer-events:none;z-index:5}.gtv-gap-connector{position:absolute;top:50%;height:1px;border-top:1px dashed var(--gtv-text-muted);pointer-events:none}.gtv-offset-badge{position:absolute;top:50%;transform:translate(-100%,-50%);margin-left:-4px;font-size:9px;font-weight:500;padding:2px 5px;border-radius:3px;white-space:nowrap;pointer-events:none;z-index:10}.gtv-offset-overlap,.gtv-offset-gap{background:var(--gtv-bg-secondary);border:1px solid var(--gtv-border);color:var(--gtv-text-muted)}.gtv-empty{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--gtv-text-muted)}",L=[.25,.5,1,2,4],$=40;class T extends HTMLElement{constructor(){super();l(this,"shadow");l(this,"timeline",null);l(this,"timelineData",null);l(this,"isPlaying",!1);l(this,"isLooping",!1);l(this,"speedIndex",2);l(this,"collapsed",!1);l(this,"height",200);l(this,"isDragging",!1);l(this,"manageBodyPadding",!0);l(this,"isAutofit",!1);l(this,"container");l(this,"playBtn");l(this,"loopBtn");l(this,"speedBtn");l(this,"timeDisplay");l(this,"rulerInner");l(this,"tracksScroll");l(this,"playhead");l(this,"scrubArea");l(this,"resizeHandle");l(this,"timelineSelect");l(this,"isResizing",!1);this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.setupEventListeners(),this.updateBodyPadding()}disconnectedCallback(){this.detachTimeline(),this.clearBodyPadding()}setTimeline(t){this.detachTimeline(),this.timeline=t,E(),this.timelineData=A(t),t.eventCallback("onUpdate",()=>this.onTimelineUpdate()),this.renderTracks(),this.updatePlayhead(),this.updateTimeDisplay(),this.updatePlayState(),requestAnimationFrame(()=>this.applyAutofit())}updateTimelineSelector(){Promise.resolve().then(()=>B).then(({TimelineViewer:t})=>{const e=t.getTimelines(),i=this.timelineSelect.value;this.timelineSelect.innerHTML="",e.forEach((a,r)=>{const n=document.createElement("option");n.value=r,n.textContent=r,this.timelineSelect.appendChild(n)}),i&&e.has(i)&&(this.timelineSelect.value=i)})}setSelectedTimeline(t){this.timelineSelect.value=t}detachTimeline(){this.timeline&&(this.timeline.eventCallback("onUpdate",null),this.timeline=null,this.timelineData=null)}render(){this.shadow.innerHTML=`
+      <style>${H}</style>
       <div class="gtv-container ${this.collapsed?"collapsed":""}" style="height: ${this.height}px;">
         <!-- Controls Bar -->
         <div class="gtv-controls">
           <div class="gtv-controls-left">
+            <select class="gtv-timeline-select" title="Select timeline">
+              <option value="">No timeline</option>
+            </select>
+            <button class="gtv-btn" data-action="loop" title="Loop (L)">
+              <svg viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
+            </button>
+            <button class="gtv-btn gtv-speed-btn" data-action="speed" title="Playback speed">1x</button>
+          </div>
+
+          <div class="gtv-controls-center">
+            <span class="gtv-time-display">
+              <span class="gtv-time-current">0.00</span>
+              <span class="gtv-time-total"> / 0.00</span>
+            </span>
             <button class="gtv-btn" data-action="skip-start" title="Skip to start">
               <svg viewBox="0 0 24 24"><path d="M6 6h2v12H6V6zm3.5 6l8.5 6V6l-8.5 6z"/></svg>
             </button>
-            <button class="gtv-btn gtv-btn-play" data-action="play" title="Play/Pause">
+            <button class="gtv-btn gtv-btn-play" data-action="play" title="Play/Pause (Space)">
               <svg class="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
               <svg class="pause-icon" viewBox="0 0 24 24" style="display: none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
             </button>
@@ -16,18 +30,10 @@
             </button>
           </div>
 
-          <div class="gtv-controls-center">
-            <button class="gtv-btn" data-action="loop" title="Loop">
-              <svg viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
-            </button>
-            <span class="gtv-time-display">
-              <span class="gtv-time-current">0.00</span>
-              <span class="gtv-time-total"> / 0.00</span>
-            </span>
-            <button class="gtv-btn gtv-speed-btn" data-action="speed" title="Playback speed">1x</button>
-          </div>
-
           <div class="gtv-controls-right">
+            <button class="gtv-btn" data-action="autofit" title="Auto-fit height">
+              <svg viewBox="0 0 24 24"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+            </button>
             <button class="gtv-btn gtv-collapse-btn" data-action="collapse" title="Collapse/Expand">
               <svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>
             </button>
@@ -36,37 +42,59 @@
 
         <!-- Timeline Area -->
         <div class="gtv-timeline-area">
+          <!-- Resize Handle -->
+          <div class="gtv-resize-handle"></div>
+
           <!-- Ruler -->
           <div class="gtv-ruler">
             <div class="gtv-ruler-inner"></div>
-            <div class="gtv-playhead-container">
-              <div class="gtv-playhead-head"></div>
-            </div>
           </div>
 
           <!-- Tracks -->
           <div class="gtv-tracks-container">
             <div class="gtv-tracks-scroll">
               <div class="gtv-scrub-area"></div>
-              <div class="gtv-playhead-container">
-                <div class="gtv-playhead-line"></div>
-              </div>
             </div>
             <div class="gtv-empty">No timeline attached. Call setTimeline() to visualize a GSAP timeline.</div>
           </div>
+
+          <!-- Playhead spans entire timeline area -->
+          <div class="gtv-playhead-wrapper">
+            <div class="gtv-playhead">
+              <div class="gtv-playhead-head"></div>
+              <div class="gtv-playhead-line"></div>
+            </div>
+          </div>
         </div>
       </div>
-    `,this.container=this.shadow.querySelector(".gtv-container"),this.playBtn=this.shadow.querySelector('[data-action="play"]'),this.loopBtn=this.shadow.querySelector('[data-action="loop"]'),this.speedBtn=this.shadow.querySelector('[data-action="speed"]'),this.timeDisplay=this.shadow.querySelector(".gtv-time-display"),this.rulerInner=this.shadow.querySelector(".gtv-ruler-inner"),this.tracksScroll=this.shadow.querySelector(".gtv-tracks-scroll"),this.playhead=this.shadow.querySelector(".gtv-ruler .gtv-playhead-container"),this.scrubArea=this.shadow.querySelector(".gtv-scrub-area")}setupEventListeners(){this.shadow.addEventListener("click",t=>{const a=t.target.closest("[data-action]");if(!a)return;switch(a.dataset.action){case"play":this.togglePlay();break;case"skip-start":this.skipToStart();break;case"skip-end":this.skipToEnd();break;case"loop":this.toggleLoop();break;case"speed":this.cycleSpeed();break;case"collapse":this.toggleCollapse();break}}),this.scrubArea.addEventListener("mousedown",t=>this.startScrub(t)),this.shadow.querySelector(".gtv-ruler").addEventListener("mousedown",t=>this.startScrub(t)),document.addEventListener("mousemove",t=>this.onScrub(t)),document.addEventListener("mouseup",()=>this.endScrub()),document.addEventListener("keydown",t=>{t.target===document.body&&t.code==="Space"&&(t.preventDefault(),this.togglePlay())})}startScrub(t){this.timeline&&(this.isDragging=!0,this.scrubToPosition(t))}onScrub(t){!this.isDragging||!this.timeline||this.scrubToPosition(t)}endScrub(){this.isDragging=!1}scrubToPosition(t){if(!this.timeline||!this.timelineData)return;const e=this.rulerInner.getBoundingClientRect(),r=Math.max(0,Math.min(t.clientX-e.left,e.width))/e.width;this.timeline.progress(r),this.timeline.pause(),this.updatePlayState()}togglePlay(){this.timeline&&(this.timeline.paused()||this.timeline.progress()===1?this.timeline.progress()===1?this.timeline.restart():this.timeline.play():this.timeline.pause(),this.updatePlayState())}skipToStart(){this.timeline&&(this.timeline.progress(0),this.timeline.pause(),this.updatePlayState())}skipToEnd(){this.timeline&&(this.timeline.progress(1),this.timeline.pause(),this.updatePlayState())}toggleLoop(){this.timeline&&(this.isLooping=!this.isLooping,this.timeline.repeat(this.isLooping?-1:0),this.loopBtn.classList.toggle("active",this.isLooping))}cycleSpeed(){if(!this.timeline)return;this.speedIndex=(this.speedIndex+1)%u.length;const t=u[this.speedIndex];this.timeline.timeScale(t),this.speedBtn.textContent=`${t}x`}toggleCollapse(){this.collapsed=!this.collapsed,this.container.classList.toggle("collapsed",this.collapsed);const t=this.shadow.querySelector('[data-action="collapse"]');t.innerHTML=this.collapsed?'<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>':'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>'}updatePlayState(){if(!this.timeline)return;this.isPlaying=!this.timeline.paused()&&this.timeline.progress()<1;const t=this.playBtn.querySelector(".play-icon"),e=this.playBtn.querySelector(".pause-icon");t.style.display=this.isPlaying?"none":"block",e.style.display=this.isPlaying?"block":"none"}onTimelineUpdate(){this.updatePlayhead(),this.updateTimeDisplay(),this.updateActiveTracks(),this.updatePlayState()}updatePlayhead(){if(!this.timeline||!this.timelineData)return;const e=`${this.timeline.progress()*100}%`;this.playhead.style.left=e;const a=this.tracksScroll.querySelector(".gtv-playhead-container");a&&(a.style.left=e)}updateTimeDisplay(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time(),e=this.timelineData.duration,a=this.timeDisplay.querySelector(".gtv-time-current"),r=this.timeDisplay.querySelector(".gtv-time-total");a.textContent=g(t),r.textContent=` / ${g(e)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((a,r)=>{const c=this.timelineData.tweens[r],d=t>=c.startTime&&t<=c.endTime;a.classList.toggle("is-active",d)})}renderTracks(){if(!this.timelineData)return;const{duration:t,tweens:e}=this.timelineData,a=this.shadow.querySelector(".gtv-empty");a.style.display=e.length>0?"none":"flex",this.renderRuler(t);const r=e.map(p=>this.renderTrack(p,t)).join(""),c=this.tracksScroll.querySelector(".gtv-scrub-area"),d=this.tracksScroll.querySelector(".gtv-playhead-container");this.tracksScroll.innerHTML=r,this.tracksScroll.prepend(c),this.tracksScroll.appendChild(d),this.scrubArea=c}renderRuler(t){const e=[],a=this.calculateInterval(t);for(let r=0;r<=t;r+=a){const c=r/t*100;e.push(`
-        <div class="gtv-ruler-marker" style="left: ${c}%;">
+    `,this.container=this.shadow.querySelector(".gtv-container"),this.playBtn=this.shadow.querySelector('[data-action="play"]'),this.loopBtn=this.shadow.querySelector('[data-action="loop"]'),this.speedBtn=this.shadow.querySelector('[data-action="speed"]'),this.timeDisplay=this.shadow.querySelector(".gtv-time-display"),this.rulerInner=this.shadow.querySelector(".gtv-ruler-inner"),this.tracksScroll=this.shadow.querySelector(".gtv-tracks-scroll"),this.playhead=this.shadow.querySelector(".gtv-playhead"),this.scrubArea=this.shadow.querySelector(".gtv-scrub-area"),this.resizeHandle=this.shadow.querySelector(".gtv-resize-handle"),this.timelineSelect=this.shadow.querySelector(".gtv-timeline-select")}setupEventListeners(){this.shadow.addEventListener("click",t=>{const i=t.target.closest("[data-action]");if(!i)return;switch(i.dataset.action){case"play":this.togglePlay();break;case"skip-start":this.skipToStart();break;case"skip-end":this.skipToEnd();break;case"loop":this.toggleLoop();break;case"speed":this.cycleSpeed();break;case"collapse":this.toggleCollapse();break;case"autofit":this.toggleAutofit();break}}),this.timelineSelect.addEventListener("change",()=>{const t=this.timelineSelect.value;t&&Promise.resolve().then(()=>B).then(({TimelineViewer:e})=>{var i;(i=e.getInstance())==null||i.select(t)})}),this.shadow.addEventListener("click",t=>{const i=t.target.closest(".gtv-track-bar");if(i){const a=i.closest(".gtv-track");(a==null?void 0:a.dataset.expandable)==="true"&&(t.stopPropagation(),a.classList.toggle("expanded"),requestAnimationFrame(()=>this.applyAutofit()))}}),this.scrubArea.addEventListener("mousedown",t=>this.startScrub(t)),this.shadow.querySelector(".gtv-ruler").addEventListener("mousedown",t=>this.startScrub(t)),this.shadow.querySelector(".gtv-tracks-container").addEventListener("mousedown",t=>{t.target.closest(".gtv-track-bar")||this.startScrub(t)}),document.addEventListener("mousemove",t=>{this.onScrub(t),this.onResize(t)}),document.addEventListener("mouseup",()=>{this.endScrub(),this.endResize()}),this.resizeHandle.addEventListener("mousedown",t=>this.startResize(t)),document.addEventListener("keydown",t=>{if(t.target===document.body)switch(t.code){case"Space":t.preventDefault(),this.togglePlay();break;case"KeyJ":t.preventDefault(),this.jumpToPrevPoint();break;case"KeyK":t.preventDefault(),this.jumpToNextPoint();break;case"KeyL":t.preventDefault(),this.toggleLoop();break}})}startScrub(t){this.timeline&&(t.preventDefault(),this.isDragging=!0,document.body.style.cursor="ew-resize",document.body.style.userSelect="none",this.scrubToPosition(t))}onScrub(t){!this.isDragging||!this.timeline||this.scrubToPosition(t)}endScrub(){this.isDragging=!1,document.body.style.cursor="",document.body.style.userSelect=""}startResize(t){t.preventDefault(),this.isResizing=!0,document.body.style.cursor="ns-resize",document.body.style.userSelect="none"}onResize(t){if(!this.isResizing)return;const e=window.innerHeight,i=e-t.clientY;this.height=Math.max(100,Math.min(i,e-100)),this.container.style.height=`${this.height}px`,this.updateBodyPadding()}endResize(){this.isResizing&&(this.isResizing=!1,document.body.style.cursor="",document.body.style.userSelect="")}updateBodyPadding(){if(!this.manageBodyPadding)return;const t=this.collapsed?$:this.height;document.body.style.paddingBottom=`${t}px`}clearBodyPadding(){this.manageBodyPadding&&(document.body.style.paddingBottom="")}scrubToPosition(t){if(!this.timeline||!this.timelineData)return;const e=this.rulerInner.getBoundingClientRect(),a=Math.max(0,Math.min(t.clientX-e.left,e.width))/e.width;this.timeline.progress(a),this.timeline.pause(),this.updatePlayState()}togglePlay(){this.timeline&&(this.timeline.paused()||this.timeline.progress()===1?this.timeline.progress()===1?this.timeline.restart():this.timeline.play():this.timeline.pause(),this.updatePlayState())}skipToStart(){this.timeline&&(this.timeline.progress(0),this.timeline.pause(),this.updatePlayState())}skipToEnd(){this.timeline&&(this.timeline.progress(1),this.timeline.pause(),this.updatePlayState())}getTimePoints(){if(!this.timelineData)return[0];const t=new Set;return t.add(0),t.add(Math.round(this.timelineData.duration*1e3)/1e3),this.timelineData.tweens.forEach(e=>{t.add(Math.round(e.startTime*1e3)/1e3),t.add(Math.round(e.endTime*1e3)/1e3)}),Array.from(t).sort((e,i)=>e-i)}jumpToPrevPoint(){if(!this.timeline||!this.timelineData)return;const t=Math.round(this.timeline.time()*1e3)/1e3,e=this.getTimePoints();let i=0;for(const a of e)if(a<t-.001)i=a;else break;this.timeline.time(i),this.timeline.pause(),this.updatePlayState()}jumpToNextPoint(){if(!this.timeline||!this.timelineData)return;const t=Math.round(this.timeline.time()*1e3)/1e3,e=this.getTimePoints();let i=this.timelineData.duration;for(const a of e)if(a>t+.001){i=a;break}this.timeline.time(i),this.timeline.pause(),this.updatePlayState()}toggleLoop(){this.timeline&&(this.isLooping=!this.isLooping,this.timeline.repeat(this.isLooping?-1:0),this.loopBtn.classList.toggle("active",this.isLooping))}cycleSpeed(){if(!this.timeline)return;this.speedIndex=(this.speedIndex+1)%L.length;const t=L[this.speedIndex];this.timeline.timeScale(t),this.speedBtn.textContent=`${t}x`}toggleCollapse(){this.collapsed=!this.collapsed,this.container.classList.toggle("collapsed",this.collapsed);const t=this.shadow.querySelector('[data-action="collapse"]');t.innerHTML=this.collapsed?'<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>':'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>',this.updateBodyPadding()}toggleAutofit(){this.isAutofit=!this.isAutofit,this.shadow.querySelector('[data-action="autofit"]').classList.toggle("active",this.isAutofit),this.isAutofit&&this.applyAutofit()}applyAutofit(){if(!this.isAutofit||this.collapsed)return;const t=this.shadow.querySelectorAll(".gtv-track");let e=0;const i=28,a=22;t.forEach(u=>{if(e+=i,u.classList.contains("expanded")){const g=u.querySelectorAll(".gtv-stagger-child");e+=g.length*a}});const r=24,n=16,p=100,m=window.innerHeight-100;this.height=Math.max(p,Math.min($+r+e+n,m)),this.container.style.height=`${this.height}px`,this.updateBodyPadding()}updatePlayState(){if(!this.timeline)return;this.isPlaying=!this.timeline.paused()&&this.timeline.progress()<1;const t=this.playBtn.querySelector(".play-icon"),e=this.playBtn.querySelector(".pause-icon");t.style.display=this.isPlaying?"none":"block",e.style.display=this.isPlaying?"block":"none"}onTimelineUpdate(){this.updatePlayhead(),this.updateTimeDisplay(),this.updateActiveTracks(),this.updatePlayState()}updatePlayhead(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.progress();this.playhead.style.left=`${t*100}%`}updateTimeDisplay(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time(),e=this.timelineData.duration,i=this.timeDisplay.querySelector(".gtv-time-current"),a=this.timeDisplay.querySelector(".gtv-time-total");i.textContent=x(t),a.textContent=` / ${x(e)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((i,a)=>{const r=this.timelineData.tweens[a],n=t>=r.startTime&&t<=r.endTime,p=i.dataset.color;n?i.style.background=`var(--gtv-track-${p}-active)`:i.style.background=`var(--gtv-track-${p})`})}renderTracks(){if(!this.timelineData)return;const{duration:t,tweens:e}=this.timelineData,i=this.shadow.querySelector(".gtv-empty");i.style.display=e.length>0?"none":"flex",this.renderRuler(t);const a=this.renderGridLines(t),r=e.map(p=>this.renderTrack(p,t)).join(""),n=this.tracksScroll.querySelector(".gtv-scrub-area");this.tracksScroll.innerHTML=a+r,this.tracksScroll.prepend(n),this.scrubArea=n}renderGridLines(t){const e=[],i=this.calculateInterval(t);for(let a=0;a<=t;a+=i){const r=a/t*100;e.push(`<div class="gtv-grid-line" style="left: ${r}%;"></div>`)}return e.join("")}renderRuler(t){const e=[],i=this.calculateInterval(t);for(let a=0;a<=t;a+=i){const r=a/t*100;e.push(`
+        <div class="gtv-ruler-marker" style="left: ${r}%;">
           <div class="gtv-ruler-marker-line"></div>
-          <span class="gtv-ruler-marker-label">${g(r,!1)}s</span>
+          <span class="gtv-ruler-marker-label">${x(a,!1)}s</span>
         </div>
-      `)}this.rulerInner.innerHTML=e.join("")}calculateInterval(t){return t<=1?.25:t<=3?.5:t<=10?1:t<=30?5:10}renderTrack(t,e){const a=t.startTime/e*100,r=t.duration/e*100,c=L[t.colorIndex];return`
-      <div class="gtv-track">
+      `)}this.rulerInner.innerHTML=e.join("")}calculateInterval(t){return t<=1?.25:t<=3?.5:t<=10?1:t<=30?5:10}renderTrack(t,e){const i=t.startTime/e*100,a=t.duration/e*100,r=t.colorIndex+1;let n="";t.hasStagger&&t.staggerChildren&&t.staggerChildren.length>0&&(n='<span class="gtv-track-stagger"><svg class="gtv-expand-icon" viewBox="0 0 24 24" width="10" height="10"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg> Stagger</span>');let p="";if(t.staggerChildren&&t.staggerChildren.length>0){const u=t.staggerChildren.map(g=>{const y=g.startTime/e*100,f=(g.endTime-g.startTime)/e*100;return`
+          <div class="gtv-stagger-child">
+            <div class="gtv-stagger-child-bar"
+                 style="left: ${y}%; width: ${f}%; background: var(--gtv-track-${r});">
+              <span class="gtv-track-label">${g.targetLabel}</span>
+            </div>
+          </div>
+        `}).join("");p=`<div class="gtv-stagger-children" data-for="${t.id}">${u}</div>`}let m="";if(t.overlapWithPrev!==void 0){const u=t.overlapWithPrev>0,g=Math.abs(t.overlapWithPrev)/e*100,y=u?`-${x(t.overlapWithPrev)}s`:`+${x(Math.abs(t.overlapWithPrev))}s`;u?m=`
+          <div class="gtv-overlap-region" style="left: ${i}%; width: ${g}%;"></div>
+          <span class="gtv-offset-badge gtv-offset-overlap" style="left: ${i}%;">${y}</span>
+        `:m=`
+          <div class="gtv-gap-connector" style="left: ${i-g}%; width: ${g}%;"></div>
+          <span class="gtv-offset-badge gtv-offset-gap" style="left: ${i}%;">${y}</span>
+        `}return`
+      <div class="gtv-track" data-expandable="${t.hasStagger&&t.staggerChildren?"true":"false"}">
+        ${m}
         <div class="gtv-track-bar"
-             style="left: ${a}%; width: ${r}%; background: ${c};"
-             title="${t.label} (${g(t.startTime)}s - ${g(t.endTime)}s)">
-          ${t.label}
+             data-color="${r}"
+             data-tween-id="${t.id}"
+             style="left: ${i}%; width: ${a}%; background: var(--gtv-track-${r});">
+          <span class="gtv-track-label">${t.label}</span>
+          ${n}
         </div>
+        ${p}
       </div>
-    `}}customElements.define("gsap-timeline-viewer",m);class P{constructor(i){s(this,"element");this.element=document.createElement("gsap-timeline-viewer"),i.height&&this.element.style.setProperty("--viewer-height",`${i.height}px`),i.timeline&&setTimeout(()=>{this.element.setTimeline(i.timeline)},0)}attach(i=document.body){i.appendChild(this.element)}detach(){this.element.remove()}setTimeline(i){this.element.setTimeline(i)}get htmlElement(){return this.element}}l.TimelineViewer=P,l.TimelineViewerElement=m,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
+    `}}customElements.define("gsap-timeline-viewer",T);const v=new Map;let o=null,z=!0,q=0,P=null;function I(){const c=window.gsap;!c||P||(P=c.timeline.bind(c),c.timeline=function(s){const t=P(s);if(z){let e;s!=null&&s.id&&typeof s.id=="string"?e=s.id:e=`Timeline ${++q}`,v.has(e)||(v.set(e,t),o&&(o.htmlElement.updateTimelineSelector(),v.size===1&&o.select(e)))}return t})}class k{constructor(s={}){l(this,"element");l(this,"currentTimelineName",null);this.element=document.createElement("gsap-timeline-viewer"),s.height&&this.element.style.setProperty("--viewer-height",`${s.height}px`)}static create(s={}){return o||(z=s.autoDetect!==!1,z&&I(),o=new k(s),document.body.appendChild(o.element),setTimeout(()=>{if(o.element.updateTimelineSelector(),s.defaultTimeline&&v.has(s.defaultTimeline))o.select(s.defaultTimeline);else if(v.size>0){const t=v.keys().next().value;t&&o.select(t)}},0),o)}static register(s,t){v.set(s,t),o&&(o.element.updateTimelineSelector(),v.size===1&&o.select(s))}static unregister(s){v.delete(s),o&&o.element.updateTimelineSelector()}static getTimelines(){return v}static getInstance(){return o}select(s){const t=v.get(s);t&&(this.currentTimelineName=s,this.element.setTimeline(t),this.element.setSelectedTimeline(s))}getCurrentTimelineName(){return this.currentTimelineName}destroy(){this.element.remove(),o=null}get htmlElement(){return this.element}}const B=Object.freeze(Object.defineProperty({__proto__:null,TimelineViewer:k,TimelineViewerElement:T},Symbol.toStringTag,{value:"Module"}));h.TimelineViewer=k,h.TimelineViewerElement=T,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -1,16 +1,48 @@
 export declare class TimelineViewer {
     private element;
-    constructor(config: TimelineViewerConfig);
-    attach(container?: HTMLElement): void;
-    detach(): void;
-    setTimeline(timeline: gsap.core.Timeline): void;
+    private currentTimelineName;
+    private constructor();
+    /**
+     * Create and attach the timeline viewer to the page.
+     * Call this once - subsequent calls return the existing instance.
+     */
+    static create(config?: TimelineViewerConfig): TimelineViewer;
+    /**
+     * Register a timeline with a name so it appears in the dropdown.
+     */
+    static register(name: string, timeline: gsap.core.Timeline): void;
+    /**
+     * Unregister a timeline.
+     */
+    static unregister(name: string): void;
+    /**
+     * Get all registered timelines.
+     */
+    static getTimelines(): Map<string, gsap.core.Timeline>;
+    /**
+     * Get the viewer instance (if created).
+     */
+    static getInstance(): TimelineViewer | null;
+    /**
+     * Select a timeline by name.
+     */
+    select(name: string): void;
+    /**
+     * Get current timeline name.
+     */
+    getCurrentTimelineName(): string | null;
+    /**
+     * Remove the viewer from the page.
+     */
+    destroy(): void;
     get htmlElement(): TimelineViewerElement;
 }
 
 export declare interface TimelineViewerConfig {
-    timeline: gsap.core.Timeline;
     height?: number;
     collapsed?: boolean;
+    defaultTimeline?: string;
+    autoDetect?: boolean;
 }
 
 export declare class TimelineViewerElement extends HTMLElement {
@@ -23,6 +55,8 @@ export declare class TimelineViewerElement extends HTMLElement {
     private collapsed;
     private height;
     private isDragging;
+    private manageBodyPadding;
+    private isAutofit;
     private container;
     private playBtn;
     private loopBtn;
@@ -32,29 +66,45 @@ export declare class TimelineViewerElement extends HTMLElement {
     private tracksScroll;
     private playhead;
     private scrubArea;
+    private resizeHandle;
+    private timelineSelect;
+    private isResizing;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     setTimeline(timeline: gsap.core.Timeline): void;
+    updateTimelineSelector(): void;
+    setSelectedTimeline(name: string): void;
     private detachTimeline;
     private render;
     private setupEventListeners;
     private startScrub;
     private onScrub;
     private endScrub;
+    private startResize;
+    private onResize;
+    private endResize;
+    private updateBodyPadding;
+    private clearBodyPadding;
     private scrubToPosition;
     private togglePlay;
     private skipToStart;
     private skipToEnd;
+    private getTimePoints;
+    private jumpToPrevPoint;
+    private jumpToNextPoint;
     private toggleLoop;
     private cycleSpeed;
     private toggleCollapse;
+    private toggleAutofit;
+    private applyAutofit;
     private updatePlayState;
     private onTimelineUpdate;
     private updatePlayhead;
     private updateTimeDisplay;
     private updateActiveTracks;
     private renderTracks;
+    private renderGridLines;
     private renderRuler;
     private calculateInterval;
     private renderTrack;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gsap-timeline-viewer",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A lightweight, framework-agnostic timeline viewer for GSAP animations",
   "type": "module",
   "main": "./dist/gsap-timeline-viewer.umd.cjs",