@alpha-video-kit/svg 0.2.4 → 0.3.0

package/dist/{canvas-component-ChQNZXEV.js → canvas-component-C3vC6FBw.js}

@@ -1,10 +1,10 @@
-var N = Object.defineProperty;
-var W = (o) => {
-  throw TypeError(o);
+var Q = Object.defineProperty;
+var U = (h) => {
+  throw TypeError(h);
 };
-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);
+var X = (h, n, t) => n in h ? Q(h, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[n] = t;
+var I = (h, n, t) => X(h, typeof n != "symbol" ? n + "" : n, t), F = (h, n, t) => n.has(h) || U("Cannot " + t);
+var e = (h, n, t) => (F(h, n, "read from private field"), t ? t.call(h) : n.get(h)), u = (h, n, t) => n.has(h) ? U("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(h) : n.set(h, t), a = (h, n, t, r) => (F(h, n, "write to private field"), r ? r.call(h, t) : n.set(h, t), t), d = (h, n, t) => (F(h, n, "access private method"), t);
 const j = [
   "src",
   "crossorigin",
@@ -16,7 +16,7 @@ const j = [
   "poster",
   "width",
   "height"
-], U = /* @__PURE__ */ new Set(["autoplay", "loop", "muted", "playsinline"]), Y = [
+], Z = /* @__PURE__ */ new Set(["autoplay", "loop", "muted", "playsinline"]), tt = [
   "loadstart",
   "progress",
   "suspend",
@@ -41,53 +41,53 @@ const j = [
   "resize",
   "volumechange"
 ];
-var s, T, S, A, R, y, k, c, P, I, V;
-class J extends HTMLElement {
+var s, L, w, E, x, y, O, c, V, _, D;
+class et 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);
+    u(this, c);
+    u(this, s);
+    u(this, L);
+    u(this, w);
+    u(this, E);
+    u(this, x);
+    u(this, y, null);
+    u(this, O);
     const t = this.attachShadow({ mode: "open" });
-    a(this, k, `avk-${Math.random().toString(36).slice(2, 8)}`), t.innerHTML = `<style>
+    a(this, O, `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">
+<filter id="${e(this, O)}" 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)})">
+<foreignObject width="1" height="1" filter="url(#${e(this, O)})">
 <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 }));
+</svg>`, a(this, L, t.querySelector("svg")), a(this, w, t.querySelector("foreignObject")), a(this, E, t.querySelector("filter")), a(this, x, t.querySelector("feOffset")), a(this, s, t.querySelector("video"));
+    for (const r of tt)
+      e(this, s).addEventListener(r, (l) => {
+        this.dispatchEvent(new Event(l.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));
+    e(this, s).addEventListener("loadedmetadata", () => d(this, c, V).call(this)), e(this, s).addEventListener("resize", () => d(this, c, V).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 });
+      this.hasAttribute(t) && d(this, c, _).call(this, t, this.getAttribute(t));
+    d(this, c, D).call(this), a(this, y, new MutationObserver(() => d(this, c, D).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);
+  attributeChangedCallback(t, r, l) {
+    d(this, c, _).call(this, t, l);
   }
   // --- Proxied properties ---
   get src() {
@@ -203,19 +203,19 @@ video{display:block;width:100%;height:100%}
     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() {
+s = new WeakMap(), L = new WeakMap(), w = new WeakMap(), E = new WeakMap(), x = new WeakMap(), y = new WeakMap(), O = new WeakMap(), c = new WeakSet(), V = 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() {
+  const l = Math.floor(r / 2);
+  e(this, L).setAttribute("viewBox", `0 0 ${t} ${l}`), e(this, w).setAttribute("width", String(t)), e(this, w).setAttribute("height", String(r)), e(this, E).setAttribute("width", String(t)), e(this, E).setAttribute("height", String(r)), e(this, x).setAttribute("dy", String(-l));
+}, _ = function(t, r) {
+  Z.has(t) ? e(this, s)[t] = r !== null : r === null ? e(this, s).removeAttribute(t) : e(this, s).setAttribute(t, r);
+}, D = 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 = [
+}, I(et, "observedAttributes", [...j]);
+const k = "http://www.w3.org/2000/svg", Y = [
   "src",
   "crossorigin",
   "preload",
@@ -226,7 +226,7 @@ const D = [
   "poster",
   "width",
   "height"
-], K = /* @__PURE__ */ new Set(["autoplay", "loop", "muted", "playsinline"]), Q = [
+], it = /* @__PURE__ */ new Set(["autoplay", "loop", "muted", "playsinline"]), st = [
   "loadstart",
   "progress",
   "suspend",
@@ -251,66 +251,56 @@ const D = [
   "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 {
+var i, p, T, H, m, v, g, b, f, C, A, S, R, o, G, J, P, W, B, K, $, z;
+class rt 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);
+    u(this, o);
+    u(this, i);
+    u(this, p);
+    u(this, T);
+    u(this, H);
+    u(this, m, null);
+    u(this, v, null);
+    u(this, g, !1);
+    u(this, b, 0);
+    u(this, f, 0);
+    // SVG filter (lives in document.body so ctx.filter url() can resolve it)
+    u(this, C);
+    u(this, A, null);
+    u(this, S, null);
+    u(this, R, null);
     const t = this.attachShadow({ mode: "open" });
-    a(this, E, `avk-c-${Math.random().toString(36).slice(2, 8)}`), t.innerHTML = `<style>
+    a(this, C, `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%}
+.clip{overflow:hidden;width:100%}
+canvas{display:block;width: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 }));
+<div class="clip"><canvas></canvas></div>`, a(this, i, t.querySelector("video")), a(this, H, t.querySelector(".clip")), a(this, p, t.querySelector("canvas")), a(this, T, e(this, p).getContext("2d"));
+    for (const r of st)
+      e(this, i).addEventListener(r, (l) => {
+        this.dispatchEvent(new Event(l.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));
+    e(this, i).addEventListener("loadedmetadata", () => d(this, o, P).call(this)), e(this, i).addEventListener("resize", () => d(this, o, P).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(
+    for (const t of Y)
+      this.hasAttribute(t) && d(this, o, W).call(this, t, this.getAttribute(t));
+    d(this, o, B).call(this), a(this, v, new MutationObserver(() => d(this, o, B).call(this))), e(this, v).observe(this, { childList: !0 }), d(this, o, G).call(this), a(this, m, new IntersectionObserver(
       ([t]) => {
-        a(this, p, t.isIntersecting), e(this, p) ? u(this, n, G).call(this) : u(this, n, L).call(this);
+        a(this, g, t.isIntersecting), e(this, g) ? d(this, o, K).call(this) : d(this, o, $).call(this);
       },
       { threshold: 0 }
-    )), e(this, v).observe(this);
+    )), e(this, m).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);
+    d(this, o, $).call(this), (t = e(this, m)) == null || t.disconnect(), a(this, m, null), (r = e(this, v)) == null || r.disconnect(), a(this, v, null), d(this, o, J).call(this);
   }
-  attributeChangedCallback(t, r, d) {
-    u(this, n, B).call(this, t, d);
+  attributeChangedCallback(t, r, l) {
+    d(this, o, W).call(this, t, l);
   }
   // --- Proxied properties ---
   get src() {
@@ -426,39 +416,54 @@ canvas{display:block;width:100%;height:100%}
     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() {
+i = new WeakMap(), p = new WeakMap(), T = new WeakMap(), H = new WeakMap(), m = new WeakMap(), v = new WeakMap(), g = new WeakMap(), b = new WeakMap(), f = new WeakMap(), C = new WeakMap(), A = new WeakMap(), S = new WeakMap(), R = new WeakMap(), o = new WeakSet(), G = function() {
+  if (e(this, A)) return;
+  const t = document.createElementNS(k, "svg");
+  t.setAttribute("width", "0"), t.setAttribute("height", "0"), t.style.cssText = "position:absolute;overflow:hidden";
+  const r = document.createElementNS(k, "defs"), l = document.createElementNS(k, "filter");
+  l.id = e(this, C), l.setAttribute("filterUnits", "userSpaceOnUse"), l.setAttribute("x", "0"), l.setAttribute("y", "0"), l.setAttribute("width", "1"), l.setAttribute("height", "1"), l.setAttribute("color-interpolation-filters", "sRGB");
+  const q = document.createElementNS(k, "feOffset");
+  q.setAttribute("in", "SourceGraphic"), q.setAttribute("dy", "0"), q.setAttribute("result", "s");
+  const M = document.createElementNS(k, "feColorMatrix");
+  M.setAttribute("in", "s"), M.setAttribute("type", "matrix"), M.setAttribute("values", "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0"), M.setAttribute("result", "a");
+  const N = document.createElementNS(k, "feComposite");
+  N.setAttribute("in", "SourceGraphic"), N.setAttribute("in2", "a"), N.setAttribute("operator", "in"), l.append(q, M, N), r.appendChild(l), t.appendChild(r), document.body.appendChild(t), a(this, A, t), a(this, S, l), a(this, R, q);
+}, J = function() {
+  var t;
+  (t = e(this, A)) == null || t.remove(), a(this, A, null), a(this, S, null), a(this, R, null);
+}, P = 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() {
+  const l = Math.floor(r / 2);
+  e(this, p).width = t, e(this, p).height = r, e(this, H).style.aspectRatio = `${t} / ${l}`, d(this, o, G).call(this), e(this, S).setAttribute("width", String(t)), e(this, S).setAttribute("height", String(r)), e(this, R).setAttribute("dy", String(-l));
+}, W = function(t, r) {
+  it.has(t) ? e(this, i)[t] = r !== null : r === null ? e(this, i).removeAttribute(t) : e(this, i).setAttribute(t, r);
+}, B = 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)) {
+}, K = function() {
+  if (e(this, g))
+    if (d(this, o, $).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)));
+        e(this, g) && (d(this, o, z).call(this), a(this, f, e(this, i).requestVideoFrameCallback(t)));
       };
-      a(this, b, e(this, i).requestVideoFrameCallback(t));
+      a(this, f, e(this, i).requestVideoFrameCallback(t));
     } else {
       const t = () => {
-        e(this, p) && (u(this, n, _).call(this), a(this, f, requestAnimationFrame(t)));
+        e(this, g) && (d(this, o, z).call(this), a(this, b, requestAnimationFrame(t)));
       };
-      a(this, f, requestAnimationFrame(t));
+      a(this, b, requestAnimationFrame(t));
     }
-}, L = function() {
+}, $ = 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() {
+  e(this, f) && ((r = (t = e(this, i)).cancelVideoFrameCallback) == null || r.call(t, e(this, f)), a(this, f, 0)), e(this, b) && (cancelAnimationFrame(e(this, b)), a(this, b, 0));
+}, z = 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]);
+  !t || !r || ((e(this, p).width !== t || e(this, p).height !== r) && d(this, o, P).call(this), e(this, T).filter = `url(#${e(this, C)})`, e(this, T).drawImage(e(this, i), 0, 0));
+}, I(rt, "observedAttributes", [...Y]);
 export {
-  X as A,
-  J as a
+  rt as A,
+  et as a
 };

package/dist/canvas-component-CE05m0PN.cjs

@@ -0,0 +1,24 @@
+"use strict";var Z=Object.defineProperty;var U=h=>{throw TypeError(h)};var tt=(h,n,t)=>n in h?Z(h,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):h[n]=t;var $=(h,n,t)=>tt(h,typeof n!="symbol"?n+"":n,t),I=(h,n,t)=>n.has(h)||U("Cannot "+t);var e=(h,n,t)=>(I(h,n,"read from private field"),t?t.call(h):n.get(h)),u=(h,n,t)=>n.has(h)?U("Cannot add the same private member more than once"):n instanceof WeakSet?n.add(h):n.set(h,t),a=(h,n,t,r)=>(I(h,n,"write to private field"),r?r.call(h,t):n.set(h,t),t),d=(h,n,t)=>(I(h,n,"access private method"),t);const j=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height"],et=new Set(["autoplay","loop","muted","playsinline"]),it=["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,L,w,E,H,y,O,c,F,_,G;class Y extends HTMLElement{constructor(){super();u(this,c);u(this,s);u(this,L);u(this,w);u(this,E);u(this,H);u(this,y,null);u(this,O);const t=this.attachShadow({mode:"open"});a(this,O,`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,O)}" 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,O)})">
+<video></video>
+</foreignObject>
+</svg>`,a(this,L,t.querySelector("svg")),a(this,w,t.querySelector("foreignObject")),a(this,E,t.querySelector("filter")),a(this,H,t.querySelector("feOffset")),a(this,s,t.querySelector("video"));for(const r of it)e(this,s).addEventListener(r,l=>{this.dispatchEvent(new Event(l.type,{bubbles:!1,cancelable:!1}))});e(this,s).addEventListener("loadedmetadata",()=>d(this,c,F).call(this)),e(this,s).addEventListener("resize",()=>d(this,c,F).call(this))}connectedCallback(){for(const t of j)this.hasAttribute(t)&&d(this,c,_).call(this,t,this.getAttribute(t));d(this,c,G).call(this),a(this,y,new MutationObserver(()=>d(this,c,G).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,l){d(this,c,_).call(this,t,l)}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,L=new WeakMap,w=new WeakMap,E=new WeakMap,H=new WeakMap,y=new WeakMap,O=new WeakMap,c=new WeakSet,F=function(){const t=e(this,s).videoWidth,r=e(this,s).videoHeight;if(!t||!r)return;const l=Math.floor(r/2);e(this,L).setAttribute("viewBox",`0 0 ${t} ${l}`),e(this,w).setAttribute("width",String(t)),e(this,w).setAttribute("height",String(r)),e(this,E).setAttribute("width",String(t)),e(this,E).setAttribute("height",String(r)),e(this,H).setAttribute("dy",String(-l))},_=function(t,r){et.has(t)?e(this,s)[t]=r!==null:r===null?e(this,s).removeAttribute(t):e(this,s).setAttribute(t,r)},G=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()},$(Y,"observedAttributes",[...j]);const k="http://www.w3.org/2000/svg",K=["src","crossorigin","preload","autoplay","loop","muted","playsinline","poster","width","height"],st=new Set(["autoplay","loop","muted","playsinline"]),rt=["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,p,T,x,m,v,g,b,f,C,A,S,R,o,D,Q,V,W,B,X,P,z;class J extends HTMLElement{constructor(){super();u(this,o);u(this,i);u(this,p);u(this,T);u(this,x);u(this,m,null);u(this,v,null);u(this,g,!1);u(this,b,0);u(this,f,0);u(this,C);u(this,A,null);u(this,S,null);u(this,R,null);const t=this.attachShadow({mode:"open"});a(this,C,`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}
+.clip{overflow:hidden;width:100%}
+canvas{display:block;width:100%}
+</style>
+<video></video>
+<div class="clip"><canvas></canvas></div>`,a(this,i,t.querySelector("video")),a(this,x,t.querySelector(".clip")),a(this,p,t.querySelector("canvas")),a(this,T,e(this,p).getContext("2d"));for(const r of rt)e(this,i).addEventListener(r,l=>{this.dispatchEvent(new Event(l.type,{bubbles:!1,cancelable:!1}))});e(this,i).addEventListener("loadedmetadata",()=>d(this,o,V).call(this)),e(this,i).addEventListener("resize",()=>d(this,o,V).call(this))}connectedCallback(){for(const t of K)this.hasAttribute(t)&&d(this,o,W).call(this,t,this.getAttribute(t));d(this,o,B).call(this),a(this,v,new MutationObserver(()=>d(this,o,B).call(this))),e(this,v).observe(this,{childList:!0}),d(this,o,D).call(this),a(this,m,new IntersectionObserver(([t])=>{a(this,g,t.isIntersecting),e(this,g)?d(this,o,X).call(this):d(this,o,P).call(this)},{threshold:0})),e(this,m).observe(this)}disconnectedCallback(){var t,r;d(this,o,P).call(this),(t=e(this,m))==null||t.disconnect(),a(this,m,null),(r=e(this,v))==null||r.disconnect(),a(this,v,null),d(this,o,Q).call(this)}attributeChangedCallback(t,r,l){d(this,o,W).call(this,t,l)}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,p=new WeakMap,T=new WeakMap,x=new WeakMap,m=new WeakMap,v=new WeakMap,g=new WeakMap,b=new WeakMap,f=new WeakMap,C=new WeakMap,A=new WeakMap,S=new WeakMap,R=new WeakMap,o=new WeakSet,D=function(){if(e(this,A))return;const t=document.createElementNS(k,"svg");t.setAttribute("width","0"),t.setAttribute("height","0"),t.style.cssText="position:absolute;overflow:hidden";const r=document.createElementNS(k,"defs"),l=document.createElementNS(k,"filter");l.id=e(this,C),l.setAttribute("filterUnits","userSpaceOnUse"),l.setAttribute("x","0"),l.setAttribute("y","0"),l.setAttribute("width","1"),l.setAttribute("height","1"),l.setAttribute("color-interpolation-filters","sRGB");const q=document.createElementNS(k,"feOffset");q.setAttribute("in","SourceGraphic"),q.setAttribute("dy","0"),q.setAttribute("result","s");const M=document.createElementNS(k,"feColorMatrix");M.setAttribute("in","s"),M.setAttribute("type","matrix"),M.setAttribute("values","0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0"),M.setAttribute("result","a");const N=document.createElementNS(k,"feComposite");N.setAttribute("in","SourceGraphic"),N.setAttribute("in2","a"),N.setAttribute("operator","in"),l.append(q,M,N),r.appendChild(l),t.appendChild(r),document.body.appendChild(t),a(this,A,t),a(this,S,l),a(this,R,q)},Q=function(){var t;(t=e(this,A))==null||t.remove(),a(this,A,null),a(this,S,null),a(this,R,null)},V=function(){const t=e(this,i).videoWidth,r=e(this,i).videoHeight;if(!t||!r)return;const l=Math.floor(r/2);e(this,p).width=t,e(this,p).height=r,e(this,x).style.aspectRatio=`${t} / ${l}`,d(this,o,D).call(this),e(this,S).setAttribute("width",String(t)),e(this,S).setAttribute("height",String(r)),e(this,R).setAttribute("dy",String(-l))},W=function(t,r){st.has(t)?e(this,i)[t]=r!==null:r===null?e(this,i).removeAttribute(t):e(this,i).setAttribute(t,r)},B=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,g))if(d(this,o,P).call(this),"requestVideoFrameCallback"in e(this,i)){const t=()=>{e(this,g)&&(d(this,o,z).call(this),a(this,f,e(this,i).requestVideoFrameCallback(t)))};a(this,f,e(this,i).requestVideoFrameCallback(t))}else{const t=()=>{e(this,g)&&(d(this,o,z).call(this),a(this,b,requestAnimationFrame(t)))};a(this,b,requestAnimationFrame(t))}},P=function(){var t,r;e(this,f)&&((r=(t=e(this,i)).cancelVideoFrameCallback)==null||r.call(t,e(this,f)),a(this,f,0)),e(this,b)&&(cancelAnimationFrame(e(this,b)),a(this,b,0))},z=function(){if(e(this,i).readyState<2)return;const t=e(this,i).videoWidth,r=e(this,i).videoHeight;!t||!r||((e(this,p).width!==t||e(this,p).height!==r)&&d(this,o,V).call(this),e(this,T).filter=`url(#${e(this,C)})`,e(this,T).drawImage(e(this,i),0,0))},$(J,"observedAttributes",[...K]);exports.AlphaVideoKitCanvas=J;exports.AlphaVideoKitSVG=Y;

package/dist/index.cjs

@@ -1,30 +1 @@
-"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}">
-              <defs>
-                <filter id="r2a" color-interpolation-filters="sRGB">
-                  <feColorMatrix type="matrix"
-                    values="0 0 0 0 1
-                            0 0 0 0 1
-                            0 0 0 0 1
-                            1 0 0 0 0"/>
-                </filter>
-                <mask id="alphaMask">
-                  <svg viewBox="0 ${t} ${e} ${t}"
-                       width="${e}" height="${t}"
-                       preserveAspectRatio="none">
-                    <image href="${o}"
-                           width="${e}" height="${n}"
-                           filter="url(#r2a)"/>
-                  </svg>
-                </mask>
-              </defs>
-              <svg viewBox="0 0 ${e} ${t}"
-                   width="${e}" height="${t}"
-                   preserveAspectRatio="none"
-                   mask="url(#alphaMask)">
-                <image href="${o}"
-                       width="${e}" height="${n}"/>
-              </svg>
-            </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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("./canvas-component-CE05m0PN.cjs"),s="http://www.w3.org/2000/svg";function b(d){const{canvas:o}=d,f=o.getContext("2d"),p=`avk-f-${Math.random().toString(36).slice(2,8)}`;let i=null,u=null,h=null,a=!1;function m(){if(i)return;const e=document.createElementNS(s,"svg");e.setAttribute("width","0"),e.setAttribute("height","0"),e.style.cssText="position:absolute;overflow:hidden";const n=document.createElementNS(s,"defs"),t=document.createElementNS(s,"filter");t.id=p,t.setAttribute("filterUnits","userSpaceOnUse"),t.setAttribute("x","0"),t.setAttribute("y","0"),t.setAttribute("width","1"),t.setAttribute("height","1"),t.setAttribute("color-interpolation-filters","sRGB");const r=document.createElementNS(s,"feOffset");r.setAttribute("in","SourceGraphic"),r.setAttribute("dy","0"),r.setAttribute("result","s");const l=document.createElementNS(s,"feColorMatrix");l.setAttribute("in","s"),l.setAttribute("type","matrix"),l.setAttribute("values","0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0"),l.setAttribute("result","a");const c=document.createElementNS(s,"feComposite");c.setAttribute("in","SourceGraphic"),c.setAttribute("in2","a"),c.setAttribute("operator","in"),t.append(r,l,c),n.appendChild(t),e.appendChild(n),document.body.appendChild(e),i=e,u=t,h=r}return{drawFrame(e){if(a)return;const n=e.videoWidth,t=e.videoHeight,r=Math.floor(t/2);(o.width!==n||o.height!==r)&&(o.width=n,o.height=r),m(),u.setAttribute("width",String(n)),u.setAttribute("height",String(t)),h.setAttribute("dy",String(-r)),f.filter=`url(#${p})`,f.drawImage(e,0,0)},setPremultipliedAlpha(e){},destroy(){a||(a=!0,i==null||i.remove(),i=null,u=null,h=null)},get isDestroyed(){return a}}}function g(d){return b(d)}exports.AlphaVideoKitCanvas=A.AlphaVideoKitCanvas;exports.AlphaVideoKitSVG=A.AlphaVideoKitSVG;exports.createRenderer=g;exports.createSvgFilterRenderer=b;

package/dist/index.d.ts

@@ -1,20 +1,14 @@
 /**
- * `<alpha-video-kit-canvas>` — Canvas 2D wrapped in an SVG with an inline filter.
+ * `<alpha-video-kit-canvas>` — Canvas 2D with SVG filter via ctx.filter.
  *
- * 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.
+ * A hidden <video> feeds frames to <canvas> via drawImage.
+ * The SVG filter (injected into document.body) composites stacked-alpha halves.
+ * ctx.filter = 'url(#id)' applies the filter during drawImage.
+ * A wrapper div clips the canvas to the top (color) half.
  */
 export declare class AlphaVideoKitCanvas extends HTMLElement {
     #private;
-    static observedAttributes: ("src" | "crossorigin" | "preload" | "autoplay" | "loop" | "muted" | "playsinline" | "poster" | "width" | "height")[];
+    static observedAttributes: ("width" | "height" | "src" | "crossorigin" | "preload" | "autoplay" | "loop" | "muted" | "playsinline" | "poster")[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -72,7 +66,7 @@ export declare class AlphaVideoKitCanvas extends HTMLElement {
  */
 export declare class AlphaVideoKitSVG extends HTMLElement {
     #private;
-    static observedAttributes: ("src" | "crossorigin" | "preload" | "autoplay" | "loop" | "muted" | "playsinline" | "poster" | "width" | "height")[];
+    static observedAttributes: ("width" | "height" | "src" | "crossorigin" | "preload" | "autoplay" | "loop" | "muted" | "playsinline" | "poster")[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -116,20 +110,17 @@ export declare class AlphaVideoKitSVG extends HTMLElement {
     canPlayType(type: string): CanPlayTypeResult;
 }
 
-/**
- * Canvas 2D renderer with pixel manipulation.
- * Draws the video to an offscreen canvas, reads pixels from top and bottom halves,
- * applies alpha from the bottom half to the top half's color data.
- * No SVG filters used — pure Canvas 2D fallback for maximum compatibility.
- */
-export declare function createCanvasFilterRenderer(options: StackedAlphaRendererOptions): StackedAlphaRenderer;
-
-export declare function createRenderer(options: SvgRendererOptions): StackedAlphaRenderer;
+export declare function createRenderer(options: StackedAlphaRendererOptions): StackedAlphaRenderer;
 
 /**
- * Pure SVG filter renderer.
- * Renders each frame by drawing the video to a temporary canvas to get a data URL,
- * then uses an SVG with filter-based alpha extraction and masking.
+ * SVG filter renderer using ctx.filter on Canvas 2D.
+ *
+ * Injects an SVG <filter> into document.body, then on each frame:
+ *   ctx.filter = 'url(#id)';
+ *   ctx.drawImage(video, 0, 0);
+ *
+ * The filter shifts the bottom (alpha) half up, extracts R→alpha,
+ * and composites it over the top (color) half.
  */
 export declare function createSvgFilterRenderer(options: StackedAlphaRendererOptions): StackedAlphaRenderer;
 
@@ -145,10 +136,4 @@ export declare interface StackedAlphaRendererOptions {
     premultipliedAlpha?: boolean;
 }
 
-export declare type SvgRendererMode = 'svg-filter' | 'canvas';
-
-export declare interface SvgRendererOptions extends StackedAlphaRendererOptions {
-    mode?: SvgRendererMode;
-}
-
 export { }

package/dist/index.js

@@ -1,102 +1,43 @@
-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;
-  function g(s, 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}">
-              <defs>
-                <filter id="r2a" color-interpolation-filters="sRGB">
-                  <feColorMatrix type="matrix"
-                    values="0 0 0 0 1
-                            0 0 0 0 1
-                            0 0 0 0 1
-                            1 0 0 0 0"/>
-                </filter>
-                <mask id="alphaMask">
-                  <svg viewBox="0 ${t} ${e} ${t}"
-                       width="${e}" height="${t}"
-                       preserveAspectRatio="none">
-                    <image href="${s}"
-                           width="${e}" height="${n}"
-                           filter="url(#r2a)"/>
-                  </svg>
-                </mask>
-              </defs>
-              <svg viewBox="0 0 ${e} ${t}"
-                   width="${e}" height="${t}"
-                   preserveAspectRatio="none"
-                   mask="url(#alphaMask)">
-                <image href="${s}"
-                       width="${e}" height="${n}"/>
-              </svg>
-            </svg>`;
+import { A as w, a as v } from "./canvas-component-C3vC6FBw.js";
+const s = "http://www.w3.org/2000/svg";
+function b(d) {
+  const { canvas: o } = d, h = o.getContext("2d"), A = `avk-f-${Math.random().toString(36).slice(2, 8)}`;
+  let i = null, l = null, f = null, a = !1;
+  function p() {
+    if (i) return;
+    const e = document.createElementNS(s, "svg");
+    e.setAttribute("width", "0"), e.setAttribute("height", "0"), e.style.cssText = "position:absolute;overflow:hidden";
+    const n = document.createElementNS(s, "defs"), t = document.createElementNS(s, "filter");
+    t.id = A, t.setAttribute("filterUnits", "userSpaceOnUse"), t.setAttribute("x", "0"), t.setAttribute("y", "0"), t.setAttribute("width", "1"), t.setAttribute("height", "1"), t.setAttribute("color-interpolation-filters", "sRGB");
+    const r = document.createElementNS(s, "feOffset");
+    r.setAttribute("in", "SourceGraphic"), r.setAttribute("dy", "0"), r.setAttribute("result", "s");
+    const u = document.createElementNS(s, "feColorMatrix");
+    u.setAttribute("in", "s"), u.setAttribute("type", "matrix"), u.setAttribute("values", "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0"), u.setAttribute("result", "a");
+    const c = document.createElementNS(s, "feComposite");
+    c.setAttribute("in", "SourceGraphic"), c.setAttribute("in2", "a"), c.setAttribute("operator", "in"), t.append(r, u, c), n.appendChild(t), e.appendChild(n), document.body.appendChild(e), i = e, l = t, f = r;
   }
-  return {
-    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;
-        }
-        c.clearRect(0, 0, e, n), c.drawImage(f, 0, 0), URL.revokeObjectURL(a);
-      }, f.src = a;
-    },
-    setPremultipliedAlpha(s) {
-    },
-    destroy() {
-      i || (i = !0);
-    },
-    get isDestroyed() {
-      return i;
-    }
-  };
-}
-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(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 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;
-        }
-      }
-      l.putImageData(m, 0, 0);
+      if (a) return;
+      const n = e.videoWidth, t = e.videoHeight, r = Math.floor(t / 2);
+      (o.width !== n || o.height !== r) && (o.width = n, o.height = r), p(), l.setAttribute("width", String(n)), l.setAttribute("height", String(t)), f.setAttribute("dy", String(-r)), h.filter = `url(#${A})`, h.drawImage(e, 0, 0);
     },
     setPremultipliedAlpha(e) {
-      s = e;
     },
     destroy() {
-      g || (g = !0);
+      a || (a = !0, i == null || i.remove(), i = null, l = null, f = null);
     },
     get isDestroyed() {
-      return g;
+      return a;
     }
   };
 }
-function R(u) {
-  const { mode: r = "canvas", ...c } = u;
-  return r === "svg-filter" ? x(c) : $(c);
+function m(d) {
+  return b(d);
 }
 export {
-  k as AlphaVideoKitCanvas,
-  b as AlphaVideoKitSVG,
-  $ as createCanvasFilterRenderer,
-  R as createRenderer,
-  x as createSvgFilterRenderer
+  w as AlphaVideoKitCanvas,
+  v as AlphaVideoKitSVG,
+  m as createRenderer,
+  b as createSvgFilterRenderer
 };

package/dist/register.cjs

@@ -1 +1 @@
-"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);
+"use strict";const e=require("./canvas-component-CE05m0PN.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-ChQNZXEV.js";
+import { a as e, A as a } from "./canvas-component-C3vC6FBw.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.4",
+  "version": "0.3.0",
   "description": "SVG filter-based renderer for stacked alpha videos",
   "type": "module",
   "files": ["dist", "react.d.ts"],

package/react.d.ts

@@ -1,32 +1,13 @@
+import type React from 'react';
 import type { AlphaVideoKitSVG } from './dist/index.js';
 import type { AlphaVideoKitCanvas } from './dist/index.js';
 
-interface AlphaVideoKitSVGAttributes extends React.HTMLAttributes<AlphaVideoKitSVG> {
+interface AlphaVideoKitSVGAttributes extends React.VideoHTMLAttributes<AlphaVideoKitSVG> {
   ref?: React.Ref<AlphaVideoKitSVG>;
-  src?: string;
-  crossOrigin?: string;
-  preload?: string;
-  autoPlay?: boolean;
-  loop?: boolean;
-  muted?: boolean;
-  playsInline?: boolean;
-  poster?: string;
-  width?: number | string;
-  height?: number | string;
 }
 
-interface AlphaVideoKitCanvasAttributes extends React.HTMLAttributes<AlphaVideoKitCanvas> {
+interface AlphaVideoKitCanvasAttributes extends React.VideoHTMLAttributes<AlphaVideoKitCanvas> {
   ref?: React.Ref<AlphaVideoKitCanvas>;
-  src?: string;
-  crossOrigin?: string;
-  preload?: string;
-  autoPlay?: boolean;
-  loop?: boolean;
-  muted?: boolean;
-  playsInline?: boolean;
-  poster?: string;
-  width?: number | string;
-  height?: number | string;
 }
 
 declare module 'react' {

package/dist/canvas-component-B4CLR7ME.cjs

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