audio-mixer-ui 0.1.3 → 0.2.0

package/dist/audio-mixer-ui.js

@@ -1,12 +1,12 @@
-import { ref as B, watch as L, unref as P, onScopeDispose as Fe, readonly as _e, mergeModels as pe, useCssVars as W, computed as _, useTemplateRef as H, useModel as q, createElementBlock as k, openBlock as S, normalizeClass as w, createElementVNode as p, createCommentVNode as ie, Fragment as oe, renderList as fe, normalizeStyle as Ue, renderSlot as ve, toDisplayString as R, onUnmounted as ge, watchEffect as Se, onMounted as Pe, createVNode as x, withCtx as F, createTextVNode as be, withDirectives as Ve, withKeys as qe, vModelText as Le, createBlock as ye } from "vue";
-import { defineStore as Me } from "pinia";
+import { ref as E, watch as D, unref as O, onScopeDispose as Ue, readonly as Se, mergeModels as fe, useCssVars as G, computed as M, useTemplateRef as Z, useModel as j, createElementBlock as S, openBlock as y, normalizeClass as R, createElementVNode as c, createCommentVNode as se, Fragment as le, renderList as ge, normalizeStyle as qe, renderSlot as re, toDisplayString as F, onUnmounted as he, watchEffect as ke, onMounted as be, createVNode as V, withCtx as H, createTextVNode as ye, withDirectives as Re, withKeys as He, vModelText as Le, withModifiers as Te, createBlock as Me } from "vue";
+import { defineStore as _e } from "pinia";
 var Oe = function() {
   if (typeof Map < "u")
     return Map;
   function e(t, a) {
     var n = -1;
-    return t.some(function(s, o) {
-      return s[0] === a ? (n = o, !0) : !1;
+    return t.some(function(s, l) {
+      return s[0] === a ? (n = l, !0) : !1;
     }), n;
   }
   return (
@@ -39,43 +39,43 @@ var Oe = function() {
         this.__entries__.splice(0);
       }, t.prototype.forEach = function(a, n) {
         n === void 0 && (n = null);
-        for (var s = 0, o = this.__entries__; s < o.length; s++) {
-          var u = o[s];
-          a.call(n, u[1], u[0]);
+        for (var s = 0, l = this.__entries__; s < l.length; s++) {
+          var r = l[s];
+          a.call(n, r[1], r[0]);
         }
       }, t;
     }()
   );
-}(), he = typeof window < "u" && typeof document < "u" && window.document === document, le = function() {
+}(), pe = typeof window < "u" && typeof document < "u" && window.document === document, ue = function() {
   return typeof global < "u" && global.Math === Math ? global : typeof self < "u" && self.Math === Math ? self : typeof window < "u" && window.Math === Math ? window : Function("return this")();
 }(), We = function() {
-  return typeof requestAnimationFrame == "function" ? requestAnimationFrame.bind(le) : function(e) {
+  return typeof requestAnimationFrame == "function" ? requestAnimationFrame.bind(ue) : function(e) {
     return setTimeout(function() {
       return e(Date.now());
     }, 1e3 / 60);
   };
-}(), He = 2;
+}(), Ze = 2;
 function je(e, t) {
   var a = !1, n = !1, s = 0;
-  function o() {
-    a && (a = !1, e()), n && f();
+  function l() {
+    a && (a = !1, e()), n && m();
   }
-  function u() {
-    We(o);
+  function r() {
+    We(l);
   }
-  function f() {
-    var d = Date.now();
+  function m() {
+    var u = Date.now();
     if (a) {
-      if (d - s < He)
+      if (u - s < Ze)
         return;
       n = !0;
     } else
-      a = !0, n = !1, setTimeout(u, t);
-    s = d;
+      a = !0, n = !1, setTimeout(r, t);
+    s = u;
   }
-  return f;
+  return m;
 }
-var Ge = 20, Ze = ["top", "right", "bottom", "left", "width", "height", "size", "weight"], Ke = typeof MutationObserver < "u", Ye = (
+var Ge = 20, Ke = ["top", "right", "bottom", "left", "width", "height", "size", "weight"], Ye = typeof MutationObserver < "u", Qe = (
   /** @class */
   function() {
     function e() {
@@ -97,17 +97,17 @@ var Ge = 20, Ze = ["top", "right", "bottom", "left", "width", "height", "size",
         return a.broadcastActive();
       }), t.length > 0;
     }, e.prototype.connect_ = function() {
-      !he || this.connected_ || (document.addEventListener("transitionend", this.onTransitionEnd_), window.addEventListener("resize", this.refresh), Ke ? (this.mutationsObserver_ = new MutationObserver(this.refresh), this.mutationsObserver_.observe(document, {
+      !pe || this.connected_ || (document.addEventListener("transitionend", this.onTransitionEnd_), window.addEventListener("resize", this.refresh), Ye ? (this.mutationsObserver_ = new MutationObserver(this.refresh), this.mutationsObserver_.observe(document, {
         attributes: !0,
         childList: !0,
         characterData: !0,
         subtree: !0
       })) : (document.addEventListener("DOMSubtreeModified", this.refresh), this.mutationEventsAdded_ = !0), this.connected_ = !0);
     }, e.prototype.disconnect_ = function() {
-      !he || !this.connected_ || (document.removeEventListener("transitionend", this.onTransitionEnd_), window.removeEventListener("resize", this.refresh), this.mutationsObserver_ && this.mutationsObserver_.disconnect(), this.mutationEventsAdded_ && document.removeEventListener("DOMSubtreeModified", this.refresh), this.mutationsObserver_ = null, this.mutationEventsAdded_ = !1, this.connected_ = !1);
+      !pe || !this.connected_ || (document.removeEventListener("transitionend", this.onTransitionEnd_), window.removeEventListener("resize", this.refresh), this.mutationsObserver_ && this.mutationsObserver_.disconnect(), this.mutationEventsAdded_ && document.removeEventListener("DOMSubtreeModified", this.refresh), this.mutationsObserver_ = null, this.mutationEventsAdded_ = !1, this.connected_ = !1);
     }, e.prototype.onTransitionEnd_ = function(t) {
-      var a = t.propertyName, n = a === void 0 ? "" : a, s = Ze.some(function(o) {
-        return !!~n.indexOf(o);
+      var a = t.propertyName, n = a === void 0 ? "" : a, s = Ke.some(function(l) {
+        return !!~n.indexOf(l);
       });
       s && this.refresh();
     }, e.getInstance = function() {
@@ -125,59 +125,59 @@ var Ge = 20, Ze = ["top", "right", "bottom", "left", "width", "height", "size",
     });
   }
   return e;
-}, Q = function(e) {
+}, J = function(e) {
   var t = e && e.ownerDocument && e.ownerDocument.defaultView;
-  return t || le;
-}, Re = de(0, 0, 0, 0);
-function ue(e) {
+  return t || ue;
+}, Ae = me(0, 0, 0, 0);
+function ce(e) {
   return parseFloat(e) || 0;
 }
-function ke(e) {
+function Ce(e) {
   for (var t = [], a = 1; a < arguments.length; a++)
     t[a - 1] = arguments[a];
   return t.reduce(function(n, s) {
-    var o = e["border-" + s + "-width"];
-    return n + ue(o);
+    var l = e["border-" + s + "-width"];
+    return n + ce(l);
   }, 0);
 }
-function Qe(e) {
+function Xe(e) {
   for (var t = ["top", "right", "bottom", "left"], a = {}, n = 0, s = t; n < s.length; n++) {
-    var o = s[n], u = e["padding-" + o];
-    a[o] = ue(u);
+    var l = s[n], r = e["padding-" + l];
+    a[l] = ce(r);
   }
   return a;
 }
-function Xe(e) {
+function Je(e) {
   var t = e.getBBox();
-  return de(0, 0, t.width, t.height);
+  return me(0, 0, t.width, t.height);
 }
-function Je(e) {
+function et(e) {
   var t = e.clientWidth, a = e.clientHeight;
   if (!t && !a)
-    return Re;
-  var n = Q(e).getComputedStyle(e), s = Qe(n), o = s.left + s.right, u = s.top + s.bottom, f = ue(n.width), d = ue(n.height);
-  if (n.boxSizing === "border-box" && (Math.round(f + o) !== t && (f -= ke(n, "left", "right") + o), Math.round(d + u) !== a && (d -= ke(n, "top", "bottom") + u)), !tt(e)) {
-    var r = Math.round(f + o) - t, c = Math.round(d + u) - a;
-    Math.abs(r) !== 1 && (f -= r), Math.abs(c) !== 1 && (d -= c);
+    return Ae;
+  var n = J(e).getComputedStyle(e), s = Xe(n), l = s.left + s.right, r = s.top + s.bottom, m = ce(n.width), u = ce(n.height);
+  if (n.boxSizing === "border-box" && (Math.round(m + l) !== t && (m -= Ce(n, "left", "right") + l), Math.round(u + r) !== a && (u -= Ce(n, "top", "bottom") + r)), !at(e)) {
+    var i = Math.round(m + l) - t, d = Math.round(u + r) - a;
+    Math.abs(i) !== 1 && (m -= i), Math.abs(d) !== 1 && (u -= d);
   }
-  return de(s.left, s.top, f, d);
+  return me(s.left, s.top, m, u);
 }
-var et = /* @__PURE__ */ function() {
+var tt = /* @__PURE__ */ function() {
   return typeof SVGGraphicsElement < "u" ? function(e) {
-    return e instanceof Q(e).SVGGraphicsElement;
+    return e instanceof J(e).SVGGraphicsElement;
   } : function(e) {
-    return e instanceof Q(e).SVGElement && typeof e.getBBox == "function";
+    return e instanceof J(e).SVGElement && typeof e.getBBox == "function";
   };
 }();
-function tt(e) {
-  return e === Q(e).document.documentElement;
-}
 function at(e) {
-  return he ? et(e) ? Xe(e) : Je(e) : Re;
+  return e === J(e).document.documentElement;
 }
 function nt(e) {
-  var t = e.x, a = e.y, n = e.width, s = e.height, o = typeof DOMRectReadOnly < "u" ? DOMRectReadOnly : Object, u = Object.create(o.prototype);
-  return Ie(u, {
+  return pe ? tt(e) ? Je(e) : et(e) : Ae;
+}
+function st(e) {
+  var t = e.x, a = e.y, n = e.width, s = e.height, l = typeof DOMRectReadOnly < "u" ? DOMRectReadOnly : Object, r = Object.create(l.prototype);
+  return Ie(r, {
     x: t,
     y: a,
     width: n,
@@ -186,35 +186,35 @@ function nt(e) {
     right: t + n,
     bottom: s + a,
     left: t
-  }), u;
+  }), r;
 }
-function de(e, t, a, n) {
+function me(e, t, a, n) {
   return { x: e, y: t, width: a, height: n };
 }
-var st = (
+var rt = (
   /** @class */
   function() {
     function e(t) {
-      this.broadcastWidth = 0, this.broadcastHeight = 0, this.contentRect_ = de(0, 0, 0, 0), this.target = t;
+      this.broadcastWidth = 0, this.broadcastHeight = 0, this.contentRect_ = me(0, 0, 0, 0), this.target = t;
     }
     return e.prototype.isActive = function() {
-      var t = at(this.target);
+      var t = nt(this.target);
       return this.contentRect_ = t, t.width !== this.broadcastWidth || t.height !== this.broadcastHeight;
     }, e.prototype.broadcastRect = function() {
       var t = this.contentRect_;
       return this.broadcastWidth = t.width, this.broadcastHeight = t.height, t;
     }, e;
   }()
-), rt = (
+), it = (
   /** @class */
   /* @__PURE__ */ function() {
     function e(t, a) {
-      var n = nt(a);
+      var n = st(a);
       Ie(this, { target: t, contentRect: n });
     }
     return e;
   }()
-), it = (
+), ot = (
   /** @class */
   function() {
     function e(t, a, n) {
@@ -226,16 +226,16 @@ var st = (
       if (!arguments.length)
         throw new TypeError("1 argument required, but only 0 present.");
       if (!(typeof Element > "u" || !(Element instanceof Object))) {
-        if (!(t instanceof Q(t).Element))
+        if (!(t instanceof J(t).Element))
           throw new TypeError('parameter 1 is not of type "Element".');
         var a = this.observations_;
-        a.has(t) || (a.set(t, new st(t)), this.controller_.addObserver(this), this.controller_.refresh());
+        a.has(t) || (a.set(t, new rt(t)), this.controller_.addObserver(this), this.controller_.refresh());
       }
     }, e.prototype.unobserve = function(t) {
       if (!arguments.length)
         throw new TypeError("1 argument required, but only 0 present.");
       if (!(typeof Element > "u" || !(Element instanceof Object))) {
-        if (!(t instanceof Q(t).Element))
+        if (!(t instanceof J(t).Element))
           throw new TypeError('parameter 1 is not of type "Element".');
         var a = this.observations_;
         a.has(t) && (a.delete(t), a.size || this.controller_.removeObserver(this));
@@ -250,7 +250,7 @@ var st = (
     }, e.prototype.broadcastActive = function() {
       if (this.hasActive()) {
         var t = this.callbackCtx_, a = this.activeObservations_.map(function(n) {
-          return new rt(n.target, n.broadcastRect());
+          return new it(n.target, n.broadcastRect());
         });
         this.callback_.call(t, a, t), this.clearActive();
       }
@@ -260,7 +260,7 @@ var st = (
       return this.activeObservations_.length > 0;
     }, e;
   }()
-), Ae = typeof WeakMap < "u" ? /* @__PURE__ */ new WeakMap() : new Oe(), Ne = (
+), Ne = typeof WeakMap < "u" ? /* @__PURE__ */ new WeakMap() : new Oe(), $e = (
   /** @class */
   /* @__PURE__ */ function() {
     function e(t) {
@@ -268,8 +268,8 @@ var st = (
         throw new TypeError("Cannot call a class as a function.");
       if (!arguments.length)
         throw new TypeError("1 argument required, but only 0 present.");
-      var a = Ye.getInstance(), n = new it(t, a, this);
-      Ae.set(this, n);
+      var a = Qe.getInstance(), n = new ot(t, a, this);
+      Ne.set(this, n);
     }
     return e;
   }()
@@ -279,46 +279,46 @@ var st = (
   "unobserve",
   "disconnect"
 ].forEach(function(e) {
-  Ne.prototype[e] = function() {
+  $e.prototype[e] = function() {
     var t;
-    return (t = Ae.get(this))[e].apply(t, arguments);
+    return (t = Ne.get(this))[e].apply(t, arguments);
   };
 });
-var ot = function() {
-  return typeof le.ResizeObserver < "u" ? le.ResizeObserver : Ne;
+var lt = function() {
+  return typeof ue.ResizeObserver < "u" ? ue.ResizeObserver : $e;
 }();
-function j(e) {
-  const t = B(0), a = B(0);
+function K(e) {
+  const t = E(0), a = E(0);
   let n = null;
   const s = () => {
     n && (n.disconnect(), n = null);
   };
-  return L(() => P(e), () => {
+  return D(() => O(e), () => {
     s();
-    const u = P(e);
-    if (!u) return;
-    n = new ot((d) => {
-      const r = d[0];
-      r && (t.value = r.contentRect.width, a.value = r.contentRect.height);
-    }), n.observe(u);
-    const f = u.getBoundingClientRect();
-    t.value = f.width, a.value = f.height;
-  }, { immediate: !0 }), Fe(s), {
-    width: _e(t),
-    height: _e(a)
+    const r = O(e);
+    if (!r) return;
+    n = new lt((u) => {
+      const i = u[0];
+      i && (t.value = i.contentRect.width, a.value = i.contentRect.height);
+    }), n.observe(r);
+    const m = r.getBoundingClientRect();
+    t.value = m.width, a.value = m.height;
+  }, { immediate: !0 }), Ue(s), {
+    width: Se(t),
+    height: Se(a)
   };
 }
-const A = (e, t) => {
+const U = (e, t) => {
   const a = e.__vccOpts || e;
   for (const [n, s] of t)
     a[n] = s;
   return a;
-}, lt = {
+}, ut = {
   key: 0,
   class: "level"
-}, ut = {
+}, ct = {
   __name: "AudioSlider",
-  props: /* @__PURE__ */ pe({
+  props: /* @__PURE__ */ fe({
     min: { type: Number, default: 0 },
     max: { type: Number, default: 1 },
     step: { type: Number, default: 0.01 },
@@ -333,71 +333,71 @@ const A = (e, t) => {
   }),
   emits: ["update:value"],
   setup(e) {
-    W((i) => ({
-      "3d436468": h.value,
-      "345b6e65": M.value,
-      "3327b972": V.value,
-      "5ae48cf2": y.value,
-      "01a7bd27": g.value
+    G((f) => ({
+      "3d436468": _.value,
+      "345b6e65": C.value,
+      "3327b972": N.value,
+      "5ae48cf2": B.value,
+      "01a7bd27": L.value
     }));
-    const t = e, a = H("root"), { width: n, height: s } = j(a), o = _(() => Math.min(n.value, s.value)), u = _(() => Math.max(n.value, s.value)), f = _(() => n.value > s.value), d = _(() => f.value ? "h-slide" : "v-slide"), r = q(e, "value"), c = _(() => o.value * 0.8), b = _(() => o.value * t.thumbLength * 0.8), M = _(() => (f.value ? b : c).value + "px"), h = _(() => (f.value ? c : b).value + "px"), y = _(() => o.value * 0.1 + "px"), g = _(() => (u.value - b.value) * (r.value - t.min) / (t.max - t.min) + "px"), V = _(() => f.value ? "90deg" : "0deg"), E = B(!1), G = B(0), $ = (i) => {
-      if (!a.value) return r.value;
-      const v = a.value.getBoundingClientRect(), T = i.touches ? i.touches[0].clientX : i.clientX, I = i.touches ? i.touches[0].clientY : i.clientY;
-      let N;
-      if (f.value) {
-        const z = T - v.left - c.value / 2, ae = v.width - c.value;
-        N = Math.max(0, Math.min(1, z / ae));
+    const t = e, a = Z("root"), { width: n, height: s } = K(a), l = M(() => Math.min(n.value, s.value)), r = M(() => Math.max(n.value, s.value)), m = M(() => n.value > s.value), u = M(() => m.value ? "h-slide" : "v-slide"), i = j(e, "value"), d = M(() => l.value * 0.8), v = M(() => l.value * t.thumbLength * 0.8), C = M(() => (m.value ? v : d).value + "px"), _ = M(() => (m.value ? d : v).value + "px"), B = M(() => l.value * 0.1 + "px"), L = M(() => (r.value - v.value) * (i.value - t.min) / (t.max - t.min) + "px"), N = M(() => m.value ? "90deg" : "0deg"), x = E(!1), g = E(0), w = (f) => {
+      if (!a.value) return i.value;
+      const A = a.value.getBoundingClientRect(), p = f.touches ? f.touches[0].clientX : f.clientX, b = f.touches ? f.touches[0].clientY : f.clientY;
+      let T;
+      if (m.value) {
+        const q = p - A.left - d.value / 2, W = A.width - d.value;
+        T = Math.max(0, Math.min(1, q / W));
       } else {
-        const z = v.bottom - I - c.value / 2, ae = v.height - c.value;
-        N = Math.max(0, Math.min(1, z / ae));
+        const q = A.bottom - b - d.value / 2, W = A.height - d.value;
+        T = Math.max(0, Math.min(1, q / W));
       }
-      const U = t.min + N * (t.max - t.min);
-      return t.step > 0 ? Math.round(U / t.step) * t.step : U;
-    }, J = (i) => {
-      i.preventDefault(), E.value = !0, G.value = r.value, r.value = $(i), a.value && a.value.setPointerCapture && a.value.setPointerCapture(i.pointerId), document.addEventListener("mousemove", D), document.addEventListener("mouseup", Z);
-    }, D = (i) => {
-      E.value && (i.preventDefault(), r.value = $(i));
-    }, Z = (i) => {
-      if (E.value) {
-        if (i.preventDefault(), E.value = !1, a.value && a.value.releasePointerCapture)
+      const $ = t.min + T * (t.max - t.min);
+      return t.step > 0 ? Math.round($ / t.step) * t.step : $;
+    }, k = (f) => {
+      f.preventDefault(), x.value = !0, g.value = i.value, i.value = w(f), a.value && a.value.setPointerCapture && a.value.setPointerCapture(f.pointerId), document.addEventListener("mousemove", I), document.addEventListener("mouseup", Y);
+    }, I = (f) => {
+      x.value && (f.preventDefault(), i.value = w(f));
+    }, Y = (f) => {
+      if (x.value) {
+        if (f.preventDefault(), x.value = !1, a.value && a.value.releasePointerCapture)
           try {
-            a.value.releasePointerCapture(i.pointerId);
+            a.value.releasePointerCapture(f.pointerId);
           } catch {
           }
-        document.removeEventListener("mousemove", D), document.removeEventListener("mouseup", Z);
+        document.removeEventListener("mousemove", I), document.removeEventListener("mouseup", Y);
       }
-    }, ee = (i) => {
-      i.preventDefault(), i.touches.length === 1 && (E.value = !0, G.value = r.value, r.value = $(i), document.addEventListener("touchmove", K, { passive: !1 }), document.addEventListener("touchend", O), document.addEventListener("touchcancel", O));
-    }, K = (i) => {
-      E.value && (i.preventDefault(), i.touches.length === 1 && (r.value = $(i)));
-    }, O = (i) => {
-      E.value && (i.preventDefault(), E.value = !1, document.removeEventListener("touchmove", K), document.removeEventListener("touchend", O), document.removeEventListener("touchcancel", O));
-    }, te = (i) => Math.min(1, Math.max(0, t.level * 10 - i + 1));
-    return (i, v) => (S(), k("div", {
-      class: w(d.value),
+    }, te = (f) => {
+      f.preventDefault(), f.touches.length === 1 && (x.value = !0, g.value = i.value, i.value = w(f), document.addEventListener("touchmove", Q, { passive: !1 }), document.addEventListener("touchend", z), document.addEventListener("touchcancel", z));
+    }, Q = (f) => {
+      x.value && (f.preventDefault(), f.touches.length === 1 && (i.value = w(f)));
+    }, z = (f) => {
+      x.value && (f.preventDefault(), x.value = !1, document.removeEventListener("touchmove", Q), document.removeEventListener("touchend", z), document.removeEventListener("touchcancel", z));
+    }, ae = (f) => Math.min(1, Math.max(0, t.level * 10 - f + 1));
+    return (f, A) => (y(), S("div", {
+      class: R(u.value),
       ref_key: "root",
       ref: a,
-      onMousedown: J,
-      onTouchstart: ee,
+      onMousedown: k,
+      onTouchstart: te,
       style: { userSelect: "none", touchAction: "none" }
     }, [
-      v[0] || (v[0] = p("div", { class: "track" }, null, -1)),
-      e.showLevel ? (S(), k("div", lt, [
-        (S(), k(oe, null, fe(10, (T) => p("div", {
-          class: w(["led", "led" + T])
+      A[0] || (A[0] = c("div", { class: "track" }, null, -1)),
+      e.showLevel ? (y(), S("div", ut, [
+        (y(), S(le, null, ge(10, (p) => c("div", {
+          class: R(["led", "led" + p])
         }, [
-          p("div", {
+          c("div", {
             class: "on",
-            style: Ue({ opacity: te(T) })
+            style: qe({ opacity: ae(p) })
           }, null, 4)
         ], 2)), 64))
-      ])) : ie("", !0),
-      p("div", {
-        class: w(["thumb", { dragging: E.value, [e.colour]: !0, [e.style]: !0 }])
+      ])) : se("", !0),
+      c("div", {
+        class: R(["thumb", { dragging: x.value, [e.colour]: !0, [e.style]: !0 }])
       }, null, 2)
     ], 34));
   }
-}, ce = /* @__PURE__ */ A(ut, [["__scopeId", "data-v-1580ed15"]]), ct = {
+}, de = /* @__PURE__ */ U(ct, [["__scopeId", "data-v-1580ed15"]]), dt = {
   __name: "TitleText",
   props: {
     align: {
@@ -406,23 +406,23 @@ const A = (e, t) => {
     }
   },
   setup(e) {
-    W((f) => ({
-      "5fddb56d": u.value
+    G((m) => ({
+      "5fddb56d": r.value
     }));
-    const t = H("el"), { width: a, height: n } = j(t), s = _(() => Math.min(a.value, n.value)), o = _(() => a.value > n.value ? "h-text" : "v-text"), u = _(() => s.value * 3 / 4 + "px");
-    return (f, d) => (S(), k("div", {
+    const t = Z("el"), { width: a, height: n } = K(t), s = M(() => Math.min(a.value, n.value)), l = M(() => a.value > n.value ? "h-text" : "v-text"), r = M(() => s.value * 3 / 4 + "px");
+    return (m, u) => (y(), S("div", {
       ref_key: "el",
       ref: t,
       class: "outer"
     }, [
-      p("div", {
-        class: w({ [o.value]: !0, [e.align]: !0 })
+      c("div", {
+        class: R({ [l.value]: !0, [e.align]: !0 })
       }, [
-        ve(f.$slots, "default", {}, void 0, !0)
+        re(m.$slots, "default", {}, void 0, !0)
       ], 2)
     ], 512));
   }
-}, $e = /* @__PURE__ */ A(ct, [["__scopeId", "data-v-3ce29e77"]]), dt = {
+}, De = /* @__PURE__ */ U(dt, [["__scopeId", "data-v-3ce29e77"]]), ht = {
   __name: "TriState",
   props: {
     mute: { default: !1 },
@@ -432,37 +432,37 @@ const A = (e, t) => {
   },
   emits: ["update:mute", "update:solo"],
   setup(e) {
-    const t = q(e, "mute"), a = q(e, "solo"), n = H("outer"), { width: s, height: o } = j(n), u = _(() => s.value > o.value * 1.9);
-    function f() {
+    const t = j(e, "mute"), a = j(e, "solo"), n = Z("outer"), { width: s, height: l } = K(n), r = M(() => s.value > l.value * 1.9);
+    function m() {
       t.value = !t.value, a.value = !1;
     }
-    function d() {
+    function u() {
       a.value = !a.value, t.value = !1;
     }
-    return (r, c) => (S(), k("div", {
+    return (i, d) => (y(), S("div", {
       class: "outer",
       ref_key: "outer",
       ref: n
     }, [
-      p("div", {
-        class: w(["solo", { on: a.value }]),
-        onClick: d
+      c("div", {
+        class: R(["solo", { on: a.value }]),
+        onClick: u
       }, null, 2),
-      p("div", {
+      c("div", {
         class: "s-label",
-        onClick: d
-      }, R(u.value ? "SOLO" : "S"), 1),
-      p("div", {
-        class: w(["mute", { on: t.value }]),
-        onClick: f
+        onClick: u
+      }, F(r.value ? "SOLO" : "S"), 1),
+      c("div", {
+        class: R(["mute", { on: t.value }]),
+        onClick: m
       }, null, 2),
-      p("div", {
+      c("div", {
         class: "m-label",
-        onClick: f
-      }, R(u.value ? "MUTE" : "M"), 1)
+        onClick: m
+      }, F(r.value ? "MUTE" : "M"), 1)
     ], 512));
   }
-}, ht = /* @__PURE__ */ A(dt, [["__scopeId", "data-v-143eade0"]]), me = {
+}, mt = /* @__PURE__ */ U(ht, [["__scopeId", "data-v-143eade0"]]), ve = {
   // Enable development UI features (animations, random data, etc.)
   enabled: !1,
   // Specific feature flags
@@ -474,7 +474,7 @@ const A = (e, t) => {
     // Enable other debug/dev features as needed
     debugMode: !1
   }
-}, ea = () => me.enabled, De = (e) => me.enabled && me.features[e], X = Me("audioState", {
+}, aa = () => ve.enabled, ze = (e) => ve.enabled && ve.features[e], ee = _e("audioState", {
   state: () => ({
     // Playback state
     isPlaying: !1,
@@ -548,7 +548,7 @@ const A = (e, t) => {
       });
     }
   }
-}), se = Me("musicData", {
+}), ie = _e("musicData", {
   state: () => ({
     // Musical structure
     beats: [],
@@ -639,7 +639,7 @@ const A = (e, t) => {
       return this.beats.some((a) => a.bar === e && a.repeat === t);
     }
   }
-}), mt = Me("playbackState", {
+}), pt = _e("playbackState", {
   state: () => ({
     // Transport state
     transportState: "stopped",
@@ -749,7 +749,7 @@ const A = (e, t) => {
     }
   }
 });
-function pt(e) {
+function vt(e) {
   return { all: e = e || /* @__PURE__ */ new Map(), on: function(t, a) {
     var n = e.get(t);
     n ? n.push(a) : e.set(t, [a]);
@@ -767,7 +767,7 @@ function pt(e) {
 }
 class ft {
   constructor() {
-    this.eventBus = pt(), this.currentTime = 0, this.isPlaying = !1, this.playbackSpeed = 1, this.masterVolume = 0.75, this.parts = /* @__PURE__ */ new Map(), this.playbackTimer = null, this.lastTimestamp = 0;
+    this.eventBus = vt(), this.currentTime = 0, this.isPlaying = !1, this.playbackSpeed = 1, this.masterVolume = 0.75, this.parts = /* @__PURE__ */ new Map(), this.playbackTimer = null, this.lastTimestamp = 0;
   }
   // Initialize with musical data
   initialize(t) {
@@ -911,124 +911,124 @@ class ft {
     this.stop(), this.eventBus.all.clear(), this.parts.clear();
   }
 }
-const m = new ft();
-function re() {
-  const e = X(), t = se(), a = mt(), n = ({ currentTime: l }) => {
-    e.setCurrentTime(l);
-  }, s = ({ isPlaying: l }) => {
-    e.setPlaybackState(l), a.setTransportState(l ? "playing" : "stopped");
-  }, o = (l) => {
-    l && (e.setCurrentBar(l.bar, l.beat, l.repeat), a.updateLastBarPosition(l.bar));
-  }, u = ({ speed: l }) => {
-    e.setPlaybackSpeed(l);
-  }, f = ({ volume: l }) => {
-    e.setMasterVolume(l);
-  }, d = ({ partName: l, volume: C }) => {
-    e.setPartVolume(l, C);
-  }, r = ({ partName: l, muted: C }) => {
-    e.setPartMuted(l, C);
-  }, c = ({ bars: l }) => {
-    e.setLeadInActive(!0, l);
-  }, b = () => {
+const h = new ft();
+function oe() {
+  const e = ee(), t = ie(), a = pt(), n = ({ currentTime: o }) => {
+    e.setCurrentTime(o);
+  }, s = ({ isPlaying: o }) => {
+    e.setPlaybackState(o), a.setTransportState(o ? "playing" : "stopped");
+  }, l = (o) => {
+    o && (e.setCurrentBar(o.bar, o.beat, o.repeat), a.updateLastBarPosition(o.bar));
+  }, r = ({ speed: o }) => {
+    e.setPlaybackSpeed(o);
+  }, m = ({ volume: o }) => {
+    e.setMasterVolume(o);
+  }, u = ({ partName: o, volume: P }) => {
+    e.setPartVolume(o, P);
+  }, i = ({ partName: o, muted: P }) => {
+    e.setPartMuted(o, P);
+  }, d = ({ bars: o }) => {
+    e.setLeadInActive(!0, o);
+  }, v = () => {
     e.setLeadInActive(!1);
-  }, M = () => {
+  }, C = () => {
     e.setStartingNotesActive(!0);
-  }, h = () => {
+  }, _ = () => {
     e.setStartingNotesActive(!1);
-  }, y = ({ mark: l }) => {
-    a.updateLastPracticeMarkUsed(l);
-  }, g = ({ parts: l }) => {
-    e.initializeParts(l);
-  }, V = ({ finalTime: l }) => {
-    e.setPlaybackState(!1), a.setTransportState("stopped"), console.log(`Song ended at time: ${l}`);
-  }, E = () => {
-    m.on("timeChanged", n), m.on("playbackStateChanged", s), m.on("barChanged", o), m.on("speedChanged", u), m.on("masterVolumeChanged", f), m.on("partVolumeChanged", d), m.on("partMutedChanged", r), m.on("leadInStarted", c), m.on("leadInCompleted", b), m.on("startingNotesStarted", M), m.on("startingNotesCompleted", h), m.on("practiceMarkChanged", y), m.on("initialized", g), m.on("songEnded", V);
-  }, G = () => {
-    m.off("timeChanged", n), m.off("playbackStateChanged", s), m.off("barChanged", o), m.off("speedChanged", u), m.off("masterVolumeChanged", f), m.off("partVolumeChanged", d), m.off("partMutedChanged", r), m.off("leadInStarted", c), m.off("leadInCompleted", b), m.off("startingNotesStarted", M), m.off("startingNotesCompleted", h), m.off("practiceMarkChanged", y), m.off("initialized", g), m.off("songEnded", V);
-  }, $ = () => {
-    Se(() => {
-      const l = e.masterVolume;
-      m.getMasterVolume() !== l && m.setMasterVolume(l);
-    }), Se(() => {
-      const l = e.playbackSpeed;
-      m.getPlaybackSpeed() !== l && m.setPlaybackSpeed(l);
+  }, B = ({ mark: o }) => {
+    a.updateLastPracticeMarkUsed(o);
+  }, L = ({ parts: o }) => {
+    e.initializeParts(o);
+  }, N = ({ finalTime: o }) => {
+    e.setPlaybackState(!1), a.setTransportState("stopped"), console.log(`Song ended at time: ${o}`);
+  }, x = () => {
+    h.on("timeChanged", n), h.on("playbackStateChanged", s), h.on("barChanged", l), h.on("speedChanged", r), h.on("masterVolumeChanged", m), h.on("partVolumeChanged", u), h.on("partMutedChanged", i), h.on("leadInStarted", d), h.on("leadInCompleted", v), h.on("startingNotesStarted", C), h.on("startingNotesCompleted", _), h.on("practiceMarkChanged", B), h.on("initialized", L), h.on("songEnded", N);
+  }, g = () => {
+    h.off("timeChanged", n), h.off("playbackStateChanged", s), h.off("barChanged", l), h.off("speedChanged", r), h.off("masterVolumeChanged", m), h.off("partVolumeChanged", u), h.off("partMutedChanged", i), h.off("leadInStarted", d), h.off("leadInCompleted", v), h.off("startingNotesStarted", C), h.off("startingNotesCompleted", _), h.off("practiceMarkChanged", B), h.off("initialized", L), h.off("songEnded", N);
+  }, w = () => {
+    ke(() => {
+      const o = e.masterVolume;
+      h.getMasterVolume() !== o && h.setMasterVolume(o);
+    }), ke(() => {
+      const o = e.playbackSpeed;
+      h.getPlaybackSpeed() !== o && h.setPlaybackSpeed(o);
     });
-  }, J = (l) => {
-    if (t.loadMusicData(l), m.initialize({
-      beats: l.beats,
-      practiceMarks: l.marks || l.practiceMarks,
-      parts: l.parts
-    }), l.beats && l.beats.length > 0) {
-      const C = l.beats[0];
-      e.setCurrentBar(C.bar, C.beat, C.repeat), m.setTime(C.time);
+  }, k = (o) => {
+    if (t.loadMusicData(o), h.initialize({
+      beats: o.beats,
+      practiceMarks: o.marks || o.practiceMarks,
+      parts: o.parts
+    }), o.beats && o.beats.length > 0) {
+      const P = o.beats[0];
+      e.setCurrentBar(P.bar, P.beat, P.repeat), h.setTime(P.time);
     }
-    E(), $();
-  }, D = () => {
-    m.play();
-  }, Z = () => {
-    m.stop();
-  }, ee = () => {
-    m.pause();
-  }, K = (l) => {
-    m.setTime(l);
-  }, O = (l, C = 0) => {
-    m.setBar(l, C);
-  }, te = (l) => {
-    m.goToPracticeMark(l);
-  }, i = (l) => {
-    m.setPlaybackSpeed(l);
-  }, v = (l) => {
-    m.setMasterVolume(l);
-  }, T = (l, C) => {
-    m.setPartVolume(l, C);
-  }, I = (l, C) => {
-    m.setPartMuted(l, C);
-  }, N = (l = 1) => {
-    m.playLeadIn(l);
-  }, U = () => {
-    m.playStartingNotes();
-  }, z = (l, C = !0, ne = 0) => {
-    C && a.leadInEnabled ? (O(l, ne), N(a.leadInBars)) : (O(l, ne), D());
-  }, ae = (l, C = !0) => {
-    const ne = t.getBarForMark(l);
-    ne && z(ne, C);
+    x(), w();
+  }, I = () => {
+    h.play();
+  }, Y = () => {
+    h.stop();
+  }, te = () => {
+    h.pause();
+  }, Q = (o) => {
+    h.setTime(o);
+  }, z = (o, P = 0) => {
+    h.setBar(o, P);
+  }, ae = (o) => {
+    h.goToPracticeMark(o);
+  }, f = (o) => {
+    h.setPlaybackSpeed(o);
+  }, A = (o) => {
+    h.setMasterVolume(o);
+  }, p = (o, P) => {
+    h.setPartVolume(o, P);
+  }, b = (o, P) => {
+    h.setPartMuted(o, P);
+  }, T = (o = 1) => {
+    h.playLeadIn(o);
+  }, $ = () => {
+    h.playStartingNotes();
+  }, q = (o, P = !0, ne = 0) => {
+    P && a.leadInEnabled ? (z(o, ne), T(a.leadInBars)) : (z(o, ne), I());
+  }, W = (o, P = !0) => {
+    const ne = t.getBarForMark(o);
+    ne && q(ne, P);
   };
-  return ge(() => {
-    G();
+  return he(() => {
+    g();
   }), {
     // Initialization
-    initialize: J,
+    initialize: k,
     // Transport controls
-    play: D,
-    stop: Z,
-    pause: ee,
+    play: I,
+    stop: Y,
+    pause: te,
     // Time controls
-    setTime: K,
-    setBar: O,
+    setTime: Q,
+    setBar: z,
     // Navigation
-    goToPracticeMark: te,
-    setPlaybackSpeed: i,
+    goToPracticeMark: ae,
+    setPlaybackSpeed: f,
     // Volume controls
-    setMasterVolume: v,
-    setPartVolume: T,
-    setPartMuted: I,
+    setMasterVolume: A,
+    setPartVolume: p,
+    setPartMuted: b,
     // Special features
-    playLeadIn: N,
-    playStartingNotes: U,
+    playLeadIn: T,
+    playStartingNotes: $,
     // Complex operations
-    playFromBar: z,
-    playFromMark: ae,
+    playFromBar: q,
+    playFromMark: W,
     // Access to stores for components
     audioState: e,
     musicData: t,
     playbackState: a,
     // Direct access to engine for advanced use
-    audioEngine: m
+    audioEngine: h
   };
 }
-const vt = {
+const gt = {
   __name: "PartControl",
-  props: /* @__PURE__ */ pe({
+  props: /* @__PURE__ */ fe({
     name: {
       type: String,
       required: !0
@@ -1048,188 +1048,200 @@ const vt = {
   }),
   emits: ["update:volume", "update:mute", "update:solo"],
   setup(e) {
-    W((h) => ({
-      "34cdae44": r.value
+    G((_) => ({
+      "34cdae44": i.value
     }));
     const t = e;
-    X();
-    const a = re(), n = q(e, "volume"), s = q(e, "mute"), o = q(e, "solo");
-    L(n, (h) => {
-      a.setPartVolume(t.name, h);
-    }), L(s, (h) => {
-      a.setPartMuted(t.name, h);
+    ee();
+    const a = oe(), n = j(e, "volume"), s = j(e, "mute"), l = j(e, "solo");
+    D(n, (_) => {
+      a.setPartVolume(t.name, _);
+    }), D(s, (_) => {
+      a.setPartMuted(t.name, _);
     });
-    const u = H("el"), { width: f, height: d } = j(u), r = _(() => Math.min(f.value, d.value) + "px"), c = _(
-      () => f.value > d.value ? "mobile" : f.value < 60 ? "tablet" : "desktop"
+    const r = Z("el"), { width: m, height: u } = K(r), i = M(() => Math.min(m.value, u.value) + "px"), d = M(
+      () => m.value > u.value ? "mobile" : m.value < 60 ? "tablet" : "desktop"
     );
-    let b = null;
-    const M = B(0);
-    return Pe(() => {
-      De("randomLevelIndicators") && (b = setInterval(() => {
-        M.value = s.value ? 0 : Math.random() * n.value;
+    let v = null;
+    const C = E(0);
+    return be(() => {
+      ze("randomLevelIndicators") && (v = setInterval(() => {
+        C.value = s.value ? 0 : Math.random() * n.value;
       }, 100));
-    }), ge(() => {
-      b && (clearInterval(b), b = null);
-    }), (h, y) => (S(), k("div", {
+    }), he(() => {
+      v && (clearInterval(v), v = null);
+    }), (_, B) => (y(), S("div", {
       ref_key: "el",
-      ref: u,
-      class: w([c.value, "part"])
+      ref: r,
+      class: R([d.value, "part"])
     }, [
-      x(ht, {
+      V(mt, {
         class: "tri",
         mute: s.value,
-        "onUpdate:mute": y[0] || (y[0] = (g) => s.value = g),
-        solo: o.value,
-        "onUpdate:solo": y[1] || (y[1] = (g) => o.value = g)
+        "onUpdate:mute": B[0] || (B[0] = (L) => s.value = L),
+        solo: l.value,
+        "onUpdate:solo": B[1] || (B[1] = (L) => l.value = L)
       }, null, 8, ["mute", "solo"]),
-      x($e, {
+      V(De, {
         align: "left",
         class: "name"
       }, {
-        default: F(() => [
-          be(R(e.name), 1)
+        default: H(() => [
+          ye(F(e.name), 1)
         ]),
         _: 1
       }),
-      x(ce, {
-        level: M.value,
+      V(de, {
+        level: C.value,
         "show-level": !0,
         class: "vol",
         value: n.value,
-        "onUpdate:value": y[2] || (y[2] = (g) => n.value = g)
+        "onUpdate:value": B[2] || (B[2] = (L) => n.value = L)
       }, null, 8, ["level", "value"])
     ], 2));
   }
-}, gt = /* @__PURE__ */ A(vt, [["__scopeId", "data-v-510493b1"]]), bt = { class: "mark" }, yt = { class: "rpt" }, Mt = { class: "beat-ind" }, _t = { class: "beat" }, St = {
+}, bt = /* @__PURE__ */ U(gt, [["__scopeId", "data-v-510493b1"]]), yt = { class: "mark" }, Mt = { class: "rpt" }, _t = { class: "beat-ind" }, St = { class: "beat" }, kt = {
   key: 1,
   class: "mark-grid-container"
-}, kt = { class: "mark-grid" }, Tt = ["onClick"], Ct = {
+}, Tt = { class: "mark-grid" }, Ct = ["onClick"], xt = {
   __name: "BarInput",
   setup(e) {
-    W((i) => ({
-      "21e4bbc2": G.value,
-      77177731: $.value
+    G((p) => ({
+      a84e79a6: x.value,
+      "4f93d11c": g.value
     }));
-    const t = H("el"), { width: a, height: n } = j(t), s = se(), o = X(), u = re(), f = B(!0);
-    L(() => o.currentBeat, () => {
-      f.value = !0, setTimeout(() => {
-        f.value = !1;
+    const t = Z("el"), a = Z("rpt"), { width: n, height: s } = K(t), l = ie(), r = ee(), m = oe(), u = E("1"), i = E("A"), d = E(0), v = E(2), C = E(!1), _ = E(!1), B = E(!1), L = E(!0);
+    let N = null;
+    D(() => {
+      var p;
+      return ((p = l.beats) == null ? void 0 : p.length) > 0;
+    }, (p) => {
+      console.log(p), p && !C.value && (u.value = r.currentBar.toString(), d.value = r.currentRepeat, v.value = l.getRepeatCountForBar(r.currentBar), k(r.currentBar), C.value = !0);
+    }), D(() => r.currentBar, (p) => {
+      v.value = l.getRepeatCountForBar(p);
+    }), D(u, () => {
+      u.value = u.value.replace(/\D/g, ""), u.value.length > 3 && (u.value = u.value.slice(0, 3));
+    }), D(() => r.currentBar, (p) => {
+      u.value = p.toString(), k(p);
+    }), D(() => r.currentBeat, () => {
+      L.value = !0, setTimeout(() => {
+        L.value = !1;
       }, 50);
+    }), D(_, () => {
+      _.value && A();
     });
-    let d = null;
-    const r = B("1"), c = B("A"), b = B(0), M = B(2), h = B(!1), y = B(!1), g = B(!1);
-    L(() => {
-      var i;
-      return ((i = s.beats) == null ? void 0 : i.length) > 0;
-    }, (i) => {
-      console.log(i), i && !g.value && (r.value = o.currentBar.toString(), b.value = o.currentRepeat, M.value = s.getRepeatCountForBar(o.currentBar), V(o.currentBar), g.value = !0);
-    }), L(() => o.currentBar, (i) => {
-      M.value = s.getRepeatCountForBar(i);
-    }), L(r, () => {
-      r.value = r.value.replace(/\D/g, ""), r.value.length > 3 && (r.value = r.value.slice(0, 3));
-    }), L(() => o.currentBar, (i) => {
-      r.value = i.toString(), V(i);
-    });
-    function V(i) {
-      const v = Object.keys(s.practiceMarks).filter((T) => s.practiceMarks[T] <= i).sort((T, I) => s.practiceMarks[I] - s.practiceMarks[T]);
-      v.length > 0 && (c.value = v[0]);
+    const x = M(() => Math.min(s.value / 2.25, n.value / 4.5) + "px"), g = M(() => Math.min(n.value / 15, s.value / 6.4) + "px"), w = M(() => Object.keys(l.practiceMarks).sort());
+    function k(p) {
+      const b = Object.keys(l.practiceMarks).filter((T) => l.practiceMarks[T] <= p).sort((T, $) => l.practiceMarks[$] - l.practiceMarks[T]);
+      b.length > 0 && (i.value = b[0]);
     }
-    function E() {
-      const i = parseInt(r.value);
-      i && i > 0 && K(i);
+    function I() {
+      const p = parseInt(u.value);
+      p && p > 0 && Y(p);
     }
-    const G = _(() => Math.min(n.value / 2.25, a.value / 4.5) + "px"), $ = _(() => Math.min(a.value / 15, n.value / 6.4) + "px");
-    function J(i) {
-      i.stopPropagation(), h.value = !h.value;
+    function Y(p) {
+      m.setBar(p, 0);
     }
-    function D(i) {
-      var v;
-      (v = t.value) != null && v.contains(i.target) || (h.value = !1, y.value = !1);
+    function te(p, b) {
+      b && b.stopPropagation(), i.value = p, _.value = !1, m.goToPracticeMark(p);
     }
-    Pe(() => {
-      document.addEventListener("click", D), De("beatAnimation") && (d = setInterval(() => {
-        const i = o.currentBeat % s.timeSignature + 1;
-        o.setCurrentBar(o.currentBar, i, o.currentRepeat);
-      }, 800));
-    }), ge(() => {
-      document.removeEventListener("click", D), d && (clearInterval(d), d = null);
-    });
-    function Z(i) {
-      i.stopPropagation(), y.value = M.value > 0 && !y.value;
+    function Q() {
+      v.value > 1 && (B.value = !0), r.currentRepeat < v.value && m.setBar(r.currentBar, r.currentRepeat + 1);
     }
-    const ee = _(() => Object.keys(s.practiceMarks).sort());
-    function K(i) {
-      u.setBar(i, 0);
+    function z() {
+      v.value > 1 && (B.value = !0), r.currentRepeat > 1 && m.setBar(r.currentBar, r.currentRepeat - 1);
     }
-    function O(i, v) {
-      v && v.stopPropagation(), c.value = i, h.value = !1, u.goToPracticeMark(i);
+    function ae(p) {
+      p.stopPropagation(), B.value = !1, _.value = !_.value;
     }
-    function te() {
-      h.value && setTimeout(() => {
-        var T, I;
-        const i = (T = t.value) == null ? void 0 : T.querySelector(".mark-grid"), v = (I = t.value) == null ? void 0 : I.querySelector(".mark-option.selected");
-        if (v && i) {
-          const N = i.getBoundingClientRect(), U = v.getBoundingClientRect(), z = U.left - N.left - N.width / 2 + U.width / 2;
-          i.scrollLeft = Math.max(0, i.scrollLeft + z);
+    function f(p) {
+      var b, T;
+      (b = t.value) != null && b.contains(p.target) || (_.value = !1), (T = a.value) != null && T.contains(p.target) || (B.value = !1);
+    }
+    function A() {
+      _.value && setTimeout(() => {
+        var T, $;
+        const p = (T = t.value) == null ? void 0 : T.querySelector(".mark-grid"), b = ($ = t.value) == null ? void 0 : $.querySelector(".mark-option.selected");
+        if (b && p) {
+          const q = p.getBoundingClientRect(), W = b.getBoundingClientRect(), o = W.left - q.left - q.width / 2 + W.width / 2;
+          p.scrollLeft = Math.max(0, p.scrollLeft + o);
         }
       }, 50);
     }
-    return L(h, () => {
-      h.value && te();
-    }), (i, v) => (S(), k("div", {
+    return be(() => {
+      document.addEventListener("click", f), ze("beatAnimation") && (N = setInterval(() => {
+        const p = r.currentBeat % l.timeSignature + 1;
+        r.setCurrentBar(r.currentBar, p, r.currentRepeat);
+      }, 800));
+    }), he(() => {
+      document.removeEventListener("click", f), N && (clearInterval(N), N = null);
+    }), (p, b) => (y(), S("div", {
       ref_key: "el",
       ref: t,
-      class: w(["outer", { pulse: f.value, "mark-selecting": h.value }])
+      class: R(["outer", { pulse: L.value, "mark-selecting": _.value }])
     }, [
-      v[6] || (v[6] = p("div", { class: "frame" }, null, -1)),
-      p("div", {
-        class: w(["mark-input", { empty: !c.value, edit: h.value }]),
-        onClick: J
+      b[6] || (b[6] = c("div", { class: "frame" }, null, -1)),
+      c("div", {
+        class: R(["mark-input", { empty: !i.value, edit: _.value }]),
+        onClick: ae
       }, [
-        p("div", bt, R(c.value), 1)
+        c("div", yt, F(i.value), 1)
       ], 2),
-      v[7] || (v[7] = p("div", { class: "mark-title" }, "Mark", -1)),
-      h.value ? ie("", !0) : (S(), k(oe, { key: 0 }, [
-        Ve(p("input", {
+      b[7] || (b[7] = c("div", { class: "mark-title" }, "Mark", -1)),
+      _.value ? se("", !0) : (y(), S(le, { key: 0 }, [
+        Re(c("input", {
           type: "text",
           class: "bar-input",
-          "onUpdate:modelValue": v[0] || (v[0] = (T) => r.value = T),
+          "onUpdate:modelValue": b[0] || (b[0] = (T) => u.value = T),
           inputmode: "decimal",
           pattern: "\\d*",
-          onChange: E,
-          onKeyup: qe(E, ["enter"])
+          onChange: I,
+          onKeyup: He(I, ["enter"])
         }, null, 544), [
-          [Le, r.value]
+          [Le, u.value]
         ]),
-        v[3] || (v[3] = p("div", { class: "bar-title" }, "Bar", -1)),
-        p("div", {
-          class: w(["rpt-input", { edit: y.value, available: M.value > 0 }]),
-          onClick: Z
+        b[3] || (b[3] = c("div", { class: "bar-title" }, "Bar", -1)),
+        c("div", {
+          ref_key: "rpt",
+          ref: a,
+          class: R(["rpt-input", { edit: B.value, available: v.value > 1 }])
         }, [
-          p("div", yt, R(P(o).currentRepeat || "-"), 1),
-          v[1] || (v[1] = p("div", { class: "inc" }, null, -1)),
-          v[2] || (v[2] = p("div", { class: "dec" }, null, -1))
+          c("div", Mt, F(O(r).currentRepeat || "-"), 1),
+          (y(), S("svg", {
+            class: R(["inc", { disabled: O(r).currentRepeat >= v.value }]),
+            viewBox: "0 -100 100 100",
+            onClick: Te(Q, ["prevent"])
+          }, b[1] || (b[1] = [
+            c("path", { d: "m10-20 40-60 40 60H10Z" }, null, -1)
+          ]), 2)),
+          (y(), S("svg", {
+            class: R(["dec", { disabled: O(r).currentRepeat <= 1 }]),
+            viewBox: "0 -100 100 100",
+            onClick: Te(z, ["prevent"])
+          }, b[2] || (b[2] = [
+            c("path", { d: "m10-80 40 60 40-60H10Z" }, null, -1)
+          ]), 2))
         ], 2),
-        v[4] || (v[4] = p("div", { class: "rpt-title" }, "Rpt", -1)),
-        p("div", Mt, [
-          p("div", _t, R(P(o).currentBeat), 1)
+        b[4] || (b[4] = c("div", { class: "rpt-title" }, "Rpt", -1)),
+        c("div", _t, [
+          c("div", St, F(O(r).currentBeat), 1)
         ]),
-        v[5] || (v[5] = p("div", { class: "beat-title" }, "Beat", -1))
+        b[5] || (b[5] = c("div", { class: "beat-title" }, "Beat", -1))
       ], 64)),
-      h.value ? (S(), k("div", St, [
-        p("div", kt, [
-          (S(!0), k(oe, null, fe(ee.value, (T) => (S(), k("div", {
+      _.value ? (y(), S("div", kt, [
+        c("div", Tt, [
+          (y(!0), S(le, null, ge(w.value, (T) => (y(), S("div", {
             key: T,
-            class: w(["mark-option", { selected: T === c.value }]),
-            onClick: (I) => O(T, I)
-          }, R(T), 11, Tt))), 128))
+            class: R(["mark-option", { selected: T === i.value }]),
+            onClick: ($) => te(T, $)
+          }, F(T), 11, Ct))), 128))
         ])
-      ])) : ie("", !0)
+      ])) : se("", !0)
     ], 2));
   }
-}, xt = /* @__PURE__ */ A(Ct, [["__scopeId", "data-v-a8c8d1d6"]]), Bt = { class: "title" }, wt = {
+}, Bt = /* @__PURE__ */ U(xt, [["__scopeId", "data-v-0256e5c0"]]), wt = { class: "title" }, Et = {
   __name: "BaseNumericInput",
-  props: /* @__PURE__ */ pe({
+  props: /* @__PURE__ */ fe({
     title: {
       type: String,
       required: !0
@@ -1292,346 +1304,387 @@ const vt = {
   }),
   emits: ["update:value"],
   setup(e) {
-    W((c) => ({
+    G((d) => ({
       "0d0963e0": e.textColor,
       "4ad34b2f": e.backgroundColor,
       "02156786": e.color,
-      "715a9528": d.value,
-      "30d64f7d": f.value,
+      "715a9528": u.value,
+      "30d64f7d": m.value,
       b8fbe65e: e.focusColor
     }));
-    const t = e, a = H("el"), { width: n, height: s } = j(a), o = q(e, "value"), u = B(t.formatValue(t.transformSliderToDisplay(o.value)));
-    L(o, () => {
-      const c = t.transformSliderToDisplay(o.value);
-      u.value = t.formatValue(c);
-    }), L(u, () => {
-      u.value = t.validateInput(u.value), t.maxChars && u.value.length > t.maxChars && (u.value = u.value.slice(0, t.maxChars));
+    const t = e, a = Z("el"), { width: n, height: s } = K(a), l = j(e, "value"), r = E(t.formatValue(t.transformSliderToDisplay(l.value)));
+    D(l, () => {
+      const d = t.transformSliderToDisplay(l.value);
+      r.value = t.formatValue(d);
+    }), D(r, () => {
+      r.value = t.validateInput(r.value), t.maxChars && r.value.length > t.maxChars && (r.value = r.value.slice(0, t.maxChars));
     });
-    const f = _(() => Math.min(s.value / 2.25, n.value / 2.2) + "px"), d = _(() => Math.min(n.value / 3, s.value / 6.4) + "px");
-    function r() {
-      const c = t.parseValue(u.value), b = t.transformDisplayToSlider(c);
-      o.value = Math.min(Math.max(b, t.sliderMin), t.sliderMax);
+    const m = M(() => Math.min(s.value / 2.25, n.value / 2.2) + "px"), u = M(() => Math.min(n.value / 3, s.value / 6.4) + "px");
+    function i() {
+      const d = t.parseValue(r.value), v = t.transformDisplayToSlider(d);
+      l.value = Math.min(Math.max(v, t.sliderMin), t.sliderMax);
     }
-    return (c, b) => (S(), k("div", {
+    return (d, v) => (y(), S("div", {
       class: "outer",
       ref_key: "el",
       ref: a
     }, [
-      b[2] || (b[2] = p("div", { class: "frame" }, null, -1)),
-      Ve(p("input", {
+      v[2] || (v[2] = c("div", { class: "frame" }, null, -1)),
+      Re(c("input", {
         type: "text",
         class: "input",
-        "onUpdate:modelValue": b[0] || (b[0] = (M) => u.value = M),
+        "onUpdate:modelValue": v[0] || (v[0] = (C) => r.value = C),
         inputmode: "decimal",
         pattern: "\\d*",
-        onChange: r
+        onChange: i
       }, null, 544), [
-        [Le, u.value]
+        [Le, r.value]
       ]),
-      p("div", Bt, R(e.title), 1),
-      x(ce, {
+      c("div", wt, F(e.title), 1),
+      V(de, {
         class: "slider",
-        value: o.value,
-        "onUpdate:value": b[1] || (b[1] = (M) => o.value = M),
+        value: l.value,
+        "onUpdate:value": v[1] || (v[1] = (C) => l.value = C),
         "thumb-length": e.thumbLength,
         max: e.sliderMax,
         min: e.sliderMin
       }, null, 8, ["value", "thumb-length", "max", "min"])
     ], 512));
   }
-}, ze = /* @__PURE__ */ A(wt, [["__scopeId", "data-v-79c7a539"]]), Et = {
+}, Fe = /* @__PURE__ */ U(Et, [["__scopeId", "data-v-79c7a539"]]), Pt = {
   __name: "SpeedInput",
   setup(e) {
-    const t = X(), a = re(), n = _({
+    const t = ee(), a = oe(), n = M({
       get: () => Math.log2(t.playbackSpeed) * 0.5 + 0.5,
-      set: (r) => {
-        const c = Math.pow(2, r * 2 - 1);
-        a.setPlaybackSpeed(c);
+      set: (i) => {
+        const d = Math.pow(2, i * 2 - 1);
+        a.setPlaybackSpeed(d);
       }
-    }), s = (r) => Math.floor(Math.pow(2, r * 2 - 1) * 100 + 0.5) + "", o = (r) => parseFloat(r), u = (r) => r.replace(/\D/g, ""), f = (r) => r, d = (r) => {
-      const c = Math.log2(r / 100) * 0.5 + 0.5;
-      return Math.min(Math.max(c, 0), 1);
+    }), s = (i) => Math.floor(Math.pow(2, i * 2 - 1) * 100 + 0.5) + "", l = (i) => parseFloat(i), r = (i) => i.replace(/\D/g, ""), m = (i) => i, u = (i) => {
+      const d = Math.log2(i / 100) * 0.5 + 0.5;
+      return Math.min(Math.max(d, 0), 1);
     };
-    return (r, c) => (S(), ye(ze, {
+    return (i, d) => (y(), Me(Fe, {
       value: n.value,
-      "onUpdate:value": c[0] || (c[0] = (b) => n.value = b),
+      "onUpdate:value": d[0] || (d[0] = (v) => n.value = v),
       title: "Speed",
       color: "#336",
       "text-color": "#aad",
       "format-value": s,
-      "parse-value": o,
-      "validate-input": u,
-      "transform-slider-to-display": f,
-      "transform-display-to-slider": d,
+      "parse-value": l,
+      "validate-input": r,
+      "transform-slider-to-display": m,
+      "transform-display-to-slider": u,
       "thumb-length": 2,
       "max-chars": 3
     }, null, 8, ["value"]));
   }
-}, Pt = {
+}, Vt = {
   __name: "TimeInput",
   setup(e) {
-    const t = X(), a = se(), n = re(), s = (r) => r.toFixed(1), o = (r) => parseFloat(r), u = (r) => r.replace(/[^0-9.]/g, ""), f = (r) => r, d = (r) => r;
-    return (r, c) => (S(), ye(ze, {
-      value: P(t).currentTime,
+    const t = ee(), a = ie(), n = oe(), s = (i) => i.toFixed(1), l = (i) => parseFloat(i), r = (i) => i.replace(/[^0-9.]/g, ""), m = (i) => i, u = (i) => i;
+    return (i, d) => (y(), Me(Fe, {
+      value: O(t).currentTime,
       "onUpdate:value": [
-        c[0] || (c[0] = (b) => P(t).currentTime = b),
-        P(n).setTime
+        d[0] || (d[0] = (v) => O(t).currentTime = v),
+        O(n).setTime
       ],
       title: "Time",
       color: "#344",
       "focus-color": "#556868",
       "text-color": "#acc",
       "background-color": "#111117",
-      "slider-max": P(a).totalDuration,
+      "slider-max": O(a).totalDuration,
       "slider-min": 0,
       "format-value": s,
-      "parse-value": o,
-      "validate-input": u,
-      "transform-slider-to-display": f,
-      "transform-display-to-slider": d,
+      "parse-value": l,
+      "validate-input": r,
+      "transform-slider-to-display": m,
+      "transform-display-to-slider": u,
       "thumb-length": 2
     }, null, 8, ["value", "onUpdate:value", "slider-max"]));
   }
-}, Vt = { class: "inner" }, Lt = {
+}, Rt = { class: "inner" }, Lt = {
   __name: "AudioButton",
   setup(e) {
-    const t = B(!1), a = () => t.value = !0, n = () => t.value = !1;
-    return (s, o) => (S(), k("div", {
-      class: w(["button-outer", { down: t.value }]),
+    const t = E(!1), a = () => t.value = !0, n = () => t.value = !1;
+    return (s, l) => (y(), S("div", {
+      class: R(["button-outer", { down: t.value }]),
       onPointerdown: a,
       onPointerup: n,
       onPointerleave: n
     }, [
-      p("div", Vt, [
-        ve(s.$slots, "default", {}, void 0, !0)
+      c("div", Rt, [
+        re(s.$slots, "default", {}, void 0, !0)
       ])
     ], 34));
   }
-}, Y = /* @__PURE__ */ A(Lt, [["__scopeId", "data-v-0d7af06e"]]), Ot = { class: "outer" }, It = { class: "buttons" }, Rt = {
+}, X = /* @__PURE__ */ U(Lt, [["__scopeId", "data-v-0d7af06e"]]), Ot = { class: "outer" }, It = { class: "title" }, At = { class: "buttons" }, Nt = {
   class: "icon",
   viewBox: "0 0 48 48"
-}, At = ["d"], Nt = {
+}, $t = ["d"], Dt = {
   __name: "MixerControls",
   setup(e) {
-    const t = se(), a = X(), n = re();
+    const t = ie(), a = ee(), n = oe();
     function s() {
       a.isPlaying ? n.stop() : n.play();
     }
-    function o() {
-      const M = a.currentTime, h = t.beats.filter((g) => g.beat === 1).sort((g, V) => g.time - V.time);
-      let y = null;
-      for (let g = h.length - 1; g >= 0; g--)
-        if (h[g].time < M) {
-          y = h[g];
+    function l() {
+      const x = a.currentTime, g = t.beats.filter((k) => k.beat === 1).sort((k, I) => k.time - I.time);
+      let w = null;
+      for (let k = g.length - 1; k >= 0; k--)
+        if (g[k].time < x) {
+          w = g[k];
           break;
         }
-      y && n.setBar(y.bar, y.repeat);
+      w && n.setBar(w.bar, w.repeat);
     }
-    function u() {
-      const M = a.currentTime, h = t.beats.filter((g) => g.beat === 1).sort((g, V) => g.time - V.time);
-      let y = null;
-      for (let g = 0; g < h.length; g++)
-        if (h[g].time > M) {
-          y = h[g];
+    function r() {
+      const x = a.currentTime, g = t.beats.filter((k) => k.beat === 1).sort((k, I) => k.time - I.time);
+      let w = null;
+      for (let k = 0; k < g.length; k++)
+        if (g[k].time > x) {
+          w = g[k];
           break;
         }
-      y && n.setBar(y.bar, y.repeat);
+      w && n.setBar(w.bar, w.repeat);
     }
-    function f() {
+    function m() {
       n.playStartingNotes();
     }
-    const d = B(!1), r = B(!0);
-    function c() {
+    const u = E(!1), i = E(!0), d = E(!1), v = E(null);
+    function C() {
       d.value = !d.value;
     }
-    function b() {
-      r.value = !r.value;
+    function _() {
+      d.value = !1;
     }
-    return (M, h) => (S(), k("div", Ot, [
-      x($e, {
-        class: "title",
-        align: "centre"
-      }, {
-        default: F(() => [
-          be(R(P(t).title), 1)
-        ]),
-        _: 1
-      }),
-      x(ce, {
+    function B(x) {
+      v.value && !v.value.contains(x.target) && _();
+    }
+    be(() => {
+      document.addEventListener("click", B);
+    }), he(() => {
+      document.removeEventListener("click", B);
+    });
+    function L() {
+      u.value = !u.value;
+    }
+    function N() {
+      i.value = !i.value;
+    }
+    return (x, g) => (y(), S("div", Ot, [
+      c("div", It, [
+        V(De, {
+          class: "text",
+          align: "centre"
+        }, {
+          default: H(() => [
+            ye(F(O(t).title), 1)
+          ]),
+          _: 1
+        }),
+        c("div", {
+          class: "menu-container",
+          ref_key: "menuRef",
+          ref: v
+        }, [
+          (y(), S("svg", {
+            class: "menu",
+            viewBox: "0 -960 960 960",
+            onClick: C
+          }, g[1] || (g[1] = [
+            c("path", { d: "M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" }, null, -1)
+          ]))),
+          d.value && x.$slots.menu ? (y(), S("div", {
+            key: 0,
+            class: "dropdown-menu",
+            onClick: _
+          }, [
+            re(x.$slots, "menu", {}, void 0, !0)
+          ])) : se("", !0)
+        ], 512)
+      ]),
+      V(de, {
         class: "main",
         colour: "red",
-        modelValue: P(a).masterVolume,
-        "onUpdate:modelValue": h[0] || (h[0] = (y) => P(a).masterVolume = y)
+        modelValue: O(a).masterVolume,
+        "onUpdate:modelValue": g[0] || (g[0] = (w) => O(a).masterVolume = w)
       }, null, 8, ["modelValue"]),
-      x(ce, {
+      V(de, {
         class: "tick",
         colour: "blue"
       }),
-      h[6] || (h[6] = p("div", { class: "main-t" }, "Main", -1)),
-      h[7] || (h[7] = p("div", { class: "tick-t" }, "Tick", -1)),
-      x(xt, { class: "bar" }),
-      x(Pt, { class: "time" }),
-      x(Et, { class: "speed" }),
-      p("div", It, [
-        x(Y, {
+      g[7] || (g[7] = c("div", { class: "main-t" }, "Main", -1)),
+      g[8] || (g[8] = c("div", { class: "tick-t" }, "Tick", -1)),
+      V(Bt, { class: "bar" }),
+      V(Vt, { class: "time" }),
+      V(Pt, { class: "speed" }),
+      c("div", At, [
+        V(X, {
           class: "button",
-          onClick: o
+          onClick: l
         }, {
-          default: F(() => h[1] || (h[1] = [
-            p("svg", {
+          default: H(() => g[2] || (g[2] = [
+            c("svg", {
               class: "icon",
               viewBox: "0 0 48 48"
             }, [
-              p("path", { d: "M11 36V12h3v24Zm26 0L19.7 24 37 12Z" })
+              c("path", { d: "M11 36V12h3v24Zm26 0L19.7 24 37 12Z" })
             ], -1)
           ])),
           _: 1,
-          __: [1]
+          __: [2]
         }),
-        x(Y, {
+        V(X, {
           class: "button",
           onClick: s
         }, {
-          default: F(() => [
-            (S(), k("svg", Rt, [
-              p("path", {
-                d: P(a).isPlaying ? "M27.4 35.4V12.6h8v22.8Zm-14.8 0V12.6h8.05v22.8Z" : "M16 37.85v-28l22 14Z"
-              }, null, 8, At)
+          default: H(() => [
+            (y(), S("svg", Nt, [
+              c("path", {
+                d: O(a).isPlaying ? "M27.4 35.4V12.6h8v22.8Zm-14.8 0V12.6h8.05v22.8Z" : "M16 37.85v-28l22 14Z"
+              }, null, 8, $t)
             ]))
           ]),
           _: 1
         }),
-        x(Y, {
+        V(X, {
           class: "button",
-          onClick: u
+          onClick: r
         }, {
-          default: F(() => h[2] || (h[2] = [
-            p("svg", {
+          default: H(() => g[3] || (g[3] = [
+            c("svg", {
               class: "icon",
               viewBox: "0 0 48 48"
             }, [
-              p("path", { d: "M34 36V12h3v24Zm-23 0V12l17.3 12Z" })
+              c("path", { d: "M34 36V12h3v24Zm-23 0V12l17.3 12Z" })
             ], -1)
           ])),
           _: 1,
-          __: [2]
+          __: [3]
         }),
-        x(Y, {
+        V(X, {
           class: "button",
-          onClick: c
+          onClick: L
         }, {
-          default: F(() => [
-            (S(), k("svg", {
-              class: w(["icon", d.value ? "on" : "off"]),
+          default: H(() => [
+            (y(), S("svg", {
+              class: R(["icon", u.value ? "on" : "off"]),
               viewBox: "-128 -128 768 768"
-            }, h[3] || (h[3] = [
-              p("path", { d: "m 463.84136,154.89339 c -6.42,-6.42 -16.83,-6.42 -23.251,0 -71.31197,70.35135 -136.61146,132.25426 -208.741,199.7 h -105.82 c 23.35495,-140.1063 67.13099,-217.59716 120.727,-318.357996 0.86,-0.803 2.209,-0.801 3.067,-10e-4 20.50653,37.383983 48.51152,88.812606 72.26194,147.190756 1.186,9.002 12.2214,17.4338 23.3242,11.71391 9.002,-1.186 11.1594,-12.2324 9.9724,-21.2344 -21.69905,-53.89113 -30.43965,-85.078342 -83.11454,-161.702266 -13.446,-12.55299965 -34.508,-12.55699965 -47.954,10e-4 C 126.80877,149.30021 96.099465,324.74626 77.091365,474.25139 c -2.829,21.473 13.907,40.535 35.543995,40.535 h 271.311 c 21.661,0 38.373,-19.087 35.544,-40.535 -8.26237,-52.34207 -14.88466,-100.7074 -24.7871,-157.02622 -6.40949,-11.78839 -8.3911,-14.9907 -17.4031,-13.8037 -9.002,1.186 -13.59751,8.0528 -12.41051,17.0548 l 5.66371,34.11712 h -83.159 c 64.35441,-63.86663 129.29308,-130.29894 176.448,-176.449 6.42,-6.42 6.42,-16.83 -10e-4,-23.251 z m -88.956,232.582 12.004,91.074 c 0.112,0.846 -0.148,1.701 -0.708,2.341 -0.566,0.645 -1.38,1.014 -2.235,1.014 h -271.311 c -0.855,0 -1.668,-0.369 -2.231,-1.011 -0.564,-0.643 -0.824,-1.499 -0.712,-2.347 l 12.003,-91.072 h 253.19 z" }, null, -1)
+            }, g[4] || (g[4] = [
+              c("path", { d: "m 463.84136,154.89339 c -6.42,-6.42 -16.83,-6.42 -23.251,0 -71.31197,70.35135 -136.61146,132.25426 -208.741,199.7 h -105.82 c 23.35495,-140.1063 67.13099,-217.59716 120.727,-318.357996 0.86,-0.803 2.209,-0.801 3.067,-10e-4 20.50653,37.383983 48.51152,88.812606 72.26194,147.190756 1.186,9.002 12.2214,17.4338 23.3242,11.71391 9.002,-1.186 11.1594,-12.2324 9.9724,-21.2344 -21.69905,-53.89113 -30.43965,-85.078342 -83.11454,-161.702266 -13.446,-12.55299965 -34.508,-12.55699965 -47.954,10e-4 C 126.80877,149.30021 96.099465,324.74626 77.091365,474.25139 c -2.829,21.473 13.907,40.535 35.543995,40.535 h 271.311 c 21.661,0 38.373,-19.087 35.544,-40.535 -8.26237,-52.34207 -14.88466,-100.7074 -24.7871,-157.02622 -6.40949,-11.78839 -8.3911,-14.9907 -17.4031,-13.8037 -9.002,1.186 -13.59751,8.0528 -12.41051,17.0548 l 5.66371,34.11712 h -83.159 c 64.35441,-63.86663 129.29308,-130.29894 176.448,-176.449 6.42,-6.42 6.42,-16.83 -10e-4,-23.251 z m -88.956,232.582 12.004,91.074 c 0.112,0.846 -0.148,1.701 -0.708,2.341 -0.566,0.645 -1.38,1.014 -2.235,1.014 h -271.311 c -0.855,0 -1.668,-0.369 -2.231,-1.011 -0.564,-0.643 -0.824,-1.499 -0.712,-2.347 l 12.003,-91.072 h 253.19 z" }, null, -1)
             ]), 2))
           ]),
           _: 1
         }),
-        x(Y, {
+        V(X, {
           class: "button",
-          onClick: b
+          onClick: N
         }, {
-          default: F(() => [
-            (S(), k("svg", {
-              class: w(["icon", r.value ? "on" : "off"]),
+          default: H(() => [
+            (y(), S("svg", {
+              class: R(["icon", i.value ? "on" : "off"]),
               viewBox: "-2 -2 28 28"
-            }, h[4] || (h[4] = [
-              p("path", { d: "m 8.9838564,1.5166215 v 2 h 5.9999996 v -2 z m 2.9999996,3 c -4.9699996,0 -8.9999996,4.0299999 -8.9999996,8.9999995 0,4.97 4.02,9 8.9999996,9 4.98,0 9,-4.03 9,-9 0,-2.12 -0.740703,-4.0693745 -1.970703,-5.6093745 l 1.419922,-1.421875 c -0.43,-0.51 -0.900156,-0.9882031 -1.410156,-1.4082031 l -1.419922,1.4199219 c -1.55,-1.24 -3.499141,-1.9804688 -5.619141,-1.9804688 z m -1.789062,4.7480469 6,4.4999996 -6,4.5 z" }, null, -1)
+            }, g[5] || (g[5] = [
+              c("path", { d: "m 8.9838564,1.5166215 v 2 h 5.9999996 v -2 z m 2.9999996,3 c -4.9699996,0 -8.9999996,4.0299999 -8.9999996,8.9999995 0,4.97 4.02,9 8.9999996,9 4.98,0 9,-4.03 9,-9 0,-2.12 -0.740703,-4.0693745 -1.970703,-5.6093745 l 1.419922,-1.421875 c -0.43,-0.51 -0.900156,-0.9882031 -1.410156,-1.4082031 l -1.419922,1.4199219 c -1.55,-1.24 -3.499141,-1.9804688 -5.619141,-1.9804688 z m -1.789062,4.7480469 6,4.4999996 -6,4.5 z" }, null, -1)
             ]), 2))
           ]),
           _: 1
         }),
-        x(Y, {
+        V(X, {
           class: "button",
-          onClick: f
+          onClick: m
         }, {
-          default: F(() => h[5] || (h[5] = [
-            p("svg", {
+          default: H(() => g[6] || (g[6] = [
+            c("svg", {
               class: "icon",
               viewBox: "0 -960 960 960"
             }, [
-              p("path", { d: "m 306.66667,-360 q -44,0 -75.33334,-31.33333 Q 200,-422.66667 200,-466.66667 q 0,-44 31.33333,-75.33333 31.33334,-31.33333 75.33334,-31.33333 15.33333,0 28.33333,3.66666 13,3.66667 25,11 V -840 h 160 v 106.66667 H 413.33333 v 266.66666 q 0,44 -31.33333,75.33334 Q 350.66667,-360 306.66667,-360 Z" }),
-              p("path", { d: "m 546.66667,-120 q -44,0 -75.33334,-31.33333 Q 440,-182.66667 440,-226.66667 q 0,-44 31.33333,-75.33333 31.33334,-31.33333 75.33334,-31.33333 15.33333,0 28.33333,3.66666 13,3.66667 25,11 V -600 h 160 v 106.66667 H 653.33333 v 266.66666 q 0,44 -31.33333,75.33334 Q 590.66667,-120 546.66667,-120 Z" })
+              c("path", { d: "m 306.66667,-360 q -44,0 -75.33334,-31.33333 Q 200,-422.66667 200,-466.66667 q 0,-44 31.33333,-75.33333 31.33334,-31.33333 75.33334,-31.33333 15.33333,0 28.33333,3.66666 13,3.66667 25,11 V -840 h 160 v 106.66667 H 413.33333 v 266.66666 q 0,44 -31.33333,75.33334 Q 350.66667,-360 306.66667,-360 Z" }),
+              c("path", { d: "m 546.66667,-120 q -44,0 -75.33334,-31.33333 Q 440,-182.66667 440,-226.66667 q 0,-44 31.33333,-75.33333 31.33334,-31.33333 75.33334,-31.33333 15.33333,0 28.33333,3.66666 13,3.66667 25,11 V -600 h 160 v 106.66667 H 653.33333 v 266.66666 q 0,44 -31.33333,75.33334 Q 590.66667,-120 546.66667,-120 Z" })
             ], -1)
           ])),
           _: 1,
-          __: [5]
+          __: [6]
         })
       ])
     ]));
   }
-}, $t = /* @__PURE__ */ A(Nt, [["__scopeId", "data-v-439bd19c"]]), Dt = { class: "container" }, zt = { class: "panel" }, Te = 40, Ce = 40, xe = 100, Ft = 50, Be = 400, we = 570, Ee = 570, Ut = 350, qt = 330, Wt = 360, Ht = 360, jt = {
+}, zt = /* @__PURE__ */ U(Dt, [["__scopeId", "data-v-a93a2793"]]), Ft = { class: "container" }, Ut = { class: "panel" }, xe = 40, Be = 40, we = 100, qt = 50, Ee = 400, Pe = 570, Ve = 570, Ht = 350, Wt = 330, Zt = 360, jt = 360, Gt = {
   __name: "MixerLayout",
   setup(e) {
-    W((d) => ({
-      "2540622b": o.value,
-      "25398f45": u.value,
-      fc452918: f.value
+    G((u) => ({
+      "6bce51ec": l.value,
+      "6bdbf7b8": r.value,
+      78139275: m.value
     }));
-    const t = se(), a = H("container"), { width: n } = j(a), s = _(() => {
-      const d = n.value, r = t.parts.length;
-      return d < 640 || d < Te * r + Be ? 0 : d < Ce * r + we ? 1 : d < xe * r + Ee ? 2 : 3;
-    }), o = _(() => {
+    const t = ie(), a = Z("container"), { width: n } = K(a), s = M(() => {
+      const u = n.value, i = t.parts.length;
+      return u < 640 || u < xe * i + Ee ? 0 : u < Be * i + Pe ? 1 : u < we * i + Ve ? 2 : 3;
+    }), l = M(() => {
       switch (s.value) {
         case 0:
-          return `${Ut}px ` + `${Ft}px `.repeat(t.parts.length);
+          return `${Ht}px ` + `${qt}px `.repeat(t.parts.length);
         case 1:
-          return `${qt}px`;
-        case 2:
           return `${Wt}px`;
+        case 2:
+          return `${Zt}px`;
         default:
-          return `${Ht}px`;
+          return `${jt}px`;
       }
-    }), u = _(() => {
+    }), r = M(() => {
       switch (s.value) {
         case 0:
           return "100vw";
         case 1:
-          return `${Te}px `.repeat(t.parts.length) + `${Be}px`;
+          return `${xe}px `.repeat(t.parts.length) + `${Ee}px`;
         case 2:
-          return `${Ce}px `.repeat(t.parts.length) + `${we}px`;
+          return `${Be}px `.repeat(t.parts.length) + `${Pe}px`;
         default:
-          return `${xe}px `.repeat(t.parts.length) + `${Ee}px`;
+          return `${we}px `.repeat(t.parts.length) + `${Ve}px`;
       }
-    }), f = _(() => {
-      const d = [...t.parts.keys()];
-      return s.value > 0 ? '"' + d.map((r) => "part" + r).join(" ") + ' controls"' : '"controls" ' + d.map((r) => '"part' + r + '"').join(" ");
+    }), m = M(() => {
+      const u = [...t.parts.keys()];
+      return s.value > 0 ? '"' + u.map((i) => "part" + i).join(" ") + ' controls"' : '"controls" ' + u.map((i) => '"part' + i + '"').join(" ");
     });
-    return (d, r) => (S(), k("div", {
+    return (u, i) => (y(), S("div", {
       class: "outer",
       ref_key: "container",
       ref: a
     }, [
-      p("div", Dt, [
-        p("div", zt, [
-          (S(!0), k(oe, null, fe(P(t).parts, (c, b) => (S(), ye(gt, {
-            key: c.name,
-            class: w("part" + b),
-            name: c.name,
-            volume: c.volume,
-            "onUpdate:volume": (M) => c.volume = M,
-            solo: c.solo,
-            "onUpdate:solo": (M) => c.solo = M,
-            mute: c.mute,
-            "onUpdate:mute": (M) => c.mute = M,
+      c("div", Ft, [
+        c("div", Ut, [
+          (y(!0), S(le, null, ge(O(t).parts, (d, v) => (y(), Me(bt, {
+            key: d.name,
+            class: R("part" + v),
+            name: d.name,
+            volume: d.volume,
+            "onUpdate:volume": (C) => d.volume = C,
+            solo: d.solo,
+            "onUpdate:solo": (C) => d.solo = C,
+            mute: d.mute,
+            "onUpdate:mute": (C) => d.mute = C,
             ref_for: !0,
             ref: "parts"
           }, null, 8, ["class", "name", "volume", "onUpdate:volume", "solo", "onUpdate:solo", "mute", "onUpdate:mute"]))), 128)),
-          x($t, {
-            title: P(t).title,
+          V(zt, {
+            title: O(t).title,
             class: "controls"
-          }, null, 8, ["title"])
+          }, {
+            menu: H(() => [
+              re(u.$slots, "menu", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["title"])
         ])
       ])
     ], 512));
   }
-}, ta = /* @__PURE__ */ A(jt, [["__scopeId", "data-v-03258471"]]), Gt = { class: "outer" }, Zt = { class: "mid" }, Kt = { class: "inner" }, Yt = {
+}, na = /* @__PURE__ */ U(Gt, [["__scopeId", "data-v-df706138"]]), Kt = { class: "outer" }, Yt = { class: "mid" }, Qt = { class: "inner" }, Xt = {
   key: 0,
   class: "content"
-}, Qt = {
+}, Jt = {
   __name: "Placeholder",
   props: {
     colour: {
@@ -1644,40 +1697,40 @@ const vt = {
     }
   },
   setup(e) {
-    return W((t) => ({
+    return G((t) => ({
       "66bea586": e.colour
-    })), (t, a) => (S(), k("div", Gt, [
-      p("div", Zt, [
-        p("div", Kt, [
-          e.text || t.$slots.default ? (S(), k("div", Yt, [
-            be(R(e.text) + " ", 1),
-            ve(t.$slots, "default", {}, void 0, !0)
-          ])) : ie("", !0)
+    })), (t, a) => (y(), S("div", Kt, [
+      c("div", Yt, [
+        c("div", Qt, [
+          e.text || t.$slots.default ? (y(), S("div", Xt, [
+            ye(F(e.text) + " ", 1),
+            re(t.$slots, "default", {}, void 0, !0)
+          ])) : se("", !0)
         ])
       ])
     ]));
   }
-}, aa = /* @__PURE__ */ A(Qt, [["__scopeId", "data-v-dff76c48"]]);
+}, sa = /* @__PURE__ */ U(Jt, [["__scopeId", "data-v-dff76c48"]]);
 export {
-  Y as AudioButton,
-  ce as AudioSlider,
-  xt as BarInput,
-  ze as BaseNumericInput,
-  me as DEV_MODE,
+  X as AudioButton,
+  de as AudioSlider,
+  Bt as BarInput,
+  Fe as BaseNumericInput,
+  ve as DEV_MODE,
   ft as DummyAudioEngine,
-  $t as MixerControls,
-  ta as MixerLayout,
-  gt as PartControl,
-  aa as Placeholder,
-  Et as SpeedInput,
-  Pt as TimeInput,
-  $e as TitleText,
-  ht as TriState,
-  De as isDevFeature,
-  ea as isDevMode,
-  X as useAudioStateStore,
-  j as useElementSize,
-  re as useMasterAudioControl,
-  se as useMusicDataStore,
-  mt as usePlaybackStateStore
+  zt as MixerControls,
+  na as MixerLayout,
+  bt as PartControl,
+  sa as Placeholder,
+  Pt as SpeedInput,
+  Vt as TimeInput,
+  De as TitleText,
+  mt as TriState,
+  ze as isDevFeature,
+  aa as isDevMode,
+  ee as useAudioStateStore,
+  K as useElementSize,
+  oe as useMasterAudioControl,
+  ie as useMusicDataStore,
+  pt as usePlaybackStateStore
 };