audio-mixer-ui 0.1.1 → 0.1.3

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 { 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";
-var Ie = function() {
+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, o) {
+      return s[0] === a ? (n = o, !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, o = this.__entries__; s < o.length; s++) {
+          var u = o[s];
+          a.call(n, u[1], u[0]);
         }
       }, t;
     }()
   );
-}(), de = typeof window < "u" && typeof document < "u" && window.document === document, ie = function() {
+}(), he = typeof window < "u" && typeof document < "u" && window.document === document, le = 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(le) : function(e) {
     return setTimeout(function() {
       return e(Date.now());
     }, 1e3 / 60);
   };
-}(), je = 2;
-function Ge(e, t) {
+}(), He = 2;
+function je(e, t) {
   var a = !1, n = !1, s = 0;
-  function i() {
-    a && (a = !1, e()), n && h();
+  function o() {
+    a && (a = !1, e()), n && f();
   }
-  function l() {
-    He(i);
+  function u() {
+    We(o);
   }
-  function h() {
-    var u = Date.now();
+  function f() {
+    var d = Date.now();
     if (a) {
-      if (u - s < je)
+      if (d - s < He)
         return;
       n = !0;
     } else
-      a = !0, n = !1, setTimeout(l, t);
-    s = u;
+      a = !0, n = !1, setTimeout(u, t);
+    s = d;
   }
-  return h;
+  return f;
 }
-var Ze = 20, Ke = ["top", "right", "bottom", "left", "width", "height", "size", "weight"], Ye = typeof MutationObserver < "u", Qe = (
+var Ge = 20, Ze = ["top", "right", "bottom", "left", "width", "height", "size", "weight"], Ke = typeof MutationObserver < "u", Ye = (
   /** @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, {
+      !he || this.connected_ || (document.addEventListener("transitionend", this.onTransitionEnd_), window.addEventListener("resize", this.refresh), Ke ? (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);
+      !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);
     }, 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 = Ze.some(function(o) {
+        return !!~n.indexOf(o);
       });
       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, {
@@ -127,57 +127,57 @@ var Ze = 20, Ke = ["top", "right", "bottom", "left", "width", "height", "size",
   return e;
 }, Q = function(e) {
   var t = e && e.ownerDocument && e.ownerDocument.defaultView;
-  return t || ie;
-}, Ae = ue(0, 0, 0, 0);
-function oe(e) {
+  return t || le;
+}, Re = de(0, 0, 0, 0);
+function ue(e) {
   return parseFloat(e) || 0;
 }
-function xe(e) {
+function ke(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 o = e["border-" + s + "-width"];
+    return n + ue(o);
   }, 0);
 }
-function Xe(e) {
+function Qe(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 o = s[n], u = e["padding-" + o];
+    a[o] = ue(u);
   }
   return a;
 }
-function Je(e) {
+function Xe(e) {
   var t = e.getBBox();
-  return ue(0, 0, t.width, t.height);
+  return de(0, 0, t.width, t.height);
 }
-function et(e) {
+function Je(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);
+    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 ue(s.left, s.top, h, u);
+  return de(s.left, s.top, f, d);
 }
-var tt = /* @__PURE__ */ function() {
+var et = /* @__PURE__ */ function() {
   return typeof SVGGraphicsElement < "u" ? function(e) {
     return e instanceof Q(e).SVGGraphicsElement;
   } : function(e) {
     return e instanceof Q(e).SVGElement && typeof e.getBBox == "function";
   };
 }();
-function at(e) {
+function tt(e) {
   return e === Q(e).document.documentElement;
 }
-function nt(e) {
-  return de ? tt(e) ? Je(e) : et(e) : Ae;
+function at(e) {
+  return he ? et(e) ? Xe(e) : Je(e) : Re;
 }
-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, {
+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, {
     x: t,
     y: a,
     width: n,
@@ -186,39 +186,39 @@ function st(e) {
     right: t + n,
     bottom: s + a,
     left: t
-  }), l;
+  }), u;
 }
-function ue(e, t, a, n) {
+function de(e, t, a, n) {
   return { x: e, y: t, width: a, height: n };
 }
-var rt = (
+var st = (
   /** @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_ = de(0, 0, 0, 0), this.target = t;
     }
     return e.prototype.isActive = function() {
-      var t = nt(this.target);
+      var t = at(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;
   }()
-), it = (
+), rt = (
   /** @class */
   /* @__PURE__ */ function() {
     function e(t, a) {
-      var n = st(a);
-      Le(this, { target: t, contentRect: n });
+      var n = nt(a);
+      Ie(this, { target: t, contentRect: n });
     }
     return e;
   }()
-), ot = (
+), it = (
   /** @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;
     }
@@ -229,7 +229,7 @@ var rt = (
         if (!(t instanceof Q(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());
+        a.has(t) || (a.set(t, new st(t)), this.controller_.addObserver(this), this.controller_.refresh());
       }
     }, e.prototype.unobserve = function(t) {
       if (!arguments.length)
@@ -250,7 +250,7 @@ var rt = (
     }, e.prototype.broadcastActive = function() {
       if (this.hasActive()) {
         var t = this.callbackCtx_, a = this.activeObservations_.map(function(n) {
-          return new it(n.target, n.broadcastRect());
+          return new rt(n.target, n.broadcastRect());
         });
         this.callback_.call(t, a, t), this.clearActive();
       }
@@ -260,7 +260,7 @@ var rt = (
       return this.activeObservations_.length > 0;
     }, e;
   }()
-), Re = typeof WeakMap < "u" ? /* @__PURE__ */ new WeakMap() : new Ie(), Ne = (
+), Ae = typeof WeakMap < "u" ? /* @__PURE__ */ new WeakMap() : new Oe(), Ne = (
   /** @class */
   /* @__PURE__ */ function() {
     function e(t) {
@@ -268,8 +268,8 @@ var rt = (
         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 = Qe.getInstance(), n = new ot(t, a, this);
-      Re.set(this, n);
+      var a = Ye.getInstance(), n = new it(t, a, this);
+      Ae.set(this, n);
     }
     return e;
   }()
@@ -281,44 +281,44 @@ var rt = (
 ].forEach(function(e) {
   Ne.prototype[e] = function() {
     var t;
-    return (t = Re.get(this))[e].apply(t, arguments);
+    return (t = Ae.get(this))[e].apply(t, arguments);
   };
 });
-var lt = function() {
-  return typeof ie.ResizeObserver < "u" ? ie.ResizeObserver : Ne;
+var ot = function() {
+  return typeof le.ResizeObserver < "u" ? le.ResizeObserver : Ne;
 }();
-function q(e) {
-  const t = T(0), a = T(0);
+function j(e) {
+  const t = B(0), a = B(0);
   let n = null;
   const s = () => {
     n && (n.disconnect(), n = null);
   };
-  return D(() => C(e), () => {
+  return L(() => P(e), () => {
     s();
-    const l = C(e);
-    if (!l) return;
-    n = new lt((u) => {
-      const r = u[0];
+    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(l);
-    const h = l.getBoundingClientRect();
-    t.value = h.width, a.value = h.height;
+    }), n.observe(u);
+    const f = u.getBoundingClientRect();
+    t.value = f.width, a.value = f.height;
   }, { immediate: !0 }), Fe(s), {
-    width: Se(t),
-    height: Se(a)
+    width: _e(t),
+    height: _e(a)
   };
 }
-const L = (e, t) => {
+const A = (e, t) => {
   const a = e.__vccOpts || e;
   for (const [n, s] of t)
     a[n] = s;
   return a;
-}, ut = {
+}, lt = {
   key: 0,
   class: "level"
-}, ct = {
+}, ut = {
   __name: "AudioSlider",
-  props: /* @__PURE__ */ me({
+  props: /* @__PURE__ */ pe({
     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
+    W((i) => ({
+      "3d436468": h.value,
+      "345b6e65": M.value,
+      "3327b972": V.value,
+      "5ae48cf2": y.value,
+      "01a7bd27": g.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) => {
+    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 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 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));
       } else {
-        const K = O.bottom - ce - c.value / 2, ee = O.height - c.value;
-        Z = Math.max(0, Math.min(1, K / ee));
+        const z = v.bottom - I - c.value / 2, ae = v.height - c.value;
+        N = Math.max(0, Math.min(1, z / ae));
       }
-      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 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)
           try {
-            a.value.releasePointerCapture(v.pointerId);
+            a.value.releasePointerCapture(i.pointerId);
           } catch {
           }
-        document.removeEventListener("mousemove", $), document.removeEventListener("mouseup", j);
+        document.removeEventListener("mousemove", D), document.removeEventListener("mouseup", Z);
       }
-    }, 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),
+    }, 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),
       ref_key: "root",
       ref: a,
       onMousedown: J,
-      onTouchstart: M,
+      onTouchstart: ee,
       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])
+      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])
         }, [
-          m("div", {
+          p("div", {
             class: "on",
-            style: Ue({ opacity: A(G) })
+            style: Ue({ opacity: te(T) })
           }, null, 4)
         ], 2)), 64))
-      ])) : pe("", !0),
-      m("div", {
-        class: w(["thumb", { dragging: B.value, [e.colour]: !0, [e.style]: !0 }])
+      ])) : ie("", !0),
+      p("div", {
+        class: w(["thumb", { dragging: E.value, [e.colour]: !0, [e.style]: !0 }])
       }, null, 2)
     ], 34));
   }
-}, le = /* @__PURE__ */ L(ct, [["__scopeId", "data-v-1580ed15"]]), dt = {
+}, ce = /* @__PURE__ */ A(ut, [["__scopeId", "data-v-1580ed15"]]), ct = {
   __name: "TitleText",
   props: {
     align: {
@@ -406,23 +406,23 @@ const L = (e, t) => {
     }
   },
   setup(e) {
-    F((h) => ({
-      "5fddb56d": l.value
+    W((f) => ({
+      "5fddb56d": u.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 = 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", {
       ref_key: "el",
       ref: t,
       class: "outer"
     }, [
-      m("div", {
-        class: w({ [i.value]: !0, [e.align]: !0 })
+      p("div", {
+        class: w({ [o.value]: !0, [e.align]: !0 })
       }, [
-        be(h.$slots, "default", {}, void 0, !0)
+        ve(f.$slots, "default", {}, void 0, !0)
       ], 2)
     ], 512));
   }
-}, De = /* @__PURE__ */ L(dt, [["__scopeId", "data-v-3ce29e77"]]), ht = {
+}, $e = /* @__PURE__ */ A(ct, [["__scopeId", "data-v-3ce29e77"]]), dt = {
   __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 = 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() {
       t.value = !t.value, a.value = !1;
     }
-    function u() {
+    function d() {
       a.value = !a.value, t.value = !1;
     }
-    return (r, c) => (y(), _("div", {
+    return (r, c) => (S(), k("div", {
       class: "outer",
       ref_key: "outer",
       ref: n
     }, [
-      m("div", {
+      p("div", {
         class: w(["solo", { on: a.value }]),
-        onClick: u
+        onClick: d
       }, null, 2),
-      m("div", {
+      p("div", {
         class: "s-label",
-        onClick: u
-      }, I(l.value ? "SOLO" : "S"), 1),
-      m("div", {
+        onClick: d
+      }, R(u.value ? "SOLO" : "S"), 1),
+      p("div", {
         class: w(["mute", { on: t.value }]),
-        onClick: h
+        onClick: f
       }, null, 2),
-      m("div", {
+      p("div", {
         class: "m-label",
-        onClick: h
-      }, I(l.value ? "MUTE" : "M"), 1)
+        onClick: f
+      }, R(u.value ? "MUTE" : "M"), 1)
     ], 512));
   }
-}, mt = /* @__PURE__ */ L(ht, [["__scopeId", "data-v-143eade0"]]), he = {
+}, ht = /* @__PURE__ */ A(dt, [["__scopeId", "data-v-143eade0"]]), me = {
   // 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", {
+}, ea = () => me.enabled, De = (e) => me.enabled && me.features[e], X = Me("audioState", {
   state: () => ({
     // Playback state
     isPlaying: !1,
@@ -548,7 +548,7 @@ const L = (e, t) => {
       });
     }
   }
-}), ae = Me("musicData", {
+}), se = Me("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", {
+}), mt = Me("playbackState", {
   state: () => ({
     // Transport state
     transportState: "stopped",
@@ -740,7 +749,7 @@ const L = (e, t) => {
     }
   }
 });
-function vt(e) {
+function pt(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]);
@@ -758,7 +767,7 @@ function vt(e) {
 }
 class ft {
   constructor() {
-    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;
+    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;
   }
   // Initialize with musical data
   initialize(t) {
@@ -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 }) => {
-    e.setCurrentTime(o);
-  }, s = ({ isPlaying: o }) => {
-    e.setPlaybackState(o), a.setTransportState(o ? "playing" : "stopped");
-  }, i = (o) => {
-    o && (e.setCurrentBar(o.bar, o.beat, o.repeat), a.updateLastBarPosition(o.bar));
-  }, l = ({ speed: o }) => {
-    e.setPlaybackSpeed(o);
-  }, h = ({ 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 }) => {
-    e.setLeadInActive(!0, o);
-  }, p = () => {
-    e.setLeadInActive(!1);
+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 = () => {
+    e.setLeadInActive(!1);
+  }, M = () => {
     e.setStartingNotesActive(!0);
-  }, f = () => {
+  }, h = () => {
     e.setStartingNotesActive(!1);
-  }, x = ({ mark: o }) => {
-    a.updateLastPracticeMarkUsed(o);
-  }, P = ({ parts: o }) => {
-    e.initializeParts(o);
-  }, W = ({ 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 = () => {
-    ke(() => {
-      const o = e.masterVolume;
-      d.getMasterVolume() !== o && d.setMasterVolume(o);
-    }), ke(() => {
-      const o = e.playbackSpeed;
-      d.getPlaybackSpeed() !== o && d.setPlaybackSpeed(o);
-    });
-  }, J = (o) => {
-    t.loadMusicData(o), d.initialize({
-      beats: o.beats,
-      practiceMarks: o.marks || o.practiceMarks,
-      parts: o.parts
-    }), B(), R();
+  }, 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);
   }, $ = () => {
-    d.play();
-  }, j = () => {
-    d.stop();
-  }, M = () => {
-    d.pause();
-  }, S = (o) => {
-    d.setTime(o);
-  }, V = (o, E = 0) => {
-    d.setBar(o, E);
-  }, 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);
+    Se(() => {
+      const l = e.masterVolume;
+      m.getMasterVolume() !== l && m.setMasterVolume(l);
+    }), Se(() => {
+      const l = e.playbackSpeed;
+      m.getPlaybackSpeed() !== l && m.setPlaybackSpeed(l);
+    });
+  }, 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);
+    }
+    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);
   };
   return ge(() => {
-    H();
+    G();
   }), {
     // Initialization
     initialize: J,
     // Transport controls
-    play: $,
-    stop: j,
-    pause: M,
+    play: D,
+    stop: Z,
+    pause: ee,
     // Time controls
-    setTime: S,
-    setBar: V,
+    setTime: K,
+    setBar: O,
     // Navigation
-    goToPracticeMark: A,
-    setPlaybackSpeed: v,
+    goToPracticeMark: te,
+    setPlaybackSpeed: i,
     // Volume controls
-    setMasterVolume: O,
-    setPartVolume: G,
-    setPartMuted: ce,
+    setMasterVolume: v,
+    setPartVolume: T,
+    setPartMuted: I,
     // Special features
-    playLeadIn: Z,
-    playStartingNotes: se,
+    playLeadIn: N,
+    playStartingNotes: U,
     // Complex operations
-    playFromBar: K,
-    playFromMark: ee,
+    playFromBar: z,
+    playFromMark: ae,
     // Access to stores for components
     audioState: e,
     musicData: t,
     playbackState: a,
     // Direct access to engine for advanced use
-    audioEngine: d
+    audioEngine: m
   };
 }
-const bt = {
+const vt = {
   __name: "PartControl",
-  props: /* @__PURE__ */ me({
+  props: /* @__PURE__ */ pe({
     name: {
       type: String,
       required: !0
@@ -1035,170 +1048,188 @@ const bt = {
   }),
   emits: ["update:volume", "update:mute", "update:solo"],
   setup(e) {
-    F((f) => ({
+    W((h) => ({
       "34cdae44": r.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);
+    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);
     });
-    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 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"
     );
-    let p = null;
-    const b = T(0);
-    return Ve(() => {
-      $e("randomLevelIndicators") && (p = setInterval(() => {
-        b.value = s.value ? 0 : Math.random() * n.value;
+    let b = null;
+    const M = B(0);
+    return Pe(() => {
+      De("randomLevelIndicators") && (b = setInterval(() => {
+        M.value = s.value ? 0 : Math.random() * n.value;
       }, 100));
     }), ge(() => {
-      p && (clearInterval(p), p = null);
-    }), (f, x) => (y(), _("div", {
+      b && (clearInterval(b), b = null);
+    }), (h, y) => (S(), k("div", {
       ref_key: "el",
-      ref: l,
+      ref: u,
       class: w([c.value, "part"])
     }, [
-      k(mt, {
+      x(ht, {
         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": y[0] || (y[0] = (g) => s.value = g),
+        solo: o.value,
+        "onUpdate:solo": y[1] || (y[1] = (g) => o.value = g)
       }, null, 8, ["mute", "solo"]),
-      k(De, {
+      x($e, {
         align: "left",
         class: "name"
       }, {
-        default: N(() => [
-          ye(I(e.name), 1)
+        default: F(() => [
+          be(R(e.name), 1)
         ]),
         _: 1
       }),
-      k(le, {
-        level: b.value,
+      x(ce, {
+        level: M.value,
         "show-level": !0,
         class: "vol",
         value: n.value,
-        "onUpdate:value": x[2] || (x[2] = (P) => n.value = P)
+        "onUpdate:value": y[2] || (y[2] = (g) => n.value = g)
       }, 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 = {
+}, gt = /* @__PURE__ */ A(vt, [["__scopeId", "data-v-510493b1"]]), bt = { class: "mark" }, yt = { class: "rpt" }, Mt = { class: "beat-ind" }, _t = { class: "beat" }, St = {
+  key: 1,
+  class: "mark-grid-container"
+}, kt = { class: "mark-grid" }, Tt = ["onClick"], Ct = {
   __name: "BarInput",
   setup(e) {
-    F((M) => ({
-      "8ea05ab6": x.value,
-      "1a3336d8": P.value
+    W((i) => ({
+      "21e4bbc2": G.value,
+      77177731: $.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 = 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;
       }, 50);
     });
-    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, () => {
+    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));
-    }), D(() => i.currentBar, (M) => {
-      r.value = M.toString();
+    }), L(() => o.currentBar, (i) => {
+      r.value = i.toString(), V(i);
     });
-    function f() {
-      const M = parseInt(r.value);
-      M && M > 0 && $(M);
+    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 = 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 E() {
+      const i = parseInt(r.value);
+      i && i > 0 && K(i);
     }
-    function B() {
-      p.value = !1;
+    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 H() {
-      b.value = !b.value;
+    function D(i) {
+      var v;
+      (v = t.value) != null && v.contains(i.target) || (h.value = !1, y.value = !1);
+    }
+    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 R() {
-      b.value = !1;
+    const ee = _(() => Object.keys(s.practiceMarks).sort());
+    function K(i) {
+      u.setBar(i, 0);
     }
-    const J = g(() => Object.keys(s.practiceMarks).sort());
-    function $(M) {
-      l.setBar(M, i.currentRepeat);
+    function O(i, v) {
+      v && v.stopPropagation(), c.value = i, h.value = !1, u.goToPracticeMark(i);
     }
-    function j(M) {
-      c.value = M, p.value = !1, l.goToPracticeMark(M);
+    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);
+        }
+      }, 50);
     }
-    return (M, S) => {
-      const V = qe("click-outside");
-      return y(), _("div", {
-        ref_key: "el",
-        ref: t,
-        class: w(["outer", { pulse: h.value }])
+    return L(h, () => {
+      h.value && te();
+    }), (i, v) => (S(), k("div", {
+      ref_key: "el",
+      ref: t,
+      class: w(["outer", { pulse: f.value, "mark-selecting": h.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
       }, [
-        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", {
+        p("div", bt, R(c.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", {
           type: "text",
           class: "bar-input",
-          "onUpdate:modelValue": S[0] || (S[0] = (A) => r.value = A),
+          "onUpdate:modelValue": v[0] || (v[0] = (T) => r.value = T),
           inputmode: "decimal",
           pattern: "\\d*",
-          onChange: f,
-          onKeyup: We(f, ["enter"])
+          onChange: E,
+          onKeyup: qe(E, ["enter"])
         }, null, 544), [
-          [Oe, r.value]
+          [Le, r.value]
         ]),
-        S[3] || (S[3] = m("div", { class: "bar-title" }, "Bar", -1)),
-        re((y(), _("div", {
-          class: w(["rpt-input", { edit: b.value }]),
-          onClick: H
+        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
         }, [
-          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)
+          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))
+        ], 2),
+        v[4] || (v[4] = p("div", { class: "rpt-title" }, "Rpt", -1)),
+        p("div", Mt, [
+          p("div", _t, R(P(o).currentBeat), 1)
         ]),
-        S[5] || (S[5] = m("div", { class: "beat-title" }, "Beat", -1))
-      ], 2);
-    };
+        v[5] || (v[5] = p("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", {
+            key: T,
+            class: w(["mark-option", { selected: T === c.value }]),
+            onClick: (I) => O(T, I)
+          }, R(T), 11, Tt))), 128))
+        ])
+      ])) : ie("", !0)
+    ], 2));
   }
-}, Ct = /* @__PURE__ */ L(Tt, [["__scopeId", "data-v-3043e562"]]), wt = { class: "title" }, Bt = {
+}, xt = /* @__PURE__ */ A(Ct, [["__scopeId", "data-v-a8c8d1d6"]]), Bt = { class: "title" }, wt = {
   __name: "BaseNumericInput",
-  props: /* @__PURE__ */ me({
+  props: /* @__PURE__ */ pe({
     title: {
       type: String,
       required: !0
@@ -1261,77 +1292,77 @@ const bt = {
   }),
   emits: ["update:value"],
   setup(e) {
-    F((c) => ({
+    W((c) => ({
       "0d0963e0": e.textColor,
       "4ad34b2f": e.backgroundColor,
       "02156786": e.color,
-      "715a9528": u.value,
-      "30d64f7d": h.value,
+      "715a9528": d.value,
+      "30d64f7d": f.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 = 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 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");
+    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(l.value), p = t.transformDisplayToSlider(c);
-      i.value = Math.min(Math.max(p, t.sliderMin), t.sliderMax);
+      const c = t.parseValue(u.value), b = t.transformDisplayToSlider(c);
+      o.value = Math.min(Math.max(b, t.sliderMin), t.sliderMax);
     }
-    return (c, p) => (y(), _("div", {
+    return (c, b) => (S(), k("div", {
       class: "outer",
       ref_key: "el",
       ref: a
     }, [
-      p[2] || (p[2] = m("div", { class: "frame" }, null, -1)),
-      re(m("input", {
+      b[2] || (b[2] = p("div", { class: "frame" }, null, -1)),
+      Ve(p("input", {
         type: "text",
         class: "input",
-        "onUpdate:modelValue": p[0] || (p[0] = (b) => l.value = b),
+        "onUpdate:modelValue": b[0] || (b[0] = (M) => u.value = M),
         inputmode: "decimal",
         pattern: "\\d*",
         onChange: r
       }, null, 544), [
-        [Oe, l.value]
+        [Le, u.value]
       ]),
-      m("div", wt, I(e.title), 1),
-      k(le, {
+      p("div", Bt, R(e.title), 1),
+      x(ce, {
         class: "slider",
-        value: i.value,
-        "onUpdate:value": p[1] || (p[1] = (b) => i.value = b),
+        value: o.value,
+        "onUpdate:value": b[1] || (b[1] = (M) => o.value = M),
         "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 = {
+}, ze = /* @__PURE__ */ A(wt, [["__scopeId", "data-v-79c7a539"]]), Et = {
   __name: "SpeedInput",
   setup(e) {
-    const t = X(), a = ne(), n = g({
+    const t = X(), a = re(), n = _({
       get: () => Math.log2(t.playbackSpeed) * 0.5 + 0.5,
       set: (r) => {
         const c = Math.pow(2, r * 2 - 1);
         a.setPlaybackSpeed(c);
       }
-    }), 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) => {
+    }), 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);
     };
-    return (r, c) => (y(), _e(ze, {
+    return (r, c) => (S(), ye(ze, {
       value: n.value,
-      "onUpdate:value": c[0] || (c[0] = (p) => n.value = p),
+      "onUpdate:value": c[0] || (c[0] = (b) => n.value = b),
       title: "Speed",
       color: "#336",
       "text-color": "#aad",
       "format-value": s,
-      "parse-value": i,
-      "validate-input": l,
-      "transform-slider-to-display": h,
-      "transform-display-to-slider": u,
+      "parse-value": o,
+      "validate-input": u,
+      "transform-slider-to-display": f,
+      "transform-display-to-slider": d,
       "thumb-length": 2,
       "max-chars": 3
     }, null, 8, ["value"]));
@@ -1339,179 +1370,191 @@ const bt = {
 }, Pt = {
   __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 = 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,
       "onUpdate:value": [
-        c[0] || (c[0] = (p) => C(t).currentTime = p),
-        C(n).setTime
+        c[0] || (c[0] = (b) => P(t).currentTime = b),
+        P(n).setTime
       ],
       title: "Time",
       color: "#344",
       "focus-color": "#556868",
       "text-color": "#acc",
       "background-color": "#111117",
-      "slider-max": C(a).totalDuration,
+      "slider-max": P(a).totalDuration,
       "slider-min": 0,
       "format-value": s,
-      "parse-value": i,
-      "validate-input": l,
-      "transform-slider-to-display": h,
-      "transform-display-to-slider": u,
+      "parse-value": o,
+      "validate-input": u,
+      "transform-slider-to-display": f,
+      "transform-display-to-slider": d,
       "thumb-length": 2
     }, null, 8, ["value", "onUpdate:value", "slider-max"]));
   }
-}, Vt = { class: "inner" }, Ot = {
+}, Vt = { class: "inner" }, Lt = {
   __name: "AudioButton",
   setup(e) {
-    const t = T(!1), a = () => t.value = !0, n = () => t.value = !1;
-    return (s, i) => (y(), _("div", {
+    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 }]),
       onPointerdown: a,
       onPointerup: n,
       onPointerleave: n
     }, [
-      m("div", Vt, [
-        be(s.$slots, "default", {}, void 0, !0)
+      p("div", Vt, [
+        ve(s.$slots, "default", {}, void 0, !0)
       ])
     ], 34));
   }
-}, Y = /* @__PURE__ */ L(Ot, [["__scopeId", "data-v-0d7af06e"]]), It = { class: "outer" }, Lt = { class: "buttons" }, At = {
+}, Y = /* @__PURE__ */ A(Lt, [["__scopeId", "data-v-0d7af06e"]]), Ot = { class: "outer" }, It = { class: "buttons" }, Rt = {
   class: "icon",
   viewBox: "0 0 48 48"
-}, Rt = ["d"], Nt = {
+}, At = ["d"], Nt = {
   __name: "MixerControls",
   setup(e) {
-    const t = ae(), a = X(), n = ne();
+    const t = se(), a = X(), n = re();
     function s() {
       a.isPlaying ? n.stop() : n.play();
     }
-    function i() {
-      const b = Math.max(1, a.currentBar - 1);
-      n.setBar(b);
+    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];
+          break;
+        }
+      y && n.setBar(y.bar, y.repeat);
     }
-    function l() {
-      const b = a.currentBar + 1;
-      n.setBar(b);
+    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];
+          break;
+        }
+      y && n.setBar(y.bar, y.repeat);
     }
-    function h() {
+    function f() {
       n.playStartingNotes();
     }
-    const u = T(!1), r = T(!0);
+    const d = B(!1), r = B(!0);
     function c() {
-      u.value = !u.value;
+      d.value = !d.value;
     }
-    function p() {
+    function b() {
       r.value = !r.value;
     }
-    return (b, f) => (y(), _("div", It, [
-      k(De, {
+    return (M, h) => (S(), k("div", Ot, [
+      x($e, {
         class: "title",
         align: "centre"
       }, {
-        default: N(() => [
-          ye(I(C(t).title), 1)
+        default: F(() => [
+          be(R(P(t).title), 1)
         ]),
         _: 1
       }),
-      k(le, {
+      x(ce, {
         class: "main",
         colour: "red",
-        modelValue: C(a).masterVolume,
-        "onUpdate:modelValue": f[0] || (f[0] = (x) => C(a).masterVolume = x)
+        modelValue: P(a).masterVolume,
+        "onUpdate:modelValue": h[0] || (h[0] = (y) => P(a).masterVolume = y)
       }, null, 8, ["modelValue"]),
-      k(le, {
+      x(ce, {
         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, {
+      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, {
           class: "button",
-          onClick: i
+          onClick: o
         }, {
-          default: N(() => f[1] || (f[1] = [
-            m("svg", {
+          default: F(() => h[1] || (h[1] = [
+            p("svg", {
               class: "icon",
               viewBox: "0 0 48 48"
             }, [
-              m("path", { d: "M11 36V12h3v24Zm26 0L19.7 24 37 12Z" })
+              p("path", { d: "M11 36V12h3v24Zm26 0L19.7 24 37 12Z" })
             ], -1)
           ])),
           _: 1,
           __: [1]
         }),
-        k(Y, {
+        x(Y, {
           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: 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)
             ]))
           ]),
           _: 1
         }),
-        k(Y, {
+        x(Y, {
           class: "button",
-          onClick: l
+          onClick: u
         }, {
-          default: N(() => f[2] || (f[2] = [
-            m("svg", {
+          default: F(() => h[2] || (h[2] = [
+            p("svg", {
               class: "icon",
               viewBox: "0 0 48 48"
             }, [
-              m("path", { d: "M34 36V12h3v24Zm-23 0V12l17.3 12Z" })
+              p("path", { d: "M34 36V12h3v24Zm-23 0V12l17.3 12Z" })
             ], -1)
           ])),
           _: 1,
           __: [2]
         }),
-        k(Y, {
+        x(Y, {
           class: "button",
           onClick: c
         }, {
-          default: N(() => [
-            (y(), _("svg", {
-              class: w(["icon", u.value ? "on" : "off"]),
+          default: F(() => [
+            (S(), k("svg", {
+              class: w(["icon", d.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)
+            }, 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)
             ]), 2))
           ]),
           _: 1
         }),
-        k(Y, {
+        x(Y, {
           class: "button",
-          onClick: p
+          onClick: b
         }, {
-          default: N(() => [
-            (y(), _("svg", {
+          default: F(() => [
+            (S(), k("svg", {
               class: w(["icon", r.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)
+            }, 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)
             ]), 2))
           ]),
           _: 1
         }),
-        k(Y, {
+        x(Y, {
           class: "button",
-          onClick: h
+          onClick: f
         }, {
-          default: N(() => f[5] || (f[5] = [
-            m("svg", {
+          default: F(() => h[5] || (h[5] = [
+            p("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" })
+              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" })
             ], -1)
           ])),
           _: 1,
@@ -1520,18 +1563,18 @@ const bt = {
       ])
     ]));
   }
-}, 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 = {
+}, $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 = {
   __name: "MixerLayout",
   setup(e) {
-    F((u) => ({
-      "2540622b": i.value,
-      "25398f45": l.value,
-      fc452918: h.value
+    W((d) => ({
+      "2540622b": o.value,
+      "25398f45": u.value,
+      fc452918: f.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 = 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 = _(() => {
       switch (s.value) {
         case 0:
           return `${Ut}px ` + `${Ft}px `.repeat(t.parts.length);
@@ -1542,50 +1585,50 @@ const bt = {
         default:
           return `${Ht}px`;
       }
-    }), l = g(() => {
+    }), u = _(() => {
       switch (s.value) {
         case 0:
           return "100vw";
         case 1:
           return `${Te}px `.repeat(t.parts.length) + `${Be}px`;
         case 2:
-          return `${Ce}px `.repeat(t.parts.length) + `${Ee}px`;
+          return `${Ce}px `.repeat(t.parts.length) + `${we}px`;
         default:
-          return `${we}px `.repeat(t.parts.length) + `${Pe}px`;
+          return `${xe}px `.repeat(t.parts.length) + `${Ee}px`;
       }
-    }), h = g(() => {
-      const u = [...t.parts.keys()];
-      return s.value > 0 ? '"' + u.map((r) => "part" + r).join(" ") + ' controls"' : '"controls" ' + u.map((r) => '"part' + r + '"').join(" ");
+    }), f = _(() => {
+      const d = [...t.parts.keys()];
+      return s.value > 0 ? '"' + d.map((r) => "part" + r).join(" ") + ' controls"' : '"controls" ' + d.map((r) => '"part' + r + '"').join(" ");
     });
-    return (u, r) => (y(), _("div", {
+    return (d, r) => (S(), k("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, {
+      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" + p),
+            class: w("part" + b),
             name: c.name,
             volume: c.volume,
-            "onUpdate:volume": (b) => c.volume = b,
+            "onUpdate:volume": (M) => c.volume = M,
             solo: c.solo,
-            "onUpdate:solo": (b) => c.solo = b,
+            "onUpdate:solo": (M) => c.solo = M,
             mute: c.mute,
-            "onUpdate:mute": (b) => c.mute = b,
+            "onUpdate:mute": (M) => c.mute = M,
             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,
+          x($t, {
+            title: P(t).title,
             class: "controls"
           }, null, 8, ["title"])
         ])
       ])
     ], 512));
   }
-}, ta = /* @__PURE__ */ L(jt, [["__scopeId", "data-v-03258471"]]), Gt = { class: "outer" }, Zt = { class: "mid" }, Kt = { class: "inner" }, Yt = {
+}, ta = /* @__PURE__ */ A(jt, [["__scopeId", "data-v-03258471"]]), Gt = { class: "outer" }, Zt = { class: "mid" }, Kt = { class: "inner" }, Yt = {
   key: 0,
   class: "content"
 }, Qt = {
@@ -1601,40 +1644,40 @@ const bt = {
     }
   },
   setup(e) {
-    return F((t) => ({
+    return W((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) => (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)
         ])
       ])
     ]));
   }
-}, aa = /* @__PURE__ */ L(Qt, [["__scopeId", "data-v-dff76c48"]]);
+}, aa = /* @__PURE__ */ A(Qt, [["__scopeId", "data-v-dff76c48"]]);
 export {
   Y as AudioButton,
-  le as AudioSlider,
-  Ct as BarInput,
+  ce as AudioSlider,
+  xt as BarInput,
   ze as BaseNumericInput,
-  he as DEV_MODE,
+  me as DEV_MODE,
   ft as DummyAudioEngine,
-  Dt as MixerControls,
+  $t as MixerControls,
   ta as MixerLayout,
   gt as PartControl,
   aa as Placeholder,
   Et as SpeedInput,
   Pt as TimeInput,
-  De as TitleText,
-  mt as TriState,
-  $e as isDevFeature,
+  $e as TitleText,
+  ht as TriState,
+  De as isDevFeature,
   ea as isDevMode,
   X as useAudioStateStore,
-  q as useElementSize,
-  ne as useMasterAudioControl,
-  ae as useMusicDataStore,
-  pt as usePlaybackStateStore
+  j as useElementSize,
+  re as useMasterAudioControl,
+  se as useMusicDataStore,
+  mt as usePlaybackStateStore
 };