gsap-timeline-viewer 0.1.7 → 0.1.8

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 (5) hide show
  1. package/dist/gsap-timeline-viewer.iife.js +4 -4
  2. package/dist/gsap-timeline-viewer.js +116 -114
  3. package/dist/gsap-timeline-viewer.umd.cjs +4 -4
  4. package/dist/index.d.ts +1 -0
  5. 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 _=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>
1
+ var GSAPTimelineViewer=function(p){"use strict";var _=Object.defineProperty;var O=(p,u,b)=>u in p?_(p,u,{enumerable:!0,configurable:!0,writable:!0,value:b}):p[u]=b;var o=(p,u,b)=>O(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 H(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 q(l=20){const a=[];for(let t=0;t<=l;t++)a.push(t/l);return a}function I(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 q(t);const s=[];for(let r=0;r<=t;r++)s.push(i(r/t));return s}function R(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=H(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,G)=>{const D=m+G*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:I(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 V(){u=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)}",$=[.25,.5,1,2,4],C=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,V(),this.timelineData=R(t),t.eventCallback("onUpdate",()=>this.onTimelineUpdate()),this.renderTracks(),this.updatePlayhead(),this.updateTimeDisplay(),this.updatePlayState(),requestAnimationFrame(()=>this.applyAutofit())}updateTimelineSelector(){Promise.resolve().then(()=>A).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,7 +70,7 @@ var GSAPTimelineViewer=function(p){"use strict";var _=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(()=>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(`
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(()=>A).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?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(),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)%$.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,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(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"),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
76
  <span class="gtv-ruler-marker-label">${k(s,!1)}s</span>
@@ -106,4 +106,4 @@ var GSAPTimelineViewer=function(p){"use strict";var _=Object.defineProperty;var
106
106
  </div>
107
107
  ${y}
108
108
  </div>
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}({});
109
+ `}}customElements.define("gsap-timeline-viewer",z);const h=new Map;let c=null,E=!0,N=0,L=null;const B=new WeakSet;let w=null;function W(){if(L)return L;const l=window;return l.gsap||l.GSAP||null}function M(){const l=W();if(!(l!=null&&l.globalTimeline))return;l.globalTimeline.getChildren(!1,!1,!0).forEach(t=>{if(B.has(t))return;B.add(t);const e=t.vars||{};let i;e.id&&typeof e.id=="string"?i=e.id:i=`Timeline ${++N}`;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 U(){w||(M(),w=setInterval(M,500))}function F(){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||(a.gsap&&(L=a.gsap),E=a.autoDetect!==!1,c=new T(a),document.body.appendChild(c.element),E&&U(),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(){F(),this.element.remove(),c=null}get htmlElement(){return this.element}}const A=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 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;
1
+ var H = Object.defineProperty;
2
+ var q = (o, s, t) => s in o ? H(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
3
+ var l = (o, s, t) => q(o, typeof s != "symbol" ? s + "" : s, t);
4
+ let D = 0;
5
5
  function w(o) {
6
6
  if (!o || o.length === 0) return "Unknown";
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";
7
+ const s = o[0];
8
+ return s.id ? `#${s.id}` : s.classList && s.classList.length > 0 ? `.${s.classList[0]}` : s.tagName ? s.tagName.toLowerCase() : "element";
9
9
  }
10
- function q(o) {
11
- const a = [
10
+ function I(o) {
11
+ const s = [
12
12
  "ease",
13
13
  "duration",
14
14
  "delay",
@@ -31,30 +31,30 @@ function q(o) {
31
31
  "reversed",
32
32
  "startAt"
33
33
  ];
34
- return Object.keys(o).filter((t) => !a.includes(t));
34
+ return Object.keys(o).filter((t) => !s.includes(t));
35
35
  }
36
- function I(o = 20) {
37
- const a = [];
36
+ function R(o = 20) {
37
+ const s = [];
38
38
  for (let t = 0; t <= o; t++)
39
- a.push(t / o);
40
- return a;
39
+ s.push(t / o);
40
+ return s;
41
41
  }
42
- function R(o, a, t = 20) {
42
+ function j(o, s, t = 20) {
43
43
  var n;
44
44
  const e = window.gsap;
45
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 = [];
46
+ if (!i && s && (i = s._ease), !i)
47
+ return R(t);
48
+ const a = [];
49
49
  for (let r = 0; r <= t; r++)
50
- s.push(i(r / t));
51
- return s;
50
+ a.push(i(r / t));
51
+ return a;
52
52
  }
53
- function j(o) {
54
- const a = [];
53
+ function N(o) {
54
+ const s = [];
55
55
  o.getChildren(!0, !0, !1).forEach((e, i) => {
56
56
  if (!("targets" in e)) return;
57
- const s = e, n = s.targets(), r = s.vars || {}, d = q(r);
57
+ const a = e, n = a.targets(), r = a.vars || {}, d = I(r);
58
58
  let m = "";
59
59
  if (r.id && typeof r.id == "string")
60
60
  m = r.id;
@@ -68,17 +68,17 @@ function j(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((k, M) => {
72
- const T = p + M * h;
71
+ f = n.map((k, A) => {
72
+ const P = p + A * h;
73
73
  return {
74
74
  targetLabel: w([k]),
75
- startTime: T,
76
- endTime: T + b
75
+ startTime: P,
76
+ endTime: P + b
77
77
  };
78
78
  });
79
79
  }
80
- a.push({
81
- id: `tween-${++B}`,
80
+ s.push({
81
+ id: `tween-${++D}`,
82
82
  label: m,
83
83
  startTime: p,
84
84
  endTime: p + u,
@@ -88,29 +88,29 @@ function j(o) {
88
88
  colorIndex: i % 6,
89
89
  hasStagger: !!r.stagger,
90
90
  ease: g,
91
- easeSamples: R(g, s),
91
+ easeSamples: j(g, a),
92
92
  staggerValue: h,
93
93
  staggerChildren: f
94
94
  });
95
95
  });
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);
96
+ for (let e = 1; e < s.length; e++) {
97
+ const i = s[e - 1], a = s[e], n = i.endTime - a.startTime;
98
+ Math.abs(n) > 1e-3 && (a.overlapWithPrev = Math.round(n * 1e3) / 1e3);
99
99
  }
100
100
  return {
101
101
  duration: o.duration(),
102
- tweens: a
102
+ tweens: s
103
103
  };
104
104
  }
105
- function N() {
106
- B = 0;
105
+ function V() {
106
+ D = 0;
107
107
  }
108
- function y(o, a = !0) {
108
+ function y(o, s = !0) {
109
109
  const t = Math.abs(o);
110
- return a ? t.toFixed(2) : t.toFixed(0);
110
+ return s ? t.toFixed(2) : t.toFixed(0);
111
111
  }
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 {
112
+ const W = ":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 M extends HTMLElement {
114
114
  constructor() {
115
115
  super();
116
116
  l(this, "shadow");
@@ -148,12 +148,12 @@ class D extends HTMLElement {
148
148
  this.detachTimeline(), this.clearBodyPadding();
149
149
  }
150
150
  setTimeline(t) {
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());
151
+ this.detachTimeline(), this.timeline = t, V(), this.timelineData = N(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(() => E).then(({ TimelineViewer: t }) => {
154
+ Promise.resolve().then(() => B).then(({ TimelineViewer: t }) => {
155
155
  const e = t.getTimelines(), i = this.timelineSelect.value;
156
- this.timelineSelect.innerHTML = "", e.forEach((s, n) => {
156
+ this.timelineSelect.innerHTML = "", e.forEach((a, n) => {
157
157
  const r = document.createElement("option");
158
158
  r.value = n, r.textContent = n, this.timelineSelect.appendChild(r);
159
159
  }), i && e.has(i) && (this.timelineSelect.value = i);
@@ -167,7 +167,7 @@ class D extends HTMLElement {
167
167
  }
168
168
  render() {
169
169
  this.shadow.innerHTML = `
170
- <style>${V}</style>
170
+ <style>${W}</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">
@@ -272,15 +272,15 @@ class D extends HTMLElement {
272
272
  }
273
273
  }), this.timelineSelect.addEventListener("change", () => {
274
274
  const t = this.timelineSelect.value;
275
- t && Promise.resolve().then(() => E).then(({ TimelineViewer: e }) => {
275
+ t && Promise.resolve().then(() => B).then(({ TimelineViewer: e }) => {
276
276
  var i;
277
277
  (i = e.getInstance()) == null || i.select(t);
278
278
  });
279
279
  }), this.shadow.addEventListener("click", (t) => {
280
280
  const i = t.target.closest(".gtv-track-bar");
281
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()));
282
+ const a = i.closest(".gtv-track");
283
+ (a == null ? void 0 : a.dataset.expandable) === "true" && (t.stopPropagation(), a.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);
@@ -328,7 +328,7 @@ class D extends HTMLElement {
328
328
  }
329
329
  updateBodyPadding() {
330
330
  if (!this.manageBodyPadding) return;
331
- const t = this.collapsed ? z : this.height;
331
+ const t = this.collapsed ? L : this.height;
332
332
  document.body.style.paddingBottom = `${t}px`;
333
333
  }
334
334
  clearBodyPadding() {
@@ -336,8 +336,8 @@ class D extends HTMLElement {
336
336
  }
337
337
  scrubToPosition(t) {
338
338
  if (!this.timeline || !this.timelineData) return;
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();
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();
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());
@@ -359,9 +359,9 @@ class D extends HTMLElement {
359
359
  if (!this.timeline || !this.timelineData) return;
360
360
  const t = Math.round(this.timeline.time() * 1e3) / 1e3, e = this.getTimePoints();
361
361
  let i = 0;
362
- for (const s of e)
363
- if (s < t - 1e-3)
364
- i = s;
362
+ for (const a of e)
363
+ if (a < t - 1e-3)
364
+ i = a;
365
365
  else
366
366
  break;
367
367
  this.timeline.time(i), this.timeline.pause(), this.updatePlayState();
@@ -370,9 +370,9 @@ class D extends HTMLElement {
370
370
  if (!this.timeline || !this.timelineData) return;
371
371
  const t = Math.round(this.timeline.time() * 1e3) / 1e3, e = this.getTimePoints();
372
372
  let i = this.timelineData.duration;
373
- for (const s of e)
374
- if (s > t + 1e-3) {
375
- i = s;
373
+ for (const a of e)
374
+ if (a > t + 1e-3) {
375
+ i = a;
376
376
  break;
377
377
  }
378
378
  this.timeline.time(i), this.timeline.pause(), this.updatePlayState();
@@ -382,8 +382,8 @@ class D extends HTMLElement {
382
382
  }
383
383
  cycleSpeed() {
384
384
  if (!this.timeline) return;
385
- this.speedIndex = (this.speedIndex + 1) % P.length;
386
- const t = P[this.speedIndex];
385
+ this.speedIndex = (this.speedIndex + 1) % z.length;
386
+ const t = z[this.speedIndex];
387
387
  this.timeline.timeScale(t), this.speedBtn.textContent = `${t}x`;
388
388
  }
389
389
  toggleCollapse() {
@@ -401,15 +401,15 @@ class D 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 i = 36, s = 30;
404
+ const i = 36, a = 30;
405
405
  t.forEach((p) => {
406
406
  if (e += i, p.classList.contains("expanded")) {
407
407
  const u = p.querySelectorAll(".gtv-stagger-child");
408
- e += u.length * s;
408
+ e += u.length * a;
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(z + n + e + r, m)), this.container.style.height = `${this.height}px`, this.updateBodyPadding();
412
+ this.height = Math.max(d, Math.min(L + 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,14 +427,14 @@ class D 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, i = this.timeDisplay.querySelector(".gtv-time-current"), s = this.timeDisplay.querySelector(".gtv-time-total");
431
- i.textContent = y(t), s.textContent = ` / ${y(e)}`;
430
+ const t = this.timeline.time(), e = this.timelineData.duration, i = this.timeDisplay.querySelector(".gtv-time-current"), a = this.timeDisplay.querySelector(".gtv-time-total");
431
+ i.textContent = y(t), a.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((i, s) => {
437
- const n = this.timelineData.tweens[s], r = t >= n.startTime && t <= n.endTime, d = i.dataset.color;
436
+ this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((i, a) => {
437
+ const n = this.timelineData.tweens[a], r = t >= n.startTime && t <= n.endTime, d = i.dataset.color;
438
438
  r ? i.style.background = `var(--gtv-track-${d}-active)` : i.style.background = `var(--gtv-track-${d})`;
439
439
  });
440
440
  }
@@ -442,25 +442,25 @@ class D extends HTMLElement {
442
442
  if (!this.timelineData) return;
443
443
  const { duration: t, tweens: e } = this.timelineData, i = this.shadow.querySelector(".gtv-empty");
444
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;
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;
447
447
  }
448
448
  renderGridLines(t) {
449
449
  const e = [], i = this.calculateInterval(t);
450
- for (let s = 0; s <= t; s += i) {
451
- const n = s / t * 100;
450
+ for (let a = 0; a <= t; a += i) {
451
+ const n = a / 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
457
  const e = [], i = this.calculateInterval(t);
458
- for (let s = 0; s <= t; s += i) {
459
- const n = s / t * 100;
458
+ for (let a = 0; a <= t; a += i) {
459
+ const n = a / 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(s, !1)}s</span>
463
+ <span class="gtv-ruler-marker-label">${y(a, !1)}s</span>
464
464
  </div>
465
465
  `);
466
466
  }
@@ -472,21 +472,21 @@ class D 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((s, n) => {
476
- const r = n / (t.length - 1) * 100, d = 100 - s * 100;
475
+ <path d="${`M0,100 L${t.map((a, n) => {
476
+ const r = n / (t.length - 1) * 100, d = 100 - a * 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((i, s) => {
484
- const n = s / (t.length - 1) * 100, r = 100 - i * 100;
483
+ return t != null && t.length ? `polygon(0% 100%, ${t.map((i, a) => {
484
+ const n = a / (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 i = t.startTime / e * 100, s = t.duration / e * 100, n = t.colorIndex + 1, r = this.renderEaseCurve(t.easeSamples);
489
+ const i = t.startTime / e * 100, a = 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 = "";
@@ -522,7 +522,7 @@ class D extends HTMLElement {
522
522
  <div class="gtv-track-bar"
523
523
  data-color="${n}"
524
524
  data-tween-id="${t.id}"
525
- style="left: ${i}%; width: ${s}%; background: var(--gtv-track-${n}); --track-color: var(--gtv-track-${n});">
525
+ style="left: ${i}%; width: ${a}%; 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,49 +532,51 @@ class D extends HTMLElement {
532
532
  `;
533
533
  }
534
534
  }
535
- customElements.define("gsap-timeline-viewer", D);
535
+ customElements.define("gsap-timeline-viewer", M);
536
536
  const v = /* @__PURE__ */ new Map();
537
- let c = null, L = !0, W = 0;
538
- const $ = /* @__PURE__ */ new WeakSet();
537
+ let c = null, $ = !0, U = 0, S = null;
538
+ const C = /* @__PURE__ */ new WeakSet();
539
539
  let x = null;
540
- function U() {
541
- return window.gsap || null;
540
+ function F() {
541
+ if (S) return S;
542
+ const o = window;
543
+ return o.gsap || o.GSAP || null;
542
544
  }
543
- function C() {
544
- const o = U();
545
+ function E() {
546
+ const o = F();
545
547
  if (!(o != null && o.globalTimeline)) return;
546
548
  o.globalTimeline.getChildren(!1, !1, !0).forEach((t) => {
547
- if ($.has(t)) return;
548
- $.add(t);
549
+ if (C.has(t)) return;
550
+ C.add(t);
549
551
  const e = t.vars || {};
550
552
  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));
553
+ e.id && typeof e.id == "string" ? i = e.id : i = `Timeline ${++U}`;
554
+ let a = i, n = 1;
555
+ for (; v.has(a); )
556
+ a = `${i} (${++n})`;
557
+ v.set(a, t), c && (c.htmlElement.updateTimelineSelector(), v.size === 1 && c.select(a));
556
558
  });
557
559
  }
558
- function F() {
559
- x || (C(), x = setInterval(C, 500));
560
- }
561
560
  function _() {
561
+ x || (E(), x = setInterval(E, 500));
562
+ }
563
+ function G() {
562
564
  x && (clearInterval(x), x = null);
563
565
  }
564
- class S {
565
- constructor(a = {}) {
566
+ class T {
567
+ constructor(s = {}) {
566
568
  l(this, "element");
567
569
  l(this, "currentTimelineName", null);
568
- this.element = document.createElement("gsap-timeline-viewer"), a.height && this.element.style.setProperty("--viewer-height", `${a.height}px`);
570
+ this.element = document.createElement("gsap-timeline-viewer"), s.height && this.element.style.setProperty("--viewer-height", `${s.height}px`);
569
571
  }
570
572
  /**
571
573
  * Create and attach the timeline viewer to the page.
572
574
  * Call this once - subsequent calls return the existing instance.
573
575
  */
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);
576
+ static create(s = {}) {
577
+ return c || (s.gsap && (S = s.gsap), $ = s.autoDetect !== !1, c = new T(s), document.body.appendChild(c.element), $ && _(), setTimeout(() => {
578
+ if (c.element.updateTimelineSelector(), s.defaultTimeline && v.has(s.defaultTimeline))
579
+ c.select(s.defaultTimeline);
578
580
  else if (v.size > 0) {
579
581
  const t = v.keys().next().value;
580
582
  t && c.select(t);
@@ -584,14 +586,14 @@ class S {
584
586
  /**
585
587
  * Register a timeline with a name so it appears in the dropdown.
586
588
  */
587
- static register(a, t) {
588
- v.set(a, t), c && (c.element.updateTimelineSelector(), v.size === 1 && c.select(a));
589
+ static register(s, t) {
590
+ v.set(s, t), c && (c.element.updateTimelineSelector(), v.size === 1 && c.select(s));
589
591
  }
590
592
  /**
591
593
  * Unregister a timeline.
592
594
  */
593
- static unregister(a) {
594
- v.delete(a), c && c.element.updateTimelineSelector();
595
+ static unregister(s) {
596
+ v.delete(s), c && c.element.updateTimelineSelector();
595
597
  }
596
598
  /**
597
599
  * Get all registered timelines.
@@ -608,9 +610,9 @@ class S {
608
610
  /**
609
611
  * Select a timeline by name.
610
612
  */
611
- select(a) {
612
- const t = v.get(a);
613
- t && (this.currentTimelineName = a, this.element.setTimeline(t), this.element.setSelectedTimeline(a));
613
+ select(s) {
614
+ const t = v.get(s);
615
+ t && (this.currentTimelineName = s, this.element.setTimeline(t), this.element.setSelectedTimeline(s));
614
616
  }
615
617
  /**
616
618
  * Get current timeline name.
@@ -622,18 +624,18 @@ class S {
622
624
  * Remove the viewer from the page.
623
625
  */
624
626
  destroy() {
625
- _(), this.element.remove(), c = null;
627
+ G(), this.element.remove(), c = null;
626
628
  }
627
629
  get htmlElement() {
628
630
  return this.element;
629
631
  }
630
632
  }
631
- const E = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
633
+ const B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
632
634
  __proto__: null,
633
- TimelineViewer: S,
634
- TimelineViewerElement: D
635
+ TimelineViewer: T,
636
+ TimelineViewerElement: M
635
637
  }, Symbol.toStringTag, { value: "Module" }));
636
638
  export {
637
- S as TimelineViewer,
638
- D as TimelineViewerElement
639
+ T as TimelineViewer,
640
+ M as TimelineViewerElement
639
641
  };
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 _=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>
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 O=(h,d,b)=>d in h?_(h,d,{enumerable:!0,configurable:!0,writable:!0,value:b}):h[d]=b;var o=(h,d,b)=>O(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 H(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 q(l=20){const a=[];for(let t=0;t<=l;t++)a.push(t/l);return a}function I(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 q(t);const s=[];for(let r=0;r<=t;r++)s.push(i(r/t));return s}function R(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=H(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,G)=>{const D=m+G*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:I(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 j(){d=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)}",$=[.25,.5,1,2,4],C=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,j(),this.timelineData=R(t),t.eventCallback("onUpdate",()=>this.onTimelineUpdate()),this.renderTracks(),this.updatePlayhead(),this.updateTimeDisplay(),this.updatePlayState(),requestAnimationFrame(()=>this.applyAutofit())}updateTimelineSelector(){Promise.resolve().then(()=>A).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,7 +70,7 @@
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(()=>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(`
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(()=>A).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?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(),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)%$.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,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(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"),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
76
  <span class="gtv-ruler-marker-label">${k(s,!1)}s</span>
@@ -106,4 +106,4 @@
106
106
  </div>
107
107
  ${y}
108
108
  </div>
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"})});
109
+ `}}customElements.define("gsap-timeline-viewer",z);const p=new Map;let c=null,E=!0,N=0,L=null;const B=new WeakSet;let w=null;function W(){if(L)return L;const l=window;return l.gsap||l.GSAP||null}function M(){const l=W();if(!(l!=null&&l.globalTimeline))return;l.globalTimeline.getChildren(!1,!1,!0).forEach(t=>{if(B.has(t))return;B.add(t);const e=t.vars||{};let i;e.id&&typeof e.id=="string"?i=e.id:i=`Timeline ${++N}`;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 U(){w||(M(),w=setInterval(M,500))}function F(){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||(a.gsap&&(L=a.gsap),E=a.autoDetect!==!1,c=new T(a),document.body.appendChild(c.element),E&&U(),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(){F(),this.element.remove(),c=null}get htmlElement(){return this.element}}const A=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/dist/index.d.ts CHANGED
@@ -43,6 +43,7 @@ export declare interface TimelineViewerConfig {
43
43
  collapsed?: boolean;
44
44
  defaultTimeline?: string;
45
45
  autoDetect?: boolean;
46
+ gsap?: typeof gsap;
46
47
  }
47
48
 
48
49
  export declare class TimelineViewerElement extends HTMLElement {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gsap-timeline-viewer",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
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",