hyperframes 0.7.17 → 0.7.19

package/dist/hyperframes-player.global.js

@@ -1,4 +1,4 @@
-"use strict";var HyperframesPlayer=(()=>{var Y=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var Fe=Object.getOwnPropertyNames;var Ue=Object.prototype.hasOwnProperty;var Ve=(r,e)=>{for(var t in e)Y(r,t,{get:e[t],enumerable:!0})},je=(r,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of Fe(e))!Ue.call(r,n)&&n!==t&&Y(r,n,{get:()=>e[n],enumerable:!(i=Ne(e,n))||i.enumerable});return r};var ze=r=>je(Y({},"__esModule",{value:!0}),r);var nt={};Ve(nt,{HyperframesPlayer:()=>X,SPEED_PRESETS:()=>Z,formatSpeed:()=>R,formatTime:()=>V});function ve(r){return r.hasRuntime||r.runtimeInjected?!1:!!(r.hasNestedCompositions||r.hasTimelines&&r.attempts>=5)}function L(r){return typeof r=="object"&&r!==null}function ge(r){return L(r)&&typeof r.getDuration=="function"}function _e(r){return L(r)&&typeof r.duration=="function"&&typeof r.time=="function"&&typeof r.seek=="function"&&typeof r.play=="function"&&typeof r.pause=="function"}var $e="https://cdn.jsdelivr.net/npm/@hyperframes/core/dist/hyperframe.runtime.iife.js";function P(r){if(r===null)return null;let e=Number.parseInt(r,10);return Number.isFinite(e)&&e>0?e:null}function We(r){let e=r?.querySelector("[data-composition-id][data-width][data-height]")??r?.querySelector("[data-width][data-height]");if(!e)return null;let t=P(e.getAttribute("data-width")),i=P(e.getAttribute("data-height"));return t!==null&&i!==null?{width:t,height:i}:null}var U=class{constructor(e,t){this._iframe=e;this._callbacks=t}_iframe;_callbacks;_interval=null;_runtimeInjected=!1;get runtimeInjected(){return this._runtimeInjected}start(){this.stop(),this._runtimeInjected=!1;let e=0;this._interval=setInterval(()=>{e++;try{let t=this._iframe.contentWindow;if(!t)return;let i=!!(t.__hf||t.__player),n=!!(t.__timelines&&Object.keys(t.__timelines).length>0),a=!!this._iframe.contentDocument?.querySelector("[data-composition-src]");if(ve({hasRuntime:i,hasTimelines:n,hasNestedCompositions:a,runtimeInjected:this._runtimeInjected,attempts:e})){this._injectRuntime();return}if(this._runtimeInjected&&!i)return;let s=this._resolvePlaybackDurationAdapter(t);if(s&&s.getDuration()>0){this.stop();let d=We(this._iframe.contentDocument);this._callbacks.onReady({duration:s.getDuration(),adapter:s,compositionSize:d});return}}catch{}e>=40&&(this.stop(),this._callbacks.onError("Composition timeline not found after 8s"))},200)}stop(){this._interval!==null&&(clearInterval(this._interval),this._interval=null)}resolveDirectTimelineAdapter(){try{let e=this._iframe.contentWindow;return e?this._resolveDirectTimelineAdapterFromWindow(e):null}catch{return null}}resolveDirectTimelineAdapterFromWindow(e){return this._resolveDirectTimelineAdapterFromWindow(e)}hasRuntimeBridge(e){return Reflect.get(e,"__hf")!==void 0||L(Reflect.get(e,"__player"))}_injectRuntime(){this._runtimeInjected=!0;try{let e=this._iframe.contentDocument;if(!e)return;let t=e.createElement("script");t.src=$e,(e.head||e.documentElement).appendChild(t),this._callbacks.onRuntimeInjected?.()}catch{}}_resolveDirectTimelineAdapterFromWindow(e){if(this.hasRuntimeBridge(e))return null;let t=Reflect.get(e,"__timelines");if(!L(t))return null;let i=Object.keys(t);if(i.length===0)return null;let n=this._iframe.contentDocument?.querySelector("[data-composition-id]")?.getAttribute("data-composition-id"),a=n&&n in t?n:i[i.length-1],s=t[a];return _e(s)?s:null}_resolvePlaybackDurationAdapter(e){let t=Reflect.get(e,"__player");if(ge(t))return{kind:"runtime",getDuration:()=>t.getDuration()};let i=this._resolveDirectTimelineAdapterFromWindow(e);return i?{kind:"direct-timeline",timeline:i,getDuration:()=>i.duration()}:null}};var ye=`
+"use strict";var HyperframesPlayer=(()=>{var Y=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var Fe=Object.getOwnPropertyNames;var Ue=Object.prototype.hasOwnProperty;var Ve=(r,e)=>{for(var t in e)Y(r,t,{get:e[t],enumerable:!0})},je=(r,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of Fe(e))!Ue.call(r,n)&&n!==t&&Y(r,n,{get:()=>e[n],enumerable:!(i=He(e,n))||i.enumerable});return r};var ze=r=>je(Y({},"__esModule",{value:!0}),r);var nt={};Ve(nt,{HyperframesPlayer:()=>X,SPEED_PRESETS:()=>J,formatSpeed:()=>R,formatTime:()=>V});function be(r){return r.hasRuntime||r.runtimeInjected?!1:!!(r.hasNestedCompositions||r.hasTimelines&&r.attempts>=5)}function L(r){return typeof r=="object"&&r!==null}function ve(r){return L(r)&&typeof r.getDuration=="function"}function ge(r){return L(r)&&typeof r.duration=="function"&&typeof r.time=="function"&&typeof r.seek=="function"&&typeof r.play=="function"&&typeof r.pause=="function"}var $e="https://cdn.jsdelivr.net/npm/@hyperframes/core/dist/hyperframe.runtime.iife.js";function P(r){if(r===null)return null;let e=Number.parseInt(r,10);return Number.isFinite(e)&&e>0?e:null}function We(r){let e=r?.querySelector("[data-composition-id][data-width][data-height]")??r?.querySelector("[data-width][data-height]");if(!e)return null;let t=P(e.getAttribute("data-width")),i=P(e.getAttribute("data-height"));return t!==null&&i!==null?{width:t,height:i}:null}var U=class{constructor(e,t){this._iframe=e;this._callbacks=t}_iframe;_callbacks;_interval=null;_runtimeInjected=!1;get runtimeInjected(){return this._runtimeInjected}start(){this.stop(),this._runtimeInjected=!1;let e=0;this._interval=setInterval(()=>{e++;try{let t=this._iframe.contentWindow;if(!t)return;let i=!!(t.__hf||t.__player),n=!!(t.__timelines&&Object.keys(t.__timelines).length>0),a=!!this._iframe.contentDocument?.querySelector("[data-composition-src]");if(be({hasRuntime:i,hasTimelines:n,hasNestedCompositions:a,runtimeInjected:this._runtimeInjected,attempts:e})){this._injectRuntime();return}if(this._runtimeInjected&&!i)return;let s=this._resolvePlaybackDurationAdapter(t);if(s&&s.getDuration()>0){this.stop();let d=We(this._iframe.contentDocument);this._callbacks.onReady({duration:s.getDuration(),adapter:s,compositionSize:d});return}}catch{}e>=40&&(this.stop(),this._callbacks.onError("Composition timeline not found after 8s"))},200)}stop(){this._interval!==null&&(clearInterval(this._interval),this._interval=null)}resolveDirectTimelineAdapter(){try{let e=this._iframe.contentWindow;return e?this._resolveDirectTimelineAdapterFromWindow(e):null}catch{return null}}resolveDirectTimelineAdapterFromWindow(e){return this._resolveDirectTimelineAdapterFromWindow(e)}hasRuntimeBridge(e){return Reflect.get(e,"__hf")!==void 0||L(Reflect.get(e,"__player"))}_injectRuntime(){this._runtimeInjected=!0;try{let e=this._iframe.contentDocument;if(!e)return;let t=e.createElement("script");t.src=$e,(e.head||e.documentElement).appendChild(t),this._callbacks.onRuntimeInjected?.()}catch{}}_resolveDirectTimelineAdapterFromWindow(e){if(this.hasRuntimeBridge(e))return null;let t=Reflect.get(e,"__timelines");if(!L(t))return null;let i=Object.keys(t);if(i.length===0)return null;let n=this._iframe.contentDocument?.querySelector("[data-composition-id]")?.getAttribute("data-composition-id"),a=n&&n in t?n:i[i.length-1],s=t[a];return ge(s)?s:null}_resolvePlaybackDurationAdapter(e){let t=Reflect.get(e,"__player");if(ve(t))return{kind:"runtime",getDuration:()=>t.getDuration()};let i=this._resolveDirectTimelineAdapterFromWindow(e);return i?{kind:"direct-timeline",timeline:i,getDuration:()=>i.duration()}:null}};var ye=`
   :host {
     display: block;
     position: relative;
@@ -229,6 +229,7 @@
   }
 
   .hfp-play-btn {
+    position: relative;
     background: none;
     border: none;
     color: var(--hfp-color, #fff);
@@ -247,6 +248,39 @@
     opacity: 0.8;
   }
 
+  /* Stacked play/pause glyphs that crossfade-morph on toggle (rotate + scale). */
+  .hfp-play-btn .hfp-ico {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      opacity 200ms ease,
+      transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .hfp-play-btn .hfp-ico-play {
+    opacity: 1;
+    transform: rotate(0) scale(1);
+  }
+  .hfp-play-btn .hfp-ico-pause {
+    opacity: 0;
+    transform: rotate(-90deg) scale(0.4);
+  }
+  .hfp-play-btn.hfp-playing .hfp-ico-play {
+    opacity: 0;
+    transform: rotate(90deg) scale(0.4);
+  }
+  .hfp-play-btn.hfp-playing .hfp-ico-pause {
+    opacity: 1;
+    transform: rotate(0) scale(1);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .hfp-play-btn .hfp-ico {
+      transition-duration: 0ms;
+      transform: none;
+    }
+  }
+
   .hfp-play-btn svg,
   .hfp-play-btn svg * {
     pointer-events: none;
@@ -422,5 +456,5 @@
     background: var(--hfp-accent, #fff);
     pointer-events: none;
   }
-`,Q='<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><polygon points="4,2 16,9 4,16"/></svg>',Ee='<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><rect x="3" y="2" width="4" height="14"/><rect x="11" y="2" width="4" height="14"/></svg>',J='<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3z"/><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/><path d="M14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>',K='<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3z"/><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>',Se='<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3z"/><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z" opacity="0.3"/><line x1="18" y1="7" x2="14" y2="17" stroke="currentColor" stroke-width="2"/></svg>';var Z=[.25,.5,1,1.5,2,4];function R(r){return Number.isInteger(r)?`${r}x`:`${r}x`}function V(r){if(!Number.isFinite(r)||r<0)return"0:00";let e=Math.floor(r),t=Math.floor(e/60),i=e%60;return`${t}:${i.toString().padStart(2,"0")}`}function Te(r,e,t={}){let i=t.speedPresets??Z,n=document.createElement("div");n.className="hfp-controls",n.addEventListener("click",o=>{o.stopPropagation()});let a=document.createElement("button");a.className="hfp-play-btn",a.type="button",a.innerHTML=Q,a.setAttribute("aria-label","Play");let s=document.createElement("div");s.className="hfp-scrubber";let d=document.createElement("div");d.className="hfp-progress",d.style.width="0%",s.appendChild(d);let u=document.createElement("span");u.className="hfp-time",u.textContent="0:00 / 0:00";let c=document.createElement("div");c.className="hfp-speed-wrap";let p=document.createElement("button");p.className="hfp-speed-btn",p.type="button",p.textContent="1x",p.setAttribute("aria-label","Playback speed");let b=document.createElement("div");b.className="hfp-speed-menu",b.setAttribute("role","menu");for(let o of i){let l=document.createElement("button");l.className="hfp-speed-option",l.type="button",l.setAttribute("role","menuitem"),l.dataset.speed=String(o),l.textContent=R(o),o===1&&l.classList.add("hfp-active"),b.appendChild(l)}c.appendChild(b),c.appendChild(p);let g=document.createElement("div");g.className="hfp-volume-wrap";let m=document.createElement("button");m.className="hfp-mute-btn",m.type="button",m.innerHTML=J,m.setAttribute("aria-label","Mute");let y=document.createElement("div");y.className="hfp-volume-slider-wrap";let h=document.createElement("div");h.className="hfp-volume-slider",h.setAttribute("role","slider"),h.setAttribute("aria-label","Volume"),h.setAttribute("aria-valuemin","0"),h.setAttribute("aria-valuemax","100"),h.setAttribute("aria-valuenow","100"),h.tabIndex=0;let _=document.createElement("div");_.className="hfp-volume-fill",_.style.width="100%",h.appendChild(_),y.appendChild(h),g.appendChild(y),g.appendChild(m),t.audioLocked&&(g.style.display="none"),n.appendChild(a),n.appendChild(s),n.appendChild(u),n.appendChild(g),n.appendChild(c),r.appendChild(n);let D=!1,T=!1,E=1,k=null,I=i.indexOf(1);I===-1&&(I=0);let O=(o,l)=>o?Se:l===0?K:l<.5?K:J;a.addEventListener("click",o=>{o.stopPropagation(),D?e.onPause():e.onPlay()}),m.addEventListener("click",o=>{o.stopPropagation(),e.onMuteToggle()});let w=!1,H=o=>{let l=h.getBoundingClientRect(),f=Math.max(0,Math.min(1,(o-l.left)/l.width));E=f,_.style.width=`${f*100}%`,h.setAttribute("aria-valuenow",String(Math.round(f*100))),T&&f>0&&e.onMuteToggle(),m.innerHTML=O(T,f),e.onVolumeChange(f)};h.addEventListener("mousedown",o=>{o.stopPropagation(),w=!0,H(o.clientX)});let re=o=>{w&&H(o.clientX)},ne=()=>{w=!1};document.addEventListener("mousemove",re),document.addEventListener("mouseup",ne),h.addEventListener("touchstart",o=>{w=!0;let l=o.touches[0];l&&H(l.clientX)},{passive:!0});let oe=o=>{if(w){let l=o.touches[0];l&&H(l.clientX)}},ae=()=>{w=!1};document.addEventListener("touchmove",oe,{passive:!0}),document.addEventListener("touchend",ae);let se=.05;h.addEventListener("keydown",o=>{let l=E;if(o.key==="ArrowRight"||o.key==="ArrowUp")l=Math.min(1,E+se);else if(o.key==="ArrowLeft"||o.key==="ArrowDown")l=Math.max(0,E-se);else return;o.preventDefault(),o.stopPropagation(),E=l,_.style.width=`${l*100}%`,h.setAttribute("aria-valuenow",String(Math.round(l*100))),T&&l>0&&e.onMuteToggle(),m.innerHTML=O(T,l),e.onVolumeChange(l)});let le=o=>{for(let l of b.querySelectorAll(".hfp-speed-option"))l.classList.toggle("hfp-active",l.dataset.speed===String(o))};p.addEventListener("click",o=>{o.stopPropagation();let l=b.classList.toggle("hfp-open");p.setAttribute("aria-expanded",String(l))}),b.addEventListener("click",o=>{o.stopPropagation();let l=o.target.closest(".hfp-speed-option");if(!l)return;let f=parseFloat(l.dataset.speed);I=i.indexOf(f),p.textContent=R(f),le(f),b.classList.remove("hfp-open"),p.setAttribute("aria-expanded","false"),e.onSpeedChange(f)});let de=()=>{b.classList.remove("hfp-open"),p.setAttribute("aria-expanded","false")};document.addEventListener("click",de);let N=o=>{let l=s.getBoundingClientRect(),f=Math.max(0,Math.min(1,(o-l.left)/l.width));e.onSeek(f)},A=!1;s.addEventListener("mousedown",o=>{o.stopPropagation(),A=!0,N(o.clientX)});let ue=o=>{A&&N(o.clientX)},pe=()=>{A=!1};document.addEventListener("mousemove",ue),document.addEventListener("mouseup",pe),s.addEventListener("touchstart",o=>{A=!0;let l=o.touches[0];l&&N(l.clientX)},{passive:!0});let ce=o=>{if(A){let l=o.touches[0];l&&N(l.clientX)}},he=()=>{A=!1};document.addEventListener("touchmove",ce,{passive:!0}),document.addEventListener("touchend",he);let me=()=>{k&&clearTimeout(k),k=setTimeout(()=>{D&&n.classList.add("hfp-hidden")},3e3)},F=r instanceof ShadowRoot?r.host:r,fe=()=>{n.classList.remove("hfp-hidden"),me()},be=()=>{D&&n.classList.add("hfp-hidden")};return F.addEventListener("mousemove",fe),F.addEventListener("mouseleave",be),{updateTime(o,l){let f=l>0?Math.min(o,l):o,He=l>0?f/l*100:0;d.style.width=`${He}%`,u.textContent=`${V(f)} / ${V(l)}`},updatePlaying(o){D=o,a.innerHTML=o?Ee:Q,a.setAttribute("aria-label",o?"Pause":"Play"),o?me():n.classList.remove("hfp-hidden")},updateSpeed(o){let l=i.indexOf(o);l!==-1&&(I=l),p.textContent=R(o),le(o)},updateMuted(o){T=o,m.innerHTML=O(o,E),m.setAttribute("aria-label",o?"Unmute":"Mute")},updateVolume(o){E=o,_.style.width=`${o*100}%`,h.setAttribute("aria-valuenow",String(Math.round(o*100))),m.innerHTML=O(T,o)},setVolumeControlsHidden(o){g.style.display=o?"none":""},show(){n.style.display=""},hide(){n.style.display="none"},destroy(){document.removeEventListener("mousemove",ue),document.removeEventListener("mouseup",pe),document.removeEventListener("touchmove",ce),document.removeEventListener("touchend",he),document.removeEventListener("mousemove",re),document.removeEventListener("mouseup",ne),document.removeEventListener("touchmove",oe),document.removeEventListener("touchend",ae),document.removeEventListener("click",de),F.removeEventListener("mousemove",fe),F.removeEventListener("mouseleave",be),k&&clearTimeout(k),n.remove()}}}function we(r,e,t,i,n,a=!1){let s=i?i.split(",").map(Number).filter(c=>!isNaN(c)&&c>0):void 0,d={...s?{speedPresets:s}:{},audioLocked:a},u=Te(r,n,d);return u.updateMuted(e),u.updateVolume(t),u}function ee(r,e,t){return e?(t||(t=document.createElement("img"),t.className="hfp-poster",r.appendChild(t)),t.src=e,t):(t?.remove(),null)}function Ae(r){return r.composedPath().some(e=>e instanceof HTMLElement&&e.classList.contains("hfp-controls"))}var j=null;function Ce(r,e){if(typeof CSSStyleSheet<"u")try{j||(j=new CSSStyleSheet,j.replaceSync(e)),r.adoptedStyleSheets=[j];return}catch{}let t=document.createElement("style");t.textContent=e,r.appendChild(t)}function xe(){let r=document.createElement("div");r.className="hfp-container";let e=document.createElement("iframe");return e.className="hfp-iframe",e.sandbox.add("allow-scripts","allow-same-origin"),e.allow="autoplay; fullscreen",e.referrerPolicy="no-referrer",e.title="HyperFrames Composition",r.appendChild(e),{container:r,iframe:e}}function Me(r,e,t,i){let n=r.offsetWidth,a=r.offsetHeight;if(n===0||a===0)return;let s=Math.min(n/t,a/i);e.style.width=`${t}px`,e.style.height=`${i}px`,e.style.transform=`translate(-50%, -50%) scale(${s})`}var z=class{constructor(e){this._callbacks=e}_callbacks;_raf=null;_lastUpdateMs=0;start(e,t,i,n){this.stop();let a=()=>{if(n()){this._raf=null;return}let s;try{s=e.time()}catch{this._raf=null;return}let d=i();d>0&&(s=Math.min(s,d));let u=d>0&&s>=d,c=performance.now();if((c-this._lastUpdateMs>100||u)&&(this._lastUpdateMs=c,this._callbacks.onTimeUpdate(s,d)),u){if(this._callbacks.getLoop()){this._callbacks.restart();return}try{e.pause()}catch{}this._callbacks.onPaused(),this._raf=null;return}this._raf=requestAnimationFrame(a)};this._raf=requestAnimationFrame(a)}stop(){this._raf!==null&&(cancelAnimationFrame(this._raf),this._raf=null)}get isRunning(){return this._raf!==null}};function ke(r){let e=Array.from(r.querySelectorAll("[data-composition-id]"));if(e.length===0)return r.body?[r.body]:[];let t=[];for(let i of e)Ge(i)||t.push(i);return Be(r),t}function Be(r){let e=r.body;if(!e||typeof console>"u"||typeof console.warn!="function")return;let t=e.querySelectorAll("audio[data-start], video[data-start]");if(t.length===0)return;let i=[];for(let n of t)n.closest("[data-composition-id]")||i.push(n);i.length!==0&&console.warn(`[hyperframes-player] selectMediaObserverTargets: composition hosts are present, but ${i.length} body-level timed media element(s) sit outside every [data-composition-id] subtree and will not be observed. Move them inside a composition host or the parent-frame proxy will never adopt them.`,i)}function Ge(r){let e=r.parentElement;for(;e;){if(e.hasAttribute("data-composition-id"))return!0;e=e.parentElement}return!1}function $(r){let e=r.ownerDocument?.defaultView;return e&&r instanceof e.Element?!0:r instanceof Element}function v(r){if(!$(r)||r.tagName!=="AUDIO"&&r.tagName!=="VIDEO")return!1;let e=r.ownerDocument?.defaultView;return e&&r instanceof e.HTMLMediaElement?!0:r instanceof HTMLMediaElement}var qe=.05,Xe=2,W=class{_entries=[];_mediaObserver;_playbackErrorPosted=!1;_audioOwner="runtime";_urlAudioEntry=null;_urlAudioSrc=null;_dispatchEvent;_getMuted;_getVolume;_getPlaybackRate;_getCurrentTime;_isPaused;constructor(e){this._dispatchEvent=e.dispatchEvent,this._getMuted=e.getMuted,this._getVolume=e.getVolume,this._getPlaybackRate=e.getPlaybackRate,this._getCurrentTime=e.getCurrentTime,this._isPaused=e.isPaused}get audioOwner(){return this._audioOwner}get entries(){return this._entries}resetForIframeLoad(){this._playbackErrorPosted=!1;let e=this._audioOwner==="parent";this._audioOwner="runtime",this.pauseAll(),this.teardownObserver(),e&&this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"runtime",reason:"iframe-reload"}}))}destroy(){this.teardownObserver();for(let e of this._entries)e.el.pause(),e.el.src="";this._entries=[],this._urlAudioEntry=null,this._urlAudioSrc=null}updateMuted(e){for(let t of this._entries)t.el.muted=e}updateVolume(e){for(let t of this._entries)t.el.volume=e}updatePlaybackRate(e){for(let t of this._entries)t.el.playbackRate=e}_playEntry(e){e.el.src&&e.el.play().catch(t=>this._reportPlaybackError(t))}_playEntryIfActive(e){this._refreshEntryBounds(e);let t=this._getCurrentTime()-e.start;t<0||t>=e.duration||this._playEntry(e)}_refreshEntryBounds(e){if(!e.source?.isConnected)return;let t=parseFloat(e.source.getAttribute("data-start")||"0");e.start=Number.isFinite(t)?t:0;let i=parseFloat(e.source.getAttribute("data-duration")||"");e.duration=Number.isFinite(i)&&i>0?i:Number.POSITIVE_INFINITY}_gateEntryPlayback(e,t){return t<0||t>=e.duration?(e.el.paused||e.el.pause(),e.driftSamples=0,!1):(this._audioOwner==="parent"&&!this._isPaused()&&e.el.paused&&this._playEntry(e),!0)}playAll(){for(let e of this._entries)this._playEntryIfActive(e)}pauseAll(){for(let e of this._entries)e.el.pause()}stopAdoptedMedia(){for(let e of this._entries)e.source&&e.el.pause()}seekAll(e){for(let t of this._entries){this._refreshEntryBounds(t);let i=e-t.start;i>=0&&i<t.duration&&(t.el.currentTime=i)}}mirrorTime(e,t){let i=t?.force===!0;for(let n of this._entries){this._refreshEntryBounds(n);let a=e-n.start;this._gateEntryPlayback(n,a)&&(Math.abs(n.el.currentTime-a)>qe?(n.driftSamples+=1,(i||n.driftSamples>=Xe)&&(n.el.currentTime=a,n.driftSamples=0)):n.driftSamples=0)}}promoteToParentProxy(e,t){if(this._audioOwner==="parent")return;if(this._audioOwner="parent",e)for(let n of e.querySelectorAll("video, audio"))v(n)&&(n.muted=!0);let i=this._getCurrentTime();t?t(i,{force:!0}):this.mirrorTime(i,{force:!0}),this._isPaused()||this.playAll(),this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"parent",reason:"autoplay-blocked"}}))}setupFromIframe(e){let t=e.querySelectorAll("audio[data-start], video[data-start]");for(let i of t)v(i)&&this._adoptIframeMedia(i);this._observeDynamicMedia(e)}setupFromUrl(e){if(this._urlAudioSrc===e&&this._urlAudioEntry)return;this.teardownUrlAudio();let t=this._createEntry(e,"audio",0,1/0);this._urlAudioEntry=t,this._urlAudioSrc=t?e:null,t&&this._audioOwner==="parent"&&!this._isPaused()&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),this.playAll())}teardownUrlAudio(){let e=this._urlAudioEntry;if(this._urlAudioEntry=null,this._urlAudioSrc=null,!e)return;e.el.pause(),e.el.src="";let t=this._entries.indexOf(e);t!==-1&&this._entries.splice(t,1)}teardownObserver(){this._mediaObserver?.disconnect(),this._mediaObserver=void 0}_reportPlaybackError(e){this._playbackErrorPosted||(this._playbackErrorPosted=!0,this._dispatchEvent(new CustomEvent("playbackerror",{detail:{source:"parent-proxy",error:e}})))}_createEntry(e,t,i,n,a){if(this._entries.some(c=>c.el.src===e))return null;let s=t==="video"?document.createElement("video"):new Audio;s.preload="auto",s.src=e,s.load(),s.muted=this._getMuted(),s.volume=this._getVolume();let d=this._getPlaybackRate();d!==1&&(s.playbackRate=d);let u={el:s,start:i,duration:n,driftSamples:0,source:a};return this._entries.push(u),u}_resolveIframeMediaSrc(e){let t=e.getAttribute("src")||e.querySelector("source")?.getAttribute("src");return t?new URL(t,e.ownerDocument.baseURI).href:null}_adoptIframeMedia(e){if(e.preload==="metadata"||e.preload==="none")return;let t=this._resolveIframeMediaSrc(e);if(!t)return;let i=parseFloat(e.getAttribute("data-start")||"0"),n=parseFloat(e.getAttribute("data-duration")||"Infinity"),a=e.tagName==="VIDEO"?"video":"audio",s=this._createEntry(t,a,i,n,e);s&&this._audioOwner==="parent"&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),this._isPaused()||this._playEntryIfActive(s))}_detachIframeMedia(e){let t=this._resolveIframeMediaSrc(e);if(!t)return;let i=this._entries.findIndex(a=>a.el.src===t);if(i===-1)return;let n=this._entries[i];n.el.pause(),n.el.src="",this._entries.splice(i,1)}_observeDynamicMedia(e){if(this.teardownObserver(),typeof MutationObserver>"u"||!e.body)return;let t=new MutationObserver(a=>{for(let s of a){if(s.type==="attributes"&&s.attributeName==="preload"){let d=s.target;v(d)&&d.matches("audio[data-start], video[data-start]")&&d.preload==="auto"&&this._adoptIframeMedia(d);continue}for(let d of s.addedNodes){if(!$(d))continue;let u=[];v(d)&&d.matches("audio[data-start], video[data-start]")&&u.push(d);let c=d.querySelectorAll("audio[data-start], video[data-start]");for(let p of c)v(p)&&u.push(p);for(let p of u)this._adoptIframeMedia(p)}for(let d of s.removedNodes){if(!$(d))continue;let u=[];v(d)&&d.matches("audio[data-start], video[data-start]")&&u.push(d);let c=d.querySelectorAll("audio[data-start], video[data-start]");for(let p of c)v(p)&&u.push(p);for(let p of u)this._detachIframeMedia(p)}}}),i={childList:!0,subtree:!0,attributes:!0,attributeFilter:["preload"]},n=ke(e);for(let a of n)t.observe(a,i);this._mediaObserver=t}};function Le(r,e,t,i){let n=(r.frame??0)/e,a=t.duration>0?Math.min(n,t.duration):n,s=!t.paused,d=!r.isPlaying,u=t.duration>0&&a>=t.duration&&(s||r.isPlaying);if(u&&i.getLoop())return i.media.audioOwner==="parent"&&i.media.pauseAll(),i.seek(0),i.play(),{...t,currentTime:a,paused:!1};let c={...t,currentTime:a,paused:d};i.media.audioOwner==="parent"&&(s&&d?i.media.pauseAll():!s&&!d&&i.media.playAll(),i.media.mirrorTime(a));let p=performance.now(),b=d!==t.paused;return(p-t.lastUpdateMs>100||b)&&(c.lastUpdateMs=p,i.updateControlsTime(a,t.duration),i.updateControlsPlaying(!d),i.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:a}}))),u&&(i.media.audioOwner==="parent"&&i.media.pauseAll(),c.paused=!0,i.updateControlsPlaying(!1),i.dispatchEvent(new Event("ended"))),c}var Pe=30;function Ye(r){return Array.isArray(r)?r.filter(e=>typeof e=="object"&&e!==null&&typeof e.id=="string"&&typeof e.start=="number"&&typeof e.duration=="number"):[]}function Re(r,e,t){if(r.source!==e)return;let i=r.data;if(!(!i||i.source!=="hf-preview")){if(i.type==="shader-transition-state"){let n=i.state&&typeof i.state=="object"?i.state:{};t.shaderLoader.update(n,t.getShaderLoadingMode()),t.dispatchEvent(new CustomEvent("shadertransitionstate",{detail:{compositionId:i.compositionId,state:n}}));return}if(i.type==="ready"){t.onRuntimeReady();return}if(i.type==="state"){t.setPlaybackState(Le({frame:i.frame??0,isPlaying:!!i.isPlaying},Pe,t.getPlaybackState(),t));return}if(i.type==="media-autoplay-blocked"){if(t.shouldPromoteMediaAutoplayFallback?.()===!1)return;let n=null;try{n=t.getIframeDoc()}catch{}t.media.promoteToParentProxy(n,(a,s)=>t.media.mirrorTime(a,s)),t.sendControl("set-media-output-muted",{muted:!0});return}if(i.type==="timeline"&&i.durationInFrames>0){if(Number.isFinite(i.durationInFrames)){let n=t.getPlaybackState(),a=i.durationInFrames/Pe;t.setPlaybackState({...n,duration:a}),t.updateControlsTime(n.currentTime,a),t.onRuntimeTimelineReady(a)}t.setScenes(Ye(i.scenes));return}i.type==="stage-size"&&Number.isFinite(i.width)&&i.width>0&&Number.isFinite(i.height)&&i.height>0&&t.setCompositionSize(i.width,i.height)}}var S="shader-capture-scale",C="shader-loading",Qe="__hf_shader_capture_scale",Je="__hf_shader_loading",x=["Preparing scene transitions","Sampling outgoing scene motion","Sampling incoming scene motion","Caching transition frames","Finalizing transition preview"];function te(r){if(r===null)return null;let e=Number(r);return!Number.isFinite(e)||e<=0?null:String(Math.min(1,Math.max(.25,e)))}function Ke(r){if(r===null||r.trim()==="")return"composition";let e=r.trim().toLowerCase();return e==="none"||e==="false"||e==="0"||e==="off"?"none":e==="player"||e==="true"||e==="1"||e==="on"?"player":"composition"}function De(r,e,t){t===null?r.delete(e):r.set(e,t)}function Ze(r,e,t){let i=r.indexOf("#"),n=i>=0?r.slice(0,i):r,a=i>=0?r.slice(i):"",s=n.indexOf("?"),d=s>=0?n.slice(0,s):n,u=s>=0?n.slice(s+1):"",c=new URLSearchParams(u);De(c,Qe,e),De(c,Je,t==="composition"?null:t);let p=c.toString();return`${d}${p?`?${p}`:""}${a}`}function et(r,e,t){if(e===null&&t==="composition")return r;let i=[];e!==null&&i.push(`window.__HF_SHADER_CAPTURE_SCALE=${JSON.stringify(e)};`),t!=="composition"&&i.push(`window.__HF_SHADER_LOADING=${JSON.stringify(t)};`);let n=`<script data-hyperframes-player-shader-options>${i.join("")}</script>`;return/<head\b[^>]*>/i.test(r)?r.replace(/<head\b[^>]*>/i,a=>`${a}${n}`):/<html\b[^>]*>/i.test(r)?r.replace(/<html\b[^>]*>/i,a=>`${a}${n}`):`${n}${r}`}function M(r){return Ke(r.getAttribute(C))}function Ie(r){return Number(te(r.getAttribute(S))??"1")}function B(r,e){return Ze(e,te(r.getAttribute(S)),M(r))}function G(r,e){return et(e,te(r.getAttribute(S)),M(r))}function Oe(){let r=document.createElement("div");r.className="hfp-shader-loader",r.setAttribute("role","status"),r.setAttribute("aria-live","polite"),r.setAttribute("aria-label","Preparing scene transitions"),r.setAttribute("data-hyperframes-ignore",""),r.draggable=!1;let e=m=>{m.preventDefault(),m.stopPropagation()};for(let m of["selectstart","dragstart","pointerdown","mousedown","click","dblclick","contextmenu","touchstart"])r.addEventListener(m,e,{capture:!0});let t=document.createElement("div");t.className="hfp-shader-loader-panel",t.draggable=!1;let i=document.createElement("div");i.className="hfp-shader-loader-mark",i.draggable=!1,i.innerHTML=['<svg width="78" height="78" viewBox="0 0 100 100" fill="none" aria-hidden="true" draggable="false">','<path d="M10.1851 57.8021L33.1145 73.8313C36.2202 75.9978 41.5173 73.5433 42.4816 69.4984L51.7611 30.4271C52.7253 26.3822 48.5802 23.9277 44.4602 26.0942L13.917 42.1235C6.96677 45.7676 4.97564 54.1579 10.1851 57.8021Z" fill="url(#hfp-shader-loader-grad-left)"/>','<path d="M87.5129 57.5141L56.9696 73.5433C52.8371 75.7098 48.7046 73.2553 49.6688 69.2104L58.9483 30.1391C59.9125 26.0942 65.2097 23.6397 68.3154 25.8062L91.2447 41.8354C96.4668 45.4796 94.4631 53.8699 87.5129 57.5141Z" fill="url(#hfp-shader-loader-grad-right)"/>',"<defs>",'<linearGradient id="hfp-shader-loader-grad-left" x1="48.5676" y1="25" x2="44.7804" y2="71.9384" gradientUnits="userSpaceOnUse">','<stop stop-color="#06E3FA"/>','<stop offset="1" stop-color="#4FDB5E"/>',"</linearGradient>",'<linearGradient id="hfp-shader-loader-grad-right" x1="54.8282" y1="73.8392" x2="72.0989" y2="32.8932" gradientUnits="userSpaceOnUse">','<stop stop-color="#06E3FA"/>','<stop offset="1" stop-color="#4FDB5E"/>',"</linearGradient>","</defs>","</svg>"].join("");let n=document.createElement("div");n.className="hfp-shader-loader-title";let a=document.createElement("span");a.className="hfp-shader-loader-title-text",a.textContent=x[0]||"Preparing scene transitions",n.appendChild(a);let s=document.createElement("div");s.className="hfp-shader-loader-detail",s.textContent="Rendering animated scene samples for shader transitions.";let d=document.createElement("div");d.className="hfp-shader-loader-track",d.setAttribute("aria-hidden","true");let u=document.createElement("div");u.className="hfp-shader-loader-fill",d.appendChild(u);let c=document.createElement("div");c.className="hfp-shader-loader-progress";let p=m=>{let y=document.createElement("div");y.className="hfp-shader-loader-row";let h=document.createElement("span");h.className="hfp-shader-loader-label",h.textContent=m;let _=document.createElement("span");return _.className="hfp-shader-loader-value",y.appendChild(h),y.appendChild(_),c.appendChild(y),{row:y,label:h,value:_}},b=p("transition"),g=p("transition frame");return t.appendChild(i),t.appendChild(n),t.appendChild(s),t.appendChild(d),t.appendChild(c),r.appendChild(t),{root:r,fill:u,title:a,detail:s,transitionValue:b.value,frameLabel:g.label,frameValue:g.value,frameRow:g.row}}var tt=420,q=class{_el;_hideTimeout=null;constructor(e){this._el=e}show(){this._hideTimeout&&(clearTimeout(this._hideTimeout),this._hideTimeout=null),this._el.root.classList.remove("hfp-hiding"),this._el.root.classList.add("hfp-visible")}hide(){if(this._el.root.classList.contains("hfp-hiding")){this._hideTimeout||this._scheduleCleanup();return}this._el.root.classList.contains("hfp-visible")&&(this._el.root.classList.add("hfp-hiding"),this._el.root.classList.remove("hfp-visible"),this._scheduleCleanup())}reset(){this._hideTimeout&&(clearTimeout(this._hideTimeout),this._hideTimeout=null),this._el.root.classList.remove("hfp-visible","hfp-hiding"),this._el.fill.style.transform="scaleX(0)",this._el.transitionValue.textContent="",this._el.frameValue.textContent="",this._el.frameRow.style.visibility="hidden"}update(e,t){if(t!=="player"){this.reset();return}if(e.ready||!e.loading){this.hide();return}let i=typeof e.progress=="number"&&Number.isFinite(e.progress)?e.progress:0,n=typeof e.total=="number"&&Number.isFinite(e.total)?e.total:0,a=n>0?Math.min(1,Math.max(0,i/n)):0,s=Math.min(x.length-1,Math.floor(a*x.length));this._el.title.textContent=x[s]||"Preparing scene transitions",this._el.detail.textContent=e.phase==="cached"?"Loading cached transition frames before playback.":e.phase==="finalizing"?"Uploading transition textures for smooth playback.":"Rendering animated scene samples for shader transitions.",this._el.fill.style.transform=`scaleX(${a})`,this._el.transitionValue.textContent=e.currentTransition!==void 0&&e.transitionTotal!==void 0?`${e.currentTransition}/${e.transitionTotal}`:n>0?`${i}/${n}`:"";let d=e.transitionFrame!==void 0&&e.transitionFrames!==void 0?`${e.transitionFrame}/${e.transitionFrames}`:"";this._el.frameLabel.textContent=e.phase==="cached"?"cached transition frames":e.phase==="finalizing"?"finalizing transition frames":"rendering transition frames",this._el.frameValue.textContent=d,this._el.frameRow.style.visibility=d?"visible":"hidden",this._el.root.setAttribute("aria-valuenow",String(Math.round(a*100))),this.show()}get hideTimeout(){return this._hideTimeout}destroy(){this._hideTimeout&&(clearTimeout(this._hideTimeout),this._hideTimeout=null)}_scheduleCleanup(){this._hideTimeout&&clearTimeout(this._hideTimeout),this._hideTimeout=setTimeout(()=>{this._el.root.classList.remove("hfp-hiding"),this._hideTimeout=null},tt)}};var it=.1,rt=5;function ie(r){return!Number.isFinite(r)||r<=0?1:Math.max(it,Math.min(rt,r))}var X=class extends HTMLElement{static get observedAttributes(){return["src","srcdoc","width","height","controls","muted","audio-locked","volume","poster","playback-rate","audio-src",S,C]}shadow;container;iframe;posterEl=null;controlsApi=null;resizeObserver;shaderLoader;probe;_ready=!1;_currentTime=0;_duration=0;_paused=!0;_lastUpdateMs=0;_volume=1;_compositionWidth=1920;_compositionHeight=1080;_directTimelineAdapter=null;_directTimelineClock;_parentTickRaf=null;_media;_scenes=[];constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),Ce(this.shadow,ye),{container:this.container,iframe:this.iframe}=xe(),this.shadow.appendChild(this.container);let e=Oe();this.shadow.appendChild(e.root),this.shaderLoader=new q(e),this._media=new W({dispatchEvent:t=>this.dispatchEvent(t),getMuted:()=>this.muted,getVolume:()=>this._volume,getPlaybackRate:()=>this.playbackRate,getCurrentTime:()=>this._currentTime,isPaused:()=>this._paused}),this._directTimelineClock=new z({onTimeUpdate:(t,i)=>{this._currentTime=t,this.controlsApi?.updateTime(t,i),this.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:t}}))},getLoop:()=>this.loop,restart:()=>{this.seek(0),this.play()},onPaused:()=>{this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,this.controlsApi?.updatePlaying(!1),this.dispatchEvent(new Event("ended"))},onEnded:()=>this.loop}),this.probe=new U(this.iframe,{onReady:t=>this._onProbeReady(t),onError:t=>this.dispatchEvent(new CustomEvent("error",{detail:{message:t}}))}),this.addEventListener("click",t=>{Ae(t)||(this._paused?this.play():this.pause())}),this.resizeObserver=new ResizeObserver(()=>this._rescale()),this._onMessage=this._onMessage.bind(this),this._onIframeLoad=this._onIframeLoad.bind(this)}connectedCallback(){this.resizeObserver.observe(this),window.addEventListener("message",this._onMessage),this.iframe.addEventListener("load",this._onIframeLoad),this.hasAttribute("controls")&&this._setupControls(),this.hasAttribute("poster")&&(this.posterEl=ee(this.shadow,this.getAttribute("poster"),this.posterEl)),this.hasAttribute("audio-src")&&this._media.setupFromUrl(this.getAttribute("audio-src")),this.hasAttribute("srcdoc")&&(this.iframe.srcdoc=G(this,this.getAttribute("srcdoc"))),this.hasAttribute("src")&&(this.iframe.src=B(this,this.getAttribute("src"))),!this.hasAttribute("audio-locked")&&this._isLockedHostEnvironment()&&this._applyAudioLock(!0)}disconnectedCallback(){this.resizeObserver.disconnect(),window.removeEventListener("message",this._onMessage),this.iframe.removeEventListener("load",this._onIframeLoad),this.probe.stop(),this._directTimelineClock.stop(),this._stopParentTickClock(),this._directTimelineAdapter=null,this.shaderLoader.destroy(),this._media.destroy(),this.controlsApi?.destroy()}attributeChangedCallback(e,t,i){switch(e){case"src":i&&(this._ready=!1,this.iframe.src=B(this,i));break;case"srcdoc":this._ready=!1,i!==null?this.iframe.srcdoc=G(this,i):this.iframe.removeAttribute("srcdoc");break;case"width":this._compositionWidth=P(i)??1920,this._rescale();break;case"height":this._compositionHeight=P(i)??1080,this._rescale();break;case"controls":i!==null?this._setupControls():(this.controlsApi?.destroy(),this.controlsApi=null);break;case"poster":this.posterEl=ee(this.shadow,i,this.posterEl);break;case"playback-rate":{let n=ie(parseFloat(i||"1"));this._media.updatePlaybackRate(n),this._sendControl("set-playback-rate",{playbackRate:n}),this._directTimelineAdapter?.timeScale?.(n),this.controlsApi?.updateSpeed(n),this.dispatchEvent(new Event("ratechange"));break}case"muted":this._handleMutedChange(i);break;case"audio-locked":this._applyAudioLock(i!==null);break;case"volume":{let n=Math.max(0,Math.min(1,parseFloat(i||"1")));this._volume=n,this._media.updateVolume(n),this._sendControl("set-volume",{volume:n}),this.controlsApi?.updateVolume(n),this.dispatchEvent(new Event("volumechange"));break}case"audio-src":i?this._media.setupFromUrl(i):this._media.teardownUrlAudio();break;case S:case C:this._reloadShaderOptions();break}}get iframeElement(){return this.iframe}get scenes(){return this._scenes}play(){this.posterEl?.remove(),this.posterEl=null,this._duration>0&&this._currentTime>=this._duration&&this.seek(0),this._paused=!1;let e=this._tryDirectTimelinePlay();e||(this._sendControl("play"),this._ready&&!this._directTimelineAdapter&&this._startParentTickClock()),this._media.audioOwner==="parent"&&this._media.playAll(),this.controlsApi?.updatePlaying(!0),this.dispatchEvent(new Event("play")),e&&this._directTimelineAdapter&&this._directTimelineClock.start(this._directTimelineAdapter,()=>this._currentTime,()=>this._duration,()=>this._paused)}pause(){this._tryDirectTimelinePause()||this._sendControl("pause"),this._directTimelineClock.stop(),this._stopParentTickClock(),this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,this.controlsApi?.updatePlaying(!1),this.dispatchEvent(new Event("pause"))}stopMedia(){this._sendControl("stop-media"),this._stopIframeMedia(),this._media.stopAdoptedMedia()}seek(e){!this._trySyncSeek(e)&&!this._tryDirectTimelineSeek(e)&&this._sendControl("seek",{frame:Math.round(e*30)}),this._directTimelineClock.stop(),this._stopParentTickClock(),this._currentTime=e,this._media.audioOwner==="parent"&&(this._media.pauseAll(),this._media.seekAll(e)),this._paused=!0,this.controlsApi?.updatePlaying(!1),this.controlsApi?.updateTime(this._currentTime,this._duration)}setColorGrading(e,t){this._sendControl("set-color-grading",{target:e,grading:t})}clearColorGrading(e){this._sendControl("set-color-grading",{target:e,grading:null})}setColorGradingCompare(e,t){this._sendControl("set-color-grading-compare",{target:e,compare:t})}clearColorGradingCompare(e){this._sendControl("set-color-grading-compare",{target:e,compare:{enabled:!1}})}get currentTime(){return this._currentTime}set currentTime(e){this.seek(e)}get duration(){return this._duration}get paused(){return this._paused}get ready(){return this._ready}get playbackRate(){return ie(parseFloat(this.getAttribute("playback-rate")||"1"))}set playbackRate(e){this.setAttribute("playback-rate",String(ie(e)))}get shaderCaptureScale(){return Ie(this)}set shaderCaptureScale(e){this.setAttribute(S,String(e))}get shaderLoading(){return M(this)}set shaderLoading(e){e==="composition"?this.removeAttribute(C):this.setAttribute(C,e)}get muted(){return this.hasAttribute("muted")}set muted(e){e?this.setAttribute("muted",""):this.removeAttribute("muted")}get audioLocked(){return this.hasAttribute("audio-locked")}set audioLocked(e){e?this.setAttribute("audio-locked",""):this.removeAttribute("audio-locked")}_isLockedHostEnvironment(){if(typeof navigator>"u")return!1;let e=navigator.userAgent||"";return/\bClaude\/\d/.test(e)&&/\bElectron\b/.test(e)}_isAudioLocked(){return this.hasAttribute("audio-locked")||this._isLockedHostEnvironment()}_isSlideshowPlayer(){return this.closest("hyperframes-slideshow")!==null}_handleMutedChange(e){if(e===null&&this._isAudioLocked()){this.setAttribute("muted","");return}this._media.updateMuted(e!==null),this._setIframeMediaMuted(e!==null),this._sendControl("set-muted",{muted:e!==null}),this.controlsApi?.updateMuted(e!==null),this.dispatchEvent(new Event("volumechange"))}_applyAudioLock(e){e&&(this.muted=!0),this.controlsApi?.setVolumeControlsHidden(e)}get volume(){return this._volume}set volume(e){this.setAttribute("volume",String(Math.max(0,Math.min(1,e))))}get loop(){return this.hasAttribute("loop")}set loop(e){e?this.setAttribute("loop",""):this.removeAttribute("loop")}_sendControl(e,t={}){try{this.iframe.contentWindow?.postMessage({source:"hf-parent",type:"control",action:e,...t},"*")}catch{}}_getSameOriginIframeDocument(){try{return this.iframe.contentDocument}catch{return null}}_setIframeMediaMuted(e){let t=this._getSameOriginIframeDocument();if(t)for(let i of t.querySelectorAll("video, audio"))v(i)&&(i.muted=e||i.defaultMuted)}_stopIframeMedia(){let e=this._getSameOriginIframeDocument();if(e)for(let t of e.querySelectorAll("video, audio"))v(t)&&t.pause()}_replayBridgeState(){this._sendControl("set-muted",{muted:this.muted}),this._sendControl("set-volume",{volume:this._volume}),this._sendControl("set-playback-rate",{playbackRate:this.playbackRate}),this._sendControl("set-native-media-sync-disabled",{disabled:this._isSlideshowPlayer()}),this._sendControl("set-web-audio-media-disabled",{disabled:this._isSlideshowPlayer()})}_reloadShaderOptions(){if(M(this)!=="player"&&this.shaderLoader.reset(),this.hasAttribute("srcdoc")){this.iframe.srcdoc=G(this,this.getAttribute("srcdoc")||"");return}this.hasAttribute("src")&&(this.iframe.src=B(this,this.getAttribute("src")||""))}_trySyncSeek(e){try{let i=this.iframe.contentWindow?.__player;return typeof i?.seek!="function"?!1:(i.seek.call(i,e),!0)}catch{return!1}}_withDirectTimeline(e){let t=this._directTimelineAdapter||this.probe.resolveDirectTimelineAdapter();if(!t)return!1;try{return e(t),this._directTimelineAdapter=t,!0}catch{return!1}}_tryDirectTimelineSeek(e){return this._withDirectTimeline(t=>{t.seek(e,!1),t.pause()})}_tryDirectTimelinePlay(){return this._withDirectTimeline(e=>{e.play()})}_tryDirectTimelinePause(){return this._withDirectTimeline(e=>{e.pause()})}_startParentTickClock(){this._stopParentTickClock();let e=()=>{if(this._paused){this._parentTickRaf=null;return}this._sendControl("tick"),this._parentTickRaf=requestAnimationFrame(e)};this._parentTickRaf=requestAnimationFrame(e)}_stopParentTickClock(){this._parentTickRaf!==null&&(cancelAnimationFrame(this._parentTickRaf),this._parentTickRaf=null)}_onMessage(e){Re(e,this.iframe.contentWindow,{getPlaybackState:()=>({currentTime:this._currentTime,duration:this._duration,paused:this._paused,lastUpdateMs:this._lastUpdateMs}),setPlaybackState:({currentTime:t,duration:i,paused:n,lastUpdateMs:a})=>{this._currentTime=t,this._duration=i,this._paused=n,this._lastUpdateMs=a},getShaderLoadingMode:()=>M(this),shaderLoader:this.shaderLoader,setCompositionSize:(t,i)=>{this._compositionWidth=t,this._compositionHeight=i,this._rescale()},sendControl:(t,i)=>this._sendControl(t,i),getIframeDoc:()=>this.iframe.contentDocument,onRuntimeReady:()=>this._replayBridgeState(),onRuntimeTimelineReady:t=>this._onRuntimeTimelineReady(t),shouldPromoteMediaAutoplayFallback:()=>!this._isSlideshowPlayer(),setScenes:t=>{this._scenes=t,this.dispatchEvent(new CustomEvent("scenes",{detail:{scenes:t}}))},updateControlsTime:(t,i)=>this.controlsApi?.updateTime(t,i),updateControlsPlaying:t=>this.controlsApi?.updatePlaying(t),dispatchEvent:t=>this.dispatchEvent(t),seek:t=>this.seek(t),play:()=>this.play(),getLoop:()=>this.loop,media:this._media})}_onRuntimeTimelineReady(e){if(this._ready)return;this.probe.stop(),this._duration=e,this._directTimelineAdapter=null,this._ready=!0,this.controlsApi?.updateTime(this._currentTime,e),this.dispatchEvent(new CustomEvent("ready",{detail:{duration:e}}));let t=this._getSameOriginIframeDocument();t&&this._media.setupFromIframe(t),this._replayBridgeState(),this._setIframeMediaMuted(this.muted),this.hasAttribute("autoplay")&&this.play()}_onProbeReady({duration:e,adapter:t,compositionSize:i}){this._duration=e,this._directTimelineAdapter=t.kind==="direct-timeline"?t.timeline:null,this._ready=!0,this.controlsApi?.updateTime(0,e),this.dispatchEvent(new CustomEvent("ready",{detail:{duration:e}})),i&&(this._compositionWidth=i.width,this._compositionHeight=i.height,this._rescale());try{let n=this.iframe.contentDocument;n&&this._media.setupFromIframe(n)}catch{}this._setIframeMediaMuted(this.muted),this.hasAttribute("autoplay")&&this.play()}_rescale(){Me(this,this.iframe,this._compositionWidth,this._compositionHeight)}_onIframeLoad(){this._directTimelineAdapter=null,this._directTimelineClock.stop(),this._stopParentTickClock(),this.shaderLoader.reset(),this._media.resetForIframeLoad(),this.probe.start()}_setupControls(){this.controlsApi||(this.controlsApi=we(this.shadow,this.muted,this._volume,this.getAttribute("speed-presets"),{onPlay:()=>this.play(),onPause:()=>this.pause(),onSeek:e=>this.seek(e*this._duration),onSpeedChange:e=>{this.playbackRate=e},onMuteToggle:()=>{this.muted=!this.muted},onVolumeChange:e=>{this.volume=e}},this._isAudioLocked()))}get _audioOwner(){return this._media.audioOwner}get _parentMedia(){return this._media.entries}_mirrorParentMediaTime(e,t){this._media.mirrorTime(e,t)}_promoteToParentProxy(){let e=null;try{e=this.iframe.contentDocument}catch{}this._media.promoteToParentProxy(e,(t,i)=>this._mirrorParentMediaTime(t,i)),this._sendControl("set-media-output-muted",{muted:!0})}_observeDynamicMedia(e){this._media.setupFromIframe(e)}};customElements.get("hyperframes-player")||customElements.define("hyperframes-player",X);return ze(nt);})();
+`,_e='<svg width="24" height="24" viewBox="46 21 54 56" fill="currentColor"><path d="M87.5129 57.5141L56.9696 73.5433C52.8371 75.7098 48.7046 73.2553 49.6688 69.2104L58.9483 30.1391C59.9125 26.0942 65.2097 23.6397 68.3154 25.8062L91.2447 41.8354C96.4668 45.4796 94.4631 53.8699 87.5129 57.5141Z"/></svg>',Ee='<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><rect x="3" y="2" width="4" height="14"/><rect x="11" y="2" width="4" height="14"/></svg>',Q='<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3z"/><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/><path d="M14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>',Z='<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3z"/><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>',Se='<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3z"/><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z" opacity="0.3"/><line x1="18" y1="7" x2="14" y2="17" stroke="currentColor" stroke-width="2"/></svg>';var J=[.25,.5,1,1.5,2,4];function R(r){return Number.isInteger(r)?`${r}x`:`${r}x`}function V(r){if(!Number.isFinite(r)||r<0)return"0:00";let e=Math.floor(r),t=Math.floor(e/60),i=e%60;return`${t}:${i.toString().padStart(2,"0")}`}function Te(r,e,t={}){let i=t.speedPresets??J,n=document.createElement("div");n.className="hfp-controls",n.addEventListener("click",o=>{o.stopPropagation()});let a=document.createElement("button");a.className="hfp-play-btn",a.type="button",a.innerHTML=`<span class="hfp-ico hfp-ico-play">${_e}</span><span class="hfp-ico hfp-ico-pause">${Ee}</span>`,a.setAttribute("aria-label","Play");let s=document.createElement("div");s.className="hfp-scrubber";let d=document.createElement("div");d.className="hfp-progress",d.style.width="0%",s.appendChild(d);let u=document.createElement("span");u.className="hfp-time",u.textContent="0:00 / 0:00";let c=document.createElement("div");c.className="hfp-speed-wrap";let p=document.createElement("button");p.className="hfp-speed-btn",p.type="button",p.textContent="1x",p.setAttribute("aria-label","Playback speed");let b=document.createElement("div");b.className="hfp-speed-menu",b.setAttribute("role","menu");for(let o of i){let l=document.createElement("button");l.className="hfp-speed-option",l.type="button",l.setAttribute("role","menuitem"),l.dataset.speed=String(o),l.textContent=R(o),o===1&&l.classList.add("hfp-active"),b.appendChild(l)}c.appendChild(b),c.appendChild(p);let g=document.createElement("div");g.className="hfp-volume-wrap";let m=document.createElement("button");m.className="hfp-mute-btn",m.type="button",m.innerHTML=Q,m.setAttribute("aria-label","Mute");let _=document.createElement("div");_.className="hfp-volume-slider-wrap";let h=document.createElement("div");h.className="hfp-volume-slider",h.setAttribute("role","slider"),h.setAttribute("aria-label","Volume"),h.setAttribute("aria-valuemin","0"),h.setAttribute("aria-valuemax","100"),h.setAttribute("aria-valuenow","100"),h.tabIndex=0;let y=document.createElement("div");y.className="hfp-volume-fill",y.style.width="100%",h.appendChild(y),_.appendChild(h),g.appendChild(_),g.appendChild(m),t.audioLocked&&(g.style.display="none"),n.appendChild(a),n.appendChild(s),n.appendChild(u),n.appendChild(g),n.appendChild(c),r.appendChild(n);let D=!1,T=!1,E=1,k=null,I=i.indexOf(1);I===-1&&(I=0);let O=(o,l)=>o?Se:l===0?Z:l<.5?Z:Q;a.addEventListener("click",o=>{o.stopPropagation(),D?e.onPause():e.onPlay()}),m.addEventListener("click",o=>{o.stopPropagation(),e.onMuteToggle()});let w=!1,N=o=>{let l=h.getBoundingClientRect(),f=Math.max(0,Math.min(1,(o-l.left)/l.width));E=f,y.style.width=`${f*100}%`,h.setAttribute("aria-valuenow",String(Math.round(f*100))),T&&f>0&&e.onMuteToggle(),m.innerHTML=O(T,f),e.onVolumeChange(f)};h.addEventListener("mousedown",o=>{o.stopPropagation(),w=!0,N(o.clientX)});let ie=o=>{w&&N(o.clientX)},re=()=>{w=!1};document.addEventListener("mousemove",ie),document.addEventListener("mouseup",re),h.addEventListener("touchstart",o=>{w=!0;let l=o.touches[0];l&&N(l.clientX)},{passive:!0});let ne=o=>{if(w){let l=o.touches[0];l&&N(l.clientX)}},oe=()=>{w=!1};document.addEventListener("touchmove",ne,{passive:!0}),document.addEventListener("touchend",oe);let ae=.05;h.addEventListener("keydown",o=>{let l=E;if(o.key==="ArrowRight"||o.key==="ArrowUp")l=Math.min(1,E+ae);else if(o.key==="ArrowLeft"||o.key==="ArrowDown")l=Math.max(0,E-ae);else return;o.preventDefault(),o.stopPropagation(),E=l,y.style.width=`${l*100}%`,h.setAttribute("aria-valuenow",String(Math.round(l*100))),T&&l>0&&e.onMuteToggle(),m.innerHTML=O(T,l),e.onVolumeChange(l)});let se=o=>{for(let l of b.querySelectorAll(".hfp-speed-option"))l.classList.toggle("hfp-active",l.dataset.speed===String(o))};p.addEventListener("click",o=>{o.stopPropagation();let l=b.classList.toggle("hfp-open");p.setAttribute("aria-expanded",String(l))}),b.addEventListener("click",o=>{o.stopPropagation();let l=o.target.closest(".hfp-speed-option");if(!l)return;let f=parseFloat(l.dataset.speed);I=i.indexOf(f),p.textContent=R(f),se(f),b.classList.remove("hfp-open"),p.setAttribute("aria-expanded","false"),e.onSpeedChange(f)});let le=()=>{b.classList.remove("hfp-open"),p.setAttribute("aria-expanded","false")};document.addEventListener("click",le);let H=o=>{let l=s.getBoundingClientRect(),f=Math.max(0,Math.min(1,(o-l.left)/l.width));e.onSeek(f)},A=!1;s.addEventListener("mousedown",o=>{o.stopPropagation(),A=!0,H(o.clientX)});let de=o=>{A&&H(o.clientX)},ue=()=>{A=!1};document.addEventListener("mousemove",de),document.addEventListener("mouseup",ue),s.addEventListener("touchstart",o=>{A=!0;let l=o.touches[0];l&&H(l.clientX)},{passive:!0});let pe=o=>{if(A){let l=o.touches[0];l&&H(l.clientX)}},ce=()=>{A=!1};document.addEventListener("touchmove",pe,{passive:!0}),document.addEventListener("touchend",ce);let he=()=>{k&&clearTimeout(k),k=setTimeout(()=>{D&&n.classList.add("hfp-hidden")},3e3)},F=r instanceof ShadowRoot?r.host:r,me=()=>{n.classList.remove("hfp-hidden"),he()},fe=()=>{D&&n.classList.add("hfp-hidden")};return F.addEventListener("mousemove",me),F.addEventListener("mouseleave",fe),{updateTime(o,l){let f=l>0?Math.min(o,l):o,Ne=l>0?f/l*100:0;d.style.width=`${Ne}%`,u.textContent=`${V(f)} / ${V(l)}`},updatePlaying(o){D=o,a.classList.toggle("hfp-playing",o),a.setAttribute("aria-label",o?"Pause":"Play"),o?he():n.classList.remove("hfp-hidden")},updateSpeed(o){let l=i.indexOf(o);l!==-1&&(I=l),p.textContent=R(o),se(o)},updateMuted(o){T=o,m.innerHTML=O(o,E),m.setAttribute("aria-label",o?"Unmute":"Mute")},updateVolume(o){E=o,y.style.width=`${o*100}%`,h.setAttribute("aria-valuenow",String(Math.round(o*100))),m.innerHTML=O(T,o)},setVolumeControlsHidden(o){g.style.display=o?"none":""},show(){n.style.display=""},hide(){n.style.display="none"},destroy(){document.removeEventListener("mousemove",de),document.removeEventListener("mouseup",ue),document.removeEventListener("touchmove",pe),document.removeEventListener("touchend",ce),document.removeEventListener("mousemove",ie),document.removeEventListener("mouseup",re),document.removeEventListener("touchmove",ne),document.removeEventListener("touchend",oe),document.removeEventListener("click",le),F.removeEventListener("mousemove",me),F.removeEventListener("mouseleave",fe),k&&clearTimeout(k),n.remove()}}}function we(r,e,t,i,n,a=!1){let s=i?i.split(",").map(Number).filter(c=>!isNaN(c)&&c>0):void 0,d={...s?{speedPresets:s}:{},audioLocked:a},u=Te(r,n,d);return u.updateMuted(e),u.updateVolume(t),u}function K(r,e,t){return e?(t||(t=document.createElement("img"),t.className="hfp-poster",r.appendChild(t)),t.src=e,t):(t?.remove(),null)}function Ae(r){return r.composedPath().some(e=>e instanceof HTMLElement&&e.classList.contains("hfp-controls"))}var j=null;function Ce(r,e){if(typeof CSSStyleSheet<"u")try{j||(j=new CSSStyleSheet,j.replaceSync(e)),r.adoptedStyleSheets=[j];return}catch{}let t=document.createElement("style");t.textContent=e,r.appendChild(t)}function xe(){let r=document.createElement("div");r.className="hfp-container";let e=document.createElement("iframe");return e.className="hfp-iframe",e.sandbox.add("allow-scripts","allow-same-origin"),e.allow="autoplay; fullscreen",e.referrerPolicy="no-referrer",e.title="HyperFrames Composition",r.appendChild(e),{container:r,iframe:e}}function Me(r,e,t,i){let n=r.offsetWidth,a=r.offsetHeight;if(n===0||a===0)return;let s=Math.min(n/t,a/i);e.style.width=`${t}px`,e.style.height=`${i}px`,e.style.transform=`translate(-50%, -50%) scale(${s})`}var z=class{constructor(e){this._callbacks=e}_callbacks;_raf=null;_lastUpdateMs=0;start(e,t,i,n){this.stop();let a=()=>{if(n()){this._raf=null;return}let s;try{s=e.time()}catch{this._raf=null;return}let d=i();d>0&&(s=Math.min(s,d));let u=d>0&&s>=d,c=performance.now();if((c-this._lastUpdateMs>100||u)&&(this._lastUpdateMs=c,this._callbacks.onTimeUpdate(s,d)),u){if(this._callbacks.getLoop()){this._callbacks.restart();return}try{e.pause()}catch{}this._callbacks.onPaused(),this._raf=null;return}this._raf=requestAnimationFrame(a)};this._raf=requestAnimationFrame(a)}stop(){this._raf!==null&&(cancelAnimationFrame(this._raf),this._raf=null)}get isRunning(){return this._raf!==null}};function ke(r){let e=Array.from(r.querySelectorAll("[data-composition-id]"));if(e.length===0)return r.body?[r.body]:[];let t=[];for(let i of e)Ge(i)||t.push(i);return Be(r),t}function Be(r){let e=r.body;if(!e||typeof console>"u"||typeof console.warn!="function")return;let t=e.querySelectorAll("audio[data-start], video[data-start]");if(t.length===0)return;let i=[];for(let n of t)n.closest("[data-composition-id]")||i.push(n);i.length!==0&&console.warn(`[hyperframes-player] selectMediaObserverTargets: composition hosts are present, but ${i.length} body-level timed media element(s) sit outside every [data-composition-id] subtree and will not be observed. Move them inside a composition host or the parent-frame proxy will never adopt them.`,i)}function Ge(r){let e=r.parentElement;for(;e;){if(e.hasAttribute("data-composition-id"))return!0;e=e.parentElement}return!1}function $(r){let e=r.ownerDocument?.defaultView;return e&&r instanceof e.Element?!0:r instanceof Element}function v(r){if(!$(r)||r.tagName!=="AUDIO"&&r.tagName!=="VIDEO")return!1;let e=r.ownerDocument?.defaultView;return e&&r instanceof e.HTMLMediaElement?!0:r instanceof HTMLMediaElement}var qe=.05,Xe=2,W=class{_entries=[];_mediaObserver;_playbackErrorPosted=!1;_audioOwner="runtime";_urlAudioEntry=null;_urlAudioSrc=null;_dispatchEvent;_getMuted;_getVolume;_getPlaybackRate;_getCurrentTime;_isPaused;constructor(e){this._dispatchEvent=e.dispatchEvent,this._getMuted=e.getMuted,this._getVolume=e.getVolume,this._getPlaybackRate=e.getPlaybackRate,this._getCurrentTime=e.getCurrentTime,this._isPaused=e.isPaused}get audioOwner(){return this._audioOwner}get entries(){return this._entries}resetForIframeLoad(){this._playbackErrorPosted=!1;let e=this._audioOwner==="parent";this._audioOwner="runtime",this.pauseAll(),this.teardownObserver(),e&&this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"runtime",reason:"iframe-reload"}}))}destroy(){this.teardownObserver();for(let e of this._entries)e.el.pause(),e.el.src="";this._entries=[],this._urlAudioEntry=null,this._urlAudioSrc=null}updateMuted(e){for(let t of this._entries)t.el.muted=e}updateVolume(e){for(let t of this._entries)t.el.volume=e}updatePlaybackRate(e){for(let t of this._entries)t.el.playbackRate=e}_playEntry(e){e.el.src&&e.el.play().catch(t=>this._reportPlaybackError(t))}_playEntryIfActive(e){this._refreshEntryBounds(e);let t=this._getCurrentTime()-e.start;t<0||t>=e.duration||this._playEntry(e)}_refreshEntryBounds(e){if(!e.source?.isConnected)return;let t=parseFloat(e.source.getAttribute("data-start")||"0");e.start=Number.isFinite(t)?t:0;let i=parseFloat(e.source.getAttribute("data-duration")||"");e.duration=Number.isFinite(i)&&i>0?i:Number.POSITIVE_INFINITY}_gateEntryPlayback(e,t){return t<0||t>=e.duration?(e.el.paused||e.el.pause(),e.driftSamples=0,!1):(this._audioOwner==="parent"&&!this._isPaused()&&e.el.paused&&this._playEntry(e),!0)}playAll(){for(let e of this._entries)this._playEntryIfActive(e)}pauseAll(){for(let e of this._entries)e.el.pause()}stopAdoptedMedia(){for(let e of this._entries)e.source&&e.el.pause()}seekAll(e){for(let t of this._entries){this._refreshEntryBounds(t);let i=e-t.start;i>=0&&i<t.duration&&(t.el.currentTime=i)}}mirrorTime(e,t){let i=t?.force===!0;for(let n of this._entries){this._refreshEntryBounds(n);let a=e-n.start;this._gateEntryPlayback(n,a)&&(Math.abs(n.el.currentTime-a)>qe?(n.driftSamples+=1,(i||n.driftSamples>=Xe)&&(n.el.currentTime=a,n.driftSamples=0)):n.driftSamples=0)}}promoteToParentProxy(e,t){if(this._audioOwner==="parent")return;if(this._audioOwner="parent",e)for(let n of e.querySelectorAll("video, audio"))v(n)&&(n.muted=!0);let i=this._getCurrentTime();t?t(i,{force:!0}):this.mirrorTime(i,{force:!0}),this._isPaused()||this.playAll(),this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"parent",reason:"autoplay-blocked"}}))}setupFromIframe(e){let t=e.querySelectorAll("audio[data-start], video[data-start]");for(let i of t)v(i)&&this._adoptIframeMedia(i);this._observeDynamicMedia(e)}setupFromUrl(e){if(this._urlAudioSrc===e&&this._urlAudioEntry)return;this.teardownUrlAudio();let t=this._createEntry(e,"audio",0,1/0);this._urlAudioEntry=t,this._urlAudioSrc=t?e:null,t&&this._audioOwner==="parent"&&!this._isPaused()&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),this.playAll())}teardownUrlAudio(){let e=this._urlAudioEntry;if(this._urlAudioEntry=null,this._urlAudioSrc=null,!e)return;e.el.pause(),e.el.src="";let t=this._entries.indexOf(e);t!==-1&&this._entries.splice(t,1)}teardownObserver(){this._mediaObserver?.disconnect(),this._mediaObserver=void 0}_reportPlaybackError(e){this._playbackErrorPosted||(this._playbackErrorPosted=!0,this._dispatchEvent(new CustomEvent("playbackerror",{detail:{source:"parent-proxy",error:e}})))}_createEntry(e,t,i,n,a){if(this._entries.some(c=>c.el.src===e))return null;let s=t==="video"?document.createElement("video"):new Audio;s.preload="auto",s.src=e,s.load(),s.muted=this._getMuted(),s.volume=this._getVolume();let d=this._getPlaybackRate();d!==1&&(s.playbackRate=d);let u={el:s,start:i,duration:n,driftSamples:0,source:a};return this._entries.push(u),u}_resolveIframeMediaSrc(e){let t=e.getAttribute("src")||e.querySelector("source")?.getAttribute("src");return t?new URL(t,e.ownerDocument.baseURI).href:null}_adoptIframeMedia(e){if(e.preload==="metadata"||e.preload==="none")return;let t=this._resolveIframeMediaSrc(e);if(!t)return;let i=parseFloat(e.getAttribute("data-start")||"0"),n=parseFloat(e.getAttribute("data-duration")||"Infinity"),a=e.tagName==="VIDEO"?"video":"audio",s=this._createEntry(t,a,i,n,e);s&&this._audioOwner==="parent"&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),this._isPaused()||this._playEntryIfActive(s))}_detachIframeMedia(e){let t=this._resolveIframeMediaSrc(e);if(!t)return;let i=this._entries.findIndex(a=>a.el.src===t);if(i===-1)return;let n=this._entries[i];n.el.pause(),n.el.src="",this._entries.splice(i,1)}_observeDynamicMedia(e){if(this.teardownObserver(),typeof MutationObserver>"u"||!e.body)return;let t=new MutationObserver(a=>{for(let s of a){if(s.type==="attributes"&&s.attributeName==="preload"){let d=s.target;v(d)&&d.matches("audio[data-start], video[data-start]")&&d.preload==="auto"&&this._adoptIframeMedia(d);continue}for(let d of s.addedNodes){if(!$(d))continue;let u=[];v(d)&&d.matches("audio[data-start], video[data-start]")&&u.push(d);let c=d.querySelectorAll("audio[data-start], video[data-start]");for(let p of c)v(p)&&u.push(p);for(let p of u)this._adoptIframeMedia(p)}for(let d of s.removedNodes){if(!$(d))continue;let u=[];v(d)&&d.matches("audio[data-start], video[data-start]")&&u.push(d);let c=d.querySelectorAll("audio[data-start], video[data-start]");for(let p of c)v(p)&&u.push(p);for(let p of u)this._detachIframeMedia(p)}}}),i={childList:!0,subtree:!0,attributes:!0,attributeFilter:["preload"]},n=ke(e);for(let a of n)t.observe(a,i);this._mediaObserver=t}};function Le(r,e,t,i){let n=(r.frame??0)/e,a=t.duration>0?Math.min(n,t.duration):n,s=!t.paused,d=!r.isPlaying,u=t.duration>0&&a>=t.duration&&(s||r.isPlaying);if(u&&i.getLoop())return i.media.audioOwner==="parent"&&i.media.pauseAll(),i.seek(0),i.play(),{...t,currentTime:a,paused:!1};let c={...t,currentTime:a,paused:d};i.media.audioOwner==="parent"&&(s&&d?i.media.pauseAll():!s&&!d&&i.media.playAll(),i.media.mirrorTime(a));let p=performance.now(),b=d!==t.paused;return(p-t.lastUpdateMs>100||b)&&(c.lastUpdateMs=p,i.updateControlsTime(a,t.duration),i.updateControlsPlaying(!d),i.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:a}}))),u&&(i.media.audioOwner==="parent"&&i.media.pauseAll(),c.paused=!0,i.updateControlsPlaying(!1),i.dispatchEvent(new Event("ended"))),c}var Pe=30;function Ye(r){return Array.isArray(r)?r.filter(e=>typeof e=="object"&&e!==null&&typeof e.id=="string"&&typeof e.start=="number"&&typeof e.duration=="number"):[]}function Re(r,e,t){if(r.source!==e)return;let i=r.data;if(!(!i||i.source!=="hf-preview")){if(i.type==="shader-transition-state"){let n=i.state&&typeof i.state=="object"?i.state:{};t.shaderLoader.update(n,t.getShaderLoadingMode()),t.dispatchEvent(new CustomEvent("shadertransitionstate",{detail:{compositionId:i.compositionId,state:n}}));return}if(i.type==="ready"){t.onRuntimeReady();return}if(i.type==="state"){t.setPlaybackState(Le({frame:i.frame??0,isPlaying:!!i.isPlaying},Pe,t.getPlaybackState(),t));return}if(i.type==="media-autoplay-blocked"){if(t.shouldPromoteMediaAutoplayFallback?.()===!1)return;let n=null;try{n=t.getIframeDoc()}catch{}t.media.promoteToParentProxy(n,(a,s)=>t.media.mirrorTime(a,s)),t.sendControl("set-media-output-muted",{muted:!0});return}if(i.type==="timeline"&&i.durationInFrames>0){if(Number.isFinite(i.durationInFrames)){let n=t.getPlaybackState(),a=i.durationInFrames/Pe;t.setPlaybackState({...n,duration:a}),t.updateControlsTime(n.currentTime,a),t.onRuntimeTimelineReady(a)}t.setScenes(Ye(i.scenes));return}i.type==="stage-size"&&Number.isFinite(i.width)&&i.width>0&&Number.isFinite(i.height)&&i.height>0&&t.setCompositionSize(i.width,i.height)}}var S="shader-capture-scale",C="shader-loading",Qe="__hf_shader_capture_scale",Ze="__hf_shader_loading",x=["Preparing scene transitions","Sampling outgoing scene motion","Sampling incoming scene motion","Caching transition frames","Finalizing transition preview"];function ee(r){if(r===null)return null;let e=Number(r);return!Number.isFinite(e)||e<=0?null:String(Math.min(1,Math.max(.25,e)))}function Je(r){if(r===null||r.trim()==="")return"composition";let e=r.trim().toLowerCase();return e==="none"||e==="false"||e==="0"||e==="off"?"none":e==="player"||e==="true"||e==="1"||e==="on"?"player":"composition"}function De(r,e,t){t===null?r.delete(e):r.set(e,t)}function Ke(r,e,t){let i=r.indexOf("#"),n=i>=0?r.slice(0,i):r,a=i>=0?r.slice(i):"",s=n.indexOf("?"),d=s>=0?n.slice(0,s):n,u=s>=0?n.slice(s+1):"",c=new URLSearchParams(u);De(c,Qe,e),De(c,Ze,t==="composition"?null:t);let p=c.toString();return`${d}${p?`?${p}`:""}${a}`}function et(r,e,t){if(e===null&&t==="composition")return r;let i=[];e!==null&&i.push(`window.__HF_SHADER_CAPTURE_SCALE=${JSON.stringify(e)};`),t!=="composition"&&i.push(`window.__HF_SHADER_LOADING=${JSON.stringify(t)};`);let n=`<script data-hyperframes-player-shader-options>${i.join("")}</script>`;return/<head\b[^>]*>/i.test(r)?r.replace(/<head\b[^>]*>/i,a=>`${a}${n}`):/<html\b[^>]*>/i.test(r)?r.replace(/<html\b[^>]*>/i,a=>`${a}${n}`):`${n}${r}`}function M(r){return Je(r.getAttribute(C))}function Ie(r){return Number(ee(r.getAttribute(S))??"1")}function B(r,e){return Ke(e,ee(r.getAttribute(S)),M(r))}function G(r,e){return et(e,ee(r.getAttribute(S)),M(r))}function Oe(){let r=document.createElement("div");r.className="hfp-shader-loader",r.setAttribute("role","status"),r.setAttribute("aria-live","polite"),r.setAttribute("aria-label","Preparing scene transitions"),r.setAttribute("data-hyperframes-ignore",""),r.draggable=!1;let e=m=>{m.preventDefault(),m.stopPropagation()};for(let m of["selectstart","dragstart","pointerdown","mousedown","click","dblclick","contextmenu","touchstart"])r.addEventListener(m,e,{capture:!0});let t=document.createElement("div");t.className="hfp-shader-loader-panel",t.draggable=!1;let i=document.createElement("div");i.className="hfp-shader-loader-mark",i.draggable=!1,i.innerHTML=['<svg width="78" height="78" viewBox="0 0 100 100" fill="none" aria-hidden="true" draggable="false">','<path d="M10.1851 57.8021L33.1145 73.8313C36.2202 75.9978 41.5173 73.5433 42.4816 69.4984L51.7611 30.4271C52.7253 26.3822 48.5802 23.9277 44.4602 26.0942L13.917 42.1235C6.96677 45.7676 4.97564 54.1579 10.1851 57.8021Z" fill="url(#hfp-shader-loader-grad-left)"/>','<path d="M87.5129 57.5141L56.9696 73.5433C52.8371 75.7098 48.7046 73.2553 49.6688 69.2104L58.9483 30.1391C59.9125 26.0942 65.2097 23.6397 68.3154 25.8062L91.2447 41.8354C96.4668 45.4796 94.4631 53.8699 87.5129 57.5141Z" fill="url(#hfp-shader-loader-grad-right)"/>',"<defs>",'<linearGradient id="hfp-shader-loader-grad-left" x1="48.5676" y1="25" x2="44.7804" y2="71.9384" gradientUnits="userSpaceOnUse">','<stop stop-color="#06E3FA"/>','<stop offset="1" stop-color="#4FDB5E"/>',"</linearGradient>",'<linearGradient id="hfp-shader-loader-grad-right" x1="54.8282" y1="73.8392" x2="72.0989" y2="32.8932" gradientUnits="userSpaceOnUse">','<stop stop-color="#06E3FA"/>','<stop offset="1" stop-color="#4FDB5E"/>',"</linearGradient>","</defs>","</svg>"].join("");let n=document.createElement("div");n.className="hfp-shader-loader-title";let a=document.createElement("span");a.className="hfp-shader-loader-title-text",a.textContent=x[0]||"Preparing scene transitions",n.appendChild(a);let s=document.createElement("div");s.className="hfp-shader-loader-detail",s.textContent="Rendering animated scene samples for shader transitions.";let d=document.createElement("div");d.className="hfp-shader-loader-track",d.setAttribute("aria-hidden","true");let u=document.createElement("div");u.className="hfp-shader-loader-fill",d.appendChild(u);let c=document.createElement("div");c.className="hfp-shader-loader-progress";let p=m=>{let _=document.createElement("div");_.className="hfp-shader-loader-row";let h=document.createElement("span");h.className="hfp-shader-loader-label",h.textContent=m;let y=document.createElement("span");return y.className="hfp-shader-loader-value",_.appendChild(h),_.appendChild(y),c.appendChild(_),{row:_,label:h,value:y}},b=p("transition"),g=p("transition frame");return t.appendChild(i),t.appendChild(n),t.appendChild(s),t.appendChild(d),t.appendChild(c),r.appendChild(t),{root:r,fill:u,title:a,detail:s,transitionValue:b.value,frameLabel:g.label,frameValue:g.value,frameRow:g.row}}var tt=420,q=class{_el;_hideTimeout=null;constructor(e){this._el=e}show(){this._hideTimeout&&(clearTimeout(this._hideTimeout),this._hideTimeout=null),this._el.root.classList.remove("hfp-hiding"),this._el.root.classList.add("hfp-visible")}hide(){if(this._el.root.classList.contains("hfp-hiding")){this._hideTimeout||this._scheduleCleanup();return}this._el.root.classList.contains("hfp-visible")&&(this._el.root.classList.add("hfp-hiding"),this._el.root.classList.remove("hfp-visible"),this._scheduleCleanup())}reset(){this._hideTimeout&&(clearTimeout(this._hideTimeout),this._hideTimeout=null),this._el.root.classList.remove("hfp-visible","hfp-hiding"),this._el.fill.style.transform="scaleX(0)",this._el.transitionValue.textContent="",this._el.frameValue.textContent="",this._el.frameRow.style.visibility="hidden"}update(e,t){if(t!=="player"){this.reset();return}if(e.ready||!e.loading){this.hide();return}let i=typeof e.progress=="number"&&Number.isFinite(e.progress)?e.progress:0,n=typeof e.total=="number"&&Number.isFinite(e.total)?e.total:0,a=n>0?Math.min(1,Math.max(0,i/n)):0,s=Math.min(x.length-1,Math.floor(a*x.length));this._el.title.textContent=x[s]||"Preparing scene transitions",this._el.detail.textContent=e.phase==="cached"?"Loading cached transition frames before playback.":e.phase==="finalizing"?"Uploading transition textures for smooth playback.":"Rendering animated scene samples for shader transitions.",this._el.fill.style.transform=`scaleX(${a})`,this._el.transitionValue.textContent=e.currentTransition!==void 0&&e.transitionTotal!==void 0?`${e.currentTransition}/${e.transitionTotal}`:n>0?`${i}/${n}`:"";let d=e.transitionFrame!==void 0&&e.transitionFrames!==void 0?`${e.transitionFrame}/${e.transitionFrames}`:"";this._el.frameLabel.textContent=e.phase==="cached"?"cached transition frames":e.phase==="finalizing"?"finalizing transition frames":"rendering transition frames",this._el.frameValue.textContent=d,this._el.frameRow.style.visibility=d?"visible":"hidden",this._el.root.setAttribute("aria-valuenow",String(Math.round(a*100))),this.show()}get hideTimeout(){return this._hideTimeout}destroy(){this._hideTimeout&&(clearTimeout(this._hideTimeout),this._hideTimeout=null)}_scheduleCleanup(){this._hideTimeout&&clearTimeout(this._hideTimeout),this._hideTimeout=setTimeout(()=>{this._el.root.classList.remove("hfp-hiding"),this._hideTimeout=null},tt)}};var it=.1,rt=5;function te(r){return!Number.isFinite(r)||r<=0?1:Math.max(it,Math.min(rt,r))}var X=class extends HTMLElement{static get observedAttributes(){return["src","srcdoc","width","height","controls","muted","audio-locked","volume","poster","playback-rate","audio-src",S,C]}shadow;container;iframe;posterEl=null;controlsApi=null;resizeObserver;shaderLoader;probe;_ready=!1;_currentTime=0;_duration=0;_paused=!0;_lastUpdateMs=0;_volume=1;_compositionWidth=1920;_compositionHeight=1080;_directTimelineAdapter=null;_directTimelineClock;_parentTickRaf=null;_media;_scenes=[];constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),Ce(this.shadow,ye),{container:this.container,iframe:this.iframe}=xe(),this.shadow.appendChild(this.container);let e=Oe();this.shadow.appendChild(e.root),this.shaderLoader=new q(e),this._media=new W({dispatchEvent:t=>this.dispatchEvent(t),getMuted:()=>this.muted,getVolume:()=>this._volume,getPlaybackRate:()=>this.playbackRate,getCurrentTime:()=>this._currentTime,isPaused:()=>this._paused}),this._directTimelineClock=new z({onTimeUpdate:(t,i)=>{this._currentTime=t,this.controlsApi?.updateTime(t,i),this.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:t}}))},getLoop:()=>this.loop,restart:()=>{this.seek(0),this.play()},onPaused:()=>{this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,this.controlsApi?.updatePlaying(!1),this.dispatchEvent(new Event("ended"))},onEnded:()=>this.loop}),this.probe=new U(this.iframe,{onReady:t=>this._onProbeReady(t),onError:t=>this.dispatchEvent(new CustomEvent("error",{detail:{message:t}}))}),this.addEventListener("click",t=>{Ae(t)||(this._paused?this.play():this.pause())}),this.resizeObserver=new ResizeObserver(()=>this._rescale()),this._onMessage=this._onMessage.bind(this),this._onIframeLoad=this._onIframeLoad.bind(this)}connectedCallback(){this.resizeObserver.observe(this),window.addEventListener("message",this._onMessage),this.iframe.addEventListener("load",this._onIframeLoad),this.hasAttribute("controls")&&this._setupControls(),this.hasAttribute("poster")&&(this.posterEl=K(this.shadow,this.getAttribute("poster"),this.posterEl)),this.hasAttribute("audio-src")&&this._media.setupFromUrl(this.getAttribute("audio-src")),this.hasAttribute("srcdoc")&&(this.iframe.srcdoc=G(this,this.getAttribute("srcdoc"))),this.hasAttribute("src")&&(this.iframe.src=B(this,this.getAttribute("src"))),!this.hasAttribute("audio-locked")&&this._isLockedHostEnvironment()&&this._applyAudioLock(!0)}disconnectedCallback(){this.resizeObserver.disconnect(),window.removeEventListener("message",this._onMessage),this.iframe.removeEventListener("load",this._onIframeLoad),this.probe.stop(),this._directTimelineClock.stop(),this._stopParentTickClock(),this._directTimelineAdapter=null,this.shaderLoader.destroy(),this._media.destroy(),this.controlsApi?.destroy()}attributeChangedCallback(e,t,i){switch(e){case"src":i&&(this._ready=!1,this.iframe.src=B(this,i));break;case"srcdoc":this._ready=!1,i!==null?this.iframe.srcdoc=G(this,i):this.iframe.removeAttribute("srcdoc");break;case"width":this._compositionWidth=P(i)??1920,this._rescale();break;case"height":this._compositionHeight=P(i)??1080,this._rescale();break;case"controls":i!==null?this._setupControls():(this.controlsApi?.destroy(),this.controlsApi=null);break;case"poster":this.posterEl=K(this.shadow,i,this.posterEl);break;case"playback-rate":{let n=te(parseFloat(i||"1"));this._media.updatePlaybackRate(n),this._sendControl("set-playback-rate",{playbackRate:n}),this._directTimelineAdapter?.timeScale?.(n),this.controlsApi?.updateSpeed(n),this.dispatchEvent(new Event("ratechange"));break}case"muted":this._handleMutedChange(i);break;case"audio-locked":this._applyAudioLock(i!==null);break;case"volume":{let n=Math.max(0,Math.min(1,parseFloat(i||"1")));this._volume=n,this._media.updateVolume(n),this._sendControl("set-volume",{volume:n}),this.controlsApi?.updateVolume(n),this.dispatchEvent(new Event("volumechange"));break}case"audio-src":i?this._media.setupFromUrl(i):this._media.teardownUrlAudio();break;case S:case C:this._reloadShaderOptions();break}}get iframeElement(){return this.iframe}get scenes(){return this._scenes}play(){this.posterEl?.remove(),this.posterEl=null,this._duration>0&&this._currentTime>=this._duration&&this.seek(0),this._paused=!1;let e=this._tryDirectTimelinePlay();e||(this._sendControl("play"),this._ready&&!this._directTimelineAdapter&&this._startParentTickClock()),this._media.audioOwner==="parent"&&this._media.playAll(),this.controlsApi?.updatePlaying(!0),this.dispatchEvent(new Event("play")),e&&this._directTimelineAdapter&&this._directTimelineClock.start(this._directTimelineAdapter,()=>this._currentTime,()=>this._duration,()=>this._paused)}pause(){this._tryDirectTimelinePause()||this._sendControl("pause"),this._directTimelineClock.stop(),this._stopParentTickClock(),this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,this.controlsApi?.updatePlaying(!1),this.dispatchEvent(new Event("pause"))}stopMedia(){this._sendControl("stop-media"),this._stopIframeMedia(),this._media.stopAdoptedMedia()}seek(e){!this._trySyncSeek(e)&&!this._tryDirectTimelineSeek(e)&&this._sendControl("seek",{frame:Math.round(e*30)}),this._directTimelineClock.stop(),this._stopParentTickClock(),this._currentTime=e,this._media.audioOwner==="parent"&&(this._media.pauseAll(),this._media.seekAll(e)),this._paused=!0,this.controlsApi?.updatePlaying(!1),this.controlsApi?.updateTime(this._currentTime,this._duration)}setColorGrading(e,t){this._sendControl("set-color-grading",{target:e,grading:t})}clearColorGrading(e){this._sendControl("set-color-grading",{target:e,grading:null})}setColorGradingCompare(e,t){this._sendControl("set-color-grading-compare",{target:e,compare:t})}clearColorGradingCompare(e){this._sendControl("set-color-grading-compare",{target:e,compare:{enabled:!1}})}get currentTime(){return this._currentTime}set currentTime(e){this.seek(e)}get duration(){return this._duration}get paused(){return this._paused}get ready(){return this._ready}get playbackRate(){return te(parseFloat(this.getAttribute("playback-rate")||"1"))}set playbackRate(e){this.setAttribute("playback-rate",String(te(e)))}get shaderCaptureScale(){return Ie(this)}set shaderCaptureScale(e){this.setAttribute(S,String(e))}get shaderLoading(){return M(this)}set shaderLoading(e){e==="composition"?this.removeAttribute(C):this.setAttribute(C,e)}get muted(){return this.hasAttribute("muted")}set muted(e){e?this.setAttribute("muted",""):this.removeAttribute("muted")}get audioLocked(){return this.hasAttribute("audio-locked")}set audioLocked(e){e?this.setAttribute("audio-locked",""):this.removeAttribute("audio-locked")}_isLockedHostEnvironment(){if(typeof navigator>"u")return!1;let e=navigator.userAgent||"";return/\bClaude\/\d/.test(e)&&/\bElectron\b/.test(e)}_isAudioLocked(){return this.hasAttribute("audio-locked")||this._isLockedHostEnvironment()}_isSlideshowPlayer(){return this.closest("hyperframes-slideshow")!==null}_handleMutedChange(e){if(e===null&&this._isAudioLocked()){this.setAttribute("muted","");return}this._media.updateMuted(e!==null),this._setIframeMediaMuted(e!==null),this._sendControl("set-muted",{muted:e!==null}),this.controlsApi?.updateMuted(e!==null),this.dispatchEvent(new Event("volumechange"))}_applyAudioLock(e){e&&(this.muted=!0),this.controlsApi?.setVolumeControlsHidden(e)}get volume(){return this._volume}set volume(e){this.setAttribute("volume",String(Math.max(0,Math.min(1,e))))}get loop(){return this.hasAttribute("loop")}set loop(e){e?this.setAttribute("loop",""):this.removeAttribute("loop")}_sendControl(e,t={}){try{this.iframe.contentWindow?.postMessage({source:"hf-parent",type:"control",action:e,...t},"*")}catch{}}_getSameOriginIframeDocument(){try{return this.iframe.contentDocument}catch{return null}}_setIframeMediaMuted(e){let t=this._getSameOriginIframeDocument();if(t)for(let i of t.querySelectorAll("video, audio"))v(i)&&(i.muted=e||i.defaultMuted)}_stopIframeMedia(){let e=this._getSameOriginIframeDocument();if(e)for(let t of e.querySelectorAll("video, audio"))v(t)&&t.pause()}_replayBridgeState(){this._sendControl("set-muted",{muted:this.muted}),this._sendControl("set-volume",{volume:this._volume}),this._sendControl("set-playback-rate",{playbackRate:this.playbackRate}),this._sendControl("set-native-media-sync-disabled",{disabled:this._isSlideshowPlayer()}),this._sendControl("set-web-audio-media-disabled",{disabled:this._isSlideshowPlayer()})}_reloadShaderOptions(){if(M(this)!=="player"&&this.shaderLoader.reset(),this.hasAttribute("srcdoc")){this.iframe.srcdoc=G(this,this.getAttribute("srcdoc")||"");return}this.hasAttribute("src")&&(this.iframe.src=B(this,this.getAttribute("src")||""))}_trySyncSeek(e){try{let i=this.iframe.contentWindow?.__player;return typeof i?.seek!="function"?!1:(i.seek.call(i,e),!0)}catch{return!1}}_withDirectTimeline(e){let t=this._directTimelineAdapter||this.probe.resolveDirectTimelineAdapter();if(!t)return!1;try{return e(t),this._directTimelineAdapter=t,!0}catch{return!1}}_tryDirectTimelineSeek(e){return this._withDirectTimeline(t=>{t.seek(e,!1),t.pause()})}_tryDirectTimelinePlay(){return this._withDirectTimeline(e=>{e.play()})}_tryDirectTimelinePause(){return this._withDirectTimeline(e=>{e.pause()})}_startParentTickClock(){this._stopParentTickClock();let e=()=>{if(this._paused){this._parentTickRaf=null;return}this._sendControl("tick"),this._parentTickRaf=requestAnimationFrame(e)};this._parentTickRaf=requestAnimationFrame(e)}_stopParentTickClock(){this._parentTickRaf!==null&&(cancelAnimationFrame(this._parentTickRaf),this._parentTickRaf=null)}_onMessage(e){Re(e,this.iframe.contentWindow,{getPlaybackState:()=>({currentTime:this._currentTime,duration:this._duration,paused:this._paused,lastUpdateMs:this._lastUpdateMs}),setPlaybackState:({currentTime:t,duration:i,paused:n,lastUpdateMs:a})=>{this._currentTime=t,this._duration=i,this._paused=n,this._lastUpdateMs=a},getShaderLoadingMode:()=>M(this),shaderLoader:this.shaderLoader,setCompositionSize:(t,i)=>{this._compositionWidth=t,this._compositionHeight=i,this._rescale()},sendControl:(t,i)=>this._sendControl(t,i),getIframeDoc:()=>this.iframe.contentDocument,onRuntimeReady:()=>this._replayBridgeState(),onRuntimeTimelineReady:t=>this._onRuntimeTimelineReady(t),shouldPromoteMediaAutoplayFallback:()=>!this._isSlideshowPlayer(),setScenes:t=>{this._scenes=t,this.dispatchEvent(new CustomEvent("scenes",{detail:{scenes:t}}))},updateControlsTime:(t,i)=>this.controlsApi?.updateTime(t,i),updateControlsPlaying:t=>this.controlsApi?.updatePlaying(t),dispatchEvent:t=>this.dispatchEvent(t),seek:t=>this.seek(t),play:()=>this.play(),getLoop:()=>this.loop,media:this._media})}_onRuntimeTimelineReady(e){if(this._ready)return;this.probe.stop(),this._duration=e,this._directTimelineAdapter=null,this._ready=!0,this.controlsApi?.updateTime(this._currentTime,e),this.dispatchEvent(new CustomEvent("ready",{detail:{duration:e}}));let t=this._getSameOriginIframeDocument();t&&this._media.setupFromIframe(t),this._replayBridgeState(),this._setIframeMediaMuted(this.muted),this.hasAttribute("autoplay")&&this.play()}_onProbeReady({duration:e,adapter:t,compositionSize:i}){this._duration=e,this._directTimelineAdapter=t.kind==="direct-timeline"?t.timeline:null,this._ready=!0,this.controlsApi?.updateTime(0,e),this.dispatchEvent(new CustomEvent("ready",{detail:{duration:e}})),i&&(this._compositionWidth=i.width,this._compositionHeight=i.height,this._rescale());try{let n=this.iframe.contentDocument;n&&this._media.setupFromIframe(n)}catch{}this._setIframeMediaMuted(this.muted),this.hasAttribute("autoplay")&&this.play()}_rescale(){Me(this,this.iframe,this._compositionWidth,this._compositionHeight)}_onIframeLoad(){this._directTimelineAdapter=null,this._directTimelineClock.stop(),this._stopParentTickClock(),this.shaderLoader.reset(),this._media.resetForIframeLoad(),this.probe.start()}_setupControls(){this.controlsApi||(this.controlsApi=we(this.shadow,this.muted,this._volume,this.getAttribute("speed-presets"),{onPlay:()=>this.play(),onPause:()=>this.pause(),onSeek:e=>this.seek(e*this._duration),onSpeedChange:e=>{this.playbackRate=e},onMuteToggle:()=>{this.muted=!this.muted},onVolumeChange:e=>{this.volume=e}},this._isAudioLocked()))}get _audioOwner(){return this._media.audioOwner}get _parentMedia(){return this._media.entries}_mirrorParentMediaTime(e,t){this._media.mirrorTime(e,t)}_promoteToParentProxy(){let e=null;try{e=this.iframe.contentDocument}catch{}this._media.promoteToParentProxy(e,(t,i)=>this._mirrorParentMediaTime(t,i)),this._sendControl("set-media-output-muted",{muted:!0})}_observeDynamicMedia(e){this._media.setupFromIframe(e)}};customElements.get("hyperframes-player")||customElements.define("hyperframes-player",X);return ze(nt);})();
 //# sourceMappingURL=hyperframes-player.global.js.map

package/dist/skills/hyperframes-cli/SKILL.md

@@ -14,7 +14,7 @@ Everything runs through `npx hyperframes` unless project instructions specify a
 3. **Lint** — `npx hyperframes lint`
 4. **Validate** — `npx hyperframes validate` (runtime errors + contrast)
 5. **Visual inspect** — `npx hyperframes inspect`
-6. **Preview** — `npx hyperframes preview` opens **Studio**, the timeline editor where the user can manually edit anything (not just watch). Review there, then ask before rendering.
+6. **Preview / edit** — `npx hyperframes preview` opens **Studio**, the timeline editor where the user can manually edit anything (not just watch). Review there, then ask before rendering.
 7. **Render** — pick the variant:
    - Iterate: `npx hyperframes render --quality draft`
    - Deliver: `npx hyperframes render --quality high --output out.mp4`
@@ -29,12 +29,14 @@ For motion-heavy work, prefer snapshot-driven iteration and a `*.motion.json` si
 
 Cross-cutting rules that hold for every command:
 
-- **`--json` is available on every command except `render`, `preview`, and `play`.** Use it for any agent / CI invocation of the supported commands; output includes a `_meta` envelope (cli version, latest available, update advice). `render` reports status via stdout + exit code only — verify success with the post-render check below; `preview` / `play` are servers, no JSON.
+- **`--json` is available on every command except `render`, `preview`, and `play` server modes.** Use it for any agent / CI invocation of the supported commands; output includes a `_meta` envelope (cli version, latest available, update advice). `render` reports status via stdout + exit code only — verify success with the post-render check below. `preview --selection --json` and `preview --context --json` are the preview exceptions: they do not start a server, they query the user's running Studio session and exit.
 - **`doctor --json` always exits 0**, even when the environment is broken. Gate on the payload's `ok` field: `npx hyperframes doctor --json | jq -e '.ok' > /dev/null`. This insulates pipelines from CLI release churn.
 - **Non-TTY mode is auto-detected.** When `stdout` is not a TTY (CI, agents, piped output) the CLI auto-switches to non-interactive; `init` then **requires `--example`**. Pass `--non-interactive` to force this mode even on a TTY.
 - **CI gating on render**: `--strict` fails on lint errors, `--strict-all` fails on warnings too, `--strict-variables` fails on undeclared `--variables` keys.
 - **Paths in `--json` are redacted** — `$HOME` becomes the literal `$HOME` so output is safe to paste into bug reports and agent contexts.
 - **Render is user-gated.** Never auto-render once the checks pass. Pause at `preview`, tell the user the video is editable in Studio, and render only after they approve.
+- **Use Studio context for user-directed edits.** When the user says "this selected element", "the thing I clicked", "current selection", or similar, ask them to select it in Studio, then run `npx hyperframes preview --context --json --context-fields selection`. Use the returned `selection.target.hfId` / `selector`, `selection.sourceFile`, `selection.currentTime`, and `selection.thumbnailUrl` to anchor the edit. If `selection` is `null` and `errors.selection.code` is `no-selection`, ask the user to click the element and rerun; do not guess from screenshots.
+- **Keep Studio context compact.** `preview --context --json` returns compact selection by default. Add `--context-fields selection`, `--context-fields selection,lint`, or `--context-fields lint` to avoid bloating agent context. Use `--context-detail full` only when you need heavy fields like computed styles, inline styles, or text-field metadata.
 - **Post-render verification.** After `render` returns exit 0, confirm the output file exists and has plausible size before reporting success: `[ -s "$OUTPUT" ] || echo "render produced no output"`. The CLI prints `◇  <path>` on success; for long renders also sanity-check duration with `ffprobe -i "$OUTPUT" -show_format -v error`.
 
 ## Routing

package/dist/skills/hyperframes-cli/references/preview-render.md

@@ -7,6 +7,8 @@ Serve, render, and share commands.
 ```bash
 npx hyperframes preview                   # serve current directory
 npx hyperframes preview --port 4567       # custom port (default 3002)
+npx hyperframes preview --selection --json # print the current Studio selection and exit
+npx hyperframes preview --context --json  # print compact agent context from Studio
 ```
 
 Hot-reloads on file changes. Opens Studio in the browser automatically — the full timeline editor, where the user can play the video and edit anything by hand before rendering. This is the review surface, not just a viewer.
@@ -19,6 +21,46 @@ http://localhost:<port>/#project/<project-name>
 
 Use the actual port and project directory name; treat `index.html` as source-code context, not the preview surface. For example, after `npx hyperframes preview --port 3017` in `codex-openai-video`, report `http://localhost:3017/#project/codex-openai-video`.
 
+### Agent context from Studio selection
+
+`preview --context` and `preview --selection` are the agent bridge into a running Studio session. They do **not** start a new server; they find the active preview server for the current project, read agent-useful state from Studio, print it, and exit.
+
+Use it when the user gives deictic edit instructions like "change this", "move the selected element", "make the card I clicked bigger", or "fix the current selection":
+
+```bash
+npx hyperframes preview --context --json --context-fields selection
+```
+
+The compact context payload includes the selected element's source file, composition path, current timeline time, `data-hf-id` / selector target, bounding box, text content, and a thumbnail URL for the selected element. Prefer `selection.target.hfId` when present; fall back to `selection.target.selector` only when no stable `data-hf-id` exists. If `selection` is `null`, inspect `errors.selection.code` (for example, `no-selection`).
+
+Keep agent context small by asking only for the slices you need:
+
+```bash
+npx hyperframes preview --context --json --context-fields selection
+npx hyperframes preview --context --json --context-fields lint
+npx hyperframes preview --context --json --context-fields selection,lint
+```
+
+Use `--context-detail full` only when the edit genuinely needs heavy selection fields such as `computedStyles`, `inlineStyles`, `dataAttributes`, or editable text-field metadata:
+
+```bash
+npx hyperframes preview --context --json --context-fields selection --context-detail full
+```
+
+`preview --selection --json` remains available when you explicitly want the full selected-element payload and do not need lint/server context.
+
+Failure modes:
+
+| Code                       | Meaning                                                                    |
+| -------------------------- | -------------------------------------------------------------------------- |
+| `preview-not-running`      | Start Studio first with `npx hyperframes preview`.                         |
+| `ambiguous-preview-server` | Multiple matching Studio servers are open; rerun with one listed `--port`. |
+| `preview-port-mismatch`    | The requested `--port` is not one of the matching Studio servers.          |
+| `no-selection`             | Studio is open, but the user has not selected an element yet.              |
+| `selection-unavailable`    | The running preview server does not expose selection context cleanly.      |
+
+If there is no selection, ask the user to click the target element in Studio and rerun the command. If the server error lists candidate ports, rerun the same command with `--port <candidate>`. Do not infer the target from a screenshot when the CLI can give a stable element target.
+
 ## play (lightweight player)
 
 ```bash