audio-mixer-ui 0.1.0

package/dist/choir-mixer-ui.js

@@ -0,0 +1,1640 @@
+import { ref as T, watch as D, unref as C, onScopeDispose as Fe, readonly as Se, mergeModels as me, useCssVars as F, computed as g, useTemplateRef as U, useModel as z, createElementBlock as _, openBlock as y, normalizeClass as w, createElementVNode as m, createCommentVNode as pe, Fragment as ve, renderList as fe, normalizeStyle as Ue, renderSlot as be, toDisplayString as I, onUnmounted as ge, watchEffect as ke, onMounted as Ve, createVNode as k, withCtx as N, createTextVNode as ye, resolveDirective as qe, withDirectives as re, withKeys as We, vModelText as Oe, createBlock as _e } from "vue";
+import { defineStore as Me } from "pinia";
+var Ie = function() {
+  if (typeof Map < "u")
+    return Map;
+  function e(t, a) {
+    var n = -1;
+    return t.some(function(s, i) {
+      return s[0] === a ? (n = i, !0) : !1;
+    }), n;
+  }
+  return (
+    /** @class */
+    function() {
+      function t() {
+        this.__entries__ = [];
+      }
+      return Object.defineProperty(t.prototype, "size", {
+        /**
+         * @returns {boolean}
+         */
+        get: function() {
+          return this.__entries__.length;
+        },
+        enumerable: !0,
+        configurable: !0
+      }), t.prototype.get = function(a) {
+        var n = e(this.__entries__, a), s = this.__entries__[n];
+        return s && s[1];
+      }, t.prototype.set = function(a, n) {
+        var s = e(this.__entries__, a);
+        ~s ? this.__entries__[s][1] = n : this.__entries__.push([a, n]);
+      }, t.prototype.delete = function(a) {
+        var n = this.__entries__, s = e(n, a);
+        ~s && n.splice(s, 1);
+      }, t.prototype.has = function(a) {
+        return !!~e(this.__entries__, a);
+      }, t.prototype.clear = function() {
+        this.__entries__.splice(0);
+      }, t.prototype.forEach = function(a, n) {
+        n === void 0 && (n = null);
+        for (var s = 0, i = this.__entries__; s < i.length; s++) {
+          var l = i[s];
+          a.call(n, l[1], l[0]);
+        }
+      }, t;
+    }()
+  );
+}(), de = typeof window < "u" && typeof document < "u" && window.document === document, ie = function() {
+  return typeof global < "u" && global.Math === Math ? global : typeof self < "u" && self.Math === Math ? self : typeof window < "u" && window.Math === Math ? window : Function("return this")();
+}(), He = function() {
+  return typeof requestAnimationFrame == "function" ? requestAnimationFrame.bind(ie) : function(e) {
+    return setTimeout(function() {
+      return e(Date.now());
+    }, 1e3 / 60);
+  };
+}(), je = 2;
+function Ge(e, t) {
+  var a = !1, n = !1, s = 0;
+  function i() {
+    a && (a = !1, e()), n && h();
+  }
+  function l() {
+    He(i);
+  }
+  function h() {
+    var u = Date.now();
+    if (a) {
+      if (u - s < je)
+        return;
+      n = !0;
+    } else
+      a = !0, n = !1, setTimeout(l, t);
+    s = u;
+  }
+  return h;
+}
+var Ze = 20, Ke = ["top", "right", "bottom", "left", "width", "height", "size", "weight"], Ye = typeof MutationObserver < "u", Qe = (
+  /** @class */
+  function() {
+    function e() {
+      this.connected_ = !1, this.mutationEventsAdded_ = !1, this.mutationsObserver_ = null, this.observers_ = [], this.onTransitionEnd_ = this.onTransitionEnd_.bind(this), this.refresh = Ge(this.refresh.bind(this), Ze);
+    }
+    return e.prototype.addObserver = function(t) {
+      ~this.observers_.indexOf(t) || this.observers_.push(t), this.connected_ || this.connect_();
+    }, e.prototype.removeObserver = function(t) {
+      var a = this.observers_, n = a.indexOf(t);
+      ~n && a.splice(n, 1), !a.length && this.connected_ && this.disconnect_();
+    }, e.prototype.refresh = function() {
+      var t = this.updateObservers_();
+      t && this.refresh();
+    }, e.prototype.updateObservers_ = function() {
+      var t = this.observers_.filter(function(a) {
+        return a.gatherActive(), a.hasActive();
+      });
+      return t.forEach(function(a) {
+        return a.broadcastActive();
+      }), t.length > 0;
+    }, e.prototype.connect_ = function() {
+      !de || this.connected_ || (document.addEventListener("transitionend", this.onTransitionEnd_), window.addEventListener("resize", this.refresh), Ye ? (this.mutationsObserver_ = new MutationObserver(this.refresh), this.mutationsObserver_.observe(document, {
+        attributes: !0,
+        childList: !0,
+        characterData: !0,
+        subtree: !0
+      })) : (document.addEventListener("DOMSubtreeModified", this.refresh), this.mutationEventsAdded_ = !0), this.connected_ = !0);
+    }, e.prototype.disconnect_ = function() {
+      !de || !this.connected_ || (document.removeEventListener("transitionend", this.onTransitionEnd_), window.removeEventListener("resize", this.refresh), this.mutationsObserver_ && this.mutationsObserver_.disconnect(), this.mutationEventsAdded_ && document.removeEventListener("DOMSubtreeModified", this.refresh), this.mutationsObserver_ = null, this.mutationEventsAdded_ = !1, this.connected_ = !1);
+    }, e.prototype.onTransitionEnd_ = function(t) {
+      var a = t.propertyName, n = a === void 0 ? "" : a, s = Ke.some(function(i) {
+        return !!~n.indexOf(i);
+      });
+      s && this.refresh();
+    }, e.getInstance = function() {
+      return this.instance_ || (this.instance_ = new e()), this.instance_;
+    }, e.instance_ = null, e;
+  }()
+), Le = function(e, t) {
+  for (var a = 0, n = Object.keys(t); a < n.length; a++) {
+    var s = n[a];
+    Object.defineProperty(e, s, {
+      value: t[s],
+      enumerable: !1,
+      writable: !1,
+      configurable: !0
+    });
+  }
+  return e;
+}, Q = function(e) {
+  var t = e && e.ownerDocument && e.ownerDocument.defaultView;
+  return t || ie;
+}, Ae = ue(0, 0, 0, 0);
+function oe(e) {
+  return parseFloat(e) || 0;
+}
+function xe(e) {
+  for (var t = [], a = 1; a < arguments.length; a++)
+    t[a - 1] = arguments[a];
+  return t.reduce(function(n, s) {
+    var i = e["border-" + s + "-width"];
+    return n + oe(i);
+  }, 0);
+}
+function Xe(e) {
+  for (var t = ["top", "right", "bottom", "left"], a = {}, n = 0, s = t; n < s.length; n++) {
+    var i = s[n], l = e["padding-" + i];
+    a[i] = oe(l);
+  }
+  return a;
+}
+function Je(e) {
+  var t = e.getBBox();
+  return ue(0, 0, t.width, t.height);
+}
+function et(e) {
+  var t = e.clientWidth, a = e.clientHeight;
+  if (!t && !a)
+    return Ae;
+  var n = Q(e).getComputedStyle(e), s = Xe(n), i = s.left + s.right, l = s.top + s.bottom, h = oe(n.width), u = oe(n.height);
+  if (n.boxSizing === "border-box" && (Math.round(h + i) !== t && (h -= xe(n, "left", "right") + i), Math.round(u + l) !== a && (u -= xe(n, "top", "bottom") + l)), !at(e)) {
+    var r = Math.round(h + i) - t, c = Math.round(u + l) - a;
+    Math.abs(r) !== 1 && (h -= r), Math.abs(c) !== 1 && (u -= c);
+  }
+  return ue(s.left, s.top, h, u);
+}
+var tt = /* @__PURE__ */ function() {
+  return typeof SVGGraphicsElement < "u" ? function(e) {
+    return e instanceof Q(e).SVGGraphicsElement;
+  } : function(e) {
+    return e instanceof Q(e).SVGElement && typeof e.getBBox == "function";
+  };
+}();
+function at(e) {
+  return e === Q(e).document.documentElement;
+}
+function nt(e) {
+  return de ? tt(e) ? Je(e) : et(e) : Ae;
+}
+function st(e) {
+  var t = e.x, a = e.y, n = e.width, s = e.height, i = typeof DOMRectReadOnly < "u" ? DOMRectReadOnly : Object, l = Object.create(i.prototype);
+  return Le(l, {
+    x: t,
+    y: a,
+    width: n,
+    height: s,
+    top: a,
+    right: t + n,
+    bottom: s + a,
+    left: t
+  }), l;
+}
+function ue(e, t, a, n) {
+  return { x: e, y: t, width: a, height: n };
+}
+var rt = (
+  /** @class */
+  function() {
+    function e(t) {
+      this.broadcastWidth = 0, this.broadcastHeight = 0, this.contentRect_ = ue(0, 0, 0, 0), this.target = t;
+    }
+    return e.prototype.isActive = function() {
+      var t = nt(this.target);
+      return this.contentRect_ = t, t.width !== this.broadcastWidth || t.height !== this.broadcastHeight;
+    }, e.prototype.broadcastRect = function() {
+      var t = this.contentRect_;
+      return this.broadcastWidth = t.width, this.broadcastHeight = t.height, t;
+    }, e;
+  }()
+), it = (
+  /** @class */
+  /* @__PURE__ */ function() {
+    function e(t, a) {
+      var n = st(a);
+      Le(this, { target: t, contentRect: n });
+    }
+    return e;
+  }()
+), ot = (
+  /** @class */
+  function() {
+    function e(t, a, n) {
+      if (this.activeObservations_ = [], this.observations_ = new Ie(), typeof t != "function")
+        throw new TypeError("The callback provided as parameter 1 is not a function.");
+      this.callback_ = t, this.controller_ = a, this.callbackCtx_ = n;
+    }
+    return e.prototype.observe = function(t) {
+      if (!arguments.length)
+        throw new TypeError("1 argument required, but only 0 present.");
+      if (!(typeof Element > "u" || !(Element instanceof Object))) {
+        if (!(t instanceof Q(t).Element))
+          throw new TypeError('parameter 1 is not of type "Element".');
+        var a = this.observations_;
+        a.has(t) || (a.set(t, new rt(t)), this.controller_.addObserver(this), this.controller_.refresh());
+      }
+    }, e.prototype.unobserve = function(t) {
+      if (!arguments.length)
+        throw new TypeError("1 argument required, but only 0 present.");
+      if (!(typeof Element > "u" || !(Element instanceof Object))) {
+        if (!(t instanceof Q(t).Element))
+          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));
+      }
+    }, e.prototype.disconnect = function() {
+      this.clearActive(), this.observations_.clear(), this.controller_.removeObserver(this);
+    }, e.prototype.gatherActive = function() {
+      var t = this;
+      this.clearActive(), this.observations_.forEach(function(a) {
+        a.isActive() && t.activeObservations_.push(a);
+      });
+    }, e.prototype.broadcastActive = function() {
+      if (this.hasActive()) {
+        var t = this.callbackCtx_, a = this.activeObservations_.map(function(n) {
+          return new it(n.target, n.broadcastRect());
+        });
+        this.callback_.call(t, a, t), this.clearActive();
+      }
+    }, e.prototype.clearActive = function() {
+      this.activeObservations_.splice(0);
+    }, e.prototype.hasActive = function() {
+      return this.activeObservations_.length > 0;
+    }, e;
+  }()
+), Re = typeof WeakMap < "u" ? /* @__PURE__ */ new WeakMap() : new Ie(), Ne = (
+  /** @class */
+  /* @__PURE__ */ function() {
+    function e(t) {
+      if (!(this instanceof e))
+        throw new TypeError("Cannot call a class as a function.");
+      if (!arguments.length)
+        throw new TypeError("1 argument required, but only 0 present.");
+      var a = Qe.getInstance(), n = new ot(t, a, this);
+      Re.set(this, n);
+    }
+    return e;
+  }()
+);
+[
+  "observe",
+  "unobserve",
+  "disconnect"
+].forEach(function(e) {
+  Ne.prototype[e] = function() {
+    var t;
+    return (t = Re.get(this))[e].apply(t, arguments);
+  };
+});
+var lt = function() {
+  return typeof ie.ResizeObserver < "u" ? ie.ResizeObserver : Ne;
+}();
+function q(e) {
+  const t = T(0), a = T(0);
+  let n = null;
+  const s = () => {
+    n && (n.disconnect(), n = null);
+  };
+  return D(() => C(e), () => {
+    s();
+    const l = C(e);
+    if (!l) return;
+    n = new lt((u) => {
+      const r = u[0];
+      r && (t.value = r.contentRect.width, a.value = r.contentRect.height);
+    }), n.observe(l);
+    const h = l.getBoundingClientRect();
+    t.value = h.width, a.value = h.height;
+  }, { immediate: !0 }), Fe(s), {
+    width: Se(t),
+    height: Se(a)
+  };
+}
+const L = (e, t) => {
+  const a = e.__vccOpts || e;
+  for (const [n, s] of t)
+    a[n] = s;
+  return a;
+}, ut = {
+  key: 0,
+  class: "level"
+}, ct = {
+  __name: "AudioSlider",
+  props: /* @__PURE__ */ me({
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 1 },
+    step: { type: Number, default: 0.01 },
+    colour: { type: String, default: "grey" },
+    style: { type: String, default: "volume" },
+    thumbLength: { type: Number, default: 1 },
+    showLevel: { type: Boolean, default: !1 },
+    level: { type: Number, default: 0.5 }
+  }, {
+    value: { default: 0.75 },
+    valueModifiers: {}
+  }),
+  emits: ["update:value"],
+  setup(e) {
+    F((v) => ({
+      "3d436468": f.value,
+      "345b6e65": b.value,
+      "3327b972": W.value,
+      "5ae48cf2": x.value,
+      "01a7bd27": P.value
+    }));
+    const t = e, a = U("root"), { width: n, height: s } = q(a), i = g(() => Math.min(n.value, s.value)), l = g(() => Math.max(n.value, s.value)), h = g(() => n.value > s.value), u = g(() => h.value ? "h-slide" : "v-slide"), r = z(e, "value"), c = g(() => i.value * 0.8), p = g(() => i.value * t.thumbLength * 0.8), b = g(() => (h.value ? p : c).value + "px"), f = g(() => (h.value ? c : p).value + "px"), x = g(() => i.value * 0.1 + "px"), P = g(() => (l.value - p.value) * (r.value - t.min) / (t.max - t.min) + "px"), W = g(() => h.value ? "90deg" : "0deg"), B = T(!1), H = T(0), R = (v) => {
+      if (!a.value) return r.value;
+      const O = a.value.getBoundingClientRect(), G = v.touches ? v.touches[0].clientX : v.clientX, ce = v.touches ? v.touches[0].clientY : v.clientY;
+      let Z;
+      if (h.value) {
+        const K = G - O.left - c.value / 2, ee = O.width - c.value;
+        Z = Math.max(0, Math.min(1, K / ee));
+      } else {
+        const K = O.bottom - ce - c.value / 2, ee = O.height - c.value;
+        Z = Math.max(0, Math.min(1, K / ee));
+      }
+      const se = t.min + Z * (t.max - t.min);
+      return t.step > 0 ? Math.round(se / t.step) * t.step : se;
+    }, J = (v) => {
+      v.preventDefault(), B.value = !0, H.value = r.value, r.value = R(v), a.value && a.value.setPointerCapture && a.value.setPointerCapture(v.pointerId), document.addEventListener("mousemove", $), document.addEventListener("mouseup", j);
+    }, $ = (v) => {
+      B.value && (v.preventDefault(), r.value = R(v));
+    }, j = (v) => {
+      if (B.value) {
+        if (v.preventDefault(), B.value = !1, a.value && a.value.releasePointerCapture)
+          try {
+            a.value.releasePointerCapture(v.pointerId);
+          } catch {
+          }
+        document.removeEventListener("mousemove", $), document.removeEventListener("mouseup", j);
+      }
+    }, M = (v) => {
+      v.preventDefault(), v.touches.length === 1 && (B.value = !0, H.value = r.value, r.value = R(v), document.addEventListener("touchmove", S, { passive: !1 }), document.addEventListener("touchend", V), document.addEventListener("touchcancel", V));
+    }, S = (v) => {
+      B.value && (v.preventDefault(), v.touches.length === 1 && (r.value = R(v)));
+    }, V = (v) => {
+      B.value && (v.preventDefault(), B.value = !1, document.removeEventListener("touchmove", S), document.removeEventListener("touchend", V), document.removeEventListener("touchcancel", V));
+    }, A = (v) => Math.min(1, Math.max(0, t.level * 10 - v + 1));
+    return (v, O) => (y(), _("div", {
+      class: w(u.value),
+      ref_key: "root",
+      ref: a,
+      onMousedown: J,
+      onTouchstart: M,
+      style: { userSelect: "none", touchAction: "none" }
+    }, [
+      O[0] || (O[0] = m("div", { class: "track" }, null, -1)),
+      e.showLevel ? (y(), _("div", ut, [
+        (y(), _(ve, null, fe(10, (G) => m("div", {
+          class: w(["led", "led" + G])
+        }, [
+          m("div", {
+            class: "on",
+            style: Ue({ opacity: A(G) })
+          }, null, 4)
+        ], 2)), 64))
+      ])) : pe("", !0),
+      m("div", {
+        class: w(["thumb", { dragging: B.value, [e.colour]: !0, [e.style]: !0 }])
+      }, null, 2)
+    ], 34));
+  }
+}, le = /* @__PURE__ */ L(ct, [["__scopeId", "data-v-1580ed15"]]), dt = {
+  __name: "TitleText",
+  props: {
+    align: {
+      type: String,
+      default: "left"
+    }
+  },
+  setup(e) {
+    F((h) => ({
+      "5fddb56d": l.value
+    }));
+    const t = U("el"), { width: a, height: n } = q(t), s = g(() => Math.min(a.value, n.value)), i = g(() => a.value > n.value ? "h-text" : "v-text"), l = g(() => s.value * 3 / 4 + "px");
+    return (h, u) => (y(), _("div", {
+      ref_key: "el",
+      ref: t,
+      class: "outer"
+    }, [
+      m("div", {
+        class: w({ [i.value]: !0, [e.align]: !0 })
+      }, [
+        be(h.$slots, "default", {}, void 0, !0)
+      ], 2)
+    ], 512));
+  }
+}, De = /* @__PURE__ */ L(dt, [["__scopeId", "data-v-3ce29e77"]]), ht = {
+  __name: "TriState",
+  props: {
+    mute: { default: !1 },
+    muteModifiers: {},
+    solo: { default: !1 },
+    soloModifiers: {}
+  },
+  emits: ["update:mute", "update:solo"],
+  setup(e) {
+    const t = z(e, "mute"), a = z(e, "solo"), n = U("outer"), { width: s, height: i } = q(n), l = g(() => s.value > i.value * 1.9);
+    function h() {
+      t.value = !t.value, a.value = !1;
+    }
+    function u() {
+      a.value = !a.value, t.value = !1;
+    }
+    return (r, c) => (y(), _("div", {
+      class: "outer",
+      ref_key: "outer",
+      ref: n
+    }, [
+      m("div", {
+        class: w(["solo", { on: a.value }]),
+        onClick: u
+      }, null, 2),
+      m("div", {
+        class: "s-label",
+        onClick: u
+      }, I(l.value ? "SOLO" : "S"), 1),
+      m("div", {
+        class: w(["mute", { on: t.value }]),
+        onClick: h
+      }, null, 2),
+      m("div", {
+        class: "m-label",
+        onClick: h
+      }, I(l.value ? "MUTE" : "M"), 1)
+    ], 512));
+  }
+}, mt = /* @__PURE__ */ L(ht, [["__scopeId", "data-v-143eade0"]]), he = {
+  // Enable development UI features (animations, random data, etc.)
+  enabled: !1,
+  // Specific feature flags
+  features: {
+    // Show beat animation in BarInput component
+    beatAnimation: !0,
+    // Show random level indicators on part controls
+    randomLevelIndicators: !0,
+    // Enable other debug/dev features as needed
+    debugMode: !1
+  }
+}, ea = () => he.enabled, $e = (e) => he.enabled && he.features[e], X = Me("audioState", {
+  state: () => ({
+    // Playback state
+    isPlaying: !1,
+    currentTime: 0,
+    playbackSpeed: 1,
+    // Musical position
+    currentBar: 1,
+    currentBeat: 1,
+    currentRepeat: 0,
+    // Volume controls
+    masterVolume: 0.75,
+    partVolumes: {},
+    partMuted: {},
+    // Transport features
+    isLeadInActive: !1,
+    isStartingNotesActive: !1,
+    leadInBars: 1
+  }),
+  getters: {
+    // Format current time as MM:SS
+    formattedTime: (e) => {
+      const t = Math.floor(e.currentTime / 60), a = Math.floor(e.currentTime % 60);
+      return `${t}:${a.toString().padStart(2, "0")}`;
+    },
+    // Get volume for a specific part
+    getPartVolume: (e) => (t) => e.partVolumes[t] ?? 0.75,
+    // Check if part is muted
+    isPartMuted: (e) => (t) => e.partMuted[t] ?? !1,
+    // Current musical position as string
+    currentPosition: (e) => {
+      let t = `${e.currentBar}.${e.currentBeat}`;
+      return e.currentRepeat > 0 && (t += ` (R${e.currentRepeat})`), t;
+    }
+  },
+  actions: {
+    // Playback state updates
+    setPlaybackState(e) {
+      this.isPlaying = e;
+    },
+    setCurrentTime(e) {
+      this.currentTime = e;
+    },
+    setPlaybackSpeed(e) {
+      this.playbackSpeed = e;
+    },
+    // Musical position updates
+    setCurrentBar(e, t = 1, a = 0) {
+      this.currentBar = e, this.currentBeat = t, this.currentRepeat = a;
+    },
+    // Volume controls
+    setMasterVolume(e) {
+      this.masterVolume = Math.max(0, Math.min(1, e));
+    },
+    setPartVolume(e, t) {
+      this.partVolumes[e] = Math.max(0, Math.min(1, t));
+    },
+    setPartMuted(e, t) {
+      this.partMuted[e] = t;
+    },
+    // Transport features
+    setLeadInActive(e, t = 1) {
+      this.isLeadInActive = e, this.leadInBars = t;
+    },
+    setStartingNotesActive(e) {
+      this.isStartingNotesActive = e;
+    },
+    // Initialize part states
+    initializeParts(e) {
+      e.forEach((t) => {
+        t.name in this.partVolumes || (this.partVolumes[t.name] = t.volume || 0.75), t.name in this.partMuted || (this.partMuted[t.name] = !1);
+      });
+    }
+  }
+}), ae = Me("musicData", {
+  state: () => ({
+    // Musical structure
+    beats: [],
+    practiceMarks: {},
+    parts: [],
+    title: "",
+    // Timing calculations
+    totalDuration: 0,
+    maxBar: 0,
+    // Metadata
+    timeSignature: 4,
+    baseTempo: 80
+  }),
+  getters: {
+    // Get time for a specific bar and repeat
+    getTimeFromBar: (e) => (t, a = 0) => {
+      const n = e.beats.find(
+        (s) => s.bar === t && s.beat === 1 && s.repeat === a
+      );
+      return n ? n.time : null;
+    },
+    // Get bar info from time
+    getBarFromTime: (e) => (t) => {
+      if (!e.beats || e.beats.length === 0) return null;
+      let a = null;
+      for (let n = e.beats.length - 1; n >= 0; n--)
+        if (e.beats[n].time <= t) {
+          a = e.beats[n];
+          break;
+        }
+      return a ? {
+        bar: a.bar,
+        beat: a.beat,
+        repeat: a.repeat,
+        tempo: a.tempo,
+        timeSig: a.timeSig
+      } : null;
+    },
+    // Get practice mark letters as array
+    practiceMarkLetters: (e) => Object.keys(e.practiceMarks).sort(),
+    // Get bar number for practice mark
+    getBarForMark: (e) => (t) => e.practiceMarks[t],
+    // Get all unique bar numbers
+    allBars: (e) => {
+      const t = /* @__PURE__ */ new Set();
+      return e.beats.forEach((a) => {
+        a.beat === 1 && t.add(a.bar);
+      }), Array.from(t).sort((a, n) => a - n);
+    },
+    // Check if a bar has repeats
+    hasRepeats: (e) => (t) => e.beats.some((a) => a.bar === t && a.repeat > 0)
+  },
+  actions: {
+    // Load musical data
+    loadMusicData(e) {
+      this.title = e.title || "Untitled", this.beats = e.beats || [], this.practiceMarks = e.practiceMarks || e.marks || {}, this.parts = e.parts || [], this.calculateDuration(), this.calculateMaxBar(), this.extractTimeSignature();
+    },
+    // Calculate total duration from beats
+    calculateDuration() {
+      this.beats.length > 0 && (this.totalDuration = Math.max(...this.beats.map((e) => e.time)));
+    },
+    // Find the highest bar number
+    calculateMaxBar() {
+      this.beats.length > 0 && (this.maxBar = Math.max(...this.beats.map((e) => e.bar)));
+    },
+    // Extract time signature from first beat
+    extractTimeSignature() {
+      this.beats.length > 0 && this.beats[0].timeSig && (this.timeSignature = this.beats[0].timeSig), this.beats.length > 0 && this.beats[0].tempo && (this.baseTempo = this.beats[0].tempo);
+    },
+    // Update practice marks
+    setPracticeMark(e, t) {
+      this.practiceMarks[e] = t;
+    },
+    removePracticeMark(e) {
+      delete this.practiceMarks[e];
+    },
+    // Validate bar number
+    isValidBar(e, t = 0) {
+      return this.beats.some((a) => a.bar === e && a.repeat === t);
+    }
+  }
+}), pt = Me("playbackState", {
+  state: () => ({
+    // Transport state
+    transportState: "stopped",
+    // 'stopped', 'playing', 'paused'
+    // Navigation preferences
+    autoPlay: !1,
+    loopEnabled: !1,
+    loopStart: 1,
+    loopEnd: null,
+    // Lead-in settings
+    leadInEnabled: !0,
+    leadInBars: 1,
+    // Starting notes settings
+    startingNotesEnabled: !0,
+    startingNotesSequential: !0,
+    // Metronome settings
+    metronomeEnabled: !1,
+    metronomeVolume: 0.5,
+    // UI state
+    showTransportControls: !0,
+    showPartControls: !0,
+    showNavigationControls: !0,
+    // Last positions for convenience
+    lastBarPosition: 1,
+    lastPracticeMarkUsed: null
+  }),
+  getters: {
+    // Check if currently playing
+    isPlaying: (e) => e.transportState === "playing",
+    // Check if paused
+    isPaused: (e) => e.transportState === "paused",
+    // Check if stopped
+    isStopped: (e) => e.transportState === "stopped",
+    // Check if loop is configured
+    isLoopConfigured: (e) => e.loopEnabled && e.loopStart && e.loopEnd && e.loopEnd > e.loopStart,
+    // Get loop range as string
+    loopRange: (e) => !e.loopEnabled || !e.loopStart || !e.loopEnd ? null : `${e.loopStart}-${e.loopEnd}`
+  },
+  actions: {
+    // Transport controls
+    setTransportState(e) {
+      ["stopped", "playing", "paused"].includes(e) && (this.transportState = e);
+    },
+    play() {
+      this.setTransportState("playing");
+    },
+    pause() {
+      this.setTransportState("paused");
+    },
+    stop() {
+      this.setTransportState("stopped");
+    },
+    // Navigation settings
+    setAutoPlay(e) {
+      this.autoPlay = e;
+    },
+    setLoop(e, t = null, a = null) {
+      this.loopEnabled = e, t !== null && (this.loopStart = t), a !== null && (this.loopEnd = a);
+    },
+    setLoopStart(e) {
+      this.loopStart = e, this.loopEnd && this.loopEnd <= e && (this.loopEnd = e + 4);
+    },
+    setLoopEnd(e) {
+      this.loopEnd = e, this.loopStart && this.loopStart >= e && (this.loopStart = Math.max(1, e - 4));
+    },
+    // Lead-in settings
+    setLeadInEnabled(e) {
+      this.leadInEnabled = e;
+    },
+    setLeadInBars(e) {
+      this.leadInBars = Math.max(1, Math.min(4, e));
+    },
+    // Starting notes settings
+    setStartingNotesEnabled(e) {
+      this.startingNotesEnabled = e;
+    },
+    setStartingNotesSequential(e) {
+      this.startingNotesSequential = e;
+    },
+    // Metronome settings
+    setMetronomeEnabled(e) {
+      this.metronomeEnabled = e;
+    },
+    setMetronomeVolume(e) {
+      this.metronomeVolume = Math.max(0, Math.min(1, e));
+    },
+    // UI visibility controls
+    setTransportControlsVisible(e) {
+      this.showTransportControls = e;
+    },
+    setPartControlsVisible(e) {
+      this.showPartControls = e;
+    },
+    setNavigationControlsVisible(e) {
+      this.showNavigationControls = e;
+    },
+    // Position tracking
+    updateLastBarPosition(e) {
+      this.lastBarPosition = e;
+    },
+    updateLastPracticeMarkUsed(e) {
+      this.lastPracticeMarkUsed = e;
+    },
+    // Reset to defaults
+    resetToDefaults() {
+      this.transportState = "stopped", this.autoPlay = !1, this.loopEnabled = !1, this.loopStart = 1, this.loopEnd = null, this.leadInEnabled = !0, this.leadInBars = 1, this.startingNotesEnabled = !0, this.startingNotesSequential = !0, this.metronomeEnabled = !1, this.metronomeVolume = 0.5;
+    }
+  }
+});
+function vt(e) {
+  return { all: e = e || /* @__PURE__ */ new Map(), on: function(t, a) {
+    var n = e.get(t);
+    n ? n.push(a) : e.set(t, [a]);
+  }, off: function(t, a) {
+    var n = e.get(t);
+    n && (a ? n.splice(n.indexOf(a) >>> 0, 1) : e.set(t, []));
+  }, emit: function(t, a) {
+    var n = e.get(t);
+    n && n.slice().map(function(s) {
+      s(a);
+    }), (n = e.get("*")) && n.slice().map(function(s) {
+      s(t, a);
+    });
+  } };
+}
+class ft {
+  constructor() {
+    this.eventBus = vt(), this.currentTime = 0, this.isPlaying = !1, this.playbackSpeed = 1, this.masterVolume = 0.75, this.parts = /* @__PURE__ */ new Map(), this.playbackTimer = null, this.lastTimestamp = 0;
+  }
+  // Initialize with musical data
+  initialize(t) {
+    if (this.musicData = t, this.beats = t.beats || [], this.practiceMarks = t.practiceMarks || {}, this.beats.length > 0) {
+      const a = this.beats[this.beats.length - 1], n = a.tempo > 0 ? 60 / a.tempo : 0.75;
+      this.songDuration = a.time + n, this.maxBar = Math.max(...this.beats.map((s) => s.bar));
+    } else
+      this.songDuration = 0, this.maxBar = 0;
+    t.parts && t.parts.forEach((a) => {
+      this.parts.set(a.name, {
+        name: a.name,
+        volume: a.volume || 0.75,
+        muted: !1
+      });
+    }), this.eventBus.emit("initialized", { parts: Array.from(this.parts.values()) });
+  }
+  // Transport controls
+  play() {
+    this.isPlaying || (this.isPlaying = !0, this.lastTimestamp = performance.now(), this.startPlaybackTimer(), this.eventBus.emit("playbackStateChanged", {
+      isPlaying: !0,
+      currentTime: this.currentTime
+    }));
+  }
+  stop() {
+    this.isPlaying && (this.isPlaying = !1, this.stopPlaybackTimer(), this.eventBus.emit("playbackStateChanged", {
+      isPlaying: !1,
+      currentTime: this.currentTime
+    }));
+  }
+  pause() {
+    this.stop();
+  }
+  // Time controls
+  setTime(t) {
+    this.currentTime = Math.max(0, t), this.eventBus.emit("timeChanged", { currentTime: this.currentTime });
+    const a = this.getBarFromTime(this.currentTime);
+    a && this.eventBus.emit("barChanged", a);
+  }
+  getCurrentTime() {
+    return this.currentTime;
+  }
+  // Musical navigation
+  setBar(t, a = 0) {
+    const n = this.getTimeFromBar(t, a);
+    n !== null && this.setTime(n);
+  }
+  goToPracticeMark(t) {
+    const a = this.practiceMarks[t];
+    a !== void 0 && (this.setBar(a), this.eventBus.emit("practiceMarkChanged", { mark: t, bar: a }));
+  }
+  // Speed control
+  setPlaybackSpeed(t) {
+    this.playbackSpeed = Math.max(0.25, Math.min(2, t)), this.eventBus.emit("speedChanged", { speed: this.playbackSpeed });
+  }
+  getPlaybackSpeed() {
+    return this.playbackSpeed;
+  }
+  // Volume controls
+  setMasterVolume(t) {
+    this.masterVolume = Math.max(0, Math.min(1, t)), this.eventBus.emit("masterVolumeChanged", { volume: this.masterVolume });
+  }
+  getMasterVolume() {
+    return this.masterVolume;
+  }
+  setPartVolume(t, a) {
+    const n = this.parts.get(t);
+    n && (n.volume = Math.max(0, Math.min(1, a)), this.eventBus.emit("partVolumeChanged", { partName: t, volume: n.volume }));
+  }
+  setPartMuted(t, a) {
+    const n = this.parts.get(t);
+    n && (n.muted = a, this.eventBus.emit("partMutedChanged", { partName: t, muted: a }));
+  }
+  getParts() {
+    return Array.from(this.parts.values());
+  }
+  // Special features (no-op for UI testing)
+  playLeadIn(t = 1) {
+    this.eventBus.emit("leadInStarted", { bars: t }), setTimeout(() => {
+      this.eventBus.emit("leadInCompleted");
+    }, 1e3 * t);
+  }
+  playStartingNotes() {
+    this.eventBus.emit("startingNotesStarted"), setTimeout(() => {
+      this.eventBus.emit("startingNotesCompleted");
+    }, 2e3);
+  }
+  // Event bus access
+  on(t, a) {
+    this.eventBus.on(t, a);
+  }
+  off(t, a) {
+    this.eventBus.off(t, a);
+  }
+  // Private methods
+  startPlaybackTimer() {
+    const t = () => {
+      if (!this.isPlaying) return;
+      const a = performance.now(), n = (a - this.lastTimestamp) / 1e3;
+      if (this.lastTimestamp = a, this.currentTime += n * this.playbackSpeed, this.songDuration > 0 && this.currentTime >= this.songDuration) {
+        this.stop(), this.eventBus.emit("songEnded", { finalTime: this.currentTime });
+        return;
+      }
+      this.eventBus.emit("timeChanged", { currentTime: this.currentTime });
+      const s = this.getBarFromTime(this.currentTime);
+      if (s && (this.eventBus.emit("barChanged", s), this.maxBar > 0 && s.bar > this.maxBar)) {
+        this.stop(), this.eventBus.emit("songEnded", { finalTime: this.currentTime });
+        return;
+      }
+      this.playbackTimer = requestAnimationFrame(t);
+    };
+    this.playbackTimer = requestAnimationFrame(t);
+  }
+  stopPlaybackTimer() {
+    this.playbackTimer && (cancelAnimationFrame(this.playbackTimer), this.playbackTimer = null);
+  }
+  getBarFromTime(t) {
+    if (!this.beats || this.beats.length === 0) return null;
+    let a = null;
+    for (let n = this.beats.length - 1; n >= 0; n--)
+      if (this.beats[n].time <= t) {
+        a = this.beats[n];
+        break;
+      }
+    return a ? {
+      bar: a.bar,
+      beat: a.beat,
+      repeat: a.repeat,
+      time: a.time
+    } : null;
+  }
+  getTimeFromBar(t, a = 0) {
+    if (!this.beats || this.beats.length === 0) return null;
+    let n = this.beats.find(
+      (s) => s.bar === t && s.beat === 1 && s.repeat === a
+    );
+    return !n && a === 0 && (n = this.beats.find(
+      (s) => s.bar === t && s.beat === 1
+    )), n ? n.time : null;
+  }
+  destroy() {
+    this.stop(), this.eventBus.all.clear(), this.parts.clear();
+  }
+}
+const d = new ft();
+function ne() {
+  const e = X(), t = ae(), a = pt(), n = ({ currentTime: o }) => {
+    e.setCurrentTime(o);
+  }, s = ({ isPlaying: o }) => {
+    e.setPlaybackState(o), a.setTransportState(o ? "playing" : "stopped");
+  }, i = (o) => {
+    o && (e.setCurrentBar(o.bar, o.beat, o.repeat), a.updateLastBarPosition(o.bar));
+  }, l = ({ speed: o }) => {
+    e.setPlaybackSpeed(o);
+  }, h = ({ volume: o }) => {
+    e.setMasterVolume(o);
+  }, u = ({ partName: o, volume: E }) => {
+    e.setPartVolume(o, E);
+  }, r = ({ partName: o, muted: E }) => {
+    e.setPartMuted(o, E);
+  }, c = ({ bars: o }) => {
+    e.setLeadInActive(!0, o);
+  }, p = () => {
+    e.setLeadInActive(!1);
+  }, b = () => {
+    e.setStartingNotesActive(!0);
+  }, f = () => {
+    e.setStartingNotesActive(!1);
+  }, x = ({ mark: o }) => {
+    a.updateLastPracticeMarkUsed(o);
+  }, P = ({ parts: o }) => {
+    e.initializeParts(o);
+  }, W = ({ finalTime: o }) => {
+    e.setPlaybackState(!1), a.setTransportState("stopped"), console.log(`Song ended at time: ${o}`);
+  }, B = () => {
+    d.on("timeChanged", n), d.on("playbackStateChanged", s), d.on("barChanged", i), d.on("speedChanged", l), d.on("masterVolumeChanged", h), d.on("partVolumeChanged", u), d.on("partMutedChanged", r), d.on("leadInStarted", c), d.on("leadInCompleted", p), d.on("startingNotesStarted", b), d.on("startingNotesCompleted", f), d.on("practiceMarkChanged", x), d.on("initialized", P), d.on("songEnded", W);
+  }, H = () => {
+    d.off("timeChanged", n), d.off("playbackStateChanged", s), d.off("barChanged", i), d.off("speedChanged", l), d.off("masterVolumeChanged", h), d.off("partVolumeChanged", u), d.off("partMutedChanged", r), d.off("leadInStarted", c), d.off("leadInCompleted", p), d.off("startingNotesStarted", b), d.off("startingNotesCompleted", f), d.off("practiceMarkChanged", x), d.off("initialized", P), d.off("songEnded", W);
+  }, R = () => {
+    ke(() => {
+      const o = e.masterVolume;
+      d.getMasterVolume() !== o && d.setMasterVolume(o);
+    }), ke(() => {
+      const o = e.playbackSpeed;
+      d.getPlaybackSpeed() !== o && d.setPlaybackSpeed(o);
+    });
+  }, J = (o) => {
+    t.loadMusicData(o), d.initialize({
+      beats: o.beats,
+      practiceMarks: o.marks || o.practiceMarks,
+      parts: o.parts
+    }), B(), R();
+  }, $ = () => {
+    d.play();
+  }, j = () => {
+    d.stop();
+  }, M = () => {
+    d.pause();
+  }, S = (o) => {
+    d.setTime(o);
+  }, V = (o, E = 0) => {
+    d.setBar(o, E);
+  }, A = (o) => {
+    d.goToPracticeMark(o);
+  }, v = (o) => {
+    d.setPlaybackSpeed(o);
+  }, O = (o) => {
+    d.setMasterVolume(o);
+  }, G = (o, E) => {
+    d.setPartVolume(o, E);
+  }, ce = (o, E) => {
+    d.setPartMuted(o, E);
+  }, Z = (o = 1) => {
+    d.playLeadIn(o);
+  }, se = () => {
+    d.playStartingNotes();
+  }, K = (o, E = !0, te = 0) => {
+    E && a.leadInEnabled ? (V(o, te), Z(a.leadInBars)) : (V(o, te), $());
+  }, ee = (o, E = !0) => {
+    const te = t.getBarForMark(o);
+    te && K(te, E);
+  };
+  return ge(() => {
+    H();
+  }), {
+    // Initialization
+    initialize: J,
+    // Transport controls
+    play: $,
+    stop: j,
+    pause: M,
+    // Time controls
+    setTime: S,
+    setBar: V,
+    // Navigation
+    goToPracticeMark: A,
+    setPlaybackSpeed: v,
+    // Volume controls
+    setMasterVolume: O,
+    setPartVolume: G,
+    setPartMuted: ce,
+    // Special features
+    playLeadIn: Z,
+    playStartingNotes: se,
+    // Complex operations
+    playFromBar: K,
+    playFromMark: ee,
+    // Access to stores for components
+    audioState: e,
+    musicData: t,
+    playbackState: a,
+    // Direct access to engine for advanced use
+    audioEngine: d
+  };
+}
+const bt = {
+  __name: "PartControl",
+  props: /* @__PURE__ */ me({
+    name: {
+      type: String,
+      required: !0
+    },
+    level: {
+      type: Number,
+      default: 0,
+      validator: (e) => e >= 0 && e <= 1
+    }
+  }, {
+    volume: { default: 0.75 },
+    volumeModifiers: {},
+    mute: { default: !1 },
+    muteModifiers: {},
+    solo: { default: !1 },
+    soloModifiers: {}
+  }),
+  emits: ["update:volume", "update:mute", "update:solo"],
+  setup(e) {
+    F((f) => ({
+      "34cdae44": r.value
+    }));
+    const t = e;
+    X();
+    const a = ne(), n = z(e, "volume"), s = z(e, "mute"), i = z(e, "solo");
+    D(n, (f) => {
+      a.setPartVolume(t.name, f);
+    }), D(s, (f) => {
+      a.setPartMuted(t.name, f);
+    });
+    const l = U("el"), { width: h, height: u } = q(l), r = g(() => Math.min(h.value, u.value) + "px"), c = g(
+      () => h.value > u.value ? "mobile" : h.value < 60 ? "tablet" : "desktop"
+    );
+    let p = null;
+    const b = T(0);
+    return Ve(() => {
+      $e("randomLevelIndicators") && (p = setInterval(() => {
+        b.value = s.value ? 0 : Math.random() * n.value;
+      }, 100));
+    }), ge(() => {
+      p && (clearInterval(p), p = null);
+    }), (f, x) => (y(), _("div", {
+      ref_key: "el",
+      ref: l,
+      class: w([c.value, "part"])
+    }, [
+      k(mt, {
+        class: "tri",
+        mute: s.value,
+        "onUpdate:mute": x[0] || (x[0] = (P) => s.value = P),
+        solo: i.value,
+        "onUpdate:solo": x[1] || (x[1] = (P) => i.value = P)
+      }, null, 8, ["mute", "solo"]),
+      k(De, {
+        align: "left",
+        class: "name"
+      }, {
+        default: N(() => [
+          ye(I(e.name), 1)
+        ]),
+        _: 1
+      }),
+      k(le, {
+        level: b.value,
+        "show-level": !0,
+        class: "vol",
+        value: n.value,
+        "onUpdate:value": x[2] || (x[2] = (P) => n.value = P)
+      }, null, 8, ["level", "value"])
+    ], 2));
+  }
+}, gt = /* @__PURE__ */ L(bt, [["__scopeId", "data-v-510493b1"]]), yt = { class: "mark" }, _t = {
+  key: 0,
+  class: "mark-dropdown"
+}, Mt = ["onClick"], St = { class: "rpt" }, kt = { class: "beat-ind" }, xt = { class: "beat" }, Tt = {
+  __name: "BarInput",
+  setup(e) {
+    F((M) => ({
+      "8ea05ab6": x.value,
+      "1a3336d8": P.value
+    }));
+    const t = U("el"), { width: a, height: n } = q(t), s = ae(), i = X(), l = ne(), h = T(!0);
+    D(() => i.currentBeat, () => {
+      h.value = !0, setTimeout(() => {
+        h.value = !1;
+      }, 50);
+    });
+    let u = null;
+    Ve(() => {
+      $e("beatAnimation") && (u = setInterval(() => {
+        const M = i.currentBeat % s.timeSignature + 1;
+        i.setCurrentBar(i.currentBar, M, i.currentRepeat);
+      }, 800));
+    }), ge(() => {
+      u && (clearInterval(u), u = null);
+    });
+    const r = T(i.currentBar.toString()), c = T("A");
+    T(i.currentRepeat);
+    const p = T(!1), b = T(!1);
+    D(r, () => {
+      r.value = r.value.replace(/\D/g, ""), r.value.length > 3 && (r.value = r.value.slice(0, 3));
+    }), D(() => i.currentBar, (M) => {
+      r.value = M.toString();
+    });
+    function f() {
+      const M = parseInt(r.value);
+      M && M > 0 && $(M);
+    }
+    const x = g(() => Math.min(n.value / 2.25, a.value / 4.5) + "px"), P = g(() => Math.min(a.value / 15, n.value / 6.4) + "px");
+    function W() {
+      p.value = !p.value;
+    }
+    function B() {
+      p.value = !1;
+    }
+    function H() {
+      b.value = !b.value;
+    }
+    function R() {
+      b.value = !1;
+    }
+    const J = g(() => Object.keys(s.practiceMarks).sort());
+    function $(M) {
+      l.setBar(M, i.currentRepeat);
+    }
+    function j(M) {
+      c.value = M, p.value = !1, l.goToPracticeMark(M);
+    }
+    return (M, S) => {
+      const V = qe("click-outside");
+      return y(), _("div", {
+        ref_key: "el",
+        ref: t,
+        class: w(["outer", { pulse: h.value }])
+      }, [
+        S[1] || (S[1] = m("div", { class: "frame" }, null, -1)),
+        re((y(), _("div", {
+          class: w(["mark-input", { empty: !c.value, edit: p.value }]),
+          onClick: W
+        }, [
+          m("div", yt, I(c.value), 1)
+        ], 2)), [
+          [V, B]
+        ]),
+        p.value ? (y(), _("div", _t, [
+          (y(!0), _(ve, null, fe(J.value, (A) => (y(), _("div", {
+            key: A,
+            class: "mark-option",
+            onClick: (v) => j(A)
+          }, I(A), 9, Mt))), 128))
+        ])) : pe("", !0),
+        S[2] || (S[2] = m("div", { class: "mark-title" }, "Mark", -1)),
+        re(m("input", {
+          type: "text",
+          class: "bar-input",
+          "onUpdate:modelValue": S[0] || (S[0] = (A) => r.value = A),
+          inputmode: "decimal",
+          pattern: "\\d*",
+          onChange: f,
+          onKeyup: We(f, ["enter"])
+        }, null, 544), [
+          [Oe, r.value]
+        ]),
+        S[3] || (S[3] = m("div", { class: "bar-title" }, "Bar", -1)),
+        re((y(), _("div", {
+          class: w(["rpt-input", { edit: b.value }]),
+          onClick: H
+        }, [
+          m("div", St, I(C(i).currentRepeat || "-"), 1)
+        ], 2)), [
+          [V, R]
+        ]),
+        S[4] || (S[4] = m("div", { class: "rpt-title" }, "Rpt", -1)),
+        m("div", kt, [
+          m("div", xt, I(C(i).currentBeat), 1)
+        ]),
+        S[5] || (S[5] = m("div", { class: "beat-title" }, "Beat", -1))
+      ], 2);
+    };
+  }
+}, Ct = /* @__PURE__ */ L(Tt, [["__scopeId", "data-v-3043e562"]]), wt = { class: "title" }, Bt = {
+  __name: "BaseNumericInput",
+  props: /* @__PURE__ */ me({
+    title: {
+      type: String,
+      required: !0
+    },
+    color: {
+      type: String,
+      default: "#336"
+    },
+    focusColor: {
+      type: String,
+      default: "#558"
+    },
+    textColor: {
+      type: String,
+      default: "#aad"
+    },
+    backgroundColor: {
+      type: String,
+      default: "#111117"
+    },
+    sliderMax: {
+      type: Number,
+      default: 1
+    },
+    sliderMin: {
+      type: Number,
+      default: 0
+    },
+    thumbLength: {
+      type: Number,
+      default: 2
+    },
+    formatValue: {
+      type: Function,
+      default: (e) => e.toString()
+    },
+    parseValue: {
+      type: Function,
+      default: (e) => parseFloat(e)
+    },
+    validateInput: {
+      type: Function,
+      default: (e) => e.replace(/[^0-9.]/g, "")
+    },
+    transformSliderToDisplay: {
+      type: Function,
+      default: (e) => e
+    },
+    transformDisplayToSlider: {
+      type: Function,
+      default: (e) => e
+    },
+    maxChars: {
+      type: Number,
+      default: null
+    }
+  }, {
+    value: { default: 0.5 },
+    valueModifiers: {}
+  }),
+  emits: ["update:value"],
+  setup(e) {
+    F((c) => ({
+      "0d0963e0": e.textColor,
+      "4ad34b2f": e.backgroundColor,
+      "02156786": e.color,
+      "715a9528": u.value,
+      "30d64f7d": h.value,
+      b8fbe65e: e.focusColor
+    }));
+    const t = e, a = U("el"), { width: n, height: s } = q(a), i = z(e, "value"), l = T(t.formatValue(t.transformSliderToDisplay(i.value)));
+    D(i, () => {
+      const c = t.transformSliderToDisplay(i.value);
+      l.value = t.formatValue(c);
+    }), D(l, () => {
+      l.value = t.validateInput(l.value), t.maxChars && l.value.length > t.maxChars && (l.value = l.value.slice(0, t.maxChars));
+    });
+    const h = g(() => Math.min(s.value / 2.25, n.value / 2.2) + "px"), u = g(() => Math.min(n.value / 3, s.value / 6.4) + "px");
+    function r() {
+      const c = t.parseValue(l.value), p = t.transformDisplayToSlider(c);
+      i.value = Math.min(Math.max(p, t.sliderMin), t.sliderMax);
+    }
+    return (c, p) => (y(), _("div", {
+      class: "outer",
+      ref_key: "el",
+      ref: a
+    }, [
+      p[2] || (p[2] = m("div", { class: "frame" }, null, -1)),
+      re(m("input", {
+        type: "text",
+        class: "input",
+        "onUpdate:modelValue": p[0] || (p[0] = (b) => l.value = b),
+        inputmode: "decimal",
+        pattern: "\\d*",
+        onChange: r
+      }, null, 544), [
+        [Oe, l.value]
+      ]),
+      m("div", wt, I(e.title), 1),
+      k(le, {
+        class: "slider",
+        value: i.value,
+        "onUpdate:value": p[1] || (p[1] = (b) => i.value = b),
+        "thumb-length": e.thumbLength,
+        max: e.sliderMax,
+        min: e.sliderMin
+      }, null, 8, ["value", "thumb-length", "max", "min"])
+    ], 512));
+  }
+}, ze = /* @__PURE__ */ L(Bt, [["__scopeId", "data-v-79c7a539"]]), Et = {
+  __name: "SpeedInput",
+  setup(e) {
+    const t = X(), a = ne(), n = g({
+      get: () => Math.log2(t.playbackSpeed) * 0.5 + 0.5,
+      set: (r) => {
+        const c = Math.pow(2, r * 2 - 1);
+        a.setPlaybackSpeed(c);
+      }
+    }), s = (r) => Math.floor(Math.pow(2, r * 2 - 1) * 100 + 0.5) + "", i = (r) => parseFloat(r), l = (r) => r.replace(/\D/g, ""), h = (r) => r, u = (r) => {
+      const c = Math.log2(r / 100) * 0.5 + 0.5;
+      return Math.min(Math.max(c, 0), 1);
+    };
+    return (r, c) => (y(), _e(ze, {
+      value: n.value,
+      "onUpdate:value": c[0] || (c[0] = (p) => n.value = p),
+      title: "Speed",
+      color: "#336",
+      "text-color": "#aad",
+      "format-value": s,
+      "parse-value": i,
+      "validate-input": l,
+      "transform-slider-to-display": h,
+      "transform-display-to-slider": u,
+      "thumb-length": 2,
+      "max-chars": 3
+    }, null, 8, ["value"]));
+  }
+}, Pt = {
+  __name: "TimeInput",
+  setup(e) {
+    const t = X(), a = ae(), n = ne(), s = (r) => r.toFixed(1), i = (r) => parseFloat(r), l = (r) => r.replace(/[^0-9.]/g, ""), h = (r) => r, u = (r) => r;
+    return (r, c) => (y(), _e(ze, {
+      value: C(t).currentTime,
+      "onUpdate:value": [
+        c[0] || (c[0] = (p) => C(t).currentTime = p),
+        C(n).setTime
+      ],
+      title: "Time",
+      color: "#344",
+      "focus-color": "#556868",
+      "text-color": "#acc",
+      "background-color": "#111117",
+      "slider-max": C(a).totalDuration,
+      "slider-min": 0,
+      "format-value": s,
+      "parse-value": i,
+      "validate-input": l,
+      "transform-slider-to-display": h,
+      "transform-display-to-slider": u,
+      "thumb-length": 2
+    }, null, 8, ["value", "onUpdate:value", "slider-max"]));
+  }
+}, Vt = { class: "inner" }, Ot = {
+  __name: "AudioButton",
+  setup(e) {
+    const t = T(!1), a = () => t.value = !0, n = () => t.value = !1;
+    return (s, i) => (y(), _("div", {
+      class: w(["button-outer", { down: t.value }]),
+      onPointerdown: a,
+      onPointerup: n,
+      onPointerleave: n
+    }, [
+      m("div", Vt, [
+        be(s.$slots, "default", {}, void 0, !0)
+      ])
+    ], 34));
+  }
+}, Y = /* @__PURE__ */ L(Ot, [["__scopeId", "data-v-0d7af06e"]]), It = { class: "outer" }, Lt = { class: "buttons" }, At = {
+  class: "icon",
+  viewBox: "0 0 48 48"
+}, Rt = ["d"], Nt = {
+  __name: "MixerControls",
+  setup(e) {
+    const t = ae(), a = X(), n = ne();
+    function s() {
+      a.isPlaying ? n.stop() : n.play();
+    }
+    function i() {
+      const b = Math.max(1, a.currentBar - 1);
+      n.setBar(b);
+    }
+    function l() {
+      const b = a.currentBar + 1;
+      n.setBar(b);
+    }
+    function h() {
+      n.playStartingNotes();
+    }
+    const u = T(!1), r = T(!0);
+    function c() {
+      u.value = !u.value;
+    }
+    function p() {
+      r.value = !r.value;
+    }
+    return (b, f) => (y(), _("div", It, [
+      k(De, {
+        class: "title",
+        align: "centre"
+      }, {
+        default: N(() => [
+          ye(I(C(t).title), 1)
+        ]),
+        _: 1
+      }),
+      k(le, {
+        class: "main",
+        colour: "red",
+        modelValue: C(a).masterVolume,
+        "onUpdate:modelValue": f[0] || (f[0] = (x) => C(a).masterVolume = x)
+      }, null, 8, ["modelValue"]),
+      k(le, {
+        class: "tick",
+        colour: "blue"
+      }),
+      f[6] || (f[6] = m("div", { class: "main-t" }, "Main", -1)),
+      f[7] || (f[7] = m("div", { class: "tick-t" }, "Tick", -1)),
+      k(Ct, { class: "bar" }),
+      k(Pt, { class: "time" }),
+      k(Et, { class: "speed" }),
+      m("div", Lt, [
+        k(Y, {
+          class: "button",
+          onClick: i
+        }, {
+          default: N(() => f[1] || (f[1] = [
+            m("svg", {
+              class: "icon",
+              viewBox: "0 0 48 48"
+            }, [
+              m("path", { d: "M11 36V12h3v24Zm26 0L19.7 24 37 12Z" })
+            ], -1)
+          ])),
+          _: 1,
+          __: [1]
+        }),
+        k(Y, {
+          class: "button",
+          onClick: s
+        }, {
+          default: N(() => [
+            (y(), _("svg", At, [
+              m("path", {
+                d: C(a).isPlaying ? "M27.4 35.4V12.6h8v22.8Zm-14.8 0V12.6h8.05v22.8Z" : "M16 37.85v-28l22 14Z"
+              }, null, 8, Rt)
+            ]))
+          ]),
+          _: 1
+        }),
+        k(Y, {
+          class: "button",
+          onClick: l
+        }, {
+          default: N(() => f[2] || (f[2] = [
+            m("svg", {
+              class: "icon",
+              viewBox: "0 0 48 48"
+            }, [
+              m("path", { d: "M34 36V12h3v24Zm-23 0V12l17.3 12Z" })
+            ], -1)
+          ])),
+          _: 1,
+          __: [2]
+        }),
+        k(Y, {
+          class: "button",
+          onClick: c
+        }, {
+          default: N(() => [
+            (y(), _("svg", {
+              class: w(["icon", u.value ? "on" : "off"]),
+              viewBox: "-128 -128 768 768"
+            }, f[3] || (f[3] = [
+              m("path", { d: "m 463.84136,154.89339 c -6.42,-6.42 -16.83,-6.42 -23.251,0 -71.31197,70.35135 -136.61146,132.25426 -208.741,199.7 h -105.82 c 23.35495,-140.1063 67.13099,-217.59716 120.727,-318.357996 0.86,-0.803 2.209,-0.801 3.067,-10e-4 20.50653,37.383983 48.51152,88.812606 72.26194,147.190756 1.186,9.002 12.2214,17.4338 23.3242,11.71391 9.002,-1.186 11.1594,-12.2324 9.9724,-21.2344 -21.69905,-53.89113 -30.43965,-85.078342 -83.11454,-161.702266 -13.446,-12.55299965 -34.508,-12.55699965 -47.954,10e-4 C 126.80877,149.30021 96.099465,324.74626 77.091365,474.25139 c -2.829,21.473 13.907,40.535 35.543995,40.535 h 271.311 c 21.661,0 38.373,-19.087 35.544,-40.535 -8.26237,-52.34207 -14.88466,-100.7074 -24.7871,-157.02622 -6.40949,-11.78839 -8.3911,-14.9907 -17.4031,-13.8037 -9.002,1.186 -13.59751,8.0528 -12.41051,17.0548 l 5.66371,34.11712 h -83.159 c 64.35441,-63.86663 129.29308,-130.29894 176.448,-176.449 6.42,-6.42 6.42,-16.83 -10e-4,-23.251 z m -88.956,232.582 12.004,91.074 c 0.112,0.846 -0.148,1.701 -0.708,2.341 -0.566,0.645 -1.38,1.014 -2.235,1.014 h -271.311 c -0.855,0 -1.668,-0.369 -2.231,-1.011 -0.564,-0.643 -0.824,-1.499 -0.712,-2.347 l 12.003,-91.072 h 253.19 z" }, null, -1)
+            ]), 2))
+          ]),
+          _: 1
+        }),
+        k(Y, {
+          class: "button",
+          onClick: p
+        }, {
+          default: N(() => [
+            (y(), _("svg", {
+              class: w(["icon", r.value ? "on" : "off"]),
+              viewBox: "-2 -2 28 28"
+            }, f[4] || (f[4] = [
+              m("path", { d: "m 8.9838564,1.5166215 v 2 h 5.9999996 v -2 z m 2.9999996,3 c -4.9699996,0 -8.9999996,4.0299999 -8.9999996,8.9999995 0,4.97 4.02,9 8.9999996,9 4.98,0 9,-4.03 9,-9 0,-2.12 -0.740703,-4.0693745 -1.970703,-5.6093745 l 1.419922,-1.421875 c -0.43,-0.51 -0.900156,-0.9882031 -1.410156,-1.4082031 l -1.419922,1.4199219 c -1.55,-1.24 -3.499141,-1.9804688 -5.619141,-1.9804688 z m -1.789062,4.7480469 6,4.4999996 -6,4.5 z" }, null, -1)
+            ]), 2))
+          ]),
+          _: 1
+        }),
+        k(Y, {
+          class: "button",
+          onClick: h
+        }, {
+          default: N(() => f[5] || (f[5] = [
+            m("svg", {
+              class: "icon",
+              viewBox: "0 -960 960 960"
+            }, [
+              m("path", { d: "m 306.66667,-360 q -44,0 -75.33334,-31.33333 Q 200,-422.66667 200,-466.66667 q 0,-44 31.33333,-75.33333 31.33334,-31.33333 75.33334,-31.33333 15.33333,0 28.33333,3.66666 13,3.66667 25,11 V -840 h 160 v 106.66667 H 413.33333 v 266.66666 q 0,44 -31.33333,75.33334 Q 350.66667,-360 306.66667,-360 Z" }),
+              m("path", { d: "m 546.66667,-120 q -44,0 -75.33334,-31.33333 Q 440,-182.66667 440,-226.66667 q 0,-44 31.33333,-75.33333 31.33334,-31.33333 75.33334,-31.33333 15.33333,0 28.33333,3.66666 13,3.66667 25,11 V -600 h 160 v 106.66667 H 653.33333 v 266.66666 q 0,44 -31.33333,75.33334 Q 590.66667,-120 546.66667,-120 Z" })
+            ], -1)
+          ])),
+          _: 1,
+          __: [5]
+        })
+      ])
+    ]));
+  }
+}, Dt = /* @__PURE__ */ L(Nt, [["__scopeId", "data-v-fc2b877e"]]), $t = { class: "container" }, zt = { class: "panel" }, Te = 40, Ce = 40, we = 100, Ft = 50, Be = 400, Ee = 570, Pe = 570, Ut = 350, qt = 330, Wt = 360, Ht = 360, jt = {
+  __name: "MixerLayout",
+  setup(e) {
+    F((u) => ({
+      "2540622b": i.value,
+      "25398f45": l.value,
+      fc452918: h.value
+    }));
+    const t = ae(), a = U("container"), { width: n } = q(a), s = g(() => {
+      const u = n.value, r = t.parts.length;
+      return u < 640 || u < Te * r + Be ? 0 : u < Ce * r + Ee ? 1 : u < we * r + Pe ? 2 : 3;
+    }), i = g(() => {
+      switch (s.value) {
+        case 0:
+          return `${Ut}px ` + `${Ft}px `.repeat(t.parts.length);
+        case 1:
+          return `${qt}px`;
+        case 2:
+          return `${Wt}px`;
+        default:
+          return `${Ht}px`;
+      }
+    }), l = g(() => {
+      switch (s.value) {
+        case 0:
+          return "100vw";
+        case 1:
+          return `${Te}px `.repeat(t.parts.length) + `${Be}px`;
+        case 2:
+          return `${Ce}px `.repeat(t.parts.length) + `${Ee}px`;
+        default:
+          return `${we}px `.repeat(t.parts.length) + `${Pe}px`;
+      }
+    }), h = g(() => {
+      const u = [...t.parts.keys()];
+      return s.value > 0 ? '"' + u.map((r) => "part" + r).join(" ") + ' controls"' : '"controls" ' + u.map((r) => '"part' + r + '"').join(" ");
+    });
+    return (u, r) => (y(), _("div", {
+      class: "outer",
+      ref_key: "container",
+      ref: a
+    }, [
+      m("div", $t, [
+        m("div", zt, [
+          (y(!0), _(ve, null, fe(C(t).parts, (c, p) => (y(), _e(gt, {
+            key: c.name,
+            class: w("part" + p),
+            name: c.name,
+            volume: c.volume,
+            "onUpdate:volume": (b) => c.volume = b,
+            solo: c.solo,
+            "onUpdate:solo": (b) => c.solo = b,
+            mute: c.mute,
+            "onUpdate:mute": (b) => c.mute = b,
+            ref_for: !0,
+            ref: "parts"
+          }, null, 8, ["class", "name", "volume", "onUpdate:volume", "solo", "onUpdate:solo", "mute", "onUpdate:mute"]))), 128)),
+          k(Dt, {
+            title: C(t).title,
+            class: "controls"
+          }, null, 8, ["title"])
+        ])
+      ])
+    ], 512));
+  }
+}, ta = /* @__PURE__ */ L(jt, [["__scopeId", "data-v-03258471"]]), Gt = { class: "outer" }, Zt = { class: "mid" }, Kt = { class: "inner" }, Yt = {
+  key: 0,
+  class: "content"
+}, Qt = {
+  __name: "Placeholder",
+  props: {
+    colour: {
+      type: String,
+      default: "red"
+    },
+    text: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(e) {
+    return F((t) => ({
+      "66bea586": e.colour
+    })), (t, a) => (y(), _("div", Gt, [
+      m("div", Zt, [
+        m("div", Kt, [
+          e.text || t.$slots.default ? (y(), _("div", Yt, [
+            ye(I(e.text) + " ", 1),
+            be(t.$slots, "default", {}, void 0, !0)
+          ])) : pe("", !0)
+        ])
+      ])
+    ]));
+  }
+}, aa = /* @__PURE__ */ L(Qt, [["__scopeId", "data-v-dff76c48"]]);
+export {
+  Y as AudioButton,
+  le as AudioSlider,
+  Ct as BarInput,
+  ze as BaseNumericInput,
+  he as DEV_MODE,
+  ft as DummyAudioEngine,
+  Dt as MixerControls,
+  ta as MixerLayout,
+  gt as PartControl,
+  aa as Placeholder,
+  Et as SpeedInput,
+  Pt as TimeInput,
+  De as TitleText,
+  mt as TriState,
+  $e as isDevFeature,
+  ea as isDevMode,
+  X as useAudioStateStore,
+  q as useElementSize,
+  ne as useMasterAudioControl,
+  ae as useMusicDataStore,
+  pt as usePlaybackStateStore
+};