hyperframes 0.6.96 → 0.6.97

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/cli.js +1289 -696
  2. package/dist/hyperframe-runtime.js +22 -22
  3. package/dist/hyperframe.manifest.json +1 -1
  4. package/dist/hyperframe.runtime.iife.js +22 -22
  5. package/dist/studio/assets/hyperframes-player-Daj5djxa.js +418 -0
  6. package/dist/studio/assets/{index-BA979yF1.js → index-Cfye9xzo.js} +2 -2
  7. package/dist/studio/assets/{index-BWFaypdT.js → index-HveJ0MuV.js} +1 -1
  8. package/dist/studio/index.html +1 -1
  9. package/package.json +1 -1
  10. package/dist/studio/assets/hyperframes-player-0esDKGRk.js +0 -418
package/dist/studio/assets/{index-BWFaypdT.js → index-HveJ0MuV.js} RENAMED
@@ -1,4 +1,4 @@
1
- import{n as Qi}from"./index-BA979yF1.js";/*!
1
+ import{n as Qi}from"./index-Cfye9xzo.js";/*!
2
2
  * Copyright (c) 2026-present, Vanilagy and contributors
3
3
  *
4
4
  * This Source Code Form is subject to the terms of the Mozilla Public
package/dist/studio/index.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
6
6
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
7
7
  <title>HyperFrames Studio</title>
8
- <script type="module" crossorigin src="/assets/index-BA979yF1.js"></script>
8
+ <script type="module" crossorigin src="/assets/index-Cfye9xzo.js"></script>
9
9
  <link rel="stylesheet" crossorigin href="/assets/index-B0twsRu0.css">
10
10
  </head>
11
11
  <body>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperframes",
3
- "version": "0.6.96",
3
+ "version": "0.6.97",
4
4
  "description": "HyperFrames CLI — create, preview, and render HTML video compositions",
5
5
  "repository": {
6
6
  "type": "git",
package/dist/studio/assets/hyperframes-player-0esDKGRk.js DELETED
@@ -1,418 +0,0 @@
1
- var le=Object.defineProperty;var he=(n,t,e)=>t in n?le(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var h=(n,t,e)=>he(n,typeof t!="symbol"?t+"":t,e);function ce(n){return n.hasRuntime||n.runtimeInjected?!1:!!(n.hasNestedCompositions||n.hasTimelines&&n.attempts>=5)}function D(n){return typeof n=="object"&&n!==null}function ue(n){return D(n)&&typeof n.getDuration=="function"}function pe(n){return D(n)&&typeof n.duration=="function"&&typeof n.time=="function"&&typeof n.seek=="function"&&typeof n.play=="function"&&typeof n.pause=="function"}const me="https://cdn.jsdelivr.net/npm/@hyperframes/core/dist/hyperframe.runtime.iife.js";function ee(n){if(n===null)return null;const t=Number.parseInt(n,10);return Number.isFinite(t)&&t>0?t:null}function fe(n){const t=(n==null?void 0:n.querySelector("[data-composition-id][data-width][data-height]"))??(n==null?void 0:n.querySelector("[data-width][data-height]"));if(!t)return null;const e=ee(t.getAttribute("data-width")),i=ee(t.getAttribute("data-height"));return e!==null&&i!==null?{width:e,height:i}:null}class _e{constructor(t,e){h(this,"_interval",null);h(this,"_runtimeInjected",!1);this._iframe=t,this._callbacks=e}get runtimeInjected(){return this._runtimeInjected}start(){this.stop(),this._runtimeInjected=!1;let t=0;this._interval=setInterval(()=>{var e;t++;try{const i=this._iframe.contentWindow;if(!i)return;const r=!!(i.__hf||i.__player),s=!!(i.__timelines&&Object.keys(i.__timelines).length>0),a=!!((e=this._iframe.contentDocument)!=null&&e.querySelector("[data-composition-src]"));if(ce({hasRuntime:r,hasTimelines:s,hasNestedCompositions:a,runtimeInjected:this._runtimeInjected,attempts:t})){this._injectRuntime();return}if(this._runtimeInjected&&!r)return;const d=this._resolvePlaybackDurationAdapter(i);if(d&&d.getDuration()>0){this.stop();const c=fe(this._iframe.contentDocument);this._callbacks.onReady({duration:d.getDuration(),adapter:d,compositionSize:c});return}}catch{}t>=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{const t=this._iframe.contentWindow;return t?this._resolveDirectTimelineAdapterFromWindow(t):null}catch{return null}}resolveDirectTimelineAdapterFromWindow(t){return this._resolveDirectTimelineAdapterFromWindow(t)}hasRuntimeBridge(t){return Reflect.get(t,"__hf")!==void 0||D(Reflect.get(t,"__player"))}_injectRuntime(){var t,e;this._runtimeInjected=!0;try{const i=this._iframe.contentDocument;if(!i)return;const r=i.createElement("script");r.src=me,(i.head||i.documentElement).appendChild(r),(e=(t=this._callbacks).onRuntimeInjected)==null||e.call(t)}catch{}}_resolveDirectTimelineAdapterFromWindow(t){var d,c;if(this.hasRuntimeBridge(t))return null;const e=Reflect.get(t,"__timelines");if(!D(e))return null;const i=Object.keys(e);if(i.length===0)return null;const r=(c=(d=this._iframe.contentDocument)==null?void 0:d.querySelector("[data-composition-id]"))==null?void 0:c.getAttribute("data-composition-id"),s=r&&r in e?r:i[i.length-1],a=e[s];return pe(a)?a:null}_resolvePlaybackDurationAdapter(t){const e=Reflect.get(t,"__player");if(ue(e))return{kind:"runtime",getDuration:()=>e.getDuration()};const i=this._resolveDirectTimelineAdapterFromWindow(t);return i?{kind:"direct-timeline",timeline:i,getDuration:()=>i.duration()}:null}}const ge=`
2
- :host {
3
- display: block;
4
- position: relative;
5
- overflow: hidden;
6
- background: #000;
7
- contain: layout style;
8
- }
9
-
10
- .hfp-container {
11
- position: absolute;
12
- inset: 0;
13
- overflow: hidden;
14
- pointer-events: none;
15
- }
16
-
17
-
18
- .hfp-iframe {
19
- position: absolute;
20
- top: 50%;
21
- left: 50%;
22
- border: none;
23
- pointer-events: none;
24
- }
25
-
26
- .hfp-poster {
27
- position: absolute;
28
- inset: 0;
29
- object-fit: contain;
30
- z-index: 1;
31
- pointer-events: none;
32
- }
33
-
34
- .hfp-shader-loader {
35
- position: absolute;
36
- inset: 0;
37
- z-index: 20;
38
- display: grid;
39
- place-items: center;
40
- visibility: hidden;
41
- opacity: 0;
42
- pointer-events: none;
43
- background: #030504;
44
- color: #f4f7fb;
45
- cursor: default;
46
- user-select: none;
47
- -webkit-user-select: none;
48
- transition: opacity 420ms ease-out, visibility 420ms ease-out;
49
- }
50
-
51
- .hfp-shader-loader.hfp-visible,
52
- .hfp-shader-loader.hfp-hiding {
53
- visibility: visible;
54
- }
55
-
56
- .hfp-shader-loader.hfp-visible {
57
- opacity: 1;
58
- pointer-events: auto;
59
- }
60
-
61
- .hfp-shader-loader.hfp-hiding {
62
- opacity: 0;
63
- pointer-events: none;
64
- }
65
-
66
- .hfp-shader-loader-panel {
67
- display: grid;
68
- grid-template-rows: 86px 40px 26px 12px 44px;
69
- justify-items: center;
70
- align-items: center;
71
- gap: 8px;
72
- width: min(620px, 82%);
73
- text-align: center;
74
- font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
75
- }
76
-
77
- .hfp-shader-loader-mark {
78
- width: 86px;
79
- height: 86px;
80
- display: grid;
81
- place-items: center;
82
- overflow: visible;
83
- }
84
-
85
- .hfp-shader-loader-mark svg {
86
- display: block;
87
- overflow: visible;
88
- filter: drop-shadow(0 0 5px rgba(79, 219, 94, 0.16));
89
- pointer-events: none;
90
- }
91
-
92
- .hfp-shader-loader-title {
93
- width: 100%;
94
- height: 40px;
95
- overflow: hidden;
96
- white-space: nowrap;
97
- text-overflow: ellipsis;
98
- font-size: 26px;
99
- line-height: 40px;
100
- font-weight: 700;
101
- letter-spacing: 0;
102
- }
103
-
104
- .hfp-shader-loader-title-text {
105
- color: transparent;
106
- background: linear-gradient(
107
- 90deg,
108
- rgba(244, 247, 251, 0.84) 0%,
109
- #ffffff 42%,
110
- #80efe4 52%,
111
- #ffffff 62%,
112
- rgba(244, 247, 251, 0.84) 100%
113
- );
114
- background-size: 220% 100%;
115
- -webkit-background-clip: text;
116
- background-clip: text;
117
- animation: hfp-shader-loader-sheen 1.9s linear infinite;
118
- }
119
-
120
- .hfp-shader-loader-detail {
121
- width: 100%;
122
- height: 26px;
123
- overflow: hidden;
124
- white-space: nowrap;
125
- text-overflow: ellipsis;
126
- color: rgba(244, 247, 251, 0.62);
127
- font-size: 15px;
128
- line-height: 26px;
129
- font-weight: 500;
130
- }
131
-
132
- .hfp-shader-loader-track {
133
- width: min(360px, 100%);
134
- height: 8px;
135
- overflow: hidden;
136
- border-radius: 999px;
137
- background: rgba(255, 255, 255, 0.1);
138
- }
139
-
140
- .hfp-shader-loader-fill {
141
- width: 100%;
142
- height: 100%;
143
- border-radius: inherit;
144
- background: linear-gradient(90deg, #06e3fa, #4fdb5e);
145
- transform: scaleX(0);
146
- transform-origin: left center;
147
- transition: transform 160ms ease;
148
- }
149
-
150
- .hfp-shader-loader-progress {
151
- width: min(420px, 100%);
152
- height: 44px;
153
- display: grid;
154
- grid-template-rows: repeat(2, 22px);
155
- color: rgba(244, 247, 251, 0.48);
156
- font: 600 13px/22px "IBM Plex Mono", "SF Mono", "Fira Code", "Courier New", monospace;
157
- font-variant-numeric: tabular-nums;
158
- }
159
-
160
- .hfp-shader-loader-row {
161
- display: grid;
162
- grid-template-columns: minmax(0, 1fr) 74px;
163
- align-items: center;
164
- column-gap: 20px;
165
- width: 100%;
166
- white-space: nowrap;
167
- }
168
-
169
- .hfp-shader-loader-label {
170
- min-width: 0;
171
- overflow: hidden;
172
- text-align: left;
173
- text-overflow: ellipsis;
174
- }
175
-
176
- .hfp-shader-loader-value {
177
- text-align: right;
178
- }
179
-
180
- @keyframes hfp-shader-loader-sheen {
181
- from {
182
- background-position: 140% 0;
183
- }
184
- to {
185
- background-position: -140% 0;
186
- }
187
- }
188
-
189
- /* ── Theming via CSS custom properties ──
190
- *
191
- * Override from outside the shadow DOM:
192
- * hyperframes-player {
193
- * --hfp-controls-bg: linear-gradient(transparent, rgba(0,0,0,0.9));
194
- * --hfp-accent: #ff6b6b;
195
- * --hfp-font: "Inter", sans-serif;
196
- * }
197
- */
198
-
199
- .hfp-controls {
200
- position: absolute;
201
- bottom: 0;
202
- left: 0;
203
- right: 0;
204
- display: flex;
205
- align-items: center;
206
- gap: var(--hfp-controls-gap, 12px);
207
- padding: var(--hfp-controls-padding, 8px 16px);
208
- background: var(--hfp-controls-bg, linear-gradient(transparent, rgba(0, 0, 0, 0.7)));
209
- color: var(--hfp-color, #fff);
210
- font-family: var(--hfp-font, system-ui, -apple-system, sans-serif);
211
- font-size: var(--hfp-font-size, 13px);
212
- z-index: 10;
213
- pointer-events: auto;
214
- opacity: 1;
215
- transition: opacity 0.3s ease;
216
- user-select: none;
217
- }
218
-
219
- .hfp-controls.hfp-hidden {
220
- opacity: 0;
221
- pointer-events: none;
222
- }
223
-
224
- .hfp-play-btn {
225
- background: none;
226
- border: none;
227
- color: var(--hfp-color, #fff);
228
- cursor: pointer;
229
- padding: 8px;
230
- display: flex;
231
- align-items: center;
232
- justify-content: center;
233
- width: 40px;
234
- height: 40px;
235
- flex-shrink: 0;
236
- z-index: 10;
237
- }
238
-
239
- .hfp-play-btn:hover {
240
- opacity: 0.8;
241
- }
242
-
243
- .hfp-play-btn svg,
244
- .hfp-play-btn svg * {
245
- pointer-events: none;
246
- }
247
-
248
- .hfp-scrubber {
249
- flex: 1;
250
- min-width: 0;
251
- height: var(--hfp-scrubber-height, 4px);
252
- background: var(--hfp-scrubber-bg, rgba(255, 255, 255, 0.3));
253
- border-radius: var(--hfp-scrubber-radius, 2px);
254
- cursor: pointer;
255
- position: relative;
256
- overflow: hidden;
257
- }
258
-
259
- .hfp-scrubber:hover {
260
- height: var(--hfp-scrubber-height-hover, 6px);
261
- }
262
-
263
- .hfp-progress {
264
- position: absolute;
265
- top: 0;
266
- left: 0;
267
- height: 100%;
268
- background: var(--hfp-accent, #fff);
269
- pointer-events: none;
270
- }
271
-
272
- .hfp-time {
273
- flex-shrink: 0;
274
- font-variant-numeric: tabular-nums;
275
- opacity: 0.9;
276
- }
277
-
278
- .hfp-speed-wrap {
279
- position: relative;
280
- flex-shrink: 0;
281
- }
282
-
283
- .hfp-speed-btn {
284
- background: var(--hfp-speed-btn-bg, rgba(255, 255, 255, 0.15));
285
- border: none;
286
- border-radius: var(--hfp-speed-btn-radius, 4px);
287
- color: var(--hfp-color, #fff);
288
- cursor: pointer;
289
- font-family: var(--hfp-font, system-ui, -apple-system, sans-serif);
290
- font-size: 12px;
291
- font-variant-numeric: tabular-nums;
292
- font-weight: 600;
293
- padding: 4px 8px;
294
- min-width: 40px;
295
- text-align: center;
296
- transition: background 0.15s ease;
297
- }
298
-
299
- .hfp-speed-btn:hover {
300
- background: var(--hfp-speed-btn-bg-hover, rgba(255, 255, 255, 0.3));
301
- }
302
-
303
- .hfp-speed-menu {
304
- position: absolute;
305
- bottom: calc(100% + 8px);
306
- right: 0;
307
- background: var(--hfp-menu-bg, rgba(20, 20, 20, 0.95));
308
- backdrop-filter: blur(12px);
309
- -webkit-backdrop-filter: blur(12px);
310
- border: 1px solid var(--hfp-menu-border, rgba(255, 255, 255, 0.1));
311
- border-radius: var(--hfp-menu-radius, 8px);
312
- padding: 4px;
313
- display: flex;
314
- flex-direction: column;
315
- gap: 2px;
316
- min-width: 80px;
317
- opacity: 0;
318
- visibility: hidden;
319
- transform: translateY(4px);
320
- transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
321
- box-shadow: var(--hfp-menu-shadow, 0 8px 24px rgba(0, 0, 0, 0.4));
322
- }
323
-
324
- .hfp-speed-menu.hfp-open {
325
- opacity: 1;
326
- visibility: visible;
327
- transform: translateY(0);
328
- }
329
-
330
- .hfp-speed-option {
331
- background: none;
332
- border: none;
333
- border-radius: 4px;
334
- color: var(--hfp-menu-color, rgba(255, 255, 255, 0.7));
335
- cursor: pointer;
336
- font-family: var(--hfp-font, system-ui, -apple-system, sans-serif);
337
- font-size: 13px;
338
- font-variant-numeric: tabular-nums;
339
- padding: 6px 12px;
340
- text-align: left;
341
- transition: background 0.1s ease, color 0.1s ease;
342
- white-space: nowrap;
343
- }
344
-
345
- .hfp-speed-option:hover {
346
- background: var(--hfp-menu-hover-bg, rgba(255, 255, 255, 0.1));
347
- color: var(--hfp-color, #fff);
348
- }
349
-
350
- .hfp-speed-option.hfp-active {
351
- color: var(--hfp-accent, #fff);
352
- font-weight: 600;
353
- }
354
-
355
- .hfp-volume-wrap {
356
- position: relative;
357
- flex-shrink: 0;
358
- display: flex;
359
- align-items: center;
360
- gap: 0;
361
- }
362
-
363
- .hfp-mute-btn {
364
- background: none;
365
- border: none;
366
- color: var(--hfp-color, #fff);
367
- cursor: pointer;
368
- padding: 4px;
369
- display: flex;
370
- align-items: center;
371
- justify-content: center;
372
- width: 32px;
373
- height: 32px;
374
- flex-shrink: 0;
375
- }
376
-
377
- .hfp-mute-btn:hover {
378
- opacity: 0.8;
379
- }
380
-
381
- .hfp-mute-btn svg,
382
- .hfp-mute-btn svg * {
383
- pointer-events: none;
384
- }
385
-
386
- .hfp-volume-slider-wrap {
387
- width: 0;
388
- overflow: hidden;
389
- transition: width 0.2s ease;
390
- display: flex;
391
- align-items: center;
392
- }
393
-
394
- .hfp-volume-wrap:hover .hfp-volume-slider-wrap {
395
- width: 64px;
396
- }
397
-
398
- .hfp-volume-slider {
399
- width: 56px;
400
- height: var(--hfp-scrubber-height, 4px);
401
- background: var(--hfp-scrubber-bg, rgba(255, 255, 255, 0.3));
402
- border-radius: var(--hfp-scrubber-radius, 2px);
403
- cursor: pointer;
404
- position: relative;
405
- overflow: hidden;
406
- margin-left: 4px;
407
- margin-right: 4px;
408
- }
409
-
410
- .hfp-volume-fill {
411
- position: absolute;
412
- top: 0;
413
- left: 0;
414
- height: 100%;
415
- background: var(--hfp-accent, #fff);
416
- pointer-events: none;
417
- }
418
- `,te='<svg width="24" height="24" viewBox="0 0 18 18" fill="currentColor"><polygon points="4,2 16,9 4,16"/></svg>',be='<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>',ie='<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>',re='<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>',ve='<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>',ye=[.25,.5,1,1.5,2,4];function N(n){return Number.isInteger(n)?`${n}x`:`${n}x`}function ne(n){if(!Number.isFinite(n)||n<0)return"0:00";const t=Math.floor(n),e=Math.floor(t/60),i=t%60;return`${e}:${i.toString().padStart(2,"0")}`}function we(n,t,e={}){const i=e.speedPresets??ye,r=document.createElement("div");r.className="hfp-controls",r.addEventListener("click",o=>{o.stopPropagation()});const s=document.createElement("button");s.className="hfp-play-btn",s.type="button",s.innerHTML=te,s.setAttribute("aria-label","Play");const a=document.createElement("div");a.className="hfp-scrubber";const d=document.createElement("div");d.className="hfp-progress",d.style.width="0%",a.appendChild(d);const c=document.createElement("span");c.className="hfp-time",c.textContent="0:00 / 0:00";const m=document.createElement("div");m.className="hfp-speed-wrap";const u=document.createElement("button");u.className="hfp-speed-btn",u.type="button",u.textContent="1x",u.setAttribute("aria-label","Playback speed");const p=document.createElement("div");p.className="hfp-speed-menu",p.setAttribute("role","menu");for(const o of i){const l=document.createElement("button");l.className="hfp-speed-option",l.type="button",l.setAttribute("role","menuitem"),l.dataset.speed=String(o),l.textContent=N(o),o===1&&l.classList.add("hfp-active"),p.appendChild(l)}m.appendChild(p),m.appendChild(u);const g=document.createElement("div");g.className="hfp-volume-wrap";const f=document.createElement("button");f.className="hfp-mute-btn",f.type="button",f.innerHTML=ie,f.setAttribute("aria-label","Mute");const b=document.createElement("div");b.className="hfp-volume-slider-wrap";const _=document.createElement("div");_.className="hfp-volume-slider",_.setAttribute("role","slider"),_.setAttribute("aria-label","Volume"),_.setAttribute("aria-valuemin","0"),_.setAttribute("aria-valuemax","100"),_.setAttribute("aria-valuenow","100"),_.tabIndex=0;const y=document.createElement("div");y.className="hfp-volume-fill",y.style.width="100%",_.appendChild(y),b.appendChild(_),g.appendChild(b),g.appendChild(f),e.audioLocked&&(g.style.display="none"),r.appendChild(s),r.appendChild(a),r.appendChild(c),r.appendChild(g),r.appendChild(m),n.appendChild(r);let S=!1,A=!1,w=1,k=null;i.indexOf(1);const M=(o,l)=>o?ve:l===0||l<.5?re:ie;s.addEventListener("click",o=>{o.stopPropagation(),S?t.onPause():t.onPlay()}),f.addEventListener("click",o=>{o.stopPropagation(),t.onMuteToggle()});let E=!1;const P=o=>{const l=_.getBoundingClientRect(),v=Math.max(0,Math.min(1,(o-l.left)/l.width));w=v,y.style.width=`${v*100}%`,_.setAttribute("aria-valuenow",String(Math.round(v*100))),A&&v>0&&t.onMuteToggle(),f.innerHTML=M(A,v),t.onVolumeChange(v)};_.addEventListener("mousedown",o=>{o.stopPropagation(),E=!0,P(o.clientX)});const $=o=>{E&&P(o.clientX)},z=()=>{E=!1};document.addEventListener("mousemove",$),document.addEventListener("mouseup",z),_.addEventListener("touchstart",o=>{E=!0;const l=o.touches[0];l&&P(l.clientX)},{passive:!0});const j=o=>{if(E){const l=o.touches[0];l&&P(l.clientX)}},B=()=>{E=!1};document.addEventListener("touchmove",j,{passive:!0}),document.addEventListener("touchend",B);const q=.05;_.addEventListener("keydown",o=>{let l=w;if(o.key==="ArrowRight"||o.key==="ArrowUp")l=Math.min(1,w+q);else if(o.key==="ArrowLeft"||o.key==="ArrowDown")l=Math.max(0,w-q);else return;o.preventDefault(),o.stopPropagation(),w=l,y.style.width=`${l*100}%`,_.setAttribute("aria-valuenow",String(Math.round(l*100))),A&&l>0&&t.onMuteToggle(),f.innerHTML=M(A,l),t.onVolumeChange(l)});const W=o=>{for(const l of p.querySelectorAll(".hfp-speed-option"))l.classList.toggle("hfp-active",l.dataset.speed===String(o))};u.addEventListener("click",o=>{o.stopPropagation();const l=p.classList.toggle("hfp-open");u.setAttribute("aria-expanded",String(l))}),p.addEventListener("click",o=>{o.stopPropagation();const l=o.target.closest(".hfp-speed-option");if(!l)return;const v=parseFloat(l.dataset.speed);i.indexOf(v),u.textContent=N(v),W(v),p.classList.remove("hfp-open"),u.setAttribute("aria-expanded","false"),t.onSpeedChange(v)});const X=()=>{p.classList.remove("hfp-open"),u.setAttribute("aria-expanded","false")};document.addEventListener("click",X);const R=o=>{const l=a.getBoundingClientRect(),v=Math.max(0,Math.min(1,(o-l.left)/l.width));t.onSeek(v)};let T=!1;a.addEventListener("mousedown",o=>{o.stopPropagation(),T=!0,R(o.clientX)});const G=o=>{T&&R(o.clientX)},Y=()=>{T=!1};document.addEventListener("mousemove",G),document.addEventListener("mouseup",Y),a.addEventListener("touchstart",o=>{T=!0;const l=o.touches[0];l&&R(l.clientX)},{passive:!0});const Q=o=>{if(T){const l=o.touches[0];l&&R(l.clientX)}},J=()=>{T=!1};document.addEventListener("touchmove",Q,{passive:!0}),document.addEventListener("touchend",J);const K=()=>{k&&clearTimeout(k),k=setTimeout(()=>{S&&r.classList.add("hfp-hidden")},3e3)},Z=n instanceof ShadowRoot?n.host:n;return Z.addEventListener("mousemove",()=>{r.classList.remove("hfp-hidden"),K()}),Z.addEventListener("mouseleave",()=>{S&&r.classList.add("hfp-hidden")}),{updateTime(o,l){const v=l>0?Math.min(o,l):o,de=l>0?v/l*100:0;d.style.width=`${de}%`,c.textContent=`${ne(v)} / ${ne(l)}`},updatePlaying(o){S=o,s.innerHTML=o?be:te,s.setAttribute("aria-label",o?"Pause":"Play"),o?K():r.classList.remove("hfp-hidden")},updateSpeed(o){i.indexOf(o),u.textContent=N(o),W(o)},updateMuted(o){A=o,f.innerHTML=M(o,w),f.setAttribute("aria-label",o?"Unmute":"Mute")},updateVolume(o){w=o,y.style.width=`${o*100}%`,_.setAttribute("aria-valuenow",String(Math.round(o*100))),f.innerHTML=M(A,o)},setVolumeControlsHidden(o){g.style.display=o?"none":""},show(){r.style.display=""},hide(){r.style.display="none"},destroy(){document.removeEventListener("mousemove",G),document.removeEventListener("mouseup",Y),document.removeEventListener("touchmove",Q),document.removeEventListener("touchend",J),document.removeEventListener("mousemove",$),document.removeEventListener("mouseup",z),document.removeEventListener("touchmove",j),document.removeEventListener("touchend",B),document.removeEventListener("click",X),k&&clearTimeout(k)}}}function Ae(n,t,e,i,r,s=!1){const a=i?i.split(",").map(Number).filter(m=>!isNaN(m)&&m>0):void 0,d={...a?{speedPresets:a}:{},audioLocked:s},c=we(n,r,d);return c.updateMuted(t),c.updateVolume(e),c}function se(n,t,e){return t?(e||(e=document.createElement("img"),e.className="hfp-poster",n.appendChild(e)),e.src=t,e):(e==null||e.remove(),null)}function Ee(n){return n.composedPath().some(t=>t instanceof HTMLElement&&t.classList.contains("hfp-controls"))}let I=null;function Te(n,t){if(typeof CSSStyleSheet<"u")try{I||(I=new CSSStyleSheet,I.replaceSync(t)),n.adoptedStyleSheets=[I];return}catch{}const e=document.createElement("style");e.textContent=t,n.appendChild(e)}function Ce(){const n=document.createElement("div");n.className="hfp-container";const t=document.createElement("iframe");return t.className="hfp-iframe",t.sandbox.add("allow-scripts","allow-same-origin"),t.allow="autoplay; fullscreen",t.referrerPolicy="no-referrer",t.title="HyperFrames Composition",n.appendChild(t),{container:n,iframe:t}}function ke(n,t,e,i){const r=n.offsetWidth,s=n.offsetHeight;if(r===0||s===0)return;const a=Math.min(r/e,s/i);t.style.width=`${e}px`,t.style.height=`${i}px`,t.style.transform=`translate(-50%, -50%) scale(${a})`}const xe=100;class Le{constructor(t){h(this,"_raf",null);h(this,"_lastUpdateMs",0);this._callbacks=t}start(t,e,i,r){this.stop();const s=()=>{if(r()){this._raf=null;return}let a;try{a=t.time()}catch{this._raf=null;return}const d=i();d>0&&(a=Math.min(a,d));const c=d>0&&a>=d,m=performance.now();if((m-this._lastUpdateMs>xe||c)&&(this._lastUpdateMs=m,this._callbacks.onTimeUpdate(a,d)),c){if(this._callbacks.getLoop()){this._callbacks.restart();return}try{t.pause()}catch{}this._callbacks.onPaused(),this._raf=null;return}this._raf=requestAnimationFrame(s)};this._raf=requestAnimationFrame(s)}stop(){this._raf!==null&&(cancelAnimationFrame(this._raf),this._raf=null)}get isRunning(){return this._raf!==null}}function Se(n){const t=Array.from(n.querySelectorAll("[data-composition-id]"));if(t.length===0)return n.body?[n.body]:[];const e=[];for(const i of t)Pe(i)||e.push(i);return Me(n),e}function Me(n){const t=n.body;if(!t||typeof console>"u"||typeof console.warn!="function")return;const e=t.querySelectorAll("audio[data-start], video[data-start]");if(e.length===0)return;const i=[];for(const r of e)r.closest("[data-composition-id]")||i.push(r);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 Pe(n){let t=n.parentElement;for(;t;){if(t.hasAttribute("data-composition-id"))return!0;t=t.parentElement}return!1}const Re=.05,Ie=2;class Oe{constructor(t){h(this,"_entries",[]);h(this,"_mediaObserver");h(this,"_playbackErrorPosted",!1);h(this,"_audioOwner","runtime");h(this,"_dispatchEvent");h(this,"_getMuted");h(this,"_getVolume");h(this,"_getPlaybackRate");h(this,"_getCurrentTime");h(this,"_isPaused");this._dispatchEvent=t.dispatchEvent,this._getMuted=t.getMuted,this._getVolume=t.getVolume,this._getPlaybackRate=t.getPlaybackRate,this._getCurrentTime=t.getCurrentTime,this._isPaused=t.isPaused}get audioOwner(){return this._audioOwner}get entries(){return this._entries}get playbackErrorPosted(){return this._playbackErrorPosted}resetForIframeLoad(){this._playbackErrorPosted=!1;const t=this._audioOwner==="parent";this._audioOwner="runtime",this.pauseAll(),this.teardownObserver(),t&&this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"runtime",reason:"iframe-reload"}}))}destroy(){this.teardownObserver();for(const t of this._entries)t.el.pause(),t.el.src="";this._entries=[]}updateMuted(t){for(const e of this._entries)e.el.muted=t}updateVolume(t){for(const e of this._entries)e.el.volume=t}updatePlaybackRate(t){for(const e of this._entries)e.el.playbackRate=t}playAll(){for(const t of this._entries)t.el.src&&t.el.play().catch(e=>this._reportPlaybackError(e))}pauseAll(){for(const t of this._entries)t.el.pause()}seekAll(t){for(const e of this._entries){const i=t-e.start;i>=0&&i<e.duration&&(e.el.currentTime=i)}}mirrorTime(t,e){const i=(e==null?void 0:e.force)===!0;for(const r of this._entries){const s=t-r.start;if(s<0||s>=r.duration){r.driftSamples=0;continue}Math.abs(r.el.currentTime-s)>Re?(r.driftSamples+=1,(i||r.driftSamples>=Ie)&&(r.el.currentTime=s,r.driftSamples=0)):r.driftSamples=0}}promoteToParentProxy(t,e){if(this._audioOwner==="parent")return;if(this._audioOwner="parent",t)for(const r of t.querySelectorAll("video, audio"))r.muted=!0;const i=this._getCurrentTime();e?e(i,{force:!0}):this.mirrorTime(i,{force:!0}),this._isPaused()||this.playAll(),this._dispatchEvent(new CustomEvent("audioownershipchange",{detail:{owner:"parent",reason:"autoplay-blocked"}}))}setupFromIframe(t){const e=t.querySelectorAll("audio[data-start], video[data-start]");for(const i of e)this._adoptIframeMedia(i);this._observeDynamicMedia(t)}setupFromUrl(t){this._createEntry(t,"audio",0,1/0)}teardownObserver(){var t;(t=this._mediaObserver)==null||t.disconnect(),this._mediaObserver=void 0}_reportPlaybackError(t){this._playbackErrorPosted||(this._playbackErrorPosted=!0,this._dispatchEvent(new CustomEvent("playbackerror",{detail:{source:"parent-proxy",error:t}})))}_createEntry(t,e,i,r){if(this._entries.some(c=>c.el.src===t))return null;const s=e==="video"?document.createElement("video"):new Audio;s.preload="auto",s.src=t,s.load(),s.muted=this._getMuted(),s.volume=this._getVolume();const a=this._getPlaybackRate();a!==1&&(s.playbackRate=a);const d={el:s,start:i,duration:r,driftSamples:0};return this._entries.push(d),d}_adoptIframeMedia(t){var c;if(t.preload==="metadata"||t.preload==="none")return;const e=t.getAttribute("src")||((c=t.querySelector("source"))==null?void 0:c.getAttribute("src"));if(!e)return;const i=new URL(e,t.ownerDocument.baseURI).href,r=parseFloat(t.getAttribute("data-start")||"0"),s=parseFloat(t.getAttribute("data-duration")||"Infinity"),a=t.tagName==="VIDEO"?"video":"audio",d=this._createEntry(i,a,r,s);d&&this._audioOwner==="parent"&&(this.mirrorTime(this._getCurrentTime(),{force:!0}),!this._isPaused()&&d.el.src&&d.el.play().catch(m=>this._reportPlaybackError(m)))}_detachIframeMedia(t){var a;const e=t.getAttribute("src")||((a=t.querySelector("source"))==null?void 0:a.getAttribute("src"));if(!e)return;const i=new URL(e,t.ownerDocument.baseURI).href,r=this._entries.findIndex(d=>d.el.src===i);if(r===-1)return;const s=this._entries[r];s.el.pause(),s.el.src="",this._entries.splice(r,1)}_observeDynamicMedia(t){if(this.teardownObserver(),typeof MutationObserver>"u"||!t.body)return;const e=new MutationObserver(s=>{var a,d,c,m;for(const u of s){if(u.type==="attributes"&&u.attributeName==="preload"){const p=u.target;p instanceof HTMLMediaElement&&p.matches("audio[data-start], video[data-start]")&&p.preload==="auto"&&this._adoptIframeMedia(p);continue}for(const p of u.addedNodes){if(!(p instanceof Element))continue;const g=[];(a=p.matches)!=null&&a.call(p,"audio[data-start], video[data-start]")&&g.push(p);const f=(d=p.querySelectorAll)==null?void 0:d.call(p,"audio[data-start], video[data-start]");if(f)for(const b of f)g.push(b);for(const b of g)this._adoptIframeMedia(b)}for(const p of u.removedNodes){if(!(p instanceof Element))continue;const g=[];(c=p.matches)!=null&&c.call(p,"audio[data-start], video[data-start]")&&g.push(p);const f=(m=p.querySelectorAll)==null?void 0:m.call(p,"audio[data-start], video[data-start]");if(f)for(const b of f)g.push(b);for(const b of g)this._detachIframeMedia(b)}}}),i={childList:!0,subtree:!0,attributes:!0,attributeFilter:["preload"]},r=Se(t);for(const s of r)e.observe(s,i);this._mediaObserver=e}}const De=100;function Ne(n,t,e,i){const r=(n.frame??0)/t,s=e.duration>0?Math.min(r,e.duration):r,a=!e.paused,d=!n.isPlaying,c=e.duration>0&&s>=e.duration&&(a||n.isPlaying);if(c&&i.getLoop())return i.media.audioOwner==="parent"&&i.media.pauseAll(),i.seek(0),i.play(),{...e,currentTime:s,paused:!1};const m={...e,currentTime:s,paused:d};i.media.audioOwner==="parent"&&(a&&d?i.media.pauseAll():!a&&!d&&i.media.playAll(),i.media.mirrorTime(s));const u=performance.now(),p=d!==e.paused;return(u-e.lastUpdateMs>De||p)&&(m.lastUpdateMs=u,i.updateControlsTime(s,e.duration),i.updateControlsPlaying(!d),i.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:s}}))),c&&(i.media.audioOwner==="parent"&&i.media.pauseAll(),m.paused=!0,i.updateControlsPlaying(!1),i.dispatchEvent(new Event("ended"))),m}const oe=30;function Fe(n,t,e){if(n.source!==t)return;const i=n.data;if(!(!i||i.source!=="hf-preview")){if(i.type==="shader-transition-state"){const r=i.state&&typeof i.state=="object"?i.state:{};e.shaderLoader.update(r,e.getShaderLoadingMode()),e.dispatchEvent(new CustomEvent("shadertransitionstate",{detail:{compositionId:i.compositionId,state:r}}));return}if(i.type==="ready"){e.onRuntimeReady();return}if(i.type==="state"){e.setPlaybackState(Ne({frame:i.frame??0,isPlaying:!!i.isPlaying},oe,e.getPlaybackState(),e));return}if(i.type==="media-autoplay-blocked"){let r=null;try{r=e.getIframeDoc()}catch{}e.media.promoteToParentProxy(r,(s,a)=>e.media.mirrorTime(s,a)),e.sendControl("set-media-output-muted",{muted:!0});return}if(i.type==="timeline"&&i.durationInFrames>0){if(Number.isFinite(i.durationInFrames)){const r=e.getPlaybackState(),s=i.durationInFrames/oe;e.setPlaybackState({...r,duration:s}),e.updateControlsTime(r.currentTime,s)}return}i.type==="stage-size"&&i.width>0&&i.height>0&&e.setCompositionSize(i.width,i.height)}}const C="shader-capture-scale",x="shader-loading",Ue="__hf_shader_capture_scale",He="__hf_shader_loading",O=["Preparing scene transitions","Sampling outgoing scene motion","Sampling incoming scene motion","Caching transition frames","Finalizing transition preview"];function V(n){if(n===null)return null;const t=Number(n);return!Number.isFinite(t)||t<=0?null:String(Math.min(1,Math.max(.25,t)))}function Ve(n){if(n===null||n.trim()==="")return"composition";const t=n.trim().toLowerCase();return t==="none"||t==="false"||t==="0"||t==="off"?"none":t==="player"||t==="true"||t==="1"||t==="on"?"player":"composition"}function ae(n,t,e){e===null?n.delete(t):n.set(t,e)}function $e(n,t,e){const i=n.indexOf("#"),r=i>=0?n.slice(0,i):n,s=i>=0?n.slice(i):"",a=r.indexOf("?"),d=a>=0?r.slice(0,a):r,c=a>=0?r.slice(a+1):"",m=new URLSearchParams(c);ae(m,Ue,t),ae(m,He,e==="composition"?null:e);const u=m.toString();return`${d}${u?`?${u}`:""}${s}`}function ze(n,t,e){if(t===null&&e==="composition")return n;const i=[];t!==null&&i.push(`window.__HF_SHADER_CAPTURE_SCALE=${JSON.stringify(t)};`),e!=="composition"&&i.push(`window.__HF_SHADER_LOADING=${JSON.stringify(e)};`);const r=`<script data-hyperframes-player-shader-options>${i.join("")}<\/script>`;return/<head\b[^>]*>/i.test(n)?n.replace(/<head\b[^>]*>/i,s=>`${s}${r}`):/<html\b[^>]*>/i.test(n)?n.replace(/<html\b[^>]*>/i,s=>`${s}${r}`):`${r}${n}`}function L(n){return Ve(n.getAttribute(x))}function je(n){return Number(V(n.getAttribute(C))??"1")}function F(n,t){return $e(t,V(n.getAttribute(C)),L(n))}function U(n,t){return ze(t,V(n.getAttribute(C)),L(n))}function Be(){const n=document.createElement("div");n.className="hfp-shader-loader",n.setAttribute("role","status"),n.setAttribute("aria-live","polite"),n.setAttribute("aria-label","Preparing scene transitions"),n.setAttribute("data-hyperframes-ignore",""),n.draggable=!1;const t=f=>{f.preventDefault(),f.stopPropagation()};for(const f of["selectstart","dragstart","pointerdown","mousedown","click","dblclick","contextmenu","touchstart"])n.addEventListener(f,t,{capture:!0});const e=document.createElement("div");e.className="hfp-shader-loader-panel",e.draggable=!1;const 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("");const r=document.createElement("div");r.className="hfp-shader-loader-title";const s=document.createElement("span");s.className="hfp-shader-loader-title-text",s.textContent=O[0],r.appendChild(s);const a=document.createElement("div");a.className="hfp-shader-loader-detail",a.textContent="Rendering animated scene samples for shader transitions.";const d=document.createElement("div");d.className="hfp-shader-loader-track",d.setAttribute("aria-hidden","true");const c=document.createElement("div");c.className="hfp-shader-loader-fill",d.appendChild(c);const m=document.createElement("div");m.className="hfp-shader-loader-progress";const u=f=>{const b=document.createElement("div");b.className="hfp-shader-loader-row";const _=document.createElement("span");_.className="hfp-shader-loader-label",_.textContent=f;const y=document.createElement("span");return y.className="hfp-shader-loader-value",b.appendChild(_),b.appendChild(y),m.appendChild(b),{row:b,label:_,value:y}},p=u("transition"),g=u("transition frame");return e.appendChild(i),e.appendChild(r),e.appendChild(a),e.appendChild(d),e.appendChild(m),n.appendChild(e),{root:n,fill:c,title:s,detail:a,transitionValue:p.value,frameLabel:g.label,frameValue:g.value,frameRow:g.row}}const qe=420;class We{constructor(t){h(this,"_el");h(this,"_hideTimeout",null);this._el=t}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(t,e){if(e!=="player"){this.reset();return}if(t.ready||!t.loading){this.hide();return}const i=typeof t.progress=="number"&&Number.isFinite(t.progress)?t.progress:0,r=typeof t.total=="number"&&Number.isFinite(t.total)?t.total:0,s=r>0?Math.min(1,Math.max(0,i/r)):0,a=Math.min(O.length-1,Math.floor(s*O.length));this._el.title.textContent=O[a]||"Preparing scene transitions",this._el.detail.textContent=t.phase==="cached"?"Loading cached transition frames before playback.":t.phase==="finalizing"?"Uploading transition textures for smooth playback.":"Rendering animated scene samples for shader transitions.",this._el.fill.style.transform=`scaleX(${s})`,this._el.transitionValue.textContent=t.currentTransition!==void 0&&t.transitionTotal!==void 0?`${t.currentTransition}/${t.transitionTotal}`:r>0?`${i}/${r}`:"";const d=t.transitionFrame!==void 0&&t.transitionFrames!==void 0?`${t.transitionFrame}/${t.transitionFrames}`:"";this._el.frameLabel.textContent=t.phase==="cached"?"cached transition frames":t.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(s*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},qe)}}const Xe=.1,Ge=5;function H(n){return!Number.isFinite(n)||n<=0?1:Math.max(Xe,Math.min(Ge,n))}class Ye extends HTMLElement{constructor(){super();h(this,"shadow");h(this,"container");h(this,"iframe");h(this,"posterEl",null);h(this,"controlsApi",null);h(this,"resizeObserver");h(this,"shaderLoader");h(this,"probe");h(this,"_ready",!1);h(this,"_currentTime",0);h(this,"_duration",0);h(this,"_paused",!0);h(this,"_lastUpdateMs",0);h(this,"_volume",1);h(this,"_compositionWidth",1920);h(this,"_compositionHeight",1080);h(this,"_directTimelineAdapter",null);h(this,"_directTimelineClock");h(this,"_parentTickRaf",null);h(this,"_media");this.shadow=this.attachShadow({mode:"open"}),Te(this.shadow,ge),{container:this.container,iframe:this.iframe}=Ce(),this.shadow.appendChild(this.container);const e=Be();this.shadow.appendChild(e.root),this.shaderLoader=new We(e),this._media=new Oe({dispatchEvent:i=>this.dispatchEvent(i),getMuted:()=>this.muted,getVolume:()=>this._volume,getPlaybackRate:()=>this.playbackRate,getCurrentTime:()=>this._currentTime,isPaused:()=>this._paused}),this._directTimelineClock=new Le({onTimeUpdate:(i,r)=>{var s;this._currentTime=i,(s=this.controlsApi)==null||s.updateTime(i,r),this.dispatchEvent(new CustomEvent("timeupdate",{detail:{currentTime:i}}))},getLoop:()=>this.loop,restart:()=>{this.seek(0),this.play()},onPaused:()=>{var i;this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,(i=this.controlsApi)==null||i.updatePlaying(!1),this.dispatchEvent(new Event("ended"))},onEnded:()=>this.loop}),this.probe=new _e(this.iframe,{onReady:i=>this._onProbeReady(i),onError:i=>this.dispatchEvent(new CustomEvent("error",{detail:{message:i}}))}),this.addEventListener("click",i=>{Ee(i)||(this._paused?this.play():this.pause())}),this.resizeObserver=new ResizeObserver(()=>this._rescale()),this._onMessage=this._onMessage.bind(this),this._onIframeLoad=this._onIframeLoad.bind(this)}static get observedAttributes(){return["src","srcdoc","width","height","controls","muted","audio-locked","volume","poster","playback-rate","audio-src",C,x]}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=se(this.shadow,this.getAttribute("poster"),this.posterEl)),this.hasAttribute("audio-src")&&this._media.setupFromUrl(this.getAttribute("audio-src")),this.hasAttribute("srcdoc")&&(this.iframe.srcdoc=U(this,this.getAttribute("srcdoc"))),this.hasAttribute("src")&&(this.iframe.src=F(this,this.getAttribute("src"))),!this.hasAttribute("audio-locked")&&this._isLockedHostEnvironment()&&this._applyAudioLock(!0)}disconnectedCallback(){var e;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(),(e=this.controlsApi)==null||e.destroy()}attributeChangedCallback(e,i,r){var s,a,d,c,m;switch(e){case"src":r&&(this._ready=!1,this.iframe.src=F(this,r));break;case"srcdoc":this._ready=!1,r!==null?this.iframe.srcdoc=U(this,r):this.iframe.removeAttribute("srcdoc");break;case"width":this._compositionWidth=parseInt(r||"1920",10),this._rescale();break;case"height":this._compositionHeight=parseInt(r||"1080",10),this._rescale();break;case"controls":r!==null?this._setupControls():((s=this.controlsApi)==null||s.destroy(),this.controlsApi=null);break;case"poster":this.posterEl=se(this.shadow,r,this.posterEl);break;case"playback-rate":{const u=H(parseFloat(r||"1"));this._media.updatePlaybackRate(u),this._sendControl("set-playback-rate",{playbackRate:u}),(d=(a=this._directTimelineAdapter)==null?void 0:a.timeScale)==null||d.call(a,u),(c=this.controlsApi)==null||c.updateSpeed(u),this.dispatchEvent(new Event("ratechange"));break}case"muted":this._handleMutedChange(r);break;case"audio-locked":this._applyAudioLock(r!==null);break;case"volume":{const u=Math.max(0,Math.min(1,parseFloat(r||"1")));this._volume=u,this._media.updateVolume(u),this._sendControl("set-volume",{volume:u}),(m=this.controlsApi)==null||m.updateVolume(u),this.dispatchEvent(new Event("volumechange"));break}case"audio-src":r&&this._media.setupFromUrl(r);break;case C:case x:this._reloadShaderOptions();break}}get iframeElement(){return this.iframe}play(){var i,r;(i=this.posterEl)==null||i.remove(),this.posterEl=null,this._duration>0&&this._currentTime>=this._duration&&this.seek(0),this._paused=!1;const e=this._tryDirectTimelinePlay();e||(this._sendControl("play"),this._ready&&!this._directTimelineAdapter&&this._startParentTickClock()),this._media.audioOwner==="parent"&&this._media.playAll(),(r=this.controlsApi)==null||r.updatePlaying(!0),this.dispatchEvent(new Event("play")),e&&this._directTimelineAdapter&&this._directTimelineClock.start(this._directTimelineAdapter,()=>this._currentTime,()=>this._duration,()=>this._paused)}pause(){var e;this._tryDirectTimelinePause()||this._sendControl("pause"),this._directTimelineClock.stop(),this._stopParentTickClock(),this._media.audioOwner==="parent"&&this._media.pauseAll(),this._paused=!0,(e=this.controlsApi)==null||e.updatePlaying(!1),this.dispatchEvent(new Event("pause"))}seek(e){var i,r;!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,(i=this.controlsApi)==null||i.updatePlaying(!1),(r=this.controlsApi)==null||r.updateTime(this._currentTime,this._duration)}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 H(parseFloat(this.getAttribute("playback-rate")||"1"))}set playbackRate(e){this.setAttribute("playback-rate",String(H(e)))}get shaderCaptureScale(){return je(this)}set shaderCaptureScale(e){this.setAttribute(C,String(e))}get shaderLoading(){return L(this)}set shaderLoading(e){e==="composition"?this.removeAttribute(x):this.setAttribute(x,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;const e=navigator.userAgent||"";return/\bClaude\/\d/.test(e)&&/\bElectron\b/.test(e)}_isAudioLocked(){return this.hasAttribute("audio-locked")||this._isLockedHostEnvironment()}_handleMutedChange(e){var i;if(e===null&&this._isAudioLocked()){this.setAttribute("muted","");return}this._media.updateMuted(e!==null),this._sendControl("set-muted",{muted:e!==null}),(i=this.controlsApi)==null||i.updateMuted(e!==null),this.dispatchEvent(new Event("volumechange"))}_applyAudioLock(e){var i;e&&(this.muted=!0),(i=this.controlsApi)==null||i.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,i={}){var r;try{(r=this.iframe.contentWindow)==null||r.postMessage({source:"hf-parent",type:"control",action:e,...i},"*")}catch{}}_replayBridgeState(){this._sendControl("set-muted",{muted:this.muted}),this._sendControl("set-volume",{volume:this._volume}),this._sendControl("set-playback-rate",{playbackRate:this.playbackRate})}_reloadShaderOptions(){if(L(this)!=="player"&&this.shaderLoader.reset(),this.hasAttribute("srcdoc")){this.iframe.srcdoc=U(this,this.getAttribute("srcdoc")||"");return}this.hasAttribute("src")&&(this.iframe.src=F(this,this.getAttribute("src")||""))}_trySyncSeek(e){try{const i=this.iframe.contentWindow,r=i==null?void 0:i.__player;return typeof(r==null?void 0:r.seek)!="function"?!1:(r.seek.call(r,e),!0)}catch{return!1}}_withDirectTimeline(e){const i=this._directTimelineAdapter||this.probe.resolveDirectTimelineAdapter();if(!i)return!1;try{return e(i),this._directTimelineAdapter=i,!0}catch{return!1}}_tryDirectTimelineSeek(e){return this._withDirectTimeline(i=>{i.seek(e),i.pause()})}_tryDirectTimelinePlay(){return this._withDirectTimeline(e=>void e.play())}_tryDirectTimelinePause(){return this._withDirectTimeline(e=>void e.pause())}_startParentTickClock(){this._stopParentTickClock();const 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){Fe(e,this.iframe.contentWindow,{getPlaybackState:()=>({currentTime:this._currentTime,duration:this._duration,paused:this._paused,lastUpdateMs:this._lastUpdateMs}),setPlaybackState:({currentTime:i,duration:r,paused:s,lastUpdateMs:a})=>{this._currentTime=i,this._duration=r,this._paused=s,this._lastUpdateMs=a},getShaderLoadingMode:()=>L(this),shaderLoader:this.shaderLoader,setCompositionSize:(i,r)=>{this._compositionWidth=i,this._compositionHeight=r,this._rescale()},sendControl:(i,r)=>this._sendControl(i,r),getIframeDoc:()=>this.iframe.contentDocument,onRuntimeReady:()=>this._replayBridgeState(),updateControlsTime:(i,r)=>{var s;return(s=this.controlsApi)==null?void 0:s.updateTime(i,r)},updateControlsPlaying:i=>{var r;return(r=this.controlsApi)==null?void 0:r.updatePlaying(i)},dispatchEvent:i=>this.dispatchEvent(i),seek:i=>this.seek(i),play:()=>this.play(),getLoop:()=>this.loop,media:this._media})}_onProbeReady({duration:e,adapter:i,compositionSize:r}){var s;this._duration=e,this._directTimelineAdapter=i.kind==="direct-timeline"?i.timeline:null,this._ready=!0,(s=this.controlsApi)==null||s.updateTime(0,e),this.dispatchEvent(new CustomEvent("ready",{detail:{duration:e}})),r&&(this._compositionWidth=r.width,this._compositionHeight=r.height,this._rescale());try{const a=this.iframe.contentDocument;a&&this._media.setupFromIframe(a)}catch{}this.hasAttribute("autoplay")&&this.play()}_rescale(){ke(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=Ae(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=>void(this.playbackRate=e),onMuteToggle:()=>void(this.muted=!this.muted),onVolumeChange:e=>void(this.volume=e)},this._isAudioLocked()))}get _audioOwner(){return this._media.audioOwner}get _parentMedia(){return this._media.entries}_mirrorParentMediaTime(e,i){this._media.mirrorTime(e,i)}_promoteToParentProxy(){let e=null;try{e=this.iframe.contentDocument}catch{}this._media.promoteToParentProxy(e,(i,r)=>this._mirrorParentMediaTime(i,r)),this._sendControl("set-media-output-muted",{muted:!0})}_observeDynamicMedia(e){this._media.setupFromIframe(e)}}customElements.get("hyperframes-player")||customElements.define("hyperframes-player",Ye);export{Ye as HyperframesPlayer,ye as SPEED_PRESETS,N as formatSpeed,ne as formatTime};