@alpha-video-kit/svg 0.2.0 → 0.2.1

package/dist/canvas-component-CJM11n9O.cjs

@@ -0,0 +1,8 @@
+"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

@@ -0,0 +1,435 @@
+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
+};

package/dist/index.cjs

@@ -1,7 +1,7 @@
-"use strict";var G=Object.defineProperty;var U=i=>{throw TypeError(i)};var z=(i,s,t)=>s in i?G(i,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[s]=t;var B=(i,s,t)=>z(i,typeof s!="symbol"?s+"":s,t),E=(i,s,t)=>s.has(i)||U("Cannot "+t);var e=(i,s,t)=>(E(i,s,"read from private field"),t?t.call(i):s.get(i)),y=(i,s,t)=>s.has(i)?U("Cannot add the same private member more than once"):s instanceof WeakSet?s.add(i):s.set(i,t),h=(i,s,t,a)=>(E(i,s,"write to private field"),a?a.call(i,t):s.set(i,t),t),u=(i,s,t)=>(E(i,s,"access private method"),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function j(i){const{canvas:s}=i,t=s.getContext("2d"),a=document.createElement("canvas"),d=a.getContext("2d");let p=!1;function x(v,n,l,f){return`<svg xmlns="http://www.w3.org/2000/svg"
+"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"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
-                 width="${n}" height="${l}"
-                 viewBox="0 0 ${n} ${l}">
+                 width="${e}" height="${t}"
+                 viewBox="0 0 ${e} ${t}">
               <defs>
                 <filter id="r2a" color-interpolation-filters="sRGB">
                   <feColorMatrix type="matrix"
@@ -11,24 +11,20 @@
                             1 0 0 0 0"/>
                 </filter>
                 <mask id="alphaMask">
-                  <svg viewBox="0 ${l} ${n} ${l}"
-                       width="${n}" height="${l}"
+                  <svg viewBox="0 ${t} ${e} ${t}"
+                       width="${e}" height="${t}"
                        preserveAspectRatio="none">
-                    <image href="${v}"
-                           width="${n}" height="${f}"
+                    <image href="${o}"
+                           width="${e}" height="${n}"
                            filter="url(#r2a)"/>
                   </svg>
                 </mask>
               </defs>
-              <svg viewBox="0 0 ${n} ${l}"
-                   width="${n}" height="${l}"
+              <svg viewBox="0 0 ${e} ${t}"
+                   width="${e}" height="${t}"
                    preserveAspectRatio="none"
                    mask="url(#alphaMask)">
-                <image href="${v}"
-                       width="${n}" height="${f}"/>
+                <image href="${o}"
+                       width="${e}" height="${n}"/>
               </svg>
-            </svg>`}return{drawFrame(v){if(p)return;const n=v.videoWidth,l=v.videoHeight,f=Math.floor(l/2);(s.width!==n||s.height!==f)&&(s.width=n,s.height=f),(a.width!==n||a.height!==l)&&(a.width=n,a.height=l),d.drawImage(v,0,0);const A=a.toDataURL("image/png"),F=x(A,n,f,l),L=new Blob([F],{type:"image/svg+xml"}),g=URL.createObjectURL(L),C=new Image;C.onload=()=>{if(p){URL.revokeObjectURL(g);return}t.clearRect(0,0,n,f),t.drawImage(C,0,0),URL.revokeObjectURL(g)},C.src=g},setPremultipliedAlpha(v){},destroy(){p||(p=!0)},get isDestroyed(){return p}}}function W(i){const{canvas:s,premultipliedAlpha:t=!1}=i,a=s.getContext("2d",{willReadFrequently:!0}),d=document.createElement("canvas"),p=d.getContext("2d",{willReadFrequently:!0});let x=!1,v=t;return{drawFrame(n){if(x)return;const l=n.videoWidth,f=n.videoHeight,A=Math.floor(f/2);(s.width!==l||s.height!==A)&&(s.width=l,s.height=A),(d.width!==l||d.height!==f)&&(d.width=l,d.height=f),p.drawImage(n,0,0);const F=p.getImageData(0,0,l,A),L=p.getImageData(0,A,l,A),g=F.data,C=L.data;for(let m=0;m<g.length;m+=4){const M=C[m];if(v)g[m+3]=M;else{const T=M/255;g[m]=Math.round(g[m]*T),g[m+1]=Math.round(g[m+1]*T),g[m+2]=Math.round(g[m+2]*T),g[m+3]=M}}a.putImageData(F,0,0)},setPremultipliedAlpha(n){v=n},destroy(){x||(x=!0)},get isDestroyed(){return x}}}function H(i){const{mode:s="canvas",...t}=i;return s==="svg-filter"?j(t):W(t)}const _=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height","mode"],K=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 r,$,c,R,S,b,w,k,o,I,q,D,P,O,V;class N extends HTMLElement{constructor(){super();y(this,o);y(this,r);y(this,$);y(this,c,null);y(this,R,null);y(this,S,null);y(this,b,!1);y(this,w,0);y(this,k,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%;height:100%}
-</style><video></video><canvas></canvas>`,h(this,r,t.querySelector("video")),h(this,$,t.querySelector("canvas"));for(const a of J)e(this,r).addEventListener(a,d=>{this.dispatchEvent(new Event(d.type,{bubbles:!1,cancelable:!1}))})}connectedCallback(){for(const t of _)t!=="mode"&&this.hasAttribute(t)&&u(this,o,I).call(this,t,this.getAttribute(t));u(this,o,q).call(this),h(this,S,new MutationObserver(()=>u(this,o,q).call(this))),e(this,S).observe(this,{childList:!0}),h(this,R,new IntersectionObserver(([t])=>{h(this,b,t.isIntersecting),e(this,b)?(u(this,o,D).call(this),u(this,o,P).call(this)):u(this,o,O).call(this)},{threshold:0})),e(this,R).observe(this)}disconnectedCallback(){var t,a,d;u(this,o,O).call(this),(t=e(this,R))==null||t.disconnect(),h(this,R,null),(a=e(this,S))==null||a.disconnect(),h(this,S,null),(d=e(this,c))==null||d.destroy(),h(this,c,null)}attributeChangedCallback(t,a,d){var p;if(t==="mode"){(p=e(this,c))==null||p.destroy(),h(this,c,null),e(this,b)&&(u(this,o,D).call(this),u(this,o,P).call(this));return}u(this,o,I).call(this,t,d)}get src(){return e(this,r).src}set src(t){this.setAttribute("src",t)}get currentSrc(){return e(this,r).currentSrc}get currentTime(){return e(this,r).currentTime}set currentTime(t){e(this,r).currentTime=t}get duration(){return e(this,r).duration}get paused(){return e(this,r).paused}get ended(){return e(this,r).ended}get readyState(){return e(this,r).readyState}get videoWidth(){return e(this,r).videoWidth}get videoHeight(){return Math.floor(e(this,r).videoHeight/2)}get volume(){return e(this,r).volume}set volume(t){e(this,r).volume=t}get playbackRate(){return e(this,r).playbackRate}set playbackRate(t){e(this,r).playbackRate=t}get defaultPlaybackRate(){return e(this,r).defaultPlaybackRate}set defaultPlaybackRate(t){e(this,r).defaultPlaybackRate=t}get muted(){return e(this,r).muted}set muted(t){e(this,r).muted=t,this.toggleAttribute("muted",t)}get loop(){return e(this,r).loop}set loop(t){e(this,r).loop=t,this.toggleAttribute("loop",t)}get autoplay(){return e(this,r).autoplay}set autoplay(t){e(this,r).autoplay=t,this.toggleAttribute("autoplay",t)}get preload(){return e(this,r).preload}set preload(t){this.setAttribute("preload",t)}get crossOrigin(){return e(this,r).crossOrigin}set crossOrigin(t){t===null?this.removeAttribute("crossorigin"):this.setAttribute("crossorigin",t)}get buffered(){return e(this,r).buffered}get seekable(){return e(this,r).seekable}get played(){return e(this,r).played}get networkState(){return e(this,r).networkState}get error(){return e(this,r).error}get seeking(){return e(this,r).seeking}play(){return e(this,r).play()}pause(){e(this,r).pause()}load(){e(this,r).load()}canPlayType(t){return e(this,r).canPlayType(t)}}r=new WeakMap,$=new WeakMap,c=new WeakMap,R=new WeakMap,S=new WeakMap,b=new WeakMap,w=new WeakMap,k=new WeakMap,o=new WeakSet,I=function(t,a){K.has(t)?e(this,r)[t]=a!==null:a===null?e(this,r).removeAttribute(t):e(this,r).setAttribute(t,a)},q=function(){e(this,r).querySelectorAll("source").forEach(t=>t.remove()),this.querySelectorAll("source").forEach(t=>{e(this,r).appendChild(t.cloneNode(!0))}),e(this,r).querySelectorAll("source").length>0&&!e(this,r).src&&e(this,r).load()},D=function(){if(!(e(this,c)&&!e(this,c).isDestroyed))try{const t=this.getAttribute("mode")||"canvas";h(this,c,H({canvas:e(this,$),mode:t}))}catch{}},P=function(){if(!(!e(this,b)||!e(this,c)))if(u(this,o,O).call(this),"requestVideoFrameCallback"in e(this,r)){const t=()=>{!e(this,b)||!e(this,c)||(u(this,o,V).call(this),h(this,k,e(this,r).requestVideoFrameCallback(t)))};h(this,k,e(this,r).requestVideoFrameCallback(t))}else{const t=()=>{!e(this,b)||!e(this,c)||(u(this,o,V).call(this),h(this,w,requestAnimationFrame(t)))};h(this,w,requestAnimationFrame(t))}},O=function(){var t,a;e(this,k)&&((a=(t=e(this,r)).cancelVideoFrameCallback)==null||a.call(t,e(this,k)),h(this,k,0)),e(this,w)&&(cancelAnimationFrame(e(this,w)),h(this,w,0))},V=function(){e(this,r).readyState<2||!e(this,c)||e(this,c).drawFrame(e(this,r))},B(N,"observedAttributes",[..._]);exports.AlphaVideoKitSVG=N;exports.createCanvasFilterRenderer=W;exports.createRenderer=H;exports.createSvgFilterRenderer=j;
+            </svg>`}return{drawFrame(o){if(s)return;const e=o.videoWidth,t=o.videoHeight,n=Math.floor(t/2);(r.width!==e||r.height!==n)&&(r.width=e,r.height=n),(l.width!==e||l.height!==t)&&(l.width=e,l.height=t),d.drawImage(o,0,0);const h=l.toDataURL("image/png"),f=g(h,e,n,t),m=new Blob([f],{type:"image/svg+xml"}),a=URL.createObjectURL(m),v=new Image;v.onload=()=>{if(s){URL.revokeObjectURL(a);return}c.clearRect(0,0,e,n),c.drawImage(v,0,0),URL.revokeObjectURL(a)},v.src=a},setPremultipliedAlpha(o){},destroy(){s||(s=!0)},get isDestroyed(){return s}}}function $(u){const{canvas:r,premultipliedAlpha:c=!1}=u,l=r.getContext("2d",{willReadFrequently:!0}),d=document.createElement("canvas"),s=d.getContext("2d",{willReadFrequently:!0});let g=!1,o=c;return{drawFrame(e){if(g)return;const t=e.videoWidth,n=e.videoHeight,h=Math.floor(n/2);(r.width!==t||r.height!==h)&&(r.width=t,r.height=h),(d.width!==t||d.height!==n)&&(d.width=t,d.height=n),s.drawImage(e,0,0);const f=s.getImageData(0,0,t,h),m=s.getImageData(0,h,t,h),a=f.data,v=m.data;for(let i=0;i<a.length;i+=4){const p=v[i];if(o)a[i+3]=p;else{const w=p/255;a[i]=Math.round(a[i]*w),a[i+1]=Math.round(a[i+1]*w),a[i+2]=Math.round(a[i+2]*w),a[i+3]=p}}l.putImageData(f,0,0)},setPremultipliedAlpha(e){o=e},destroy(){g||(g=!0)},get isDestroyed(){return g}}}function C(u){const{mode:r="canvas",...c}=u;return r==="svg-filter"?R(c):$(c)}exports.AlphaVideoKitCanvas=x.AlphaVideoKitCanvas;exports.AlphaVideoKitSVG=x.AlphaVideoKitSVG;exports.createCanvasFilterRenderer=$;exports.createRenderer=C;exports.createSvgFilterRenderer=R;

package/dist/index.d.ts

@@ -1,6 +1,66 @@
+/**
+ * `<alpha-video-kit-canvas>` — Canvas 2D with the same SVG filter applied via CSS.
+ *
+ * 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.
+ */
+export declare class AlphaVideoKitCanvas extends HTMLElement {
+    #private;
+    static observedAttributes: ("src" | "crossorigin" | "preload" | "autoplay" | "loop" | "muted" | "playsinline" | "poster" | "width" | "height")[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    get src(): string;
+    set src(v: string);
+    get currentSrc(): string;
+    get currentTime(): number;
+    set currentTime(v: number);
+    get duration(): number;
+    get paused(): boolean;
+    get ended(): boolean;
+    get readyState(): number;
+    get videoWidth(): number;
+    get videoHeight(): number;
+    get volume(): number;
+    set volume(v: number);
+    get playbackRate(): number;
+    set playbackRate(v: number);
+    get defaultPlaybackRate(): number;
+    set defaultPlaybackRate(v: number);
+    get muted(): boolean;
+    set muted(v: boolean);
+    get loop(): boolean;
+    set loop(v: boolean);
+    get autoplay(): boolean;
+    set autoplay(v: boolean);
+    get preload(): string;
+    set preload(v: string);
+    get crossOrigin(): string | null;
+    set crossOrigin(v: string | null);
+    get buffered(): TimeRanges;
+    get seekable(): TimeRanges;
+    get played(): TimeRanges;
+    get networkState(): number;
+    get error(): MediaError | null;
+    get seeking(): boolean;
+    play(): Promise<void>;
+    pause(): void;
+    load(): void;
+    canPlayType(type: string): CanPlayTypeResult;
+}
+
+/**
+ * `<alpha-video-kit-svg>` — SVG filter applied directly to a `<video>` element.
+ *
+ * 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.
+ */
 export declare class AlphaVideoKitSVG extends HTMLElement {
     #private;
-    static observedAttributes: ("mode" | "src" | "crossorigin" | "preload" | "autoplay" | "loop" | "muted" | "playsinline" | "poster" | "width" | "height")[];
+    static observedAttributes: ("src" | "crossorigin" | "preload" | "autoplay" | "loop" | "muted" | "playsinline" | "poster" | "width" | "height")[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/index.js

@@ -1,18 +1,12 @@
-var W = Object.defineProperty;
-var V = (r) => {
-  throw TypeError(r);
-};
-var j = (r, i, t) => i in r ? W(r, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[i] = t;
-var B = (r, i, t) => j(r, typeof i != "symbol" ? i + "" : i, t), M = (r, i, t) => i.has(r) || V("Cannot " + t);
-var e = (r, i, t) => (M(r, i, "read from private field"), t ? t.call(r) : i.get(r)), y = (r, i, t) => i.has(r) ? V("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(r) : i.set(r, t), l = (r, i, t, a) => (M(r, i, "write to private field"), a ? a.call(r, t) : i.set(r, t), t), d = (r, i, t) => (M(r, i, "access private method"), t);
-function H(r) {
-  const { canvas: i } = r, t = i.getContext("2d"), a = document.createElement("canvas"), u = a.getContext("2d");
-  let p = !1;
-  function S(v, n, h, f) {
+import { A as k, a as b } from "./canvas-component-DMsm7VdA.js";
+function x(u) {
+  const { canvas: r } = u, c = r.getContext("2d"), l = document.createElement("canvas"), d = l.getContext("2d");
+  let i = !1;
+  function g(s, e, t, n) {
     return `<svg xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
-                 width="${n}" height="${h}"
-                 viewBox="0 0 ${n} ${h}">
+                 width="${e}" height="${t}"
+                 viewBox="0 0 ${e} ${t}">
               <defs>
                 <filter id="r2a" color-interpolation-filters="sRGB">
                   <feColorMatrix type="matrix"
@@ -22,315 +16,87 @@ function H(r) {
                             1 0 0 0 0"/>
                 </filter>
                 <mask id="alphaMask">
-                  <svg viewBox="0 ${h} ${n} ${h}"
-                       width="${n}" height="${h}"
+                  <svg viewBox="0 ${t} ${e} ${t}"
+                       width="${e}" height="${t}"
                        preserveAspectRatio="none">
-                    <image href="${v}"
-                           width="${n}" height="${f}"
+                    <image href="${s}"
+                           width="${e}" height="${n}"
                            filter="url(#r2a)"/>
                   </svg>
                 </mask>
               </defs>
-              <svg viewBox="0 0 ${n} ${h}"
-                   width="${n}" height="${h}"
+              <svg viewBox="0 0 ${e} ${t}"
+                   width="${e}" height="${t}"
                    preserveAspectRatio="none"
                    mask="url(#alphaMask)">
-                <image href="${v}"
-                       width="${n}" height="${f}"/>
+                <image href="${s}"
+                       width="${e}" height="${n}"/>
               </svg>
             </svg>`;
   }
   return {
-    drawFrame(v) {
-      if (p) return;
-      const n = v.videoWidth, h = v.videoHeight, f = Math.floor(h / 2);
-      (i.width !== n || i.height !== f) && (i.width = n, i.height = f), (a.width !== n || a.height !== h) && (a.width = n, a.height = h), u.drawImage(v, 0, 0);
-      const A = a.toDataURL("image/png"), F = S(A, n, f, h), O = new Blob([F], { type: "image/svg+xml" }), g = URL.createObjectURL(O), C = new Image();
-      C.onload = () => {
-        if (p) {
-          URL.revokeObjectURL(g);
+    drawFrame(s) {
+      if (i) return;
+      const e = s.videoWidth, t = s.videoHeight, n = Math.floor(t / 2);
+      (r.width !== e || r.height !== n) && (r.width = e, r.height = n), (l.width !== e || l.height !== t) && (l.width = e, l.height = t), d.drawImage(s, 0, 0);
+      const h = l.toDataURL("image/png"), m = g(h, e, n, t), p = new Blob([m], { type: "image/svg+xml" }), a = URL.createObjectURL(p), f = new Image();
+      f.onload = () => {
+        if (i) {
+          URL.revokeObjectURL(a);
           return;
         }
-        t.clearRect(0, 0, n, f), t.drawImage(C, 0, 0), URL.revokeObjectURL(g);
-      }, C.src = g;
+        c.clearRect(0, 0, e, n), c.drawImage(f, 0, 0), URL.revokeObjectURL(a);
+      }, f.src = a;
     },
-    setPremultipliedAlpha(v) {
+    setPremultipliedAlpha(s) {
     },
     destroy() {
-      p || (p = !0);
+      i || (i = !0);
     },
     get isDestroyed() {
-      return p;
+      return i;
     }
   };
 }
-function N(r) {
-  const { canvas: i, premultipliedAlpha: t = !1 } = r, a = i.getContext("2d", { willReadFrequently: !0 }), u = document.createElement("canvas"), p = u.getContext("2d", { willReadFrequently: !0 });
-  let S = !1, v = t;
+function $(u) {
+  const { canvas: r, premultipliedAlpha: c = !1 } = u, l = r.getContext("2d", { willReadFrequently: !0 }), d = document.createElement("canvas"), i = d.getContext("2d", { willReadFrequently: !0 });
+  let g = !1, s = c;
   return {
-    drawFrame(n) {
-      if (S) return;
-      const h = n.videoWidth, f = n.videoHeight, A = Math.floor(f / 2);
-      (i.width !== h || i.height !== A) && (i.width = h, i.height = A), (u.width !== h || u.height !== f) && (u.width = h, u.height = f), p.drawImage(n, 0, 0);
-      const F = p.getImageData(0, 0, h, A), O = p.getImageData(0, A, h, A), g = F.data, C = O.data;
-      for (let m = 0; m < g.length; m += 4) {
-        const E = C[m];
-        if (v)
-          g[m + 3] = E;
+    drawFrame(e) {
+      if (g) return;
+      const t = e.videoWidth, n = e.videoHeight, h = Math.floor(n / 2);
+      (r.width !== t || r.height !== h) && (r.width = t, r.height = h), (d.width !== t || d.height !== n) && (d.width = t, d.height = n), i.drawImage(e, 0, 0);
+      const m = i.getImageData(0, 0, t, h), p = i.getImageData(0, h, t, h), a = m.data, f = p.data;
+      for (let o = 0; o < a.length; o += 4) {
+        const v = f[o];
+        if (s)
+          a[o + 3] = v;
         else {
-          const I = E / 255;
-          g[m] = Math.round(g[m] * I), g[m + 1] = Math.round(g[m + 1] * I), g[m + 2] = Math.round(g[m + 2] * I), g[m + 3] = E;
+          const w = v / 255;
+          a[o] = Math.round(a[o] * w), a[o + 1] = Math.round(a[o + 1] * w), a[o + 2] = Math.round(a[o + 2] * w), a[o + 3] = v;
         }
       }
-      a.putImageData(F, 0, 0);
+      l.putImageData(m, 0, 0);
     },
-    setPremultipliedAlpha(n) {
-      v = n;
+    setPremultipliedAlpha(e) {
+      s = e;
     },
     destroy() {
-      S || (S = !0);
+      g || (g = !0);
     },
     get isDestroyed() {
-      return S;
+      return g;
     }
   };
 }
-function z(r) {
-  const { mode: i = "canvas", ...t } = r;
-  return i === "svg-filter" ? H(t) : N(t);
-}
-const _ = [
-  "src",
-  "crossorigin",
-  "preload",
-  "autoplay",
-  "loop",
-  "muted",
-  "playsinline",
-  "poster",
-  "width",
-  "height",
-  "mode"
-], G = /* @__PURE__ */ 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, $, c, R, x, b, w, k, o, T, q, D, P, L, U;
-class K extends HTMLElement {
-  constructor() {
-    super();
-    y(this, o);
-    y(this, s);
-    y(this, $);
-    y(this, c, null);
-    y(this, R, null);
-    y(this, x, null);
-    y(this, b, !1);
-    y(this, w, 0);
-    y(this, k, 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%;height:100%}
-</style><video></video><canvas></canvas>`, l(this, s, t.querySelector("video")), l(this, $, t.querySelector("canvas"));
-    for (const a of J)
-      e(this, s).addEventListener(a, (u) => {
-        this.dispatchEvent(new Event(u.type, { bubbles: !1, cancelable: !1 }));
-      });
-  }
-  connectedCallback() {
-    for (const t of _)
-      t !== "mode" && this.hasAttribute(t) && d(this, o, T).call(this, t, this.getAttribute(t));
-    d(this, o, q).call(this), l(this, x, new MutationObserver(() => d(this, o, q).call(this))), e(this, x).observe(this, { childList: !0 }), l(this, R, new IntersectionObserver(
-      ([t]) => {
-        l(this, b, t.isIntersecting), e(this, b) ? (d(this, o, D).call(this), d(this, o, P).call(this)) : d(this, o, L).call(this);
-      },
-      { threshold: 0 }
-    )), e(this, R).observe(this);
-  }
-  disconnectedCallback() {
-    var t, a, u;
-    d(this, o, L).call(this), (t = e(this, R)) == null || t.disconnect(), l(this, R, null), (a = e(this, x)) == null || a.disconnect(), l(this, x, null), (u = e(this, c)) == null || u.destroy(), l(this, c, null);
-  }
-  attributeChangedCallback(t, a, u) {
-    var p;
-    if (t === "mode") {
-      (p = e(this, c)) == null || p.destroy(), l(this, c, null), e(this, b) && (d(this, o, D).call(this), d(this, o, P).call(this));
-      return;
-    }
-    d(this, o, T).call(this, t, u);
-  }
-  // --- 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);
-  }
+function R(u) {
+  const { mode: r = "canvas", ...c } = u;
+  return r === "svg-filter" ? x(c) : $(c);
 }
-s = new WeakMap(), $ = new WeakMap(), c = new WeakMap(), R = new WeakMap(), x = new WeakMap(), b = new WeakMap(), w = new WeakMap(), k = new WeakMap(), o = new WeakSet(), T = function(t, a) {
-  G.has(t) ? e(this, s)[t] = a !== null : a === null ? e(this, s).removeAttribute(t) : e(this, s).setAttribute(t, a);
-}, q = 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();
-}, D = function() {
-  if (!(e(this, c) && !e(this, c).isDestroyed))
-    try {
-      const t = this.getAttribute("mode") || "canvas";
-      l(this, c, z({ canvas: e(this, $), mode: t }));
-    } catch {
-    }
-}, P = function() {
-  if (!(!e(this, b) || !e(this, c)))
-    if (d(this, o, L).call(this), "requestVideoFrameCallback" in e(this, s)) {
-      const t = () => {
-        !e(this, b) || !e(this, c) || (d(this, o, U).call(this), l(this, k, e(this, s).requestVideoFrameCallback(t)));
-      };
-      l(this, k, e(this, s).requestVideoFrameCallback(t));
-    } else {
-      const t = () => {
-        !e(this, b) || !e(this, c) || (d(this, o, U).call(this), l(this, w, requestAnimationFrame(t)));
-      };
-      l(this, w, requestAnimationFrame(t));
-    }
-}, L = function() {
-  var t, a;
-  e(this, k) && ((a = (t = e(this, s)).cancelVideoFrameCallback) == null || a.call(t, e(this, k)), l(this, k, 0)), e(this, w) && (cancelAnimationFrame(e(this, w)), l(this, w, 0));
-}, U = function() {
-  e(this, s).readyState < 2 || !e(this, c) || e(this, c).drawFrame(e(this, s));
-}, B(K, "observedAttributes", [..._]);
 export {
-  K as AlphaVideoKitSVG,
-  N as createCanvasFilterRenderer,
-  z as createRenderer,
-  H as createSvgFilterRenderer
+  k as AlphaVideoKitCanvas,
+  b as AlphaVideoKitSVG,
+  $ as createCanvasFilterRenderer,
+  R as createRenderer,
+  x as createSvgFilterRenderer
 };

package/dist/register.cjs

@@ -1 +1 @@
-"use strict";const e=require("./index.cjs");customElements.get("alpha-video-kit-svg")||customElements.define("alpha-video-kit-svg",e.AlphaVideoKitSVG);
+"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);

package/dist/register.js

@@ -1,2 +1,3 @@
-import { AlphaVideoKitSVG as e } from "./index.js";
+import { a as e, A as a } from "./canvas-component-DMsm7VdA.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.0",
+  "version": "0.2.1",
   "description": "SVG filter-based renderer for stacked alpha videos",
   "type": "module",
   "files": ["dist", "react.d.ts"],

package/react.d.ts

@@ -1,4 +1,5 @@
 import type { AlphaVideoKitSVG } from './dist/index.js';
+import type { AlphaVideoKitCanvas } from './dist/index.js';
 
 interface AlphaVideoKitSVGAttributes extends React.HTMLAttributes<AlphaVideoKitSVG> {
   src?: string;
@@ -11,13 +12,26 @@ interface AlphaVideoKitSVGAttributes extends React.HTMLAttributes<AlphaVideoKitS
   poster?: string;
   width?: number | string;
   height?: number | string;
-  mode?: 'canvas' | 'svg-filter';
+}
+
+interface AlphaVideoKitCanvasAttributes extends React.HTMLAttributes<AlphaVideoKitCanvas> {
+  src?: string;
+  crossOrigin?: string;
+  preload?: string;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  playsInline?: boolean;
+  poster?: string;
+  width?: number | string;
+  height?: number | string;
 }
 
 declare global {
   namespace JSX {
     interface IntrinsicElements {
       'alpha-video-kit-svg': AlphaVideoKitSVGAttributes;
+      'alpha-video-kit-canvas': AlphaVideoKitCanvasAttributes;
     }
   }
 }