audio-mixer-ui 1.2.0 → 1.2.1

package/dist/audio-mixer-ui.js

@@ -1,7 +1,7 @@
-import { ref as _, watch as R, unref as I, onScopeDispose as ee, readonly as Ct, mergeModels as wt, useCssVars as tt, computed as M, useTemplateRef as j, useModel as X, createElementBlock as w, openBlock as P, normalizeClass as L, createElementVNode as m, createCommentVNode as q, Fragment as ct, renderList as Et, normalizeStyle as Rt, watchEffect as Mt, renderSlot as rt, toDisplayString as K, onUnmounted as vt, onMounted as gt, createVNode as N, withCtx as W, createTextVNode as bt, withDirectives as Tt, withKeys as ae, vModelText as Ot, withModifiers as St, createBlock as ht, nextTick as se, createStaticVNode as ne, vModelCheckbox as ie } from "vue";
-import { defineStore as yt } from "pinia";
+import { ref as _, watch as R, unref as L, onScopeDispose as ee, readonly as Dt, mergeModels as Lt, useCssVars as at, computed as k, useTemplateRef as Y, useModel as tt, createElementBlock as T, openBlock as w, normalizeClass as I, createElementVNode as m, createCommentVNode as F, Fragment as pt, renderList as At, normalizeStyle as Gt, watchEffect as Tt, renderSlot as ut, toDisplayString as K, onUnmounted as kt, onMounted as Mt, createVNode as D, withCtx as Z, createTextVNode as St, withDirectives as It, withKeys as ae, vModelText as qt, withModifiers as Ct, createBlock as vt, nextTick as se, createStaticVNode as ne, vModelCheckbox as ie } from "vue";
+import { defineStore as Pt } from "pinia";
 import { LightweightAudioEngine as re, SpessaSynthAudioEngine as oe, PlaybackManager as le } from "audio-mixer-engine";
-var $t = function() {
+var Ht = function() {
   if (typeof Map < "u")
     return Map;
   function e(t, a) {
@@ -47,10 +47,10 @@ var $t = function() {
       }, t;
     }()
   );
-}(), xt = typeof window < "u" && typeof document < "u" && window.document === document, mt = function() {
+}(), Bt = typeof window < "u" && typeof document < "u" && window.document === document, gt = 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")();
 }(), ue = function() {
-  return typeof requestAnimationFrame == "function" ? requestAnimationFrame.bind(mt) : function(e) {
+  return typeof requestAnimationFrame == "function" ? requestAnimationFrame.bind(gt) : function(e) {
     return setTimeout(function() {
       return e(Date.now());
     }, 1e3 / 60);
@@ -59,24 +59,24 @@ var $t = function() {
 function ce(e, t) {
   var a = !1, s = !1, n = 0;
   function i() {
-    a && (a = !1, e()), s && d();
+    a && (a = !1, e()), s && h();
   }
   function r() {
     ue(i);
   }
-  function d() {
-    var f = Date.now();
+  function h() {
+    var b = Date.now();
     if (a) {
-      if (f - n < de)
+      if (b - n < de)
         return;
       s = !0;
     } else
       a = !0, s = !1, setTimeout(r, t);
-    n = f;
+    n = b;
   }
-  return d;
+  return h;
 }
-var he = 20, me = ["top", "right", "bottom", "left", "width", "height", "size", "weight"], pe = typeof MutationObserver < "u", fe = (
+var he = 20, me = ["top", "right", "bottom", "left", "width", "height", "size", "weight"], fe = typeof MutationObserver < "u", pe = (
   /** @class */
   function() {
     function e() {
@@ -98,14 +98,14 @@ var he = 20, me = ["top", "right", "bottom", "left", "width", "height", "size",
         return a.broadcastActive();
       }), t.length > 0;
     }, e.prototype.connect_ = function() {
-      !xt || this.connected_ || (document.addEventListener("transitionend", this.onTransitionEnd_), window.addEventListener("resize", this.refresh), pe ? (this.mutationsObserver_ = new MutationObserver(this.refresh), this.mutationsObserver_.observe(document, {
+      !Bt || this.connected_ || (document.addEventListener("transitionend", this.onTransitionEnd_), window.addEventListener("resize", this.refresh), fe ? (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() {
-      !xt || !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);
+      !Bt || !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, s = a === void 0 ? "" : a, n = me.some(function(i) {
         return !!~s.indexOf(i);
@@ -115,7 +115,7 @@ var he = 20, me = ["top", "right", "bottom", "left", "width", "height", "size",
       return this.instance_ || (this.instance_ = new e()), this.instance_;
     }, e.instance_ = null, e;
   }()
-), Ft = function(e, t) {
+), Wt = function(e, t) {
   for (var a = 0, s = Object.keys(t); a < s.length; a++) {
     var n = s[a];
     Object.defineProperty(e, n, {
@@ -126,59 +126,59 @@ var he = 20, me = ["top", "right", "bottom", "left", "width", "height", "size",
     });
   }
   return e;
-}, it = function(e) {
+}, ot = function(e) {
   var t = e && e.ownerDocument && e.ownerDocument.defaultView;
-  return t || mt;
-}, Ut = kt(0, 0, 0, 0);
-function pt(e) {
+  return t || gt;
+}, jt = xt(0, 0, 0, 0);
+function bt(e) {
   return parseFloat(e) || 0;
 }
-function _t(e) {
+function Vt(e) {
   for (var t = [], a = 1; a < arguments.length; a++)
     t[a - 1] = arguments[a];
   return t.reduce(function(s, n) {
     var i = e["border-" + n + "-width"];
-    return s + pt(i);
+    return s + bt(i);
   }, 0);
 }
 function ve(e) {
   for (var t = ["top", "right", "bottom", "left"], a = {}, s = 0, n = t; s < n.length; s++) {
     var i = n[s], r = e["padding-" + i];
-    a[i] = pt(r);
+    a[i] = bt(r);
   }
   return a;
 }
 function ge(e) {
   var t = e.getBBox();
-  return kt(0, 0, t.width, t.height);
+  return xt(0, 0, t.width, t.height);
 }
 function be(e) {
   var t = e.clientWidth, a = e.clientHeight;
   if (!t && !a)
-    return Ut;
-  var s = it(e).getComputedStyle(e), n = ve(s), i = n.left + n.right, r = n.top + n.bottom, d = pt(s.width), f = pt(s.height);
-  if (s.boxSizing === "border-box" && (Math.round(d + i) !== t && (d -= _t(s, "left", "right") + i), Math.round(f + r) !== a && (f -= _t(s, "top", "bottom") + r)), !ke(e)) {
-    var l = Math.round(d + i) - t, g = Math.round(f + r) - a;
-    Math.abs(l) !== 1 && (d -= l), Math.abs(g) !== 1 && (f -= g);
+    return jt;
+  var s = ot(e).getComputedStyle(e), n = ve(s), i = n.left + n.right, r = n.top + n.bottom, h = bt(s.width), b = bt(s.height);
+  if (s.boxSizing === "border-box" && (Math.round(h + i) !== t && (h -= Vt(s, "left", "right") + i), Math.round(b + r) !== a && (b -= Vt(s, "top", "bottom") + r)), !ke(e)) {
+    var l = Math.round(h + i) - t, v = Math.round(b + r) - a;
+    Math.abs(l) !== 1 && (h -= l), Math.abs(v) !== 1 && (b -= v);
   }
-  return kt(n.left, n.top, d, f);
+  return xt(n.left, n.top, h, b);
 }
 var ye = /* @__PURE__ */ function() {
   return typeof SVGGraphicsElement < "u" ? function(e) {
-    return e instanceof it(e).SVGGraphicsElement;
+    return e instanceof ot(e).SVGGraphicsElement;
   } : function(e) {
-    return e instanceof it(e).SVGElement && typeof e.getBBox == "function";
+    return e instanceof ot(e).SVGElement && typeof e.getBBox == "function";
   };
 }();
 function ke(e) {
-  return e === it(e).document.documentElement;
+  return e === ot(e).document.documentElement;
 }
 function Me(e) {
-  return xt ? ye(e) ? ge(e) : be(e) : Ut;
+  return Bt ? ye(e) ? ge(e) : be(e) : jt;
 }
 function Se(e) {
   var t = e.x, a = e.y, s = e.width, n = e.height, i = typeof DOMRectReadOnly < "u" ? DOMRectReadOnly : Object, r = Object.create(i.prototype);
-  return Ft(r, {
+  return Wt(r, {
     x: t,
     y: a,
     width: s,
@@ -189,14 +189,14 @@ function Se(e) {
     left: t
   }), r;
 }
-function kt(e, t, a, s) {
+function xt(e, t, a, s) {
   return { x: e, y: t, width: a, height: s };
 }
-var xe = (
+var Pe = (
   /** @class */
   function() {
     function e(t) {
-      this.broadcastWidth = 0, this.broadcastHeight = 0, this.contentRect_ = kt(0, 0, 0, 0), this.target = t;
+      this.broadcastWidth = 0, this.broadcastHeight = 0, this.contentRect_ = xt(0, 0, 0, 0), this.target = t;
     }
     return e.prototype.isActive = function() {
       var t = Me(this.target);
@@ -206,12 +206,12 @@ var xe = (
       return this.broadcastWidth = t.width, this.broadcastHeight = t.height, t;
     }, e;
   }()
-), Pe = (
+), xe = (
   /** @class */
   /* @__PURE__ */ function() {
     function e(t, a) {
       var s = Se(a);
-      Ft(this, { target: t, contentRect: s });
+      Wt(this, { target: t, contentRect: s });
     }
     return e;
   }()
@@ -219,7 +219,7 @@ var xe = (
   /** @class */
   function() {
     function e(t, a, s) {
-      if (this.activeObservations_ = [], this.observations_ = new $t(), typeof t != "function")
+      if (this.activeObservations_ = [], this.observations_ = new Ht(), typeof t != "function")
         throw new TypeError("The callback provided as parameter 1 is not a function.");
       this.callback_ = t, this.controller_ = a, this.callbackCtx_ = s;
     }
@@ -227,16 +227,16 @@ var xe = (
       if (!arguments.length)
         throw new TypeError("1 argument required, but only 0 present.");
       if (!(typeof Element > "u" || !(Element instanceof Object))) {
-        if (!(t instanceof it(t).Element))
+        if (!(t instanceof ot(t).Element))
           throw new TypeError('parameter 1 is not of type "Element".');
         var a = this.observations_;
-        a.has(t) || (a.set(t, new xe(t)), this.controller_.addObserver(this), this.controller_.refresh());
+        a.has(t) || (a.set(t, new Pe(t)), this.controller_.addObserver(this), this.controller_.refresh());
       }
     }, e.prototype.unobserve = function(t) {
       if (!arguments.length)
         throw new TypeError("1 argument required, but only 0 present.");
       if (!(typeof Element > "u" || !(Element instanceof Object))) {
-        if (!(t instanceof it(t).Element))
+        if (!(t instanceof ot(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));
@@ -251,7 +251,7 @@ var xe = (
     }, e.prototype.broadcastActive = function() {
       if (this.hasActive()) {
         var t = this.callbackCtx_, a = this.activeObservations_.map(function(s) {
-          return new Pe(s.target, s.broadcastRect());
+          return new xe(s.target, s.broadcastRect());
         });
         this.callback_.call(t, a, t), this.clearActive();
       }
@@ -261,7 +261,7 @@ var xe = (
       return this.activeObservations_.length > 0;
     }, e;
   }()
-), Gt = typeof WeakMap < "u" ? /* @__PURE__ */ new WeakMap() : new $t(), Kt = (
+), Zt = typeof WeakMap < "u" ? /* @__PURE__ */ new WeakMap() : new Ht(), Yt = (
   /** @class */
   /* @__PURE__ */ function() {
     function e(t) {
@@ -269,8 +269,8 @@ var xe = (
         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 = fe.getInstance(), s = new we(t, a, this);
-      Gt.set(this, s);
+      var a = pe.getInstance(), s = new we(t, a, this);
+      Zt.set(this, s);
     }
     return e;
   }()
@@ -280,46 +280,46 @@ var xe = (
   "unobserve",
   "disconnect"
 ].forEach(function(e) {
-  Kt.prototype[e] = function() {
+  Yt.prototype[e] = function() {
     var t;
-    return (t = Gt.get(this))[e].apply(t, arguments);
+    return (t = Zt.get(this))[e].apply(t, arguments);
   };
 });
 var Ee = function() {
-  return typeof mt.ResizeObserver < "u" ? mt.ResizeObserver : Kt;
+  return typeof gt.ResizeObserver < "u" ? gt.ResizeObserver : Yt;
 }();
-function et(e) {
+function st(e) {
   const t = _(0), a = _(0);
   let s = null;
   const n = () => {
     s && (s.disconnect(), s = null);
   };
-  return R(() => I(e), () => {
+  return R(() => L(e), () => {
     n();
-    const r = I(e);
+    const r = L(e);
     if (!r) return;
-    s = new Ee((f) => {
-      const l = f[0];
+    s = new Ee((b) => {
+      const l = b[0];
       l && (t.value = l.contentRect.width, a.value = l.contentRect.height);
     }), s.observe(r);
-    const d = r.getBoundingClientRect();
-    t.value = d.width, a.value = d.height;
+    const h = r.getBoundingClientRect();
+    t.value = h.width, a.value = h.height;
   }, { immediate: !0 }), ee(n), {
-    width: Ct(t),
-    height: Ct(a)
+    width: Dt(t),
+    height: Dt(a)
   };
 }
-const $ = (e, t) => {
+const U = (e, t) => {
   const a = e.__vccOpts || e;
   for (const [s, n] of t)
     a[s] = n;
   return a;
-}, Te = ["aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-label", "aria-orientation", "tabindex"], Be = {
+}, Te = ["aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-label", "aria-orientation", "tabindex"], Ce = {
   key: 0,
   class: "level"
-}, Ce = {
+}, Be = {
   __name: "AudioSlider",
-  props: /* @__PURE__ */ wt({
+  props: /* @__PURE__ */ Lt({
     min: { type: Number, default: 0 },
     max: { type: Number, default: 1 },
     step: { type: Number, default: 0.01 },
@@ -338,62 +338,62 @@ const $ = (e, t) => {
   }),
   emits: ["update:value"],
   setup(e) {
-    tt((h) => ({
-      "2096b4c3": B.value,
-      "757f26aa": T.value,
-      "744b71b7": E.value,
-      d898db12: v.value,
-      "3a8d2f7c": S.value
+    at((p) => ({
+      "2096b4c3": V.value,
+      "757f26aa": C.value,
+      "744b71b7": S.value,
+      d898db12: f.value,
+      "3a8d2f7c": P.value
     }));
-    const t = e, a = j("root"), { width: s, height: n } = et(a), i = M(() => Math.min(s.value, n.value)), r = M(() => Math.max(s.value, n.value)), d = M(() => s.value > n.value), f = M(() => d.value ? "h-slide" : "v-slide"), l = X(e, "value");
-    M(() => Math.pow(1 - l.value, 0.5) * 180 + 20), M(() => Math.pow(l.value, 0.5) * 180 + 20);
-    const g = M(() => i.value * 0.8), y = M(() => i.value * t.thumbLength * 0.8), T = M(() => (d.value ? y : g).value + "px"), B = M(() => (d.value ? g : y).value + "px"), v = M(() => i.value * 0.1 + "px"), S = M(() => (r.value - y.value) * (l.value - t.min) / (t.max - t.min) + "px"), E = M(() => d.value ? "90deg" : "0deg"), D = _(!1), V = _(0), O = (h) => {
+    const t = e, a = Y("root"), { width: s, height: n } = st(a), i = k(() => Math.min(s.value, n.value)), r = k(() => Math.max(s.value, n.value)), h = k(() => s.value > n.value), b = k(() => h.value ? "h-slide" : "v-slide"), l = tt(e, "value");
+    k(() => Math.pow(1 - l.value, 0.5) * 180 + 20), k(() => Math.pow(l.value, 0.5) * 180 + 20);
+    const v = k(() => i.value * 0.8), E = k(() => i.value * t.thumbLength * 0.8), C = k(() => (h.value ? E : v).value + "px"), V = k(() => (h.value ? v : E).value + "px"), f = k(() => i.value * 0.1 + "px"), P = k(() => (r.value - E.value) * (l.value - t.min) / (t.max - t.min) + "px"), S = k(() => h.value ? "90deg" : "0deg"), B = _(!1), N = _(0), z = (p) => {
       if (!a.value) return l.value;
-      const b = a.value.getBoundingClientRect(), A = h.clientX, st = h.clientY;
+      const g = a.value.getBoundingClientRect(), A = p.clientX, lt = p.clientY;
       let Q;
-      if (d.value) {
-        const p = A - b.left - g.value / 2, k = b.width - g.value;
-        Q = Math.max(0, Math.min(1, p / k));
+      if (h.value) {
+        const X = A - g.left - v.value / 2, J = g.width - v.value;
+        Q = Math.max(0, Math.min(1, X / J));
       } else {
-        const p = b.bottom - st - g.value / 2, k = b.height - g.value;
-        Q = Math.max(0, Math.min(1, p / k));
+        const X = g.bottom - lt - v.value / 2, J = g.height - v.value;
+        Q = Math.max(0, Math.min(1, X / J));
       }
-      const Y = t.min + Q * (t.max - t.min);
-      return t.step > 0 ? Math.round(Y / t.step) * t.step : Y;
-    }, F = (h) => {
-      h.preventDefault(), D.value = !0, V.value = l.value, a.value && a.value.focus(), l.value = O(h), a.value && a.value.setPointerCapture && a.value.setPointerCapture(h.pointerId), document.addEventListener("pointermove", U), document.addEventListener("pointerup", z), document.addEventListener("pointercancel", z);
-    }, U = (h) => {
-      D.value && (h.preventDefault(), l.value = O(h));
-    }, z = (h) => {
-      if (D.value) {
-        if (h.preventDefault(), D.value = !1, a.value && a.value.releasePointerCapture)
+      const W = t.min + Q * (t.max - t.min);
+      return t.step > 0 ? Math.round(W / t.step) * t.step : W;
+    }, q = (p) => {
+      p.preventDefault(), B.value = !0, N.value = l.value, a.value && a.value.focus(), l.value = z(p), a.value && a.value.setPointerCapture && a.value.setPointerCapture(p.pointerId), document.addEventListener("pointermove", G), document.addEventListener("pointerup", $), document.addEventListener("pointercancel", $);
+    }, G = (p) => {
+      B.value && (p.preventDefault(), l.value = z(p));
+    }, $ = (p) => {
+      if (B.value) {
+        if (p.preventDefault(), B.value = !1, a.value && a.value.releasePointerCapture)
           try {
-            a.value.releasePointerCapture(h.pointerId);
+            a.value.releasePointerCapture(p.pointerId);
           } catch {
           }
-        document.removeEventListener("pointermove", U), document.removeEventListener("pointerup", z), document.removeEventListener("pointercancel", z);
+        document.removeEventListener("pointermove", G), document.removeEventListener("pointerup", $), document.removeEventListener("pointercancel", $);
       }
-    }, Z = (h) => {
+    }, H = (p) => {
       if (a.value && a.value.getAttribute("tabindex") === "-1")
         return;
-      const b = t.keystep !== null ? t.keystep : t.step || 0.01;
+      const g = t.keystep !== null ? t.keystep : t.step || 0.01;
       let A = l.value;
-      switch (h.key) {
+      switch (p.key) {
         case "ArrowLeft":
         case "ArrowDown":
-          h.preventDefault(), A = Math.max(t.min, l.value - b);
+          p.preventDefault(), A = Math.max(t.min, l.value - g);
           break;
         case "ArrowRight":
         case "ArrowUp":
-          h.preventDefault(), A = Math.min(t.max, l.value + b);
+          p.preventDefault(), A = Math.min(t.max, l.value + g);
           break;
         default:
           return;
       }
       l.value = A;
-    }, u = (h) => Math.min(1, Math.max(0, t.level * 10 - h + 1));
-    return (h, b) => (P(), w("div", {
-      class: L(f.value),
+    }, d = (p) => Math.min(1, Math.max(0, t.level * 10 - p + 1));
+    return (p, g) => (w(), T("div", {
+      class: I(b.value),
       ref_key: "root",
       ref: a,
       role: "slider",
@@ -401,29 +401,29 @@ const $ = (e, t) => {
       "aria-valuemax": e.max,
       "aria-valuenow": l.value,
       "aria-label": `${e.style} control`,
-      "aria-orientation": d.value ? "horizontal" : "vertical",
+      "aria-orientation": h.value ? "horizontal" : "vertical",
       tabindex: e.tabindex,
-      onPointerdown: F,
-      onKeydown: Z,
+      onPointerdown: q,
+      onKeydown: H,
       style: { userSelect: "none", touchAction: "none" }
     }, [
-      b[0] || (b[0] = m("div", { class: "track" }, null, -1)),
-      e.showLevel ? (P(), w("div", Be, [
-        (P(), w(ct, null, Et(10, (A) => m("div", {
-          class: L(["focus", "led" + A])
+      g[0] || (g[0] = m("div", { class: "track" }, null, -1)),
+      e.showLevel ? (w(), T("div", Ce, [
+        (w(), T(pt, null, At(10, (A) => m("div", {
+          class: I(["focus", "led" + A])
         }, [
           m("div", {
             class: "on",
-            style: Rt({ opacity: u(A) })
+            style: Gt({ opacity: d(A) })
           }, null, 4)
         ], 2)), 64))
-      ])) : q("", !0),
+      ])) : F("", !0),
       m("div", {
-        class: L(["thumb", { dragging: D.value, [e.colour]: !0, [e.style]: !0 }])
+        class: I(["thumb", { dragging: B.value, [e.colour]: !0, [e.style]: !0 }])
       }, null, 2)
     ], 42, Te));
   }
-}, ft = /* @__PURE__ */ $(Ce, [["__scopeId", "data-v-42160c3a"]]), _e = {
+}, yt = /* @__PURE__ */ U(Be, [["__scopeId", "data-v-42160c3a"]]), _e = {
   __name: "TitleText",
   props: {
     align: {
@@ -437,19 +437,19 @@ const $ = (e, t) => {
     }
   },
   setup(e) {
-    tt((y) => ({
-      "9d94564a": f.value,
+    at((E) => ({
+      "9d94564a": b.value,
       "6241cf7e": l.value + "px"
     }));
-    const t = e, a = j("el"), s = j("textEl"), { width: n, height: i } = et(a), r = M(() => Math.min(n.value, i.value)), d = M(() => n.value > i.value ? "h-text" : "v-text"), f = M(() => r.value * 3 / 4 + "px"), l = _(0), g = _(!1);
-    return Mt(() => {
+    const t = e, a = Y("el"), s = Y("textEl"), { width: n, height: i } = st(a), r = k(() => Math.min(n.value, i.value)), h = k(() => n.value > i.value ? "h-text" : "v-text"), b = k(() => r.value * 3 / 4 + "px"), l = _(0), v = _(!1);
+    return Tt(() => {
       if (!s.value || !a.value || t.overflow !== "scroll") {
-        g.value = !1, l.value = 0;
+        v.value = !1, l.value = 0;
         return;
       }
-      const y = d.value === "h-text" ? n.value : i.value, T = d.value === "h-text" ? s.value.scrollWidth : s.value.scrollHeight, B = y - 20;
-      T > B ? (g.value = !0, l.value = T - B) : (g.value = !1, l.value = 0);
-    }), (y, T) => (P(), w("div", {
+      const E = h.value === "h-text" ? n.value : i.value, C = h.value === "h-text" ? s.value.scrollWidth : s.value.scrollHeight, V = E - 20;
+      C > V ? (v.value = !0, l.value = C - V) : (v.value = !1, l.value = 0);
+    }), (E, C) => (w(), T("div", {
       ref_key: "el",
       ref: a,
       class: "outer"
@@ -457,13 +457,13 @@ const $ = (e, t) => {
       m("div", {
         ref_key: "textEl",
         ref: s,
-        class: L({ [d.value]: !0, [e.align]: !0, scrolling: g.value })
+        class: I({ [h.value]: !0, [e.align]: !0, scrolling: v.value })
       }, [
-        rt(y.$slots, "default", {}, void 0, !0)
+        ut(E.$slots, "default", {}, void 0, !0)
       ], 2)
     ], 512));
   }
-}, qt = /* @__PURE__ */ $(_e, [["__scopeId", "data-v-8efcf3aa"]]), Ie = { class: "s-label" }, Ae = { class: "m-label" }, Le = {
+}, Qt = /* @__PURE__ */ U(_e, [["__scopeId", "data-v-8efcf3aa"]]), Le = { class: "s-label" }, Ae = { class: "m-label" }, Ie = {
   __name: "TriState",
   props: {
     mute: { default: !1 },
@@ -473,33 +473,33 @@ const $ = (e, t) => {
   },
   emits: ["update:mute", "update:solo"],
   setup(e) {
-    const t = X(e, "mute"), a = X(e, "solo"), s = j("outer"), { width: n, height: i } = et(s), r = M(() => n.value > i.value * 1.9);
-    function d() {
+    const t = tt(e, "mute"), a = tt(e, "solo"), s = Y("outer"), { width: n, height: i } = st(s), r = k(() => n.value > i.value * 1.9);
+    function h() {
       t.value = !t.value, a.value = !1;
     }
-    function f() {
+    function b() {
       a.value = !a.value, t.value = !1;
     }
-    return (l, g) => (P(), w("div", {
+    return (l, v) => (w(), T("div", {
       class: "outer",
       ref_key: "outer",
       ref: s
     }, [
       m("div", {
         title: "Solo",
-        class: L(["solo", { on: a.value }]),
-        onClick: f
+        class: I(["solo", { on: a.value }]),
+        onClick: b
       }, null, 2),
-      m("div", Ie, K(r.value ? "SOLO" : "S"), 1),
+      m("div", Le, K(r.value ? "SOLO" : "S"), 1),
       m("div", {
         title: "Mute",
-        class: L(["mute", { on: t.value }]),
-        onClick: d
+        class: I(["mute", { on: t.value }]),
+        onClick: h
       }, null, 2),
       m("div", Ae, K(r.value ? "MUTE" : "M"), 1)
     ], 512));
   }
-}, Ne = /* @__PURE__ */ $(Le, [["__scopeId", "data-v-7e3c1495"]]), Pt = {
+}, Ne = /* @__PURE__ */ U(Ie, [["__scopeId", "data-v-7e3c1495"]]), _t = {
   // Enable development UI features (animations, random data, etc.)
   enabled: !1,
   // Specific feature flags
@@ -511,7 +511,7 @@ const $ = (e, t) => {
     // Enable other debug/dev features as needed
     debugMode: !1
   }
-}, Ra = () => Pt.enabled, Ht = (e) => Pt.enabled && Pt.features[e], at = yt("audioState", {
+}, Oa = () => _t.enabled, Xt = (e) => _t.enabled && _t.features[e], nt = Pt("audioState", {
   state: () => ({
     // Playback state
     isPlaying: !1,
@@ -615,11 +615,13 @@ const $ = (e, t) => {
       this.isLoaded = e;
     }
   }
-}), J = yt("musicData", {
+}), et = Pt("musicData", {
   state: () => ({
     // Musical structure
     beats: [],
     practiceMarks: {},
+    customPracticeMarks: {},
+    // User-added marks { letter: barNumber }
     parts: [],
     title: "",
     // Timing calculations
@@ -649,6 +651,32 @@ const $ = (e, t) => {
       return e.beats.forEach((s) => {
         s.bar === t && a.add(s.repeat);
       }), a.size;
+    },
+    // All marks (predefined + custom) as object
+    allPracticeMarks: (e) => ({ ...e.practiceMarks, ...e.customPracticeMarks }),
+    // All marks sorted by bar number (returns array of letters)
+    allPracticeMarksSorted: (e) => {
+      const t = { ...e.practiceMarks, ...e.customPracticeMarks };
+      return Object.entries(t).sort(([, a], [, s]) => a - s).map(([a]) => a);
+    },
+    // Check if a bar has any mark (predefined or custom)
+    barHasMark: (e) => (t) => {
+      const a = { ...e.practiceMarks, ...e.customPracticeMarks };
+      return Object.values(a).includes(t);
+    },
+    // Check if a letter is a custom mark
+    isCustomMark: (e) => (t) => t in e.customPracticeMarks,
+    // Get next available letter (A-Z)
+    nextAvailableLetter: (e) => {
+      const t = /* @__PURE__ */ new Set([
+        ...Object.keys(e.practiceMarks),
+        ...Object.keys(e.customPracticeMarks)
+      ]);
+      for (let a = 0; a < 26; a++) {
+        const s = String.fromCharCode(65 + a);
+        if (!t.has(s)) return s;
+      }
+      return null;
     }
   },
   actions: {
@@ -658,7 +686,7 @@ const $ = (e, t) => {
         ...t,
         solo: t.solo || !1,
         mute: t.mute || !1
-      })), this.calculateDuration(), this.calculateMaxBar(), this.extractTimeSignature();
+      })), this.calculateDuration(), this.calculateMaxBar(), this.extractTimeSignature(), this.loadCustomMarksFromStorage();
     },
     // Calculate total duration from beats
     calculateDuration() {
@@ -679,6 +707,37 @@ const $ = (e, t) => {
     removePracticeMark(e) {
       delete this.practiceMarks[e];
     },
+    // Add custom practice mark at bar number
+    addCustomMark(e) {
+      const t = this.nextAvailableLetter;
+      return t && !this.barHasMark(e) ? (this.customPracticeMarks[t] = e, this.saveCustomMarksToStorage(), t) : null;
+    },
+    // Remove custom practice mark
+    removeCustomMark(e) {
+      e in this.customPracticeMarks && (delete this.customPracticeMarks[e], this.saveCustomMarksToStorage());
+    },
+    // Get localStorage key for current song
+    getStorageKey() {
+      return `customPracticeMarks_${this.title}`;
+    },
+    // Save custom marks to localStorage
+    saveCustomMarksToStorage() {
+      this.title && localStorage.setItem(this.getStorageKey(), JSON.stringify(this.customPracticeMarks));
+    },
+    // Load custom marks from localStorage
+    loadCustomMarksFromStorage() {
+      if (this.title) {
+        const e = localStorage.getItem(this.getStorageKey());
+        if (e)
+          try {
+            this.customPracticeMarks = JSON.parse(e);
+          } catch {
+            this.customPracticeMarks = {};
+          }
+        else
+          this.customPracticeMarks = {};
+      }
+    },
     // Update beats data (for when MIDI parser provides new beat information)
     updateBeats(e) {
       console.log("Updating beats in music data store"), this.beats = e, this.calculateDuration(), this.calculateMaxBar(), this.extractTimeSignature();
@@ -702,10 +761,10 @@ const $ = (e, t) => {
     },
     // Clear all music data (reset to initial state)
     clear() {
-      this.beats = [], this.practiceMarks = {}, this.parts = [], this.title = "", this.totalDuration = 0, this.maxBar = 0, this.timeSignature = 4, this.baseTempo = 80;
+      this.beats = [], this.practiceMarks = {}, this.customPracticeMarks = {}, this.parts = [], this.title = "", this.totalDuration = 0, this.maxBar = 0, this.timeSignature = 4, this.baseTempo = 80;
     }
   }
-}), Wt = yt("playbackState", {
+}), Nt = Pt("playbackState", {
   state: () => ({
     // Transport state
     transportState: "stopped",
@@ -823,10 +882,10 @@ const $ = (e, t) => {
     },
     // Navigation points management
     buildFixedNavigationPoints() {
-      const e = [], t = J();
+      const e = [], t = et();
       e.push({ time: 0, bar: 1, repeat: 1, label: "Start" });
       const a = t.beats.filter((s) => s.beat === 1);
-      for (const [s, n] of Object.entries(t.practiceMarks))
+      for (const [s, n] of Object.entries(t.allPracticeMarks))
         a.filter((i) => i.bar === n).forEach((i) => {
           e.push({
             time: i.time,
@@ -843,7 +902,7 @@ const $ = (e, t) => {
     },
     rebuildNavigationPoints() {
       setTimeout(() => {
-        const e = J(), t = [...this.fixedNavigationPoints];
+        const e = et(), t = [...this.fixedNavigationPoints];
         this.lastPlayStartBar !== null && e.beats.filter((n) => n.beat === 1 && n.bar === this.lastPlayStartBar).forEach((n) => {
           t.push({
             time: n.time,
@@ -870,7 +929,7 @@ const $ = (e, t) => {
     }
   }
 });
-function jt(e) {
+function Jt(e) {
   return { all: e = e || /* @__PURE__ */ new Map(), on: function(t, a) {
     var s = e.get(t);
     s ? s.push(a) : e.set(t, [a]);
@@ -886,7 +945,7 @@ function jt(e) {
     });
   } };
 }
-const It = ["spessasynth", "lightweight"];
+const zt = ["spessasynth", "lightweight"];
 class De {
   constructor() {
     this._engineType = "spessasynth";
@@ -897,9 +956,9 @@ class De {
    * @throws {Error} If engine type is invalid
    */
   setEngineType(t) {
-    if (!It.includes(t))
+    if (!zt.includes(t))
       throw new Error(
-        `Invalid audio engine type: "${t}". Must be one of: ${It.join(", ")}`
+        `Invalid audio engine type: "${t}". Must be one of: ${zt.join(", ")}`
       );
     this._engineType = t;
   }
@@ -920,7 +979,7 @@ class De {
 const Ve = new De();
 class ze {
   constructor() {
-    this.eventBus = jt(), this.currentTime = 0, this.isPlaying = !1, this.playbackSpeed = 1, this.masterVolume = 0.75, this.metronomeVolume = 0.7, this.parts = /* @__PURE__ */ new Map(), this.playbackTimer = null, this.lastTimestamp = 0, this.audioContext = null, this.audioEngine = null, this.playbackManager = null, this.musicData = null, this.beats = [], this.practiceMarks = {}, this.songDuration = 0, this.maxBar = 0, this.masterGain = null, this.metronomeGain = null, this.partGainNodes = /* @__PURE__ */ new Map(), this.partAnalyserNodes = /* @__PURE__ */ new Map(), this.isInitialized = !1;
+    this.eventBus = Jt(), this.currentTime = 0, this.isPlaying = !1, this.playbackSpeed = 1, this.masterVolume = 0.75, this.metronomeVolume = 0.7, this.parts = /* @__PURE__ */ new Map(), this.playbackTimer = null, this.lastTimestamp = 0, this.audioContext = null, this.audioEngine = null, this.playbackManager = null, this.musicData = null, this.beats = [], this.practiceMarks = {}, this.songDuration = 0, this.maxBar = 0, this.masterGain = null, this.metronomeGain = null, this.partGainNodes = /* @__PURE__ */ new Map(), this.partAnalyserNodes = /* @__PURE__ */ new Map(), this.isInitialized = !1;
   }
   // Sanitize part names to ensure consistent lookup
   // Remove non-printable characters, convert to lowercase, trim whitespace
@@ -945,8 +1004,8 @@ class ze {
         try {
           await this.audioEngine.initialize(r), console.log(`Loaded soundfont: ${r}`), n = !0;
           break;
-        } catch (d) {
-          console.warn(`Failed to load soundfont ${r}:`, d.message), i = d;
+        } catch (h) {
+          console.warn(`Failed to load soundfont ${r}:`, h.message), i = h;
         }
       if (!n) {
         const r = "No soundfont could be loaded";
@@ -1250,12 +1309,12 @@ class ze {
       const n = s.frequencyBinCount, i = new Uint8Array(n);
       s.getByteFrequencyData(i);
       let r = 0;
-      for (let f = 0; f < n; f++) {
-        const l = i[f] / 255;
+      for (let b = 0; b < n; b++) {
+        const l = i[b] / 255;
         r += l * l;
       }
-      const d = Math.sqrt(r / n);
-      return Math.min(1, Math.pow(d * 2, 0.7));
+      const h = Math.sqrt(r / n);
+      return Math.min(1, Math.pow(h * 2, 0.7));
     } catch (n) {
       return console.warn(`Failed to get level for part ${t}:`, n), 0;
     }
@@ -1341,150 +1400,154 @@ class ze {
   }
 }
 const c = new ze();
-function ot(e = {}) {
-  const t = at(), a = J(), s = Wt(), n = {
+function dt(e = {}) {
+  const t = nt(), a = et(), s = Nt(), n = {
     soundfontUrl: e.soundfontUrl
   }, i = ({ currentTime: o }) => {
     t.setCurrentTime(o);
   }, r = ({ isPlaying: o }) => {
     t.setPlaybackState(o), s.setTransportState(o ? "playing" : "stopped"), !o && t.isLeadInActive && (t.setLeadInActive(!1), c.emitTimeAndBarUpdates(t.currentTime));
-  }, d = (o) => {
+  }, h = (o) => {
     o && (t.isLeadInActive ? o.isLeadIn && o.beat !== void 0 && t.setCurrentBar(null, o.beat, null) : (t.setCurrentBar(o.bar, o.beat, o.repeat), s.updateLastBarPosition(o.bar)));
-  }, f = ({ speed: o }) => {
+  }, b = ({ speed: o }) => {
     t.setPlaybackSpeed(o);
   }, l = ({ volume: o }) => {
     t.setMasterVolume(o);
-  }, g = ({ partName: o, volume: x }) => {
-    t.setPartVolume(o, x);
-  }, y = ({ partName: o, muted: x }) => {
-    t.setPartMuted(o, x);
-  }, T = ({ partName: o, solo: x }) => {
-    t.setPartSolo(o, x);
-  }, B = ({ bars: o }) => {
+  }, v = ({ partName: o, volume: M }) => {
+    t.setPartVolume(o, M);
+  }, E = ({ partName: o, muted: M }) => {
+    t.setPartMuted(o, M);
+  }, C = ({ partName: o, solo: M }) => {
+    t.setPartSolo(o, M);
+  }, V = ({ bars: o }) => {
     t.setLeadInActive(!0, o);
-  }, v = () => {
+  }, f = () => {
     t.setLeadInActive(!1);
-  }, S = () => {
+  }, P = () => {
     t.setStartingNotesActive(!0);
-  }, E = () => {
+  }, S = () => {
     t.setStartingNotesActive(!1);
-  }, D = ({ mark: o }) => {
+  }, B = ({ mark: o }) => {
     s.updateLastPracticeMarkUsed(o);
-  }, V = ({ parts: o }) => {
+  }, N = ({ parts: o }) => {
     t.initializeParts(o), a.setParts(o);
-  }, O = ({ finalTime: o }) => {
-    t.setPlaybackState(!1), s.setTransportState("stopped"), console.log(`Song ended at time: ${o}`);
-  }, F = ({ duration: o }) => {
+  }, z = ({ finalTime: o }) => {
+    t.setPlaybackState(!1), s.setTransportState("stopped"), s.setNavigationAction("ended"), console.log(`Song ended at time: ${o}`);
+  }, q = ({ duration: o }) => {
     console.log("Updating total duration in store to:", o), a.setTotalDuration(o);
-  }, U = ({ beats: o, practiceMarks: x, maxBar: H }) => {
-    console.log(`Updating music data store with ${o.length} beats and ${Object.keys(x).length} practice marks`), a.updateBeats(o), a.practiceMarks = x, a.maxBar = H;
-  }, z = () => {
-    c.on("timeChanged", i), c.on("playbackStateChanged", r), c.on("barChanged", d), c.on("speedChanged", f), c.on("masterVolumeChanged", l), c.on("partVolumeChanged", g), c.on("partMutedChanged", y), c.on("partSoloChanged", T), c.on("leadInStarted", B), c.on("leadInCompleted", v), c.on("startingNotesStarted", S), c.on("startingNotesCompleted", E), c.on("practiceMarkChanged", D), c.on("initialized", V), c.on("songEnded", O), c.on("durationUpdated", F), c.on("musicDataExtracted", U);
-  }, Z = () => {
-    c.off("timeChanged", i), c.off("playbackStateChanged", r), c.off("barChanged", d), c.off("speedChanged", f), c.off("masterVolumeChanged", l), c.off("partVolumeChanged", g), c.off("partMutedChanged", y), c.off("partSoloChanged", T), c.off("leadInStarted", B), c.off("leadInCompleted", v), c.off("startingNotesStarted", S), c.off("startingNotesCompleted", E), c.off("practiceMarkChanged", D), c.off("initialized", V), c.off("songEnded", O), c.off("durationUpdated", F), c.off("musicDataExtracted", U);
+  }, G = ({ beats: o, practiceMarks: M, maxBar: j }) => {
+    console.log(`Updating music data store with ${o.length} beats and ${Object.keys(M).length} practice marks`), a.updateBeats(o), a.practiceMarks = M, a.maxBar = j;
+  }, $ = () => {
+    c.on("timeChanged", i), c.on("playbackStateChanged", r), c.on("barChanged", h), c.on("speedChanged", b), c.on("masterVolumeChanged", l), c.on("partVolumeChanged", v), c.on("partMutedChanged", E), c.on("partSoloChanged", C), c.on("leadInStarted", V), c.on("leadInCompleted", f), c.on("startingNotesStarted", P), c.on("startingNotesCompleted", S), c.on("practiceMarkChanged", B), c.on("initialized", N), c.on("songEnded", z), c.on("durationUpdated", q), c.on("musicDataExtracted", G);
+  }, H = () => {
+    c.off("timeChanged", i), c.off("playbackStateChanged", r), c.off("barChanged", h), c.off("speedChanged", b), c.off("masterVolumeChanged", l), c.off("partVolumeChanged", v), c.off("partMutedChanged", E), c.off("partSoloChanged", C), c.off("leadInStarted", V), c.off("leadInCompleted", f), c.off("startingNotesStarted", P), c.off("startingNotesCompleted", S), c.off("practiceMarkChanged", B), c.off("initialized", N), c.off("songEnded", z), c.off("durationUpdated", q), c.off("musicDataExtracted", G);
   };
   (() => {
-    Mt(() => {
+    Tt(() => {
       const o = t.masterVolume;
       try {
         c.getMasterVolume() !== o && c.setMasterVolume(o);
-      } catch (x) {
-        console.warn("Master volume sync skipped during initialization:", x.message);
+      } catch (M) {
+        console.warn("Master volume sync skipped during initialization:", M.message);
       }
-    }), Mt(() => {
+    }), Tt(() => {
       const o = t.metronomeVolume;
       try {
         c.getMetronomeVolume() !== o && c.setMetronomeVolume(o);
-      } catch (x) {
-        console.warn("Metronome volume sync skipped during initialization:", x.message);
+      } catch (M) {
+        console.warn("Metronome volume sync skipped during initialization:", M.message);
       }
     });
   })();
-  const h = async (o) => {
+  const p = async (o) => {
     try {
-      if (t.setLoaded(!1), z(), a.loadMusicData(o), await c.initialize(o, n), s.buildFixedNavigationPoints(), !o.midiData && o.beats && o.beats.length > 0) {
-        const x = o.beats[0];
-        t.setCurrentBar(x.bar, x.beat, x.repeat), c.setTime(x.time);
+      if (t.setLoaded(!1), $(), a.loadMusicData(o), await c.initialize(o, n), s.buildFixedNavigationPoints(), !o.midiData && o.beats && o.beats.length > 0) {
+        const M = o.beats[0];
+        t.setCurrentBar(M.bar, M.beat, M.repeat), c.setTime(M.time);
       }
       c.updateToggleStates(t.metronomeEnabled, t.leadInEnabled), t.setLoaded(!0);
-    } catch (x) {
-      throw console.error("Failed to initialize audio engine:", x), t.setLoaded(!1), x;
+    } catch (M) {
+      throw console.error("Failed to initialize audio engine:", M), t.setLoaded(!1), M;
     }
-  }, b = () => {
-    const o = t.currentBar, x = t.currentRepeat, H = t.currentTime;
-    s.setLastPlayStart(o, x, H), s.setNavigationAction("play"), c.play();
+  }, g = () => {
+    const o = t.currentBar, M = t.currentRepeat, j = t.currentTime;
+    s.setLastPlayStart(o, M, j), s.setNavigationAction("play"), c.play();
   }, A = () => {
     s.setNavigationAction("pause"), c.stop();
-  }, st = () => {
+  }, lt = () => {
     s.setNavigationAction("pause"), c.pause();
   }, Q = (o) => {
     s.setNavigationAction("manual"), c.setTime(o);
-  }, Y = (o, x = 0) => {
-    s.setNavigationAction("manual"), c.setBar(o, x);
-  }, p = (o) => {
-    c.goToPracticeMark(o);
-  }, k = (o) => {
+  }, W = (o, M = 0) => {
+    s.setNavigationAction("manual"), c.setBar(o, M);
+  }, X = (o) => {
+    if (a.isCustomMark(o)) {
+      const M = a.customPracticeMarks[o];
+      M !== void 0 && c.setBar(M);
+    } else
+      c.goToPracticeMark(o);
+  }, J = (o) => {
     c.setPlaybackSpeed(o);
-  }, C = (o) => {
+  }, ct = (o) => {
     c.setMasterVolume(o);
-  }, G = (o, x) => {
-    c.setPartVolume(o, x);
-  }, lt = (o, x) => {
-    c.setPartMuted(o, x);
-  }, ut = (o, x) => {
-    c.setPartSolo(o, x);
-  }, dt = (o = 1) => {
+  }, ht = (o, M) => {
+    c.setPartVolume(o, M);
+  }, wt = (o, M) => {
+    c.setPartMuted(o, M);
+  }, mt = (o, M) => {
+    c.setPartSolo(o, M);
+  }, ft = (o = 1) => {
     c.playLeadIn(o);
-  }, Yt = () => {
+  }, Et = () => {
     c.playStartingNotes();
-  }, Bt = (o, x = !0, H = 0) => {
-    x && s.leadInEnabled ? (Y(o, H), dt(s.leadInBars)) : (Y(o, H), b());
-  }, Qt = (o, x = !0) => {
-    const H = a.getBarForMark(o);
-    H && Bt(H, x);
-  }, Xt = () => {
+  }, u = (o, M = !0, j = 0) => {
+    M && s.leadInEnabled ? (W(o, j), ft(s.leadInBars)) : (W(o, j), g());
+  }, y = (o, M = !0) => {
+    const j = a.getBarForMark(o);
+    j && u(j, M);
+  }, x = () => {
     const o = !t.metronomeEnabled;
     return t.setMetronomeEnabled(o), c.setMetronomeEnabled(o), o;
-  }, Jt = () => {
+  }, O = () => {
     const o = !t.leadInEnabled;
     return t.setLeadInEnabled(o), c.updateToggleStates(t.metronomeEnabled, o), o;
-  }, te = () => {
+  }, it = () => {
     c.stop(), t.setLoaded(!1), a.clear(), console.log("Audio mixer reset - ready for new score");
   };
-  return vt(() => {
-    Z();
+  return kt(() => {
+    H();
   }), {
     // Initialization
-    initialize: h,
-    reset: te,
+    initialize: p,
+    reset: it,
     // Transport controls
-    play: b,
+    play: g,
     stop: A,
-    pause: st,
+    pause: lt,
     // Time controls
     setTime: Q,
-    setBar: Y,
+    setBar: W,
     // Navigation
-    goToPracticeMark: p,
-    setPlaybackSpeed: k,
+    goToPracticeMark: X,
+    setPlaybackSpeed: J,
     // Volume controls
-    setMasterVolume: C,
-    setPartVolume: G,
-    setPartMuted: lt,
-    setPartSolo: ut,
+    setMasterVolume: ct,
+    setPartVolume: ht,
+    setPartMuted: wt,
+    setPartSolo: mt,
     getPartLevel: (o) => c.getPartLevel(o),
     // Special features
-    playLeadIn: dt,
-    playStartingNotes: Yt,
+    playLeadIn: ft,
+    playStartingNotes: Et,
     // Feature toggles
-    toggleMetronome: Xt,
-    toggleLeadIn: Jt,
+    toggleMetronome: x,
+    toggleLeadIn: O,
     setMetronomeEnabled: (o) => {
       t.setMetronomeEnabled(o), c.setMetronomeEnabled(o);
     },
     // Complex operations
-    playFromBar: Bt,
-    playFromMark: Qt,
+    playFromBar: u,
+    playFromMark: y,
     // Access to stores for components
     audioState: t,
     musicData: a,
@@ -1493,9 +1556,9 @@ function ot(e = {}) {
     audioEngine: c
   };
 }
-const Re = ["aria-label"], Oe = {
+const Oe = ["aria-label"], Re = {
   __name: "PartControl",
-  props: /* @__PURE__ */ wt({
+  props: /* @__PURE__ */ Lt({
     name: {
       type: String,
       required: !0
@@ -1515,247 +1578,295 @@ const Re = ["aria-label"], Oe = {
   }),
   emits: ["update:volume", "update:mute", "update:solo"],
   setup(e) {
-    tt((v) => ({
+    at((f) => ({
       "03f87250": l.value
     }));
     const t = e;
-    at();
-    const a = ot(), s = X(e, "volume"), n = X(e, "mute"), i = X(e, "solo");
-    R(s, (v) => {
-      a.setPartVolume(t.name, v);
-    }), R(n, (v) => {
-      a.setPartMuted(t.name, v), v && (i.value = !1);
-    }), R(i, (v) => {
-      a.setPartSolo(t.name, v), v && (n.value = !1);
+    nt();
+    const a = dt(), s = tt(e, "volume"), n = tt(e, "mute"), i = tt(e, "solo");
+    R(s, (f) => {
+      a.setPartVolume(t.name, f);
+    }), R(n, (f) => {
+      a.setPartMuted(t.name, f), f && (i.value = !1);
+    }), R(i, (f) => {
+      a.setPartSolo(t.name, f), f && (n.value = !1);
     });
-    const r = j("el"), { width: d, height: f } = et(r), l = M(() => Math.min(d.value, f.value) + "px"), g = M(
-      () => d.value > f.value ? "mobile" : d.value < 60 ? "tablet" : "desktop"
+    const r = Y("el"), { width: h, height: b } = st(r), l = k(() => Math.min(h.value, b.value) + "px"), v = k(
+      () => h.value > b.value ? "mobile" : h.value < 60 ? "tablet" : "desktop"
     );
-    let y = null;
-    const T = _(0);
-    gt(() => {
-      y = setInterval(() => {
+    let E = null;
+    const C = _(0);
+    Mt(() => {
+      E = setInterval(() => {
         if (n.value)
-          T.value = 0;
+          C.value = 0;
         else
           try {
-            T.value = a.getPartLevel(t.name);
+            C.value = a.getPartLevel(t.name);
           } catch {
-            Ht("randomLevelIndicators") ? T.value = Math.random() * s.value : T.value = 0;
+            Xt("randomLevelIndicators") ? C.value = Math.random() * s.value : C.value = 0;
           }
       }, 16);
-    }), vt(() => {
-      y && (clearInterval(y), y = null);
+    }), kt(() => {
+      E && (clearInterval(E), E = null);
     });
-    const B = (v) => {
-      if (["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(v.key)) {
-        v.preventDefault(), v.stopPropagation();
-        const S = v.key === "ArrowUp" || v.key === "ArrowRight" ? 0.1 : -0.1;
-        s.value = Math.max(0, Math.min(1, s.value + S));
-      } else v.key === "m" && !v.shiftKey ? (v.preventDefault(), v.stopPropagation(), n.value = !n.value) : v.key === "s" && !v.shiftKey && (v.preventDefault(), v.stopPropagation(), i.value = !i.value);
+    const V = (f) => {
+      if (["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(f.key)) {
+        f.preventDefault(), f.stopPropagation();
+        const P = f.key === "ArrowUp" || f.key === "ArrowRight" ? 0.1 : -0.1;
+        s.value = Math.max(0, Math.min(1, s.value + P));
+      } else f.key === "m" && !f.shiftKey ? (f.preventDefault(), f.stopPropagation(), n.value = !n.value) : f.key === "s" && !f.shiftKey && (f.preventDefault(), f.stopPropagation(), i.value = !i.value);
     };
-    return (v, S) => (P(), w("div", {
+    return (f, P) => (w(), T("div", {
       ref_key: "el",
       ref: r,
-      class: L([g.value, "part"]),
+      class: I([v.value, "part"]),
       tabindex: "0",
       role: "group",
       "aria-label": `${e.name} part controls`,
-      onKeydown: B
+      onKeydown: V
     }, [
-      S[3] || (S[3] = m("div", { class: "focus" }, null, -1)),
-      N(Ne, {
+      P[3] || (P[3] = m("div", { class: "focus" }, null, -1)),
+      D(Ne, {
         class: "tri",
         mute: n.value,
-        "onUpdate:mute": S[0] || (S[0] = (E) => n.value = E),
+        "onUpdate:mute": P[0] || (P[0] = (S) => n.value = S),
         solo: i.value,
-        "onUpdate:solo": S[1] || (S[1] = (E) => i.value = E),
+        "onUpdate:solo": P[1] || (P[1] = (S) => i.value = S),
         tabindex: "-1"
       }, null, 8, ["mute", "solo"]),
-      N(qt, {
+      D(Qt, {
         align: "left",
         class: "name"
       }, {
-        default: W(() => [
-          bt(K(e.name), 1)
+        default: Z(() => [
+          St(K(e.name), 1)
         ]),
         _: 1
       }),
-      N(ft, {
-        level: T.value,
+      D(yt, {
+        level: C.value,
         "show-level": !0,
         class: "vol",
         value: s.value,
-        "onUpdate:value": S[2] || (S[2] = (E) => s.value = E),
+        "onUpdate:value": P[2] || (P[2] = (S) => s.value = S),
         step: 0.01,
         tabindex: "-1"
       }, null, 8, ["level", "value"])
-    ], 42, Re));
+    ], 42, Oe));
   }
-}, $e = /* @__PURE__ */ $(Oe, [["__scopeId", "data-v-67bb489c"]]), Fe = { class: "mark" }, Ue = { class: "rpt" }, Ge = { class: "beat-ind" }, Ke = { class: "beat" }, qe = {
+}, $e = /* @__PURE__ */ U(Re, [["__scopeId", "data-v-67bb489c"]]), Fe = { class: "mark" }, Ue = { class: "rpt" }, Ke = { class: "beat-ind" }, Ge = { class: "beat" }, qe = {
   key: 1,
   class: "mark-grid-container"
 }, He = { class: "mark-grid" }, We = ["onClick"], je = {
   __name: "BarInput",
   setup(e) {
-    tt((p) => ({
-      77574882: D.value,
-      "188cd0ae": V.value
+    at((u) => ({
+      aa78c0c8: q.value,
+      "286643ea": G.value
     }));
-    const t = j("el"), a = j("rpt"), { width: s, height: n } = et(t), i = J(), r = at(), d = ot(), f = _("1"), l = _("A"), g = _(0), y = _(2), T = _(!1), B = _(!1), v = _(!1), S = _(!0);
-    let E = null;
+    const t = Y("el"), a = Y("rpt"), { width: s, height: n } = st(t), i = et(), r = nt(), h = Nt(), b = dt(), l = _("1"), v = _("A"), E = _(0), C = _(2), V = _(!1), f = _(!1), P = _(!1), S = _(!1), B = _(/* @__PURE__ */ new Set()), N = _(!0);
+    let z = null;
     R(() => {
-      var p;
-      return ((p = i.beats) == null ? void 0 : p.length) > 0;
-    }, (p) => {
-      console.log(p), p && !T.value && (f.value = r.currentBar.toString(), g.value = r.currentRepeat, y.value = i.getRepeatCountForBar(r.currentBar), U(r.currentBar), T.value = !0);
-    }), R(() => r.currentBar, (p) => {
-      y.value = i.getRepeatCountForBar(p);
-    }), R(f, () => {
-      f.value = f.value.replace(/\D/g, ""), f.value.length > 3 && (f.value = f.value.slice(0, 3));
-    }), R(() => r.currentBar, (p) => {
-      f.value = p.toString(), U(p);
+      var u;
+      return ((u = i.beats) == null ? void 0 : u.length) > 0;
+    }, (u) => {
+      console.log(u), u && !V.value && (l.value = r.currentBar.toString(), E.value = r.currentRepeat, C.value = i.getRepeatCountForBar(r.currentBar), g(r.currentBar), V.value = !0);
+    }), R(() => r.currentBar, (u) => {
+      C.value = i.getRepeatCountForBar(u);
+    }), R(l, () => {
+      l.value = l.value.replace(/\D/g, ""), l.value.length > 3 && (l.value = l.value.slice(0, 3));
+    }), R(() => r.currentBar, (u) => {
+      l.value = u.toString(), g(u);
     }), R(() => r.currentBeat, () => {
-      S.value = !0, setTimeout(() => {
-        S.value = !1;
+      N.value = !0, setTimeout(() => {
+        N.value = !1;
       }, 50);
-    }), R(B, () => {
-      B.value && Q();
+    }), R(f, () => {
+      f.value && ft();
     });
-    const D = M(() => Math.min(n.value / 2.25, s.value / 4.5) + "px"), V = M(() => Math.min(s.value / 15, n.value / 6.4) + "px"), O = M(() => Object.keys(i.practiceMarks).sort()), F = M(() => O.value.length > 0);
-    function U(p) {
-      const k = Object.keys(i.practiceMarks).filter((C) => i.practiceMarks[C] <= p).sort((C, G) => i.practiceMarks[G] - i.practiceMarks[C]);
-      k.length > 0 && (l.value = k[0]);
+    const q = k(() => Math.min(n.value / 2.25, s.value / 4.5) + "px"), G = k(() => Math.min(s.value / 15, n.value / 6.4) + "px"), $ = k(() => i.allPracticeMarksSorted), H = k(() => !i.barHasMark(r.currentBar) && i.nextAvailableLetter !== null), d = k(() => !0), p = k(() => Object.keys(i.customPracticeMarks).length > 0);
+    function g(u) {
+      const y = i.allPracticeMarks, x = Object.keys(y).filter((O) => y[O] <= u).sort((O, it) => y[it] - y[O]);
+      x.length > 0 ? v.value = x[0] : v.value = "";
     }
-    function z() {
-      var k;
-      const p = parseInt(f.value);
-      if (~isNaN(p)) {
-        Z(p);
-        const C = (k = t.value) == null ? void 0 : k.querySelector(".bar-input");
-        C && C.blur(), t.value && t.value.focus();
+    function A() {
+      var y;
+      const u = parseInt(l.value);
+      if (~isNaN(u)) {
+        lt(u);
+        const x = (y = t.value) == null ? void 0 : y.querySelector(".bar-input");
+        x && x.blur(), t.value && t.value.focus();
       }
     }
-    function Z(p) {
-      d.setBar(p, 0);
+    function lt(u) {
+      b.setBar(u, 0);
     }
-    function u(p, k) {
-      k && k.stopPropagation(), l.value = p, B.value = !1, d.goToPracticeMark(p), t.value && t.value.blur();
+    function Q(u, y) {
+      if (y && y.stopPropagation(), S.value) {
+        i.isCustomMark(u) && J(u);
+        return;
+      }
+      v.value = u, f.value = !1, b.goToPracticeMark(u), t.value && t.value.blur();
     }
-    function h() {
-      y.value > 1 && (v.value = !0), r.currentRepeat < y.value && d.setBar(r.currentBar, r.currentRepeat + 1);
+    function W(u) {
+      u && u.stopPropagation();
+      const y = i.addCustomMark(r.currentBar);
+      y && (v.value = y, f.value = !1, h.buildFixedNavigationPoints());
     }
-    function b() {
-      y.value > 1 && (v.value = !0), r.currentRepeat > 1 && d.setBar(r.currentBar, r.currentRepeat - 1);
+    function X(u) {
+      if (u && u.stopPropagation(), S.value) {
+        const y = B.value.size > 0;
+        B.value.forEach((x) => {
+          i.removeCustomMark(x);
+        }), B.value = /* @__PURE__ */ new Set(), S.value = !1, g(r.currentBar), y && h.buildFixedNavigationPoints();
+      } else
+        S.value = !0, B.value = /* @__PURE__ */ new Set();
+    }
+    function J(u, y) {
+      const x = new Set(B.value);
+      x.has(u) ? x.delete(u) : x.add(u), B.value = x;
+    }
+    function ct() {
+      C.value > 1 && (P.value = !0), r.currentRepeat < C.value && b.setBar(r.currentBar, r.currentRepeat + 1);
     }
-    function A(p) {
-      F.value && (p.stopPropagation(), v.value = !1, B.value = !B.value);
+    function ht() {
+      C.value > 1 && (P.value = !0), r.currentRepeat > 1 && b.setBar(r.currentBar, r.currentRepeat - 1);
     }
-    function st(p) {
-      var k, C;
-      (k = t.value) != null && k.contains(p.target) || (B.value = !1), (C = a.value) != null && C.contains(p.target) || (v.value = !1);
+    function wt(u) {
+      u.stopPropagation(), P.value = !1, f.value = !f.value, !f.value && S.value && (S.value = !1, B.value = /* @__PURE__ */ new Set());
     }
-    function Q() {
-      B.value && setTimeout(() => {
-        var C, G;
-        const p = (C = t.value) == null ? void 0 : C.querySelector(".mark-grid"), k = (G = t.value) == null ? void 0 : G.querySelector(".mark-option.selected");
-        if (k && p) {
-          const lt = p.getBoundingClientRect(), ut = k.getBoundingClientRect(), dt = ut.left - lt.left - lt.width / 2 + ut.width / 2;
-          p.scrollLeft = Math.max(0, p.scrollLeft + dt);
+    function mt(u) {
+      var y, x;
+      (y = t.value) != null && y.contains(u.target) || (f.value = !1, S.value && (S.value = !1, B.value = /* @__PURE__ */ new Set())), (x = a.value) != null && x.contains(u.target) || (P.value = !1);
+    }
+    function ft() {
+      f.value && setTimeout(() => {
+        var x, O;
+        const u = (x = t.value) == null ? void 0 : x.querySelector(".mark-grid"), y = (O = t.value) == null ? void 0 : O.querySelector(".mark-option.selected");
+        if (y && u) {
+          const it = u.getBoundingClientRect(), o = y.getBoundingClientRect(), M = o.left - it.left - it.width / 2 + o.width / 2;
+          u.scrollLeft = Math.max(0, u.scrollLeft + M);
         }
       }, 50);
     }
-    gt(() => {
-      document.addEventListener("click", st), Ht("beatAnimation") && (E = setInterval(() => {
-        const p = r.currentBeat % i.timeSignature + 1;
-        r.setCurrentBar(r.currentBar, p, r.currentRepeat);
+    Mt(() => {
+      document.addEventListener("click", mt), Xt("beatAnimation") && (z = setInterval(() => {
+        const u = r.currentBeat % i.timeSignature + 1;
+        r.setCurrentBar(r.currentBar, u, r.currentRepeat);
       }, 800));
-    }), vt(() => {
-      document.removeEventListener("click", st), E && (clearInterval(E), E = null);
+    }), kt(() => {
+      document.removeEventListener("click", mt), z && (clearInterval(z), z = null);
     });
-    const Y = (p) => {
-      var C;
-      const k = (C = t.value) == null ? void 0 : C.querySelector(".bar-input");
-      if (document.activeElement !== k)
-        if (/^[a-z]$/.test(p.key) && !p.ctrlKey && !p.metaKey && !p.shiftKey) {
-          p.preventDefault(), p.stopPropagation();
-          const G = p.key.toUpperCase();
-          O.value.includes(G) && u(G, null);
-        } else p.key === "ArrowUp" ? (p.preventDefault(), p.stopPropagation(), h()) : p.key === "ArrowDown" ? (p.preventDefault(), p.stopPropagation(), b()) : p.key === "Enter" && (p.preventDefault(), p.stopPropagation(), z());
+    const Et = (u) => {
+      var x;
+      const y = (x = t.value) == null ? void 0 : x.querySelector(".bar-input");
+      if (document.activeElement !== y)
+        if (/^[a-z]$/.test(u.key) && !u.ctrlKey && !u.metaKey && !u.shiftKey) {
+          u.preventDefault(), u.stopPropagation();
+          const O = u.key.toUpperCase();
+          $.value.includes(O) && Q(O, null);
+        } else u.key === "ArrowUp" ? (u.preventDefault(), u.stopPropagation(), ct()) : u.key === "ArrowDown" ? (u.preventDefault(), u.stopPropagation(), ht()) : u.key === "Enter" ? (u.preventDefault(), u.stopPropagation(), A()) : u.key === "+" && (u.preventDefault(), u.stopPropagation(), H.value && W(null));
     };
-    return (p, k) => (P(), w("div", {
+    return (u, y) => (w(), T("div", {
       ref_key: "el",
       ref: t,
-      class: L(["outer", { pulse: S.value, "mark-selecting": B.value }]),
+      class: I(["outer", { pulse: N.value, "mark-selecting": f.value }]),
       tabindex: "0",
       role: "group",
       "aria-label": "Musical navigation",
-      onKeydown: Y
+      onKeydown: Et
     }, [
-      k[6] || (k[6] = m("div", { class: "frame" }, null, -1)),
+      y[9] || (y[9] = m("div", { class: "frame" }, null, -1)),
       m("div", {
-        class: L(["mark-input", { empty: !l.value, edit: B.value, disabled: !F.value }]),
+        class: I(["mark-input", { empty: !v.value, edit: f.value, disabled: !d.value }]),
         tabindex: "-1",
-        onClick: A
+        onClick: wt
       }, [
-        m("div", Fe, K(F.value ? l.value : "-"), 1)
+        m("div", Fe, K(v.value || "-"), 1)
       ], 2),
-      k[7] || (k[7] = m("div", { class: "mark-title" }, "Mark", -1)),
-      B.value ? q("", !0) : (P(), w(ct, { key: 0 }, [
-        Tt(m("input", {
+      y[10] || (y[10] = m("div", { class: "mark-title" }, "Mark", -1)),
+      f.value ? F("", !0) : (w(), T(pt, { key: 0 }, [
+        It(m("input", {
           type: "text",
           class: "bar-input",
-          "onUpdate:modelValue": k[0] || (k[0] = (C) => f.value = C),
+          "onUpdate:modelValue": y[0] || (y[0] = (x) => l.value = x),
           inputmode: "decimal",
           pattern: "\\d*",
           tabindex: "-1",
-          onChange: z,
-          onKeyup: ae(z, ["enter"])
+          onChange: A,
+          onKeyup: ae(A, ["enter"])
         }, null, 544), [
-          [Ot, f.value]
+          [qt, l.value]
         ]),
-        k[3] || (k[3] = m("div", { class: "bar-title" }, "Bar", -1)),
+        y[5] || (y[5] = m("div", { class: "bar-title" }, "Bar", -1)),
         m("div", {
           ref_key: "rpt",
           ref: a,
-          class: L(["rpt-input", { edit: v.value, available: y.value > 1 }])
+          class: I(["rpt-input", { edit: P.value, available: C.value > 1 }])
         }, [
-          m("div", Ue, K(I(r).currentRepeat || "-"), 1),
-          (P(), w("svg", {
-            class: L(["inc", { disabled: I(r).currentRepeat >= y.value }]),
+          m("div", Ue, K(L(r).currentRepeat || "-"), 1),
+          (w(), T("svg", {
+            class: I(["inc", { disabled: L(r).currentRepeat >= C.value }]),
             viewBox: "0 -100 100 100",
-            onClick: St(h, ["prevent"])
-          }, k[1] || (k[1] = [
+            onClick: Ct(ct, ["prevent"])
+          }, y[3] || (y[3] = [
             m("path", { d: "m10-20 40-60 40 60H10Z" }, null, -1)
           ]), 2)),
-          (P(), w("svg", {
-            class: L(["dec", { disabled: I(r).currentRepeat <= 1 }]),
+          (w(), T("svg", {
+            class: I(["dec", { disabled: L(r).currentRepeat <= 1 }]),
             viewBox: "0 -100 100 100",
-            onClick: St(b, ["prevent"])
-          }, k[2] || (k[2] = [
+            onClick: Ct(ht, ["prevent"])
+          }, y[4] || (y[4] = [
             m("path", { d: "m10-80 40 60 40-60H10Z" }, null, -1)
           ]), 2))
         ], 2),
-        k[4] || (k[4] = m("div", { class: "rpt-title" }, "Rpt", -1)),
-        m("div", Ge, [
-          m("div", Ke, K(I(r).currentBeat), 1)
+        y[6] || (y[6] = m("div", { class: "rpt-title" }, "Rpt", -1)),
+        m("div", Ke, [
+          m("div", Ge, K(L(r).currentBeat), 1)
         ]),
-        k[5] || (k[5] = m("div", { class: "beat-title" }, "Beat", -1))
+        y[7] || (y[7] = m("div", { class: "beat-title" }, "Beat", -1))
       ], 64)),
-      B.value ? (P(), w("div", qe, [
+      f.value ? (w(), T("div", qe, [
         m("div", He, [
-          (P(!0), w(ct, null, Et(O.value, (C) => (P(), w("div", {
-            key: C,
-            class: L(["mark-option", { selected: C === l.value }]),
-            onClick: (G) => u(C, G)
-          }, K(C), 11, We))), 128))
+          (w(!0), T(pt, null, At($.value, (x) => (w(), T("div", {
+            key: x,
+            class: I(["mark-option", {
+              selected: !S.value && x === v.value,
+              deleting: S.value && B.value.has(x),
+              custom: L(i).isCustomMark(x),
+              greyed: S.value && !L(i).isCustomMark(x)
+            }]),
+            onClick: (O) => Q(x, O)
+          }, K(x), 11, We))), 128)),
+          H.value ? (w(), T("div", {
+            key: 0,
+            class: I(["mark-option add-mark", { greyed: S.value }]),
+            onClick: y[1] || (y[1] = (x) => !S.value && W(x))
+          }, " + ", 2)) : F("", !0),
+          p.value ? (w(), T("div", {
+            key: 1,
+            class: I(["mark-option trash-icon", { active: S.value }]),
+            onClick: y[2] || (y[2] = (x) => X(x))
+          }, y[8] || (y[8] = [
+            m("svg", {
+              viewBox: "0 -960 960 960",
+              fill: "currentColor"
+            }, [
+              m("path", {
+                transform: "rotate(135)",
+                d: "M -831.95532 179.98077 L -751.96387 179.98077 L -751.96387 39.995727 L -611.97882 39.995727 L -611.97882 -39.995727 L -751.96387 -39.995727 L -751.96387 -179.98077 L -831.95532 -179.98077 L -831.95532 -39.995727 L -971.94037 -39.995727 L -971.94037 39.995727 L -831.95532 39.995727 L -831.95532 179.98077 z "
+              }),
+              m("path", { d: "M 280 -840 L 280 -680 L 120 -680 L 120 -120 L 680 -120 L 680 -280 L 840 -280 L 840 -840 L 280 -840 z M 360 -760 L 760 -760 L 760 -360 L 360 -360 L 360 -760 z M 200 -600 L 280 -600 L 280 -280 L 600 -280 L 600 -200 L 200 -200 L 200 -600 z " })
+            ], -1)
+          ]), 2)) : F("", !0)
         ])
-      ])) : q("", !0)
+      ])) : F("", !0)
     ], 34));
   }
-}, Ze = /* @__PURE__ */ $(je, [["__scopeId", "data-v-7856f4ec"]]), Ye = { class: "frame" }, Qe = { class: "title" }, Xe = {
+}, Ze = /* @__PURE__ */ U(je, [["__scopeId", "data-v-e542aa14"]]), Ye = { class: "frame" }, Qe = { class: "title" }, Xe = {
   __name: "BaseNumericInput",
-  props: /* @__PURE__ */ wt({
+  props: /* @__PURE__ */ Lt({
     title: {
       type: String,
       required: !0
@@ -1818,48 +1929,48 @@ const Re = ["aria-label"], Oe = {
   }),
   emits: ["update:value"],
   setup(e) {
-    tt((g) => ({
+    at((v) => ({
       "391e6684": e.textColor,
       "6eae8f5d": e.backgroundColor,
       "6ee151eb": e.color,
-      "29a40ccc": f.value,
-      "7366daab": d.value,
+      "29a40ccc": b.value,
+      "7366daab": h.value,
       "0f87383a": e.focusColor
     }));
-    const t = e, a = j("el"), { width: s, height: n } = et(a), i = X(e, "value"), r = _(t.formatValue(t.transformSliderToDisplay(i.value)));
+    const t = e, a = Y("el"), { width: s, height: n } = st(a), i = tt(e, "value"), r = _(t.formatValue(t.transformSliderToDisplay(i.value)));
     R(i, () => {
-      const g = t.transformSliderToDisplay(i.value);
-      r.value = t.formatValue(g);
+      const v = t.transformSliderToDisplay(i.value);
+      r.value = t.formatValue(v);
     }), R(r, () => {
       r.value = t.validateInput(r.value), t.maxChars && r.value.length > t.maxChars && (r.value = r.value.slice(0, t.maxChars));
     });
-    const d = M(() => Math.min(n.value / 2.25, s.value / 2.2) + "px"), f = M(() => Math.min(s.value / 3, n.value / 6.4) + "px");
+    const h = k(() => Math.min(n.value / 2.25, s.value / 2.2) + "px"), b = k(() => Math.min(s.value / 3, n.value / 6.4) + "px");
     function l() {
-      const g = t.parseValue(r.value), y = t.transformDisplayToSlider(g);
-      i.value = Math.min(Math.max(y, t.sliderMin), t.sliderMax);
+      const v = t.parseValue(r.value), E = t.transformDisplayToSlider(v);
+      i.value = Math.min(Math.max(E, t.sliderMin), t.sliderMax);
     }
-    return (g, y) => (P(), w("div", {
+    return (v, E) => (w(), T("div", {
       class: "outer",
       ref_key: "el",
       ref: a
     }, [
       m("div", Ye, [
-        Tt(m("input", {
+        It(m("input", {
           type: "text",
           class: "input",
-          "onUpdate:modelValue": y[0] || (y[0] = (T) => r.value = T),
+          "onUpdate:modelValue": E[0] || (E[0] = (C) => r.value = C),
           inputmode: "decimal",
           pattern: "\\d*",
           onChange: l
         }, null, 544), [
-          [Ot, r.value]
+          [qt, r.value]
         ]),
         m("div", Qe, K(e.title), 1)
       ]),
-      N(ft, {
+      D(yt, {
         class: "slider",
         value: i.value,
-        "onUpdate:value": y[1] || (y[1] = (T) => i.value = T),
+        "onUpdate:value": E[1] || (E[1] = (C) => i.value = C),
         "thumb-length": e.thumbLength,
         max: e.sliderMax,
         min: e.sliderMin,
@@ -1867,30 +1978,30 @@ const Re = ["aria-label"], Oe = {
       }, null, 8, ["value", "thumb-length", "max", "min"])
     ], 512));
   }
-}, Zt = /* @__PURE__ */ $(Xe, [["__scopeId", "data-v-3c97bdb4"]]), Je = {
+}, te = /* @__PURE__ */ U(Xe, [["__scopeId", "data-v-3c97bdb4"]]), Je = {
   __name: "SpeedInput",
   setup(e) {
-    const t = at(), a = ot(), s = M({
+    const t = nt(), a = dt(), s = k({
       get: () => Math.log2(t.playbackSpeed) * 0.5 + 0.5,
       set: (l) => {
-        const g = Math.floor(Math.pow(2, l * 2 - 1) * 20 + 0.5) * 0.05;
-        a.setPlaybackSpeed(g);
+        const v = Math.floor(Math.pow(2, l * 2 - 1) * 20 + 0.5) * 0.05;
+        a.setPlaybackSpeed(v);
       }
-    }), n = (l) => Math.floor(Math.pow(2, l * 2 - 1) * 20 + 0.5) * 5 + "", i = (l) => parseFloat(l), r = (l) => l.replace(/\D/g, ""), d = (l) => l, f = (l) => {
-      const g = Math.log2(l / 100) * 0.5 + 0.5;
-      return Math.min(Math.max(g, 0), 1);
+    }), n = (l) => Math.floor(Math.pow(2, l * 2 - 1) * 20 + 0.5) * 5 + "", i = (l) => parseFloat(l), r = (l) => l.replace(/\D/g, ""), h = (l) => l, b = (l) => {
+      const v = Math.log2(l / 100) * 0.5 + 0.5;
+      return Math.min(Math.max(v, 0), 1);
     };
-    return (l, g) => (P(), ht(Zt, {
+    return (l, v) => (w(), vt(te, {
       value: s.value,
-      "onUpdate:value": g[0] || (g[0] = (y) => s.value = y),
+      "onUpdate:value": v[0] || (v[0] = (E) => s.value = E),
       title: "Speed",
       color: "#336",
       "text-color": "#aad",
       "format-value": n,
       "parse-value": i,
       "validate-input": r,
-      "transform-slider-to-display": d,
-      "transform-display-to-slider": f,
+      "transform-slider-to-display": h,
+      "transform-display-to-slider": b,
       "thumb-length": 2,
       "max-chars": 3
     }, null, 8, ["value"]));
@@ -1898,25 +2009,25 @@ const Re = ["aria-label"], Oe = {
 }, ta = {
   __name: "TimeInput",
   setup(e) {
-    const t = at(), a = J(), s = ot(), n = (l) => l.toFixed(1), i = (l) => parseFloat(l), r = (l) => l.replace(/[^0-9.]/g, ""), d = (l) => l, f = (l) => l;
-    return (l, g) => (P(), ht(Zt, {
-      value: I(t).currentTime,
+    const t = nt(), a = et(), s = dt(), n = (l) => l.toFixed(1), i = (l) => parseFloat(l), r = (l) => l.replace(/[^0-9.]/g, ""), h = (l) => l, b = (l) => l;
+    return (l, v) => (w(), vt(te, {
+      value: L(t).currentTime,
       "onUpdate:value": [
-        g[0] || (g[0] = (y) => I(t).currentTime = y),
-        I(s).setTime
+        v[0] || (v[0] = (E) => L(t).currentTime = E),
+        L(s).setTime
       ],
       title: "Time",
       color: "#344",
       "focus-color": "#556868",
       "text-color": "#acc",
       "background-color": "#111117",
-      "slider-max": I(a).totalDuration,
+      "slider-max": L(a).totalDuration,
       "slider-min": 0,
       "format-value": n,
       "parse-value": i,
       "validate-input": r,
-      "transform-slider-to-display": d,
-      "transform-display-to-slider": f,
+      "transform-slider-to-display": h,
+      "transform-display-to-slider": b,
       "thumb-length": 2
     }, null, 8, ["value", "onUpdate:value", "slider-max"]));
   }
@@ -1936,19 +2047,19 @@ const Re = ["aria-label"], Oe = {
     const t = e, a = _(!1), s = () => {
       t.disabled || (a.value = !0);
     }, n = () => a.value = !1;
-    return (i, r) => (P(), w("div", {
+    return (i, r) => (w(), T("div", {
       title: e.title,
-      class: L(["button-outer", { down: a.value, disabled: e.disabled }]),
+      class: I(["button-outer", { down: a.value, disabled: e.disabled }]),
       onPointerdown: s,
       onPointerup: n,
       onPointerleave: n
     }, [
       m("div", aa, [
-        rt(i.$slots, "default", {}, void 0, !0)
+        ut(i.$slots, "default", {}, void 0, !0)
       ])
     ], 42, ea));
   }
-}, nt = /* @__PURE__ */ $(sa, [["__scopeId", "data-v-77d8694a"]]), na = { class: "outer" }, ia = { class: "title" }, ra = {
+}, rt = /* @__PURE__ */ U(sa, [["__scopeId", "data-v-77d8694a"]]), na = { class: "outer" }, ia = { class: "title" }, ra = {
   class: "buttons",
   role: "toolbar",
   "aria-label": "Transport controls"
@@ -1966,179 +2077,193 @@ const Re = ["aria-label"], Oe = {
   },
   emits: ["menu-click"],
   setup(e, { emit: t }) {
-    const a = e, s = t, n = J(), i = at(), r = Wt(), d = ot();
-    function f() {
-      i.isPlayingOrLeadIn ? d.stop() : d.play();
+    const a = e, s = t, n = et(), i = nt(), r = Nt(), h = dt();
+    function b() {
+      i.isPlayingOrLeadIn ? h.stop() : h.play();
     }
     function l() {
-      const u = r.navigationPoints;
-      if (r.lastNavigationAction === "pause" && r.lastPlayStartTime !== null) {
-        d.setTime(r.lastPlayStartTime), r.setNavigationAction(null);
+      const d = r.navigationPoints;
+      if ((r.lastNavigationAction === "pause" || r.lastNavigationAction === "ended") && r.lastPlayStartTime !== null) {
+        h.setTime(r.lastPlayStartTime), r.setNavigationAction(null);
         return;
       }
-      const h = i.currentTime, b = u.filter((A) => A.time < h - 0.01).pop();
-      b && d.setTime(b.time);
-    }
-    function g() {
-      const u = r.navigationPoints, h = i.currentTime, b = u.find((A) => A.time > h + 0.01);
-      b && d.setTime(b.time);
+      const p = i.currentTime, g = d.filter((A) => A.time < p - 0.01).pop();
+      g && h.setTime(g.time);
     }
-    function y() {
-      d.playStartingNotes();
+    function v() {
+      const d = r.navigationPoints, p = i.currentTime, g = d.find((A) => A.time > p + 0.01);
+      g && h.setTime(g.time);
     }
-    const T = M(() => i.metronomeEnabled), B = M(() => i.leadInEnabled), v = _(!1), S = _(null);
     function E() {
+      h.playStartingNotes();
+    }
+    const C = k(() => i.metronomeEnabled), V = k(() => i.leadInEnabled), f = _(!1), P = _(null);
+    function S() {
       if (a.externalMenuControl) {
-        s("menu-click"), d.audioEngine.initializeAudioSystem().catch((u) => {
-          console.warn("Audio system pre-initialization failed:", u);
+        s("menu-click"), h.audioEngine.initializeAudioSystem().catch((d) => {
+          console.warn("Audio system pre-initialization failed:", d);
         });
         return;
       }
-      v.value = !v.value, v.value && (d.audioEngine.initializeAudioSystem().catch((u) => {
-        console.warn("Audio system pre-initialization failed:", u);
+      f.value = !f.value, f.value && (h.audioEngine.initializeAudioSystem().catch((d) => {
+        console.warn("Audio system pre-initialization failed:", d);
       }), setTimeout(() => {
-        var h;
-        const u = (h = S.value) == null ? void 0 : h.querySelector('button, a, [tabindex="0"]');
-        u && u.focus();
+        var p;
+        const d = (p = P.value) == null ? void 0 : p.querySelector('button, a, [tabindex="0"]');
+        d && d.focus();
       }, 0));
     }
-    function D() {
-      v.value = !1;
+    function B() {
+      f.value = !1;
     }
-    function V(u) {
-      S.value && !S.value.contains(u.target) && D();
+    function N(d) {
+      P.value && !P.value.contains(d.target) && B();
     }
-    gt(() => {
-      document.addEventListener("click", V), document.addEventListener("keydown", Z);
-    }), vt(() => {
-      document.removeEventListener("click", V), document.removeEventListener("keydown", Z);
+    Mt(() => {
+      document.addEventListener("click", N), document.addEventListener("keydown", H);
+    }), kt(() => {
+      document.removeEventListener("click", N), document.removeEventListener("keydown", H);
     });
-    function O() {
-      d.toggleMetronome();
+    function z() {
+      h.toggleMetronome();
     }
-    function F() {
-      d.toggleLeadIn();
+    function q() {
+      h.toggleLeadIn();
     }
-    const U = M({
+    const G = k({
       get: () => i.masterVolume,
-      set: (u) => i.setMasterVolume(u)
-    }), z = M({
+      set: (d) => i.setMasterVolume(d)
+    }), $ = k({
       get: () => i.metronomeVolume,
-      set: (u) => i.setMetronomeVolume(u)
-    }), Z = (u) => {
-      const h = u.target;
-      if (!(h.matches('input[type="text"]') && (h.closest(".time") || h.closest(".speed")))) {
-        if (u.key === "Escape")
-          u.preventDefault(), E();
-        else if (u.key === "B" && u.shiftKey) {
-          u.preventDefault();
-          const b = document.querySelector(".bar");
-          b && b.focus();
-        } else if (u.key === "T" && u.shiftKey) {
-          u.preventDefault();
-          const b = document.querySelector(".time input");
-          b && b.focus();
-        } else if (u.key === "S" && u.shiftKey) {
-          u.preventDefault();
-          const b = document.querySelector(".speed input");
-          b && b.focus();
-        } else if (u.key === " ")
-          u.preventDefault(), f();
-        else if (u.key === "PageUp")
-          u.preventDefault(), g();
-        else if (u.key === "PageDown")
-          u.preventDefault(), l();
-        else if (u.key === "M" && u.shiftKey)
-          u.preventDefault(), O();
-        else if (u.key === "L" && u.shiftKey)
-          u.preventDefault(), F();
-        else if (u.key === "N" && u.shiftKey)
-          u.preventDefault(), i.isPlayingOrLeadIn || y();
-        else if (/^[0-9]$/.test(u.key) && !u.ctrlKey && !u.metaKey && !u.shiftKey) {
-          const b = document.querySelector(".bar .bar-input");
-          if (document.activeElement === b)
+      set: (d) => i.setMetronomeVolume(d)
+    }), H = (d) => {
+      const p = d.target;
+      if (!(p.matches('input[type="text"]') && (p.closest(".time") || p.closest(".speed")))) {
+        if (d.key === "Escape")
+          d.preventDefault(), S();
+        else if (d.key === "B" && d.shiftKey) {
+          d.preventDefault();
+          const g = document.querySelector(".bar");
+          g && g.focus();
+        } else if (d.key === "T" && d.shiftKey) {
+          d.preventDefault();
+          const g = document.querySelector(".time input");
+          g && g.focus();
+        } else if (d.key === "S" && d.shiftKey) {
+          d.preventDefault();
+          const g = document.querySelector(".speed input");
+          g && g.focus();
+        } else if (d.key === " ")
+          d.preventDefault(), b();
+        else if (d.key === "PageUp")
+          d.preventDefault(), v();
+        else if (d.key === "PageDown")
+          d.preventDefault(), l();
+        else if (d.key === "M" && d.shiftKey)
+          d.preventDefault(), z();
+        else if (d.key === "L" && d.shiftKey)
+          d.preventDefault(), q();
+        else if (d.key === "N" && d.shiftKey)
+          d.preventDefault(), i.isPlayingOrLeadIn || E();
+        else if (/^[0-9]$/.test(d.key) && !d.ctrlKey && !d.metaKey && !d.shiftKey) {
+          const g = document.querySelector(".bar .bar-input");
+          if (document.activeElement === g)
             return;
-          u.preventDefault(), b && (b.value = u.key, b.focus(), b.setSelectionRange(1, 1), b.dispatchEvent(new Event("input", { bubbles: !0 })));
-        } else if (/^[a-z]$/.test(u.key) && !u.ctrlKey && !u.metaKey && !u.shiftKey) {
-          u.preventDefault();
-          const b = document.querySelector(".bar");
-          if (b) {
-            b.focus();
+          d.preventDefault(), g && (g.value = d.key, g.focus(), g.setSelectionRange(1, 1), g.dispatchEvent(new Event("input", { bubbles: !0 })));
+        } else if (/^[a-z]$/.test(d.key) && !d.ctrlKey && !d.metaKey && !d.shiftKey) {
+          d.preventDefault();
+          const g = document.querySelector(".bar");
+          if (g) {
+            g.focus();
             const A = new KeyboardEvent("keydown", {
-              key: u.key,
-              code: u.code,
+              key: d.key,
+              code: d.code,
               bubbles: !0,
               cancelable: !0
             });
-            b.dispatchEvent(A);
+            g.dispatchEvent(A);
+          }
+        } else if (d.key === "+") {
+          d.preventDefault();
+          const g = document.querySelector(".bar");
+          if (g) {
+            g.focus();
+            const A = new KeyboardEvent("keydown", {
+              key: "+",
+              code: "Equal",
+              shiftKey: !0,
+              bubbles: !0,
+              cancelable: !0
+            });
+            g.dispatchEvent(A);
           }
         }
       }
     };
-    return (u, h) => (P(), w("div", na, [
+    return (d, p) => (w(), T("div", na, [
       m("div", ia, [
-        N(qt, {
+        D(Qt, {
           class: "text",
           align: "centre",
           overflow: "scroll"
         }, {
-          default: W(() => [
-            bt(K(I(n).title), 1)
+          default: Z(() => [
+            St(K(L(n).title), 1)
           ]),
           _: 1
         }),
         m("div", {
           class: "menu-container",
           ref_key: "menuRef",
-          ref: S
+          ref: P
         }, [
-          (P(), w("svg", {
+          (w(), T("svg", {
             class: "menu",
             viewBox: "0 -960 960 960",
-            onClick: E
-          }, h[2] || (h[2] = [
+            onClick: S
+          }, p[2] || (p[2] = [
             m("path", { d: "M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" }, null, -1)
           ]))),
-          !e.externalMenuControl && v.value && u.$slots.menu ? (P(), w("div", {
+          !e.externalMenuControl && f.value && d.$slots.menu ? (w(), T("div", {
             key: 0,
             class: "dropdown-menu",
-            onClick: D
+            onClick: B
           }, [
-            rt(u.$slots, "menu", {}, void 0, !0)
-          ])) : q("", !0)
+            ut(d.$slots, "menu", {}, void 0, !0)
+          ])) : F("", !0)
         ], 512)
       ]),
-      N(ft, {
+      D(yt, {
         class: "main",
         colour: "red",
         step: 0.01,
         keystep: 0.1,
-        value: U.value,
-        "onUpdate:value": h[0] || (h[0] = (b) => U.value = b)
+        value: G.value,
+        "onUpdate:value": p[0] || (p[0] = (g) => G.value = g)
       }, null, 8, ["value"]),
-      h[8] || (h[8] = m("div", { class: "main-t" }, "Main", -1)),
-      h[9] || (h[9] = m("div", { class: "main-focus" }, null, -1)),
-      N(ft, {
+      p[8] || (p[8] = m("div", { class: "main-t" }, "Main", -1)),
+      p[9] || (p[9] = m("div", { class: "main-focus" }, null, -1)),
+      D(yt, {
         class: "tick",
         colour: "blue",
         step: 0.01,
         keystep: 0.1,
-        value: z.value,
-        "onUpdate:value": h[1] || (h[1] = (b) => z.value = b)
+        value: $.value,
+        "onUpdate:value": p[1] || (p[1] = (g) => $.value = g)
       }, null, 8, ["value"]),
-      h[10] || (h[10] = m("div", { class: "tick-t" }, "Tick", -1)),
-      h[11] || (h[11] = m("div", { class: "tick-focus" }, null, -1)),
-      N(Ze, { class: "bar" }),
-      N(ta, { class: "time" }),
-      N(Je, { class: "speed" }),
+      p[10] || (p[10] = m("div", { class: "tick-t" }, "Tick", -1)),
+      p[11] || (p[11] = m("div", { class: "tick-focus" }, null, -1)),
+      D(Ze, { class: "bar" }),
+      D(ta, { class: "time" }),
+      D(Je, { class: "speed" }),
       m("div", ra, [
-        N(nt, {
+        D(rt, {
           title: "Previous Mark",
           class: "button",
           tabindex: "-1",
           onClick: l
         }, {
-          default: W(() => h[3] || (h[3] = [
+          default: Z(() => p[3] || (p[3] = [
             m("svg", {
               class: "icon",
               viewBox: "0 0 48 48"
@@ -2149,28 +2274,28 @@ const Re = ["aria-label"], Oe = {
           _: 1,
           __: [3]
         }),
-        N(nt, {
-          title: I(i).isPlayingOrLeadIn ? "Pause" : "Play",
+        D(rt, {
+          title: L(i).isPlayingOrLeadIn ? "Pause" : "Play",
           class: "button",
           tabindex: "-1",
-          onClick: f
+          onClick: b
         }, {
-          default: W(() => [
-            (P(), w("svg", oa, [
+          default: Z(() => [
+            (w(), T("svg", oa, [
               m("path", {
-                d: I(i).isPlayingOrLeadIn ? "M27.4 35.4V12.6h8v22.8Zm-14.8 0V12.6h8.05v22.8Z" : "M16 37.85v-28l22 14Z"
+                d: L(i).isPlayingOrLeadIn ? "M27.4 35.4V12.6h8v22.8Zm-14.8 0V12.6h8.05v22.8Z" : "M16 37.85v-28l22 14Z"
               }, null, 8, la)
             ]))
           ]),
           _: 1
         }, 8, ["title"]),
-        N(nt, {
+        D(rt, {
           title: "Next Mark",
           class: "button",
           tabindex: "-1",
-          onClick: g
+          onClick: v
         }, {
-          default: W(() => h[4] || (h[4] = [
+          default: Z(() => p[4] || (p[4] = [
             m("svg", {
               class: "icon",
               viewBox: "0 0 48 48"
@@ -2181,46 +2306,46 @@ const Re = ["aria-label"], Oe = {
           _: 1,
           __: [4]
         }),
-        N(nt, {
+        D(rt, {
           title: "Toggle Metronome",
           class: "button",
           tabindex: "-1",
-          onClick: O
+          onClick: z
         }, {
-          default: W(() => [
-            (P(), w("svg", {
-              class: L(["icon", T.value ? "on" : "off"]),
+          default: Z(() => [
+            (w(), T("svg", {
+              class: I(["icon", C.value ? "on" : "off"]),
               viewBox: "-128 -128 768 768"
-            }, h[5] || (h[5] = [
+            }, p[5] || (p[5] = [
               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)
             ]), 2))
           ]),
           _: 1
         }),
-        N(nt, {
+        D(rt, {
           title: "Toggle Lead-in",
           class: "button",
           tabindex: "-1",
-          onClick: F
+          onClick: q
         }, {
-          default: W(() => [
-            (P(), w("svg", {
-              class: L(["icon", B.value ? "on" : "off"]),
+          default: Z(() => [
+            (w(), T("svg", {
+              class: I(["icon", V.value ? "on" : "off"]),
               viewBox: "-2 -2 28 28"
-            }, h[6] || (h[6] = [
+            }, p[6] || (p[6] = [
               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)
             ]), 2))
           ]),
           _: 1
         }),
-        N(nt, {
+        D(rt, {
           title: "Starting Notes",
           class: "button",
           tabindex: "-1",
-          disabled: I(i).isPlayingOrLeadIn,
-          onClick: y
+          disabled: L(i).isPlayingOrLeadIn,
+          onClick: E
         }, {
-          default: W(() => h[7] || (h[7] = [
+          default: Z(() => p[7] || (p[7] = [
             m("svg", {
               class: "icon",
               viewBox: "0 -960 960 960"
@@ -2235,10 +2360,10 @@ const Re = ["aria-label"], Oe = {
       ])
     ]));
   }
-}, da = /* @__PURE__ */ $(ua, [["__scopeId", "data-v-070a1a8f"]]), ca = { class: "init-progress" }, ha = {
+}, da = /* @__PURE__ */ U(ua, [["__scopeId", "data-v-9470408d"]]), ca = { class: "init-progress" }, ha = {
   key: 0,
   class: "progress-track"
-}, ma = { class: "message-container" }, pa = {
+}, ma = { class: "message-container" }, fa = {
   __name: "InitializationProgress",
   props: {
     /** Current initialization stage */
@@ -2268,22 +2393,22 @@ const Re = ["aria-label"], Oe = {
     }
   },
   setup(e) {
-    const t = e, a = M(() => t.progress !== null), s = M(() => t.progress === null ? 0 : Math.max(0, Math.min(100, t.progress * 100))), n = M(() => t.hasError ? t.errorMessage : t.message);
-    return (i, r) => (P(), w("div", ca, [
-      a.value ? (P(), w("div", ha, [
+    const t = e, a = k(() => t.progress !== null), s = k(() => t.progress === null ? 0 : Math.max(0, Math.min(100, t.progress * 100))), n = k(() => t.hasError ? t.errorMessage : t.message);
+    return (i, r) => (w(), T("div", ca, [
+      a.value ? (w(), T("div", ha, [
         m("div", {
           class: "progress-fill",
-          style: Rt({ width: `${s.value}%` })
+          style: Gt({ width: `${s.value}%` })
         }, null, 4)
-      ])) : q("", !0),
+      ])) : F("", !0),
       m("div", ma, [
         m("div", {
-          class: L(["message", { error: e.hasError }])
+          class: I(["message", { error: e.hasError }])
         }, K(n.value), 3)
       ])
     ]));
   }
-}, fa = /* @__PURE__ */ $(pa, [["__scopeId", "data-v-a9ed87f2"]]), va = yt("initialization", {
+}, pa = /* @__PURE__ */ U(fa, [["__scopeId", "data-v-a9ed87f2"]]), va = Pt("initialization", {
   state: () => ({
     // Current initialization stage
     currentStage: null,
@@ -2347,7 +2472,7 @@ const Re = ["aria-label"], Oe = {
 }), ga = { class: "container" }, ba = { class: "panel" }, ya = {
   key: 0,
   class: "blur"
-}, At = 40, Lt = 40, Nt = 100, ka = 50, Dt = 400, Vt = 570, zt = 570, Ma = 350, Sa = 330, xa = 360, Pa = 360, wa = {
+}, Ot = 40, Rt = 40, $t = 100, ka = 50, Ft = 400, Ut = 570, Kt = 570, Ma = 350, Sa = 330, Pa = 360, xa = 360, wa = {
   __name: "MixerLayout",
   props: {
     /** Whether to show initialization progress (default: true) */
@@ -2363,88 +2488,88 @@ const Re = ["aria-label"], Oe = {
   },
   emits: ["menu-click"],
   setup(e, { emit: t }) {
-    tt((v) => ({
-      "3e3bf6e6": y.value,
-      "3e499cb2": T.value,
-      "3a701552": B.value
+    at((f) => ({
+      "3e3bf6e6": E.value,
+      "3e499cb2": C.value,
+      "3a701552": V.value
     }));
-    const a = e, s = t, n = J(), i = at(), r = va();
-    gt(() => {
+    const a = e, s = t, n = et(), i = nt(), r = va();
+    Mt(() => {
       r.initializeListeners();
     });
-    const d = j("container"), { width: f } = et(d), l = M(() => i.isLoaded), g = M(() => {
-      const v = f.value, S = n.parts.length;
-      return v < 640 || v < At * S + Dt ? 0 : v < Lt * S + Vt ? 1 : v < Nt * S + zt ? 2 : 3;
-    }), y = M(() => {
-      switch (g.value) {
+    const h = Y("container"), { width: b } = st(h), l = k(() => i.isLoaded), v = k(() => {
+      const f = b.value, P = n.parts.length;
+      return f < 640 || f < Ot * P + Ft ? 0 : f < Rt * P + Ut ? 1 : f < $t * P + Kt ? 2 : 3;
+    }), E = k(() => {
+      switch (v.value) {
         case 0:
           return `${Ma}px ` + `${ka}px `.repeat(n.parts.length);
         case 1:
           return `${Sa}px`;
         case 2:
-          return `${xa}px`;
-        default:
           return `${Pa}px`;
+        default:
+          return `${xa}px`;
       }
-    }), T = M(() => {
-      switch (g.value) {
+    }), C = k(() => {
+      switch (v.value) {
         case 0:
           return "100vw";
         case 1:
-          return `${At}px `.repeat(n.parts.length) + `${Dt}px`;
+          return `${Ot}px `.repeat(n.parts.length) + `${Ft}px`;
         case 2:
-          return `${Lt}px `.repeat(n.parts.length) + `${Vt}px`;
+          return `${Rt}px `.repeat(n.parts.length) + `${Ut}px`;
         default:
-          return `${Nt}px `.repeat(n.parts.length) + `${zt}px`;
+          return `${$t}px `.repeat(n.parts.length) + `${Kt}px`;
       }
-    }), B = M(() => {
-      const v = [...n.parts.keys()];
-      return g.value > 0 ? '"' + v.map((S) => "part" + S).join(" ") + ' controls"' : '"controls" ' + v.map((S) => '"part' + S + '"').join(" ");
+    }), V = k(() => {
+      const f = [...n.parts.keys()];
+      return v.value > 0 ? '"' + f.map((P) => "part" + P).join(" ") + ' controls"' : '"controls" ' + f.map((P) => '"part' + P + '"').join(" ");
     });
-    return (v, S) => (P(), w("div", {
+    return (f, P) => (w(), T("div", {
       class: "outer",
       ref_key: "container",
-      ref: d
+      ref: h
     }, [
       m("div", ga, [
         m("div", ba, [
-          (P(!0), w(ct, null, Et(I(n).parts, (E, D) => (P(), ht($e, {
-            key: E.name,
-            class: L("part" + D),
-            name: E.name,
-            volume: E.volume,
-            "onUpdate:volume": (V) => E.volume = V,
-            solo: E.solo,
-            "onUpdate:solo": (V) => E.solo = V,
-            mute: E.mute,
-            "onUpdate:mute": (V) => E.mute = V,
+          (w(!0), T(pt, null, At(L(n).parts, (S, B) => (w(), vt($e, {
+            key: S.name,
+            class: I("part" + B),
+            name: S.name,
+            volume: S.volume,
+            "onUpdate:volume": (N) => S.volume = N,
+            solo: S.solo,
+            "onUpdate:solo": (N) => S.solo = N,
+            mute: S.mute,
+            "onUpdate:mute": (N) => S.mute = N,
             ref_for: !0,
             ref: "parts"
           }, null, 8, ["class", "name", "volume", "onUpdate:volume", "solo", "onUpdate:solo", "mute", "onUpdate:mute"]))), 128)),
-          N(da, {
+          D(da, {
             "external-menu-control": a.externalMenuControl,
-            onMenuClick: S[0] || (S[0] = (E) => s("menu-click")),
+            onMenuClick: P[0] || (P[0] = (S) => s("menu-click")),
             class: "controls"
           }, {
-            menu: W(() => [
-              rt(v.$slots, "menu", {}, void 0, !0)
+            menu: Z(() => [
+              ut(f.$slots, "menu", {}, void 0, !0)
             ]),
             _: 3
           }, 8, ["external-menu-control"]),
-          l.value ? q("", !0) : (P(), w("div", ya)),
-          a.showInitProgress && I(r).shouldShowProgress ? (P(), ht(fa, {
+          l.value ? F("", !0) : (w(), T("div", ya)),
+          a.showInitProgress && L(r).shouldShowProgress ? (w(), vt(pa, {
             key: 1,
-            stage: I(r).currentStage,
-            message: I(r).message,
-            progress: I(r).progress,
-            "has-error": I(r).hasError,
-            "error-message": I(r).errorMessage
-          }, null, 8, ["stage", "message", "progress", "has-error", "error-message"])) : q("", !0)
+            stage: L(r).currentStage,
+            message: L(r).message,
+            progress: L(r).progress,
+            "has-error": L(r).hasError,
+            "error-message": L(r).errorMessage
+          }, null, 8, ["stage", "message", "progress", "has-error", "error-message"])) : F("", !0)
         ])
       ])
     ], 512));
   }
-}, Oa = /* @__PURE__ */ $(wa, [["__scopeId", "data-v-cf29d602"]]), Ea = { class: "outer" }, Ta = { class: "mid" }, Ba = { class: "inner" }, Ca = {
+}, Ra = /* @__PURE__ */ U(wa, [["__scopeId", "data-v-cf29d602"]]), Ea = { class: "outer" }, Ta = { class: "mid" }, Ca = { class: "inner" }, Ba = {
   key: 0,
   class: "content"
 }, _a = {
@@ -2460,23 +2585,23 @@ const Re = ["aria-label"], Oe = {
     }
   },
   setup(e) {
-    return tt((t) => ({
+    return at((t) => ({
       "66bea586": e.colour
-    })), (t, a) => (P(), w("div", Ea, [
+    })), (t, a) => (w(), T("div", Ea, [
       m("div", Ta, [
-        m("div", Ba, [
-          e.text || t.$slots.default ? (P(), w("div", Ca, [
-            bt(K(e.text) + " ", 1),
-            rt(t.$slots, "default", {}, void 0, !0)
-          ])) : q("", !0)
+        m("div", Ca, [
+          e.text || t.$slots.default ? (w(), T("div", Ba, [
+            St(K(e.text) + " ", 1),
+            ut(t.$slots, "default", {}, void 0, !0)
+          ])) : F("", !0)
         ])
       ])
     ]));
   }
-}, $a = /* @__PURE__ */ $(_a, [["__scopeId", "data-v-dff76c48"]]), Ia = { class: "modal-footer" }, Aa = {
+}, $a = /* @__PURE__ */ U(_a, [["__scopeId", "data-v-dff76c48"]]), La = { class: "modal-footer" }, Aa = {
   key: 0,
   class: "dont-remind"
-}, La = {
+}, Ia = {
   __name: "KeyboardShortcutsHelp",
   props: {
     /** Controls visibility of the dialog */
@@ -2494,37 +2619,37 @@ const Re = ["aria-label"], Oe = {
   setup(e, { emit: t }) {
     const a = e, s = t, n = _(!1), i = _(null), r = () => {
       n.value && s("dont-remind", !0), s("update:visible", !1);
-    }, d = (f) => {
-      f.key === "Escape" && (f.preventDefault(), f.stopPropagation(), r());
+    }, h = (b) => {
+      b.key === "Escape" && (b.preventDefault(), b.stopPropagation(), r());
     };
-    return R(() => a.visible, async (f) => {
+    return R(() => a.visible, async (b) => {
       var l;
-      f && (await se(), (l = i.value) == null || l.focus());
-    }), (f, l) => e.visible ? (P(), w("div", {
+      b && (await se(), (l = i.value) == null || l.focus());
+    }), (b, l) => e.visible ? (w(), T("div", {
       key: 0,
       class: "modal-overlay",
       onClick: r,
-      onKeydown: d
+      onKeydown: h
     }, [
       m("div", {
         class: "modal-content shortcuts-help",
-        onClick: l[1] || (l[1] = St(() => {
+        onClick: l[1] || (l[1] = Ct(() => {
         }, ["stop"])),
         role: "dialog",
         "aria-labelledby": "shortcuts-title",
         "aria-modal": "true"
       }, [
         l[3] || (l[3] = ne('<h2 id="shortcuts-title" data-v-bfa878a3>Keyboard Shortcuts</h2><div class="shortcuts-container" data-v-bfa878a3><section class="shortcut-group" data-v-bfa878a3><h3 data-v-bfa878a3>Transport Controls</h3><dl data-v-bfa878a3><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>Shift</kbd> + <kbd data-v-bfa878a3>P</kbd></dt><dd data-v-bfa878a3>Play / Pause</dd></div><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>Shift</kbd> + <kbd data-v-bfa878a3>S</kbd></dt><dd data-v-bfa878a3>Stop</dd></div><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>Shift</kbd> + <kbd data-v-bfa878a3>B</kbd></dt><dd data-v-bfa878a3>Previous bar</dd></div><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>Shift</kbd> + <kbd data-v-bfa878a3>F</kbd></dt><dd data-v-bfa878a3>Next bar</dd></div></dl></section><section class="shortcut-group" data-v-bfa878a3><h3 data-v-bfa878a3>Features</h3><dl data-v-bfa878a3><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>Shift</kbd> + <kbd data-v-bfa878a3>M</kbd></dt><dd data-v-bfa878a3>Toggle metronome</dd></div><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>Shift</kbd> + <kbd data-v-bfa878a3>L</kbd></dt><dd data-v-bfa878a3>Toggle lead-in</dd></div><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>Shift</kbd> + <kbd data-v-bfa878a3>N</kbd></dt><dd data-v-bfa878a3>Play starting notes</dd></div></dl></section><section class="shortcut-group" data-v-bfa878a3><h3 data-v-bfa878a3>Sliders &amp; Controls</h3><dl data-v-bfa878a3><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>↑</kbd> / <kbd data-v-bfa878a3>→</kbd></dt><dd data-v-bfa878a3>Increase value</dd></div><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>↓</kbd> / <kbd data-v-bfa878a3>←</kbd></dt><dd data-v-bfa878a3>Decrease value</dd></div><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>Home</kbd></dt><dd data-v-bfa878a3>Set to minimum</dd></div><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>End</kbd></dt><dd data-v-bfa878a3>Set to maximum</dd></div><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>Page Up</kbd> / <kbd data-v-bfa878a3>Page Down</kbd></dt><dd data-v-bfa878a3>Large adjustment</dd></div></dl></section><section class="shortcut-group" data-v-bfa878a3><h3 data-v-bfa878a3>Navigation</h3><dl data-v-bfa878a3><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>Tab</kbd></dt><dd data-v-bfa878a3>Next control</dd></div><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>Shift</kbd> + <kbd data-v-bfa878a3>Tab</kbd></dt><dd data-v-bfa878a3>Previous control</dd></div><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>Enter</kbd> / <kbd data-v-bfa878a3>Space</kbd></dt><dd data-v-bfa878a3>Activate button</dd></div><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>Escape</kbd></dt><dd data-v-bfa878a3>Close dialog / menu</dd></div></dl></section><section class="shortcut-group" data-v-bfa878a3><h3 data-v-bfa878a3>Help</h3><dl data-v-bfa878a3><div class="shortcut-item" data-v-bfa878a3><dt data-v-bfa878a3><kbd data-v-bfa878a3>?</kbd></dt><dd data-v-bfa878a3>Show this help</dd></div></dl></section></div>', 2)),
-        m("div", Ia, [
-          e.showDontRemind ? (P(), w("label", Aa, [
-            Tt(m("input", {
+        m("div", La, [
+          e.showDontRemind ? (w(), T("label", Aa, [
+            It(m("input", {
               type: "checkbox",
-              "onUpdate:modelValue": l[0] || (l[0] = (g) => n.value = g)
+              "onUpdate:modelValue": l[0] || (l[0] = (v) => n.value = v)
             }, null, 512), [
               [ie, n.value]
             ]),
-            l[2] || (l[2] = bt(" Don't show this again "))
-          ])) : q("", !0),
+            l[2] || (l[2] = St(" Don't show this again "))
+          ])) : F("", !0),
           m("button", {
             onClick: r,
             class: "close-button",
@@ -2533,12 +2658,12 @@ const Re = ["aria-label"], Oe = {
           }, "Close", 512)
         ])
       ])
-    ], 32)) : q("", !0);
+    ], 32)) : F("", !0);
   }
-}, Fa = /* @__PURE__ */ $(La, [["__scopeId", "data-v-bfa878a3"]]);
+}, Fa = /* @__PURE__ */ U(Ia, [["__scopeId", "data-v-bfa878a3"]]);
 class Na {
   constructor() {
-    this.eventBus = jt(), 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 = Jt(), 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) {
@@ -2684,29 +2809,29 @@ class Na {
 }
 new Na();
 export {
-  nt as AudioButton,
-  ft as AudioSlider,
+  rt as AudioButton,
+  yt as AudioSlider,
   Ze as BarInput,
-  Zt as BaseNumericInput,
-  Pt as DEV_MODE,
+  te as BaseNumericInput,
+  _t as DEV_MODE,
   Na as DummyAudioEngine,
-  fa as InitializationProgress,
+  pa as InitializationProgress,
   Fa as KeyboardShortcutsHelp,
   da as MixerControls,
-  Oa as MixerLayout,
+  Ra as MixerLayout,
   $e as PartControl,
   $a as Placeholder,
   Je as SpeedInput,
   ta as TimeInput,
-  qt as TitleText,
+  Qt as TitleText,
   Ne as TriState,
   Ve as audioEngineConfig,
-  Ht as isDevFeature,
-  Ra as isDevMode,
-  at as useAudioStateStore,
-  et as useElementSize,
+  Xt as isDevFeature,
+  Oa as isDevMode,
+  nt as useAudioStateStore,
+  st as useElementSize,
   va as useInitializationState,
-  ot as useMasterAudioControl,
-  J as useMusicDataStore,
-  Wt as usePlaybackStateStore
+  dt as useMasterAudioControl,
+  et as useMusicDataStore,
+  Nt as usePlaybackStateStore
 };