gsap-timeline-viewer 0.1.6 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/gsap-timeline-viewer.iife.js +8 -8
  2. package/dist/gsap-timeline-viewer.js +157 -142
  3. package/dist/gsap-timeline-viewer.umd.cjs +12 -12
  4. package/package.json +1 -1
package/dist/gsap-timeline-viewer.iife.js CHANGED
@@ -1,5 +1,5 @@
1
- var GSAPTimelineViewer=function(p){"use strict";var N=Object.defineProperty;var U=(p,u,b)=>u in p?N(p,u,{enumerable:!0,configurable:!0,writable:!0,value:b}):p[u]=b;var o=(p,u,b)=>U(p,typeof u!="symbol"?u+"":u,b);let u=0;function b(l){if(!l||l.length===0)return"Unknown";const s=l[0];return s.id?`#${s.id}`:s.classList&&s.classList.length>0?`.${s.classList[0]}`:s.tagName?s.tagName.toLowerCase():"element"}function M(l){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(l).filter(t=>!s.includes(t))}function D(l=20){const s=[];for(let t=0;t<=l;t++)s.push(t/l);return s}function A(l,s,t=20){var n;const e=window.gsap;let i=(n=e==null?void 0:e.parseEase)==null?void 0:n.call(e,l);if(!i&&s&&(i=s._ease),!i)return D(t);const a=[];for(let r=0;r<=t;r++)a.push(i(r/t));return a}function H(l){const s=[];l.getChildren(!0,!0,!1).forEach((e,i)=>{if(!("targets"in e))return;const a=e,n=a.targets(),r=a.vars||{},d=M(r);let y="";if(r.id&&typeof r.id=="string")y=r.id;else{const w=b(n),T=d.slice(0,2).join(", ");y=T?`${w} (${T})`:w}const m=e.startTime(),f=e.duration();let g="power1.out";r.ease&&(g=typeof r.ease=="string"?r.ease:"custom");let v,x;if(r.stagger&&n.length>1&&(typeof r.stagger=="number"?v=r.stagger:typeof r.stagger=="object"&&(v=r.stagger.each||0),v)){const w=f-v*(n.length-1);x=n.map((T,V)=>{const B=m+V*v;return{targetLabel:b([T]),startTime:B,endTime:B+w}})}s.push({id:`tween-${++u}`,label:y,startTime:m,endTime:m+f,duration:f,targets:b(n),properties:d,colorIndex:i%6,hasStagger:!!r.stagger,ease:g,easeSamples:A(g,a),staggerValue:v,staggerChildren:x})});for(let e=1;e<s.length;e++){const i=s[e-1],a=s[e],n=i.endTime-a.startTime;Math.abs(n)>.001&&(a.overlapWithPrev=Math.round(n*1e3)/1e3)}return{duration:l.duration(),tweens:s}}function q(){u=0}function k(l,s=!0){const t=Math.abs(l);return s?t.toFixed(2):t.toFixed(0)}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: 36px;--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;position:relative;z-index:1}.gtv-track-stagger{font-size:10px;font-weight:400;flex-shrink:0;position:relative;z-index:1}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-ease-curve{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .15s}.gtv-ease-curve path{fill:var(--track-color);stroke:none}.gtv-container.show-ease-curves .gtv-ease-curve{opacity:1}.gtv-container.show-ease-curves .gtv-track-bar,.gtv-container.show-ease-curves .gtv-stagger-child-bar{background:transparent!important}.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;overflow:hidden}.gtv-stagger-child-bar .gtv-track-label{overflow:hidden;position:relative;z-index:1;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-container.show-ease-curves .gtv-overlap-region{display:none}.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)}",$=[.25,.5,1,2,4],C=40;class P extends HTMLElement{constructor(){super();o(this,"shadow");o(this,"timeline",null);o(this,"timelineData",null);o(this,"isPlaying",!1);o(this,"isLooping",!1);o(this,"speedIndex",2);o(this,"collapsed",!1);o(this,"height",200);o(this,"isDragging",!1);o(this,"manageBodyPadding",!0);o(this,"isAutofit",!1);o(this,"showEaseCurves",!1);o(this,"container");o(this,"playBtn");o(this,"loopBtn");o(this,"speedBtn");o(this,"timeDisplay");o(this,"rulerInner");o(this,"tracksScroll");o(this,"playhead");o(this,"scrubArea");o(this,"resizeHandle");o(this,"timelineSelect");o(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,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(()=>E).then(({TimelineViewer:t})=>{const e=t.getTimelines(),i=this.timelineSelect.value;this.timelineSelect.innerHTML="",e.forEach((a,n)=>{const r=document.createElement("option");r.value=n,r.textContent=n,this.timelineSelect.appendChild(r)}),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=`
2
- <style>${I}</style>
1
+ var GSAPTimelineViewer=function(p){"use strict";var _=Object.defineProperty;var G=(p,u,b)=>u in p?_(p,u,{enumerable:!0,configurable:!0,writable:!0,value:b}):p[u]=b;var o=(p,u,b)=>G(p,typeof u!="symbol"?u+"":u,b);let u=0;function b(l){if(!l||l.length===0)return"Unknown";const a=l[0];return a.id?`#${a.id}`:a.classList&&a.classList.length>0?`.${a.classList[0]}`:a.tagName?a.tagName.toLowerCase():"element"}function A(l){const a=["ease","duration","delay","onComplete","onStart","onUpdate","onCompleteParams","onStartParams","onUpdateParams","repeat","repeatDelay","yoyo","stagger","overwrite","immediateRender","lazy","autoAlpha","id","paused","reversed","startAt"];return Object.keys(l).filter(t=>!a.includes(t))}function H(l=20){const a=[];for(let t=0;t<=l;t++)a.push(t/l);return a}function q(l,a,t=20){var n;const e=window.gsap;let i=(n=e==null?void 0:e.parseEase)==null?void 0:n.call(e,l);if(!i&&a&&(i=a._ease),!i)return H(t);const s=[];for(let r=0;r<=t;r++)s.push(i(r/t));return s}function I(l){const a=[];l.getChildren(!0,!0,!1).forEach((e,i)=>{if(!("targets"in e))return;const s=e,n=s.targets(),r=s.vars||{},d=A(r);let y="";if(r.id&&typeof r.id=="string")y=r.id;else{const S=b(n),P=d.slice(0,2).join(", ");y=P?`${S} (${P})`:S}const m=e.startTime(),f=e.duration();let g="power1.out";r.ease&&(g=typeof r.ease=="string"?r.ease:"custom");let v,x;if(r.stagger&&n.length>1&&(typeof r.stagger=="number"?v=r.stagger:typeof r.stagger=="object"&&(v=r.stagger.each||0),v)){const S=f-v*(n.length-1);x=n.map((P,F)=>{const D=m+F*v;return{targetLabel:b([P]),startTime:D,endTime:D+S}})}a.push({id:`tween-${++u}`,label:y,startTime:m,endTime:m+f,duration:f,targets:b(n),properties:d,colorIndex:i%6,hasStagger:!!r.stagger,ease:g,easeSamples:q(g,s),staggerValue:v,staggerChildren:x})});for(let e=1;e<a.length;e++){const i=a[e-1],s=a[e],n=i.endTime-s.startTime;Math.abs(n)>.001&&(s.overlapWithPrev=Math.round(n*1e3)/1e3)}return{duration:l.duration(),tweens:a}}function R(){u=0}function k(l,a=!0){const t=Math.abs(l);return a?t.toFixed(2):t.toFixed(0)}const V=":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: 36px;--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;position:relative;z-index:1}.gtv-track-stagger{font-size:10px;font-weight:400;flex-shrink:0;position:relative;z-index:1}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-ease-curve{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .15s}.gtv-ease-curve path{fill:var(--track-color);stroke:none}.gtv-container.show-ease-curves .gtv-ease-curve{opacity:1}.gtv-container.show-ease-curves .gtv-track-bar,.gtv-container.show-ease-curves .gtv-stagger-child-bar{background:transparent!important}.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;overflow:hidden}.gtv-stagger-child-bar .gtv-track-label{overflow:hidden;position:relative;z-index:1;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-container.show-ease-curves .gtv-overlap-region{display:none}.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 z extends HTMLElement{constructor(){super();o(this,"shadow");o(this,"timeline",null);o(this,"timelineData",null);o(this,"isPlaying",!1);o(this,"isLooping",!1);o(this,"speedIndex",2);o(this,"collapsed",!1);o(this,"height",200);o(this,"isDragging",!1);o(this,"manageBodyPadding",!0);o(this,"isAutofit",!1);o(this,"showEaseCurves",!1);o(this,"container");o(this,"playBtn");o(this,"loopBtn");o(this,"speedBtn");o(this,"timeDisplay");o(this,"rulerInner");o(this,"tracksScroll");o(this,"playhead");o(this,"scrubArea");o(this,"resizeHandle");o(this,"timelineSelect");o(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,R(),this.timelineData=I(t),t.eventCallback("onUpdate",()=>this.onTimelineUpdate()),this.renderTracks(),this.updatePlayhead(),this.updateTimeDisplay(),this.updatePlayState(),requestAnimationFrame(()=>this.applyAutofit())}updateTimelineSelector(){Promise.resolve().then(()=>M).then(({TimelineViewer:t})=>{const e=t.getTimelines(),i=this.timelineSelect.value;this.timelineSelect.innerHTML="",e.forEach((s,n)=>{const r=document.createElement("option");r.value=n,r.textContent=n,this.timelineSelect.appendChild(r)}),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=`
2
+ <style>${V}</style>
3
3
  <div class="gtv-container ${this.collapsed?"collapsed":""}" style="height: ${this.height}px;">
4
4
  <!-- Controls Bar -->
5
5
  <div class="gtv-controls">
@@ -70,16 +70,16 @@ var GSAPTimelineViewer=function(p){"use strict";var N=Object.defineProperty;var
70
70
  </div>
71
71
  </div>
72
72
  </div>
73
- `,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;case"ease-curves":this.toggleEaseCurves();break}}),this.timelineSelect.addEventListener("change",()=>{const t=this.timelineSelect.value;t&&Promise.resolve().then(()=>E).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?C: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)%$.length;const t=$[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()}toggleEaseCurves(){this.showEaseCurves=!this.showEaseCurves,this.shadow.querySelector('[data-action="ease-curves"]').classList.toggle("active",this.showEaseCurves),this.container.classList.toggle("show-ease-curves",this.showEaseCurves)}applyAutofit(){if(!this.isAutofit||this.collapsed)return;const t=this.shadow.querySelectorAll(".gtv-track");let e=0;const i=36,a=30;t.forEach(m=>{if(e+=i,m.classList.contains("expanded")){const f=m.querySelectorAll(".gtv-stagger-child");e+=f.length*a}});const n=24,r=16,d=100,y=window.innerHeight-100;this.height=Math.max(d,Math.min(C+n+e+r,y)),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=k(t),a.textContent=` / ${k(e)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((i,a)=>{const n=this.timelineData.tweens[a],r=t>=n.startTime&&t<=n.endTime,d=i.dataset.color;r?i.style.background=`var(--gtv-track-${d}-active)`:i.style.background=`var(--gtv-track-${d})`})}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),n=e.map(d=>this.renderTrack(d,t)).join(""),r=this.tracksScroll.querySelector(".gtv-scrub-area");this.tracksScroll.innerHTML=a+n,this.tracksScroll.prepend(r),this.scrubArea=r}renderGridLines(t){const e=[],i=this.calculateInterval(t);for(let a=0;a<=t;a+=i){const n=a/t*100;e.push(`<div class="gtv-grid-line" style="left: ${n}%;"></div>`)}return e.join("")}renderRuler(t){const e=[],i=this.calculateInterval(t);for(let a=0;a<=t;a+=i){const n=a/t*100;e.push(`
73
+ `,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;case"ease-curves":this.toggleEaseCurves();break}}),this.timelineSelect.addEventListener("change",()=>{const t=this.timelineSelect.value;t&&Promise.resolve().then(()=>M).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 s=i.closest(".gtv-track");(s==null?void 0:s.dataset.expandable)==="true"&&(t.stopPropagation(),s.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(),s=Math.max(0,Math.min(t.clientX-e.left,e.width))/e.width;this.timeline.progress(s),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 s of e)if(s<t-.001)i=s;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 s of e)if(s>t+.001){i=s;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()}toggleEaseCurves(){this.showEaseCurves=!this.showEaseCurves,this.shadow.querySelector('[data-action="ease-curves"]').classList.toggle("active",this.showEaseCurves),this.container.classList.toggle("show-ease-curves",this.showEaseCurves)}applyAutofit(){if(!this.isAutofit||this.collapsed)return;const t=this.shadow.querySelectorAll(".gtv-track");let e=0;const i=36,s=30;t.forEach(m=>{if(e+=i,m.classList.contains("expanded")){const f=m.querySelectorAll(".gtv-stagger-child");e+=f.length*s}});const n=24,r=16,d=100,y=window.innerHeight-100;this.height=Math.max(d,Math.min($+n+e+r,y)),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"),s=this.timeDisplay.querySelector(".gtv-time-total");i.textContent=k(t),s.textContent=` / ${k(e)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((i,s)=>{const n=this.timelineData.tweens[s],r=t>=n.startTime&&t<=n.endTime,d=i.dataset.color;r?i.style.background=`var(--gtv-track-${d}-active)`:i.style.background=`var(--gtv-track-${d})`})}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 s=this.renderGridLines(t),n=e.map(d=>this.renderTrack(d,t)).join(""),r=this.tracksScroll.querySelector(".gtv-scrub-area");this.tracksScroll.innerHTML=s+n,this.tracksScroll.prepend(r),this.scrubArea=r}renderGridLines(t){const e=[],i=this.calculateInterval(t);for(let s=0;s<=t;s+=i){const n=s/t*100;e.push(`<div class="gtv-grid-line" style="left: ${n}%;"></div>`)}return e.join("")}renderRuler(t){const e=[],i=this.calculateInterval(t);for(let s=0;s<=t;s+=i){const n=s/t*100;e.push(`
74
74
  <div class="gtv-ruler-marker" style="left: ${n}%;">
75
75
  <div class="gtv-ruler-marker-line"></div>
76
- <span class="gtv-ruler-marker-label">${k(a,!1)}s</span>
76
+ <span class="gtv-ruler-marker-label">${k(s,!1)}s</span>
77
77
  </div>
78
78
  `)}this.rulerInner.innerHTML=e.join("")}calculateInterval(t){return t<=1?.25:t<=3?.5:t<=10?1:t<=30?5:10}renderEaseCurve(t){return t!=null&&t.length?`
79
79
  <svg class="gtv-ease-curve" viewBox="0 0 100 100" preserveAspectRatio="none">
80
- <path d="${`M0,100 L${t.map((a,n)=>{const r=n/(t.length-1)*100,d=100-a*100;return`${r},${d}`}).join(" L")} L100,100 Z`}" />
80
+ <path d="${`M0,100 L${t.map((s,n)=>{const r=n/(t.length-1)*100,d=100-s*100;return`${r},${d}`}).join(" L")} L100,100 Z`}" />
81
81
  </svg>
82
- `:""}getEaseClipPath(t){return t!=null&&t.length?`polygon(0% 100%, ${t.map((i,a)=>{const n=a/(t.length-1)*100,r=100-i*100;return`${n}% ${r}%`}).join(", ")}, 100% 100%)`:""}renderTrack(t,e){const i=t.startTime/e*100,a=t.duration/e*100,n=t.colorIndex+1,r=this.renderEaseCurve(t.easeSamples);let d="";t.hasStagger&&t.staggerChildren&&t.staggerChildren.length>0&&(d='<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 y="";if(t.staggerChildren&&t.staggerChildren.length>0){const f=t.staggerChildren.map(g=>{const v=g.startTime/e*100,x=(g.endTime-g.startTime)/e*100;return`
82
+ `:""}getEaseClipPath(t){return t!=null&&t.length?`polygon(0% 100%, ${t.map((i,s)=>{const n=s/(t.length-1)*100,r=100-i*100;return`${n}% ${r}%`}).join(", ")}, 100% 100%)`:""}renderTrack(t,e){const i=t.startTime/e*100,s=t.duration/e*100,n=t.colorIndex+1,r=this.renderEaseCurve(t.easeSamples);let d="";t.hasStagger&&t.staggerChildren&&t.staggerChildren.length>0&&(d='<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 y="";if(t.staggerChildren&&t.staggerChildren.length>0){const f=t.staggerChildren.map(g=>{const v=g.startTime/e*100,x=(g.endTime-g.startTime)/e*100;return`
83
83
  <div class="gtv-stagger-child">
84
84
  <div class="gtv-stagger-child-bar"
85
85
  style="left: ${v}%; width: ${x}%; background: var(--gtv-track-${n}); --track-color: var(--gtv-track-${n});">
@@ -99,11 +99,11 @@ var GSAPTimelineViewer=function(p){"use strict";var N=Object.defineProperty;var
99
99
  <div class="gtv-track-bar"
100
100
  data-color="${n}"
101
101
  data-tween-id="${t.id}"
102
- style="left: ${i}%; width: ${a}%; background: var(--gtv-track-${n}); --track-color: var(--gtv-track-${n});">
102
+ style="left: ${i}%; width: ${s}%; background: var(--gtv-track-${n}); --track-color: var(--gtv-track-${n});">
103
103
  ${r}
104
104
  <span class="gtv-track-label">${t.label}</span>
105
105
  ${d}
106
106
  </div>
107
107
  ${y}
108
108
  </div>
109
- `}}customElements.define("gsap-timeline-viewer",P);const h=new Map;let c=null,z=!0,R=0,L=null;function j(){const l=window.gsap;!l||L||(L=l.timeline.bind(l),l.timeline=function(s){const t=L(s);if(z){let e;s!=null&&s.id&&typeof s.id=="string"?e=s.id:e=`Timeline ${++R}`,h.has(e)||(h.set(e,t),c&&(c.htmlElement.updateTimelineSelector(),h.size===1&&c.select(e)))}return t})}class S{constructor(s={}){o(this,"element");o(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 c||(z=s.autoDetect!==!1,z&&j(),c=new S(s),document.body.appendChild(c.element),setTimeout(()=>{if(c.element.updateTimelineSelector(),s.defaultTimeline&&h.has(s.defaultTimeline))c.select(s.defaultTimeline);else if(h.size>0){const t=h.keys().next().value;t&&c.select(t)}},0),c)}static register(s,t){h.set(s,t),c&&(c.element.updateTimelineSelector(),h.size===1&&c.select(s))}static unregister(s){h.delete(s),c&&c.element.updateTimelineSelector()}static getTimelines(){return h}static getInstance(){return c}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(),c=null}get htmlElement(){return this.element}}const E=Object.freeze(Object.defineProperty({__proto__:null,TimelineViewer:S,TimelineViewerElement:P},Symbol.toStringTag,{value:"Module"}));return p.TimelineViewer=S,p.TimelineViewerElement=P,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"}),p}({});
109
+ `}}customElements.define("gsap-timeline-viewer",z);const h=new Map;let c=null,C=!0,j=0;const E=new WeakSet;let w=null;function N(){return window.gsap||null}function B(){const l=N();if(!(l!=null&&l.globalTimeline))return;l.globalTimeline.getChildren(!1,!1,!0).forEach(t=>{if(E.has(t))return;E.add(t);const e=t.vars||{};let i;e.id&&typeof e.id=="string"?i=e.id:i=`Timeline ${++j}`;let s=i,n=1;for(;h.has(s);)s=`${i} (${++n})`;h.set(s,t),c&&(c.htmlElement.updateTimelineSelector(),h.size===1&&c.select(s))})}function W(){w||(B(),w=setInterval(B,500))}function U(){w&&(clearInterval(w),w=null)}class T{constructor(a={}){o(this,"element");o(this,"currentTimelineName",null);this.element=document.createElement("gsap-timeline-viewer"),a.height&&this.element.style.setProperty("--viewer-height",`${a.height}px`)}static create(a={}){return c||(C=a.autoDetect!==!1,c=new T(a),document.body.appendChild(c.element),C&&W(),setTimeout(()=>{if(c.element.updateTimelineSelector(),a.defaultTimeline&&h.has(a.defaultTimeline))c.select(a.defaultTimeline);else if(h.size>0){const t=h.keys().next().value;t&&c.select(t)}},0),c)}static register(a,t){h.set(a,t),c&&(c.element.updateTimelineSelector(),h.size===1&&c.select(a))}static unregister(a){h.delete(a),c&&c.element.updateTimelineSelector()}static getTimelines(){return h}static getInstance(){return c}select(a){const t=h.get(a);t&&(this.currentTimelineName=a,this.element.setTimeline(t),this.element.setSelectedTimeline(a))}getCurrentTimelineName(){return this.currentTimelineName}destroy(){U(),this.element.remove(),c=null}get htmlElement(){return this.element}}const M=Object.freeze(Object.defineProperty({__proto__:null,TimelineViewer:T,TimelineViewerElement:z},Symbol.toStringTag,{value:"Module"}));return p.TimelineViewer=T,p.TimelineViewerElement=z,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"}),p}({});
package/dist/gsap-timeline-viewer.js CHANGED
@@ -1,14 +1,14 @@
1
- var M = Object.defineProperty;
2
- var D = (o, i, t) => i in o ? M(o, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[i] = t;
3
- var l = (o, i, t) => D(o, typeof i != "symbol" ? i + "" : i, t);
4
- let C = 0;
5
- function k(o) {
1
+ var A = Object.defineProperty;
2
+ var H = (o, a, t) => a in o ? A(o, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[a] = t;
3
+ var l = (o, a, t) => H(o, typeof a != "symbol" ? a + "" : a, t);
4
+ let B = 0;
5
+ function w(o) {
6
6
  if (!o || o.length === 0) return "Unknown";
7
- const i = o[0];
8
- return i.id ? `#${i.id}` : i.classList && i.classList.length > 0 ? `.${i.classList[0]}` : i.tagName ? i.tagName.toLowerCase() : "element";
7
+ const a = o[0];
8
+ return a.id ? `#${a.id}` : a.classList && a.classList.length > 0 ? `.${a.classList[0]}` : a.tagName ? a.tagName.toLowerCase() : "element";
9
9
  }
10
- function A(o) {
11
- const i = [
10
+ function q(o) {
11
+ const a = [
12
12
  "ease",
13
13
  "duration",
14
14
  "delay",
@@ -31,36 +31,36 @@ function A(o) {
31
31
  "reversed",
32
32
  "startAt"
33
33
  ];
34
- return Object.keys(o).filter((t) => !i.includes(t));
34
+ return Object.keys(o).filter((t) => !a.includes(t));
35
35
  }
36
- function H(o = 20) {
37
- const i = [];
36
+ function I(o = 20) {
37
+ const a = [];
38
38
  for (let t = 0; t <= o; t++)
39
- i.push(t / o);
40
- return i;
39
+ a.push(t / o);
40
+ return a;
41
41
  }
42
- function q(o, i, t = 20) {
42
+ function R(o, a, t = 20) {
43
43
  var n;
44
44
  const e = window.gsap;
45
- let s = (n = e == null ? void 0 : e.parseEase) == null ? void 0 : n.call(e, o);
46
- if (!s && i && (s = i._ease), !s)
47
- return H(t);
48
- const a = [];
45
+ let i = (n = e == null ? void 0 : e.parseEase) == null ? void 0 : n.call(e, o);
46
+ if (!i && a && (i = a._ease), !i)
47
+ return I(t);
48
+ const s = [];
49
49
  for (let r = 0; r <= t; r++)
50
- a.push(s(r / t));
51
- return a;
50
+ s.push(i(r / t));
51
+ return s;
52
52
  }
53
- function I(o) {
54
- const i = [];
55
- o.getChildren(!0, !0, !1).forEach((e, s) => {
53
+ function j(o) {
54
+ const a = [];
55
+ o.getChildren(!0, !0, !1).forEach((e, i) => {
56
56
  if (!("targets" in e)) return;
57
- const a = e, n = a.targets(), r = a.vars || {}, d = A(r);
57
+ const s = e, n = s.targets(), r = s.vars || {}, d = q(r);
58
58
  let m = "";
59
59
  if (r.id && typeof r.id == "string")
60
60
  m = r.id;
61
61
  else {
62
- const b = k(n), x = d.slice(0, 2).join(", ");
63
- m = x ? `${b} (${x})` : b;
62
+ const b = w(n), k = d.slice(0, 2).join(", ");
63
+ m = k ? `${b} (${k})` : b;
64
64
  }
65
65
  const p = e.startTime(), u = e.duration();
66
66
  let g = "power1.out";
@@ -68,49 +68,49 @@ function I(o) {
68
68
  let h, f;
69
69
  if (r.stagger && n.length > 1 && (typeof r.stagger == "number" ? h = r.stagger : typeof r.stagger == "object" && (h = r.stagger.each || 0), h)) {
70
70
  const b = u - h * (n.length - 1);
71
- f = n.map((x, B) => {
72
- const P = p + B * h;
71
+ f = n.map((k, M) => {
72
+ const T = p + M * h;
73
73
  return {
74
- targetLabel: k([x]),
75
- startTime: P,
76
- endTime: P + b
74
+ targetLabel: w([k]),
75
+ startTime: T,
76
+ endTime: T + b
77
77
  };
78
78
  });
79
79
  }
80
- i.push({
81
- id: `tween-${++C}`,
80
+ a.push({
81
+ id: `tween-${++B}`,
82
82
  label: m,
83
83
  startTime: p,
84
84
  endTime: p + u,
85
85
  duration: u,
86
- targets: k(n),
86
+ targets: w(n),
87
87
  properties: d,
88
- colorIndex: s % 6,
88
+ colorIndex: i % 6,
89
89
  hasStagger: !!r.stagger,
90
90
  ease: g,
91
- easeSamples: q(g, a),
91
+ easeSamples: R(g, s),
92
92
  staggerValue: h,
93
93
  staggerChildren: f
94
94
  });
95
95
  });
96
- for (let e = 1; e < i.length; e++) {
97
- const s = i[e - 1], a = i[e], n = s.endTime - a.startTime;
98
- Math.abs(n) > 1e-3 && (a.overlapWithPrev = Math.round(n * 1e3) / 1e3);
96
+ for (let e = 1; e < a.length; e++) {
97
+ const i = a[e - 1], s = a[e], n = i.endTime - s.startTime;
98
+ Math.abs(n) > 1e-3 && (s.overlapWithPrev = Math.round(n * 1e3) / 1e3);
99
99
  }
100
100
  return {
101
101
  duration: o.duration(),
102
- tweens: i
102
+ tweens: a
103
103
  };
104
104
  }
105
- function R() {
106
- C = 0;
105
+ function N() {
106
+ B = 0;
107
107
  }
108
- function y(o, i = !0) {
108
+ function y(o, a = !0) {
109
109
  const t = Math.abs(o);
110
- return i ? t.toFixed(2) : t.toFixed(0);
110
+ return a ? t.toFixed(2) : t.toFixed(0);
111
111
  }
112
- const j = ":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: 36px;--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;position:relative;z-index:1}.gtv-track-stagger{font-size:10px;font-weight:400;flex-shrink:0;position:relative;z-index:1}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-ease-curve{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .15s}.gtv-ease-curve path{fill:var(--track-color);stroke:none}.gtv-container.show-ease-curves .gtv-ease-curve{opacity:1}.gtv-container.show-ease-curves .gtv-track-bar,.gtv-container.show-ease-curves .gtv-stagger-child-bar{background:transparent!important}.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;overflow:hidden}.gtv-stagger-child-bar .gtv-track-label{overflow:hidden;position:relative;z-index:1;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-container.show-ease-curves .gtv-overlap-region{display:none}.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)}", z = [0.25, 0.5, 1, 2, 4], L = 40;
113
- class E extends HTMLElement {
112
+ const V = ":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: 36px;--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;position:relative;z-index:1}.gtv-track-stagger{font-size:10px;font-weight:400;flex-shrink:0;position:relative;z-index:1}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-ease-curve{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .15s}.gtv-ease-curve path{fill:var(--track-color);stroke:none}.gtv-container.show-ease-curves .gtv-ease-curve{opacity:1}.gtv-container.show-ease-curves .gtv-track-bar,.gtv-container.show-ease-curves .gtv-stagger-child-bar{background:transparent!important}.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;overflow:hidden}.gtv-stagger-child-bar .gtv-track-label{overflow:hidden;position:relative;z-index:1;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-container.show-ease-curves .gtv-overlap-region{display:none}.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], z = 40;
113
+ class D extends HTMLElement {
114
114
  constructor() {
115
115
  super();
116
116
  l(this, "shadow");
@@ -148,15 +148,15 @@ class E extends HTMLElement {
148
148
  this.detachTimeline(), this.clearBodyPadding();
149
149
  }
150
150
  setTimeline(t) {
151
- this.detachTimeline(), this.timeline = t, R(), this.timelineData = I(t), t.eventCallback("onUpdate", () => this.onTimelineUpdate()), this.renderTracks(), this.updatePlayhead(), this.updateTimeDisplay(), this.updatePlayState(), requestAnimationFrame(() => this.applyAutofit());
151
+ this.detachTimeline(), this.timeline = t, N(), this.timelineData = j(t), t.eventCallback("onUpdate", () => this.onTimelineUpdate()), this.renderTracks(), this.updatePlayhead(), this.updateTimeDisplay(), this.updatePlayState(), requestAnimationFrame(() => this.applyAutofit());
152
152
  }
153
153
  updateTimelineSelector() {
154
- Promise.resolve().then(() => $).then(({ TimelineViewer: t }) => {
155
- const e = t.getTimelines(), s = this.timelineSelect.value;
156
- this.timelineSelect.innerHTML = "", e.forEach((a, n) => {
154
+ Promise.resolve().then(() => E).then(({ TimelineViewer: t }) => {
155
+ const e = t.getTimelines(), i = this.timelineSelect.value;
156
+ this.timelineSelect.innerHTML = "", e.forEach((s, n) => {
157
157
  const r = document.createElement("option");
158
158
  r.value = n, r.textContent = n, this.timelineSelect.appendChild(r);
159
- }), s && e.has(s) && (this.timelineSelect.value = s);
159
+ }), i && e.has(i) && (this.timelineSelect.value = i);
160
160
  });
161
161
  }
162
162
  setSelectedTimeline(t) {
@@ -167,7 +167,7 @@ class E extends HTMLElement {
167
167
  }
168
168
  render() {
169
169
  this.shadow.innerHTML = `
170
- <style>${j}</style>
170
+ <style>${V}</style>
171
171
  <div class="gtv-container ${this.collapsed ? "collapsed" : ""}" style="height: ${this.height}px;">
172
172
  <!-- Controls Bar -->
173
173
  <div class="gtv-controls">
@@ -242,9 +242,9 @@ class E extends HTMLElement {
242
242
  }
243
243
  setupEventListeners() {
244
244
  this.shadow.addEventListener("click", (t) => {
245
- const s = t.target.closest("[data-action]");
246
- if (!s) return;
247
- switch (s.dataset.action) {
245
+ const i = t.target.closest("[data-action]");
246
+ if (!i) return;
247
+ switch (i.dataset.action) {
248
248
  case "play":
249
249
  this.togglePlay();
250
250
  break;
@@ -272,15 +272,15 @@ class E extends HTMLElement {
272
272
  }
273
273
  }), this.timelineSelect.addEventListener("change", () => {
274
274
  const t = this.timelineSelect.value;
275
- t && Promise.resolve().then(() => $).then(({ TimelineViewer: e }) => {
276
- var s;
277
- (s = e.getInstance()) == null || s.select(t);
275
+ t && Promise.resolve().then(() => E).then(({ TimelineViewer: e }) => {
276
+ var i;
277
+ (i = e.getInstance()) == null || i.select(t);
278
278
  });
279
279
  }), this.shadow.addEventListener("click", (t) => {
280
- const s = t.target.closest(".gtv-track-bar");
281
- if (s) {
282
- const a = s.closest(".gtv-track");
283
- (a == null ? void 0 : a.dataset.expandable) === "true" && (t.stopPropagation(), a.classList.toggle("expanded"), requestAnimationFrame(() => this.applyAutofit()));
280
+ const i = t.target.closest(".gtv-track-bar");
281
+ if (i) {
282
+ const s = i.closest(".gtv-track");
283
+ (s == null ? void 0 : s.dataset.expandable) === "true" && (t.stopPropagation(), s.classList.toggle("expanded"), requestAnimationFrame(() => this.applyAutofit()));
284
284
  }
285
285
  }), 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) => {
286
286
  t.target.closest(".gtv-track-bar") || this.startScrub(t);
@@ -320,15 +320,15 @@ class E extends HTMLElement {
320
320
  }
321
321
  onResize(t) {
322
322
  if (!this.isResizing) return;
323
- const e = window.innerHeight, s = e - t.clientY;
324
- this.height = Math.max(100, Math.min(s, e - 100)), this.container.style.height = `${this.height}px`, this.updateBodyPadding();
323
+ const e = window.innerHeight, i = e - t.clientY;
324
+ this.height = Math.max(100, Math.min(i, e - 100)), this.container.style.height = `${this.height}px`, this.updateBodyPadding();
325
325
  }
326
326
  endResize() {
327
327
  this.isResizing && (this.isResizing = !1, document.body.style.cursor = "", document.body.style.userSelect = "");
328
328
  }
329
329
  updateBodyPadding() {
330
330
  if (!this.manageBodyPadding) return;
331
- const t = this.collapsed ? L : this.height;
331
+ const t = this.collapsed ? z : this.height;
332
332
  document.body.style.paddingBottom = `${t}px`;
333
333
  }
334
334
  clearBodyPadding() {
@@ -336,8 +336,8 @@ class E extends HTMLElement {
336
336
  }
337
337
  scrubToPosition(t) {
338
338
  if (!this.timeline || !this.timelineData) return;
339
- const e = this.rulerInner.getBoundingClientRect(), a = Math.max(0, Math.min(t.clientX - e.left, e.width)) / e.width;
340
- this.timeline.progress(a), this.timeline.pause(), this.updatePlayState();
339
+ const e = this.rulerInner.getBoundingClientRect(), s = Math.max(0, Math.min(t.clientX - e.left, e.width)) / e.width;
340
+ this.timeline.progress(s), this.timeline.pause(), this.updatePlayState();
341
341
  }
342
342
  togglePlay() {
343
343
  this.timeline && (this.timeline.paused() || this.timeline.progress() === 1 ? this.timeline.progress() === 1 ? this.timeline.restart() : this.timeline.play() : this.timeline.pause(), this.updatePlayState());
@@ -353,37 +353,37 @@ class E extends HTMLElement {
353
353
  const t = /* @__PURE__ */ new Set();
354
354
  return t.add(0), t.add(Math.round(this.timelineData.duration * 1e3) / 1e3), this.timelineData.tweens.forEach((e) => {
355
355
  t.add(Math.round(e.startTime * 1e3) / 1e3), t.add(Math.round(e.endTime * 1e3) / 1e3);
356
- }), Array.from(t).sort((e, s) => e - s);
356
+ }), Array.from(t).sort((e, i) => e - i);
357
357
  }
358
358
  jumpToPrevPoint() {
359
359
  if (!this.timeline || !this.timelineData) return;
360
360
  const t = Math.round(this.timeline.time() * 1e3) / 1e3, e = this.getTimePoints();
361
- let s = 0;
362
- for (const a of e)
363
- if (a < t - 1e-3)
364
- s = a;
361
+ let i = 0;
362
+ for (const s of e)
363
+ if (s < t - 1e-3)
364
+ i = s;
365
365
  else
366
366
  break;
367
- this.timeline.time(s), this.timeline.pause(), this.updatePlayState();
367
+ this.timeline.time(i), this.timeline.pause(), this.updatePlayState();
368
368
  }
369
369
  jumpToNextPoint() {
370
370
  if (!this.timeline || !this.timelineData) return;
371
371
  const t = Math.round(this.timeline.time() * 1e3) / 1e3, e = this.getTimePoints();
372
- let s = this.timelineData.duration;
373
- for (const a of e)
374
- if (a > t + 1e-3) {
375
- s = a;
372
+ let i = this.timelineData.duration;
373
+ for (const s of e)
374
+ if (s > t + 1e-3) {
375
+ i = s;
376
376
  break;
377
377
  }
378
- this.timeline.time(s), this.timeline.pause(), this.updatePlayState();
378
+ this.timeline.time(i), this.timeline.pause(), this.updatePlayState();
379
379
  }
380
380
  toggleLoop() {
381
381
  this.timeline && (this.isLooping = !this.isLooping, this.timeline.repeat(this.isLooping ? -1 : 0), this.loopBtn.classList.toggle("active", this.isLooping));
382
382
  }
383
383
  cycleSpeed() {
384
384
  if (!this.timeline) return;
385
- this.speedIndex = (this.speedIndex + 1) % z.length;
386
- const t = z[this.speedIndex];
385
+ this.speedIndex = (this.speedIndex + 1) % P.length;
386
+ const t = P[this.speedIndex];
387
387
  this.timeline.timeScale(t), this.speedBtn.textContent = `${t}x`;
388
388
  }
389
389
  toggleCollapse() {
@@ -401,15 +401,15 @@ class E extends HTMLElement {
401
401
  if (!this.isAutofit || this.collapsed) return;
402
402
  const t = this.shadow.querySelectorAll(".gtv-track");
403
403
  let e = 0;
404
- const s = 36, a = 30;
404
+ const i = 36, s = 30;
405
405
  t.forEach((p) => {
406
- if (e += s, p.classList.contains("expanded")) {
406
+ if (e += i, p.classList.contains("expanded")) {
407
407
  const u = p.querySelectorAll(".gtv-stagger-child");
408
- e += u.length * a;
408
+ e += u.length * s;
409
409
  }
410
410
  });
411
411
  const n = 24, r = 16, d = 100, m = window.innerHeight - 100;
412
- this.height = Math.max(d, Math.min(L + n + e + r, m)), this.container.style.height = `${this.height}px`, this.updateBodyPadding();
412
+ this.height = Math.max(d, Math.min(z + n + e + r, m)), this.container.style.height = `${this.height}px`, this.updateBodyPadding();
413
413
  }
414
414
  updatePlayState() {
415
415
  if (!this.timeline) return;
@@ -427,40 +427,40 @@ class E extends HTMLElement {
427
427
  }
428
428
  updateTimeDisplay() {
429
429
  if (!this.timeline || !this.timelineData) return;
430
- const t = this.timeline.time(), e = this.timelineData.duration, s = this.timeDisplay.querySelector(".gtv-time-current"), a = this.timeDisplay.querySelector(".gtv-time-total");
431
- s.textContent = y(t), a.textContent = ` / ${y(e)}`;
430
+ const t = this.timeline.time(), e = this.timelineData.duration, i = this.timeDisplay.querySelector(".gtv-time-current"), s = this.timeDisplay.querySelector(".gtv-time-total");
431
+ i.textContent = y(t), s.textContent = ` / ${y(e)}`;
432
432
  }
433
433
  updateActiveTracks() {
434
434
  if (!this.timeline || !this.timelineData) return;
435
435
  const t = this.timeline.time();
436
- this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((s, a) => {
437
- const n = this.timelineData.tweens[a], r = t >= n.startTime && t <= n.endTime, d = s.dataset.color;
438
- r ? s.style.background = `var(--gtv-track-${d}-active)` : s.style.background = `var(--gtv-track-${d})`;
436
+ this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((i, s) => {
437
+ const n = this.timelineData.tweens[s], r = t >= n.startTime && t <= n.endTime, d = i.dataset.color;
438
+ r ? i.style.background = `var(--gtv-track-${d}-active)` : i.style.background = `var(--gtv-track-${d})`;
439
439
  });
440
440
  }
441
441
  renderTracks() {
442
442
  if (!this.timelineData) return;
443
- const { duration: t, tweens: e } = this.timelineData, s = this.shadow.querySelector(".gtv-empty");
444
- s.style.display = e.length > 0 ? "none" : "flex", this.renderRuler(t);
445
- const a = this.renderGridLines(t), n = e.map((d) => this.renderTrack(d, t)).join(""), r = this.tracksScroll.querySelector(".gtv-scrub-area");
446
- this.tracksScroll.innerHTML = a + n, this.tracksScroll.prepend(r), this.scrubArea = r;
443
+ const { duration: t, tweens: e } = this.timelineData, i = this.shadow.querySelector(".gtv-empty");
444
+ i.style.display = e.length > 0 ? "none" : "flex", this.renderRuler(t);
445
+ const s = this.renderGridLines(t), n = e.map((d) => this.renderTrack(d, t)).join(""), r = this.tracksScroll.querySelector(".gtv-scrub-area");
446
+ this.tracksScroll.innerHTML = s + n, this.tracksScroll.prepend(r), this.scrubArea = r;
447
447
  }
448
448
  renderGridLines(t) {
449
- const e = [], s = this.calculateInterval(t);
450
- for (let a = 0; a <= t; a += s) {
451
- const n = a / t * 100;
449
+ const e = [], i = this.calculateInterval(t);
450
+ for (let s = 0; s <= t; s += i) {
451
+ const n = s / t * 100;
452
452
  e.push(`<div class="gtv-grid-line" style="left: ${n}%;"></div>`);
453
453
  }
454
454
  return e.join("");
455
455
  }
456
456
  renderRuler(t) {
457
- const e = [], s = this.calculateInterval(t);
458
- for (let a = 0; a <= t; a += s) {
459
- const n = a / t * 100;
457
+ const e = [], i = this.calculateInterval(t);
458
+ for (let s = 0; s <= t; s += i) {
459
+ const n = s / t * 100;
460
460
  e.push(`
461
461
  <div class="gtv-ruler-marker" style="left: ${n}%;">
462
462
  <div class="gtv-ruler-marker-line"></div>
463
- <span class="gtv-ruler-marker-label">${y(a, !1)}s</span>
463
+ <span class="gtv-ruler-marker-label">${y(s, !1)}s</span>
464
464
  </div>
465
465
  `);
466
466
  }
@@ -472,21 +472,21 @@ class E extends HTMLElement {
472
472
  renderEaseCurve(t) {
473
473
  return t != null && t.length ? `
474
474
  <svg class="gtv-ease-curve" viewBox="0 0 100 100" preserveAspectRatio="none">
475
- <path d="${`M0,100 L${t.map((a, n) => {
476
- const r = n / (t.length - 1) * 100, d = 100 - a * 100;
475
+ <path d="${`M0,100 L${t.map((s, n) => {
476
+ const r = n / (t.length - 1) * 100, d = 100 - s * 100;
477
477
  return `${r},${d}`;
478
478
  }).join(" L")} L100,100 Z`}" />
479
479
  </svg>
480
480
  ` : "";
481
481
  }
482
482
  getEaseClipPath(t) {
483
- return t != null && t.length ? `polygon(0% 100%, ${t.map((s, a) => {
484
- const n = a / (t.length - 1) * 100, r = 100 - s * 100;
483
+ return t != null && t.length ? `polygon(0% 100%, ${t.map((i, s) => {
484
+ const n = s / (t.length - 1) * 100, r = 100 - i * 100;
485
485
  return `${n}% ${r}%`;
486
486
  }).join(", ")}, 100% 100%)` : "";
487
487
  }
488
488
  renderTrack(t, e) {
489
- const s = t.startTime / e * 100, a = t.duration / e * 100, n = t.colorIndex + 1, r = this.renderEaseCurve(t.easeSamples);
489
+ const i = t.startTime / e * 100, s = t.duration / e * 100, n = t.colorIndex + 1, r = this.renderEaseCurve(t.easeSamples);
490
490
  let d = "";
491
491
  t.hasStagger && t.staggerChildren && t.staggerChildren.length > 0 && (d = '<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>');
492
492
  let m = "";
@@ -509,11 +509,11 @@ class E extends HTMLElement {
509
509
  if (t.overlapWithPrev !== void 0) {
510
510
  const u = t.overlapWithPrev > 0, g = Math.abs(t.overlapWithPrev) / e * 100, h = u ? `-${y(t.overlapWithPrev)}s` : `+${y(Math.abs(t.overlapWithPrev))}s`, f = this.getEaseClipPath(t.easeSamples);
511
511
  u ? p = `
512
- <div class="gtv-overlap-region" style="left: ${s}%; width: ${g}%; --ease-clip: ${f};"></div>
513
- <span class="gtv-offset-badge gtv-offset-overlap" style="left: ${s}%;">${h}</span>
512
+ <div class="gtv-overlap-region" style="left: ${i}%; width: ${g}%; --ease-clip: ${f};"></div>
513
+ <span class="gtv-offset-badge gtv-offset-overlap" style="left: ${i}%;">${h}</span>
514
514
  ` : p = `
515
- <div class="gtv-gap-connector" style="left: ${s - g}%; width: ${g}%;"></div>
516
- <span class="gtv-offset-badge gtv-offset-gap" style="left: ${s}%;">${h}</span>
515
+ <div class="gtv-gap-connector" style="left: ${i - g}%; width: ${g}%;"></div>
516
+ <span class="gtv-offset-badge gtv-offset-gap" style="left: ${i}%;">${h}</span>
517
517
  `;
518
518
  }
519
519
  return `
@@ -522,7 +522,7 @@ class E extends HTMLElement {
522
522
  <div class="gtv-track-bar"
523
523
  data-color="${n}"
524
524
  data-tween-id="${t.id}"
525
- style="left: ${s}%; width: ${a}%; background: var(--gtv-track-${n}); --track-color: var(--gtv-track-${n});">
525
+ style="left: ${i}%; width: ${s}%; background: var(--gtv-track-${n}); --track-color: var(--gtv-track-${n});">
526
526
  ${r}
527
527
  <span class="gtv-track-label">${t.label}</span>
528
528
  ${d}
@@ -532,34 +532,49 @@ class E extends HTMLElement {
532
532
  `;
533
533
  }
534
534
  }
535
- customElements.define("gsap-timeline-viewer", E);
535
+ customElements.define("gsap-timeline-viewer", D);
536
536
  const v = /* @__PURE__ */ new Map();
537
- let c = null, S = !0, V = 0, w = null;
538
- function N() {
539
- const o = window.gsap;
540
- !o || w || (w = o.timeline.bind(o), o.timeline = function(i) {
541
- const t = w(i);
542
- if (S) {
543
- let e;
544
- i != null && i.id && typeof i.id == "string" ? e = i.id : e = `Timeline ${++V}`, v.has(e) || (v.set(e, t), c && (c.htmlElement.updateTimelineSelector(), v.size === 1 && c.select(e)));
545
- }
546
- return t;
537
+ let c = null, L = !0, W = 0;
538
+ const $ = /* @__PURE__ */ new WeakSet();
539
+ let x = null;
540
+ function U() {
541
+ return window.gsap || null;
542
+ }
543
+ function C() {
544
+ const o = U();
545
+ if (!(o != null && o.globalTimeline)) return;
546
+ o.globalTimeline.getChildren(!1, !1, !0).forEach((t) => {
547
+ if ($.has(t)) return;
548
+ $.add(t);
549
+ const e = t.vars || {};
550
+ let i;
551
+ e.id && typeof e.id == "string" ? i = e.id : i = `Timeline ${++W}`;
552
+ let s = i, n = 1;
553
+ for (; v.has(s); )
554
+ s = `${i} (${++n})`;
555
+ v.set(s, t), c && (c.htmlElement.updateTimelineSelector(), v.size === 1 && c.select(s));
547
556
  });
548
557
  }
549
- class T {
550
- constructor(i = {}) {
558
+ function F() {
559
+ x || (C(), x = setInterval(C, 500));
560
+ }
561
+ function _() {
562
+ x && (clearInterval(x), x = null);
563
+ }
564
+ class S {
565
+ constructor(a = {}) {
551
566
  l(this, "element");
552
567
  l(this, "currentTimelineName", null);
553
- this.element = document.createElement("gsap-timeline-viewer"), i.height && this.element.style.setProperty("--viewer-height", `${i.height}px`);
568
+ this.element = document.createElement("gsap-timeline-viewer"), a.height && this.element.style.setProperty("--viewer-height", `${a.height}px`);
554
569
  }
555
570
  /**
556
571
  * Create and attach the timeline viewer to the page.
557
572
  * Call this once - subsequent calls return the existing instance.
558
573
  */
559
- static create(i = {}) {
560
- return c || (S = i.autoDetect !== !1, S && N(), c = new T(i), document.body.appendChild(c.element), setTimeout(() => {
561
- if (c.element.updateTimelineSelector(), i.defaultTimeline && v.has(i.defaultTimeline))
562
- c.select(i.defaultTimeline);
574
+ static create(a = {}) {
575
+ return c || (L = a.autoDetect !== !1, c = new S(a), document.body.appendChild(c.element), L && F(), setTimeout(() => {
576
+ if (c.element.updateTimelineSelector(), a.defaultTimeline && v.has(a.defaultTimeline))
577
+ c.select(a.defaultTimeline);
563
578
  else if (v.size > 0) {
564
579
  const t = v.keys().next().value;
565
580
  t && c.select(t);
@@ -569,14 +584,14 @@ class T {
569
584
  /**
570
585
  * Register a timeline with a name so it appears in the dropdown.
571
586
  */
572
- static register(i, t) {
573
- v.set(i, t), c && (c.element.updateTimelineSelector(), v.size === 1 && c.select(i));
587
+ static register(a, t) {
588
+ v.set(a, t), c && (c.element.updateTimelineSelector(), v.size === 1 && c.select(a));
574
589
  }
575
590
  /**
576
591
  * Unregister a timeline.
577
592
  */
578
- static unregister(i) {
579
- v.delete(i), c && c.element.updateTimelineSelector();
593
+ static unregister(a) {
594
+ v.delete(a), c && c.element.updateTimelineSelector();
580
595
  }
581
596
  /**
582
597
  * Get all registered timelines.
@@ -593,9 +608,9 @@ class T {
593
608
  /**
594
609
  * Select a timeline by name.
595
610
  */
596
- select(i) {
597
- const t = v.get(i);
598
- t && (this.currentTimelineName = i, this.element.setTimeline(t), this.element.setSelectedTimeline(i));
611
+ select(a) {
612
+ const t = v.get(a);
613
+ t && (this.currentTimelineName = a, this.element.setTimeline(t), this.element.setSelectedTimeline(a));
599
614
  }
600
615
  /**
601
616
  * Get current timeline name.
@@ -607,18 +622,18 @@ class T {
607
622
  * Remove the viewer from the page.
608
623
  */
609
624
  destroy() {
610
- this.element.remove(), c = null;
625
+ _(), this.element.remove(), c = null;
611
626
  }
612
627
  get htmlElement() {
613
628
  return this.element;
614
629
  }
615
630
  }
616
- const $ = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
631
+ const E = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
617
632
  __proto__: null,
618
- TimelineViewer: T,
619
- TimelineViewerElement: E
633
+ TimelineViewer: S,
634
+ TimelineViewerElement: D
620
635
  }, Symbol.toStringTag, { value: "Module" }));
621
636
  export {
622
- T as TimelineViewer,
623
- E as TimelineViewerElement
637
+ S as TimelineViewer,
638
+ D as TimelineViewerElement
624
639
  };
package/dist/gsap-timeline-viewer.umd.cjs CHANGED
@@ -1,5 +1,5 @@
1
- (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 N=Object.defineProperty;var U=(h,d,b)=>d in h?N(h,d,{enumerable:!0,configurable:!0,writable:!0,value:b}):h[d]=b;var o=(h,d,b)=>U(h,typeof d!="symbol"?d+"":d,b);let d=0;function b(l){if(!l||l.length===0)return"Unknown";const s=l[0];return s.id?`#${s.id}`:s.classList&&s.classList.length>0?`.${s.classList[0]}`:s.tagName?s.tagName.toLowerCase():"element"}function M(l){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(l).filter(t=>!s.includes(t))}function D(l=20){const s=[];for(let t=0;t<=l;t++)s.push(t/l);return s}function A(l,s,t=20){var n;const e=window.gsap;let i=(n=e==null?void 0:e.parseEase)==null?void 0:n.call(e,l);if(!i&&s&&(i=s._ease),!i)return D(t);const a=[];for(let r=0;r<=t;r++)a.push(i(r/t));return a}function H(l){const s=[];l.getChildren(!0,!0,!1).forEach((e,i)=>{if(!("targets"in e))return;const a=e,n=a.targets(),r=a.vars||{},g=M(r);let y="";if(r.id&&typeof r.id=="string")y=r.id;else{const w=b(n),T=g.slice(0,2).join(", ");y=T?`${w} (${T})`:w}const m=e.startTime(),f=e.duration();let p="power1.out";r.ease&&(p=typeof r.ease=="string"?r.ease:"custom");let u,x;if(r.stagger&&n.length>1&&(typeof r.stagger=="number"?u=r.stagger:typeof r.stagger=="object"&&(u=r.stagger.each||0),u)){const w=f-u*(n.length-1);x=n.map((T,V)=>{const B=m+V*u;return{targetLabel:b([T]),startTime:B,endTime:B+w}})}s.push({id:`tween-${++d}`,label:y,startTime:m,endTime:m+f,duration:f,targets:b(n),properties:g,colorIndex:i%6,hasStagger:!!r.stagger,ease:p,easeSamples:A(p,a),staggerValue:u,staggerChildren:x})});for(let e=1;e<s.length;e++){const i=s[e-1],a=s[e],n=i.endTime-a.startTime;Math.abs(n)>.001&&(a.overlapWithPrev=Math.round(n*1e3)/1e3)}return{duration:l.duration(),tweens:s}}function q(){d=0}function k(l,s=!0){const t=Math.abs(l);return s?t.toFixed(2):t.toFixed(0)}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: 36px;--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;position:relative;z-index:1}.gtv-track-stagger{font-size:10px;font-weight:400;flex-shrink:0;position:relative;z-index:1}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-ease-curve{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .15s}.gtv-ease-curve path{fill:var(--track-color);stroke:none}.gtv-container.show-ease-curves .gtv-ease-curve{opacity:1}.gtv-container.show-ease-curves .gtv-track-bar,.gtv-container.show-ease-curves .gtv-stagger-child-bar{background:transparent!important}.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;overflow:hidden}.gtv-stagger-child-bar .gtv-track-label{overflow:hidden;position:relative;z-index:1;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-container.show-ease-curves .gtv-overlap-region{display:none}.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)}",$=[.25,.5,1,2,4],C=40;class P extends HTMLElement{constructor(){super();o(this,"shadow");o(this,"timeline",null);o(this,"timelineData",null);o(this,"isPlaying",!1);o(this,"isLooping",!1);o(this,"speedIndex",2);o(this,"collapsed",!1);o(this,"height",200);o(this,"isDragging",!1);o(this,"manageBodyPadding",!0);o(this,"isAutofit",!1);o(this,"showEaseCurves",!1);o(this,"container");o(this,"playBtn");o(this,"loopBtn");o(this,"speedBtn");o(this,"timeDisplay");o(this,"rulerInner");o(this,"tracksScroll");o(this,"playhead");o(this,"scrubArea");o(this,"resizeHandle");o(this,"timelineSelect");o(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,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(()=>E).then(({TimelineViewer:t})=>{const e=t.getTimelines(),i=this.timelineSelect.value;this.timelineSelect.innerHTML="",e.forEach((a,n)=>{const r=document.createElement("option");r.value=n,r.textContent=n,this.timelineSelect.appendChild(r)}),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=`
2
- <style>${I}</style>
1
+ (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 _=Object.defineProperty;var G=(h,d,b)=>d in h?_(h,d,{enumerable:!0,configurable:!0,writable:!0,value:b}):h[d]=b;var o=(h,d,b)=>G(h,typeof d!="symbol"?d+"":d,b);let d=0;function b(l){if(!l||l.length===0)return"Unknown";const a=l[0];return a.id?`#${a.id}`:a.classList&&a.classList.length>0?`.${a.classList[0]}`:a.tagName?a.tagName.toLowerCase():"element"}function A(l){const a=["ease","duration","delay","onComplete","onStart","onUpdate","onCompleteParams","onStartParams","onUpdateParams","repeat","repeatDelay","yoyo","stagger","overwrite","immediateRender","lazy","autoAlpha","id","paused","reversed","startAt"];return Object.keys(l).filter(t=>!a.includes(t))}function H(l=20){const a=[];for(let t=0;t<=l;t++)a.push(t/l);return a}function q(l,a,t=20){var n;const e=window.gsap;let i=(n=e==null?void 0:e.parseEase)==null?void 0:n.call(e,l);if(!i&&a&&(i=a._ease),!i)return H(t);const s=[];for(let r=0;r<=t;r++)s.push(i(r/t));return s}function I(l){const a=[];l.getChildren(!0,!0,!1).forEach((e,i)=>{if(!("targets"in e))return;const s=e,n=s.targets(),r=s.vars||{},g=A(r);let y="";if(r.id&&typeof r.id=="string")y=r.id;else{const S=b(n),P=g.slice(0,2).join(", ");y=P?`${S} (${P})`:S}const m=e.startTime(),f=e.duration();let v="power1.out";r.ease&&(v=typeof r.ease=="string"?r.ease:"custom");let u,x;if(r.stagger&&n.length>1&&(typeof r.stagger=="number"?u=r.stagger:typeof r.stagger=="object"&&(u=r.stagger.each||0),u)){const S=f-u*(n.length-1);x=n.map((P,F)=>{const D=m+F*u;return{targetLabel:b([P]),startTime:D,endTime:D+S}})}a.push({id:`tween-${++d}`,label:y,startTime:m,endTime:m+f,duration:f,targets:b(n),properties:g,colorIndex:i%6,hasStagger:!!r.stagger,ease:v,easeSamples:q(v,s),staggerValue:u,staggerChildren:x})});for(let e=1;e<a.length;e++){const i=a[e-1],s=a[e],n=i.endTime-s.startTime;Math.abs(n)>.001&&(s.overlapWithPrev=Math.round(n*1e3)/1e3)}return{duration:l.duration(),tweens:a}}function R(){d=0}function k(l,a=!0){const t=Math.abs(l);return a?t.toFixed(2):t.toFixed(0)}const j=":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: 36px;--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;position:relative;z-index:1}.gtv-track-stagger{font-size:10px;font-weight:400;flex-shrink:0;position:relative;z-index:1}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-ease-curve{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .15s}.gtv-ease-curve path{fill:var(--track-color);stroke:none}.gtv-container.show-ease-curves .gtv-ease-curve{opacity:1}.gtv-container.show-ease-curves .gtv-track-bar,.gtv-container.show-ease-curves .gtv-stagger-child-bar{background:transparent!important}.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;overflow:hidden}.gtv-stagger-child-bar .gtv-track-label{overflow:hidden;position:relative;z-index:1;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-container.show-ease-curves .gtv-overlap-region{display:none}.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 z extends HTMLElement{constructor(){super();o(this,"shadow");o(this,"timeline",null);o(this,"timelineData",null);o(this,"isPlaying",!1);o(this,"isLooping",!1);o(this,"speedIndex",2);o(this,"collapsed",!1);o(this,"height",200);o(this,"isDragging",!1);o(this,"manageBodyPadding",!0);o(this,"isAutofit",!1);o(this,"showEaseCurves",!1);o(this,"container");o(this,"playBtn");o(this,"loopBtn");o(this,"speedBtn");o(this,"timeDisplay");o(this,"rulerInner");o(this,"tracksScroll");o(this,"playhead");o(this,"scrubArea");o(this,"resizeHandle");o(this,"timelineSelect");o(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,R(),this.timelineData=I(t),t.eventCallback("onUpdate",()=>this.onTimelineUpdate()),this.renderTracks(),this.updatePlayhead(),this.updateTimeDisplay(),this.updatePlayState(),requestAnimationFrame(()=>this.applyAutofit())}updateTimelineSelector(){Promise.resolve().then(()=>M).then(({TimelineViewer:t})=>{const e=t.getTimelines(),i=this.timelineSelect.value;this.timelineSelect.innerHTML="",e.forEach((s,n)=>{const r=document.createElement("option");r.value=n,r.textContent=n,this.timelineSelect.appendChild(r)}),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=`
2
+ <style>${j}</style>
3
3
  <div class="gtv-container ${this.collapsed?"collapsed":""}" style="height: ${this.height}px;">
4
4
  <!-- Controls Bar -->
5
5
  <div class="gtv-controls">
@@ -70,28 +70,28 @@
70
70
  </div>
71
71
  </div>
72
72
  </div>
73
- `,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;case"ease-curves":this.toggleEaseCurves();break}}),this.timelineSelect.addEventListener("change",()=>{const t=this.timelineSelect.value;t&&Promise.resolve().then(()=>E).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?C: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)%$.length;const t=$[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()}toggleEaseCurves(){this.showEaseCurves=!this.showEaseCurves,this.shadow.querySelector('[data-action="ease-curves"]').classList.toggle("active",this.showEaseCurves),this.container.classList.toggle("show-ease-curves",this.showEaseCurves)}applyAutofit(){if(!this.isAutofit||this.collapsed)return;const t=this.shadow.querySelectorAll(".gtv-track");let e=0;const i=36,a=30;t.forEach(m=>{if(e+=i,m.classList.contains("expanded")){const f=m.querySelectorAll(".gtv-stagger-child");e+=f.length*a}});const n=24,r=16,g=100,y=window.innerHeight-100;this.height=Math.max(g,Math.min(C+n+e+r,y)),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=k(t),a.textContent=` / ${k(e)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((i,a)=>{const n=this.timelineData.tweens[a],r=t>=n.startTime&&t<=n.endTime,g=i.dataset.color;r?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),n=e.map(g=>this.renderTrack(g,t)).join(""),r=this.tracksScroll.querySelector(".gtv-scrub-area");this.tracksScroll.innerHTML=a+n,this.tracksScroll.prepend(r),this.scrubArea=r}renderGridLines(t){const e=[],i=this.calculateInterval(t);for(let a=0;a<=t;a+=i){const n=a/t*100;e.push(`<div class="gtv-grid-line" style="left: ${n}%;"></div>`)}return e.join("")}renderRuler(t){const e=[],i=this.calculateInterval(t);for(let a=0;a<=t;a+=i){const n=a/t*100;e.push(`
73
+ `,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;case"ease-curves":this.toggleEaseCurves();break}}),this.timelineSelect.addEventListener("change",()=>{const t=this.timelineSelect.value;t&&Promise.resolve().then(()=>M).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 s=i.closest(".gtv-track");(s==null?void 0:s.dataset.expandable)==="true"&&(t.stopPropagation(),s.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(),s=Math.max(0,Math.min(t.clientX-e.left,e.width))/e.width;this.timeline.progress(s),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 s of e)if(s<t-.001)i=s;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 s of e)if(s>t+.001){i=s;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()}toggleEaseCurves(){this.showEaseCurves=!this.showEaseCurves,this.shadow.querySelector('[data-action="ease-curves"]').classList.toggle("active",this.showEaseCurves),this.container.classList.toggle("show-ease-curves",this.showEaseCurves)}applyAutofit(){if(!this.isAutofit||this.collapsed)return;const t=this.shadow.querySelectorAll(".gtv-track");let e=0;const i=36,s=30;t.forEach(m=>{if(e+=i,m.classList.contains("expanded")){const f=m.querySelectorAll(".gtv-stagger-child");e+=f.length*s}});const n=24,r=16,g=100,y=window.innerHeight-100;this.height=Math.max(g,Math.min($+n+e+r,y)),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"),s=this.timeDisplay.querySelector(".gtv-time-total");i.textContent=k(t),s.textContent=` / ${k(e)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((i,s)=>{const n=this.timelineData.tweens[s],r=t>=n.startTime&&t<=n.endTime,g=i.dataset.color;r?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 s=this.renderGridLines(t),n=e.map(g=>this.renderTrack(g,t)).join(""),r=this.tracksScroll.querySelector(".gtv-scrub-area");this.tracksScroll.innerHTML=s+n,this.tracksScroll.prepend(r),this.scrubArea=r}renderGridLines(t){const e=[],i=this.calculateInterval(t);for(let s=0;s<=t;s+=i){const n=s/t*100;e.push(`<div class="gtv-grid-line" style="left: ${n}%;"></div>`)}return e.join("")}renderRuler(t){const e=[],i=this.calculateInterval(t);for(let s=0;s<=t;s+=i){const n=s/t*100;e.push(`
74
74
  <div class="gtv-ruler-marker" style="left: ${n}%;">
75
75
  <div class="gtv-ruler-marker-line"></div>
76
- <span class="gtv-ruler-marker-label">${k(a,!1)}s</span>
76
+ <span class="gtv-ruler-marker-label">${k(s,!1)}s</span>
77
77
  </div>
78
78
  `)}this.rulerInner.innerHTML=e.join("")}calculateInterval(t){return t<=1?.25:t<=3?.5:t<=10?1:t<=30?5:10}renderEaseCurve(t){return t!=null&&t.length?`
79
79
  <svg class="gtv-ease-curve" viewBox="0 0 100 100" preserveAspectRatio="none">
80
- <path d="${`M0,100 L${t.map((a,n)=>{const r=n/(t.length-1)*100,g=100-a*100;return`${r},${g}`}).join(" L")} L100,100 Z`}" />
80
+ <path d="${`M0,100 L${t.map((s,n)=>{const r=n/(t.length-1)*100,g=100-s*100;return`${r},${g}`}).join(" L")} L100,100 Z`}" />
81
81
  </svg>
82
- `:""}getEaseClipPath(t){return t!=null&&t.length?`polygon(0% 100%, ${t.map((i,a)=>{const n=a/(t.length-1)*100,r=100-i*100;return`${n}% ${r}%`}).join(", ")}, 100% 100%)`:""}renderTrack(t,e){const i=t.startTime/e*100,a=t.duration/e*100,n=t.colorIndex+1,r=this.renderEaseCurve(t.easeSamples);let g="";t.hasStagger&&t.staggerChildren&&t.staggerChildren.length>0&&(g='<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 y="";if(t.staggerChildren&&t.staggerChildren.length>0){const f=t.staggerChildren.map(p=>{const u=p.startTime/e*100,x=(p.endTime-p.startTime)/e*100;return`
82
+ `:""}getEaseClipPath(t){return t!=null&&t.length?`polygon(0% 100%, ${t.map((i,s)=>{const n=s/(t.length-1)*100,r=100-i*100;return`${n}% ${r}%`}).join(", ")}, 100% 100%)`:""}renderTrack(t,e){const i=t.startTime/e*100,s=t.duration/e*100,n=t.colorIndex+1,r=this.renderEaseCurve(t.easeSamples);let g="";t.hasStagger&&t.staggerChildren&&t.staggerChildren.length>0&&(g='<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 y="";if(t.staggerChildren&&t.staggerChildren.length>0){const f=t.staggerChildren.map(v=>{const u=v.startTime/e*100,x=(v.endTime-v.startTime)/e*100;return`
83
83
  <div class="gtv-stagger-child">
84
84
  <div class="gtv-stagger-child-bar"
85
85
  style="left: ${u}%; width: ${x}%; background: var(--gtv-track-${n}); --track-color: var(--gtv-track-${n});">
86
86
  ${r}
87
- <span class="gtv-track-label">${p.targetLabel}</span>
87
+ <span class="gtv-track-label">${v.targetLabel}</span>
88
88
  </div>
89
89
  </div>
90
- `}).join("");y=`<div class="gtv-stagger-children" data-for="${t.id}">${f}</div>`}let m="";if(t.overlapWithPrev!==void 0){const f=t.overlapWithPrev>0,p=Math.abs(t.overlapWithPrev)/e*100,u=f?`-${k(t.overlapWithPrev)}s`:`+${k(Math.abs(t.overlapWithPrev))}s`,x=this.getEaseClipPath(t.easeSamples);f?m=`
91
- <div class="gtv-overlap-region" style="left: ${i}%; width: ${p}%; --ease-clip: ${x};"></div>
90
+ `}).join("");y=`<div class="gtv-stagger-children" data-for="${t.id}">${f}</div>`}let m="";if(t.overlapWithPrev!==void 0){const f=t.overlapWithPrev>0,v=Math.abs(t.overlapWithPrev)/e*100,u=f?`-${k(t.overlapWithPrev)}s`:`+${k(Math.abs(t.overlapWithPrev))}s`,x=this.getEaseClipPath(t.easeSamples);f?m=`
91
+ <div class="gtv-overlap-region" style="left: ${i}%; width: ${v}%; --ease-clip: ${x};"></div>
92
92
  <span class="gtv-offset-badge gtv-offset-overlap" style="left: ${i}%;">${u}</span>
93
93
  `:m=`
94
- <div class="gtv-gap-connector" style="left: ${i-p}%; width: ${p}%;"></div>
94
+ <div class="gtv-gap-connector" style="left: ${i-v}%; width: ${v}%;"></div>
95
95
  <span class="gtv-offset-badge gtv-offset-gap" style="left: ${i}%;">${u}</span>
96
96
  `}return`
97
97
  <div class="gtv-track" data-expandable="${t.hasStagger&&t.staggerChildren?"true":"false"}">
@@ -99,11 +99,11 @@
99
99
  <div class="gtv-track-bar"
100
100
  data-color="${n}"
101
101
  data-tween-id="${t.id}"
102
- style="left: ${i}%; width: ${a}%; background: var(--gtv-track-${n}); --track-color: var(--gtv-track-${n});">
102
+ style="left: ${i}%; width: ${s}%; background: var(--gtv-track-${n}); --track-color: var(--gtv-track-${n});">
103
103
  ${r}
104
104
  <span class="gtv-track-label">${t.label}</span>
105
105
  ${g}
106
106
  </div>
107
107
  ${y}
108
108
  </div>
109
- `}}customElements.define("gsap-timeline-viewer",P);const v=new Map;let c=null,z=!0,R=0,L=null;function j(){const l=window.gsap;!l||L||(L=l.timeline.bind(l),l.timeline=function(s){const t=L(s);if(z){let e;s!=null&&s.id&&typeof s.id=="string"?e=s.id:e=`Timeline ${++R}`,v.has(e)||(v.set(e,t),c&&(c.htmlElement.updateTimelineSelector(),v.size===1&&c.select(e)))}return t})}class S{constructor(s={}){o(this,"element");o(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 c||(z=s.autoDetect!==!1,z&&j(),c=new S(s),document.body.appendChild(c.element),setTimeout(()=>{if(c.element.updateTimelineSelector(),s.defaultTimeline&&v.has(s.defaultTimeline))c.select(s.defaultTimeline);else if(v.size>0){const t=v.keys().next().value;t&&c.select(t)}},0),c)}static register(s,t){v.set(s,t),c&&(c.element.updateTimelineSelector(),v.size===1&&c.select(s))}static unregister(s){v.delete(s),c&&c.element.updateTimelineSelector()}static getTimelines(){return v}static getInstance(){return c}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(),c=null}get htmlElement(){return this.element}}const E=Object.freeze(Object.defineProperty({__proto__:null,TimelineViewer:S,TimelineViewerElement:P},Symbol.toStringTag,{value:"Module"}));h.TimelineViewer=S,h.TimelineViewerElement=P,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
109
+ `}}customElements.define("gsap-timeline-viewer",z);const p=new Map;let c=null,C=!0,V=0;const E=new WeakSet;let w=null;function N(){return window.gsap||null}function B(){const l=N();if(!(l!=null&&l.globalTimeline))return;l.globalTimeline.getChildren(!1,!1,!0).forEach(t=>{if(E.has(t))return;E.add(t);const e=t.vars||{};let i;e.id&&typeof e.id=="string"?i=e.id:i=`Timeline ${++V}`;let s=i,n=1;for(;p.has(s);)s=`${i} (${++n})`;p.set(s,t),c&&(c.htmlElement.updateTimelineSelector(),p.size===1&&c.select(s))})}function W(){w||(B(),w=setInterval(B,500))}function U(){w&&(clearInterval(w),w=null)}class T{constructor(a={}){o(this,"element");o(this,"currentTimelineName",null);this.element=document.createElement("gsap-timeline-viewer"),a.height&&this.element.style.setProperty("--viewer-height",`${a.height}px`)}static create(a={}){return c||(C=a.autoDetect!==!1,c=new T(a),document.body.appendChild(c.element),C&&W(),setTimeout(()=>{if(c.element.updateTimelineSelector(),a.defaultTimeline&&p.has(a.defaultTimeline))c.select(a.defaultTimeline);else if(p.size>0){const t=p.keys().next().value;t&&c.select(t)}},0),c)}static register(a,t){p.set(a,t),c&&(c.element.updateTimelineSelector(),p.size===1&&c.select(a))}static unregister(a){p.delete(a),c&&c.element.updateTimelineSelector()}static getTimelines(){return p}static getInstance(){return c}select(a){const t=p.get(a);t&&(this.currentTimelineName=a,this.element.setTimeline(t),this.element.setSelectedTimeline(a))}getCurrentTimelineName(){return this.currentTimelineName}destroy(){U(),this.element.remove(),c=null}get htmlElement(){return this.element}}const M=Object.freeze(Object.defineProperty({__proto__:null,TimelineViewer:T,TimelineViewerElement:z},Symbol.toStringTag,{value:"Module"}));h.TimelineViewer=T,h.TimelineViewerElement=z,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gsap-timeline-viewer",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "description": "A lightweight, framework-agnostic timeline viewer for GSAP animations",
5
5
  "type": "module",
6
6
  "main": "./dist/gsap-timeline-viewer.umd.cjs",