gsap-timeline-viewer 0.1.0

package/README.md

@@ -0,0 +1,110 @@
+# GSAP Timeline Viewer
+
+A lightweight, framework-agnostic development tool for visualizing GSAP timelines. Debug and scrub through your animations with a visual timeline panel.
+
+**4.8 KB gzipped** | Works with React, Vue, Angular, Svelte, or vanilla JS
+
+## Installation
+
+```bash
+npm install gsap-timeline-viewer
+```
+
+Note: GSAP is a peer dependency. Make sure you have it installed:
+
+```bash
+npm install gsap
+```
+
+## Quick Start
+
+```javascript
+import { TimelineViewer } from 'gsap-timeline-viewer';
+import gsap from 'gsap';
+
+// Create your GSAP timeline
+const tl = gsap.timeline();
+tl.to('.box', { x: 100, duration: 1 })
+  .to('.box', { y: 50, duration: 0.5 });
+
+// Attach the viewer
+const viewer = new TimelineViewer({ timeline: tl });
+viewer.attach();
+```
+
+## Features
+
+- Visual timeline with colored tracks for each tween
+- Scrubber/playhead synced with your timeline
+- Playback controls (play/pause, skip to start/end)
+- Speed control (0.25x, 0.5x, 1x, 2x, 4x)
+- Loop toggle
+- Auto-scaling time ruler
+- Keyboard shortcut: `Space` to play/pause
+- Collapsible panel
+- Dark theme
+
+## API
+
+### TimelineViewer
+
+```typescript
+import { TimelineViewer } from 'gsap-timeline-viewer';
+
+const viewer = new TimelineViewer({
+  timeline: myTimeline,  // Required: GSAP timeline instance
+  height: 200,           // Optional: Panel height in pixels (default: 200)
+});
+
+viewer.attach();                    // Add viewer to document.body
+viewer.attach(containerElement);    // Add to specific container
+viewer.detach();                    // Remove from DOM
+viewer.setTimeline(newTimeline);    // Switch to a different timeline
+```
+
+### Named Tweens
+
+For better labels in the viewer, add an `id` to your tweens:
+
+```javascript
+tl.to('.hero', {
+  opacity: 1,
+  duration: 1,
+  id: 'Hero Fade In'  // This label appears in the viewer
+});
+```
+
+## Web Component
+
+The viewer is also available as a custom element:
+
+```html
+<gsap-timeline-viewer></gsap-timeline-viewer>
+
+<script type="module">
+  import 'gsap-timeline-viewer';
+
+  const viewer = document.querySelector('gsap-timeline-viewer');
+  viewer.setTimeline(myTimeline);
+</script>
+```
+
+## UMD / Script Tag
+
+```html
+<script src="https://unpkg.com/gsap"></script>
+<script src="https://unpkg.com/gsap-timeline-viewer"></script>
+
+<script>
+  const viewer = new GSAPTimelineViewer.TimelineViewer({ timeline: tl });
+  viewer.attach();
+</script>
+```
+
+## Browser Support
+
+Works in all modern browsers that support Web Components (Chrome, Firefox, Safari, Edge).
+
+## License
+
+MIT

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

@@ -0,0 +1,72 @@
+var GSAPTimelineViewer=function(o){"use strict";var C=Object.defineProperty;var D=(o,c,h)=>c in o?C(o,c,{enumerable:!0,configurable:!0,writable:!0,value:h}):o[c]=h;var s=(o,c,h)=>D(o,typeof c!="symbol"?c+"":c,h);let c=0;function h(n){if(!n||n.length===0)return"Unknown";const i=n[0];return i.id?`#${i.id}`:i.classList&&i.classList.length>0?`.${i.classList[0]}`:i.tagName?i.tagName.toLowerCase():"element"}function k(n){const i=["ease","duration","delay","onComplete","onStart","onUpdate","onCompleteParams","onStartParams","onUpdateParams","repeat","repeatDelay","yoyo","stagger","overwrite","immediateRender","lazy","autoAlpha","id","paused","reversed","startAt"];return Object.keys(n).filter(t=>!i.includes(t))}function S(n){const i=[];return n.getChildren(!0,!0,!1).forEach((e,a)=>{if(!("targets"in e))return;const r=e,l=r.targets(),d=r.vars||{},p=k(d);let v="";if(d.id&&typeof d.id=="string")v=d.id;else{const f=h(l),x=p.slice(0,2).join(", ");v=x?`${f} (${x})`:f}const b=e.startTime(),y=e.duration();i.push({id:`tween-${++c}`,label:v,startTime:b,endTime:b+y,duration:y,targets:h(l),properties:p,colorIndex:a%6})}),{duration:n.duration(),tweens:i}}function w(){c=0}function g(n,i=!0){const t=Math.abs(n);return i?t.toFixed(2):t.toFixed(0)}const T=":host{--gtv-bg: #1a1a1a;--gtv-bg-secondary: #252525;--gtv-border: #333;--gtv-text: #e0e0e0;--gtv-text-muted: #888;--gtv-accent: #4a9eff;--gtv-playhead: #4a9eff;--gtv-ruler-bg: #1f1f1f;--gtv-track-height: 28px;--gtv-controls-height: 40px;--gtv-ruler-height: 24px;--gtv-track-1: #3b82f6;--gtv-track-2: #f59e0b;--gtv-track-3: #ec4899;--gtv-track-4: #10b981;--gtv-track-5: #8b5cf6;--gtv-track-6: #ef4444}*{box-sizing:border-box;margin:0;padding:0}.gtv-container{position:fixed;bottom:0;left:0;right:0;background:var(--gtv-bg);border-top:1px solid var(--gtv-border);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;color:var(--gtv-text);z-index:999999;display:flex;flex-direction:column}.gtv-container.collapsed{height:auto!important}.gtv-container.collapsed .gtv-timeline-area{display:none}.gtv-controls{display:flex;align-items:center;justify-content:space-between;height:var(--gtv-controls-height);padding:0 12px;background:var(--gtv-bg-secondary);border-bottom:1px solid var(--gtv-border);gap:16px}.gtv-controls-left,.gtv-controls-center,.gtv-controls-right{display:flex;align-items:center;gap:8px}.gtv-controls-center{flex:0 0 auto}.gtv-time-display{font-variant-numeric:tabular-nums;min-width:100px;text-align:center}.gtv-time-current{color:var(--gtv-text)}.gtv-time-total{color:var(--gtv-text-muted)}.gtv-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:4px;color:var(--gtv-text);cursor:pointer;transition:background .15s}.gtv-btn:hover{background:#ffffff1a}.gtv-btn:active{background:#ffffff26}.gtv-btn.active{color:var(--gtv-accent)}.gtv-btn svg{width:16px;height:16px;fill:currentColor}.gtv-btn-play svg{width:20px;height:20px}.gtv-speed-btn{width:auto;padding:0 8px;font-size:11px;font-weight:500}.gtv-collapse-btn{margin-left:auto}.gtv-timeline-area{display:flex;flex-direction:column;overflow:hidden;flex:1}.gtv-ruler{position:relative;height:var(--gtv-ruler-height);background:var(--gtv-ruler-bg);border-bottom:1px solid var(--gtv-border);overflow:hidden;flex-shrink:0}.gtv-ruler-inner{position:relative;height:100%}.gtv-ruler-marker{position:absolute;top:0;height:100%;display:flex;flex-direction:column;align-items:center}.gtv-ruler-marker-line{width:1px;height:6px;background:var(--gtv-text-muted)}.gtv-ruler-marker-label{font-size:10px;color:var(--gtv-text-muted);margin-top:2px}.gtv-tracks-container{position:relative;overflow-y:auto;overflow-x:hidden;flex:1}.gtv-tracks-scroll{position:relative;min-height:100%}.gtv-track{position:relative;height:var(--gtv-track-height);border-bottom:1px solid var(--gtv-border)}.gtv-track-bar{position:absolute;top:4px;height:calc(var(--gtv-track-height) - 8px);border-radius:4px;display:flex;align-items:center;padding:0 8px;font-size:11px;font-weight:500;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;transition:filter .15s}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-track-bar.is-active{box-shadow:0 0 0 2px var(--gtv-accent)}.gtv-playhead-container{position:absolute;top:0;bottom:0;width:1px;pointer-events:none;z-index:10}.gtv-playhead-head{position:absolute;top:0;left:-5px;width:11px;height:11px;background:var(--gtv-playhead);clip-path:polygon(50% 100%,0 0,100% 0)}.gtv-playhead-line{position:absolute;top:11px;bottom:0;left:0;width:1px;background:var(--gtv-playhead)}.gtv-scrub-area{position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer}.gtv-empty{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--gtv-text-muted)}",L=["var(--gtv-track-1)","var(--gtv-track-2)","var(--gtv-track-3)","var(--gtv-track-4)","var(--gtv-track-5)","var(--gtv-track-6)"],u=[.25,.5,1,2,4];class m extends HTMLElement{constructor(){super();s(this,"shadow");s(this,"timeline",null);s(this,"timelineData",null);s(this,"isPlaying",!1);s(this,"isLooping",!1);s(this,"speedIndex",2);s(this,"collapsed",!1);s(this,"height",200);s(this,"isDragging",!1);s(this,"container");s(this,"playBtn");s(this,"loopBtn");s(this,"speedBtn");s(this,"timeDisplay");s(this,"rulerInner");s(this,"tracksScroll");s(this,"playhead");s(this,"scrubArea");this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.setupEventListeners()}disconnectedCallback(){this.detachTimeline()}setTimeline(t){this.detachTimeline(),this.timeline=t,w(),this.timelineData=S(t),t.eventCallback("onUpdate",()=>this.onTimelineUpdate()),this.renderTracks(),this.updatePlayhead(),this.updateTimeDisplay(),this.updatePlayState()}detachTimeline(){this.timeline&&(this.timeline.eventCallback("onUpdate",null),this.timeline=null,this.timelineData=null)}render(){this.shadow.innerHTML=`
+      <style>${T}</style>
+      <div class="gtv-container ${this.collapsed?"collapsed":""}" style="height: ${this.height}px;">
+        <!-- Controls Bar -->
+        <div class="gtv-controls">
+          <div class="gtv-controls-left">
+            <button class="gtv-btn" data-action="skip-start" title="Skip to start">
+              <svg viewBox="0 0 24 24"><path d="M6 6h2v12H6V6zm3.5 6l8.5 6V6l-8.5 6z"/></svg>
+            </button>
+            <button class="gtv-btn gtv-btn-play" data-action="play" title="Play/Pause">
+              <svg class="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+              <svg class="pause-icon" viewBox="0 0 24 24" style="display: none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+            </button>
+            <button class="gtv-btn" data-action="skip-end" title="Skip to end">
+              <svg viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zm2 0V6l6.5 6L8 18zm8-12v12h2V6h-2z"/></svg>
+            </button>
+          </div>
+
+          <div class="gtv-controls-center">
+            <button class="gtv-btn" data-action="loop" title="Loop">
+              <svg viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
+            </button>
+            <span class="gtv-time-display">
+              <span class="gtv-time-current">0.00</span>
+              <span class="gtv-time-total"> / 0.00</span>
+            </span>
+            <button class="gtv-btn gtv-speed-btn" data-action="speed" title="Playback speed">1x</button>
+          </div>
+
+          <div class="gtv-controls-right">
+            <button class="gtv-btn gtv-collapse-btn" data-action="collapse" title="Collapse/Expand">
+              <svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Timeline Area -->
+        <div class="gtv-timeline-area">
+          <!-- Ruler -->
+          <div class="gtv-ruler">
+            <div class="gtv-ruler-inner"></div>
+            <div class="gtv-playhead-container">
+              <div class="gtv-playhead-head"></div>
+            </div>
+          </div>
+
+          <!-- Tracks -->
+          <div class="gtv-tracks-container">
+            <div class="gtv-tracks-scroll">
+              <div class="gtv-scrub-area"></div>
+              <div class="gtv-playhead-container">
+                <div class="gtv-playhead-line"></div>
+              </div>
+            </div>
+            <div class="gtv-empty">No timeline attached. Call setTimeline() to visualize a GSAP timeline.</div>
+          </div>
+        </div>
+      </div>
+    `,this.container=this.shadow.querySelector(".gtv-container"),this.playBtn=this.shadow.querySelector('[data-action="play"]'),this.loopBtn=this.shadow.querySelector('[data-action="loop"]'),this.speedBtn=this.shadow.querySelector('[data-action="speed"]'),this.timeDisplay=this.shadow.querySelector(".gtv-time-display"),this.rulerInner=this.shadow.querySelector(".gtv-ruler-inner"),this.tracksScroll=this.shadow.querySelector(".gtv-tracks-scroll"),this.playhead=this.shadow.querySelector(".gtv-ruler .gtv-playhead-container"),this.scrubArea=this.shadow.querySelector(".gtv-scrub-area")}setupEventListeners(){this.shadow.addEventListener("click",t=>{const a=t.target.closest("[data-action]");if(!a)return;switch(a.dataset.action){case"play":this.togglePlay();break;case"skip-start":this.skipToStart();break;case"skip-end":this.skipToEnd();break;case"loop":this.toggleLoop();break;case"speed":this.cycleSpeed();break;case"collapse":this.toggleCollapse();break}}),this.scrubArea.addEventListener("mousedown",t=>this.startScrub(t)),this.shadow.querySelector(".gtv-ruler").addEventListener("mousedown",t=>this.startScrub(t)),document.addEventListener("mousemove",t=>this.onScrub(t)),document.addEventListener("mouseup",()=>this.endScrub()),document.addEventListener("keydown",t=>{t.target===document.body&&t.code==="Space"&&(t.preventDefault(),this.togglePlay())})}startScrub(t){this.timeline&&(this.isDragging=!0,this.scrubToPosition(t))}onScrub(t){!this.isDragging||!this.timeline||this.scrubToPosition(t)}endScrub(){this.isDragging=!1}scrubToPosition(t){if(!this.timeline||!this.timelineData)return;const e=this.rulerInner.getBoundingClientRect(),r=Math.max(0,Math.min(t.clientX-e.left,e.width))/e.width;this.timeline.progress(r),this.timeline.pause(),this.updatePlayState()}togglePlay(){this.timeline&&(this.timeline.paused()||this.timeline.progress()===1?this.timeline.progress()===1?this.timeline.restart():this.timeline.play():this.timeline.pause(),this.updatePlayState())}skipToStart(){this.timeline&&(this.timeline.progress(0),this.timeline.pause(),this.updatePlayState())}skipToEnd(){this.timeline&&(this.timeline.progress(1),this.timeline.pause(),this.updatePlayState())}toggleLoop(){this.timeline&&(this.isLooping=!this.isLooping,this.timeline.repeat(this.isLooping?-1:0),this.loopBtn.classList.toggle("active",this.isLooping))}cycleSpeed(){if(!this.timeline)return;this.speedIndex=(this.speedIndex+1)%u.length;const t=u[this.speedIndex];this.timeline.timeScale(t),this.speedBtn.textContent=`${t}x`}toggleCollapse(){this.collapsed=!this.collapsed,this.container.classList.toggle("collapsed",this.collapsed);const t=this.shadow.querySelector('[data-action="collapse"]');t.innerHTML=this.collapsed?'<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>':'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>'}updatePlayState(){if(!this.timeline)return;this.isPlaying=!this.timeline.paused()&&this.timeline.progress()<1;const t=this.playBtn.querySelector(".play-icon"),e=this.playBtn.querySelector(".pause-icon");t.style.display=this.isPlaying?"none":"block",e.style.display=this.isPlaying?"block":"none"}onTimelineUpdate(){this.updatePlayhead(),this.updateTimeDisplay(),this.updateActiveTracks(),this.updatePlayState()}updatePlayhead(){if(!this.timeline||!this.timelineData)return;const e=`${this.timeline.progress()*100}%`;this.playhead.style.left=e;const a=this.tracksScroll.querySelector(".gtv-playhead-container");a&&(a.style.left=e)}updateTimeDisplay(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time(),e=this.timelineData.duration,a=this.timeDisplay.querySelector(".gtv-time-current"),r=this.timeDisplay.querySelector(".gtv-time-total");a.textContent=g(t),r.textContent=` / ${g(e)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((a,r)=>{const l=this.timelineData.tweens[r],d=t>=l.startTime&&t<=l.endTime;a.classList.toggle("is-active",d)})}renderTracks(){if(!this.timelineData)return;const{duration:t,tweens:e}=this.timelineData,a=this.shadow.querySelector(".gtv-empty");a.style.display=e.length>0?"none":"flex",this.renderRuler(t);const r=e.map(p=>this.renderTrack(p,t)).join(""),l=this.tracksScroll.querySelector(".gtv-scrub-area"),d=this.tracksScroll.querySelector(".gtv-playhead-container");this.tracksScroll.innerHTML=r,this.tracksScroll.prepend(l),this.tracksScroll.appendChild(d),this.scrubArea=l}renderRuler(t){const e=[],a=this.calculateInterval(t);for(let r=0;r<=t;r+=a){const l=r/t*100;e.push(`
+        <div class="gtv-ruler-marker" style="left: ${l}%;">
+          <div class="gtv-ruler-marker-line"></div>
+          <span class="gtv-ruler-marker-label">${g(r,!1)}s</span>
+        </div>
+      `)}this.rulerInner.innerHTML=e.join("")}calculateInterval(t){return t<=1?.25:t<=3?.5:t<=10?1:t<=30?5:10}renderTrack(t,e){const a=t.startTime/e*100,r=t.duration/e*100,l=L[t.colorIndex];return`
+      <div class="gtv-track">
+        <div class="gtv-track-bar"
+             style="left: ${a}%; width: ${r}%; background: ${l};"
+             title="${t.label} (${g(t.startTime)}s - ${g(t.endTime)}s)">
+          ${t.label}
+        </div>
+      </div>
+    `}}customElements.define("gsap-timeline-viewer",m);class P{constructor(i){s(this,"element");this.element=document.createElement("gsap-timeline-viewer"),i.height&&this.element.style.setProperty("--viewer-height",`${i.height}px`),i.timeline&&setTimeout(()=>{this.element.setTimeline(i.timeline)},0)}attach(i=document.body){i.appendChild(this.element)}detach(){this.element.remove()}setTimeline(i){this.element.setTimeline(i)}get htmlElement(){return this.element}}return o.TimelineViewer=P,o.TimelineViewerElement=m,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),o}({});

package/dist/gsap-timeline-viewer.js

@@ -0,0 +1,331 @@
+var f = Object.defineProperty;
+var x = (a, e, t) => e in a ? f(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var s = (a, e, t) => x(a, typeof e != "symbol" ? e + "" : e, t);
+let y = 0;
+function m(a) {
+  if (!a || a.length === 0) return "Unknown";
+  const e = a[0];
+  return e.id ? `#${e.id}` : e.classList && e.classList.length > 0 ? `.${e.classList[0]}` : e.tagName ? e.tagName.toLowerCase() : "element";
+}
+function k(a) {
+  const e = [
+    "ease",
+    "duration",
+    "delay",
+    "onComplete",
+    "onStart",
+    "onUpdate",
+    "onCompleteParams",
+    "onStartParams",
+    "onUpdateParams",
+    "repeat",
+    "repeatDelay",
+    "yoyo",
+    "stagger",
+    "overwrite",
+    "immediateRender",
+    "lazy",
+    "autoAlpha",
+    "id",
+    "paused",
+    "reversed",
+    "startAt"
+  ];
+  return Object.keys(a).filter((t) => !e.includes(t));
+}
+function S(a) {
+  const e = [];
+  return a.getChildren(!0, !0, !1).forEach((i, r) => {
+    if (!("targets" in i)) return;
+    const n = i, l = n.targets(), o = n.vars || {}, d = k(o);
+    let h = "";
+    if (o.id && typeof o.id == "string")
+      h = o.id;
+    else {
+      const v = m(l), u = d.slice(0, 2).join(", ");
+      h = u ? `${v} (${u})` : v;
+    }
+    const g = i.startTime(), p = i.duration();
+    e.push({
+      id: `tween-${++y}`,
+      label: h,
+      startTime: g,
+      endTime: g + p,
+      duration: p,
+      targets: m(l),
+      properties: d,
+      colorIndex: r % 6
+    });
+  }), {
+    duration: a.duration(),
+    tweens: e
+  };
+}
+function w() {
+  y = 0;
+}
+function c(a, e = !0) {
+  const t = Math.abs(a);
+  return e ? t.toFixed(2) : t.toFixed(0);
+}
+const T = ":host{--gtv-bg: #1a1a1a;--gtv-bg-secondary: #252525;--gtv-border: #333;--gtv-text: #e0e0e0;--gtv-text-muted: #888;--gtv-accent: #4a9eff;--gtv-playhead: #4a9eff;--gtv-ruler-bg: #1f1f1f;--gtv-track-height: 28px;--gtv-controls-height: 40px;--gtv-ruler-height: 24px;--gtv-track-1: #3b82f6;--gtv-track-2: #f59e0b;--gtv-track-3: #ec4899;--gtv-track-4: #10b981;--gtv-track-5: #8b5cf6;--gtv-track-6: #ef4444}*{box-sizing:border-box;margin:0;padding:0}.gtv-container{position:fixed;bottom:0;left:0;right:0;background:var(--gtv-bg);border-top:1px solid var(--gtv-border);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;color:var(--gtv-text);z-index:999999;display:flex;flex-direction:column}.gtv-container.collapsed{height:auto!important}.gtv-container.collapsed .gtv-timeline-area{display:none}.gtv-controls{display:flex;align-items:center;justify-content:space-between;height:var(--gtv-controls-height);padding:0 12px;background:var(--gtv-bg-secondary);border-bottom:1px solid var(--gtv-border);gap:16px}.gtv-controls-left,.gtv-controls-center,.gtv-controls-right{display:flex;align-items:center;gap:8px}.gtv-controls-center{flex:0 0 auto}.gtv-time-display{font-variant-numeric:tabular-nums;min-width:100px;text-align:center}.gtv-time-current{color:var(--gtv-text)}.gtv-time-total{color:var(--gtv-text-muted)}.gtv-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:4px;color:var(--gtv-text);cursor:pointer;transition:background .15s}.gtv-btn:hover{background:#ffffff1a}.gtv-btn:active{background:#ffffff26}.gtv-btn.active{color:var(--gtv-accent)}.gtv-btn svg{width:16px;height:16px;fill:currentColor}.gtv-btn-play svg{width:20px;height:20px}.gtv-speed-btn{width:auto;padding:0 8px;font-size:11px;font-weight:500}.gtv-collapse-btn{margin-left:auto}.gtv-timeline-area{display:flex;flex-direction:column;overflow:hidden;flex:1}.gtv-ruler{position:relative;height:var(--gtv-ruler-height);background:var(--gtv-ruler-bg);border-bottom:1px solid var(--gtv-border);overflow:hidden;flex-shrink:0}.gtv-ruler-inner{position:relative;height:100%}.gtv-ruler-marker{position:absolute;top:0;height:100%;display:flex;flex-direction:column;align-items:center}.gtv-ruler-marker-line{width:1px;height:6px;background:var(--gtv-text-muted)}.gtv-ruler-marker-label{font-size:10px;color:var(--gtv-text-muted);margin-top:2px}.gtv-tracks-container{position:relative;overflow-y:auto;overflow-x:hidden;flex:1}.gtv-tracks-scroll{position:relative;min-height:100%}.gtv-track{position:relative;height:var(--gtv-track-height);border-bottom:1px solid var(--gtv-border)}.gtv-track-bar{position:absolute;top:4px;height:calc(var(--gtv-track-height) - 8px);border-radius:4px;display:flex;align-items:center;padding:0 8px;font-size:11px;font-weight:500;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;transition:filter .15s}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-track-bar.is-active{box-shadow:0 0 0 2px var(--gtv-accent)}.gtv-playhead-container{position:absolute;top:0;bottom:0;width:1px;pointer-events:none;z-index:10}.gtv-playhead-head{position:absolute;top:0;left:-5px;width:11px;height:11px;background:var(--gtv-playhead);clip-path:polygon(50% 100%,0 0,100% 0)}.gtv-playhead-line{position:absolute;top:11px;bottom:0;left:0;width:1px;background:var(--gtv-playhead)}.gtv-scrub-area{position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer}.gtv-empty{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--gtv-text-muted)}", L = [
+  "var(--gtv-track-1)",
+  "var(--gtv-track-2)",
+  "var(--gtv-track-3)",
+  "var(--gtv-track-4)",
+  "var(--gtv-track-5)",
+  "var(--gtv-track-6)"
+], b = [0.25, 0.5, 1, 2, 4];
+class P extends HTMLElement {
+  constructor() {
+    super();
+    s(this, "shadow");
+    s(this, "timeline", null);
+    s(this, "timelineData", null);
+    s(this, "isPlaying", !1);
+    s(this, "isLooping", !1);
+    s(this, "speedIndex", 2);
+    // 1x
+    s(this, "collapsed", !1);
+    s(this, "height", 200);
+    s(this, "isDragging", !1);
+    // DOM references
+    s(this, "container");
+    s(this, "playBtn");
+    s(this, "loopBtn");
+    s(this, "speedBtn");
+    s(this, "timeDisplay");
+    s(this, "rulerInner");
+    s(this, "tracksScroll");
+    s(this, "playhead");
+    s(this, "scrubArea");
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render(), this.setupEventListeners();
+  }
+  disconnectedCallback() {
+    this.detachTimeline();
+  }
+  setTimeline(t) {
+    this.detachTimeline(), this.timeline = t, w(), this.timelineData = S(t), t.eventCallback("onUpdate", () => this.onTimelineUpdate()), this.renderTracks(), this.updatePlayhead(), this.updateTimeDisplay(), this.updatePlayState();
+  }
+  detachTimeline() {
+    this.timeline && (this.timeline.eventCallback("onUpdate", null), this.timeline = null, this.timelineData = null);
+  }
+  render() {
+    this.shadow.innerHTML = `
+      <style>${T}</style>
+      <div class="gtv-container ${this.collapsed ? "collapsed" : ""}" style="height: ${this.height}px;">
+        <!-- Controls Bar -->
+        <div class="gtv-controls">
+          <div class="gtv-controls-left">
+            <button class="gtv-btn" data-action="skip-start" title="Skip to start">
+              <svg viewBox="0 0 24 24"><path d="M6 6h2v12H6V6zm3.5 6l8.5 6V6l-8.5 6z"/></svg>
+            </button>
+            <button class="gtv-btn gtv-btn-play" data-action="play" title="Play/Pause">
+              <svg class="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+              <svg class="pause-icon" viewBox="0 0 24 24" style="display: none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+            </button>
+            <button class="gtv-btn" data-action="skip-end" title="Skip to end">
+              <svg viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zm2 0V6l6.5 6L8 18zm8-12v12h2V6h-2z"/></svg>
+            </button>
+          </div>
+
+          <div class="gtv-controls-center">
+            <button class="gtv-btn" data-action="loop" title="Loop">
+              <svg viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
+            </button>
+            <span class="gtv-time-display">
+              <span class="gtv-time-current">0.00</span>
+              <span class="gtv-time-total"> / 0.00</span>
+            </span>
+            <button class="gtv-btn gtv-speed-btn" data-action="speed" title="Playback speed">1x</button>
+          </div>
+
+          <div class="gtv-controls-right">
+            <button class="gtv-btn gtv-collapse-btn" data-action="collapse" title="Collapse/Expand">
+              <svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Timeline Area -->
+        <div class="gtv-timeline-area">
+          <!-- Ruler -->
+          <div class="gtv-ruler">
+            <div class="gtv-ruler-inner"></div>
+            <div class="gtv-playhead-container">
+              <div class="gtv-playhead-head"></div>
+            </div>
+          </div>
+
+          <!-- Tracks -->
+          <div class="gtv-tracks-container">
+            <div class="gtv-tracks-scroll">
+              <div class="gtv-scrub-area"></div>
+              <div class="gtv-playhead-container">
+                <div class="gtv-playhead-line"></div>
+              </div>
+            </div>
+            <div class="gtv-empty">No timeline attached. Call setTimeline() to visualize a GSAP timeline.</div>
+          </div>
+        </div>
+      </div>
+    `, this.container = this.shadow.querySelector(".gtv-container"), this.playBtn = this.shadow.querySelector('[data-action="play"]'), this.loopBtn = this.shadow.querySelector('[data-action="loop"]'), this.speedBtn = this.shadow.querySelector('[data-action="speed"]'), this.timeDisplay = this.shadow.querySelector(".gtv-time-display"), this.rulerInner = this.shadow.querySelector(".gtv-ruler-inner"), this.tracksScroll = this.shadow.querySelector(".gtv-tracks-scroll"), this.playhead = this.shadow.querySelector(".gtv-ruler .gtv-playhead-container"), this.scrubArea = this.shadow.querySelector(".gtv-scrub-area");
+  }
+  setupEventListeners() {
+    this.shadow.addEventListener("click", (t) => {
+      const r = t.target.closest("[data-action]");
+      if (!r) return;
+      switch (r.dataset.action) {
+        case "play":
+          this.togglePlay();
+          break;
+        case "skip-start":
+          this.skipToStart();
+          break;
+        case "skip-end":
+          this.skipToEnd();
+          break;
+        case "loop":
+          this.toggleLoop();
+          break;
+        case "speed":
+          this.cycleSpeed();
+          break;
+        case "collapse":
+          this.toggleCollapse();
+          break;
+      }
+    }), this.scrubArea.addEventListener("mousedown", (t) => this.startScrub(t)), this.shadow.querySelector(".gtv-ruler").addEventListener("mousedown", (t) => this.startScrub(t)), document.addEventListener("mousemove", (t) => this.onScrub(t)), document.addEventListener("mouseup", () => this.endScrub()), document.addEventListener("keydown", (t) => {
+      t.target === document.body && t.code === "Space" && (t.preventDefault(), this.togglePlay());
+    });
+  }
+  startScrub(t) {
+    this.timeline && (this.isDragging = !0, this.scrubToPosition(t));
+  }
+  onScrub(t) {
+    !this.isDragging || !this.timeline || this.scrubToPosition(t);
+  }
+  endScrub() {
+    this.isDragging = !1;
+  }
+  scrubToPosition(t) {
+    if (!this.timeline || !this.timelineData) return;
+    const i = this.rulerInner.getBoundingClientRect(), n = Math.max(0, Math.min(t.clientX - i.left, i.width)) / i.width;
+    this.timeline.progress(n), this.timeline.pause(), this.updatePlayState();
+  }
+  togglePlay() {
+    this.timeline && (this.timeline.paused() || this.timeline.progress() === 1 ? this.timeline.progress() === 1 ? this.timeline.restart() : this.timeline.play() : this.timeline.pause(), this.updatePlayState());
+  }
+  skipToStart() {
+    this.timeline && (this.timeline.progress(0), this.timeline.pause(), this.updatePlayState());
+  }
+  skipToEnd() {
+    this.timeline && (this.timeline.progress(1), this.timeline.pause(), this.updatePlayState());
+  }
+  toggleLoop() {
+    this.timeline && (this.isLooping = !this.isLooping, this.timeline.repeat(this.isLooping ? -1 : 0), this.loopBtn.classList.toggle("active", this.isLooping));
+  }
+  cycleSpeed() {
+    if (!this.timeline) return;
+    this.speedIndex = (this.speedIndex + 1) % b.length;
+    const t = b[this.speedIndex];
+    this.timeline.timeScale(t), this.speedBtn.textContent = `${t}x`;
+  }
+  toggleCollapse() {
+    this.collapsed = !this.collapsed, this.container.classList.toggle("collapsed", this.collapsed);
+    const t = this.shadow.querySelector('[data-action="collapse"]');
+    t.innerHTML = this.collapsed ? '<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>' : '<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>';
+  }
+  updatePlayState() {
+    if (!this.timeline) return;
+    this.isPlaying = !this.timeline.paused() && this.timeline.progress() < 1;
+    const t = this.playBtn.querySelector(".play-icon"), i = this.playBtn.querySelector(".pause-icon");
+    t.style.display = this.isPlaying ? "none" : "block", i.style.display = this.isPlaying ? "block" : "none";
+  }
+  onTimelineUpdate() {
+    this.updatePlayhead(), this.updateTimeDisplay(), this.updateActiveTracks(), this.updatePlayState();
+  }
+  updatePlayhead() {
+    if (!this.timeline || !this.timelineData) return;
+    const i = `${this.timeline.progress() * 100}%`;
+    this.playhead.style.left = i;
+    const r = this.tracksScroll.querySelector(".gtv-playhead-container");
+    r && (r.style.left = i);
+  }
+  updateTimeDisplay() {
+    if (!this.timeline || !this.timelineData) return;
+    const t = this.timeline.time(), i = this.timelineData.duration, r = this.timeDisplay.querySelector(".gtv-time-current"), n = this.timeDisplay.querySelector(".gtv-time-total");
+    r.textContent = c(t), n.textContent = ` / ${c(i)}`;
+  }
+  updateActiveTracks() {
+    if (!this.timeline || !this.timelineData) return;
+    const t = this.timeline.time();
+    this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((r, n) => {
+      const l = this.timelineData.tweens[n], o = t >= l.startTime && t <= l.endTime;
+      r.classList.toggle("is-active", o);
+    });
+  }
+  renderTracks() {
+    if (!this.timelineData) return;
+    const { duration: t, tweens: i } = this.timelineData, r = this.shadow.querySelector(".gtv-empty");
+    r.style.display = i.length > 0 ? "none" : "flex", this.renderRuler(t);
+    const n = i.map((d) => this.renderTrack(d, t)).join(""), l = this.tracksScroll.querySelector(".gtv-scrub-area"), o = this.tracksScroll.querySelector(".gtv-playhead-container");
+    this.tracksScroll.innerHTML = n, this.tracksScroll.prepend(l), this.tracksScroll.appendChild(o), this.scrubArea = l;
+  }
+  renderRuler(t) {
+    const i = [], r = this.calculateInterval(t);
+    for (let n = 0; n <= t; n += r) {
+      const l = n / t * 100;
+      i.push(`
+        <div class="gtv-ruler-marker" style="left: ${l}%;">
+          <div class="gtv-ruler-marker-line"></div>
+          <span class="gtv-ruler-marker-label">${c(n, !1)}s</span>
+        </div>
+      `);
+    }
+    this.rulerInner.innerHTML = i.join("");
+  }
+  calculateInterval(t) {
+    return t <= 1 ? 0.25 : t <= 3 ? 0.5 : t <= 10 ? 1 : t <= 30 ? 5 : 10;
+  }
+  renderTrack(t, i) {
+    const r = t.startTime / i * 100, n = t.duration / i * 100, l = L[t.colorIndex];
+    return `
+      <div class="gtv-track">
+        <div class="gtv-track-bar"
+             style="left: ${r}%; width: ${n}%; background: ${l};"
+             title="${t.label} (${c(t.startTime)}s - ${c(t.endTime)}s)">
+          ${t.label}
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("gsap-timeline-viewer", P);
+class D {
+  constructor(e) {
+    s(this, "element");
+    this.element = document.createElement("gsap-timeline-viewer"), e.height && this.element.style.setProperty("--viewer-height", `${e.height}px`), e.timeline && setTimeout(() => {
+      this.element.setTimeline(e.timeline);
+    }, 0);
+  }
+  attach(e = document.body) {
+    e.appendChild(this.element);
+  }
+  detach() {
+    this.element.remove();
+  }
+  setTimeline(e) {
+    this.element.setTimeline(e);
+  }
+  get htmlElement() {
+    return this.element;
+  }
+}
+export {
+  D as TimelineViewer,
+  P as TimelineViewerElement
+};

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

@@ -0,0 +1,72 @@
+(function(l,n){typeof exports=="object"&&typeof module<"u"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(l=typeof globalThis<"u"?globalThis:l||self,n(l.GSAPTimelineViewer={}))})(this,function(l){"use strict";var C=Object.defineProperty;var D=(l,n,h)=>n in l?C(l,n,{enumerable:!0,configurable:!0,writable:!0,value:h}):l[n]=h;var s=(l,n,h)=>D(l,typeof n!="symbol"?n+"":n,h);let n=0;function h(o){if(!o||o.length===0)return"Unknown";const i=o[0];return i.id?`#${i.id}`:i.classList&&i.classList.length>0?`.${i.classList[0]}`:i.tagName?i.tagName.toLowerCase():"element"}function k(o){const i=["ease","duration","delay","onComplete","onStart","onUpdate","onCompleteParams","onStartParams","onUpdateParams","repeat","repeatDelay","yoyo","stagger","overwrite","immediateRender","lazy","autoAlpha","id","paused","reversed","startAt"];return Object.keys(o).filter(t=>!i.includes(t))}function S(o){const i=[];return o.getChildren(!0,!0,!1).forEach((e,a)=>{if(!("targets"in e))return;const r=e,c=r.targets(),d=r.vars||{},p=k(d);let v="";if(d.id&&typeof d.id=="string")v=d.id;else{const y=h(c),x=p.slice(0,2).join(", ");v=x?`${y} (${x})`:y}const f=e.startTime(),b=e.duration();i.push({id:`tween-${++n}`,label:v,startTime:f,endTime:f+b,duration:b,targets:h(c),properties:p,colorIndex:a%6})}),{duration:o.duration(),tweens:i}}function w(){n=0}function g(o,i=!0){const t=Math.abs(o);return i?t.toFixed(2):t.toFixed(0)}const T=":host{--gtv-bg: #1a1a1a;--gtv-bg-secondary: #252525;--gtv-border: #333;--gtv-text: #e0e0e0;--gtv-text-muted: #888;--gtv-accent: #4a9eff;--gtv-playhead: #4a9eff;--gtv-ruler-bg: #1f1f1f;--gtv-track-height: 28px;--gtv-controls-height: 40px;--gtv-ruler-height: 24px;--gtv-track-1: #3b82f6;--gtv-track-2: #f59e0b;--gtv-track-3: #ec4899;--gtv-track-4: #10b981;--gtv-track-5: #8b5cf6;--gtv-track-6: #ef4444}*{box-sizing:border-box;margin:0;padding:0}.gtv-container{position:fixed;bottom:0;left:0;right:0;background:var(--gtv-bg);border-top:1px solid var(--gtv-border);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;color:var(--gtv-text);z-index:999999;display:flex;flex-direction:column}.gtv-container.collapsed{height:auto!important}.gtv-container.collapsed .gtv-timeline-area{display:none}.gtv-controls{display:flex;align-items:center;justify-content:space-between;height:var(--gtv-controls-height);padding:0 12px;background:var(--gtv-bg-secondary);border-bottom:1px solid var(--gtv-border);gap:16px}.gtv-controls-left,.gtv-controls-center,.gtv-controls-right{display:flex;align-items:center;gap:8px}.gtv-controls-center{flex:0 0 auto}.gtv-time-display{font-variant-numeric:tabular-nums;min-width:100px;text-align:center}.gtv-time-current{color:var(--gtv-text)}.gtv-time-total{color:var(--gtv-text-muted)}.gtv-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:none;border-radius:4px;color:var(--gtv-text);cursor:pointer;transition:background .15s}.gtv-btn:hover{background:#ffffff1a}.gtv-btn:active{background:#ffffff26}.gtv-btn.active{color:var(--gtv-accent)}.gtv-btn svg{width:16px;height:16px;fill:currentColor}.gtv-btn-play svg{width:20px;height:20px}.gtv-speed-btn{width:auto;padding:0 8px;font-size:11px;font-weight:500}.gtv-collapse-btn{margin-left:auto}.gtv-timeline-area{display:flex;flex-direction:column;overflow:hidden;flex:1}.gtv-ruler{position:relative;height:var(--gtv-ruler-height);background:var(--gtv-ruler-bg);border-bottom:1px solid var(--gtv-border);overflow:hidden;flex-shrink:0}.gtv-ruler-inner{position:relative;height:100%}.gtv-ruler-marker{position:absolute;top:0;height:100%;display:flex;flex-direction:column;align-items:center}.gtv-ruler-marker-line{width:1px;height:6px;background:var(--gtv-text-muted)}.gtv-ruler-marker-label{font-size:10px;color:var(--gtv-text-muted);margin-top:2px}.gtv-tracks-container{position:relative;overflow-y:auto;overflow-x:hidden;flex:1}.gtv-tracks-scroll{position:relative;min-height:100%}.gtv-track{position:relative;height:var(--gtv-track-height);border-bottom:1px solid var(--gtv-border)}.gtv-track-bar{position:absolute;top:4px;height:calc(var(--gtv-track-height) - 8px);border-radius:4px;display:flex;align-items:center;padding:0 8px;font-size:11px;font-weight:500;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;transition:filter .15s}.gtv-track-bar:hover{filter:brightness(1.1)}.gtv-track-bar.is-active{box-shadow:0 0 0 2px var(--gtv-accent)}.gtv-playhead-container{position:absolute;top:0;bottom:0;width:1px;pointer-events:none;z-index:10}.gtv-playhead-head{position:absolute;top:0;left:-5px;width:11px;height:11px;background:var(--gtv-playhead);clip-path:polygon(50% 100%,0 0,100% 0)}.gtv-playhead-line{position:absolute;top:11px;bottom:0;left:0;width:1px;background:var(--gtv-playhead)}.gtv-scrub-area{position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer}.gtv-empty{display:flex;align-items:center;justify-content:center;padding:24px;color:var(--gtv-text-muted)}",L=["var(--gtv-track-1)","var(--gtv-track-2)","var(--gtv-track-3)","var(--gtv-track-4)","var(--gtv-track-5)","var(--gtv-track-6)"],u=[.25,.5,1,2,4];class m extends HTMLElement{constructor(){super();s(this,"shadow");s(this,"timeline",null);s(this,"timelineData",null);s(this,"isPlaying",!1);s(this,"isLooping",!1);s(this,"speedIndex",2);s(this,"collapsed",!1);s(this,"height",200);s(this,"isDragging",!1);s(this,"container");s(this,"playBtn");s(this,"loopBtn");s(this,"speedBtn");s(this,"timeDisplay");s(this,"rulerInner");s(this,"tracksScroll");s(this,"playhead");s(this,"scrubArea");this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.setupEventListeners()}disconnectedCallback(){this.detachTimeline()}setTimeline(t){this.detachTimeline(),this.timeline=t,w(),this.timelineData=S(t),t.eventCallback("onUpdate",()=>this.onTimelineUpdate()),this.renderTracks(),this.updatePlayhead(),this.updateTimeDisplay(),this.updatePlayState()}detachTimeline(){this.timeline&&(this.timeline.eventCallback("onUpdate",null),this.timeline=null,this.timelineData=null)}render(){this.shadow.innerHTML=`
+      <style>${T}</style>
+      <div class="gtv-container ${this.collapsed?"collapsed":""}" style="height: ${this.height}px;">
+        <!-- Controls Bar -->
+        <div class="gtv-controls">
+          <div class="gtv-controls-left">
+            <button class="gtv-btn" data-action="skip-start" title="Skip to start">
+              <svg viewBox="0 0 24 24"><path d="M6 6h2v12H6V6zm3.5 6l8.5 6V6l-8.5 6z"/></svg>
+            </button>
+            <button class="gtv-btn gtv-btn-play" data-action="play" title="Play/Pause">
+              <svg class="play-icon" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+              <svg class="pause-icon" viewBox="0 0 24 24" style="display: none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+            </button>
+            <button class="gtv-btn" data-action="skip-end" title="Skip to end">
+              <svg viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zm2 0V6l6.5 6L8 18zm8-12v12h2V6h-2z"/></svg>
+            </button>
+          </div>
+
+          <div class="gtv-controls-center">
+            <button class="gtv-btn" data-action="loop" title="Loop">
+              <svg viewBox="0 0 24 24"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
+            </button>
+            <span class="gtv-time-display">
+              <span class="gtv-time-current">0.00</span>
+              <span class="gtv-time-total"> / 0.00</span>
+            </span>
+            <button class="gtv-btn gtv-speed-btn" data-action="speed" title="Playback speed">1x</button>
+          </div>
+
+          <div class="gtv-controls-right">
+            <button class="gtv-btn gtv-collapse-btn" data-action="collapse" title="Collapse/Expand">
+              <svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Timeline Area -->
+        <div class="gtv-timeline-area">
+          <!-- Ruler -->
+          <div class="gtv-ruler">
+            <div class="gtv-ruler-inner"></div>
+            <div class="gtv-playhead-container">
+              <div class="gtv-playhead-head"></div>
+            </div>
+          </div>
+
+          <!-- Tracks -->
+          <div class="gtv-tracks-container">
+            <div class="gtv-tracks-scroll">
+              <div class="gtv-scrub-area"></div>
+              <div class="gtv-playhead-container">
+                <div class="gtv-playhead-line"></div>
+              </div>
+            </div>
+            <div class="gtv-empty">No timeline attached. Call setTimeline() to visualize a GSAP timeline.</div>
+          </div>
+        </div>
+      </div>
+    `,this.container=this.shadow.querySelector(".gtv-container"),this.playBtn=this.shadow.querySelector('[data-action="play"]'),this.loopBtn=this.shadow.querySelector('[data-action="loop"]'),this.speedBtn=this.shadow.querySelector('[data-action="speed"]'),this.timeDisplay=this.shadow.querySelector(".gtv-time-display"),this.rulerInner=this.shadow.querySelector(".gtv-ruler-inner"),this.tracksScroll=this.shadow.querySelector(".gtv-tracks-scroll"),this.playhead=this.shadow.querySelector(".gtv-ruler .gtv-playhead-container"),this.scrubArea=this.shadow.querySelector(".gtv-scrub-area")}setupEventListeners(){this.shadow.addEventListener("click",t=>{const a=t.target.closest("[data-action]");if(!a)return;switch(a.dataset.action){case"play":this.togglePlay();break;case"skip-start":this.skipToStart();break;case"skip-end":this.skipToEnd();break;case"loop":this.toggleLoop();break;case"speed":this.cycleSpeed();break;case"collapse":this.toggleCollapse();break}}),this.scrubArea.addEventListener("mousedown",t=>this.startScrub(t)),this.shadow.querySelector(".gtv-ruler").addEventListener("mousedown",t=>this.startScrub(t)),document.addEventListener("mousemove",t=>this.onScrub(t)),document.addEventListener("mouseup",()=>this.endScrub()),document.addEventListener("keydown",t=>{t.target===document.body&&t.code==="Space"&&(t.preventDefault(),this.togglePlay())})}startScrub(t){this.timeline&&(this.isDragging=!0,this.scrubToPosition(t))}onScrub(t){!this.isDragging||!this.timeline||this.scrubToPosition(t)}endScrub(){this.isDragging=!1}scrubToPosition(t){if(!this.timeline||!this.timelineData)return;const e=this.rulerInner.getBoundingClientRect(),r=Math.max(0,Math.min(t.clientX-e.left,e.width))/e.width;this.timeline.progress(r),this.timeline.pause(),this.updatePlayState()}togglePlay(){this.timeline&&(this.timeline.paused()||this.timeline.progress()===1?this.timeline.progress()===1?this.timeline.restart():this.timeline.play():this.timeline.pause(),this.updatePlayState())}skipToStart(){this.timeline&&(this.timeline.progress(0),this.timeline.pause(),this.updatePlayState())}skipToEnd(){this.timeline&&(this.timeline.progress(1),this.timeline.pause(),this.updatePlayState())}toggleLoop(){this.timeline&&(this.isLooping=!this.isLooping,this.timeline.repeat(this.isLooping?-1:0),this.loopBtn.classList.toggle("active",this.isLooping))}cycleSpeed(){if(!this.timeline)return;this.speedIndex=(this.speedIndex+1)%u.length;const t=u[this.speedIndex];this.timeline.timeScale(t),this.speedBtn.textContent=`${t}x`}toggleCollapse(){this.collapsed=!this.collapsed,this.container.classList.toggle("collapsed",this.collapsed);const t=this.shadow.querySelector('[data-action="collapse"]');t.innerHTML=this.collapsed?'<svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>':'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>'}updatePlayState(){if(!this.timeline)return;this.isPlaying=!this.timeline.paused()&&this.timeline.progress()<1;const t=this.playBtn.querySelector(".play-icon"),e=this.playBtn.querySelector(".pause-icon");t.style.display=this.isPlaying?"none":"block",e.style.display=this.isPlaying?"block":"none"}onTimelineUpdate(){this.updatePlayhead(),this.updateTimeDisplay(),this.updateActiveTracks(),this.updatePlayState()}updatePlayhead(){if(!this.timeline||!this.timelineData)return;const e=`${this.timeline.progress()*100}%`;this.playhead.style.left=e;const a=this.tracksScroll.querySelector(".gtv-playhead-container");a&&(a.style.left=e)}updateTimeDisplay(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time(),e=this.timelineData.duration,a=this.timeDisplay.querySelector(".gtv-time-current"),r=this.timeDisplay.querySelector(".gtv-time-total");a.textContent=g(t),r.textContent=` / ${g(e)}`}updateActiveTracks(){if(!this.timeline||!this.timelineData)return;const t=this.timeline.time();this.tracksScroll.querySelectorAll(".gtv-track-bar").forEach((a,r)=>{const c=this.timelineData.tweens[r],d=t>=c.startTime&&t<=c.endTime;a.classList.toggle("is-active",d)})}renderTracks(){if(!this.timelineData)return;const{duration:t,tweens:e}=this.timelineData,a=this.shadow.querySelector(".gtv-empty");a.style.display=e.length>0?"none":"flex",this.renderRuler(t);const r=e.map(p=>this.renderTrack(p,t)).join(""),c=this.tracksScroll.querySelector(".gtv-scrub-area"),d=this.tracksScroll.querySelector(".gtv-playhead-container");this.tracksScroll.innerHTML=r,this.tracksScroll.prepend(c),this.tracksScroll.appendChild(d),this.scrubArea=c}renderRuler(t){const e=[],a=this.calculateInterval(t);for(let r=0;r<=t;r+=a){const c=r/t*100;e.push(`
+        <div class="gtv-ruler-marker" style="left: ${c}%;">
+          <div class="gtv-ruler-marker-line"></div>
+          <span class="gtv-ruler-marker-label">${g(r,!1)}s</span>
+        </div>
+      `)}this.rulerInner.innerHTML=e.join("")}calculateInterval(t){return t<=1?.25:t<=3?.5:t<=10?1:t<=30?5:10}renderTrack(t,e){const a=t.startTime/e*100,r=t.duration/e*100,c=L[t.colorIndex];return`
+      <div class="gtv-track">
+        <div class="gtv-track-bar"
+             style="left: ${a}%; width: ${r}%; background: ${c};"
+             title="${t.label} (${g(t.startTime)}s - ${g(t.endTime)}s)">
+          ${t.label}
+        </div>
+      </div>
+    `}}customElements.define("gsap-timeline-viewer",m);class P{constructor(i){s(this,"element");this.element=document.createElement("gsap-timeline-viewer"),i.height&&this.element.style.setProperty("--viewer-height",`${i.height}px`),i.timeline&&setTimeout(()=>{this.element.setTimeline(i.timeline)},0)}attach(i=document.body){i.appendChild(this.element)}detach(){this.element.remove()}setTimeline(i){this.element.setTimeline(i)}get htmlElement(){return this.element}}l.TimelineViewer=P,l.TimelineViewerElement=m,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -0,0 +1,63 @@
+export declare class TimelineViewer {
+    private element;
+    constructor(config: TimelineViewerConfig);
+    attach(container?: HTMLElement): void;
+    detach(): void;
+    setTimeline(timeline: gsap.core.Timeline): void;
+    get htmlElement(): TimelineViewerElement;
+}
+
+export declare interface TimelineViewerConfig {
+    timeline: gsap.core.Timeline;
+    height?: number;
+    collapsed?: boolean;
+}
+
+export declare class TimelineViewerElement extends HTMLElement {
+    private shadow;
+    private timeline;
+    private timelineData;
+    private isPlaying;
+    private isLooping;
+    private speedIndex;
+    private collapsed;
+    private height;
+    private isDragging;
+    private container;
+    private playBtn;
+    private loopBtn;
+    private speedBtn;
+    private timeDisplay;
+    private rulerInner;
+    private tracksScroll;
+    private playhead;
+    private scrubArea;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    setTimeline(timeline: gsap.core.Timeline): void;
+    private detachTimeline;
+    private render;
+    private setupEventListeners;
+    private startScrub;
+    private onScrub;
+    private endScrub;
+    private scrubToPosition;
+    private togglePlay;
+    private skipToStart;
+    private skipToEnd;
+    private toggleLoop;
+    private cycleSpeed;
+    private toggleCollapse;
+    private updatePlayState;
+    private onTimelineUpdate;
+    private updatePlayhead;
+    private updateTimeDisplay;
+    private updateActiveTracks;
+    private renderTracks;
+    private renderRuler;
+    private calculateInterval;
+    private renderTrack;
+}
+
+export { }

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "gsap-timeline-viewer",
+  "version": "0.1.0",
+  "description": "A lightweight, framework-agnostic timeline viewer for GSAP animations",
+  "type": "module",
+  "main": "./dist/gsap-timeline-viewer.umd.cjs",
+  "module": "./dist/gsap-timeline-viewer.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/gsap-timeline-viewer.js",
+      "require": "./dist/gsap-timeline-viewer.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "gsap",
+    "timeline",
+    "animation",
+    "devtools",
+    "viewer",
+    "debug"
+  ],
+  "author": "reboiedo",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reboiedo/gsap-timeline-viewer.git"
+  },
+  "homepage": "https://github.com/reboiedo/gsap-timeline-viewer#readme",
+  "bugs": {
+    "url": "https://github.com/reboiedo/gsap-timeline-viewer/issues"
+  },
+  "peerDependencies": {
+    "gsap": "^3.0.0"
+  },
+  "devDependencies": {
+    "gsap": "^3.12.5",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-dts": "^3.7.0"
+  }
+}