vue-audio-ui 0.1.0 → 0.1.1

package/dist/vue-audio-ui.js

@@ -0,0 +1,1948 @@
+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";
+const V = {
+  colors: {
+    primary: "#70bfff",
+    secondary: "#6c757d",
+    success: "#28a745",
+    danger: "#dc3545",
+    warning: "#ffc107",
+    info: "#17a2b8",
+    light: "#e0e0e0",
+    dark: "#343a40",
+    muted: "#6c757d",
+    white: "#ffffff",
+    black: "#000000"
+  }
+};
+function pt(t, e) {
+  let a, i;
+  e && o(e);
+  function o(s) {
+    a = s.context.createAnalyser(), a.fftSize = t, i = new Float32Array(a.frequencyBinCount), s.connect(a);
+  }
+  function n(s) {
+    a && s && s.disconnect(a);
+  }
+  function r(s, f) {
+    s && o(s);
+  }
+  function d() {
+    return a?.getFloatTimeDomainData(i), i;
+  }
+  function y() {
+    return a?.getFloatFrequencyData(i), i;
+  }
+  function C(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) {
+    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,
+    getFloatFrequencyData: y,
+    onInputChanged: r,
+    disposeMetering: n
+  };
+}
+function ft() {
+  const t = g(!1);
+  function e(o) {
+    try {
+      o();
+    } catch (n) {
+      t.value = !1, console.log(`error in render callback - ${n}`);
+    }
+    t.value && window.requestAnimationFrame(() => e(o));
+  }
+  function a(o) {
+    t.value = !0, e(o);
+  }
+  function i() {
+    t.value = !1;
+  }
+  return { startRendering: a, stopRendering: i };
+}
+const Kt = T({
+  name: "VAAnalogMeter",
+  props: {
+    input: {
+      required: !1,
+      type: AudioNode,
+      default: void 0
+    },
+    type: {
+      required: !1,
+      type: String,
+      default: "peak"
+    },
+    fftSize: {
+      required: !1,
+      type: Number,
+      default: 2048
+    },
+    width: {
+      required: !1,
+      type: Number,
+      default: 300
+    }
+  },
+  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(() => {
+      n(() => {
+        const h = i();
+        let s = 0;
+        t.type === "peak" && h ? s = e(h) : t.type === "rms" && h && (s = a(h));
+        const f = 80;
+        s = s < -f ? -f : s;
+        const m = (f + s) / f;
+        d.value = m * 2 - 1;
+      });
+    }), At(() => {
+      r();
+    }), {
+      color: y,
+      rotation: C,
+      value: d
+    };
+  }
+}), D = (t, e) => {
+  const a = t.__vccOpts || t;
+  for (const [i, o] of e)
+    a[i] = o;
+  return a;
+}, Xt = { class: "meter-container" }, Zt = ["width"], jt = ["transform"];
+function Jt(t, e, a, i, o, n) {
+  return k(), x("div", Xt, [
+    (k(), x("svg", {
+      width: `${t.width}px`,
+      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)),
+      c("g", {
+        id: "needle",
+        transform: t.rotation
+      }, [...e[0] || (e[0] = [
+        c("polygon", {
+          points: "160,70 158,150 162,150",
+          fill: "#c62828"
+        }, null, -1),
+        c("circle", {
+          cx: "160",
+          cy: "150",
+          r: "6",
+          fill: "#333"
+        }, null, -1),
+        c("circle", {
+          cx: "160",
+          cy: "150",
+          r: "3",
+          fill: "#777"
+        }, null, -1)
+      ])], 8, jt),
+      e[2] || (e[2] = c("rect", {
+        x: "24",
+        y: "24",
+        rx: "12",
+        ry: "12",
+        width: "272",
+        height: "172",
+        fill: "url(#glassGrad)"
+      }, null, -1)),
+      e[3] || (e[3] = c("text", {
+        x: "160",
+        y: "185",
+        "text-anchor": "middle",
+        "font-size": "16",
+        "font-weight": "bold",
+        "font-family": "Arial, Helvetica, sans-serif",
+        fill: "#333"
+      }, null, -1))
+    ], 8, Zt))
+  ]);
+}
+const Qt = /* @__PURE__ */ D(Kt, [["render", Jt], ["__scopeId", "data-v-048f897f"]]);
+function H(t, e, a) {
+  return t < e ? e : t > a ? a : t;
+}
+function te(t, e) {
+  const a = Math.abs(t), i = Math.abs(e);
+  return a > i ? t : i > a ? e : Math.max(t, e);
+}
+function ee(t) {
+  return (t & t - 1) === 0;
+}
+function $t(t, e) {
+  return +`${Math.round(+`${t}e${e}`)}e${-e}`;
+}
+class Pt {
+  min;
+  max;
+  constructor(e, a) {
+    this.min = e, this.max = a;
+  }
+  getCurvedValue(e) {
+    throw "getCurvedValue must be overriden in child class";
+  }
+  getLinearValue(e) {
+    throw "getLinearValue must be overriden in child class";
+  }
+  validateInput(e) {
+    if (e < this.min)
+      throw `given value ${e} is less than min value ${this.min}`;
+    if (e > this.max)
+      throw `given value ${e} is greater than max value ${this.max}`;
+  }
+}
+function wt(t) {
+  return Math.pow(Math.E, t);
+}
+function ae(t, e, a, i, o, n) {
+  return (wt(((t - e) / (a - e) - 1) * n) - 1) / (wt(-n) - 1) * (i - o) + o;
+}
+function ie(t, e, a, i, o, n) {
+  return (Math.log((t - o) * (wt(-n) - 1) / (i - o) + 1) / n + 1) * (a - e) + e;
+}
+class Tt extends Pt {
+  curveAmount;
+  constructor(e, a, i) {
+    super(e, a), this.curveAmount = i;
+  }
+  getCurvedValue(e) {
+    return this.validateInput(e), ae(e, this.min, this.max, this.min, this.max, this.curveAmount);
+  }
+  getLinearValue(e) {
+    return this.validateInput(e), ie(e, this.min, this.max, this.min, this.max, this.curveAmount);
+  }
+}
+class ht extends Pt {
+  constructor(e, a) {
+    super(e, a);
+  }
+  getCurvedValue(e) {
+    return this.validateInput(e), e;
+  }
+  getLinearValue(e) {
+    return this.validateInput(e), e;
+  }
+}
+const re = 3, oe = 300, ne = 16, se = T({
+  name: "VAAudioFileVisualizer",
+  data() {
+    return {
+      canvas: null,
+      canvasContext: null,
+      // x coordinate of the marker position on the canvas (in px)
+      markerPosition: 0,
+      // sample index of where the marker is placed
+      markerIndex: 0,
+      // x coordinate of where selection ends (can be before marker index)
+      selectionPosition: void 0,
+      // sample index of where selection ends (can be before marker index)
+      selectionIndex: void 0,
+      // starting sample index of the zoom window
+      zoomWindowStartIndex: 0,
+      // ending sample index of the zoom window
+      zoomWindowEndIndex: 0,
+      // value between 0 and 1 representing how far zoomed the graph is
+      zoom: 1,
+      prevY: -1,
+      prevX: -1,
+      // todo: adjust curve based on sample length?
+      curedRange: new Tt(0, 1, 8)
+    };
+  },
+  props: {
+    amplitudeData: {
+      required: !1,
+      type: Float32Array
+    },
+    lineColor: {
+      required: !1,
+      type: String
+    },
+    backgroundColor: {
+      required: !1,
+      type: String
+    },
+    width: {
+      required: !1,
+      type: Number,
+      default: 500
+    },
+    height: {
+      required: !1,
+      type: Number
+    }
+  },
+  computed: {
+    cssVars() {
+      return {
+        "--line-color": `${this.canvasLineColor}`,
+        "--background-color": `${this.canvasBackgroundColor}`
+      };
+    },
+    graphWidth() {
+      return this.width;
+    },
+    graphHeight() {
+      return this.height ?? this.width / re;
+    },
+    zoomMult() {
+      if (!this.amplitudeData) return 1;
+      const t = this.curedRange.getCurvedValue(this.zoom);
+      return Math.max(t, ne / this.amplitudeData.length);
+    },
+    // number of samples between start and end of zoom window
+    zoomWindowLength() {
+      return this.zoomWindowEndIndex - this.zoomWindowStartIndex;
+    },
+    canvasLineColor() {
+      return this.lineColor ?? V.colors.white;
+    },
+    canvasBackgroundColor() {
+      return this.backgroundColor ?? V.colors.black;
+    },
+    canvasMarkerColor() {
+      return V.colors.primary;
+    },
+    canvasSelectColor() {
+      return V.colors.primary;
+    }
+  },
+  mounted() {
+    this.canvas = this.$refs.visualizer, this.canvasContext = this.canvas.getContext("2d");
+  },
+  methods: {
+    pixelsToSamples(t) {
+      return this.zoomWindowLength / this.graphWidth * t;
+    },
+    shiftZoomWindow(t) {
+      this.zoomWindowStartIndex += t, this.zoomWindowEndIndex += t;
+    },
+    setZoomWindow() {
+      if (!this.amplitudeData) {
+        this.zoomWindowStartIndex = 0, this.zoomWindowEndIndex = 0, this.zoom = 1;
+        return;
+      }
+      this.zoomWindowStartIndex = this.markerIndex - Math.round(this.amplitudeData.length * this.zoomMult / 2), this.zoomWindowEndIndex = this.markerIndex + Math.round(this.amplitudeData.length * this.zoomMult / 2);
+      const e = (this.graphWidth / 2 - this.markerPosition) / this.graphWidth, a = Math.round(
+        e * this.zoomWindowLength
+      );
+      this.shiftZoomWindow(a);
+      let i = 0;
+      i += this.zoomWindowStartIndex < 0 ? -this.zoomWindowStartIndex : 0, i += this.zoomWindowEndIndex > this.amplitudeData.length ? this.amplitudeData.length - this.zoomWindowEndIndex : 0, this.shiftZoomWindow(i);
+    },
+    drawZoom() {
+      this.setZoomWindow(), this.drawAmplitude();
+    },
+    getMaxSampleValue(t, e, a) {
+      let i = Number.NEGATIVE_INFINITY;
+      for (let o = e; o < a; o++)
+        i = Math.max(i, t[o]);
+      return i;
+    },
+    getMinSampleValue(t, e, a) {
+      let i = Number.POSITIVE_INFINITY;
+      for (let o = e; o < a; o++)
+        i = Math.min(i, t[o]);
+      return i;
+    },
+    getAvgSampleValue(t, e, a) {
+      let i = 0;
+      for (let o = e; o < a; o++)
+        i += Math.abs(t[o]);
+      return i / (a - e);
+    },
+    drawMarker() {
+      this.canvasContext.fillStyle = this.canvasMarkerColor, this.canvasContext?.fillRect(this.markerPosition, 0, 2, this.graphHeight);
+    },
+    drawSelection() {
+      this.selectionPosition !== void 0 && (this.canvasContext.globalAlpha = 0.5, this.canvasContext.fillStyle = this.canvasSelectColor, this.canvasContext.fillRect(
+        this.markerPosition,
+        0,
+        this.selectionPosition - this.markerPosition,
+        this.graphHeight
+      ), this.canvasContext.globalAlpha = 1);
+    },
+    drawPoint(t, e) {
+      this.canvasContext.fillStyle = this.canvasLineColor, this.canvasContext?.beginPath(), this.canvasContext?.arc(t + 0.5, e + 0.5, 2, 0, Math.PI * 2), this.canvasContext?.fill();
+    },
+    drawBackground() {
+      this.canvasContext?.clearRect(0, 0, this.graphWidth, this.graphHeight), this.canvasContext.fillStyle = this.canvasBackgroundColor, this.canvasContext?.fillRect(0, 0, this.graphWidth, this.graphHeight);
+    },
+    drawAmplitudeMinMax() {
+      if (!this.amplitudeData) return;
+      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(
+          this.amplitudeData,
+          this.zoomWindowStartIndex + d * e,
+          this.zoomWindowStartIndex + (d + 1) * e
+        ), r = this.getMaxSampleValue(
+          this.amplitudeData,
+          this.zoomWindowStartIndex + d * e,
+          this.zoomWindowStartIndex + (d + 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();
+    },
+    drawAmplitudeSampleLine(t = !1) {
+      if (!this.amplitudeData) return;
+      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;
+      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);
+      o.lineTo(this.graphWidth, r), this.canvasContext.strokeStyle = this.canvasLineColor, this.canvasContext?.stroke(o), this.drawSelection(), this.drawMarker();
+    },
+    drawAmplitudeAvg() {
+      if (!this.amplitudeData) return;
+      const t = this.zoomWindowLength / this.graphWidth, e = Math.max(Math.round(t), 1);
+      this.drawBackground();
+      const a = new Path2D();
+      a.moveTo(0, 0);
+      let i = 0, o = 0, n = 0;
+      for (let r = 0; r < this.graphWidth; r++)
+        i = r, n = this.getAvgSampleValue(
+          this.amplitudeData,
+          this.zoomWindowStartIndex + r * e,
+          this.zoomWindowStartIndex + (r + 1) * e
+        ), o = this.graphHeight - (this.graphHeight / 2 + n * this.graphHeight / 2), a.moveTo(i, o), o = this.graphHeight - (this.graphHeight / 2 + -n * this.graphHeight / 2), a.lineTo(i, o);
+      a.lineTo(this.graphWidth, this.graphHeight / 2), this.canvasContext.strokeStyle = this.canvasLineColor, this.canvasContext?.stroke(a), this.drawSelection(), this.drawMarker();
+    },
+    drawAmplitude() {
+      this.zoomWindowLength / this.graphWidth < 0.25 ? this.drawAmplitudeSampleLine(!0) : this.zoomWindowLength / this.graphWidth <= 2 ? this.drawAmplitudeSampleLine(!1) : this.drawAmplitudeMinMax();
+    },
+    onCanvasDoubleClick() {
+      this.amplitudeData && (this.zoom = 1, this.zoomWindowStartIndex = 0, this.zoomWindowEndIndex = this.amplitudeData.length, this.markerIndex = Math.round(this.pixelsToSamples(this.markerPosition)) + this.zoomWindowStartIndex, this.selectionPosition = void 0, this.selectionIndex = void 0, window.requestAnimationFrame(this.drawAmplitude));
+    },
+    onCanvasMouseDown(t) {
+      this.prevX = t.pageX, this.prevY = t.pageY;
+      const e = this.canvas?.getBoundingClientRect()?.x, a = t.clientX - e;
+      this.markerIndex = Math.round(this.pixelsToSamples(a)) + this.zoomWindowStartIndex, this.markerPosition = a, this.selectionPosition = void 0, this.selectionIndex = void 0, window.requestAnimationFrame(this.drawAmplitude), document.getElementsByTagName("body")[0].classList.add("--no-text-select"), t.metaKey || t.ctrlKey ? (window.addEventListener("mousemove", this.onCtrlClickDrag), window.addEventListener("mouseup", this.endCtrlClickDrag)) : (window.addEventListener("mousemove", this.onClickDrag), window.addEventListener("mouseup", this.endClickDrag));
+    },
+    onClickDrag(t) {
+      const e = t.pageY, a = t.pageX, i = a - this.prevX;
+      e - this.prevY, this.selectionPosition = this.selectionPosition === void 0 ? this.markerPosition + i : this.selectionPosition + i, window.requestAnimationFrame(this.drawAmplitude), this.prevY = e, this.prevX = a;
+    },
+    endClickDrag() {
+      window.removeEventListener("mousemove", this.onClickDrag), this.prevY = -1, this.prevX = -1, this.selectionPosition && this.$emit("audioSelection", {
+        startIndex: this.markerIndex,
+        endIndex: Math.round(this.pixelsToSamples(this.selectionPosition)) + this.zoomWindowStartIndex
+      }), document.getElementsByTagName("body")[0].classList.remove("--no-text-select");
+    },
+    onCtrlClickDrag(t) {
+      if (!this.amplitudeData) return;
+      const e = t.pageY, a = t.pageX, i = a - this.prevX, o = e - this.prevY;
+      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;
+        }
+      } else
+        this.prevY >= 0 && (this.zoom = H(this.zoom - o / oe * 1, 0, 1), this.setZoomWindow());
+      this.markerPosition = Math.round(
+        (this.markerIndex - this.zoomWindowStartIndex) / this.zoomWindowLength * this.graphWidth
+      ), window.requestAnimationFrame(this.drawAmplitude), this.prevY = e, this.prevX = a;
+    },
+    endCtrlClickDrag() {
+      window.removeEventListener("mousemove", this.onCtrlClickDrag), this.prevY = -1, this.prevX = -1, document.getElementsByTagName("body")[0].classList.remove("--no-text-select");
+    }
+  },
+  watch: {
+    amplitudeData(t, e) {
+      window.requestAnimationFrame(this.drawZoom);
+    }
+  }
+}), le = ["width", "height"];
+function de(t, e, a, i, o, n) {
+  return k(), x("canvas", {
+    ref: "visualizer",
+    class: "visualizer-canvas",
+    style: Z(t.cssVars),
+    width: t.graphWidth,
+    height: t.graphHeight,
+    onMousedown: e[0] || (e[0] = (...r) => t.onCanvasMouseDown && t.onCanvasMouseDown(...r)),
+    onDblclick: e[1] || (e[1] = (...r) => t.onCanvasDoubleClick && t.onCanvasDoubleClick(...r))
+  }, null, 44, le);
+}
+const he = /* @__PURE__ */ D(se, [["render", de], ["__scopeId", "data-v-f20165f6"]]), ce = T({
+  name: "VADigitalMeterStereo",
+  props: {
+    leftInput: {
+      required: !1,
+      type: AudioNode
+    },
+    rightInput: {
+      required: !1,
+      type: AudioNode
+    },
+    type: {
+      required: !1,
+      type: String,
+      default: "peak"
+    },
+    fftSize: {
+      required: !1,
+      type: Number,
+      default: 2048
+    },
+    clippingColor: {
+      required: !1,
+      type: String,
+      default: "#e64a19"
+    },
+    barColor: {
+      required: !1,
+      type: String
+    },
+    backgroundColor: {
+      required: !1,
+      type: String
+    },
+    markerColor: {
+      required: !1,
+      type: String,
+      default: "gray"
+    },
+    drawMarkers: {
+      required: !1,
+      type: Boolean,
+      default: !1
+    },
+    height: {
+      required: !1,
+      type: Number,
+      default: 200
+    },
+    width: {
+      required: !1,
+      type: Number,
+      default: 20
+    },
+    font: {
+      required: !1,
+      type: String,
+      default: "Helvetica, sans-serif"
+    }
+  }
+}), ue = { class: "stereo-meter-container" };
+function pe(t, e, a, i, o, n) {
+  const r = et("v-a-digital-meter");
+  return k(), x("div", null, [
+    c("div", ue, [
+      X(r, {
+        class: "meter-channel",
+        input: t.leftInput,
+        fftSize: t.fftSize,
+        type: t.type,
+        height: t.height,
+        width: t.width,
+        barColor: t.barColor,
+        backgroundColor: t.backgroundColor,
+        markerColor: t.markerColor,
+        font: t.font,
+        clippingColor: t.clippingColor,
+        drawMarkers: !1
+      }, null, 8, ["input", "fftSize", "type", "height", "width", "barColor", "backgroundColor", "markerColor", "font", "clippingColor"]),
+      X(r, {
+        class: "meter-channel",
+        input: t.rightInput,
+        fftSize: t.fftSize,
+        type: t.type,
+        height: t.height,
+        width: t.width,
+        barColor: t.barColor,
+        backgroundColor: t.backgroundColor,
+        markerColor: t.markerColor,
+        font: t.font,
+        clippingColor: t.clippingColor,
+        drawMarkers: t.drawMarkers
+      }, null, 8, ["input", "fftSize", "type", "height", "width", "barColor", "backgroundColor", "markerColor", "font", "clippingColor", "drawMarkers"])
+    ])
+  ]);
+}
+const fe = /* @__PURE__ */ D(ce, [["render", pe], ["__scopeId", "data-v-688c5c09"]]), E = 90, me = new Tt(0, E, 2), ge = T({
+  name: "VADigitalMeter",
+  props: {
+    input: {
+      required: !1,
+      type: AudioNode,
+      default: void 0
+    },
+    type: {
+      required: !1,
+      type: String,
+      default: "peak"
+    },
+    fftSize: {
+      required: !1,
+      type: Number,
+      default: 2048
+    },
+    clippingColor: {
+      required: !1,
+      type: String
+    },
+    barColor: {
+      required: !1,
+      type: String
+    },
+    backgroundColor: {
+      required: !1,
+      type: String
+    },
+    markerColor: {
+      required: !1,
+      type: String
+    },
+    drawMarkers: {
+      required: !1,
+      type: Boolean,
+      default: !1
+    },
+    height: {
+      required: !1,
+      type: Number,
+      default: 200
+    },
+    width: {
+      required: !1,
+      type: Number,
+      default: 20
+    },
+    font: {
+      required: !1,
+      type: String,
+      default: "Helvetica, sans-serif"
+    }
+  },
+  computed: {
+    canvasWidth() {
+      return this.width + (this.drawMarkers ? 30 : 0);
+    }
+  },
+  setup(t) {
+    const e = pt(t.fftSize, t.input);
+    return N(() => t.input, e.onInputChanged), {
+      ...e,
+      ...ft()
+    };
+  },
+  data() {
+    return {
+      canvasCxt: null
+    };
+  },
+  mounted() {
+    const t = this.$refs.meterCanvas;
+    this.canvasCxt = t.getContext("2d"), this.startRendering(this.draw);
+  },
+  methods: {
+    getMeterHeight(t) {
+      return this.height * ((E + t) / E) * (E / (E + 10));
+    },
+    scaleY(t) {
+      return me.getCurvedValue(t + E) - E;
+    },
+    draw() {
+      if (this.canvasCxt) {
+        const t = this.getFloatTimeDomainData();
+        let e = -E;
+        this.type === "peak" && t ? e = this.getPeakDb(t) : this.type === "rms" && t && (e = this.getRmsDb(t));
+        const a = e > 0;
+        e = H(e, -E, 0);
+        const i = this.getMeterHeight(this.scaleY(e));
+        this.canvasCxt.clearRect(0, 0, this.canvasWidth, this.height), this.canvasCxt.fillStyle = this.backgroundColor ?? V.colors.light, this.canvasCxt.beginPath(), this.canvasCxt.fillRect(0, 0, this.width, this.height), this.canvasCxt.stroke(), this.canvasCxt.fillStyle = a ? this.clippingColor ?? V.colors.danger : this.barColor ?? V.colors.success, this.canvasCxt.beginPath(), this.canvasCxt.fillRect(
+          0,
+          this.height - i,
+          this.width,
+          i
+        ), this.canvasCxt.stroke(), this.drawMarkers && this.drawDbMarkers();
+      }
+    },
+    drawDbMarkers() {
+      this.drawDbMarker(0), this.drawDbMarker(-10), this.drawDbMarker(-20), this.drawDbMarker(-30), this.drawDbMarker(-40), this.drawDbMarker(-60);
+    },
+    drawDbMarker(t) {
+      const e = this.height - this.getMeterHeight(this.scaleY(t)), a = this.width + 4;
+      this.canvasCxt.lineWidth = 1, this.canvasCxt.strokeStyle = this.markerColor ?? V.colors.muted, this.canvasCxt?.beginPath(), this.canvasCxt?.moveTo(a, e), this.canvasCxt?.lineTo(a + 4, e), this.canvasCxt?.stroke(), this.canvasCxt.font = `10px ${this.font}`, this.canvasCxt.fillStyle = this.markerColor ?? V.colors.muted, this.canvasCxt.fillText(`${Math.abs(t)}`, a + 8, e + 3);
+    }
+  }
+}), ye = ["height", "width"];
+function ve(t, e, a, i, o, n) {
+  return k(), x("canvas", {
+    class: "meter",
+    ref: "meterCanvas",
+    height: t.height,
+    width: t.canvasWidth
+  }, null, 8, ye);
+}
+const xe = /* @__PURE__ */ D(ge, [["render", ve]]), ke = {}, we = {
+  version: "1.1",
+  viewBox: "0 0 62.143 129.29",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "27"
+};
+function Ce(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 = {
+  version: "1.1",
+  viewBox: "0 0 104 460",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function Ge(t, e) {
+  return k(), x("svg", Se, [...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><linearGradient id="linearGradient7718" x1="87.866" x2="87.866" y1="516.83" y2="528.75" gradientTransform="matrix(1.0278,0,0,1,787.52,-27.904)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#999" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7720" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0235,0,0,1,242.38,-1008.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7722" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .50643 256.46 265.42)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7724" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .42746 256.46 317.38)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7726" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .26952 256.46 405.1)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7728" x1="87.866" x2="87.866" y1="516.83" y2="521.42" gradientTransform="matrix(1.0364 0 0 .96441 786.64 -1114.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#333" offset="1"></stop></linearGradient><linearGradient id="linearGradient7730" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0364 0 0 .96441 234.39 -1076.7)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7732" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0274 0 0 .48841 240.25 -833.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7734" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0213 0 0 .41225 243.85 -783.64)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7736" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0122 0 0 .25993 249.26 -698.66)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7738" x1="87.866" x2="87.866" y1="516.83" y2="528.75" gradientTransform="matrix(1.0278,0,0,1,989.55,-112.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#999" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7740" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0235,0,0,1,444.41,-923.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7742" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .50643 458.49 180.57)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7744" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .42746 458.49 232.53)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7746" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1 0 0 .26952 458.49 320.25)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7748" x1="87.866" x2="87.866" y1="516.83" y2="521.42" gradientTransform="matrix(1.0364 0 0 .96441 988.67 -1029.6)" gradientUnits="userSpaceOnUse"><stop stop-color="#999" offset="0"></stop><stop stop-color="#333" offset="1"></stop></linearGradient><linearGradient id="linearGradient7750" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0364 0 0 .96441 436.42 -991.9)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7752" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0274 0 0 .48841 442.28 -748.65)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7754" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0213 0 0 .41225 445.88 -698.79)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><linearGradient id="linearGradient7756" x1="618.49" x2="618.49" y1="496.57" y2="499.1" gradientTransform="matrix(1.0122 0 0 .25993 451.29 -613.82)" gradientUnits="userSpaceOnUse"><stop stop-color="#ccc" offset="0"></stop><stop stop-color="#ccc" stop-opacity="0" offset="1"></stop></linearGradient><clipPath id="clipPath1318"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1322"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1326"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1330"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1334"><rect x="211.98" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1338"><rect x="620" y="321.05" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1342"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1346"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1350"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1354"><rect x="415.33" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1358"><rect x="415.33" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1362"><rect x="618.68" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1366"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1370"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1374"><rect x="618.68" y="336.2" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1378"><rect x="618.68" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath><clipPath id="clipPath1382"><rect x="618.68" y="350.38" width="107.89" height="491.49" rx="1" ry="112.86" fill="#0d0000" fill-opacity=".14859" stroke-opacity="0" style="paint-order:fill markers stroke;"></rect></clipPath></defs><g transform="translate(-621.34 -349.25)"><g transform="translate(0,-14.18)" clip-path="url(#clipPath1382)" fill="#b3b3b3"><g stroke="#b4b4b4" stroke-linecap="round"><g stroke-width="2.2535"><path d="m686.4 383.13h34.461"></path><path d="m686.4 434.78h34.461"></path><path d="m686.4 602.64h34.461"></path><path d="m686.4 654.29h34.461"></path><path d="m686.4 705.94h34.461"></path><path d="m686.4 757.59h34.461"></path><path d="m686.4 809.24h34.461"></path></g><g stroke-width="1.4468"><path d="m707.72 396.04h13.549"></path><path d="m707.72 408.95h13.549"></path><path d="m707.72 421.86h13.549"></path><path d="m707.72 447.69h13.549"></path><path d="m707.72 460.6h13.549"></path><path d="m707.72 473.51h13.549"></path><path d="m707.72 615.55h13.549"></path><path d="m707.72 628.46h13.549"></path><path d="m707.72 641.38h13.549"></path><path d="m707.72 667.2h13.549"></path><path d="m707.72 680.11h13.549"></path><path d="m707.72 693.03h13.549"></path><path d="m707.72 718.85h13.549"></path><path d="m707.72 731.76h13.549"></path><path d="m707.72 744.68h13.549"></path><path d="m707.72 770.5h13.549"></path><path d="m707.72 783.41h13.549"></path></g><path d="m686.4 538.08h34.461" stroke-width="2.2535"></path><g stroke-width="1.4468"><path d="m707.72 563.9h13.549"></path><path d="m707.72 576.81h13.549"></path><path d="m707.72 589.73h13.549"></path><path d="m707.72 499.34h13.549"></path><path d="m707.72 512.25h13.549"></path><path d="m707.72 525.16h13.549"></path></g></g><g font-family="Sawasdee" font-size="20px" letter-spacing="0px" word-spacing="0px"><text x="732.51788" y="816.73883" style="line-height:125%;" xml:space="preserve"><tspan x="732.51788" y="816.73883">60</tspan></text><text x="732.48859" y="764.85846" style="line-height:125%;" xml:space="preserve"><tspan x="732.48859" y="764.85846">50</tspan></text><text x="732.9671" y="713.24292" style="line-height:125%;" xml:space="preserve"><tspan x="732.9671" y="713.24292">40</tspan></text><text x="732.29816" y="661.56879" style="line-height:125%;" xml:space="preserve"><tspan x="732.29816" y="661.56879">30</tspan></text><text x="732.47394" y="609.91901" style="line-height:125%;" xml:space="preserve"><tspan x="732.47394" y="609.91901">20</tspan></text><text x="731.29718" y="545.35681" style="line-height:125%;" xml:space="preserve"><tspan x="731.29718" y="545.35681">10</tspan></text><text x="738.29425" y="493.71683" style="line-height:125%;" xml:space="preserve"><tspan x="738.29425" y="493.71683">0</tspan></text><text x="738.29913" y="441.98407" style="line-height:125%;" xml:space="preserve"><tspan x="738.29913" y="441.98407">5</tspan></text><text x="731.29718" y="390.41727" style="line-height:125%;" xml:space="preserve"><tspan x="731.29718" y="390.41727">10</tspan></text></g><path d="m708.23 796.33h13.549" stroke="#b4b4b4" stroke-linecap="round" stroke-width="1.4468"></path><g transform="translate(0,3.0785)" stroke="#b4b4b4" stroke-linecap="round"><path d="m657.43 380.16h-34.461" stroke-width="2.2535"></path><path d="m657.43 431.81h-34.461" stroke-width="2.2535"></path><path d="m658.06 483.46h-34.461" stroke-width="3.5"></path><g stroke-width="2.2535"><path d="m657.43 599.68h-34.461"></path><path d="m657.43 651.33h-34.461"></path><path d="m657.43 702.98h-34.461"></path><path d="m657.43 754.62h-34.461"></path><path d="m657.43 806.27h-34.461"></path></g><g stroke-width="1.4468"><path d="m636.12 393.08h-13.549"></path><path d="m636.12 405.99h-13.549"></path><path d="m636.12 418.9h-13.549"></path><path d="m636.12 444.73h-13.549"></path><path d="m636.12 457.64h-13.549"></path><path d="m636.12 470.55h-13.549"></path><path d="m636.12 612.59h-13.549"></path><path d="m636.12 625.5h-13.549"></path><path d="m636.12 638.41h-13.549"></path><path d="m636.12 664.24h-13.549"></path><path d="m636.12 677.15h-13.549"></path><path d="m636.12 690.06h-13.549"></path><path d="m636.12 715.89h-13.549"></path><path d="m636.12 728.8h-13.549"></path><path d="m636.12 741.71h-13.549"></path><path d="m636.12 767.54h-13.549"></path><path d="m636.12 780.45h-13.549"></path></g><path d="m657.43 535.11h-34.461" stroke-width="2.2535"></path><g stroke-width="1.4468"><path d="m636.12 560.94h-13.549"></path><path d="m636.12 573.85h-13.549"></path><path d="m636.12 586.76h-13.549"></path><path d="m636.12 496.38h-13.549"></path><path d="m636.12 509.29h-13.549"></path><path d="m636.12 522.2h-13.549"></path><path d="m635.61 793.36h-13.549"></path></g></g></g><g transform="translate(0,-14.18)" clip-path="url(#clipPath1378)" stroke-linecap="round"><path d="m673.43 370.93v445.71" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m673.43 370.93v445.71" fill="#454545" stroke="#494949" stroke-width="14.545"></path><path d="m673.43 370.93v445.71" fill="#585858" stroke="#515151" stroke-width="14.091"></path><path d="m673.43 370.93v445.71" fill="#6a6a6a" stroke="#595959" stroke-width="13.636"></path><path d="m673.43 370.93v445.71" fill="#7d7d7d" stroke="#616161" stroke-width="13.182"></path><path d="m673.43 370.93v445.71" fill="#8f8f8f" stroke="#696969" stroke-width="12.727"></path><path d="m673.43 370.93v445.71" fill="#a2a2a2" stroke="#717171" stroke-width="12.273"></path><path d="m673.43 370.93v445.71" fill="#b4b4b4" stroke="#797979" stroke-width="11.818"></path><path d="m673.43 370.93v445.71" fill="#c7c7c7" stroke="#818181" stroke-width="11.364"></path><path d="m673.43 370.93v445.71" fill="#d9d9d9" stroke="#898989" stroke-width="10.909"></path><path d="m673.43 370.93v445.71" fill="#ececec" stroke="#919191" stroke-width="10.455"></path><path d="m673.43 370.93v445.71" fill="#fff" stroke="#9a9a9a" stroke-width="10"></path></g><g stroke-linecap="round"><path d="m673.43 356.75v445.71" clip-path="url(#clipPath1374)" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m679.64 802.47v-445.18" clip-path="url(#clipPath1370)" fill="#999" stroke="#b1b1b1" stroke-width=".6"></path><path d="m673.43 356.75v445.71" clip-path="url(#clipPath1366)" fill="#fff" opacity=".50896" stroke="url(#linearGradient7595)" stroke-width="12"></path></g><g transform="translate(203.35,-14.18)" clip-path="url(#clipPath1358)" fill="#b3b3b3"><g stroke="#b4b4b4" stroke-linecap="round"><g stroke-width="2.2535"><path d="m686.4 383.13h34.461"></path><path d="m686.4 434.78h34.461"></path><path d="m686.4 602.64h34.461"></path><path d="m686.4 654.29h34.461"></path><path d="m686.4 705.94h34.461"></path><path d="m686.4 757.59h34.461"></path><path d="m686.4 809.24h34.461"></path></g><g stroke-width="1.4468"><path d="m707.72 396.04h13.549"></path><path d="m707.72 408.95h13.549"></path><path d="m707.72 421.86h13.549"></path><path d="m707.72 447.69h13.549"></path><path d="m707.72 460.6h13.549"></path><path d="m707.72 473.51h13.549"></path><path d="m707.72 615.55h13.549"></path><path d="m707.72 628.46h13.549"></path><path d="m707.72 641.38h13.549"></path><path d="m707.72 667.2h13.549"></path><path d="m707.72 680.11h13.549"></path><path d="m707.72 693.03h13.549"></path><path d="m707.72 718.85h13.549"></path><path d="m707.72 731.76h13.549"></path><path d="m707.72 744.68h13.549"></path><path d="m707.72 770.5h13.549"></path><path d="m707.72 783.41h13.549"></path></g><path d="m686.4 538.08h34.461" stroke-width="2.2535"></path><g stroke-width="1.4468"><path d="m707.72 563.9h13.549"></path><path d="m707.72 576.81h13.549"></path><path d="m707.72 589.73h13.549"></path><path d="m707.72 499.34h13.549"></path><path d="m707.72 512.25h13.549"></path><path d="m707.72 525.16h13.549"></path></g></g><g font-family="Sawasdee" font-size="20px" letter-spacing="0px" word-spacing="0px"><text x="732.51788" y="816.73883" style="line-height:125%;" xml:space="preserve"><tspan x="732.51788" y="816.73883">60</tspan></text><text x="732.48859" y="764.85846" style="line-height:125%;" xml:space="preserve"><tspan x="732.48859" y="764.85846">50</tspan></text><text x="732.9671" y="713.24292" style="line-height:125%;" xml:space="preserve"><tspan x="732.9671" y="713.24292">40</tspan></text><text x="732.29816" y="661.56879" style="line-height:125%;" xml:space="preserve"><tspan x="732.29816" y="661.56879">30</tspan></text><text x="732.47394" y="609.91901" style="line-height:125%;" xml:space="preserve"><tspan x="732.47394" y="609.91901">20</tspan></text><text x="731.29718" y="545.35681" style="line-height:125%;" xml:space="preserve"><tspan x="731.29718" y="545.35681">10</tspan></text><text x="738.29425" y="493.71683" style="line-height:125%;" xml:space="preserve"><tspan x="738.29425" y="493.71683">0</tspan></text><text x="738.29913" y="441.98407" style="line-height:125%;" xml:space="preserve"><tspan x="738.29913" y="441.98407">5</tspan></text><text x="731.29718" y="390.41727" style="line-height:125%;" xml:space="preserve"><tspan x="731.29718" y="390.41727">10</tspan></text></g><path d="m708.23 796.33h13.549" stroke="#b4b4b4" stroke-linecap="round" stroke-width="1.4468"></path><g transform="translate(0,3.0785)" stroke="#b4b4b4" stroke-linecap="round"><path d="m657.43 380.16h-34.461" stroke-width="2.2535"></path><path d="m657.43 431.81h-34.461" stroke-width="2.2535"></path><path d="m658.06 483.46h-34.461" stroke-width="3.5"></path><g stroke-width="2.2535"><path d="m657.43 599.68h-34.461"></path><path d="m657.43 651.33h-34.461"></path><path d="m657.43 702.98h-34.461"></path><path d="m657.43 754.62h-34.461"></path><path d="m657.43 806.27h-34.461"></path></g><g stroke-width="1.4468"><path d="m636.12 393.08h-13.549"></path><path d="m636.12 405.99h-13.549"></path><path d="m636.12 418.9h-13.549"></path><path d="m636.12 444.73h-13.549"></path><path d="m636.12 457.64h-13.549"></path><path d="m636.12 470.55h-13.549"></path><path d="m636.12 612.59h-13.549"></path><path d="m636.12 625.5h-13.549"></path><path d="m636.12 638.41h-13.549"></path><path d="m636.12 664.24h-13.549"></path><path d="m636.12 677.15h-13.549"></path><path d="m636.12 690.06h-13.549"></path><path d="m636.12 715.89h-13.549"></path><path d="m636.12 728.8h-13.549"></path><path d="m636.12 741.71h-13.549"></path><path d="m636.12 767.54h-13.549"></path><path d="m636.12 780.45h-13.549"></path></g><path d="m657.43 535.11h-34.461" stroke-width="2.2535"></path><g stroke-width="1.4468"><path d="m636.12 560.94h-13.549"></path><path d="m636.12 573.85h-13.549"></path><path d="m636.12 586.76h-13.549"></path><path d="m636.12 496.38h-13.549"></path><path d="m636.12 509.29h-13.549"></path><path d="m636.12 522.2h-13.549"></path><path d="m635.61 793.36h-13.549"></path></g></g></g><g transform="translate(203.35,-14.18)" clip-path="url(#clipPath1354)" stroke-linecap="round"><path d="m673.43 370.93v445.71" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m673.43 370.93v445.71" fill="#454545" stroke="#494949" stroke-width="14.545"></path><path d="m673.43 370.93v445.71" fill="#585858" stroke="#515151" stroke-width="14.091"></path><path d="m673.43 370.93v445.71" fill="#6a6a6a" stroke="#595959" stroke-width="13.636"></path><path d="m673.43 370.93v445.71" fill="#7d7d7d" stroke="#616161" stroke-width="13.182"></path><path d="m673.43 370.93v445.71" fill="#8f8f8f" stroke="#696969" stroke-width="12.727"></path><path d="m673.43 370.93v445.71" fill="#a2a2a2" stroke="#717171" stroke-width="12.273"></path><path d="m673.43 370.93v445.71" fill="#b4b4b4" stroke="#797979" stroke-width="11.818"></path><path d="m673.43 370.93v445.71" fill="#c7c7c7" stroke="#818181" stroke-width="11.364"></path><path d="m673.43 370.93v445.71" fill="#d9d9d9" stroke="#898989" stroke-width="10.909"></path><path d="m673.43 370.93v445.71" fill="#ececec" stroke="#919191" stroke-width="10.455"></path><path d="m673.43 370.93v445.71" fill="#fff" stroke="#9a9a9a" stroke-width="10"></path></g><g stroke-linecap="round"><path d="m876.78 356.75v445.71" clip-path="url(#clipPath1350)" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m882.99 802.47v-445.18" clip-path="url(#clipPath1346)" fill="#999" stroke="#b1b1b1" stroke-width=".6"></path><path d="m876.78 356.75v445.71" clip-path="url(#clipPath1342)" fill="#fff" opacity=".50896" stroke="url(#linearGradient7468)" stroke-width="12"></path></g><g transform="translate(-1.3202,15.152)" clip-path="url(#clipPath1338)"><path transform="matrix(.53231 0 0 .99811 560.96 12.701)" d="m649.84 478.85v126.27l31.315-18.94s-35.355-47.982 0-83.338c-27.779-21.466-31.315-23.991-31.315-23.991z" fill="#a1a1a1" filter="url(#filter4165-1)"></path><path d="m890.45 497.09h34.461" fill="#e6e6e6" stroke="#b4b4b4" stroke-linecap="round" stroke-width="3.5"></path><rect x="847.03" y="488.03" width="62.143" height="129.29" rx="3" ry="3" fill="#4d4d4d"></rect><rect x="847.97" y="552.42" width="60.419" height="3.5355" fill="#e6e6e6"></rect><rect x="847.72" y="488.74" width="60.613" height="21.071" rx="2.1483" ry="2" fill="url(#linearGradient7718)"></rect><rect x="847.92" y="540.26" width="58.811" height="10.119" fill="#333"></rect><rect x="847.03" y="530.89" width="61.133" height="8.7929" fill="#333"></rect><rect x="847.03" y="512.48" width="61.133" height="4.5457" fill="#1a1a1a"></rect><rect x="847.03" y="518.25" width="61.133" height="11.364" fill="#1a1a1a"></rect><rect transform="scale(1,-1)" x="847.72" y="-511.76" width="60.012" height="2.2612" rx="1.0235" ry=".63958" fill="url(#linearGradient7720)"></rect><rect x="847.89" y="517.03" width="58.633" height="1.1452" rx="1" ry=".3239" fill="url(#linearGradient7722)"></rect><rect x="847.89" y="529.76" width="58.633" height=".9666" rx="1" ry=".2734" fill="url(#linearGradient7724)"></rect><rect x="847.89" y="539.01" width="58.633" height=".60946" rx="1" ry=".17238" fill="url(#linearGradient7726)"></rect><rect transform="scale(1,-1)" x="847.34" y="-616.24" width="61.118" height="20.321" rx="2.1662" ry="1.9288" fill="url(#linearGradient7728)"></rect><rect transform="scale(1,-1)" x="847.92" y="-567.93" width="58.811" height="9.7593" fill="#333"></rect><rect transform="scale(1,-1)" x="847.03" y="-576.96" width="61.133" height="8.4799" fill="#666"></rect><rect transform="scale(1,-1)" x="847.03" y="-594.72" width="61.133" height="4.3839" fill="#808080"></rect><rect transform="scale(1,-1)" x="847.03" y="-589.16" width="61.133" height="10.96" fill="#808080"></rect><rect transform="scale(1,-1)" x="847.34" y="-597.6" width="60.767" height="2.1808" rx="1.0364" ry=".61681" fill="url(#linearGradient7730)"></rect><rect transform="scale(1,-1)" x="847.89" y="-590.84" width="60.24" height="1.1044" rx="1.0274" ry=".31237" fill="url(#linearGradient7732)"></rect><rect transform="scale(1,-1)" x="847.89" y="-578.82" width="59.883" height=".9322" rx="1.0213" ry=".26366" fill="url(#linearGradient7734)"></rect><rect transform="scale(1,-1)" x="847.89" y="-569.52" width="59.347" height=".58776" rx="1.0122" ry=".16624" fill="url(#linearGradient7736)"></rect></g><g transform="translate(406.7,-14.18)" clip-path="url(#clipPath1334)" stroke-linecap="round"><path d="m673.43 370.93v445.71" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m673.43 370.93v445.71" fill="#454545" stroke="#494949" stroke-width="14.545"></path><path d="m673.43 370.93v445.71" fill="#585858" stroke="#515151" stroke-width="14.091"></path><path d="m673.43 370.93v445.71" fill="#6a6a6a" stroke="#595959" stroke-width="13.636"></path><path d="m673.43 370.93v445.71" fill="#7d7d7d" stroke="#616161" stroke-width="13.182"></path><path d="m673.43 370.93v445.71" fill="#8f8f8f" stroke="#696969" stroke-width="12.727"></path><path d="m673.43 370.93v445.71" fill="#a2a2a2" stroke="#717171" stroke-width="12.273"></path><path d="m673.43 370.93v445.71" fill="#b4b4b4" stroke="#797979" stroke-width="11.818"></path><path d="m673.43 370.93v445.71" fill="#c7c7c7" stroke="#818181" stroke-width="11.364"></path><path d="m673.43 370.93v445.71" fill="#d9d9d9" stroke="#898989" stroke-width="10.909"></path><path d="m673.43 370.93v445.71" fill="#ececec" stroke="#919191" stroke-width="10.455"></path><path d="m673.43 370.93v445.71" fill="#fff" stroke="#9a9a9a" stroke-width="10"></path></g><g stroke-linecap="round"><path d="m1080.1 356.75v445.71" clip-path="url(#clipPath1330)" fill="#333" stroke="#414141" stroke-width="15"></path><path d="m1086.3 802.47v-445.18" clip-path="url(#clipPath1326)" fill="#999" stroke="#b1b1b1" stroke-width=".6"></path><path d="m1080.1 356.75v445.71" clip-path="url(#clipPath1322)" fill="#fff" opacity=".50896" stroke="url(#linearGradient7341)" stroke-width="12"></path></g><g clip-path="url(#clipPath1318)"><path transform="matrix(.53231 0 0 .99811 762.99 -72.147)" d="m649.84 478.85v126.27l31.315-18.94s-35.355-47.982 0-83.338c-27.779-21.466-31.315-23.991-31.315-23.991z" fill="#a1a1a1" filter="url(#filter4165-4)"></path><path d="m1092.5 412.25h34.461" fill="#e6e6e6" stroke="#b4b4b4" stroke-linecap="round" stroke-width="3.5"></path><rect x="1049.1" y="403.18" width="62.143" height="129.29" rx="3" ry="3" fill="#4d4d4d"></rect><rect x="1050" y="467.57" width="60.419" height="3.5355" fill="#e6e6e6"></rect><rect x="1049.8" y="403.9" width="60.613" height="21.071" rx="2.1483" ry="2" fill="url(#linearGradient7738)"></rect><rect x="1050" y="455.41" width="58.811" height="10.119" fill="#333"></rect><rect x="1049.1" y="446.05" width="61.133" height="8.7929" fill="#333"></rect><rect x="1049.1" y="427.63" width="61.133" height="4.5457" fill="#1a1a1a"></rect><rect x="1049.1" y="433.4" width="61.133" height="11.364" fill="#1a1a1a"></rect><rect transform="scale(1,-1)" x="1049.8" y="-426.91" width="60.012" height="2.2612" rx="1.0235" ry=".63958" fill="url(#linearGradient7740)"></rect><rect x="1049.9" y="432.19" width="58.633" height="1.1452" rx="1" ry=".3239" fill="url(#linearGradient7742)"></rect><rect x="1049.9" y="444.91" width="58.633" height=".9666" rx="1" ry=".2734" fill="url(#linearGradient7744)"></rect><rect x="1049.9" y="454.16" width="58.633" height=".60946" rx="1" ry=".17238" fill="url(#linearGradient7746)"></rect><rect transform="scale(1,-1)" x="1049.4" y="-531.39" width="61.118" height="20.321" rx="2.1662" ry="1.9288" fill="url(#linearGradient7748)"></rect><rect transform="scale(1,-1)" x="1050" y="-483.08" width="58.811" height="9.7593" fill="#333"></rect><rect transform="scale(1,-1)" x="1049.1" y="-492.12" width="61.133" height="8.4799" fill="#666"></rect><rect transform="scale(1,-1)" x="1049.1" y="-509.88" width="61.133" height="4.3839" fill="#808080"></rect><rect transform="scale(1,-1)" x="1049.1" y="-504.31" width="61.133" height="10.96" fill="#808080"></rect><rect transform="scale(1,-1)" x="1049.4" y="-512.75" width="60.767" height="2.1808" rx="1.0364" ry=".61681" fill="url(#linearGradient7750)"></rect><rect transform="scale(1,-1)" x="1049.9" y="-505.99" width="60.24" height="1.1044" rx="1.0274" ry=".31237" fill="url(#linearGradient7752)"></rect><rect transform="scale(1,-1)" x="1049.9" y="-493.97" width="59.883" height=".9322" rx="1.0213" ry=".26366" fill="url(#linearGradient7754)"></rect><rect transform="scale(1,-1)" x="1049.9" y="-484.67" width="59.347" height=".58776" rx="1.0122" ry=".16624" fill="url(#linearGradient7756)"></rect></g></g>', 2)
+  ])]);
+}
+const Ve = /* @__PURE__ */ D(Me, [["render", Ge]]), De = T({
+  name: "VAFader",
+  components: {
+    defaultFaderHead: be,
+    defaultFaderBackground: Ve
+  },
+  emits: ["update:modelValue"],
+  setup(t) {
+    const e = g(new ht(t.minValue, t.maxValue)), a = g(0), i = g(t.modelValue), o = g(e.value.getCurvedValue(t.modelValue)), n = g(0), r = g(void 0);
+    return {
+      valueCurve: e,
+      faderContainerY: a,
+      linearValue: i,
+      curvedValue: o,
+      // faderContainer,
+      // faderBackground,
+      // faderHead,
+      faderHeadHeight: n,
+      resizeObserver: r
+    };
+  },
+  props: {
+    modelValue: {
+      required: !0,
+      type: Number
+    },
+    minValue: {
+      required: !0,
+      type: Number
+    },
+    maxValue: {
+      required: !0,
+      type: Number
+    },
+    height: {
+      required: !1,
+      type: Number,
+      default: 200
+    },
+    width: {
+      required: !1,
+      type: Number,
+      default: 46
+    },
+    default: {
+      required: !1,
+      type: Number
+    }
+  },
+  computed: {
+    midValue() {
+      return this.minValue + this.valueRange / 2;
+    },
+    valueRange() {
+      return this.maxValue - this.minValue;
+    },
+    faderDragRange() {
+      return Math.abs(this.height - this.faderHeadHeight);
+    },
+    faderHeadTop() {
+      const t = (this.linearValue - this.minValue) / (this.maxValue - this.minValue);
+      return this.faderDragRange - t * this.faderDragRange;
+    },
+    cssVars() {
+      return {
+        "--fader-height": `${this.height}px`,
+        "--fader-width": `${this.width}px`,
+        "--fader-head-top": `${this.faderHeadTop}px`
+      };
+    }
+  },
+  mounted() {
+    this.resizeObserver = new ResizeObserver((t, e) => {
+      this.faderHeadHeight = this.getFaderHeadHeight();
+    }), this.resizeObserver.observe(this.$refs.faderHead);
+  },
+  unmounted() {
+    this.resizeObserver?.disconnect();
+  },
+  methods: {
+    getContainedImgOrSvg(t) {
+      if (t.children.length == 1) {
+        if (t.children.item(0) instanceof SVGElement)
+          return t.children.item(0);
+        if (t.children.item(0) instanceof HTMLImageElement)
+          return t.children.item(0);
+      }
+    },
+    getFaderHeadHeight() {
+      const t = this.$refs.faderHead, e = this.getContainedImgOrSvg(t);
+      return e ? e.getBoundingClientRect().height : t.getBoundingClientRect().height;
+    },
+    onHeadMouseDown(t) {
+      t.preventDefault(), this.faderContainerY = this.$refs.faderContainer.getBoundingClientRect().y, this.faderHeadHeight = this.getFaderHeadHeight(), document.addEventListener("mousemove", this.onHeadMouseDrag), document.addEventListener("touchmove", this.onHeadTouchDrag), document.addEventListener("mouseup", this.onDocumentMouseUp), document.addEventListener("touchend", this.onDocumentMouseUp);
+    },
+    onDocumentMouseUp() {
+      document.removeEventListener("mousemove", this.onHeadMouseDrag), document.removeEventListener("touchmove", this.onHeadTouchDrag), document.removeEventListener("mouseup", this.onDocumentMouseUp), document.removeEventListener("touchend", this.onDocumentMouseUp);
+    },
+    onHeadDblClick() {
+      const t = typeof this.default > "u" ? this.midValue : this.default;
+      this.$emit("update:modelValue", this.valueCurve.getCurvedValue(t));
+    },
+    onHeadDrag(t) {
+      let e = t - this.faderContainerY;
+      e > this.height ? e = this.height : e < 0 && (e = 0);
+      const i = (this.height - e) / this.height * this.valueRange + this.minValue;
+      this.$emit(
+        "update:modelValue",
+        this.valueCurve.getCurvedValue(i)
+      );
+    },
+    onHeadTouchDrag(t) {
+      t.touches[0] && this.onHeadDrag(t.touches[0].clientY);
+    },
+    onHeadMouseDrag(t) {
+      this.onHeadDrag(t.clientY);
+    }
+  },
+  watch: {
+    modelValue(t) {
+      this.curvedValue = t, this.linearValue = this.valueCurve.getLinearValue(this.curvedValue);
+    },
+    minValue(t) {
+      this.valueCurve = new ht(t, this.maxValue);
+    },
+    maxValue(t) {
+      this.valueCurve = new ht(this.minValue, t);
+    }
+  }
+}), $e = {
+  ref: "faderBackground",
+  class: "fader-background"
+};
+function Ae(t, e, a, i, o, n) {
+  const r = et("defaultFaderBackground"), d = et("defaultFaderHead");
+  return k(), x("div", {
+    ref: "faderContainer",
+    class: "fader-container",
+    style: Z(t.cssVars)
+  }, [
+    c("div", $e, [
+      xt(t.$slots, "faderBackground", {}, () => [
+        X(r)
+      ], !0)
+    ], 512),
+    c("div", {
+      ref: "faderHead",
+      class: "fader-head",
+      onMousedown: e[0] || (e[0] = (...y) => t.onHeadMouseDown && t.onHeadMouseDown(...y)),
+      onTouchstart: e[1] || (e[1] = (...y) => t.onHeadMouseDown && t.onHeadMouseDown(...y)),
+      onDblclick: e[2] || (e[2] = (...y) => t.onHeadDblClick && t.onHeadDblClick(...y))
+    }, [
+      xt(t.$slots, "faderHead", {}, () => [
+        X(d)
+      ], !0)
+    ], 544)
+  ], 4);
+}
+const Pe = /* @__PURE__ */ D(De, [["render", Ae], ["__scopeId", "data-v-9d74edfd"]]), Te = {}, Ue = {
+  width: "50",
+  height: "50",
+  viewBox: "0 0 100 100"
+};
+function Ie(t, e) {
+  return k(), x("svg", Ue, [...e[0] || (e[0] = [
+    ct(`<g data-v-3cef4f4a><g data-v-3cef4f4a><circle class="st0" cx="50%" cy="50%" r="50%" data-v-3cef4f4a></circle><g transform="translate(-20 -20)" data-v-3cef4f4a><g transform="translate(0 -6)" data-v-3cef4f4a><path d="M109.4,78.2c-2.3-2.5-4-5.6-4.6-9c-0.7-3.5-0.5-6.9,0.6-10.2c-2.2-4.6-5.3-8.6-9.2-11.9c-3.3,0.2-6.8-0.4-10-2
+                      s-5.8-4-7.7-6.7c-5.1-1-10.2-1.1-15-0.2c-1.9,2.8-4.6,5.1-7.8,6.6s-6.7,2.1-10.1,1.7c-3.8,3.1-7.1,7.1-9.5,11.6
+                      c0.9,3.2,1.1,6.7,0.4,10.2c-0.9,3.5-2.6,6.5-5,8.9c0.1,5.1,1.1,10.1,3.1,14.6c3.1,1.2,5.9,3.2,8.2,6.2c2.2,2.8,3.5,6.2,4,9.4
+                      c4,3,8.4,5.3,13.5,6.7c2.9-1.6,6.3-2.6,9.9-2.6s6.9,1,9.9,2.8c4.8-1.1,9.5-3.3,13.6-6.4c0.6-3.3,1.9-6.5,4.2-9.3
+                      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({
+  components: {
+    defaultKnob: Ee
+  },
+  setup(t) {
+    const e = {
+      curvedValue: 0,
+      linearValue: 0,
+      unsteppedValue: 0,
+      rotationMax: 3 * Math.PI / 4,
+      dragRange: 70,
+      prevY: -1,
+      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);
+  },
+  props: {
+    modelValue: {
+      required: !0,
+      type: Number
+    },
+    minValue: {
+      required: !0,
+      type: Number
+    },
+    maxValue: {
+      required: !0,
+      type: Number
+    },
+    step: {
+      required: !1,
+      type: Number,
+      default: 0
+    },
+    size: {
+      required: !1,
+      type: Number,
+      default: 60
+    },
+    default: {
+      required: !1,
+      type: Number
+    }
+  },
+  computed: {
+    knobRotation() {
+      return (this.linearValue - this.midValue) / (this.valueRange / 2) * this.rotationMax;
+    },
+    midValue() {
+      return this.minValue + this.valueRange / 2;
+    },
+    valueRange() {
+      return this.maxValue - this.minValue;
+    }
+  },
+  methods: {
+    onKnobMouseDown(t) {
+      t.preventDefault(), document.addEventListener("mousemove", this.onKnobMouseDrag), document.addEventListener("touchmove", this.onKnobTouchDrag), document.addEventListener("mouseup", this.onDocumentMouseUp), document.addEventListener("touchend", this.onDocumentMouseUp);
+    },
+    onDocumentMouseUp() {
+      document.removeEventListener("mousemove", this.onKnobMouseDrag), document.removeEventListener("touchmove", this.onKnobTouchDrag), document.removeEventListener("mouseup", this.onDocumentMouseUp), document.removeEventListener("touchend", this.onDocumentMouseUp), this.prevY = -1;
+    },
+    onKnobDblClick() {
+      const t = typeof this.default > "u" ? this.midValue : this.default;
+      this.unsteppedValue = t, this.$emit("update:modelValue", this.valueCurve.getCurvedValue(t));
+    },
+    roundToStep(t) {
+      if (this.step === 0)
+        throw "step is zero or undefined";
+      const e = Math.round(t / this.step) * this.step;
+      return H(e, this.minValue, this.maxValue);
+    },
+    onKnobDrag(t) {
+      if (this.prevY >= 0) {
+        const e = this.prevY - t;
+        let a = this.unsteppedValue + e / this.dragRange * (this.valueRange / 2);
+        a = H(a, this.minValue, this.maxValue), this.unsteppedValue = a;
+        const i = this.step === 0 ? this.unsteppedValue : this.roundToStep(this.unsteppedValue);
+        this.$emit(
+          "update:modelValue",
+          this.valueCurve.getCurvedValue(i)
+        );
+      }
+    },
+    onKnobTouchDrag(t) {
+      t.touches[0] && (this.onKnobDrag(t.touches[0].pageY), this.prevY = t.touches[0].pageY);
+    },
+    onKnobMouseDrag(t) {
+      this.onKnobDrag(t.pageY), this.prevY = t.pageY;
+    }
+  },
+  watch: {
+    modelValue(t) {
+      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" };
+function Le(t, e, a, i, o, n) {
+  const r = et("default-knob");
+  return k(), x("div", Oe, [
+    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)),
+        class: "knob-container",
+        style: Z(`transform: rotate(${t.knobRotation}rad); width: ${t.size}px; height: ${t.size}px;`)
+      }, [
+        xt(t.$slots, "default", {}, () => [
+          X(r)
+        ], !0)
+      ], 36)
+    ])
+  ]);
+}
+const ze = /* @__PURE__ */ D(We, [["render", Le], ["__scopeId", "data-v-516025e9"]]), Q = 20, tt = -120, Re = 3, Ne = T({
+  name: "VASpectrumAnalyzer",
+  data() {
+    return {
+      continueDrawing: !1,
+      canvas: null,
+      canvasContext: null
+    };
+  },
+  props: {
+    input: {
+      required: !1,
+      type: AudioNode
+    },
+    fftSize: {
+      type: Number,
+      required: !1,
+      default: 1024
+      // todo: this breaks types with options api
+      // validator(n: number) {
+      //   return n >= 32 && n <= 32768 && isPowerOfTwo(n);
+      // }
+    },
+    height: {
+      type: Number,
+      required: !1
+    },
+    width: {
+      type: Number,
+      required: !1,
+      default: 500
+    },
+    fillStyle: {
+      type: String,
+      required: !1,
+      default: "none"
+    },
+    lineColor: {
+      type: String,
+      required: !1
+    },
+    backgroundColor: {
+      type: String,
+      required: !1,
+      default: "black"
+    },
+    gridColor: {
+      type: String,
+      required: !1,
+      default: "gray"
+    },
+    dbColor: {
+      type: String,
+      required: !1,
+      default: "gray"
+    },
+    hzColor: {
+      type: String,
+      required: !1,
+      default: "white"
+    },
+    font: {
+      required: !1,
+      type: String,
+      default: "Helvetica, sans-serif"
+    }
+  },
+  setup(t) {
+    const e = pt(t.fftSize, t.input);
+    return N(() => t.input, e.onInputChanged), {
+      ...e,
+      ...ft()
+    };
+  },
+  computed: {
+    graphWidth() {
+      return this.width;
+    },
+    graphHeight() {
+      return this.height ? this.height : this.width / Re;
+    },
+    cssVars() {
+      return {
+        "--border-color": this.backgroundColor
+      };
+    }
+  },
+  mounted() {
+    this.canvasContext = this.$refs.analyserCanvas.getContext("2d"), this.startRendering(this.drawFrequencyDomain);
+  },
+  methods: {
+    scaleX(t, e, a, i) {
+      const o = 0.30111412225233364;
+      let n = (a - e) / a;
+      n *= 1 - o, n = 1 - n;
+      let r = (t - e) / (a - e);
+      return r = Math.pow(r, n), r < 1 && (r *= i), r;
+    },
+    scaleXLegacy(t, e, a, i) {
+      return Math.floor(
+        Math.log2(t - e) / Math.log2(a - e) * i
+      );
+    },
+    drawFrequencyDomain() {
+      if (this.canvasContext) {
+        const t = 0 - tt, e = this.input ? this.input.context.sampleRate / 2 : 24e3, a = this.getFloatFrequencyData();
+        if (this.canvasContext.clearRect(0, 0, this.graphWidth, this.graphHeight), this.canvasContext.fillStyle = this.backgroundColor, this.canvasContext.fillRect(0, 0, this.graphWidth, this.graphHeight), a) {
+          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);
+          }
+          this.canvasContext.lineTo(this.graphWidth, this.graphHeight), this.canvasContext.closePath(), this.canvasContext.stroke(), this.fillStyle === "solid" && this.canvasContext.fill();
+        }
+        this.drawDbMarkers(), this.drawFrequencyMarkers(e);
+      }
+    },
+    drawDbMarkers() {
+      this.drawDbMarker(-20), this.drawDbMarker(-40), this.drawDbMarker(-60), this.drawDbMarker(-80), this.drawDbMarker(-100);
+    },
+    drawDbMarker(t) {
+      if (this.canvasContext) {
+        const e = this.graphHeight - (tt - t) / tt * this.graphHeight;
+        this.canvasContext.strokeStyle = this.dbColor, this.canvasContext.beginPath(), this.canvasContext.moveTo(0, e), this.canvasContext.lineTo(this.graphWidth, e), this.canvasContext.stroke(), this.canvasContext.font = `12px ${this.font}`, this.canvasContext.fillStyle = this.gridColor, this.canvasContext.fillText(`${t}db`, 10, e);
+      }
+    },
+    drawFrequencyMarkers(t) {
+      this.drawFrequencyMarker(
+        Q,
+        t,
+        this.graphWidth > 300,
+        !1
+      ), this.drawFrequencyMarker(25, t), this.drawFrequencyMarker(50, t, !0), this.drawFrequencyMarker(100, t), this.drawFrequencyMarker(200, t, this.graphWidth > 600), this.drawFrequencyMarker(500, t, this.graphWidth > 300), this.drawFrequencyMarker(1e3, t, this.graphWidth > 600), this.drawFrequencyMarker(1500, t), this.drawFrequencyMarker(2e3, t, !0), this.drawFrequencyMarker(3e3, t, this.graphWidth > 600), this.drawFrequencyMarker(5e3, t, this.graphWidth > 300), this.drawFrequencyMarker(7e3, t, this.graphWidth > 600), this.drawFrequencyMarker(1e4, t, !0), this.drawFrequencyMarker(15e3, t, this.graphWidth > 600), this.drawFrequencyMarker(2e4, t, this.graphWidth > 800);
+    },
+    drawFrequencyMarker(t, e, a = !1, i = !0) {
+      if (this.canvasContext && t >= Q) {
+        const o = this.scaleX(t, Q, e, this.graphWidth);
+        i && (this.canvasContext.strokeStyle = this.gridColor, this.canvasContext.beginPath(), this.canvasContext.moveTo(o, 0), this.canvasContext.lineTo(o, this.graphWidth), this.canvasContext.stroke()), a && (this.canvasContext.font = `14px ${this.font}`, this.canvasContext.fillStyle = this.hzColor ?? V.colors.primary, t < 1e3 ? this.canvasContext.fillText(`${t}hz`, o, 50) : this.canvasContext.fillText(`${t / 1e3}khz`, o, 50));
+      }
+    }
+  }
+}), Be = ["width", "height"];
+function He(t, e, a, i, o, n) {
+  return k(), x("canvas", {
+    width: t.graphWidth,
+    height: t.graphHeight,
+    ref: "analyserCanvas",
+    class: "analyser-canvas",
+    style: Z(t.cssVars)
+  }, null, 12, Be);
+}
+const Fe = /* @__PURE__ */ D(Ne, [["render", He], ["__scopeId", "data-v-670d0fd3"]]), Ye = ["height", "width"], _e = 3, Ke = /* @__PURE__ */ T({
+  __name: "v-a-oscilloscope",
+  props: {
+    input: {
+      type: AudioNode,
+      required: !1
+    },
+    width: {
+      type: Number,
+      required: !1,
+      default: 500
+    },
+    height: {
+      type: Number,
+      required: !1
+    },
+    fftSize: {
+      type: Number,
+      required: !1,
+      default: 2048,
+      validator(t) {
+        return t >= 32 && t <= 32768 && ee(t);
+      }
+    },
+    lineColor: {
+      type: String,
+      required: !1
+    }
+  },
+  setup(t) {
+    const e = t, a = pt(e.fftSize, e.input), i = ft();
+    N(() => e.input, a.onInputChanged);
+    const o = kt("analyserCanvas");
+    let n;
+    Ct(() => {
+      n = o.value?.getContext("2d"), i.startRendering(y);
+    }), At(d);
+    const r = b(() => e.height ? e.height : e.width / _e);
+    function d() {
+      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;
+      n.lineWidth = 2.5, n.strokeStyle = e.lineColor ?? V.colors.primary, n.beginPath();
+      const h = e.width / C.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;
+      }
+      n.lineTo(e.width, f), n.stroke();
+    }
+    return (C, h) => (k(), x("canvas", {
+      ref_key: "analyserCanvas",
+      ref: o,
+      height: r.value,
+      width: t.width,
+      class: "analyser-canvas"
+    }, null, 8, Ye));
+  }
+}), Xe = T({
+  Name: "VAToggleButton",
+  props: {
+    color: {
+      required: !1,
+      type: String,
+      default: "red"
+    },
+    label: {
+      require: !1,
+      type: String,
+      default: ""
+    }
+  },
+  setup(t) {
+    const e = g(!1), a = b(() => ({
+      "--on-color": `${t.color}`
+    }));
+    function i() {
+      e.value = !e.value;
+    }
+    return { on: e, cssVars: a, onButtonClick: i };
+  }
+});
+function Ze(t, e, a, i, o, n) {
+  return k(), x("button", {
+    onClick: e[0] || (e[0] = (...r) => t.onButtonClick && t.onButtonClick(...r)),
+    class: ut([t.on ? "button-on" : "button-off", "button"]),
+    style: Z(t.cssVars)
+  }, R(t.label), 7);
+}
+const je = /* @__PURE__ */ D(Xe, [["render", Ze], ["__scopeId", "data-v-87a8a5ae"]]), Je = T({
+  emits: ["update:modelValue"],
+  props: {
+    modelValue: { type: Object, required: !0 },
+    attackMax: { type: Number, required: !1, default: 1e3 },
+    decayMax: { type: Number, required: !1, default: 1e3 },
+    releaseMax: { type: Number, required: !1, default: 1e3 },
+    width: { type: Number, required: !1, default: 200 },
+    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);
+    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("");
+    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
+        ${M}
+        ${$}
+        ${A}
+        ${P}
+        ${U.value}
+        ${u.value}`, st = `L ${l.value} ${v.value}`, I = `C 
+        ${B}
+        ${F} 
+        ${bt}
+        ${Mt}
+        ${mt.value}
+        ${gt.value}`;
+      return w + nt + O + st + I;
+    });
+    function Wt(w) {
+      w.preventDefault ? w.preventDefault() : w.returnValue = !1, W.value = "attackAnchor";
+    }
+    function Ot(w) {
+      w.preventDefault ? w.preventDefault() : w.returnValue = !1, W.value = "decaySustainAnchor";
+    }
+    function qt(w) {
+      w.preventDefault ? w.preventDefault() : w.returnValue = !1, W.value = "releaseAnchor";
+    }
+    function vt(w, nt) {
+      let O, st, I = 0, q = 0, L = 0, z = 0;
+      if (W.value != "") {
+        switch (W.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;
+            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;
+            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;
+            break;
+        }
+        e.emit("update:modelValue", {
+          attack: t.modelValue.attack + I,
+          decay: t.modelValue.decay + q,
+          sustain: t.modelValue.sustain + L,
+          release: t.modelValue.release + z
+        });
+      }
+      at = w, St = nt;
+    }
+    function Lt(w) {
+      vt(w.pageX, w.pageY);
+    }
+    function zt(w) {
+      w.touches[0] && vt(w.touches[0].pageX, w.touches[0].pageY);
+    }
+    function Rt() {
+      W.value = "";
+    }
+    function Nt() {
+      W.value = "";
+    }
+    return {
+      backgroundColor: a,
+      envelopeColor: i,
+      anchorColor: o,
+      anchorRadius: n,
+      ghostAnchorRadius: r,
+      activeAnchorId: W,
+      startX: s,
+      startY: f,
+      attackPeakX: m,
+      attackPeakY: p,
+      decayEndX: U,
+      decayEndY: u,
+      releaseEndX: mt,
+      releaseEndY: gt,
+      envTime: Ut,
+      containerWidth: Gt,
+      containerHeight: Vt,
+      graphWidth: j,
+      graphHeight: G,
+      envHeight: It,
+      attackTotalWidth: Y,
+      attackWidth: J,
+      decayTotalWidth: _,
+      decayWidth: it,
+      sustainTotalWidth: rt,
+      releaseTotalWidth: yt,
+      releaseWidth: ot,
+      adsrPath: Et,
+      attackAnchorMouseDown: Wt,
+      decaySustainAnchorMouseDown: Ot,
+      releaseAnchorMouseDown: qt,
+      onMouseUp: Rt,
+      onMouseLeave: Nt,
+      onMove: vt,
+      onMouseMove: Lt,
+      onTouchMove: zt
+    };
+  }
+}), Qe = { class: "component-container" }, ta = ["width", "height"], ea = ["width", "height"], aa = ["width", "height", "fill"], ia = ["d", "stroke"], ra = ["cx", "cy", "r", "stroke", "fill"], oa = ["cx", "cy", "r"], na = ["cx", "cy", "r", "stroke", "fill"], sa = ["cx", "cy", "r"], la = ["cx", "cy", "r", "stroke", "fill"], da = ["cx", "cy", "r"], ha = ["cx", "cy", "r", "stroke", "fill"], ca = { class: "value-label-container" }, ua = { class: "value-label" }, pa = { class: "value-label" }, fa = { class: "value-label" }, ma = { class: "value-label" };
+function ga(t, e, a, i, o, n) {
+  return k(), x("div", Qe, [
+    c("div", {
+      class: ut(["graph-container", t.activeAnchorId !== "" ? "dragging" : ""]),
+      onMousemove: e[12] || (e[12] = (...r) => t.onMouseMove && t.onMouseMove(...r)),
+      onTouchmove: e[13] || (e[13] = (...r) => t.onTouchMove && t.onTouchMove(...r)),
+      onMouseup: e[14] || (e[14] = (...r) => t.onMouseUp && t.onMouseUp(...r)),
+      onTouchend: e[15] || (e[15] = (...r) => t.onMouseUp && t.onMouseUp(...r)),
+      onMouseleave: e[16] || (e[16] = (...r) => t.onMouseLeave && t.onMouseLeave(...r)),
+      width: t.containerWidth,
+      height: t.containerHeight
+    }, [
+      (k(), x("svg", {
+        width: t.containerWidth,
+        height: t.containerHeight
+      }, [
+        c("rect", {
+          width: t.containerWidth,
+          height: t.containerHeight,
+          fill: t.backgroundColor
+        }, null, 8, aa),
+        c("path", {
+          id: "envPath",
+          d: t.adsrPath,
+          fill: "transparent",
+          stroke: t.envelopeColor,
+          "stroke-width": "2"
+        }, null, 8, ia),
+        c("circle", {
+          class: "anchor",
+          cx: t.startX,
+          cy: t.startY,
+          r: t.anchorRadius,
+          stroke: t.anchorColor,
+          fill: t.anchorColor
+        }, null, 8, ra),
+        c("circle", {
+          class: "anchor",
+          id: "attackAnchorGhost",
+          onMousedown: e[0] || (e[0] = (...r) => t.attackAnchorMouseDown && t.attackAnchorMouseDown(...r)),
+          onTouchstart: e[1] || (e[1] = (...r) => t.attackAnchorMouseDown && t.attackAnchorMouseDown(...r)),
+          cx: t.attackPeakX,
+          cy: t.attackPeakY,
+          r: t.ghostAnchorRadius,
+          stroke: "rgba(0, 0, 0, 0)",
+          fill: "rgba(0, 0, 0, 0)"
+        }, null, 40, oa),
+        c("circle", {
+          class: "anchor",
+          id: "attackAnchor",
+          onMousedown: e[2] || (e[2] = (...r) => t.attackAnchorMouseDown && t.attackAnchorMouseDown(...r)),
+          onTouchstart: e[3] || (e[3] = (...r) => t.attackAnchorMouseDown && t.attackAnchorMouseDown(...r)),
+          cx: t.attackPeakX,
+          cy: t.attackPeakY,
+          r: t.anchorRadius,
+          stroke: t.anchorColor,
+          fill: t.anchorColor
+        }, null, 40, na),
+        c("circle", {
+          class: "anchor",
+          id: "decaySustainAnchorGhost",
+          onMousedown: e[4] || (e[4] = (...r) => t.decaySustainAnchorMouseDown && t.decaySustainAnchorMouseDown(...r)),
+          onTouchstart: e[5] || (e[5] = (...r) => t.decaySustainAnchorMouseDown && t.decaySustainAnchorMouseDown(...r)),
+          cx: t.decayEndX,
+          cy: t.decayEndY,
+          r: t.ghostAnchorRadius,
+          stroke: "rgba(0, 0, 0, 0)",
+          fill: "rgba(0, 0, 0, 0)"
+        }, null, 40, sa),
+        c("circle", {
+          class: "anchor",
+          id: "decaySustainAnchor",
+          onMousedown: e[6] || (e[6] = (...r) => t.decaySustainAnchorMouseDown && t.decaySustainAnchorMouseDown(...r)),
+          onTouchstart: e[7] || (e[7] = (...r) => t.decaySustainAnchorMouseDown && t.decaySustainAnchorMouseDown(...r)),
+          cx: t.decayEndX,
+          cy: t.decayEndY,
+          r: t.anchorRadius,
+          stroke: t.anchorColor,
+          fill: t.anchorColor
+        }, null, 40, la),
+        c("circle", {
+          class: "anchor",
+          id: "releaseAnchorGhost",
+          onMousedown: e[8] || (e[8] = (...r) => t.releaseAnchorMouseDown && t.releaseAnchorMouseDown(...r)),
+          onTouchstart: e[9] || (e[9] = (...r) => t.releaseAnchorMouseDown && t.releaseAnchorMouseDown(...r)),
+          cx: t.releaseEndX,
+          cy: t.releaseEndY,
+          r: t.ghostAnchorRadius,
+          stroke: "rgba(0, 0, 0, 0)",
+          fill: "rgba(0, 0, 0, 0)"
+        }, null, 40, da),
+        c("circle", {
+          class: "anchor",
+          id: "releaseAnchor",
+          onMousedown: e[10] || (e[10] = (...r) => t.releaseAnchorMouseDown && t.releaseAnchorMouseDown(...r)),
+          onTouchstart: e[11] || (e[11] = (...r) => t.releaseAnchorMouseDown && t.releaseAnchorMouseDown(...r)),
+          cx: t.releaseEndX,
+          cy: t.releaseEndY,
+          r: t.anchorRadius,
+          stroke: t.anchorColor,
+          fill: t.anchorColor
+        }, null, 40, ha)
+      ], 8, ea)),
+      c("div", ca, [
+        c("div", ua, R(Math.round(t.modelValue.attack)) + " ms", 1),
+        c("div", pa, R(Math.round(t.modelValue.decay)) + " ms", 1),
+        c("div", fa, R(t.modelValue.sustain.toFixed(2)), 1),
+        c("div", ma, R(Math.round(t.modelValue.release)) + " ms", 1)
+      ])
+    ], 42, ta)
+  ]);
+}
+const ya = /* @__PURE__ */ D(Je, [["render", ga], ["__scopeId", "data-v-f87b5263"]]), va = {
+  width: "8",
+  height: "12",
+  viewBox: "0 0 8 12",
+  "aria-hidden": "true",
+  class: "num-trianlge"
+}, xa = ["fill"], ka = {
+  key: 0,
+  class: "num-value"
+}, wa = ["min", "max"], Ca = 90, ba = /* @__PURE__ */ T({
+  __name: "v-a-num-box",
+  props: {
+    modelValue: {
+      required: !0,
+      type: Number
+    },
+    minValue: {
+      type: Number,
+      required: !1,
+      default: 0
+    },
+    maxValue: {
+      type: Number,
+      required: !1,
+      default: 99
+    },
+    fixedDecimals: {
+      type: Number,
+      required: !1,
+      default: 0
+    },
+    showBorder: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    },
+    width: {
+      type: Number,
+      required: !1
+    }
+  },
+  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(() => ({
+      "--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);
+    function m() {
+      n.value = !0, r.value = i.modelValue, Yt().then(() => {
+        d.value?.select(), document.addEventListener("mouseup", p);
+      });
+    }
+    function p(v) {
+      y.value.contains(v.target) || $();
+    }
+    function M(v) {
+      v.key === "Enter" && $();
+    }
+    function $() {
+      a(
+        "update:modelValue",
+        H(
+          $t(r.value, i.fixedDecimals),
+          i.minValue,
+          i.maxValue
+        )
+      ), 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));
+    }
+    function P() {
+      o.value = !1, document.removeEventListener("mousemove", l), document.removeEventListener("touchmove", u), document.removeEventListener("mouseup", P), document.removeEventListener("touchend", P), C = -1;
+    }
+    function U(v) {
+      if (o.value = !0, C >= 0) {
+        const B = C - v, F = H(
+          i.modelValue + B / Ca * (f.value / 2),
+          i.minValue,
+          i.maxValue
+        );
+        a("update:modelValue", $t(F, i.fixedDecimals));
+      }
+    }
+    function u(v) {
+      v.touches[0] && (U(v.touches[0].pageY), C = v.touches[0].pageY);
+    }
+    function l(v) {
+      U(v.pageY), C = v.pageY;
+    }
+    return (v, B) => (k(), x("div", {
+      ref_key: "numBox",
+      ref: y,
+      class: ut(["numbox", { "show-border": t.showBorder }]),
+      style: Z(s.value),
+      onMousedown: A,
+      onDblclick: m
+    }, [
+      (k(), x("svg", va, [
+        c("polygon", {
+          points: "0,0 0,12 8,6",
+          fill: h.value
+        }, null, 8, xa)
+      ])),
+      n.value ? Dt("", !0) : (k(), x("span", ka, R(t.modelValue), 1)),
+      n.value ? Ht((k(), x("input", {
+        key: 1,
+        id: "manualInputEl",
+        ref_key: "manualInputEl",
+        ref: d,
+        type: "number",
+        min: t.minValue,
+        max: t.maxValue,
+        "onUpdate:modelValue": B[0] || (B[0] = (F) => r.value = F),
+        onKeydown: M
+      }, null, 40, wa)), [
+        [Ft, r.value]
+      ]) : Dt("", !0)
+    ], 38));
+  }
+}), Ma = /* @__PURE__ */ D(ba, [["__scopeId", "data-v-41e990e3"]]);
+class Sa {
+  _minusInputMin;
+  _plusOutputMin;
+  _dividedByInputRange;
+  _multipliedByOutputRange;
+  input;
+  output;
+  constructor(e, a, i, o, n, r) {
+    this._minusInputMin = new ConstantSourceNode(e, { offset: -a }), this._dividedByInputRange = new GainNode(e, { gain: 1 / (i - a) }), this._multipliedByOutputRange = new GainNode(e, { gain: n - o }), this._plusOutputMin = new ConstantSourceNode(e, { offset: o }), this._minusInputMin.start(), this._plusOutputMin.start(), this.input = new GainNode(e, { gain: 1 }), this.output = new GainNode(e, { gain: 1 }), this._minusInputMin.connect(this.input), this.input.connect(this._dividedByInputRange), this._dividedByInputRange.connect(this._multipliedByOutputRange), this._multipliedByOutputRange.connect(this.output), this._plusOutputMin.connect(this.output), r && this.output.connect(r);
+  }
+  dispose() {
+    this._minusInputMin.stop(), this._plusOutputMin.stop(), this._minusInputMin.disconnect(), this._plusOutputMin.disconnect(), this._dividedByInputRange.disconnect(), this._multipliedByOutputRange.disconnect(), this.input.disconnect(), this.output.disconnect();
+  }
+}
+class Ga {
+  _minusInputMin;
+  _dividedByInputRange;
+  input;
+  output;
+  constructor(e, a, i, o) {
+    this._minusInputMin = new ConstantSourceNode(e, { offset: -a }), this._dividedByInputRange = new GainNode(e, { gain: 1 / (i - a) }), this._minusInputMin.start(), this.input = new GainNode(e, { gain: 1 }), this.output = new GainNode(e, { gain: 1 }), this._minusInputMin.connect(this.input), this.input.connect(this._dividedByInputRange), this.output = this._dividedByInputRange;
+  }
+  dispose() {
+    this._minusInputMin.stop(), this._minusInputMin.disconnect(), this._dividedByInputRange.disconnect(), this.input.disconnect(), this.output.disconnect();
+  }
+}
+const Va = { class: "matrix-row header" }, Da = { class: "matrix-cell source-label" }, $a = /* @__PURE__ */ T({
+  __name: "v-a-mod-matrix",
+  props: {
+    sources: {
+      type: Array,
+      required: !0
+    },
+    destinations: {
+      type: Array,
+      required: !0
+    },
+    loggerNode: {
+      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);
+    });
+    function n(h, s) {
+      h.modAmountNode.gain.setValueAtTime(s, a.value.currentTime);
+    }
+    function r(h, s) {
+      s.ratioSum = new GainNode(h, { 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);
+    }
+    function d(h) {
+      h.sourceCells.forEach((s) => {
+        s.modAmountNode.disconnect();
+      }), h.ratioSum?.disconnect(), h.ratioSum = void 0, h.clamper?.disconnect(), h.clamper = void 0;
+    }
+    function y(h, s) {
+      if (h.length > 0 && (a.value = h[0]?.node.context), !a.value)
+        return;
+      const f = a.value, m = [];
+      h.forEach((p) => {
+        const M = [];
+        s.forEach((A) => {
+          const P = new GainNode(f, { gain: 0 }), U = new Ga(f, p.minValue, p.maxValue);
+          p.node.connect(U.input), U.output.connect(P);
+          const u = {
+            modAmountValue: 0,
+            modAmountNode: P,
+            signalToRatioConverter: U,
+            source: p,
+            destination: A
+          };
+          M.push(u), m.push(u);
+        }), i.value.push(M);
+      }), s.forEach((p) => {
+        const M = {
+          destination: p,
+          sourceCells: m.filter(($) => $.destination === p)
+        };
+        r(f, M), o.push(M);
+      });
+    }
+    function C(h, s) {
+      h.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);
+      }), o = [];
+    }
+    return (h, s) => {
+      const f = et("v-a-num-box");
+      return k(), x("div", null, [
+        c("div", Va, [
+          s[0] || (s[0] = c("div", { class: "matrix-cell source-label" }, null, -1)),
+          (k(!0), x(lt, null, dt(t.destinations, (m, p) => (k(), x("div", {
+            class: "matrix-cell destination-label",
+            key: `header-${p}`
+          }, R(m.name), 1))), 128))
+        ]),
+        (k(!0), x(lt, null, dt(i.value, (m, p) => (k(), x("div", {
+          class: "matrix-row",
+          key: `src-${p}`
+        }, [
+          c("div", Da, R(m[0]?.source.name), 1),
+          (k(!0), x(lt, null, dt(m, (M, $) => (k(), x("div", {
+            class: "matrix-cell",
+            key: `dest-${$}`
+          }, [
+            X(f, {
+              minValue: 0,
+              maxValue: 1,
+              "onUpdate:modelValue": [(A) => n(M, A), (A) => M.modAmountValue = A],
+              modelValue: M.modAmountValue,
+              fixedDecimals: 2,
+              width: 60
+            }, null, 8, ["onUpdate:modelValue", "modelValue"])
+          ]))), 128))
+        ]))), 128))
+      ]);
+    };
+  }
+}), Aa = /* @__PURE__ */ D($a, [["__scopeId", "data-v-c8b43eec"]]), K = g(!1), Pa = T({
+  emits: [
+    "keySlideOn",
+    "keySlideOff",
+    "keyMouseDown",
+    "keyMouseUp",
+    "keyboardKeyDown",
+    "keyboardKeyUp"
+  ],
+  props: {
+    disabled: { type: Boolean, required: !1, default: !1 },
+    enableKeyControls: { type: Boolean, required: !1, default: !0 },
+    startingOctave: { type: Number, required: !1, default: 3 },
+    numOctaves: { type: Number, required: !1, default: 2 },
+    enableKeyboardControls: { type: Boolean, required: !1, default: !0 }
+  },
+  setup(t, e) {
+    const a = "#ff2929", i = [1, 3, 6, 8, 10], o = [
+      "KeyA",
+      "KeyW",
+      "KeyS",
+      "KeyE",
+      "KeyD",
+      "KeyF",
+      "KeyT",
+      "KeyG",
+      "KeyY",
+      "KeyH",
+      "KeyU",
+      "KeyJ",
+      "KeyK",
+      "KeyO",
+      "KeyL"
+    ];
+    let n = t.startingOctave * 12;
+    function r(u) {
+      const l = o.findIndex((v) => v === u.code);
+      if (l > -1) {
+        const v = l + 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);
+      } 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);
+    }
+    function C(u) {
+      const l = document.querySelector(`#key${u}`);
+      l != null && (l.style.background = i.includes(u % 12) ? "black" : "white");
+    }
+    function h(u) {
+      const l = u.target;
+      return parseInt(l.id.replace("key", ""));
+    }
+    function s(u) {
+      if (!K.value) return;
+      const l = h(u);
+      u.stopPropagation(), t.disabled || (y(l), e.emit("keySlideOn", l));
+    }
+    function f(u) {
+      if (!K.value) return;
+      u.stopPropagation();
+      const l = h(u);
+      t.disabled || (C(l), e.emit("keySlideOff", l));
+    }
+    function m(u) {
+      u.stopPropagation(), K.value = !0;
+      const l = h(u);
+      t.disabled || (y(l), e.emit("keyMouseDown", l));
+    }
+    function p(u) {
+      u.stopPropagation(), K.value = !1;
+      const l = h(u);
+      t.disabled || (C(l), e.emit("keyMouseUp", h(u)));
+    }
+    function M() {
+      K.value = !0;
+    }
+    function $() {
+      K.value = !1;
+    }
+    function A() {
+      document.addEventListener("mousedown", M), document.addEventListener("mouseup", $), document.addEventListener("keydown", r), document.addEventListener("keyup", d);
+      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);
+    }
+    function P() {
+      document.removeEventListener("mousedown", M), document.removeEventListener("mouseup", $), document.removeEventListener("keydown", r), document.removeEventListener("keyup", d);
+      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);
+    }
+    function U() {
+      P(), A();
+    }
+    Ct(() => {
+      A();
+    }), _t(() => {
+      P();
+    }), N(() => 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"];
+function Ha(t, e, a, i, o, n) {
+  return k(), x("div", {
+    class: ut(["keyboard", t.disabled ? "disabled" : ""])
+  }, [
+    (k(!0), x(lt, null, dt(t.numOctaves, (r) => (k(), x("div", {
+      key: r,
+      class: "octave-section"
+    }, [
+      c("div", {
+        id: `key${t.startingOctave * 12 + (r - 1) * 12 + 0}`,
+        class: "key"
+      }, [
+        c("div", {
+          id: `key${t.startingOctave * 12 + (r - 1) * 12 + 1}`,
+          class: "black-key"
+        }, null, 8, Ua)
+      ], 8, Ta),
+      c("div", {
+        id: `key${t.startingOctave * 12 + (r - 1) * 12 + 2}`,
+        class: "key"
+      }, [
+        c("div", {
+          id: `key${t.startingOctave * 12 + (r - 1) * 12 + 3}`,
+          class: "black-key"
+        }, null, 8, Ea)
+      ], 8, Ia),
+      c("div", {
+        id: `key${t.startingOctave * 12 + (r - 1) * 12 + 4}`,
+        class: "key"
+      }, null, 8, Wa),
+      c("div", {
+        id: `key${t.startingOctave * 12 + (r - 1) * 12 + 5}`,
+        class: "key"
+      }, [
+        c("div", {
+          id: `key${t.startingOctave * 12 + (r - 1) * 12 + 6}`,
+          class: "black-key"
+        }, null, 8, qa)
+      ], 8, Oa),
+      c("div", {
+        id: `key${t.startingOctave * 12 + (r - 1) * 12 + 7}`,
+        class: "key"
+      }, [
+        c("div", {
+          id: `key${t.startingOctave * 12 + (r - 1) * 12 + 8}`,
+          class: "black-key"
+        }, null, 8, za)
+      ], 8, La),
+      c("div", {
+        id: `key${t.startingOctave * 12 + (r - 1) * 12 + 9}`,
+        class: "key"
+      }, [
+        c("div", {
+          id: `key${t.startingOctave * 12 + (r - 1) * 12 + 10}`,
+          class: "black-key"
+        }, null, 8, Na)
+      ], 8, Ra),
+      c("div", {
+        id: `key${t.startingOctave * 12 + (r - 1) * 12 + 11}`,
+        class: "key"
+      }, null, 8, Ba)
+    ]))), 128))
+  ], 2);
+}
+const Fa = /* @__PURE__ */ D(Pa, [["render", Ha], ["__scopeId", "data-v-25deb579"]]), Ya = {
+  // test,
+  VAAnalogMeter: Qt,
+  VAAudioFileVisualizer: he,
+  VADigitalMeterStereo: fe,
+  VADigitalMeter: xe,
+  VAFader: Pe,
+  VAKnob: ze,
+  VASpectrumAnalyzer: Fe,
+  VAOscilloscope: Ke,
+  VAToggleButton: je,
+  VAEnvelopeAdsr: ya,
+  VANumBox: Ma,
+  VAModMatrix: Aa,
+  VAPiano: Fa
+}, Ka = function(e) {
+  Object.entries(Ya).forEach(([a, i]) => {
+    e.component(a, i);
+  });
+};
+export {
+  Qt as VAAnalogMeter,
+  he as VAAudioFileVisualizer,
+  xe as VADigitalMeter,
+  fe as VADigitalMeterStereo,
+  ya as VAEnvelopeAdsr,
+  Pe as VAFader,
+  ze as VAKnob,
+  Aa as VAModMatrix,
+  Ma as VANumBox,
+  Ke as VAOscilloscope,
+  Fa as VAPiano,
+  Fe as VASpectrumAnalyzer,
+  je as VAToggleButton,
+  Ka as default,
+  V as vueAudioUITheme
+};