vue-audio-ui 0.1.5 → 0.1.6

package/dist/vue-audio-ui.js

@@ -1,4 +1,4 @@
-import { ref as g, defineComponent as T, watch as N, computed as b, onMounted as Ct, onUnmounted as At, createElementBlock as x, openBlock as k, createStaticVNode as ct, createElementVNode as c, normalizeStyle as Z, resolveComponent as et, createVNode as X, renderSlot as xt, reactive as Bt, useTemplateRef as kt, normalizeClass as ut, toDisplayString as R, createCommentVNode as Dt, withDirectives as Ht, vModelText as Ft, nextTick as Yt, Fragment as lt, renderList as dt, onBeforeUnmount as _t } from "vue";
+import { ref as g, defineComponent as T, watch as B, computed as C, onMounted as bt, onUnmounted as At, createElementBlock as x, openBlock as k, createStaticVNode as ct, createElementVNode as c, normalizeStyle as Z, resolveComponent as et, createVNode as X, renderSlot as xt, reactive as Nt, useTemplateRef as kt, normalizeClass as ut, toDisplayString as R, createCommentVNode as Dt, withDirectives as Ht, vModelText as Ft, nextTick as Yt, Fragment as lt, renderList as dt, onBeforeUnmount as _t } from "vue";
 const V = {
   colors: {
     primary: "#70bfff",
@@ -26,28 +26,28 @@ function pt(t, e) {
   function r(s, f) {
     s && o(s);
   }
-  function d() {
+  function h() {
     return a?.getFloatTimeDomainData(i), i;
   }
   function y() {
     return a?.getFloatFrequencyData(i), i;
   }
-  function C(s) {
+  function w(s) {
     let f = 0, m;
     for (let p = 0; p < s.length; p++)
       m = Math.abs(s[p]), m > f && (f = m);
     return 20 * Math.log10(f);
   }
-  function h(s) {
+  function l(s) {
     let f = 0, m;
     for (let p = 0; p < s.length; p++)
       m = Math.abs(s[p]), f += m * m;
     return 20 * Math.log10(Math.sqrt(f / s.length));
   }
   return {
-    getPeakDb: C,
-    getRmsDb: h,
-    getFloatTimeDomainData: d,
+    getPeakDb: w,
+    getRmsDb: l,
+    getFloatTimeDomainData: h,
     getFloatFrequencyData: y,
     onInputChanged: r,
     disposeMetering: n
@@ -76,7 +76,8 @@ const Kt = T({
   props: {
     input: {
       required: !1,
-      type: AudioNode,
+      type: Object,
+      // type: AudioNode
       default: void 0
     },
     type: {
@@ -97,24 +98,26 @@ const Kt = T({
   },
   setup(t) {
     const { getPeakDb: e, getRmsDb: a, getFloatTimeDomainData: i, onInputChanged: o } = pt(t.fftSize, t.input);
-    N(() => t.input, o);
-    const { startRendering: n, stopRendering: r } = ft(), d = g(-1), y = g("black"), C = b(() => isNaN(d.value) ? "rotate(0 160 150)" : `rotate(${50 * d.value} 160 150)`);
-    return Ct(() => {
+    B(() => t.input, (l, s) => {
+      o(l, s);
+    });
+    const { startRendering: n, stopRendering: r } = ft(), h = g(-1), y = g("black"), w = C(() => isNaN(h.value) ? "rotate(0 160 150)" : `rotate(${50 * h.value} 160 150)`);
+    return bt(() => {
       n(() => {
-        const h = i();
+        const l = i();
         let s = 0;
-        t.type === "peak" && h ? s = e(h) : t.type === "rms" && h && (s = a(h));
+        t.type === "peak" && l ? s = e(l) : t.type === "rms" && l && (s = a(l));
         const f = 80;
         s = s < -f ? -f : s;
         const m = (f + s) / f;
-        d.value = m * 2 - 1;
+        h.value = m * 2 - 1;
       });
     }), At(() => {
       r();
     }), {
       color: y,
-      rotation: C,
-      value: d
+      rotation: w,
+      value: h
     };
   }
 }), D = (t, e) => {
@@ -130,7 +133,7 @@ function Jt(t, e, a, i, o, n) {
       viewBox: "0 0 320 220",
       xmlns: "http://www.w3.org/2000/svg"
     }, [
-      e[1] || (e[1] = ct('<defs data-v-048f897f><linearGradient id="frameGrad" x1="0" y1="0" x2="0" y2="1" data-v-048f897f><stop offset="0%" stop-color="#f0f0f0" data-v-048f897f></stop><stop offset="50%" stop-color="#b5b5b5" data-v-048f897f></stop><stop offset="100%" stop-color="#8a8a8a" data-v-048f897f></stop></linearGradient><linearGradient id="faceGrad" x1="0" y1="0" x2="0" y2="1" data-v-048f897f><stop offset="0%" stop-color="#fffdf7" data-v-048f897f></stop><stop offset="100%" stop-color="#e9e2d3" data-v-048f897f></stop></linearGradient><radialGradient id="glassGrad" cx="50%" cy="0%" r="80%" data-v-048f897f><stop offset="0%" stop-color="white" stop-opacity="0.7" data-v-048f897f></stop><stop offset="60%" stop-color="white" stop-opacity="0.15" data-v-048f897f></stop><stop offset="100%" stop-color="white" stop-opacity="0" data-v-048f897f></stop></radialGradient><filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" data-v-048f897f><feDropShadow dx="0" dy="3" stdDeviation="4" flood-opacity="0.4" data-v-048f897f></feDropShadow></filter><filter id="needleShadow" data-v-048f897f><feDropShadow dx="1" dy="1" stdDeviation="1" flood-opacity="0.5" data-v-048f897f></feDropShadow></filter></defs><rect x="10" y="10" rx="18" ry="18" width="300" height="200" fill="url(#frameGrad)" filter="url(#shadow)" data-v-048f897f></rect><rect x="24" y="24" rx="12" ry="12" width="272" height="172" fill="url(#faceGrad)" stroke="#777" stroke-width="1" data-v-048f897f></rect><path d="M 60 90 A 130 70 0 0 1 260 90" fill="none" stroke="#222" stroke-width="2" data-v-048f897f></path><g stroke="#222" stroke-width="2" data-v-048f897f><line x1="100" y1="120" x2="105" y2="130" data-v-048f897f></line><line x1="160" y1="110" x2="160" y2="122" data-v-048f897f></line><line x1="220" y1="120" x2="215" y2="130" data-v-048f897f></line></g>', 5)),
+      e[1] || (e[1] = ct('<defs data-v-984809e7><linearGradient id="frameGrad" x1="0" y1="0" x2="0" y2="1" data-v-984809e7><stop offset="0%" stop-color="#f0f0f0" data-v-984809e7></stop><stop offset="50%" stop-color="#b5b5b5" data-v-984809e7></stop><stop offset="100%" stop-color="#8a8a8a" data-v-984809e7></stop></linearGradient><linearGradient id="faceGrad" x1="0" y1="0" x2="0" y2="1" data-v-984809e7><stop offset="0%" stop-color="#fffdf7" data-v-984809e7></stop><stop offset="100%" stop-color="#e9e2d3" data-v-984809e7></stop></linearGradient><radialGradient id="glassGrad" cx="50%" cy="0%" r="80%" data-v-984809e7><stop offset="0%" stop-color="white" stop-opacity="0.7" data-v-984809e7></stop><stop offset="60%" stop-color="white" stop-opacity="0.15" data-v-984809e7></stop><stop offset="100%" stop-color="white" stop-opacity="0" data-v-984809e7></stop></radialGradient><filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" data-v-984809e7><feDropShadow dx="0" dy="3" stdDeviation="4" flood-opacity="0.4" data-v-984809e7></feDropShadow></filter><filter id="needleShadow" data-v-984809e7><feDropShadow dx="1" dy="1" stdDeviation="1" flood-opacity="0.5" data-v-984809e7></feDropShadow></filter></defs><rect x="10" y="10" rx="18" ry="18" width="300" height="200" fill="url(#frameGrad)" filter="url(#shadow)" data-v-984809e7></rect><rect x="24" y="24" rx="12" ry="12" width="272" height="172" fill="url(#faceGrad)" stroke="#777" stroke-width="1" data-v-984809e7></rect><path d="M 60 90 A 130 70 0 0 1 260 90" fill="none" stroke="#222" stroke-width="2" data-v-984809e7></path><g stroke="#222" stroke-width="2" data-v-984809e7><line x1="100" y1="120" x2="105" y2="130" data-v-984809e7></line><line x1="160" y1="110" x2="160" y2="122" data-v-984809e7></line><line x1="220" y1="120" x2="215" y2="130" data-v-984809e7></line></g>', 5)),
       c("g", {
         id: "needle",
         transform: t.rotation
@@ -173,7 +176,7 @@ function Jt(t, e, a, i, o, n) {
     ], 8, Zt))
   ]);
 }
-const Qt = /* @__PURE__ */ D(Kt, [["render", Jt], ["__scopeId", "data-v-048f897f"]]);
+const Qt = /* @__PURE__ */ D(Kt, [["render", Jt], ["__scopeId", "data-v-984809e7"]]);
 function H(t, e, a) {
   return t < e ? e : t > a ? a : t;
 }
@@ -388,15 +391,15 @@ const re = 3, oe = 300, ne = 16, se = T({
       const t = this.zoomWindowLength / this.graphWidth, e = Math.max(Math.round(t), 1);
       this.drawBackground();
       let a = 0, i = 0, o = 0, n = 0, r = 0;
-      for (let d = 0; d < this.graphWidth; d++)
-        a = d, n = this.getMinSampleValue(
+      for (let h = 0; h < this.graphWidth; h++)
+        a = h, n = this.getMinSampleValue(
           this.amplitudeData,
-          this.zoomWindowStartIndex + d * e,
-          this.zoomWindowStartIndex + (d + 1) * e
+          this.zoomWindowStartIndex + h * e,
+          this.zoomWindowStartIndex + (h + 1) * e
         ), r = this.getMaxSampleValue(
           this.amplitudeData,
-          this.zoomWindowStartIndex + d * e,
-          this.zoomWindowStartIndex + (d + 1) * e
+          this.zoomWindowStartIndex + h * e,
+          this.zoomWindowStartIndex + (h + 1) * e
         ), i = this.graphHeight - (this.graphHeight / 2 + n * this.graphHeight / 2), o = this.graphHeight - (this.graphHeight / 2 + r * this.graphHeight / 2), this.canvasContext.fillStyle = this.canvasLineColor, this.canvasContext?.fillRect(a, i, 1, te(o - i, 1));
       this.drawSelection(), this.drawMarker();
     },
@@ -405,9 +408,9 @@ const re = 3, oe = 300, ne = 16, se = T({
       const e = this.zoomWindowLength / this.graphWidth, a = Math.max(Math.round(e), 1), i = this.graphWidth / this.zoomWindowLength;
       this.drawBackground();
       const o = new Path2D();
-      let n = 0, r = 0, d = 0;
+      let n = 0, r = 0, h = 0;
       for (let y = this.zoomWindowStartIndex; y < this.zoomWindowEndIndex; y += a)
-        d = this.amplitudeData[y], n = (y - this.zoomWindowStartIndex) * i, r = this.graphHeight - (this.graphHeight / 2 + d * this.graphHeight / 2), y === 0 ? o.moveTo(n, r) : o.lineTo(n, r), t && this.drawPoint(n, r);
+        h = this.amplitudeData[y], n = (y - this.zoomWindowStartIndex) * i, r = this.graphHeight - (this.graphHeight / 2 + h * this.graphHeight / 2), y === 0 ? o.moveTo(n, r) : o.lineTo(n, r), t && this.drawPoint(n, r);
       o.lineTo(this.graphWidth, r), this.canvasContext.strokeStyle = this.canvasLineColor, this.canvasContext?.stroke(o), this.drawSelection(), this.drawMarker();
     },
     drawAmplitudeAvg() {
@@ -452,8 +455,8 @@ const re = 3, oe = 300, ne = 16, se = T({
       if (Math.abs(i) >= Math.abs(o)) {
         if (this.prevX >= 0) {
           let n = -Math.round(i / this.graphWidth * this.zoomWindowLength);
-          const r = -this.zoomWindowStartIndex, d = this.amplitudeData.length - this.zoomWindowEndIndex;
-          n = H(n, r, d), this.shiftZoomWindow(n), this.markerIndex += n;
+          const r = -this.zoomWindowStartIndex, h = this.amplitudeData.length - this.zoomWindowEndIndex;
+          n = H(n, r, h), this.shiftZoomWindow(n), this.markerIndex += n;
         }
       } else
         this.prevY >= 0 && (this.zoom = H(this.zoom - o / oe * 1, 0, 1), this.setZoomWindow());
@@ -487,11 +490,13 @@ const he = /* @__PURE__ */ D(se, [["render", de], ["__scopeId", "data-v-f20165f6
   props: {
     leftInput: {
       required: !1,
-      type: AudioNode
+      type: Object
+      // type: AudioNode
     },
     rightInput: {
       required: !1,
-      type: AudioNode
+      type: Object
+      // type: AudioNode
     },
     type: {
       required: !1,
@@ -578,12 +583,13 @@ function pe(t, e, a, i, o, n) {
     ])
   ]);
 }
-const fe = /* @__PURE__ */ D(ce, [["render", pe], ["__scopeId", "data-v-688c5c09"]]), E = 90, me = new Tt(0, E, 2), ge = T({
+const fe = /* @__PURE__ */ D(ce, [["render", pe], ["__scopeId", "data-v-f5aea9e4"]]), E = 90, me = new Tt(0, E, 2), ge = T({
   name: "VADigitalMeter",
   props: {
     input: {
       required: !1,
-      type: AudioNode,
+      type: Object,
+      // type: AudioNode
       default: void 0
     },
     type: {
@@ -640,7 +646,9 @@ const fe = /* @__PURE__ */ D(ce, [["render", pe], ["__scopeId", "data-v-688c5c09
   },
   setup(t) {
     const e = pt(t.fftSize, t.input);
-    return N(() => t.input, e.onInputChanged), {
+    return B(() => t.input, (a, i) => {
+      e.onInputChanged(a, i);
+    }), {
       ...e,
       ...ft()
     };
@@ -700,12 +708,12 @@ const xe = /* @__PURE__ */ D(ge, [["render", ve]]), ke = {}, we = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "27"
 };
-function Ce(t, e) {
+function be(t, e) {
   return k(), x("svg", we, [...e[0] || (e[0] = [
     ct('<defs><filter id="filter4165" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><filter id="filter4165-1" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><filter id="filter4165-4" x="-.18715" y="-.046414" width="1.3743" height="1.0928" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="2.4419414"></feGaussianBlur></filter><linearGradient id="linearGradient7341" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(406.7,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7468" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(203.35,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7595" x1="678.43" x2="668.76" y1="597.36" y2="597.36" gradientTransform="translate(0,-14.18)" gradientUnits="userSpaceOnUse"><stop stop-color="#9a9a9a" offset="0"></stop><stop offset="1"></stop></linearGradient><linearGradient id="linearGradient7698" x1="87.866" x2="87.866" y1="516.83" y2="528.75" gradientTransform="matrix(1.0278,0,0,1,582.85,121.43)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#999" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7700" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0235,0,0,1,37.712,-1157.9)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7702" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .50643 51.792 414.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7704" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .42746 51.792 466.71)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7706" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .26952 51.792 554.43)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7708" x1="87.866" x2="87.866" y1="516.83" y2="521.42" gradientTransform="matrix(1.0364 0 0 .96441 581.97 -1263.8)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#333" offset="1"></stop></linearGradient><linearGradient id="linearGradient7710" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0364 0 0 .96441 29.714 -1226.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7712" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0274 0 0 .48841 35.581 -982.83)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7714" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0213 0 0 .41225 39.183 -932.97)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7716" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0122 0 0 .25993 44.587 -848)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient></defs><g transform="translate(-642.36 -637.36)"><rect x="642.36" y="637.36" width="62.143" height="129.29" rx="3" ry="3" fill="#4d4d4d"></rect><rect x="643.3" y="701.75" width="60.419" height="3.5355" fill="#e6e6e6"></rect><rect x="643.05" y="638.08" width="60.613" height="21.071" rx="2.1483" ry="2" fill="url(#linearGradient7698)"></rect><rect x="643.25" y="689.59" width="58.811" height="10.119" fill="#333"></rect><rect x="642.36" y="680.23" width="61.133" height="8.7929" fill="#333"></rect><rect x="642.36" y="661.81" width="61.133" height="4.5457" fill="#1a1a1a"></rect><rect x="642.36" y="667.58" width="61.133" height="11.364" fill="#1a1a1a"></rect><rect transform="scale(1,-1)" x="643.05" y="-661.09" width="60.012" height="2.2612" rx="1.0235" ry=".63958" fill="url(#linearGradient7700)"></rect><rect x="643.22" y="666.37" width="58.633" height="1.1452" rx="1" ry=".3239" fill="url(#linearGradient7702)"></rect><rect x="643.22" y="679.09" width="58.633" height=".9666" rx="1" ry=".2734" fill="url(#linearGradient7704)"></rect><rect x="643.22" y="688.34" width="58.633" height=".60946" rx="1" ry=".17238" fill="url(#linearGradient7706)"></rect><rect transform="scale(1,-1)" x="642.67" y="-765.57" width="61.118" height="20.321" rx="2.1662" ry="1.9288" fill="url(#linearGradient7708)"></rect><rect transform="scale(1,-1)" x="643.25" y="-717.26" width="58.811" height="9.7593" fill="#333"></rect><rect transform="scale(1,-1)" x="642.36" y="-726.3" width="61.133" height="8.4799" fill="#666"></rect><rect transform="scale(1,-1)" x="642.36" y="-744.06" width="61.133" height="4.3839" fill="#808080"></rect><rect transform="scale(1,-1)" x="642.36" y="-738.49" width="61.133" height="10.96" fill="#808080"></rect><rect transform="scale(1,-1)" x="642.67" y="-746.93" width="60.767" height="2.1808" rx="1.0364" ry=".61681" fill="url(#linearGradient7710)"></rect><rect transform="scale(1,-1)" x="643.22" y="-740.17" width="60.24" height="1.1044" rx="1.0274" ry=".31237" fill="url(#linearGradient7712)"></rect><rect transform="scale(1,-1)" x="643.22" y="-728.15" width="59.883" height=".9322" rx="1.0213" ry=".26366" fill="url(#linearGradient7714)"></rect><rect transform="scale(1,-1)" x="643.22" y="-718.85" width="59.347" height=".58776" rx="1.0122" ry=".16624" fill="url(#linearGradient7716)"></rect></g>', 2)
   ])]);
 }
-const be = /* @__PURE__ */ D(ke, [["render", Ce]]), Me = {}, Se = {
+const Ce = /* @__PURE__ */ D(ke, [["render", be]]), Me = {}, Se = {
   version: "1.1",
   viewBox: "0 0 104 460",
   xmlns: "http://www.w3.org/2000/svg"
@@ -718,7 +726,7 @@ function Ge(t, e) {
 const Ve = /* @__PURE__ */ D(Me, [["render", Ge]]), De = T({
   name: "VAFader",
   components: {
-    defaultFaderHead: be,
+    defaultFaderHead: Ce,
     defaultFaderBackground: Ve
   },
   emits: ["update:modelValue"],
@@ -849,7 +857,7 @@ const Ve = /* @__PURE__ */ D(Me, [["render", Ge]]), De = T({
   class: "fader-background"
 };
 function Ae(t, e, a, i, o, n) {
-  const r = et("defaultFaderBackground"), d = et("defaultFaderHead");
+  const r = et("defaultFaderBackground"), h = et("defaultFaderHead");
   return k(), x("div", {
     ref: "faderContainer",
     class: "fader-container",
@@ -868,7 +876,7 @@ function Ae(t, e, a, i, o, n) {
       onDblclick: e[2] || (e[2] = (...y) => t.onHeadDblClick && t.onHeadDblClick(...y))
     }, [
       xt(t.$slots, "faderHead", {}, () => [
-        X(d)
+        X(h)
       ], !0)
     ], 544)
   ], 4);
@@ -887,7 +895,7 @@ function Ie(t, e) {
                       c2.3-2.8,5.2-4.7,8.4-5.9c1-2.2,1.9-4.6,2.5-7.1C109.1,83.4,109.3,80.7,109.4,78.2z" data-v-3cef4f4a></path></g><ellipse class="st1" cx="70.4" cy="70.4" rx="26.7" ry="26.7" data-v-3cef4f4a></ellipse><g transform="translate(0 -8)" data-v-3cef4f4a><path class="st2" d="M71.5,28.5c-0.4,0-0.9,0-1.1,0c-0.3,0-0.9,0-1.1,0v31h2.5v-31H71.5z" data-v-3cef4f4a></path></g></g></g></g>`, 1)
   ])]);
 }
-const Ee = /* @__PURE__ */ D(Te, [["render", Ie], ["__scopeId", "data-v-3cef4f4a"]]), We = T({
+const Ee = /* @__PURE__ */ D(Te, [["render", Ie], ["__scopeId", "data-v-3cef4f4a"]]), Oe = T({
   components: {
     defaultKnob: Ee
   },
@@ -902,7 +910,7 @@ const Ee = /* @__PURE__ */ D(Te, [["render", Ie], ["__scopeId", "data-v-3cef4f4a
       valueCurve: new ht(t.minValue, t.maxValue)
       // audioParamValue: null as AudioParam | null
     };
-    return t.modelValue instanceof Number && (e.linearValue = t.modelValue, e.curvedValue = e.valueCurve.getCurvedValue(t.modelValue), e.unsteppedValue = e.curvedValue), Bt(e);
+    return t.modelValue instanceof Number && (e.linearValue = t.modelValue, e.curvedValue = e.valueCurve.getCurvedValue(t.modelValue), e.unsteppedValue = e.curvedValue), Nt(e);
   },
   props: {
     modelValue: {
@@ -984,15 +992,15 @@ const Ee = /* @__PURE__ */ D(Te, [["render", Ie], ["__scopeId", "data-v-3cef4f4a
       this.curvedValue = t, this.unsteppedValue = this.valueCurve.getLinearValue(this.curvedValue), this.linearValue = this.step === 0 ? this.unsteppedValue : this.roundToStep(this.unsteppedValue);
     }
   }
-}), Oe = { class: "control-container" }, qe = { class: "knob-row" };
+}), We = { class: "control-container" }, qe = { class: "knob-row" };
 function Le(t, e, a, i, o, n) {
   const r = et("default-knob");
-  return k(), x("div", Oe, [
+  return k(), x("div", We, [
     c("div", qe, [
       c("span", {
-        onMousedown: e[0] || (e[0] = (...d) => t.onKnobMouseDown && t.onKnobMouseDown(...d)),
-        onTouchstart: e[1] || (e[1] = (...d) => t.onKnobMouseDown && t.onKnobMouseDown(...d)),
-        onDblclick: e[2] || (e[2] = (...d) => t.onKnobDblClick && t.onKnobDblClick(...d)),
+        onMousedown: e[0] || (e[0] = (...h) => t.onKnobMouseDown && t.onKnobMouseDown(...h)),
+        onTouchstart: e[1] || (e[1] = (...h) => t.onKnobMouseDown && t.onKnobMouseDown(...h)),
+        onDblclick: e[2] || (e[2] = (...h) => t.onKnobDblClick && t.onKnobDblClick(...h)),
         class: "knob-container",
         style: Z(`transform: rotate(${t.knobRotation}rad); width: ${t.size}px; height: ${t.size}px;`)
       }, [
@@ -1003,7 +1011,7 @@ function Le(t, e, a, i, o, n) {
     ])
   ]);
 }
-const ze = /* @__PURE__ */ D(We, [["render", Le], ["__scopeId", "data-v-516025e9"]]), Q = 20, tt = -120, Re = 3, Ne = T({
+const ze = /* @__PURE__ */ D(Oe, [["render", Le], ["__scopeId", "data-v-516025e9"]]), Q = 20, tt = -120, Re = 3, Be = T({
   name: "VASpectrumAnalyzer",
   data() {
     return {
@@ -1015,7 +1023,8 @@ const ze = /* @__PURE__ */ D(We, [["render", Le], ["__scopeId", "data-v-516025e9
   props: {
     input: {
       required: !1,
-      type: AudioNode
+      type: Object
+      // type: AudioNode
     },
     fftSize: {
       type: Number,
@@ -1072,7 +1081,9 @@ const ze = /* @__PURE__ */ D(We, [["render", Le], ["__scopeId", "data-v-516025e9
   },
   setup(t) {
     const e = pt(t.fftSize, t.input);
-    return N(() => t.input, e.onInputChanged), {
+    return B(() => t.input, (a, i) => {
+      e.onInputChanged(a, i);
+    }), {
       ...e,
       ...ft()
     };
@@ -1113,8 +1124,8 @@ const ze = /* @__PURE__ */ D(We, [["render", Le], ["__scopeId", "data-v-516025e9
           this.canvasContext.beginPath(), this.canvasContext.lineWidth = 1, this.canvasContext.strokeStyle = this.lineColor ?? V.colors.primary, this.canvasContext.fillStyle = this.lineColor ?? V.colors.primary, this.canvasContext.moveTo(0, this.graphHeight);
           let i = 0, o = this.graphHeight - (a[0] - tt) / t * this.graphHeight;
           for (let n = 0; n < a.length; n++) {
-            const r = (a[n] - tt) / t * this.graphHeight, d = n * (e / a.length);
-            this.canvasContext.lineTo(i, o), d >= Q && (i = this.scaleX(d, Q, e, this.graphWidth), o = this.graphHeight - r, this.fillStyle === "lines" && this.canvasContext.fillRect(i, o, 1, r)), this.canvasContext.lineTo(i, o);
+            const r = (a[n] - tt) / t * this.graphHeight, h = n * (e / a.length);
+            this.canvasContext.lineTo(i, o), h >= Q && (i = this.scaleX(h, Q, e, this.graphWidth), o = this.graphHeight - r, this.fillStyle === "lines" && this.canvasContext.fillRect(i, o, 1, r)), this.canvasContext.lineTo(i, o);
           }
           this.canvasContext.lineTo(this.graphWidth, this.graphHeight), this.canvasContext.closePath(), this.canvasContext.stroke(), this.fillStyle === "solid" && this.canvasContext.fill();
         }
@@ -1145,7 +1156,7 @@ const ze = /* @__PURE__ */ D(We, [["render", Le], ["__scopeId", "data-v-516025e9
       }
     }
   }
-}), Be = ["width", "height"];
+}), Ne = ["width", "height"];
 function He(t, e, a, i, o, n) {
   return k(), x("canvas", {
     width: t.graphWidth,
@@ -1153,13 +1164,14 @@ function He(t, e, a, i, o, n) {
     ref: "analyserCanvas",
     class: "analyser-canvas",
     style: Z(t.cssVars)
-  }, null, 12, Be);
+  }, null, 12, Ne);
 }
-const Fe = /* @__PURE__ */ D(Ne, [["render", He], ["__scopeId", "data-v-670d0fd3"]]), Ye = ["height", "width"], _e = 3, Ke = /* @__PURE__ */ T({
+const Fe = /* @__PURE__ */ D(Be, [["render", He], ["__scopeId", "data-v-e2050d2b"]]), Ye = ["height", "width"], _e = 3, Ke = /* @__PURE__ */ T({
   __name: "v-a-oscilloscope",
   props: {
     input: {
-      type: AudioNode,
+      type: Object,
+      // type: AudioNode
       required: !1
     },
     width: {
@@ -1186,29 +1198,31 @@ const Fe = /* @__PURE__ */ D(Ne, [["render", He], ["__scopeId", "data-v-670d0fd3
   },
   setup(t) {
     const e = t, a = pt(e.fftSize, e.input), i = ft();
-    N(() => e.input, a.onInputChanged);
+    B(() => e.input, (w, l) => {
+      a.onInputChanged(w, l);
+    });
     const o = kt("analyserCanvas");
     let n;
-    Ct(() => {
+    bt(() => {
       n = o.value?.getContext("2d"), i.startRendering(y);
-    }), At(d);
-    const r = b(() => e.height ? e.height : e.width / _e);
-    function d() {
+    }), At(h);
+    const r = C(() => e.height ? e.height : e.width / _e);
+    function h() {
       a.disposeMetering(e.input);
     }
     function y() {
-      let C = a.getFloatTimeDomainData();
-      if (!n || (n.fillStyle = "black", n.fillRect(0, 0, e.width, r.value), !C)) return;
+      let w = a.getFloatTimeDomainData();
+      if (!n || (n.fillStyle = "black", n.fillRect(0, 0, e.width, r.value), !w)) return;
       n.lineWidth = 2.5, n.strokeStyle = e.lineColor ?? V.colors.primary, n.beginPath();
-      const h = e.width / C.length;
+      const l = e.width / w.length;
       let s = 0, f = 0;
-      for (let m = 0; m < C.length; m++) {
-        const p = -C[m] * r.value / 2;
-        f = r.value / 2 + p, m === 0 ? n.moveTo(s, f) : n.lineTo(s, f), s += h;
+      for (let m = 0; m < w.length; m++) {
+        const p = -w[m] * r.value / 2;
+        f = r.value / 2 + p, m === 0 ? n.moveTo(s, f) : n.lineTo(s, f), s += l;
       }
       n.lineTo(e.width, f), n.stroke();
     }
-    return (C, h) => (k(), x("canvas", {
+    return (w, l) => (k(), x("canvas", {
       ref_key: "analyserCanvas",
       ref: o,
       height: r.value,
@@ -1231,7 +1245,7 @@ const Fe = /* @__PURE__ */ D(Ne, [["render", He], ["__scopeId", "data-v-670d0fd3
     }
   },
   setup(t) {
-    const e = g(!1), a = b(() => ({
+    const e = g(!1), a = C(() => ({
       "--on-color": `${t.color}`
     }));
     function i() {
@@ -1258,50 +1272,50 @@ const je = /* @__PURE__ */ D(Xe, [["render", Ze], ["__scopeId", "data-v-87a8a5ae
     height: { type: Number, required: !1 }
   },
   setup(t, e) {
-    const a = g("black"), i = g("#70bfff"), o = g("#70bfff"), n = g(4), r = g(16), d = 0.25, y = 0.4, C = 0.1, h = 0.25, s = g(0), f = g(0), m = g(0), p = g(0);
+    const a = g("black"), i = g("#70bfff"), o = g("#70bfff"), n = g(4), r = g(16), h = 0.25, y = 0.4, w = 0.1, l = 0.25, s = g(0), f = g(0), m = g(0), p = g(0);
     let M = 0, $ = 0, A = 0, P = 0;
-    const U = g(0), u = g(0), l = g(0), v = g(0);
-    let B = 0, F = 0, bt = 0, Mt = 0;
-    const mt = g(0), gt = g(0), S = 10, W = g("");
+    const U = g(0), u = g(0), d = g(0), v = g(0);
+    let N = 0, F = 0, Ct = 0, Mt = 0;
+    const mt = g(0), gt = g(0), S = 10, O = g("");
     let at = -1, St = -1;
-    const Ut = b(() => t.modelValue.attack + t.modelValue.decay + t.modelValue.release), Gt = b(() => t.width), Vt = b(() => t.height ? t.height : t.width / 2.5), j = b(() => Gt.value - S * 2), G = b(() => Vt.value - S * 2), It = b(() => G.value * 1), Y = b(() => d * j.value), J = b(() => Y.value * (t.modelValue.attack / t.attackMax)), _ = b(() => y * j.value), it = b(() => _.value * (t.modelValue.decay / t.decayMax)), rt = b(() => C * j.value), yt = b(() => h * j.value), ot = b(() => yt.value * (t.modelValue.release / t.releaseMax)), Et = b(() => {
-      s.value = S, f.value = G.value + S, m.value = J.value + S, p.value = S, M = J.value + it.value / 4 + S, $ = (G.value - G.value * t.modelValue.sustain) / 2 + S, A = J.value + it.value / 2 + S, P = G.value - G.value * t.modelValue.sustain + S, U.value = J.value + it.value + S, u.value = G.value - G.value * t.modelValue.sustain + S, l.value = Y.value + _.value + rt.value, v.value = G.value - G.value * t.modelValue.sustain + S, B = Y.value + _.value + rt.value + ot.value / 4, F = G.value - G.value * t.modelValue.sustain / 2 + S, bt = Y.value + _.value + rt.value + ot.value / 2, Mt = G.value + S, mt.value = l.value + ot.value, gt.value = G.value + S;
-      const w = `M ${s.value} ${f.value} `, nt = `L ${m.value} ${p.value} `, O = `C
+    const Ut = C(() => t.modelValue.attack + t.modelValue.decay + t.modelValue.release), Gt = C(() => t.width), Vt = C(() => t.height ? t.height : t.width / 2.5), j = C(() => Gt.value - S * 2), G = C(() => Vt.value - S * 2), It = C(() => G.value * 1), Y = C(() => h * j.value), J = C(() => Y.value * (t.modelValue.attack / t.attackMax)), _ = C(() => y * j.value), it = C(() => _.value * (t.modelValue.decay / t.decayMax)), rt = C(() => w * j.value), yt = C(() => l * j.value), ot = C(() => yt.value * (t.modelValue.release / t.releaseMax)), Et = C(() => {
+      s.value = S, f.value = G.value + S, m.value = J.value + S, p.value = S, M = J.value + it.value / 4 + S, $ = (G.value - G.value * t.modelValue.sustain) / 2 + S, A = J.value + it.value / 2 + S, P = G.value - G.value * t.modelValue.sustain + S, U.value = J.value + it.value + S, u.value = G.value - G.value * t.modelValue.sustain + S, d.value = Y.value + _.value + rt.value, v.value = G.value - G.value * t.modelValue.sustain + S, N = Y.value + _.value + rt.value + ot.value / 4, F = G.value - G.value * t.modelValue.sustain / 2 + S, Ct = Y.value + _.value + rt.value + ot.value / 2, Mt = G.value + S, mt.value = d.value + ot.value, gt.value = G.value + S;
+      const b = `M ${s.value} ${f.value} `, nt = `L ${m.value} ${p.value} `, W = `C
         ${M}
         ${$}
         ${A}
         ${P}
         ${U.value}
-        ${u.value}`, st = `L ${l.value} ${v.value}`, I = `C 
-        ${B}
+        ${u.value}`, st = `L ${d.value} ${v.value}`, I = `C 
+        ${N}
         ${F} 
-        ${bt}
+        ${Ct}
         ${Mt}
         ${mt.value}
         ${gt.value}`;
-      return w + nt + O + st + I;
+      return b + nt + W + st + I;
     });
-    function Wt(w) {
-      w.preventDefault ? w.preventDefault() : w.returnValue = !1, W.value = "attackAnchor";
+    function Ot(b) {
+      b.preventDefault ? b.preventDefault() : b.returnValue = !1, O.value = "attackAnchor";
     }
-    function Ot(w) {
-      w.preventDefault ? w.preventDefault() : w.returnValue = !1, W.value = "decaySustainAnchor";
+    function Wt(b) {
+      b.preventDefault ? b.preventDefault() : b.returnValue = !1, O.value = "decaySustainAnchor";
     }
-    function qt(w) {
-      w.preventDefault ? w.preventDefault() : w.returnValue = !1, W.value = "releaseAnchor";
+    function qt(b) {
+      b.preventDefault ? b.preventDefault() : b.returnValue = !1, O.value = "releaseAnchor";
     }
-    function vt(w, nt) {
-      let O, st, I = 0, q = 0, L = 0, z = 0;
-      if (W.value != "") {
-        switch (W.value) {
+    function vt(b, nt) {
+      let W, st, I = 0, q = 0, L = 0, z = 0;
+      if (O.value != "") {
+        switch (O.value) {
           case "attackAnchor":
-            O = w - at, I = O / Y.value * t.attackMax, I = t.modelValue.attack + I >= t.attackMax && I > 0 ? t.attackMax - t.modelValue.attack : t.modelValue.attack + I <= 0 && I < 0 ? 0 : I;
+            W = b - at, I = W / Y.value * t.attackMax, I = t.modelValue.attack + I >= t.attackMax && I > 0 ? t.attackMax - t.modelValue.attack : t.modelValue.attack + I <= 0 && I < 0 ? 0 : I;
             break;
           case "decaySustainAnchor":
-            O = w - at, q = O / _.value * t.decayMax, q = t.modelValue.decay + q >= t.decayMax && q > 0 ? t.decayMax - t.modelValue.decay : t.modelValue.decay + q <= 0 && q < 0 ? 0 : q, st = nt - St, L = -(st / G.value), L = t.modelValue.sustain + L >= 1 && L > 0 ? 1 - t.modelValue.sustain : t.modelValue.sustain + L <= 0 && L < 0 ? 0 : L;
+            W = b - at, q = W / _.value * t.decayMax, q = t.modelValue.decay + q >= t.decayMax && q > 0 ? t.decayMax - t.modelValue.decay : t.modelValue.decay + q <= 0 && q < 0 ? 0 : q, st = nt - St, L = -(st / G.value), L = t.modelValue.sustain + L >= 1 && L > 0 ? 1 - t.modelValue.sustain : t.modelValue.sustain + L <= 0 && L < 0 ? 0 : L;
             break;
           case "releaseAnchor":
-            O = w - at, z = O / yt.value * t.releaseMax, z = t.modelValue.release + z >= t.releaseMax && z > 0 ? t.releaseMax - t.modelValue.release : t.modelValue.release + z <= 0 && z < 0 ? 0 : z;
+            W = b - at, z = W / yt.value * t.releaseMax, z = t.modelValue.release + z >= t.releaseMax && z > 0 ? t.releaseMax - t.modelValue.release : t.modelValue.release + z <= 0 && z < 0 ? 0 : z;
             break;
         }
         e.emit("update:modelValue", {
@@ -1311,19 +1325,19 @@ const je = /* @__PURE__ */ D(Xe, [["render", Ze], ["__scopeId", "data-v-87a8a5ae
           release: t.modelValue.release + z
         });
       }
-      at = w, St = nt;
+      at = b, St = nt;
     }
-    function Lt(w) {
-      vt(w.pageX, w.pageY);
+    function Lt(b) {
+      vt(b.pageX, b.pageY);
     }
-    function zt(w) {
-      w.touches[0] && vt(w.touches[0].pageX, w.touches[0].pageY);
+    function zt(b) {
+      b.touches[0] && vt(b.touches[0].pageX, b.touches[0].pageY);
     }
     function Rt() {
-      W.value = "";
+      O.value = "";
     }
-    function Nt() {
-      W.value = "";
+    function Bt() {
+      O.value = "";
     }
     return {
       backgroundColor: a,
@@ -1331,7 +1345,7 @@ const je = /* @__PURE__ */ D(Xe, [["render", Ze], ["__scopeId", "data-v-87a8a5ae
       anchorColor: o,
       anchorRadius: n,
       ghostAnchorRadius: r,
-      activeAnchorId: W,
+      activeAnchorId: O,
       startX: s,
       startY: f,
       attackPeakX: m,
@@ -1354,11 +1368,11 @@ const je = /* @__PURE__ */ D(Xe, [["render", Ze], ["__scopeId", "data-v-87a8a5ae
       releaseTotalWidth: yt,
       releaseWidth: ot,
       adsrPath: Et,
-      attackAnchorMouseDown: Wt,
-      decaySustainAnchorMouseDown: Ot,
+      attackAnchorMouseDown: Ot,
+      decaySustainAnchorMouseDown: Wt,
       releaseAnchorMouseDown: qt,
       onMouseUp: Rt,
-      onMouseLeave: Nt,
+      onMouseLeave: Bt,
       onMove: vt,
       onMouseMove: Lt,
       onTouchMove: zt
@@ -1486,7 +1500,7 @@ const ya = /* @__PURE__ */ D(Je, [["render", ga], ["__scopeId", "data-v-f87b5263
 }, xa = ["fill"], ka = {
   key: 0,
   class: "num-value"
-}, wa = ["min", "max"], Ca = 90, ba = /* @__PURE__ */ T({
+}, wa = ["min", "max"], ba = 90, Ca = /* @__PURE__ */ T({
   __name: "v-a-num-box",
   props: {
     modelValue: {
@@ -1520,16 +1534,16 @@ const ya = /* @__PURE__ */ D(Je, [["render", ga], ["__scopeId", "data-v-f87b5263
   },
   emits: ["update:modelValue"],
   setup(t, { emit: e }) {
-    const a = e, i = t, o = g(!1), n = g(!1), r = g(i.modelValue), d = kt("manualInputEl"), y = kt("numBox");
-    let C = -1;
-    const h = b(() => o.value ? V.colors.primary : V.colors.secondary), s = b(() => ({
+    const a = e, i = t, o = g(!1), n = g(!1), r = g(i.modelValue), h = kt("manualInputEl"), y = kt("numBox");
+    let w = -1;
+    const l = C(() => o.value ? V.colors.primary : V.colors.secondary), s = C(() => ({
       "--border-color": `${V.colors.secondary}`,
       "--numbox-width": i.width ? `${i.width}px` : "auto"
-    })), f = b(() => i.maxValue - i.minValue);
-    N(() => i.modelValue, (v) => r.value = v);
+    })), f = C(() => i.maxValue - i.minValue);
+    B(() => i.modelValue, (v) => r.value = v);
     function m() {
       n.value = !0, r.value = i.modelValue, Yt().then(() => {
-        d.value?.select(), document.addEventListener("mouseup", p);
+        h.value?.select(), document.addEventListener("mouseup", p);
       });
     }
     function p(v) {
@@ -1549,15 +1563,15 @@ const ya = /* @__PURE__ */ D(Je, [["render", ga], ["__scopeId", "data-v-f87b5263
       ), n.value = !1, document.removeEventListener("mouseup", p);
     }
     function A(v) {
-      n.value || (v.preventDefault(), document.addEventListener("mousemove", l), document.addEventListener("touchmove", u), document.addEventListener("mouseup", P), document.addEventListener("touchend", P));
+      n.value || (v.preventDefault(), document.addEventListener("mousemove", d), document.addEventListener("touchmove", u), document.addEventListener("mouseup", P), document.addEventListener("touchend", P));
     }
     function P() {
-      o.value = !1, document.removeEventListener("mousemove", l), document.removeEventListener("touchmove", u), document.removeEventListener("mouseup", P), document.removeEventListener("touchend", P), C = -1;
+      o.value = !1, document.removeEventListener("mousemove", d), document.removeEventListener("touchmove", u), document.removeEventListener("mouseup", P), document.removeEventListener("touchend", P), w = -1;
     }
     function U(v) {
-      if (o.value = !0, C >= 0) {
-        const B = C - v, F = H(
-          i.modelValue + B / Ca * (f.value / 2),
+      if (o.value = !0, w >= 0) {
+        const N = w - v, F = H(
+          i.modelValue + N / ba * (f.value / 2),
           i.minValue,
           i.maxValue
         );
@@ -1565,12 +1579,12 @@ const ya = /* @__PURE__ */ D(Je, [["render", ga], ["__scopeId", "data-v-f87b5263
       }
     }
     function u(v) {
-      v.touches[0] && (U(v.touches[0].pageY), C = v.touches[0].pageY);
+      v.touches[0] && (U(v.touches[0].pageY), w = v.touches[0].pageY);
     }
-    function l(v) {
-      U(v.pageY), C = v.pageY;
+    function d(v) {
+      U(v.pageY), w = v.pageY;
     }
-    return (v, B) => (k(), x("div", {
+    return (v, N) => (k(), x("div", {
       ref_key: "numBox",
       ref: y,
       class: ut(["numbox", { "show-border": t.showBorder }]),
@@ -1581,7 +1595,7 @@ const ya = /* @__PURE__ */ D(Je, [["render", ga], ["__scopeId", "data-v-f87b5263
       (k(), x("svg", va, [
         c("polygon", {
           points: "0,0 0,12 8,6",
-          fill: h.value
+          fill: l.value
         }, null, 8, xa)
       ])),
       n.value ? Dt("", !0) : (k(), x("span", ka, R(t.modelValue), 1)),
@@ -1589,18 +1603,18 @@ const ya = /* @__PURE__ */ D(Je, [["render", ga], ["__scopeId", "data-v-f87b5263
         key: 1,
         id: "manualInputEl",
         ref_key: "manualInputEl",
-        ref: d,
+        ref: h,
         type: "number",
         min: t.minValue,
         max: t.maxValue,
-        "onUpdate:modelValue": B[0] || (B[0] = (F) => r.value = F),
+        "onUpdate:modelValue": N[0] || (N[0] = (F) => r.value = F),
         onKeydown: M
       }, null, 40, wa)), [
         [Ft, r.value]
       ]) : Dt("", !0)
     ], 38));
   }
-}), Ma = /* @__PURE__ */ D(ba, [["__scopeId", "data-v-41e990e3"]]);
+}), Ma = /* @__PURE__ */ D(Ca, [["__scopeId", "data-v-41e990e3"]]);
 class Sa {
   _minusInputMin;
   _plusOutputMin;
@@ -1639,36 +1653,37 @@ const Va = { class: "matrix-row header" }, Da = { class: "matrix-cell source-lab
       required: !0
     },
     loggerNode: {
-      type: AudioNode,
+      type: Object,
+      // type: AudioNode
       required: !1
     }
   },
   setup(t) {
     const e = t, a = g(), i = g([]);
     let o = [];
-    N(() => e.sources, (h, s) => {
-      C(s, e.destinations), y(h, e.destinations);
-    }), N(() => e.destinations, (h, s) => {
-      C(e.sources), y(e.sources, h);
+    B(() => e.sources, (l, s) => {
+      w(s, e.destinations), y(l, e.destinations);
+    }), B(() => e.destinations, (l, s) => {
+      w(e.sources), y(e.sources, l);
     });
-    function n(h, s) {
-      h.modAmountNode.gain.setValueAtTime(s, a.value.currentTime);
+    function n(l, s) {
+      l.modAmountNode.gain.setValueAtTime(s, a.value.currentTime);
     }
-    function r(h, s) {
-      s.ratioSum = new GainNode(h, { gain: 1 }), s.sourceCells.forEach(((f) => {
+    function r(l, s) {
+      s.ratioSum = new GainNode(l, { gain: 1 }), s.sourceCells.forEach(((f) => {
         s.ratioSum && f.modAmountNode.connect(s.ratioSum);
-      })), s.clamper = new WaveShaperNode(h, { curve: [0, 0, 1] }), s.ratioSum.connect(s.clamper), s.outputScaler = new Sa(h, 0, 1, s.destination.minValue, s.destination.maxValue), s.clamper.connect(s.outputScaler.input), s.output = s.outputScaler.output, (s.destination.node instanceof AudioParam || s.destination.node instanceof AudioNode) && s.output.connect(s.destination.node);
+      })), s.clamper = new WaveShaperNode(l, { curve: [0, 0, 1] }), s.ratioSum.connect(s.clamper), s.outputScaler = new Sa(l, 0, 1, s.destination.minValue, s.destination.maxValue), s.clamper.connect(s.outputScaler.input), s.output = s.outputScaler.output, (s.destination.node instanceof AudioParam || s.destination.node instanceof AudioNode) && s.output.connect(s.destination.node);
     }
-    function d(h) {
-      h.sourceCells.forEach((s) => {
+    function h(l) {
+      l.sourceCells.forEach((s) => {
         s.modAmountNode.disconnect();
-      }), h.ratioSum?.disconnect(), h.ratioSum = void 0, h.clamper?.disconnect(), h.clamper = void 0;
+      }), l.ratioSum?.disconnect(), l.ratioSum = void 0, l.clamper?.disconnect(), l.clamper = void 0;
     }
-    function y(h, s) {
-      if (h.length > 0 && (a.value = h[0]?.node.context), !a.value)
+    function y(l, s) {
+      if (l.length > 0 && (a.value = l[0]?.node.context), !a.value)
         return;
       const f = a.value, m = [];
-      h.forEach((p) => {
+      l.forEach((p) => {
         const M = [];
         s.forEach((A) => {
           const P = new GainNode(f, { gain: 0 }), U = new Ga(f, p.minValue, p.maxValue);
@@ -1690,16 +1705,16 @@ const Va = { class: "matrix-row header" }, Da = { class: "matrix-cell source-lab
         r(f, M), o.push(M);
       });
     }
-    function C(h, s) {
-      h.forEach((f) => {
+    function w(l, s) {
+      l.forEach((f) => {
         i.value.shift()?.forEach((p) => {
           p.source.node.disconnect(p.signalToRatioConverter.input), p.signalToRatioConverter.dispose(), p.modAmountNode.disconnect();
         });
       }), i.value = [], o.forEach((f) => {
-        d(f);
+        h(f);
       }), o = [];
     }
-    return (h, s) => {
+    return (l, s) => {
       const f = et("v-a-num-box");
       return k(), x("div", null, [
         c("div", Va, [
@@ -1731,7 +1746,7 @@ const Va = { class: "matrix-row header" }, Da = { class: "matrix-cell source-lab
       ]);
     };
   }
-}), Aa = /* @__PURE__ */ D($a, [["__scopeId", "data-v-c8b43eec"]]), K = g(!1), Pa = T({
+}), Aa = /* @__PURE__ */ D($a, [["__scopeId", "data-v-778558a2"]]), K = g(!1), Pa = T({
   emits: [
     "keySlideOn",
     "keySlideOff",
@@ -1767,51 +1782,51 @@ const Va = { class: "matrix-row header" }, Da = { class: "matrix-cell source-lab
     ];
     let n = t.startingOctave * 12;
     function r(u) {
-      const l = o.findIndex((v) => v === u.code);
-      if (l > -1) {
-        const v = l + n;
+      const d = o.findIndex((v) => v === u.code);
+      if (d > -1) {
+        const v = d + n;
         y(v), e.emit("keyboardKeyDown", v);
       }
     }
-    function d(u) {
-      const l = o.findIndex((v) => v === u.code);
-      if (l > -1) {
-        const v = l + n;
-        C(v), e.emit("keyboardKeyUp", v);
+    function h(u) {
+      const d = o.findIndex((v) => v === u.code);
+      if (d > -1) {
+        const v = d + n;
+        w(v), e.emit("keyboardKeyUp", v);
       } else u.code === "KeyZ" ? n -= 12 : u.code === "KeyX" ? n += 12 : u.code === "KeyC" || u.code;
     }
     function y(u) {
-      const l = document.querySelector(`#key${u}`);
-      l != null && (l.style.background = a);
+      const d = document.querySelector(`#key${u}`);
+      d != null && (d.style.background = a);
     }
-    function C(u) {
-      const l = document.querySelector(`#key${u}`);
-      l != null && (l.style.background = i.includes(u % 12) ? "black" : "white");
+    function w(u) {
+      const d = document.querySelector(`#key${u}`);
+      d != null && (d.style.background = i.includes(u % 12) ? "black" : "white");
     }
-    function h(u) {
-      const l = u.target;
-      return parseInt(l.id.replace("key", ""));
+    function l(u) {
+      const d = u.target;
+      return parseInt(d.id.replace("key", ""));
     }
     function s(u) {
       if (!K.value) return;
-      const l = h(u);
-      u.stopPropagation(), t.disabled || (y(l), e.emit("keySlideOn", l));
+      const d = l(u);
+      u.stopPropagation(), t.disabled || (y(d), e.emit("keySlideOn", d));
     }
     function f(u) {
       if (!K.value) return;
       u.stopPropagation();
-      const l = h(u);
-      t.disabled || (C(l), e.emit("keySlideOff", l));
+      const d = l(u);
+      t.disabled || (w(d), e.emit("keySlideOff", d));
     }
     function m(u) {
       u.stopPropagation(), K.value = !0;
-      const l = h(u);
-      t.disabled || (y(l), e.emit("keyMouseDown", l));
+      const d = l(u);
+      t.disabled || (y(d), e.emit("keyMouseDown", d));
     }
     function p(u) {
       u.stopPropagation(), K.value = !1;
-      const l = h(u);
-      t.disabled || (C(l), e.emit("keyMouseUp", h(u)));
+      const d = l(u);
+      t.disabled || (w(d), e.emit("keyMouseUp", l(u)));
     }
     function M() {
       K.value = !0;
@@ -1820,31 +1835,31 @@ const Va = { class: "matrix-row header" }, Da = { class: "matrix-cell source-lab
       K.value = !1;
     }
     function A() {
-      document.addEventListener("mousedown", M), document.addEventListener("mouseup", $), document.addEventListener("keydown", r), document.addEventListener("keyup", d);
+      document.addEventListener("mousedown", M), document.addEventListener("mouseup", $), document.addEventListener("keydown", r), document.addEventListener("keyup", h);
       const u = document.querySelectorAll(
         "div.keyboard div.key, div.keyboard div.black-key"
       );
-      for (const l of u)
-        l.addEventListener("mousedown", m), l.addEventListener("mouseup", p), l.addEventListener("mouseover", s), l.addEventListener("mouseout", f), l.addEventListener("touchstart", m), l.addEventListener("touchend", p);
+      for (const d of u)
+        d.addEventListener("mousedown", m), d.addEventListener("mouseup", p), d.addEventListener("mouseover", s), d.addEventListener("mouseout", f), d.addEventListener("touchstart", m), d.addEventListener("touchend", p);
     }
     function P() {
-      document.removeEventListener("mousedown", M), document.removeEventListener("mouseup", $), document.removeEventListener("keydown", r), document.removeEventListener("keyup", d);
+      document.removeEventListener("mousedown", M), document.removeEventListener("mouseup", $), document.removeEventListener("keydown", r), document.removeEventListener("keyup", h);
       const u = document.querySelectorAll(
         "div.keyboard div.key, div.keyboard div.black-key"
       );
-      for (const l of u)
-        l.removeEventListener("mousedown", m), l.removeEventListener("mouseup", p), l.removeEventListener("mouseover", s), l.removeEventListener("mouseout", f), l.removeEventListener("touchstart", m), l.removeEventListener("touchend", p);
+      for (const d of u)
+        d.removeEventListener("mousedown", m), d.removeEventListener("mouseup", p), d.removeEventListener("mouseover", s), d.removeEventListener("mouseout", f), d.removeEventListener("touchstart", m), d.removeEventListener("touchend", p);
     }
     function U() {
       P(), A();
     }
-    Ct(() => {
+    bt(() => {
       A();
     }), _t(() => {
       P();
-    }), N(() => t.numOctaves, U);
+    }), B(() => t.numOctaves, U);
   }
-}), Ta = ["id"], Ua = ["id"], Ia = ["id"], Ea = ["id"], Wa = ["id"], Oa = ["id"], qa = ["id"], La = ["id"], za = ["id"], Ra = ["id"], Na = ["id"], Ba = ["id"];
+}), Ta = ["id"], Ua = ["id"], Ia = ["id"], Ea = ["id"], Oa = ["id"], Wa = ["id"], qa = ["id"], La = ["id"], za = ["id"], Ra = ["id"], Ba = ["id"], Na = ["id"];
 function Ha(t, e, a, i, o, n) {
   return k(), x("div", {
     class: ut(["keyboard", t.disabled ? "disabled" : ""])
@@ -1874,7 +1889,7 @@ function Ha(t, e, a, i, o, n) {
       c("div", {
         id: `key${t.startingOctave * 12 + (r - 1) * 12 + 4}`,
         class: "key"
-      }, null, 8, Wa),
+      }, null, 8, Oa),
       c("div", {
         id: `key${t.startingOctave * 12 + (r - 1) * 12 + 5}`,
         class: "key"
@@ -1883,7 +1898,7 @@ function Ha(t, e, a, i, o, n) {
           id: `key${t.startingOctave * 12 + (r - 1) * 12 + 6}`,
           class: "black-key"
         }, null, 8, qa)
-      ], 8, Oa),
+      ], 8, Wa),
       c("div", {
         id: `key${t.startingOctave * 12 + (r - 1) * 12 + 7}`,
         class: "key"
@@ -1900,12 +1915,12 @@ function Ha(t, e, a, i, o, n) {
         c("div", {
           id: `key${t.startingOctave * 12 + (r - 1) * 12 + 10}`,
           class: "black-key"
-        }, null, 8, Na)
+        }, null, 8, Ba)
       ], 8, Ra),
       c("div", {
         id: `key${t.startingOctave * 12 + (r - 1) * 12 + 11}`,
         class: "key"
-      }, null, 8, Ba)
+      }, null, 8, Na)
     ]))), 128))
   ], 2);
 }