@alpha-video-kit/svg 0.2.1 → 0.2.2

package/dist/canvas-component-B4CLR7ME.cjs

@@ -0,0 +1,35 @@
+"use strict";var U=Object.defineProperty;var G=o=>{throw TypeError(o)};var K=(o,h,t)=>h in o?U(o,h,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[h]=t;var H=(o,h,t)=>K(o,typeof h!="symbol"?h+"":h,t),$=(o,h,t)=>h.has(o)||G("Cannot "+t);var e=(o,h,t)=>($(o,h,"read from private field"),t?t.call(o):h.get(o)),l=(o,h,t)=>h.has(o)?G("Cannot add the same private member more than once"):h instanceof WeakSet?h.add(o):h.set(o,t),a=(o,h,t,r)=>($(o,h,"write to private field"),r?r.call(o,t):h.set(o,t),t),u=(o,h,t)=>($(o,h,"access private method"),t);const W=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height"],Y=new Set(["autoplay","loop","muted","playsinline"]),J=["loadstart","progress","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","play","pause","ratechange","resize","volumechange"];var s,T,S,A,R,y,k,c,P,V,I;class D extends HTMLElement{constructor(){super();l(this,c);l(this,s);l(this,T);l(this,S);l(this,A);l(this,R);l(this,y,null);l(this,k);const t=this.attachShadow({mode:"open"});a(this,k,`avk-${Math.random().toString(36).slice(2,8)}`),t.innerHTML=`<style>
+:host{display:inline-block;overflow:hidden}
+svg{display:block;width:100%;height:auto}
+video{display:block;width:100%;height:100%}
+</style>
+<svg viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet">
+<defs>
+<filter id="${e(this,k)}" filterUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
+<feOffset in="SourceGraphic" dy="0" result="s"/>
+<feColorMatrix in="s" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0" result="a"/>
+<feComposite in="SourceGraphic" in2="a" operator="in"/>
+</filter>
+</defs>
+<foreignObject width="1" height="1" filter="url(#${e(this,k)})">
+<video></video>
+</foreignObject>
+</svg>`,a(this,T,t.querySelector("svg")),a(this,S,t.querySelector("foreignObject")),a(this,A,t.querySelector("filter")),a(this,R,t.querySelector("feOffset")),a(this,s,t.querySelector("video"));for(const r of J)e(this,s).addEventListener(r,d=>{this.dispatchEvent(new Event(d.type,{bubbles:!1,cancelable:!1}))});e(this,s).addEventListener("loadedmetadata",()=>u(this,c,P).call(this)),e(this,s).addEventListener("resize",()=>u(this,c,P).call(this))}connectedCallback(){for(const t of W)this.hasAttribute(t)&&u(this,c,V).call(this,t,this.getAttribute(t));u(this,c,I).call(this),a(this,y,new MutationObserver(()=>u(this,c,I).call(this))),e(this,y).observe(this,{childList:!0})}disconnectedCallback(){var t;(t=e(this,y))==null||t.disconnect(),a(this,y,null)}attributeChangedCallback(t,r,d){u(this,c,V).call(this,t,d)}get src(){return e(this,s).src}set src(t){this.setAttribute("src",t)}get currentSrc(){return e(this,s).currentSrc}get currentTime(){return e(this,s).currentTime}set currentTime(t){e(this,s).currentTime=t}get duration(){return e(this,s).duration}get paused(){return e(this,s).paused}get ended(){return e(this,s).ended}get readyState(){return e(this,s).readyState}get videoWidth(){return e(this,s).videoWidth}get videoHeight(){return Math.floor(e(this,s).videoHeight/2)}get volume(){return e(this,s).volume}set volume(t){e(this,s).volume=t}get playbackRate(){return e(this,s).playbackRate}set playbackRate(t){e(this,s).playbackRate=t}get defaultPlaybackRate(){return e(this,s).defaultPlaybackRate}set defaultPlaybackRate(t){e(this,s).defaultPlaybackRate=t}get muted(){return e(this,s).muted}set muted(t){e(this,s).muted=t,this.toggleAttribute("muted",t)}get loop(){return e(this,s).loop}set loop(t){e(this,s).loop=t,this.toggleAttribute("loop",t)}get autoplay(){return e(this,s).autoplay}set autoplay(t){e(this,s).autoplay=t,this.toggleAttribute("autoplay",t)}get preload(){return e(this,s).preload}set preload(t){this.setAttribute("preload",t)}get crossOrigin(){return e(this,s).crossOrigin}set crossOrigin(t){t===null?this.removeAttribute("crossorigin"):this.setAttribute("crossorigin",t)}get buffered(){return e(this,s).buffered}get seekable(){return e(this,s).seekable}get played(){return e(this,s).played}get networkState(){return e(this,s).networkState}get error(){return e(this,s).error}get seeking(){return e(this,s).seeking}play(){return e(this,s).play()}pause(){e(this,s).pause()}load(){e(this,s).load()}canPlayType(t){return e(this,s).canPlayType(t)}}s=new WeakMap,T=new WeakMap,S=new WeakMap,A=new WeakMap,R=new WeakMap,y=new WeakMap,k=new WeakMap,c=new WeakSet,P=function(){const t=e(this,s).videoWidth,r=e(this,s).videoHeight;if(!t||!r)return;const d=Math.floor(r/2);e(this,T).setAttribute("viewBox",`0 0 ${t} ${d}`),e(this,S).setAttribute("width",String(t)),e(this,S).setAttribute("height",String(r)),e(this,A).setAttribute("width",String(t)),e(this,A).setAttribute("height",String(r)),e(this,R).setAttribute("dy",String(-d))},V=function(t,r){Y.has(t)?e(this,s)[t]=r!==null:r===null?e(this,s).removeAttribute(t):e(this,s).setAttribute(t,r)},I=function(){e(this,s).querySelectorAll("source").forEach(t=>t.remove()),this.querySelectorAll("source").forEach(t=>{e(this,s).appendChild(t.cloneNode(!0))}),e(this,s).querySelectorAll("source").length>0&&!e(this,s).src&&e(this,s).load()},H(D,"observedAttributes",[...W]);const j=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height"],Q=new Set(["autoplay","loop","muted","playsinline"]),X=["loadstart","progress","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","play","pause","ratechange","resize","volumechange"];var i,g,q,C,w,O,M,v,m,p,f,b,E,n,x,B,F,z,L,_;class N extends HTMLElement{constructor(){super();l(this,n);l(this,i);l(this,g);l(this,q);l(this,C);l(this,w);l(this,O);l(this,M);l(this,v,null);l(this,m,null);l(this,p,!1);l(this,f,0);l(this,b,0);l(this,E);const t=this.attachShadow({mode:"open"});a(this,E,`avk-c-${Math.random().toString(36).slice(2,8)}`),t.innerHTML=`<style>
+:host{display:inline-block;overflow:hidden}
+video{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
+svg{display:block;width:100%;height:auto}
+canvas{display:block;width:100%;height:100%}
+</style>
+<video></video>
+<svg viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet">
+<defs>
+<filter id="${e(this,E)}" filterUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
+<feOffset in="SourceGraphic" dy="0" result="s"/>
+<feColorMatrix in="s" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0" result="a"/>
+<feComposite in="SourceGraphic" in2="a" operator="in"/>
+</filter>
+</defs>
+<foreignObject width="1" height="1" filter="url(#${e(this,E)})">
+<canvas xmlns="http://www.w3.org/1999/xhtml"></canvas>
+</foreignObject>
+</svg>`,a(this,i,t.querySelector("video")),a(this,C,t.querySelector("svg")),a(this,w,t.querySelector("foreignObject")),a(this,O,t.querySelector("filter")),a(this,M,t.querySelector("feOffset")),a(this,g,t.querySelector("canvas")),a(this,q,e(this,g).getContext("2d"));for(const r of X)e(this,i).addEventListener(r,d=>{this.dispatchEvent(new Event(d.type,{bubbles:!1,cancelable:!1}))});e(this,i).addEventListener("loadedmetadata",()=>u(this,n,x).call(this)),e(this,i).addEventListener("resize",()=>u(this,n,x).call(this))}connectedCallback(){for(const t of j)this.hasAttribute(t)&&u(this,n,B).call(this,t,this.getAttribute(t));u(this,n,F).call(this),a(this,m,new MutationObserver(()=>u(this,n,F).call(this))),e(this,m).observe(this,{childList:!0}),a(this,v,new IntersectionObserver(([t])=>{a(this,p,t.isIntersecting),e(this,p)?u(this,n,z).call(this):u(this,n,L).call(this)},{threshold:0})),e(this,v).observe(this)}disconnectedCallback(){var t,r;u(this,n,L).call(this),(t=e(this,v))==null||t.disconnect(),a(this,v,null),(r=e(this,m))==null||r.disconnect(),a(this,m,null)}attributeChangedCallback(t,r,d){u(this,n,B).call(this,t,d)}get src(){return e(this,i).src}set src(t){this.setAttribute("src",t)}get currentSrc(){return e(this,i).currentSrc}get currentTime(){return e(this,i).currentTime}set currentTime(t){e(this,i).currentTime=t}get duration(){return e(this,i).duration}get paused(){return e(this,i).paused}get ended(){return e(this,i).ended}get readyState(){return e(this,i).readyState}get videoWidth(){return e(this,i).videoWidth}get videoHeight(){return Math.floor(e(this,i).videoHeight/2)}get volume(){return e(this,i).volume}set volume(t){e(this,i).volume=t}get playbackRate(){return e(this,i).playbackRate}set playbackRate(t){e(this,i).playbackRate=t}get defaultPlaybackRate(){return e(this,i).defaultPlaybackRate}set defaultPlaybackRate(t){e(this,i).defaultPlaybackRate=t}get muted(){return e(this,i).muted}set muted(t){e(this,i).muted=t,this.toggleAttribute("muted",t)}get loop(){return e(this,i).loop}set loop(t){e(this,i).loop=t,this.toggleAttribute("loop",t)}get autoplay(){return e(this,i).autoplay}set autoplay(t){e(this,i).autoplay=t,this.toggleAttribute("autoplay",t)}get preload(){return e(this,i).preload}set preload(t){this.setAttribute("preload",t)}get crossOrigin(){return e(this,i).crossOrigin}set crossOrigin(t){t===null?this.removeAttribute("crossorigin"):this.setAttribute("crossorigin",t)}get buffered(){return e(this,i).buffered}get seekable(){return e(this,i).seekable}get played(){return e(this,i).played}get networkState(){return e(this,i).networkState}get error(){return e(this,i).error}get seeking(){return e(this,i).seeking}play(){return e(this,i).play()}pause(){e(this,i).pause()}load(){e(this,i).load()}canPlayType(t){return e(this,i).canPlayType(t)}}i=new WeakMap,g=new WeakMap,q=new WeakMap,C=new WeakMap,w=new WeakMap,O=new WeakMap,M=new WeakMap,v=new WeakMap,m=new WeakMap,p=new WeakMap,f=new WeakMap,b=new WeakMap,E=new WeakMap,n=new WeakSet,x=function(){const t=e(this,i).videoWidth,r=e(this,i).videoHeight;if(!t||!r)return;const d=Math.floor(r/2);e(this,C).setAttribute("viewBox",`0 0 ${t} ${d}`),e(this,w).setAttribute("width",String(t)),e(this,w).setAttribute("height",String(r)),e(this,O).setAttribute("width",String(t)),e(this,O).setAttribute("height",String(r)),e(this,M).setAttribute("dy",String(-d)),e(this,g).width=t,e(this,g).height=r},B=function(t,r){Q.has(t)?e(this,i)[t]=r!==null:r===null?e(this,i).removeAttribute(t):e(this,i).setAttribute(t,r)},F=function(){e(this,i).querySelectorAll("source").forEach(t=>t.remove()),this.querySelectorAll("source").forEach(t=>{e(this,i).appendChild(t.cloneNode(!0))}),e(this,i).querySelectorAll("source").length>0&&!e(this,i).src&&e(this,i).load()},z=function(){if(e(this,p))if(u(this,n,L).call(this),"requestVideoFrameCallback"in e(this,i)){const t=()=>{e(this,p)&&(u(this,n,_).call(this),a(this,b,e(this,i).requestVideoFrameCallback(t)))};a(this,b,e(this,i).requestVideoFrameCallback(t))}else{const t=()=>{e(this,p)&&(u(this,n,_).call(this),a(this,f,requestAnimationFrame(t)))};a(this,f,requestAnimationFrame(t))}},L=function(){var t,r;e(this,b)&&((r=(t=e(this,i)).cancelVideoFrameCallback)==null||r.call(t,e(this,b)),a(this,b,0)),e(this,f)&&(cancelAnimationFrame(e(this,f)),a(this,f,0))},_=function(){if(e(this,i).readyState<2)return;const t=e(this,i).videoWidth,r=e(this,i).videoHeight;!t||!r||((e(this,g).width!==t||e(this,g).height!==r)&&u(this,n,x).call(this),e(this,q).drawImage(e(this,i),0,0))},H(N,"observedAttributes",[...j]);exports.AlphaVideoKitCanvas=N;exports.AlphaVideoKitSVG=D;

package/dist/canvas-component-ChQNZXEV.js

@@ -0,0 +1,464 @@
+var N = Object.defineProperty;
+var W = (o) => {
+  throw TypeError(o);
+};
+var z = (o, h, t) => h in o ? N(o, h, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[h] = t;
+var H = (o, h, t) => z(o, typeof h != "symbol" ? h + "" : h, t), $ = (o, h, t) => h.has(o) || W("Cannot " + t);
+var e = (o, h, t) => ($(o, h, "read from private field"), t ? t.call(o) : h.get(o)), l = (o, h, t) => h.has(o) ? W("Cannot add the same private member more than once") : h instanceof WeakSet ? h.add(o) : h.set(o, t), a = (o, h, t, r) => ($(o, h, "write to private field"), r ? r.call(o, t) : h.set(o, t), t), u = (o, h, t) => ($(o, h, "access private method"), t);
+const j = [
+  "src",
+  "crossorigin",
+  "preload",
+  "autoplay",
+  "loop",
+  "muted",
+  "playsinline",
+  "poster",
+  "width",
+  "height"
+], U = /* @__PURE__ */ new Set(["autoplay", "loop", "muted", "playsinline"]), Y = [
+  "loadstart",
+  "progress",
+  "suspend",
+  "abort",
+  "error",
+  "emptied",
+  "stalled",
+  "loadedmetadata",
+  "loadeddata",
+  "canplay",
+  "canplaythrough",
+  "playing",
+  "waiting",
+  "seeking",
+  "seeked",
+  "ended",
+  "durationchange",
+  "timeupdate",
+  "play",
+  "pause",
+  "ratechange",
+  "resize",
+  "volumechange"
+];
+var s, T, S, A, R, y, k, c, P, I, V;
+class J extends HTMLElement {
+  constructor() {
+    super();
+    l(this, c);
+    l(this, s);
+    l(this, T);
+    l(this, S);
+    l(this, A);
+    l(this, R);
+    l(this, y, null);
+    l(this, k);
+    const t = this.attachShadow({ mode: "open" });
+    a(this, k, `avk-${Math.random().toString(36).slice(2, 8)}`), t.innerHTML = `<style>
+:host{display:inline-block;overflow:hidden}
+svg{display:block;width:100%;height:auto}
+video{display:block;width:100%;height:100%}
+</style>
+<svg viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet">
+<defs>
+<filter id="${e(this, k)}" filterUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
+<feOffset in="SourceGraphic" dy="0" result="s"/>
+<feColorMatrix in="s" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0" result="a"/>
+<feComposite in="SourceGraphic" in2="a" operator="in"/>
+</filter>
+</defs>
+<foreignObject width="1" height="1" filter="url(#${e(this, k)})">
+<video></video>
+</foreignObject>
+</svg>`, a(this, T, t.querySelector("svg")), a(this, S, t.querySelector("foreignObject")), a(this, A, t.querySelector("filter")), a(this, R, t.querySelector("feOffset")), a(this, s, t.querySelector("video"));
+    for (const r of Y)
+      e(this, s).addEventListener(r, (d) => {
+        this.dispatchEvent(new Event(d.type, { bubbles: !1, cancelable: !1 }));
+      });
+    e(this, s).addEventListener("loadedmetadata", () => u(this, c, P).call(this)), e(this, s).addEventListener("resize", () => u(this, c, P).call(this));
+  }
+  connectedCallback() {
+    for (const t of j)
+      this.hasAttribute(t) && u(this, c, I).call(this, t, this.getAttribute(t));
+    u(this, c, V).call(this), a(this, y, new MutationObserver(() => u(this, c, V).call(this))), e(this, y).observe(this, { childList: !0 });
+  }
+  disconnectedCallback() {
+    var t;
+    (t = e(this, y)) == null || t.disconnect(), a(this, y, null);
+  }
+  attributeChangedCallback(t, r, d) {
+    u(this, c, I).call(this, t, d);
+  }
+  // --- Proxied properties ---
+  get src() {
+    return e(this, s).src;
+  }
+  set src(t) {
+    this.setAttribute("src", t);
+  }
+  get currentSrc() {
+    return e(this, s).currentSrc;
+  }
+  get currentTime() {
+    return e(this, s).currentTime;
+  }
+  set currentTime(t) {
+    e(this, s).currentTime = t;
+  }
+  get duration() {
+    return e(this, s).duration;
+  }
+  get paused() {
+    return e(this, s).paused;
+  }
+  get ended() {
+    return e(this, s).ended;
+  }
+  get readyState() {
+    return e(this, s).readyState;
+  }
+  get videoWidth() {
+    return e(this, s).videoWidth;
+  }
+  get videoHeight() {
+    return Math.floor(e(this, s).videoHeight / 2);
+  }
+  get volume() {
+    return e(this, s).volume;
+  }
+  set volume(t) {
+    e(this, s).volume = t;
+  }
+  get playbackRate() {
+    return e(this, s).playbackRate;
+  }
+  set playbackRate(t) {
+    e(this, s).playbackRate = t;
+  }
+  get defaultPlaybackRate() {
+    return e(this, s).defaultPlaybackRate;
+  }
+  set defaultPlaybackRate(t) {
+    e(this, s).defaultPlaybackRate = t;
+  }
+  get muted() {
+    return e(this, s).muted;
+  }
+  set muted(t) {
+    e(this, s).muted = t, this.toggleAttribute("muted", t);
+  }
+  get loop() {
+    return e(this, s).loop;
+  }
+  set loop(t) {
+    e(this, s).loop = t, this.toggleAttribute("loop", t);
+  }
+  get autoplay() {
+    return e(this, s).autoplay;
+  }
+  set autoplay(t) {
+    e(this, s).autoplay = t, this.toggleAttribute("autoplay", t);
+  }
+  get preload() {
+    return e(this, s).preload;
+  }
+  set preload(t) {
+    this.setAttribute("preload", t);
+  }
+  get crossOrigin() {
+    return e(this, s).crossOrigin;
+  }
+  set crossOrigin(t) {
+    t === null ? this.removeAttribute("crossorigin") : this.setAttribute("crossorigin", t);
+  }
+  get buffered() {
+    return e(this, s).buffered;
+  }
+  get seekable() {
+    return e(this, s).seekable;
+  }
+  get played() {
+    return e(this, s).played;
+  }
+  get networkState() {
+    return e(this, s).networkState;
+  }
+  get error() {
+    return e(this, s).error;
+  }
+  get seeking() {
+    return e(this, s).seeking;
+  }
+  // --- Proxied methods ---
+  play() {
+    return e(this, s).play();
+  }
+  pause() {
+    e(this, s).pause();
+  }
+  load() {
+    e(this, s).load();
+  }
+  canPlayType(t) {
+    return e(this, s).canPlayType(t);
+  }
+}
+s = new WeakMap(), T = new WeakMap(), S = new WeakMap(), A = new WeakMap(), R = new WeakMap(), y = new WeakMap(), k = new WeakMap(), c = new WeakSet(), P = function() {
+  const t = e(this, s).videoWidth, r = e(this, s).videoHeight;
+  if (!t || !r) return;
+  const d = Math.floor(r / 2);
+  e(this, T).setAttribute("viewBox", `0 0 ${t} ${d}`), e(this, S).setAttribute("width", String(t)), e(this, S).setAttribute("height", String(r)), e(this, A).setAttribute("width", String(t)), e(this, A).setAttribute("height", String(r)), e(this, R).setAttribute("dy", String(-d));
+}, I = function(t, r) {
+  U.has(t) ? e(this, s)[t] = r !== null : r === null ? e(this, s).removeAttribute(t) : e(this, s).setAttribute(t, r);
+}, V = function() {
+  e(this, s).querySelectorAll("source").forEach((t) => t.remove()), this.querySelectorAll("source").forEach((t) => {
+    e(this, s).appendChild(t.cloneNode(!0));
+  }), e(this, s).querySelectorAll("source").length > 0 && !e(this, s).src && e(this, s).load();
+}, H(J, "observedAttributes", [...j]);
+const D = [
+  "src",
+  "crossorigin",
+  "preload",
+  "autoplay",
+  "loop",
+  "muted",
+  "playsinline",
+  "poster",
+  "width",
+  "height"
+], K = /* @__PURE__ */ new Set(["autoplay", "loop", "muted", "playsinline"]), Q = [
+  "loadstart",
+  "progress",
+  "suspend",
+  "abort",
+  "error",
+  "emptied",
+  "stalled",
+  "loadedmetadata",
+  "loadeddata",
+  "canplay",
+  "canplaythrough",
+  "playing",
+  "waiting",
+  "seeking",
+  "seeked",
+  "ended",
+  "durationchange",
+  "timeupdate",
+  "play",
+  "pause",
+  "ratechange",
+  "resize",
+  "volumechange"
+];
+var i, g, q, C, w, O, M, v, m, p, f, b, E, n, x, B, F, G, L, _;
+class X extends HTMLElement {
+  constructor() {
+    super();
+    l(this, n);
+    l(this, i);
+    l(this, g);
+    l(this, q);
+    l(this, C);
+    l(this, w);
+    l(this, O);
+    l(this, M);
+    l(this, v, null);
+    l(this, m, null);
+    l(this, p, !1);
+    l(this, f, 0);
+    l(this, b, 0);
+    l(this, E);
+    const t = this.attachShadow({ mode: "open" });
+    a(this, E, `avk-c-${Math.random().toString(36).slice(2, 8)}`), t.innerHTML = `<style>
+:host{display:inline-block;overflow:hidden}
+video{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
+svg{display:block;width:100%;height:auto}
+canvas{display:block;width:100%;height:100%}
+</style>
+<video></video>
+<svg viewBox="0 0 1 1" preserveAspectRatio="xMidYMid meet">
+<defs>
+<filter id="${e(this, E)}" filterUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB">
+<feOffset in="SourceGraphic" dy="0" result="s"/>
+<feColorMatrix in="s" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0" result="a"/>
+<feComposite in="SourceGraphic" in2="a" operator="in"/>
+</filter>
+</defs>
+<foreignObject width="1" height="1" filter="url(#${e(this, E)})">
+<canvas xmlns="http://www.w3.org/1999/xhtml"></canvas>
+</foreignObject>
+</svg>`, a(this, i, t.querySelector("video")), a(this, C, t.querySelector("svg")), a(this, w, t.querySelector("foreignObject")), a(this, O, t.querySelector("filter")), a(this, M, t.querySelector("feOffset")), a(this, g, t.querySelector("canvas")), a(this, q, e(this, g).getContext("2d"));
+    for (const r of Q)
+      e(this, i).addEventListener(r, (d) => {
+        this.dispatchEvent(new Event(d.type, { bubbles: !1, cancelable: !1 }));
+      });
+    e(this, i).addEventListener("loadedmetadata", () => u(this, n, x).call(this)), e(this, i).addEventListener("resize", () => u(this, n, x).call(this));
+  }
+  connectedCallback() {
+    for (const t of D)
+      this.hasAttribute(t) && u(this, n, B).call(this, t, this.getAttribute(t));
+    u(this, n, F).call(this), a(this, m, new MutationObserver(() => u(this, n, F).call(this))), e(this, m).observe(this, { childList: !0 }), a(this, v, new IntersectionObserver(
+      ([t]) => {
+        a(this, p, t.isIntersecting), e(this, p) ? u(this, n, G).call(this) : u(this, n, L).call(this);
+      },
+      { threshold: 0 }
+    )), e(this, v).observe(this);
+  }
+  disconnectedCallback() {
+    var t, r;
+    u(this, n, L).call(this), (t = e(this, v)) == null || t.disconnect(), a(this, v, null), (r = e(this, m)) == null || r.disconnect(), a(this, m, null);
+  }
+  attributeChangedCallback(t, r, d) {
+    u(this, n, B).call(this, t, d);
+  }
+  // --- Proxied properties ---
+  get src() {
+    return e(this, i).src;
+  }
+  set src(t) {
+    this.setAttribute("src", t);
+  }
+  get currentSrc() {
+    return e(this, i).currentSrc;
+  }
+  get currentTime() {
+    return e(this, i).currentTime;
+  }
+  set currentTime(t) {
+    e(this, i).currentTime = t;
+  }
+  get duration() {
+    return e(this, i).duration;
+  }
+  get paused() {
+    return e(this, i).paused;
+  }
+  get ended() {
+    return e(this, i).ended;
+  }
+  get readyState() {
+    return e(this, i).readyState;
+  }
+  get videoWidth() {
+    return e(this, i).videoWidth;
+  }
+  get videoHeight() {
+    return Math.floor(e(this, i).videoHeight / 2);
+  }
+  get volume() {
+    return e(this, i).volume;
+  }
+  set volume(t) {
+    e(this, i).volume = t;
+  }
+  get playbackRate() {
+    return e(this, i).playbackRate;
+  }
+  set playbackRate(t) {
+    e(this, i).playbackRate = t;
+  }
+  get defaultPlaybackRate() {
+    return e(this, i).defaultPlaybackRate;
+  }
+  set defaultPlaybackRate(t) {
+    e(this, i).defaultPlaybackRate = t;
+  }
+  get muted() {
+    return e(this, i).muted;
+  }
+  set muted(t) {
+    e(this, i).muted = t, this.toggleAttribute("muted", t);
+  }
+  get loop() {
+    return e(this, i).loop;
+  }
+  set loop(t) {
+    e(this, i).loop = t, this.toggleAttribute("loop", t);
+  }
+  get autoplay() {
+    return e(this, i).autoplay;
+  }
+  set autoplay(t) {
+    e(this, i).autoplay = t, this.toggleAttribute("autoplay", t);
+  }
+  get preload() {
+    return e(this, i).preload;
+  }
+  set preload(t) {
+    this.setAttribute("preload", t);
+  }
+  get crossOrigin() {
+    return e(this, i).crossOrigin;
+  }
+  set crossOrigin(t) {
+    t === null ? this.removeAttribute("crossorigin") : this.setAttribute("crossorigin", t);
+  }
+  get buffered() {
+    return e(this, i).buffered;
+  }
+  get seekable() {
+    return e(this, i).seekable;
+  }
+  get played() {
+    return e(this, i).played;
+  }
+  get networkState() {
+    return e(this, i).networkState;
+  }
+  get error() {
+    return e(this, i).error;
+  }
+  get seeking() {
+    return e(this, i).seeking;
+  }
+  // --- Proxied methods ---
+  play() {
+    return e(this, i).play();
+  }
+  pause() {
+    e(this, i).pause();
+  }
+  load() {
+    e(this, i).load();
+  }
+  canPlayType(t) {
+    return e(this, i).canPlayType(t);
+  }
+}
+i = new WeakMap(), g = new WeakMap(), q = new WeakMap(), C = new WeakMap(), w = new WeakMap(), O = new WeakMap(), M = new WeakMap(), v = new WeakMap(), m = new WeakMap(), p = new WeakMap(), f = new WeakMap(), b = new WeakMap(), E = new WeakMap(), n = new WeakSet(), x = function() {
+  const t = e(this, i).videoWidth, r = e(this, i).videoHeight;
+  if (!t || !r) return;
+  const d = Math.floor(r / 2);
+  e(this, C).setAttribute("viewBox", `0 0 ${t} ${d}`), e(this, w).setAttribute("width", String(t)), e(this, w).setAttribute("height", String(r)), e(this, O).setAttribute("width", String(t)), e(this, O).setAttribute("height", String(r)), e(this, M).setAttribute("dy", String(-d)), e(this, g).width = t, e(this, g).height = r;
+}, B = function(t, r) {
+  K.has(t) ? e(this, i)[t] = r !== null : r === null ? e(this, i).removeAttribute(t) : e(this, i).setAttribute(t, r);
+}, F = function() {
+  e(this, i).querySelectorAll("source").forEach((t) => t.remove()), this.querySelectorAll("source").forEach((t) => {
+    e(this, i).appendChild(t.cloneNode(!0));
+  }), e(this, i).querySelectorAll("source").length > 0 && !e(this, i).src && e(this, i).load();
+}, G = function() {
+  if (e(this, p))
+    if (u(this, n, L).call(this), "requestVideoFrameCallback" in e(this, i)) {
+      const t = () => {
+        e(this, p) && (u(this, n, _).call(this), a(this, b, e(this, i).requestVideoFrameCallback(t)));
+      };
+      a(this, b, e(this, i).requestVideoFrameCallback(t));
+    } else {
+      const t = () => {
+        e(this, p) && (u(this, n, _).call(this), a(this, f, requestAnimationFrame(t)));
+      };
+      a(this, f, requestAnimationFrame(t));
+    }
+}, L = function() {
+  var t, r;
+  e(this, b) && ((r = (t = e(this, i)).cancelVideoFrameCallback) == null || r.call(t, e(this, b)), a(this, b, 0)), e(this, f) && (cancelAnimationFrame(e(this, f)), a(this, f, 0));
+}, _ = function() {
+  if (e(this, i).readyState < 2) return;
+  const t = e(this, i).videoWidth, r = e(this, i).videoHeight;
+  !t || !r || ((e(this, g).width !== t || e(this, g).height !== r) && u(this, n, x).call(this), e(this, q).drawImage(e(this, i), 0, 0));
+}, H(X, "observedAttributes", [...D]);
+export {
+  X as A,
+  J as a
+};

package/dist/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("./canvas-component-CJM11n9O.cjs");function R(u){const{canvas:r}=u,c=r.getContext("2d"),l=document.createElement("canvas"),d=l.getContext("2d");let s=!1;function g(o,e,t,n){return`<svg xmlns="http://www.w3.org/2000/svg"
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("./canvas-component-B4CLR7ME.cjs");function R(u){const{canvas:r}=u,c=r.getContext("2d"),l=document.createElement("canvas"),d=l.getContext("2d");let s=!1;function g(o,e,t,n){return`<svg xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="${e}" height="${t}"
                  viewBox="0 0 ${e} ${t}">

package/dist/index.d.ts

@@ -1,9 +1,16 @@
 /**
- * `<alpha-video-kit-canvas>` — Canvas 2D with the same SVG filter applied via CSS.
+ * `<alpha-video-kit-canvas>` — Canvas 2D wrapped in an SVG with an inline filter.
  *
- * A hidden <video> feeds a visible <canvas> via drawImage (full stacked frame).
- * The CSS SVG filter composites the stacked-alpha halves.
- * The host element clips to the top half via overflow:hidden + aspect-ratio.
+ * Structure:
+ *   <video hidden>                         ← source, not displayed
+ *   <svg viewBox="0 0 W H/2">             ← clips to top half
+ *     <filter>                             ← feOffset + feColorMatrix + feComposite
+ *     <foreignObject W×H filter>           ← full-height canvas with filter applied
+ *       <canvas>
+ *
+ * A hidden <video> feeds frames to <canvas> via drawImage (full stacked frame).
+ * The SVG filter composites the stacked-alpha halves.
+ * SVG viewBox clips to the top (color) half.
  */
 export declare class AlphaVideoKitCanvas extends HTMLElement {
     #private;
@@ -52,11 +59,16 @@ export declare class AlphaVideoKitCanvas extends HTMLElement {
 }
 
 /**
- * `<alpha-video-kit-svg>` — SVG filter applied directly to a `<video>` element.
+ * `<alpha-video-kit-svg>` — video wrapped in an SVG with an inline filter.
+ *
+ * Structure:
+ *   <svg viewBox="0 0 W H/2">          ← clips to top half
+ *     <filter>                          ← feOffset + feColorMatrix + feComposite
+ *     <foreignObject W×H filter>        ← full-height video with filter applied
+ *       <video>
  *
- * No canvas, no rendering loop. The browser applies the CSS SVG filter on every
- * paint, compositing the stacked-alpha halves in real time.
- * The host element clips to the top half via overflow:hidden + aspect-ratio.
+ * No canvas, no render loop. The browser composites the stacked-alpha halves
+ * via the SVG filter pipeline on every paint.
  */
 export declare class AlphaVideoKitSVG extends HTMLElement {
     #private;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A as k, a as b } from "./canvas-component-DMsm7VdA.js";
+import { A as k, a as b } from "./canvas-component-ChQNZXEV.js";
 function x(u) {
   const { canvas: r } = u, c = r.getContext("2d"), l = document.createElement("canvas"), d = l.getContext("2d");
   let i = !1;

package/dist/register.cjs

@@ -1 +1 @@
-"use strict";const e=require("./canvas-component-CJM11n9O.cjs");customElements.get("alpha-video-kit-svg")||customElements.define("alpha-video-kit-svg",e.AlphaVideoKitSVG);customElements.get("alpha-video-kit-canvas")||customElements.define("alpha-video-kit-canvas",e.AlphaVideoKitCanvas);
+"use strict";const e=require("./canvas-component-B4CLR7ME.cjs");customElements.get("alpha-video-kit-svg")||customElements.define("alpha-video-kit-svg",e.AlphaVideoKitSVG);customElements.get("alpha-video-kit-canvas")||customElements.define("alpha-video-kit-canvas",e.AlphaVideoKitCanvas);

package/dist/register.js

@@ -1,3 +1,3 @@
-import { a as e, A as a } from "./canvas-component-DMsm7VdA.js";
+import { a as e, A as a } from "./canvas-component-ChQNZXEV.js";
 customElements.get("alpha-video-kit-svg") || customElements.define("alpha-video-kit-svg", e);
 customElements.get("alpha-video-kit-canvas") || customElements.define("alpha-video-kit-canvas", a);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpha-video-kit/svg",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "SVG filter-based renderer for stacked alpha videos",
   "type": "module",
   "files": ["dist", "react.d.ts"],

package/dist/canvas-component-CJM11n9O.cjs

@@ -1,8 +0,0 @@
-"use strict";var x=Object.defineProperty;var M=r=>{throw TypeError(r)};var _=(r,o,t)=>o in r?x(r,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[o]=t;var w=(r,o,t)=>_(r,typeof o!="symbol"?o+"":o,t),T=(r,o,t)=>o.has(r)||M("Cannot "+t);var e=(r,o,t)=>(T(r,o,"read from private field"),t?t.call(r):o.get(r)),u=(r,o,t)=>o.has(r)?M("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(r):o.set(r,t),n=(r,o,t,a)=>(T(r,o,"write to private field"),a?a.call(r,t):o.set(r,t),t),h=(r,o,t)=>(T(r,o,"access private method"),t);const S="avk-stacked-alpha";let E=!1;function P(){if(E)return;if(document.getElementById(S)){E=!0;return}E=!0;const r=document.createElementNS("http://www.w3.org/2000/svg","svg");r.setAttribute("style","position:absolute;width:0;height:0;overflow:hidden"),r.setAttribute("aria-hidden","true"),r.innerHTML=`<defs><filter id="${S}" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB"><feOffset in="SourceGraphic" dy="-0.5" result="s"/><feColorMatrix in="s" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0" result="a"/><feComposite in="SourceGraphic" in2="a" operator="in"/></filter></defs>`,document.body.prepend(r)}const H=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height"],B=new Set(["autoplay","loop","muted","playsinline"]),N=["loadstart","progress","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","play","pause","ratechange","resize","volumechange"];var s,f,b,R,C;class V extends HTMLElement{constructor(){super();u(this,b);u(this,s);u(this,f,null);const t=this.attachShadow({mode:"open"});t.innerHTML=`<style>
-:host{display:inline-block;overflow:hidden}
-video{display:block;width:100%;filter:url(#${S})}
-</style><video></video>`,n(this,s,t.querySelector("video"));for(const a of N)e(this,s).addEventListener(a,y=>{this.dispatchEvent(new Event(y.type,{bubbles:!1,cancelable:!1}))});e(this,s).addEventListener("loadedmetadata",()=>{this.style.aspectRatio=`${e(this,s).videoWidth} / ${Math.floor(e(this,s).videoHeight/2)}`})}connectedCallback(){P();for(const t of H)this.hasAttribute(t)&&h(this,b,R).call(this,t,this.getAttribute(t));h(this,b,C).call(this),n(this,f,new MutationObserver(()=>h(this,b,C).call(this))),e(this,f).observe(this,{childList:!0})}disconnectedCallback(){var t;(t=e(this,f))==null||t.disconnect(),n(this,f,null)}attributeChangedCallback(t,a,y){h(this,b,R).call(this,t,y)}get src(){return e(this,s).src}set src(t){this.setAttribute("src",t)}get currentSrc(){return e(this,s).currentSrc}get currentTime(){return e(this,s).currentTime}set currentTime(t){e(this,s).currentTime=t}get duration(){return e(this,s).duration}get paused(){return e(this,s).paused}get ended(){return e(this,s).ended}get readyState(){return e(this,s).readyState}get videoWidth(){return e(this,s).videoWidth}get videoHeight(){return Math.floor(e(this,s).videoHeight/2)}get volume(){return e(this,s).volume}set volume(t){e(this,s).volume=t}get playbackRate(){return e(this,s).playbackRate}set playbackRate(t){e(this,s).playbackRate=t}get defaultPlaybackRate(){return e(this,s).defaultPlaybackRate}set defaultPlaybackRate(t){e(this,s).defaultPlaybackRate=t}get muted(){return e(this,s).muted}set muted(t){e(this,s).muted=t,this.toggleAttribute("muted",t)}get loop(){return e(this,s).loop}set loop(t){e(this,s).loop=t,this.toggleAttribute("loop",t)}get autoplay(){return e(this,s).autoplay}set autoplay(t){e(this,s).autoplay=t,this.toggleAttribute("autoplay",t)}get preload(){return e(this,s).preload}set preload(t){this.setAttribute("preload",t)}get crossOrigin(){return e(this,s).crossOrigin}set crossOrigin(t){t===null?this.removeAttribute("crossorigin"):this.setAttribute("crossorigin",t)}get buffered(){return e(this,s).buffered}get seekable(){return e(this,s).seekable}get played(){return e(this,s).played}get networkState(){return e(this,s).networkState}get error(){return e(this,s).error}get seeking(){return e(this,s).seeking}play(){return e(this,s).play()}pause(){e(this,s).pause()}load(){e(this,s).load()}canPlayType(t){return e(this,s).canPlayType(t)}}s=new WeakMap,f=new WeakMap,b=new WeakSet,R=function(t,a){B.has(t)?e(this,s)[t]=a!==null:a===null?e(this,s).removeAttribute(t):e(this,s).setAttribute(t,a)},C=function(){e(this,s).querySelectorAll("source").forEach(t=>t.remove()),this.querySelectorAll("source").forEach(t=>{e(this,s).appendChild(t.cloneNode(!0))}),e(this,s).querySelectorAll("source").length>0&&!e(this,s).src&&e(this,s).load()},w(V,"observedAttributes",[...H]);const I=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height"],W=new Set(["autoplay","loop","muted","playsinline"]),D=["loadstart","progress","suspend","abort","error","emptied","stalled","loadedmetadata","loadeddata","canplay","canplaythrough","playing","waiting","seeking","seeked","ended","durationchange","timeupdate","play","pause","ratechange","resize","volumechange"];var i,d,k,m,v,c,p,g,l,O,L,$,A,q;class F extends HTMLElement{constructor(){super();u(this,l);u(this,i);u(this,d);u(this,k);u(this,m,null);u(this,v,null);u(this,c,!1);u(this,p,0);u(this,g,0);const t=this.attachShadow({mode:"open"});t.innerHTML=`<style>
-:host{display:inline-block;overflow:hidden}
-video{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
-canvas{display:block;width:100%;filter:url(#${S})}
-</style><video></video><canvas></canvas>`,n(this,i,t.querySelector("video")),n(this,d,t.querySelector("canvas")),n(this,k,e(this,d).getContext("2d"));for(const a of D)e(this,i).addEventListener(a,y=>{this.dispatchEvent(new Event(y.type,{bubbles:!1,cancelable:!1}))});e(this,i).addEventListener("loadedmetadata",()=>{this.style.aspectRatio=`${e(this,i).videoWidth} / ${Math.floor(e(this,i).videoHeight/2)}`})}connectedCallback(){P();for(const t of I)this.hasAttribute(t)&&h(this,l,O).call(this,t,this.getAttribute(t));h(this,l,L).call(this),n(this,v,new MutationObserver(()=>h(this,l,L).call(this))),e(this,v).observe(this,{childList:!0}),n(this,m,new IntersectionObserver(([t])=>{n(this,c,t.isIntersecting),e(this,c)?h(this,l,$).call(this):h(this,l,A).call(this)},{threshold:0})),e(this,m).observe(this)}disconnectedCallback(){var t,a;h(this,l,A).call(this),(t=e(this,m))==null||t.disconnect(),n(this,m,null),(a=e(this,v))==null||a.disconnect(),n(this,v,null)}attributeChangedCallback(t,a,y){h(this,l,O).call(this,t,y)}get src(){return e(this,i).src}set src(t){this.setAttribute("src",t)}get currentSrc(){return e(this,i).currentSrc}get currentTime(){return e(this,i).currentTime}set currentTime(t){e(this,i).currentTime=t}get duration(){return e(this,i).duration}get paused(){return e(this,i).paused}get ended(){return e(this,i).ended}get readyState(){return e(this,i).readyState}get videoWidth(){return e(this,i).videoWidth}get videoHeight(){return Math.floor(e(this,i).videoHeight/2)}get volume(){return e(this,i).volume}set volume(t){e(this,i).volume=t}get playbackRate(){return e(this,i).playbackRate}set playbackRate(t){e(this,i).playbackRate=t}get defaultPlaybackRate(){return e(this,i).defaultPlaybackRate}set defaultPlaybackRate(t){e(this,i).defaultPlaybackRate=t}get muted(){return e(this,i).muted}set muted(t){e(this,i).muted=t,this.toggleAttribute("muted",t)}get loop(){return e(this,i).loop}set loop(t){e(this,i).loop=t,this.toggleAttribute("loop",t)}get autoplay(){return e(this,i).autoplay}set autoplay(t){e(this,i).autoplay=t,this.toggleAttribute("autoplay",t)}get preload(){return e(this,i).preload}set preload(t){this.setAttribute("preload",t)}get crossOrigin(){return e(this,i).crossOrigin}set crossOrigin(t){t===null?this.removeAttribute("crossorigin"):this.setAttribute("crossorigin",t)}get buffered(){return e(this,i).buffered}get seekable(){return e(this,i).seekable}get played(){return e(this,i).played}get networkState(){return e(this,i).networkState}get error(){return e(this,i).error}get seeking(){return e(this,i).seeking}play(){return e(this,i).play()}pause(){e(this,i).pause()}load(){e(this,i).load()}canPlayType(t){return e(this,i).canPlayType(t)}}i=new WeakMap,d=new WeakMap,k=new WeakMap,m=new WeakMap,v=new WeakMap,c=new WeakMap,p=new WeakMap,g=new WeakMap,l=new WeakSet,O=function(t,a){W.has(t)?e(this,i)[t]=a!==null:a===null?e(this,i).removeAttribute(t):e(this,i).setAttribute(t,a)},L=function(){e(this,i).querySelectorAll("source").forEach(t=>t.remove()),this.querySelectorAll("source").forEach(t=>{e(this,i).appendChild(t.cloneNode(!0))}),e(this,i).querySelectorAll("source").length>0&&!e(this,i).src&&e(this,i).load()},$=function(){if(e(this,c))if(h(this,l,A).call(this),"requestVideoFrameCallback"in e(this,i)){const t=()=>{e(this,c)&&(h(this,l,q).call(this),n(this,g,e(this,i).requestVideoFrameCallback(t)))};n(this,g,e(this,i).requestVideoFrameCallback(t))}else{const t=()=>{e(this,c)&&(h(this,l,q).call(this),n(this,p,requestAnimationFrame(t)))};n(this,p,requestAnimationFrame(t))}},A=function(){var t,a;e(this,g)&&((a=(t=e(this,i)).cancelVideoFrameCallback)==null||a.call(t,e(this,g)),n(this,g,0)),e(this,p)&&(cancelAnimationFrame(e(this,p)),n(this,p,0))},q=function(){if(e(this,i).readyState<2)return;const t=e(this,i).videoWidth,a=e(this,i).videoHeight;(e(this,d).width!==t||e(this,d).height!==a)&&(e(this,d).width=t,e(this,d).height=a),e(this,k).drawImage(e(this,i),0,0)},w(F,"observedAttributes",[...I]);exports.AlphaVideoKitCanvas=F;exports.AlphaVideoKitSVG=V;

package/dist/canvas-component-DMsm7VdA.js

@@ -1,435 +0,0 @@
-var F = Object.defineProperty;
-var M = (r) => {
-  throw TypeError(r);
-};
-var $ = (r, o, t) => o in r ? F(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
-var w = (r, o, t) => $(r, typeof o != "symbol" ? o + "" : o, t), T = (r, o, t) => o.has(r) || M("Cannot " + t);
-var e = (r, o, t) => (T(r, o, "read from private field"), t ? t.call(r) : o.get(r)), u = (r, o, t) => o.has(r) ? M("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(r) : o.set(r, t), n = (r, o, t, a) => (T(r, o, "write to private field"), a ? a.call(r, t) : o.set(r, t), t), h = (r, o, t) => (T(r, o, "access private method"), t);
-const S = "avk-stacked-alpha";
-let E = !1;
-function P() {
-  if (E) return;
-  if (document.getElementById(S)) {
-    E = !0;
-    return;
-  }
-  E = !0;
-  const r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  r.setAttribute("style", "position:absolute;width:0;height:0;overflow:hidden"), r.setAttribute("aria-hidden", "true"), r.innerHTML = `<defs><filter id="${S}" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB"><feOffset in="SourceGraphic" dy="-0.5" result="s"/><feColorMatrix in="s" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0" result="a"/><feComposite in="SourceGraphic" in2="a" operator="in"/></filter></defs>`, document.body.prepend(r);
-}
-const H = [
-  "src",
-  "crossorigin",
-  "preload",
-  "autoplay",
-  "loop",
-  "muted",
-  "playsinline",
-  "poster",
-  "width",
-  "height"
-], V = /* @__PURE__ */ new Set(["autoplay", "loop", "muted", "playsinline"]), _ = [
-  "loadstart",
-  "progress",
-  "suspend",
-  "abort",
-  "error",
-  "emptied",
-  "stalled",
-  "loadedmetadata",
-  "loadeddata",
-  "canplay",
-  "canplaythrough",
-  "playing",
-  "waiting",
-  "seeking",
-  "seeked",
-  "ended",
-  "durationchange",
-  "timeupdate",
-  "play",
-  "pause",
-  "ratechange",
-  "resize",
-  "volumechange"
-];
-var s, f, b, R, C;
-class B extends HTMLElement {
-  constructor() {
-    super();
-    u(this, b);
-    u(this, s);
-    u(this, f, null);
-    const t = this.attachShadow({ mode: "open" });
-    t.innerHTML = `<style>
-:host{display:inline-block;overflow:hidden}
-video{display:block;width:100%;filter:url(#${S})}
-</style><video></video>`, n(this, s, t.querySelector("video"));
-    for (const a of _)
-      e(this, s).addEventListener(a, (y) => {
-        this.dispatchEvent(new Event(y.type, { bubbles: !1, cancelable: !1 }));
-      });
-    e(this, s).addEventListener("loadedmetadata", () => {
-      this.style.aspectRatio = `${e(this, s).videoWidth} / ${Math.floor(e(this, s).videoHeight / 2)}`;
-    });
-  }
-  connectedCallback() {
-    P();
-    for (const t of H)
-      this.hasAttribute(t) && h(this, b, R).call(this, t, this.getAttribute(t));
-    h(this, b, C).call(this), n(this, f, new MutationObserver(() => h(this, b, C).call(this))), e(this, f).observe(this, { childList: !0 });
-  }
-  disconnectedCallback() {
-    var t;
-    (t = e(this, f)) == null || t.disconnect(), n(this, f, null);
-  }
-  attributeChangedCallback(t, a, y) {
-    h(this, b, R).call(this, t, y);
-  }
-  // --- Proxied properties ---
-  get src() {
-    return e(this, s).src;
-  }
-  set src(t) {
-    this.setAttribute("src", t);
-  }
-  get currentSrc() {
-    return e(this, s).currentSrc;
-  }
-  get currentTime() {
-    return e(this, s).currentTime;
-  }
-  set currentTime(t) {
-    e(this, s).currentTime = t;
-  }
-  get duration() {
-    return e(this, s).duration;
-  }
-  get paused() {
-    return e(this, s).paused;
-  }
-  get ended() {
-    return e(this, s).ended;
-  }
-  get readyState() {
-    return e(this, s).readyState;
-  }
-  get videoWidth() {
-    return e(this, s).videoWidth;
-  }
-  get videoHeight() {
-    return Math.floor(e(this, s).videoHeight / 2);
-  }
-  get volume() {
-    return e(this, s).volume;
-  }
-  set volume(t) {
-    e(this, s).volume = t;
-  }
-  get playbackRate() {
-    return e(this, s).playbackRate;
-  }
-  set playbackRate(t) {
-    e(this, s).playbackRate = t;
-  }
-  get defaultPlaybackRate() {
-    return e(this, s).defaultPlaybackRate;
-  }
-  set defaultPlaybackRate(t) {
-    e(this, s).defaultPlaybackRate = t;
-  }
-  get muted() {
-    return e(this, s).muted;
-  }
-  set muted(t) {
-    e(this, s).muted = t, this.toggleAttribute("muted", t);
-  }
-  get loop() {
-    return e(this, s).loop;
-  }
-  set loop(t) {
-    e(this, s).loop = t, this.toggleAttribute("loop", t);
-  }
-  get autoplay() {
-    return e(this, s).autoplay;
-  }
-  set autoplay(t) {
-    e(this, s).autoplay = t, this.toggleAttribute("autoplay", t);
-  }
-  get preload() {
-    return e(this, s).preload;
-  }
-  set preload(t) {
-    this.setAttribute("preload", t);
-  }
-  get crossOrigin() {
-    return e(this, s).crossOrigin;
-  }
-  set crossOrigin(t) {
-    t === null ? this.removeAttribute("crossorigin") : this.setAttribute("crossorigin", t);
-  }
-  get buffered() {
-    return e(this, s).buffered;
-  }
-  get seekable() {
-    return e(this, s).seekable;
-  }
-  get played() {
-    return e(this, s).played;
-  }
-  get networkState() {
-    return e(this, s).networkState;
-  }
-  get error() {
-    return e(this, s).error;
-  }
-  get seeking() {
-    return e(this, s).seeking;
-  }
-  // --- Proxied methods ---
-  play() {
-    return e(this, s).play();
-  }
-  pause() {
-    e(this, s).pause();
-  }
-  load() {
-    e(this, s).load();
-  }
-  canPlayType(t) {
-    return e(this, s).canPlayType(t);
-  }
-}
-s = new WeakMap(), f = new WeakMap(), b = new WeakSet(), R = function(t, a) {
-  V.has(t) ? e(this, s)[t] = a !== null : a === null ? e(this, s).removeAttribute(t) : e(this, s).setAttribute(t, a);
-}, C = function() {
-  e(this, s).querySelectorAll("source").forEach((t) => t.remove()), this.querySelectorAll("source").forEach((t) => {
-    e(this, s).appendChild(t.cloneNode(!0));
-  }), e(this, s).querySelectorAll("source").length > 0 && !e(this, s).src && e(this, s).load();
-}, w(B, "observedAttributes", [...H]);
-const I = [
-  "src",
-  "crossorigin",
-  "preload",
-  "autoplay",
-  "loop",
-  "muted",
-  "playsinline",
-  "poster",
-  "width",
-  "height"
-], N = /* @__PURE__ */ new Set(["autoplay", "loop", "muted", "playsinline"]), W = [
-  "loadstart",
-  "progress",
-  "suspend",
-  "abort",
-  "error",
-  "emptied",
-  "stalled",
-  "loadedmetadata",
-  "loadeddata",
-  "canplay",
-  "canplaythrough",
-  "playing",
-  "waiting",
-  "seeking",
-  "seeked",
-  "ended",
-  "durationchange",
-  "timeupdate",
-  "play",
-  "pause",
-  "ratechange",
-  "resize",
-  "volumechange"
-];
-var i, d, k, m, v, c, p, g, l, O, L, x, A, q;
-class D extends HTMLElement {
-  constructor() {
-    super();
-    u(this, l);
-    u(this, i);
-    u(this, d);
-    u(this, k);
-    u(this, m, null);
-    u(this, v, null);
-    u(this, c, !1);
-    u(this, p, 0);
-    u(this, g, 0);
-    const t = this.attachShadow({ mode: "open" });
-    t.innerHTML = `<style>
-:host{display:inline-block;overflow:hidden}
-video{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
-canvas{display:block;width:100%;filter:url(#${S})}
-</style><video></video><canvas></canvas>`, n(this, i, t.querySelector("video")), n(this, d, t.querySelector("canvas")), n(this, k, e(this, d).getContext("2d"));
-    for (const a of W)
-      e(this, i).addEventListener(a, (y) => {
-        this.dispatchEvent(new Event(y.type, { bubbles: !1, cancelable: !1 }));
-      });
-    e(this, i).addEventListener("loadedmetadata", () => {
-      this.style.aspectRatio = `${e(this, i).videoWidth} / ${Math.floor(e(this, i).videoHeight / 2)}`;
-    });
-  }
-  connectedCallback() {
-    P();
-    for (const t of I)
-      this.hasAttribute(t) && h(this, l, O).call(this, t, this.getAttribute(t));
-    h(this, l, L).call(this), n(this, v, new MutationObserver(() => h(this, l, L).call(this))), e(this, v).observe(this, { childList: !0 }), n(this, m, new IntersectionObserver(
-      ([t]) => {
-        n(this, c, t.isIntersecting), e(this, c) ? h(this, l, x).call(this) : h(this, l, A).call(this);
-      },
-      { threshold: 0 }
-    )), e(this, m).observe(this);
-  }
-  disconnectedCallback() {
-    var t, a;
-    h(this, l, A).call(this), (t = e(this, m)) == null || t.disconnect(), n(this, m, null), (a = e(this, v)) == null || a.disconnect(), n(this, v, null);
-  }
-  attributeChangedCallback(t, a, y) {
-    h(this, l, O).call(this, t, y);
-  }
-  // --- Proxied properties ---
-  get src() {
-    return e(this, i).src;
-  }
-  set src(t) {
-    this.setAttribute("src", t);
-  }
-  get currentSrc() {
-    return e(this, i).currentSrc;
-  }
-  get currentTime() {
-    return e(this, i).currentTime;
-  }
-  set currentTime(t) {
-    e(this, i).currentTime = t;
-  }
-  get duration() {
-    return e(this, i).duration;
-  }
-  get paused() {
-    return e(this, i).paused;
-  }
-  get ended() {
-    return e(this, i).ended;
-  }
-  get readyState() {
-    return e(this, i).readyState;
-  }
-  get videoWidth() {
-    return e(this, i).videoWidth;
-  }
-  get videoHeight() {
-    return Math.floor(e(this, i).videoHeight / 2);
-  }
-  get volume() {
-    return e(this, i).volume;
-  }
-  set volume(t) {
-    e(this, i).volume = t;
-  }
-  get playbackRate() {
-    return e(this, i).playbackRate;
-  }
-  set playbackRate(t) {
-    e(this, i).playbackRate = t;
-  }
-  get defaultPlaybackRate() {
-    return e(this, i).defaultPlaybackRate;
-  }
-  set defaultPlaybackRate(t) {
-    e(this, i).defaultPlaybackRate = t;
-  }
-  get muted() {
-    return e(this, i).muted;
-  }
-  set muted(t) {
-    e(this, i).muted = t, this.toggleAttribute("muted", t);
-  }
-  get loop() {
-    return e(this, i).loop;
-  }
-  set loop(t) {
-    e(this, i).loop = t, this.toggleAttribute("loop", t);
-  }
-  get autoplay() {
-    return e(this, i).autoplay;
-  }
-  set autoplay(t) {
-    e(this, i).autoplay = t, this.toggleAttribute("autoplay", t);
-  }
-  get preload() {
-    return e(this, i).preload;
-  }
-  set preload(t) {
-    this.setAttribute("preload", t);
-  }
-  get crossOrigin() {
-    return e(this, i).crossOrigin;
-  }
-  set crossOrigin(t) {
-    t === null ? this.removeAttribute("crossorigin") : this.setAttribute("crossorigin", t);
-  }
-  get buffered() {
-    return e(this, i).buffered;
-  }
-  get seekable() {
-    return e(this, i).seekable;
-  }
-  get played() {
-    return e(this, i).played;
-  }
-  get networkState() {
-    return e(this, i).networkState;
-  }
-  get error() {
-    return e(this, i).error;
-  }
-  get seeking() {
-    return e(this, i).seeking;
-  }
-  // --- Proxied methods ---
-  play() {
-    return e(this, i).play();
-  }
-  pause() {
-    e(this, i).pause();
-  }
-  load() {
-    e(this, i).load();
-  }
-  canPlayType(t) {
-    return e(this, i).canPlayType(t);
-  }
-}
-i = new WeakMap(), d = new WeakMap(), k = new WeakMap(), m = new WeakMap(), v = new WeakMap(), c = new WeakMap(), p = new WeakMap(), g = new WeakMap(), l = new WeakSet(), O = function(t, a) {
-  N.has(t) ? e(this, i)[t] = a !== null : a === null ? e(this, i).removeAttribute(t) : e(this, i).setAttribute(t, a);
-}, L = function() {
-  e(this, i).querySelectorAll("source").forEach((t) => t.remove()), this.querySelectorAll("source").forEach((t) => {
-    e(this, i).appendChild(t.cloneNode(!0));
-  }), e(this, i).querySelectorAll("source").length > 0 && !e(this, i).src && e(this, i).load();
-}, x = function() {
-  if (e(this, c))
-    if (h(this, l, A).call(this), "requestVideoFrameCallback" in e(this, i)) {
-      const t = () => {
-        e(this, c) && (h(this, l, q).call(this), n(this, g, e(this, i).requestVideoFrameCallback(t)));
-      };
-      n(this, g, e(this, i).requestVideoFrameCallback(t));
-    } else {
-      const t = () => {
-        e(this, c) && (h(this, l, q).call(this), n(this, p, requestAnimationFrame(t)));
-      };
-      n(this, p, requestAnimationFrame(t));
-    }
-}, A = function() {
-  var t, a;
-  e(this, g) && ((a = (t = e(this, i)).cancelVideoFrameCallback) == null || a.call(t, e(this, g)), n(this, g, 0)), e(this, p) && (cancelAnimationFrame(e(this, p)), n(this, p, 0));
-}, q = function() {
-  if (e(this, i).readyState < 2) return;
-  const t = e(this, i).videoWidth, a = e(this, i).videoHeight;
-  (e(this, d).width !== t || e(this, d).height !== a) && (e(this, d).width = t, e(this, d).height = a), e(this, k).drawImage(e(this, i), 0, 0);
-}, w(D, "observedAttributes", [...I]);
-export {
-  D as A,
-  B as a
-};