audio-mixer-ui 0.1.2 → 0.2.0

package/dist/audio-mixer-ui.js

@@ -1,12 +1,12 @@
-import { ref as T, watch as D, unref as C, onScopeDispose as Fe, readonly as Se, mergeModels as me, useCssVars as F, computed as g, useTemplateRef as U, useModel as z, createElementBlock as _, openBlock as y, normalizeClass as w, createElementVNode as m, createCommentVNode as pe, Fragment as ve, renderList as fe, normalizeStyle as Ue, renderSlot as be, toDisplayString as I, onUnmounted as ge, watchEffect as ke, onMounted as Ve, createVNode as k, withCtx as N, createTextVNode as ye, resolveDirective as qe, withDirectives as re, withKeys as We, vModelText as Oe, createBlock as _e } from "vue";
-import { defineStore as Me } from "pinia";
-var Ie = function() {
+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, i) {
-      return s[0] === a ? (n = i, !0) : !1;
+    return t.some(function(s, l) {
+      return s[0] === a ? (n = l, !0) : !1;
     }), n;
   }
   return (
@@ -39,47 +39,47 @@ var Ie = function() {
         this.__entries__.splice(0);
       }, t.prototype.forEach = function(a, n) {
         n === void 0 && (n = null);
-        for (var s = 0, i = this.__entries__; s < i.length; s++) {
-          var l = i[s];
-          a.call(n, l[1], l[0]);
+        for (var s = 0, l = this.__entries__; s < l.length; s++) {
+          var r = l[s];
+          a.call(n, r[1], r[0]);
         }
       }, t;
     }()
   );
-}(), de = typeof window < "u" && typeof document < "u" && window.document === document, ie = 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")();
-}(), He = function() {
-  return typeof requestAnimationFrame == "function" ? requestAnimationFrame.bind(ie) : function(e) {
+}(), We = function() {
+  return typeof requestAnimationFrame == "function" ? requestAnimationFrame.bind(ue) : function(e) {
     return setTimeout(function() {
       return e(Date.now());
     }, 1e3 / 60);
   };
-}(), je = 2;
-function Ge(e, t) {
+}(), Ze = 2;
+function je(e, t) {
   var a = !1, n = !1, s = 0;
-  function i() {
-    a && (a = !1, e()), n && h();
-  }
   function l() {
-    He(i);
+    a && (a = !1, e()), n && m();
+  }
+  function r() {
+    We(l);
   }
-  function h() {
+  function m() {
     var u = Date.now();
     if (a) {
-      if (u - s < je)
+      if (u - s < Ze)
         return;
       n = !0;
     } else
-      a = !0, n = !1, setTimeout(l, t);
+      a = !0, n = !1, setTimeout(r, t);
     s = u;
   }
-  return h;
+  return m;
 }
-var Ze = 20, Ke = ["top", "right", "bottom", "left", "width", "height", "size", "weight"], Ye = typeof MutationObserver < "u", Qe = (
+var Ge = 20, Ke = ["top", "right", "bottom", "left", "width", "height", "size", "weight"], Ye = typeof MutationObserver < "u", Qe = (
   /** @class */
   function() {
     function e() {
-      this.connected_ = !1, this.mutationEventsAdded_ = !1, this.mutationsObserver_ = null, this.observers_ = [], this.onTransitionEnd_ = this.onTransitionEnd_.bind(this), this.refresh = Ge(this.refresh.bind(this), Ze);
+      this.connected_ = !1, this.mutationEventsAdded_ = !1, this.mutationsObserver_ = null, this.observers_ = [], this.onTransitionEnd_ = this.onTransitionEnd_.bind(this), this.refresh = je(this.refresh.bind(this), Ge);
     }
     return e.prototype.addObserver = function(t) {
       ~this.observers_.indexOf(t) || this.observers_.push(t), this.connected_ || this.connect_();
@@ -97,24 +97,24 @@ var Ze = 20, Ke = ["top", "right", "bottom", "left", "width", "height", "size",
         return a.broadcastActive();
       }), t.length > 0;
     }, e.prototype.connect_ = function() {
-      !de || this.connected_ || (document.addEventListener("transitionend", this.onTransitionEnd_), window.addEventListener("resize", this.refresh), Ye ? (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() {
-      !de || !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 = Ke.some(function(i) {
-        return !!~n.indexOf(i);
+      var a = t.propertyName, n = a === void 0 ? "" : a, s = Ke.some(function(l) {
+        return !!~n.indexOf(l);
       });
       s && this.refresh();
     }, e.getInstance = function() {
       return this.instance_ || (this.instance_ = new e()), this.instance_;
     }, e.instance_ = null, e;
   }()
-), Le = function(e, t) {
+), Ie = function(e, t) {
   for (var a = 0, n = Object.keys(t); a < n.length; a++) {
     var s = n[a];
     Object.defineProperty(e, s, {
@@ -125,59 +125,59 @@ var Ze = 20, Ke = ["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 || ie;
-}, Ae = ue(0, 0, 0, 0);
-function oe(e) {
+  return t || ue;
+}, Ae = me(0, 0, 0, 0);
+function ce(e) {
   return parseFloat(e) || 0;
 }
-function xe(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 i = e["border-" + s + "-width"];
-    return n + oe(i);
+    var l = e["border-" + s + "-width"];
+    return n + ce(l);
   }, 0);
 }
 function Xe(e) {
   for (var t = ["top", "right", "bottom", "left"], a = {}, n = 0, s = t; n < s.length; n++) {
-    var i = s[n], l = e["padding-" + i];
-    a[i] = oe(l);
+    var l = s[n], r = e["padding-" + l];
+    a[l] = ce(r);
   }
   return a;
 }
 function Je(e) {
   var t = e.getBBox();
-  return ue(0, 0, t.width, t.height);
+  return me(0, 0, t.width, t.height);
 }
 function et(e) {
   var t = e.clientWidth, a = e.clientHeight;
   if (!t && !a)
     return Ae;
-  var n = Q(e).getComputedStyle(e), s = Xe(n), i = s.left + s.right, l = s.top + s.bottom, h = oe(n.width), u = oe(n.height);
-  if (n.boxSizing === "border-box" && (Math.round(h + i) !== t && (h -= xe(n, "left", "right") + i), Math.round(u + l) !== a && (u -= xe(n, "top", "bottom") + l)), !at(e)) {
-    var r = Math.round(h + i) - t, c = Math.round(u + l) - a;
-    Math.abs(r) !== 1 && (h -= r), Math.abs(c) !== 1 && (u -= c);
+  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 ue(s.left, s.top, h, u);
+  return me(s.left, s.top, m, u);
 }
 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 at(e) {
-  return e === Q(e).document.documentElement;
+  return e === J(e).document.documentElement;
 }
 function nt(e) {
-  return de ? tt(e) ? Je(e) : et(e) : Ae;
+  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, i = typeof DOMRectReadOnly < "u" ? DOMRectReadOnly : Object, l = Object.create(i.prototype);
-  return Le(l, {
+  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,16 +186,16 @@ function st(e) {
     right: t + n,
     bottom: s + a,
     left: t
-  }), l;
+  }), r;
 }
-function ue(e, t, a, n) {
+function me(e, t, a, n) {
   return { x: e, y: t, width: a, height: n };
 }
 var rt = (
   /** @class */
   function() {
     function e(t) {
-      this.broadcastWidth = 0, this.broadcastHeight = 0, this.contentRect_ = ue(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 = nt(this.target);
@@ -210,7 +210,7 @@ var rt = (
   /* @__PURE__ */ function() {
     function e(t, a) {
       var n = st(a);
-      Le(this, { target: t, contentRect: n });
+      Ie(this, { target: t, contentRect: n });
     }
     return e;
   }()
@@ -218,7 +218,7 @@ var rt = (
   /** @class */
   function() {
     function e(t, a, n) {
-      if (this.activeObservations_ = [], this.observations_ = new Ie(), typeof t != "function")
+      if (this.activeObservations_ = [], this.observations_ = new Oe(), typeof t != "function")
         throw new TypeError("The callback provided as parameter 1 is not a function.");
       this.callback_ = t, this.controller_ = a, this.callbackCtx_ = n;
     }
@@ -226,7 +226,7 @@ var rt = (
       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 rt(t)), this.controller_.addObserver(this), this.controller_.refresh());
@@ -235,7 +235,7 @@ var rt = (
       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));
@@ -260,7 +260,7 @@ var rt = (
       return this.activeObservations_.length > 0;
     }, e;
   }()
-), Re = typeof WeakMap < "u" ? /* @__PURE__ */ new WeakMap() : new Ie(), Ne = (
+), Ne = typeof WeakMap < "u" ? /* @__PURE__ */ new WeakMap() : new Oe(), $e = (
   /** @class */
   /* @__PURE__ */ function() {
     function e(t) {
@@ -269,7 +269,7 @@ var rt = (
       if (!arguments.length)
         throw new TypeError("1 argument required, but only 0 present.");
       var a = Qe.getInstance(), n = new ot(t, a, this);
-      Re.set(this, n);
+      Ne.set(this, n);
     }
     return e;
   }()
@@ -279,36 +279,36 @@ var rt = (
   "unobserve",
   "disconnect"
 ].forEach(function(e) {
-  Ne.prototype[e] = function() {
+  $e.prototype[e] = function() {
     var t;
-    return (t = Re.get(this))[e].apply(t, arguments);
+    return (t = Ne.get(this))[e].apply(t, arguments);
   };
 });
 var lt = function() {
-  return typeof ie.ResizeObserver < "u" ? ie.ResizeObserver : Ne;
+  return typeof ue.ResizeObserver < "u" ? ue.ResizeObserver : $e;
 }();
-function q(e) {
-  const t = T(0), a = T(0);
+function K(e) {
+  const t = E(0), a = E(0);
   let n = null;
   const s = () => {
     n && (n.disconnect(), n = null);
   };
-  return D(() => C(e), () => {
+  return D(() => O(e), () => {
     s();
-    const l = C(e);
-    if (!l) return;
+    const r = O(e);
+    if (!r) return;
     n = new lt((u) => {
-      const r = u[0];
-      r && (t.value = r.contentRect.width, a.value = r.contentRect.height);
-    }), n.observe(l);
-    const h = l.getBoundingClientRect();
-    t.value = h.width, a.value = h.height;
-  }, { immediate: !0 }), Fe(s), {
+      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 L = (e, t) => {
+const U = (e, t) => {
   const a = e.__vccOpts || e;
   for (const [n, s] of t)
     a[n] = s;
@@ -318,7 +318,7 @@ const L = (e, t) => {
   class: "level"
 }, ct = {
   __name: "AudioSlider",
-  props: /* @__PURE__ */ me({
+  props: /* @__PURE__ */ fe({
     min: { type: Number, default: 0 },
     max: { type: Number, default: 1 },
     step: { type: Number, default: 0.01 },
@@ -333,71 +333,71 @@ const L = (e, t) => {
   }),
   emits: ["update:value"],
   setup(e) {
-    F((v) => ({
-      "3d436468": f.value,
-      "345b6e65": b.value,
-      "3327b972": W.value,
-      "5ae48cf2": x.value,
-      "01a7bd27": P.value
+    G((f) => ({
+      "3d436468": _.value,
+      "345b6e65": C.value,
+      "3327b972": N.value,
+      "5ae48cf2": B.value,
+      "01a7bd27": L.value
     }));
-    const t = e, a = U("root"), { width: n, height: s } = q(a), i = g(() => Math.min(n.value, s.value)), l = g(() => Math.max(n.value, s.value)), h = g(() => n.value > s.value), u = g(() => h.value ? "h-slide" : "v-slide"), r = z(e, "value"), c = g(() => i.value * 0.8), p = g(() => i.value * t.thumbLength * 0.8), b = g(() => (h.value ? p : c).value + "px"), f = g(() => (h.value ? c : p).value + "px"), x = g(() => i.value * 0.1 + "px"), P = g(() => (l.value - p.value) * (r.value - t.min) / (t.max - t.min) + "px"), W = g(() => h.value ? "90deg" : "0deg"), B = T(!1), H = T(0), R = (v) => {
-      if (!a.value) return r.value;
-      const O = a.value.getBoundingClientRect(), G = v.touches ? v.touches[0].clientX : v.clientX, ce = v.touches ? v.touches[0].clientY : v.clientY;
-      let Z;
-      if (h.value) {
-        const K = G - O.left - c.value / 2, ee = O.width - c.value;
-        Z = Math.max(0, Math.min(1, K / ee));
+    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 K = O.bottom - ce - c.value / 2, ee = O.height - c.value;
-        Z = Math.max(0, Math.min(1, K / ee));
+        const q = A.bottom - b - d.value / 2, W = A.height - d.value;
+        T = Math.max(0, Math.min(1, q / W));
       }
-      const se = t.min + Z * (t.max - t.min);
-      return t.step > 0 ? Math.round(se / t.step) * t.step : se;
-    }, J = (v) => {
-      v.preventDefault(), B.value = !0, H.value = r.value, r.value = R(v), a.value && a.value.setPointerCapture && a.value.setPointerCapture(v.pointerId), document.addEventListener("mousemove", $), document.addEventListener("mouseup", j);
-    }, $ = (v) => {
-      B.value && (v.preventDefault(), r.value = R(v));
-    }, j = (v) => {
-      if (B.value) {
-        if (v.preventDefault(), B.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(v.pointerId);
+            a.value.releasePointerCapture(f.pointerId);
           } catch {
           }
-        document.removeEventListener("mousemove", $), document.removeEventListener("mouseup", j);
+        document.removeEventListener("mousemove", I), document.removeEventListener("mouseup", Y);
       }
-    }, M = (v) => {
-      v.preventDefault(), v.touches.length === 1 && (B.value = !0, H.value = r.value, r.value = R(v), document.addEventListener("touchmove", S, { passive: !1 }), document.addEventListener("touchend", V), document.addEventListener("touchcancel", V));
-    }, S = (v) => {
-      B.value && (v.preventDefault(), v.touches.length === 1 && (r.value = R(v)));
-    }, V = (v) => {
-      B.value && (v.preventDefault(), B.value = !1, document.removeEventListener("touchmove", S), document.removeEventListener("touchend", V), document.removeEventListener("touchcancel", V));
-    }, A = (v) => Math.min(1, Math.max(0, t.level * 10 - v + 1));
-    return (v, O) => (y(), _("div", {
-      class: w(u.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: M,
+      onMousedown: k,
+      onTouchstart: te,
       style: { userSelect: "none", touchAction: "none" }
     }, [
-      O[0] || (O[0] = m("div", { class: "track" }, null, -1)),
-      e.showLevel ? (y(), _("div", ut, [
-        (y(), _(ve, null, fe(10, (G) => m("div", {
-          class: w(["led", "led" + G])
+      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])
         }, [
-          m("div", {
+          c("div", {
             class: "on",
-            style: Ue({ opacity: A(G) })
+            style: qe({ opacity: ae(p) })
           }, null, 4)
         ], 2)), 64))
-      ])) : pe("", !0),
-      m("div", {
-        class: w(["thumb", { dragging: B.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));
   }
-}, le = /* @__PURE__ */ L(ct, [["__scopeId", "data-v-1580ed15"]]), dt = {
+}, de = /* @__PURE__ */ U(ct, [["__scopeId", "data-v-1580ed15"]]), dt = {
   __name: "TitleText",
   props: {
     align: {
@@ -406,23 +406,23 @@ const L = (e, t) => {
     }
   },
   setup(e) {
-    F((h) => ({
-      "5fddb56d": l.value
+    G((m) => ({
+      "5fddb56d": r.value
     }));
-    const t = U("el"), { width: a, height: n } = q(t), s = g(() => Math.min(a.value, n.value)), i = g(() => a.value > n.value ? "h-text" : "v-text"), l = g(() => s.value * 3 / 4 + "px");
-    return (h, u) => (y(), _("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"
     }, [
-      m("div", {
-        class: w({ [i.value]: !0, [e.align]: !0 })
+      c("div", {
+        class: R({ [l.value]: !0, [e.align]: !0 })
       }, [
-        be(h.$slots, "default", {}, void 0, !0)
+        re(m.$slots, "default", {}, void 0, !0)
       ], 2)
     ], 512));
   }
-}, De = /* @__PURE__ */ L(dt, [["__scopeId", "data-v-3ce29e77"]]), ht = {
+}, De = /* @__PURE__ */ U(dt, [["__scopeId", "data-v-3ce29e77"]]), ht = {
   __name: "TriState",
   props: {
     mute: { default: !1 },
@@ -432,37 +432,37 @@ const L = (e, t) => {
   },
   emits: ["update:mute", "update:solo"],
   setup(e) {
-    const t = z(e, "mute"), a = z(e, "solo"), n = U("outer"), { width: s, height: i } = q(n), l = g(() => s.value > i.value * 1.9);
-    function h() {
+    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 u() {
       a.value = !a.value, t.value = !1;
     }
-    return (r, c) => (y(), _("div", {
+    return (i, d) => (y(), S("div", {
       class: "outer",
       ref_key: "outer",
       ref: n
     }, [
-      m("div", {
-        class: w(["solo", { on: a.value }]),
+      c("div", {
+        class: R(["solo", { on: a.value }]),
         onClick: u
       }, null, 2),
-      m("div", {
+      c("div", {
         class: "s-label",
         onClick: u
-      }, I(l.value ? "SOLO" : "S"), 1),
-      m("div", {
-        class: w(["mute", { on: t.value }]),
-        onClick: h
+      }, F(r.value ? "SOLO" : "S"), 1),
+      c("div", {
+        class: R(["mute", { on: t.value }]),
+        onClick: m
       }, null, 2),
-      m("div", {
+      c("div", {
         class: "m-label",
-        onClick: h
-      }, I(l.value ? "MUTE" : "M"), 1)
+        onClick: m
+      }, F(r.value ? "MUTE" : "M"), 1)
     ], 512));
   }
-}, mt = /* @__PURE__ */ L(ht, [["__scopeId", "data-v-143eade0"]]), he = {
+}, 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 L = (e, t) => {
     // Enable other debug/dev features as needed
     debugMode: !1
   }
-}, ea = () => he.enabled, $e = (e) => he.enabled && he.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 L = (e, t) => {
       });
     }
   }
-}), ae = Me("musicData", {
+}), ie = _e("musicData", {
   state: () => ({
     // Musical structure
     beats: [],
@@ -565,10 +565,12 @@ const L = (e, t) => {
   getters: {
     // Get time for a specific bar and repeat
     getTimeFromBar: (e) => (t, a = 0) => {
-      const n = e.beats.find(
+      let n = e.beats.find(
         (s) => s.bar === t && s.beat === 1 && s.repeat === a
       );
-      return n ? n.time : null;
+      return n || (n = e.beats.find(
+        (s) => s.bar === t && s.beat === 1
+      )), n ? n.time : null;
     },
     // Get bar info from time
     getBarFromTime: (e) => (t) => {
@@ -599,7 +601,14 @@ const L = (e, t) => {
       }), Array.from(t).sort((a, n) => a - n);
     },
     // Check if a bar has repeats
-    hasRepeats: (e) => (t) => e.beats.some((a) => a.bar === t && a.repeat > 0)
+    hasRepeats: (e) => (t) => e.beats.some((a) => a.bar === t && a.repeat > 0),
+    // Get the number of repeats for a specific bar
+    getRepeatCountForBar: (e) => (t) => {
+      const a = /* @__PURE__ */ new Set();
+      return e.beats.forEach((n) => {
+        n.bar === t && a.add(n.repeat);
+      }), a.size;
+    }
   },
   actions: {
     // Load musical data
@@ -630,7 +639,7 @@ const L = (e, t) => {
       return this.beats.some((a) => a.bar === e && a.repeat === t);
     }
   }
-}), pt = Me("playbackState", {
+}), pt = _e("playbackState", {
   state: () => ({
     // Transport state
     transportState: "stopped",
@@ -894,7 +903,7 @@ class ft {
     let n = this.beats.find(
       (s) => s.bar === t && s.beat === 1 && s.repeat === a
     );
-    return !n && a === 0 && (n = this.beats.find(
+    return n || (n = this.beats.find(
       (s) => s.bar === t && s.beat === 1
     )), n ? n.time : null;
   }
@@ -902,120 +911,124 @@ class ft {
     this.stop(), this.eventBus.all.clear(), this.parts.clear();
   }
 }
-const d = new ft();
-function ne() {
-  const e = X(), t = ae(), a = pt(), n = ({ currentTime: o }) => {
+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");
-  }, i = (o) => {
+  }, l = (o) => {
     o && (e.setCurrentBar(o.bar, o.beat, o.repeat), a.updateLastBarPosition(o.bar));
-  }, l = ({ speed: o }) => {
+  }, r = ({ speed: o }) => {
     e.setPlaybackSpeed(o);
-  }, h = ({ volume: o }) => {
+  }, m = ({ volume: o }) => {
     e.setMasterVolume(o);
-  }, u = ({ partName: o, volume: E }) => {
-    e.setPartVolume(o, E);
-  }, r = ({ partName: o, muted: E }) => {
-    e.setPartMuted(o, E);
-  }, c = ({ bars: 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);
-  }, p = () => {
+  }, v = () => {
     e.setLeadInActive(!1);
-  }, b = () => {
+  }, C = () => {
     e.setStartingNotesActive(!0);
-  }, f = () => {
+  }, _ = () => {
     e.setStartingNotesActive(!1);
-  }, x = ({ mark: o }) => {
+  }, B = ({ mark: o }) => {
     a.updateLastPracticeMarkUsed(o);
-  }, P = ({ parts: o }) => {
+  }, L = ({ parts: o }) => {
     e.initializeParts(o);
-  }, W = ({ finalTime: o }) => {
+  }, N = ({ finalTime: o }) => {
     e.setPlaybackState(!1), a.setTransportState("stopped"), console.log(`Song ended at time: ${o}`);
-  }, B = () => {
-    d.on("timeChanged", n), d.on("playbackStateChanged", s), d.on("barChanged", i), d.on("speedChanged", l), d.on("masterVolumeChanged", h), d.on("partVolumeChanged", u), d.on("partMutedChanged", r), d.on("leadInStarted", c), d.on("leadInCompleted", p), d.on("startingNotesStarted", b), d.on("startingNotesCompleted", f), d.on("practiceMarkChanged", x), d.on("initialized", P), d.on("songEnded", W);
-  }, H = () => {
-    d.off("timeChanged", n), d.off("playbackStateChanged", s), d.off("barChanged", i), d.off("speedChanged", l), d.off("masterVolumeChanged", h), d.off("partVolumeChanged", u), d.off("partMutedChanged", r), d.off("leadInStarted", c), d.off("leadInCompleted", p), d.off("startingNotesStarted", b), d.off("startingNotesCompleted", f), d.off("practiceMarkChanged", x), d.off("initialized", P), d.off("songEnded", W);
-  }, R = () => {
+  }, 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;
-      d.getMasterVolume() !== o && d.setMasterVolume(o);
+      h.getMasterVolume() !== o && h.setMasterVolume(o);
     }), ke(() => {
       const o = e.playbackSpeed;
-      d.getPlaybackSpeed() !== o && d.setPlaybackSpeed(o);
+      h.getPlaybackSpeed() !== o && h.setPlaybackSpeed(o);
     });
-  }, J = (o) => {
-    t.loadMusicData(o), d.initialize({
+  }, k = (o) => {
+    if (t.loadMusicData(o), h.initialize({
       beats: o.beats,
       practiceMarks: o.marks || o.practiceMarks,
       parts: o.parts
-    }), B(), R();
-  }, $ = () => {
-    d.play();
-  }, j = () => {
-    d.stop();
-  }, M = () => {
-    d.pause();
-  }, S = (o) => {
-    d.setTime(o);
-  }, V = (o, E = 0) => {
-    d.setBar(o, E);
+    }), o.beats && o.beats.length > 0) {
+      const P = o.beats[0];
+      e.setCurrentBar(P.bar, P.beat, P.repeat), h.setTime(P.time);
+    }
+    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) => {
-    d.goToPracticeMark(o);
-  }, v = (o) => {
-    d.setPlaybackSpeed(o);
-  }, O = (o) => {
-    d.setMasterVolume(o);
-  }, G = (o, E) => {
-    d.setPartVolume(o, E);
-  }, ce = (o, E) => {
-    d.setPartMuted(o, E);
-  }, Z = (o = 1) => {
-    d.playLeadIn(o);
-  }, se = () => {
-    d.playStartingNotes();
-  }, K = (o, E = !0, te = 0) => {
-    E && a.leadInEnabled ? (V(o, te), Z(a.leadInBars)) : (V(o, te), $());
-  }, ee = (o, E = !0) => {
-    const te = t.getBarForMark(o);
-    te && K(te, E);
+    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(() => {
-    H();
+  return he(() => {
+    g();
   }), {
     // Initialization
-    initialize: J,
+    initialize: k,
     // Transport controls
-    play: $,
-    stop: j,
-    pause: M,
+    play: I,
+    stop: Y,
+    pause: te,
     // Time controls
-    setTime: S,
-    setBar: V,
+    setTime: Q,
+    setBar: z,
     // Navigation
-    goToPracticeMark: A,
-    setPlaybackSpeed: v,
+    goToPracticeMark: ae,
+    setPlaybackSpeed: f,
     // Volume controls
-    setMasterVolume: O,
-    setPartVolume: G,
-    setPartMuted: ce,
+    setMasterVolume: A,
+    setPartVolume: p,
+    setPartMuted: b,
     // Special features
-    playLeadIn: Z,
-    playStartingNotes: se,
+    playLeadIn: T,
+    playStartingNotes: $,
     // Complex operations
-    playFromBar: K,
-    playFromMark: ee,
+    playFromBar: q,
+    playFromMark: W,
     // Access to stores for components
     audioState: e,
     musicData: t,
     playbackState: a,
     // Direct access to engine for advanced use
-    audioEngine: d
+    audioEngine: h
   };
 }
-const bt = {
+const gt = {
   __name: "PartControl",
-  props: /* @__PURE__ */ me({
+  props: /* @__PURE__ */ fe({
     name: {
       type: String,
       required: !0
@@ -1035,170 +1048,200 @@ const bt = {
   }),
   emits: ["update:volume", "update:mute", "update:solo"],
   setup(e) {
-    F((f) => ({
-      "34cdae44": r.value
+    G((_) => ({
+      "34cdae44": i.value
     }));
     const t = e;
-    X();
-    const a = ne(), n = z(e, "volume"), s = z(e, "mute"), i = z(e, "solo");
-    D(n, (f) => {
-      a.setPartVolume(t.name, f);
-    }), D(s, (f) => {
-      a.setPartMuted(t.name, f);
+    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 l = U("el"), { width: h, height: u } = q(l), r = g(() => Math.min(h.value, u.value) + "px"), c = g(
-      () => h.value > u.value ? "mobile" : h.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 p = null;
-    const b = T(0);
-    return Ve(() => {
-      $e("randomLevelIndicators") && (p = setInterval(() => {
-        b.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(() => {
-      p && (clearInterval(p), p = null);
-    }), (f, x) => (y(), _("div", {
+    }), he(() => {
+      v && (clearInterval(v), v = null);
+    }), (_, B) => (y(), S("div", {
       ref_key: "el",
-      ref: l,
-      class: w([c.value, "part"])
+      ref: r,
+      class: R([d.value, "part"])
     }, [
-      k(mt, {
+      V(mt, {
         class: "tri",
         mute: s.value,
-        "onUpdate:mute": x[0] || (x[0] = (P) => s.value = P),
-        solo: i.value,
-        "onUpdate:solo": x[1] || (x[1] = (P) => i.value = P)
+        "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"]),
-      k(De, {
+      V(De, {
         align: "left",
         class: "name"
       }, {
-        default: N(() => [
-          ye(I(e.name), 1)
+        default: H(() => [
+          ye(F(e.name), 1)
         ]),
         _: 1
       }),
-      k(le, {
-        level: b.value,
+      V(de, {
+        level: C.value,
         "show-level": !0,
         class: "vol",
         value: n.value,
-        "onUpdate:value": x[2] || (x[2] = (P) => n.value = P)
+        "onUpdate:value": B[2] || (B[2] = (L) => n.value = L)
       }, null, 8, ["level", "value"])
     ], 2));
   }
-}, gt = /* @__PURE__ */ L(bt, [["__scopeId", "data-v-510493b1"]]), yt = { class: "mark" }, _t = {
-  key: 0,
-  class: "mark-dropdown"
-}, Mt = ["onClick"], St = { class: "rpt" }, kt = { class: "beat-ind" }, xt = { class: "beat" }, Tt = {
+}, 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"
+}, Tt = { class: "mark-grid" }, Ct = ["onClick"], xt = {
   __name: "BarInput",
   setup(e) {
-    F((M) => ({
-      "8ea05ab6": x.value,
-      "1a3336d8": P.value
+    G((p) => ({
+      a84e79a6: x.value,
+      "4f93d11c": g.value
     }));
-    const t = U("el"), { width: a, height: n } = q(t), s = ae(), i = X(), l = ne(), h = T(!0);
-    D(() => i.currentBeat, () => {
-      h.value = !0, setTimeout(() => {
-        h.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 u = null;
-    Ve(() => {
-      $e("beatAnimation") && (u = setInterval(() => {
-        const M = i.currentBeat % s.timeSignature + 1;
-        i.setCurrentBar(i.currentBar, M, i.currentRepeat);
-      }, 800));
-    }), ge(() => {
-      u && (clearInterval(u), u = null);
-    });
-    const r = T(i.currentBar.toString()), c = T("A");
-    T(i.currentRepeat);
-    const p = T(!1), b = T(!1);
-    D(r, () => {
-      r.value = r.value.replace(/\D/g, ""), r.value.length > 3 && (r.value = r.value.slice(0, 3));
-    }), D(() => i.currentBar, (M) => {
-      r.value = M.toString();
-    });
-    function f() {
-      const M = parseInt(r.value);
-      M && M > 0 && $(M);
+    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 I() {
+      const p = parseInt(u.value);
+      p && p > 0 && Y(p);
     }
-    const x = g(() => Math.min(n.value / 2.25, a.value / 4.5) + "px"), P = g(() => Math.min(a.value / 15, n.value / 6.4) + "px");
-    function W() {
-      p.value = !p.value;
+    function Y(p) {
+      m.setBar(p, 0);
     }
-    function B() {
-      p.value = !1;
+    function te(p, b) {
+      b && b.stopPropagation(), i.value = p, _.value = !1, m.goToPracticeMark(p);
     }
-    function H() {
-      b.value = !b.value;
+    function Q() {
+      v.value > 1 && (B.value = !0), r.currentRepeat < v.value && m.setBar(r.currentBar, r.currentRepeat + 1);
     }
-    function R() {
-      b.value = !1;
+    function z() {
+      v.value > 1 && (B.value = !0), r.currentRepeat > 1 && m.setBar(r.currentBar, r.currentRepeat - 1);
     }
-    const J = g(() => Object.keys(s.practiceMarks).sort());
-    function $(M) {
-      l.setBar(M, i.currentRepeat);
+    function ae(p) {
+      p.stopPropagation(), B.value = !1, _.value = !_.value;
     }
-    function j(M) {
-      c.value = M, p.value = !1, l.goToPracticeMark(M);
+    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 (M, S) => {
-      const V = qe("click-outside");
-      return y(), _("div", {
-        ref_key: "el",
-        ref: t,
-        class: w(["outer", { pulse: h.value }])
+    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: R(["outer", { pulse: L.value, "mark-selecting": _.value }])
+    }, [
+      b[6] || (b[6] = c("div", { class: "frame" }, null, -1)),
+      c("div", {
+        class: R(["mark-input", { empty: !i.value, edit: _.value }]),
+        onClick: ae
       }, [
-        S[1] || (S[1] = m("div", { class: "frame" }, null, -1)),
-        re((y(), _("div", {
-          class: w(["mark-input", { empty: !c.value, edit: p.value }]),
-          onClick: W
-        }, [
-          m("div", yt, I(c.value), 1)
-        ], 2)), [
-          [V, B]
-        ]),
-        p.value ? (y(), _("div", _t, [
-          (y(!0), _(ve, null, fe(J.value, (A) => (y(), _("div", {
-            key: A,
-            class: "mark-option",
-            onClick: (v) => j(A)
-          }, I(A), 9, Mt))), 128))
-        ])) : pe("", !0),
-        S[2] || (S[2] = m("div", { class: "mark-title" }, "Mark", -1)),
-        re(m("input", {
+        c("div", yt, F(i.value), 1)
+      ], 2),
+      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": S[0] || (S[0] = (A) => r.value = A),
+          "onUpdate:modelValue": b[0] || (b[0] = (T) => u.value = T),
           inputmode: "decimal",
           pattern: "\\d*",
-          onChange: f,
-          onKeyup: We(f, ["enter"])
+          onChange: I,
+          onKeyup: He(I, ["enter"])
         }, null, 544), [
-          [Oe, r.value]
+          [Le, u.value]
         ]),
-        S[3] || (S[3] = m("div", { class: "bar-title" }, "Bar", -1)),
-        re((y(), _("div", {
-          class: w(["rpt-input", { edit: b.value }]),
-          onClick: H
+        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 }])
         }, [
-          m("div", St, I(C(i).currentRepeat || "-"), 1)
-        ], 2)), [
-          [V, R]
-        ]),
-        S[4] || (S[4] = m("div", { class: "rpt-title" }, "Rpt", -1)),
-        m("div", kt, [
-          m("div", xt, I(C(i).currentBeat), 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),
+        b[4] || (b[4] = c("div", { class: "rpt-title" }, "Rpt", -1)),
+        c("div", _t, [
+          c("div", St, F(O(r).currentBeat), 1)
         ]),
-        S[5] || (S[5] = m("div", { class: "beat-title" }, "Beat", -1))
-      ], 2);
-    };
+        b[5] || (b[5] = c("div", { class: "beat-title" }, "Beat", -1))
+      ], 64)),
+      _.value ? (y(), S("div", kt, [
+        c("div", Tt, [
+          (y(!0), S(le, null, ge(w.value, (T) => (y(), S("div", {
+            key: T,
+            class: R(["mark-option", { selected: T === i.value }]),
+            onClick: ($) => te(T, $)
+          }, F(T), 11, Ct))), 128))
+        ])
+      ])) : se("", !0)
+    ], 2));
   }
-}, Ct = /* @__PURE__ */ L(Tt, [["__scopeId", "data-v-3043e562"]]), wt = { class: "title" }, Bt = {
+}, Bt = /* @__PURE__ */ U(xt, [["__scopeId", "data-v-0256e5c0"]]), wt = { class: "title" }, Et = {
   __name: "BaseNumericInput",
-  props: /* @__PURE__ */ me({
+  props: /* @__PURE__ */ fe({
     title: {
       type: String,
       required: !0
@@ -1261,334 +1304,387 @@ const bt = {
   }),
   emits: ["update:value"],
   setup(e) {
-    F((c) => ({
+    G((d) => ({
       "0d0963e0": e.textColor,
       "4ad34b2f": e.backgroundColor,
       "02156786": e.color,
       "715a9528": u.value,
-      "30d64f7d": h.value,
+      "30d64f7d": m.value,
       b8fbe65e: e.focusColor
     }));
-    const t = e, a = U("el"), { width: n, height: s } = q(a), i = z(e, "value"), l = T(t.formatValue(t.transformSliderToDisplay(i.value)));
-    D(i, () => {
-      const c = t.transformSliderToDisplay(i.value);
-      l.value = t.formatValue(c);
-    }), D(l, () => {
-      l.value = t.validateInput(l.value), t.maxChars && l.value.length > t.maxChars && (l.value = l.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 h = g(() => Math.min(s.value / 2.25, n.value / 2.2) + "px"), u = g(() => Math.min(n.value / 3, s.value / 6.4) + "px");
-    function r() {
-      const c = t.parseValue(l.value), p = t.transformDisplayToSlider(c);
-      i.value = Math.min(Math.max(p, 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, p) => (y(), _("div", {
+    return (d, v) => (y(), S("div", {
       class: "outer",
       ref_key: "el",
       ref: a
     }, [
-      p[2] || (p[2] = m("div", { class: "frame" }, null, -1)),
-      re(m("input", {
+      v[2] || (v[2] = c("div", { class: "frame" }, null, -1)),
+      Re(c("input", {
         type: "text",
         class: "input",
-        "onUpdate:modelValue": p[0] || (p[0] = (b) => l.value = b),
+        "onUpdate:modelValue": v[0] || (v[0] = (C) => r.value = C),
         inputmode: "decimal",
         pattern: "\\d*",
-        onChange: r
+        onChange: i
       }, null, 544), [
-        [Oe, l.value]
+        [Le, r.value]
       ]),
-      m("div", wt, I(e.title), 1),
-      k(le, {
+      c("div", wt, F(e.title), 1),
+      V(de, {
         class: "slider",
-        value: i.value,
-        "onUpdate:value": p[1] || (p[1] = (b) => i.value = b),
+        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__ */ L(Bt, [["__scopeId", "data-v-79c7a539"]]), Et = {
+}, Fe = /* @__PURE__ */ U(Et, [["__scopeId", "data-v-79c7a539"]]), Pt = {
   __name: "SpeedInput",
   setup(e) {
-    const t = X(), a = ne(), n = g({
+    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) + "", i = (r) => parseFloat(r), l = (r) => r.replace(/\D/g, ""), h = (r) => r, u = (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) => (y(), _e(ze, {
+    return (i, d) => (y(), Me(Fe, {
       value: n.value,
-      "onUpdate:value": c[0] || (c[0] = (p) => n.value = p),
+      "onUpdate:value": d[0] || (d[0] = (v) => n.value = v),
       title: "Speed",
       color: "#336",
       "text-color": "#aad",
       "format-value": s,
-      "parse-value": i,
-      "validate-input": l,
-      "transform-slider-to-display": h,
+      "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 = ae(), n = ne(), s = (r) => r.toFixed(1), i = (r) => parseFloat(r), l = (r) => r.replace(/[^0-9.]/g, ""), h = (r) => r, u = (r) => r;
-    return (r, c) => (y(), _e(ze, {
-      value: C(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] = (p) => C(t).currentTime = p),
-        C(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": C(a).totalDuration,
+      "slider-max": O(a).totalDuration,
       "slider-min": 0,
       "format-value": s,
-      "parse-value": i,
-      "validate-input": l,
-      "transform-slider-to-display": h,
+      "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" }, Ot = {
+}, Rt = { class: "inner" }, Lt = {
   __name: "AudioButton",
   setup(e) {
-    const t = T(!1), a = () => t.value = !0, n = () => t.value = !1;
-    return (s, i) => (y(), _("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
     }, [
-      m("div", Vt, [
-        be(s.$slots, "default", {}, void 0, !0)
+      c("div", Rt, [
+        re(s.$slots, "default", {}, void 0, !0)
       ])
     ], 34));
   }
-}, Y = /* @__PURE__ */ L(Ot, [["__scopeId", "data-v-0d7af06e"]]), It = { class: "outer" }, Lt = { class: "buttons" }, At = {
+}, 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"
-}, Rt = ["d"], Nt = {
+}, $t = ["d"], Dt = {
   __name: "MixerControls",
   setup(e) {
-    const t = ae(), a = X(), n = ne();
+    const t = ie(), a = ee(), n = oe();
     function s() {
       a.isPlaying ? n.stop() : n.play();
     }
-    function i() {
-      const b = Math.max(1, a.currentBar - 1);
-      n.setBar(b);
-    }
     function l() {
-      const b = a.currentBar + 1;
-      n.setBar(b);
+      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;
+        }
+      w && n.setBar(w.bar, w.repeat);
+    }
+    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;
+        }
+      w && n.setBar(w.bar, w.repeat);
     }
-    function h() {
+    function m() {
       n.playStartingNotes();
     }
-    const u = T(!1), r = T(!0);
-    function c() {
+    const u = E(!1), i = E(!0), d = E(!1), v = E(null);
+    function C() {
+      d.value = !d.value;
+    }
+    function _() {
+      d.value = !1;
+    }
+    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 p() {
-      r.value = !r.value;
+    function N() {
+      i.value = !i.value;
     }
-    return (b, f) => (y(), _("div", It, [
-      k(De, {
-        class: "title",
-        align: "centre"
-      }, {
-        default: N(() => [
-          ye(I(C(t).title), 1)
-        ]),
-        _: 1
-      }),
-      k(le, {
+    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: C(a).masterVolume,
-        "onUpdate:modelValue": f[0] || (f[0] = (x) => C(a).masterVolume = x)
+        modelValue: O(a).masterVolume,
+        "onUpdate:modelValue": g[0] || (g[0] = (w) => O(a).masterVolume = w)
       }, null, 8, ["modelValue"]),
-      k(le, {
+      V(de, {
         class: "tick",
         colour: "blue"
       }),
-      f[6] || (f[6] = m("div", { class: "main-t" }, "Main", -1)),
-      f[7] || (f[7] = m("div", { class: "tick-t" }, "Tick", -1)),
-      k(Ct, { class: "bar" }),
-      k(Pt, { class: "time" }),
-      k(Et, { class: "speed" }),
-      m("div", Lt, [
-        k(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: i
+          onClick: l
         }, {
-          default: N(() => f[1] || (f[1] = [
-            m("svg", {
+          default: H(() => g[2] || (g[2] = [
+            c("svg", {
               class: "icon",
               viewBox: "0 0 48 48"
             }, [
-              m("path", { d: "M11 36V12h3v24Zm26 0L19.7 24 37 12Z" })
+              c("path", { d: "M11 36V12h3v24Zm26 0L19.7 24 37 12Z" })
             ], -1)
           ])),
           _: 1,
-          __: [1]
+          __: [2]
         }),
-        k(Y, {
+        V(X, {
           class: "button",
           onClick: s
         }, {
-          default: N(() => [
-            (y(), _("svg", At, [
-              m("path", {
-                d: C(a).isPlaying ? "M27.4 35.4V12.6h8v22.8Zm-14.8 0V12.6h8.05v22.8Z" : "M16 37.85v-28l22 14Z"
-              }, null, 8, Rt)
+          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
         }),
-        k(Y, {
+        V(X, {
           class: "button",
-          onClick: l
+          onClick: r
         }, {
-          default: N(() => f[2] || (f[2] = [
-            m("svg", {
+          default: H(() => g[3] || (g[3] = [
+            c("svg", {
               class: "icon",
               viewBox: "0 0 48 48"
             }, [
-              m("path", { d: "M34 36V12h3v24Zm-23 0V12l17.3 12Z" })
+              c("path", { d: "M34 36V12h3v24Zm-23 0V12l17.3 12Z" })
             ], -1)
           ])),
           _: 1,
-          __: [2]
+          __: [3]
         }),
-        k(Y, {
+        V(X, {
           class: "button",
-          onClick: c
+          onClick: L
         }, {
-          default: N(() => [
-            (y(), _("svg", {
-              class: w(["icon", u.value ? "on" : "off"]),
+          default: H(() => [
+            (y(), S("svg", {
+              class: R(["icon", u.value ? "on" : "off"]),
               viewBox: "-128 -128 768 768"
-            }, f[3] || (f[3] = [
-              m("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
         }),
-        k(Y, {
+        V(X, {
           class: "button",
-          onClick: p
+          onClick: N
         }, {
-          default: N(() => [
-            (y(), _("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"
-            }, f[4] || (f[4] = [
-              m("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
         }),
-        k(Y, {
+        V(X, {
           class: "button",
-          onClick: h
+          onClick: m
         }, {
-          default: N(() => f[5] || (f[5] = [
-            m("svg", {
+          default: H(() => g[6] || (g[6] = [
+            c("svg", {
               class: "icon",
               viewBox: "0 -960 960 960"
             }, [
-              m("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" }),
-              m("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]
         })
       ])
     ]));
   }
-}, Dt = /* @__PURE__ */ L(Nt, [["__scopeId", "data-v-fc2b877e"]]), $t = { class: "container" }, zt = { class: "panel" }, Te = 40, Ce = 40, we = 100, Ft = 50, Be = 400, Ee = 570, Pe = 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) {
-    F((u) => ({
-      "2540622b": i.value,
-      "25398f45": l.value,
-      fc452918: h.value
+    G((u) => ({
+      "6bce51ec": l.value,
+      "6bdbf7b8": r.value,
+      78139275: m.value
     }));
-    const t = ae(), a = U("container"), { width: n } = q(a), s = g(() => {
-      const u = n.value, r = t.parts.length;
-      return u < 640 || u < Te * r + Be ? 0 : u < Ce * r + Ee ? 1 : u < we * r + Pe ? 2 : 3;
-    }), i = g(() => {
+    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`;
       }
-    }), l = g(() => {
+    }), 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) + `${Ee}px`;
+          return `${Be}px `.repeat(t.parts.length) + `${Pe}px`;
         default:
-          return `${we}px `.repeat(t.parts.length) + `${Pe}px`;
+          return `${we}px `.repeat(t.parts.length) + `${Ve}px`;
       }
-    }), h = g(() => {
+    }), m = M(() => {
       const u = [...t.parts.keys()];
-      return s.value > 0 ? '"' + u.map((r) => "part" + r).join(" ") + ' controls"' : '"controls" ' + u.map((r) => '"part' + r + '"').join(" ");
+      return s.value > 0 ? '"' + u.map((i) => "part" + i).join(" ") + ' controls"' : '"controls" ' + u.map((i) => '"part' + i + '"').join(" ");
     });
-    return (u, r) => (y(), _("div", {
+    return (u, i) => (y(), S("div", {
       class: "outer",
       ref_key: "container",
       ref: a
     }, [
-      m("div", $t, [
-        m("div", zt, [
-          (y(!0), _(ve, null, fe(C(t).parts, (c, p) => (y(), _e(gt, {
-            key: c.name,
-            class: w("part" + p),
-            name: c.name,
-            volume: c.volume,
-            "onUpdate:volume": (b) => c.volume = b,
-            solo: c.solo,
-            "onUpdate:solo": (b) => c.solo = b,
-            mute: c.mute,
-            "onUpdate:mute": (b) => c.mute = b,
+      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)),
-          k(Dt, {
-            title: C(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__ */ L(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: {
@@ -1601,40 +1697,40 @@ const bt = {
     }
   },
   setup(e) {
-    return F((t) => ({
+    return G((t) => ({
       "66bea586": e.colour
-    })), (t, a) => (y(), _("div", Gt, [
-      m("div", Zt, [
-        m("div", Kt, [
-          e.text || t.$slots.default ? (y(), _("div", Yt, [
-            ye(I(e.text) + " ", 1),
-            be(t.$slots, "default", {}, void 0, !0)
-          ])) : pe("", !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__ */ L(Qt, [["__scopeId", "data-v-dff76c48"]]);
+}, sa = /* @__PURE__ */ U(Jt, [["__scopeId", "data-v-dff76c48"]]);
 export {
-  Y as AudioButton,
-  le as AudioSlider,
-  Ct as BarInput,
-  ze as BaseNumericInput,
-  he as DEV_MODE,
+  X as AudioButton,
+  de as AudioSlider,
+  Bt as BarInput,
+  Fe as BaseNumericInput,
+  ve as DEV_MODE,
   ft as DummyAudioEngine,
-  Dt as MixerControls,
-  ta as MixerLayout,
-  gt as PartControl,
-  aa as Placeholder,
-  Et as SpeedInput,
-  Pt as TimeInput,
+  zt as MixerControls,
+  na as MixerLayout,
+  bt as PartControl,
+  sa as Placeholder,
+  Pt as SpeedInput,
+  Vt as TimeInput,
   De as TitleText,
   mt as TriState,
-  $e as isDevFeature,
-  ea as isDevMode,
-  X as useAudioStateStore,
-  q as useElementSize,
-  ne as useMasterAudioControl,
-  ae as useMusicDataStore,
+  ze as isDevFeature,
+  aa as isDevMode,
+  ee as useAudioStateStore,
+  K as useElementSize,
+  oe as useMasterAudioControl,
+  ie as useMusicDataStore,
   pt as usePlaybackStateStore
 };