@ovnonvo/abc-editor 0.1.0

package/dist/abc-editor.es.js

@@ -0,0 +1,924 @@
+import { jsx as h, jsxs as T } from "react/jsx-runtime";
+import { useState as M, useCallback as N, useEffect as B, useRef as I, useMemo as F } from "react";
+import K from "abcjs";
+const j = (t) => t.split(`
+`).map((s, r) => r + 1).join(`
+`), y = /^([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]:)(.*)$/, E = /[A-Ga-g]/, H = /[\^_=]/, V = /[',]/, G = /\|[:|\]]?|:?\|/, Q = /[\\[\]]/, z = /[()]/, Y = /^\(\d+$/, P = /^\/?\d+(\/\d+)?$/, k = /[zZx]/, $ = /^\.?-$/, J = /[.~HLMOPSTuv]/, X = /^"[^"]*"$/, O = /^"[\^_<>@][^"]*"$/, Z = /^![^!]+!$/, q = /^\{[^}]+\}$/, tt = /^\[\d+$/, et = /^\[([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]):([^\]]*)\]$/, nt = /^[<>]+$/, st = /^%.*$/, d = (t) => t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"), rt = (t, e) => {
+  const s = t[e];
+  if (s !== "|" && s !== ":")
+    return null;
+  let r = s, l = e + 1;
+  for (; l < t.length && (t[l] === "|" || t[l] === ":" || t[l] === "]"); )
+    r += t[l], l++;
+  return G.test(r) ? {
+    html: `<span class="${r === "||" ? "abc-bar-double" : "abc-bar"}">${d(r)}</span>`,
+    nextIndex: l
+  } : null;
+}, lt = (t, e) => {
+  const s = t[e];
+  return H.test(s) ? {
+    html: `<span class="abc-accidental">${d(s)}</span>`,
+    nextIndex: e + 1
+  } : null;
+}, at = (t, e, s) => {
+  const r = t[e];
+  if (!z.test(r))
+    return null;
+  if (r === "(") {
+    if (e + 1 < t.length && /\d/.test(t[e + 1])) {
+      let l = r, n = e + 1;
+      for (; n < t.length && /\d/.test(t[n]); )
+        l += t[n], n++;
+      if (Y.test(l))
+        return {
+          html: `<span class="abc-tuplet">${d(l)}</span>`,
+          nextIndex: n,
+          slurLevelDelta: 0
+        };
+    }
+    return {
+      html: `<span class="abc-slur abc-slur-level-${s % 5}">${d(r)}</span>`,
+      nextIndex: e + 1,
+      slurLevelDelta: 1
+    };
+  } else if (r === ")")
+    return {
+      html: `<span class="abc-slur abc-slur-level-${Math.max(0, s - 1) % 5}">${d(r)}</span>`,
+      nextIndex: e + 1,
+      slurLevelDelta: -1
+    };
+  return null;
+}, ot = (t, e) => {
+  const s = t[e];
+  if (!E.test(s))
+    return null;
+  let r = `<span class="abc-note">${d(s)}</span>`, l = e + 1, n = "";
+  for (; l < t.length && V.test(t[l]); )
+    n += t[l], l++;
+  if (n) {
+    const c = n[0] === "'" ? "abc-octave-high" : "abc-octave-low";
+    r += `<span class="${c}">${d(n)}</span>`;
+  }
+  let a = "";
+  if (l < t.length && (t[l] === "/" || /\d/.test(t[l]))) {
+    for (t[l] === "/" && (a += t[l], l++); l < t.length && /\d/.test(t[l]); )
+      a += t[l], l++;
+    if (l < t.length && t[l] === "/")
+      for (a += t[l], l++; l < t.length && /\d/.test(t[l]); )
+        a += t[l], l++;
+    if (a && P.test(a)) {
+      let c = "abc-duration";
+      a.startsWith("/") ? c += " abc-duration-short" : a.includes("/") ? c += " abc-duration-fraction" : c += " abc-duration-long", r += `<span class="${c}">${d(a)}</span>`;
+    }
+  }
+  return {
+    html: r,
+    nextIndex: l
+  };
+}, ct = (t, e) => {
+  const s = t[e];
+  return Q.test(s) ? {
+    html: `<span class="abc-chord">${d(s)}</span>`,
+    nextIndex: e + 1
+  } : null;
+}, it = (t, e) => {
+  const s = t[e];
+  if (!k.test(s))
+    return null;
+  let l = `<span class="${s === "x" ? "abc-rest-invisible" : "abc-rest"}">${d(s)}</span>`, n = e + 1, a = "";
+  if (n < t.length && (t[n] === "/" || /\d/.test(t[n]))) {
+    for (t[n] === "/" && (a += t[n], n++); n < t.length && /\d/.test(t[n]); )
+      a += t[n], n++;
+    if (n < t.length && t[n] === "/")
+      for (a += t[n], n++; n < t.length && /\d/.test(t[n]); )
+        a += t[n], n++;
+    if (a && P.test(a)) {
+      let c = "abc-duration";
+      a.startsWith("/") ? c += " abc-duration-short" : a.includes("/") ? c += " abc-duration-fraction" : c += " abc-duration-long", l += `<span class="${c}">${d(a)}</span>`;
+    }
+  }
+  return {
+    html: l,
+    nextIndex: n
+  };
+}, ut = (t, e) => {
+  const s = t[e];
+  return s === "." && e + 1 < t.length && t[e + 1] === "-" && $.test(".-") ? {
+    html: `<span class="abc-tie abc-tie-dotted">${d(".-")}</span>`,
+    nextIndex: e + 2
+  } : s === "-" && $.test(s) ? {
+    html: `<span class="abc-tie">${d(s)}</span>`,
+    nextIndex: e + 1
+  } : null;
+}, dt = (t, e) => {
+  const s = t[e];
+  return !J.test(s) || s === "." && e + 1 < t.length && t[e + 1] === "-" ? null : {
+    html: `<span class="abc-ornament">${d(s)}</span>`,
+    nextIndex: e + 1
+  };
+}, pt = (t, e) => {
+  if (t[e] !== '"')
+    return null;
+  let r = e + 1;
+  for (; r < t.length && t[r] !== '"'; )
+    r++;
+  if (r >= t.length)
+    return null;
+  const l = t.substring(e, r + 1);
+  return O.test(l) ? {
+    html: `<span class="abc-annotation">${d(l)}</span>`,
+    nextIndex: r + 1
+  } : null;
+}, ht = (t, e) => {
+  if (t[e] !== '"')
+    return null;
+  let r = e + 1;
+  for (; r < t.length && t[r] !== '"'; )
+    r++;
+  if (r >= t.length)
+    return null;
+  const l = t.substring(e, r + 1);
+  return O.test(l) || !X.test(l) ? null : {
+    html: `<span class="abc-chord-symbol">${d(l)}</span>`,
+    nextIndex: r + 1
+  };
+}, ft = (t, e) => {
+  if (t[e] !== "!")
+    return null;
+  let r = e + 1;
+  for (; r < t.length && t[r] !== "!"; )
+    r++;
+  if (r >= t.length)
+    return null;
+  const l = t.substring(e, r + 1);
+  return Z.test(l) ? {
+    html: `<span class="abc-decoration">${d(l)}</span>`,
+    nextIndex: r + 1
+  } : null;
+}, mt = (t, e) => {
+  if (t[e] !== "{")
+    return null;
+  let r = e + 1;
+  for (; r < t.length && t[r] !== "}"; )
+    r++;
+  if (r >= t.length)
+    return null;
+  const l = t.substring(e, r + 1);
+  return q.test(l) ? {
+    html: `<span class="abc-grace-note">${d(l)}</span>`,
+    nextIndex: r + 1
+  } : null;
+}, gt = (t, e) => {
+  if (t[e] !== "[")
+    return null;
+  let r = e + 1;
+  for (; r < t.length && t[r] !== "]"; )
+    r++;
+  if (r >= t.length)
+    return null;
+  const n = t.substring(e, r + 1).match(et);
+  if (!n)
+    return null;
+  const [, a, c] = n;
+  return {
+    html: `<span class="abc-inline-field-bracket">[</span><span class="abc-inline-field-key">${d(a)}:</span><span class="abc-inline-field-value">${d(c)}</span><span class="abc-inline-field-bracket">]</span>`,
+    nextIndex: r + 1
+  };
+}, bt = (t, e) => {
+  if (t[e] !== "[" || e + 1 >= t.length || !/\d/.test(t[e + 1]))
+    return null;
+  let r = e + 1;
+  for (; r < t.length && /\d/.test(t[r]); )
+    r++;
+  const l = t.substring(e, r);
+  return tt.test(l) ? {
+    html: `<span class="abc-volta-bracket">${d(l)}</span>`,
+    nextIndex: r
+  } : null;
+}, vt = (t, e) => {
+  const s = t[e];
+  if (s !== ">" && s !== "<")
+    return null;
+  let r = e + 1;
+  for (; r < t.length && t[r] === s; )
+    r++;
+  const l = t.substring(e, r);
+  return nt.test(l) ? {
+    html: `<span class="abc-broken-rhythm">${d(l)}</span>`,
+    nextIndex: r
+  } : null;
+}, xt = (t) => {
+  let e = "", s = 0, r = 0;
+  for (; s < t.length; ) {
+    const l = rt(t, s);
+    if (l) {
+      e += l.html, s = l.nextIndex;
+      continue;
+    }
+    const n = ft(t, s);
+    if (n) {
+      e += n.html, s = n.nextIndex;
+      continue;
+    }
+    const a = mt(t, s);
+    if (a) {
+      e += a.html, s = a.nextIndex;
+      continue;
+    }
+    const c = lt(t, s);
+    if (c) {
+      e += c.html, s = c.nextIndex;
+      continue;
+    }
+    const v = dt(t, s);
+    if (v) {
+      e += v.html, s = v.nextIndex;
+      continue;
+    }
+    const f = pt(t, s);
+    if (f) {
+      e += f.html, s = f.nextIndex;
+      continue;
+    }
+    const i = ht(t, s);
+    if (i) {
+      e += i.html, s = i.nextIndex;
+      continue;
+    }
+    const o = at(t, s, r);
+    if (o) {
+      e += o.html, s = o.nextIndex, o.slurLevelDelta && (r += o.slurLevelDelta);
+      continue;
+    }
+    const u = it(t, s);
+    if (u) {
+      e += u.html, s = u.nextIndex;
+      continue;
+    }
+    const p = ot(t, s);
+    if (p) {
+      e += p.html, s = p.nextIndex;
+      continue;
+    }
+    const x = vt(t, s);
+    if (x) {
+      e += x.html, s = x.nextIndex;
+      continue;
+    }
+    const m = gt(t, s);
+    if (m) {
+      e += m.html, s = m.nextIndex;
+      continue;
+    }
+    const g = bt(t, s);
+    if (g) {
+      e += g.html, s = g.nextIndex;
+      continue;
+    }
+    const A = ct(t, s);
+    if (A) {
+      e += A.html, s = A.nextIndex;
+      continue;
+    }
+    const b = ut(t, s);
+    if (b) {
+      e += b.html, s = b.nextIndex;
+      continue;
+    }
+    e += `<span class="abc-text">${d(t[s])}</span>`, s++;
+  }
+  return e;
+}, _ = (t) => t.split(`
+`).map((s) => {
+  if (st.test(s))
+    return `<span class="abc-comment">${d(s)}</span>`;
+  const r = s.match(y);
+  if (r) {
+    const [, l, n] = r;
+    return l === "w:" || l === "W:" ? `<span class="abc-lyrics-key">${d(l)}</span><span class="abc-lyrics-value">${d(n)}</span>` : `<span class="abc-meta-key">${d(l)}</span><span class="abc-meta-value">${d(n)}</span>`;
+  }
+  return xt(s);
+}).join(`
+`), At = {
+  "X:": [
+    { value: "1", description: "Reference number 1" },
+    { value: "2", description: "Reference number 2" }
+  ],
+  "T:": [
+    { value: "タイトル", description: "Japanese title template" },
+    { value: "Untitled", description: "Default title" }
+  ],
+  "M:": [
+    { value: "4/4", description: "Common time" },
+    { value: "3/4", description: "Waltz time" },
+    { value: "2/4", description: "March time" },
+    { value: "6/8", description: "Compound duple" },
+    { value: "9/8", description: "Compound triple" },
+    { value: "12/8", description: "Compound quadruple" },
+    { value: "5/4", description: "Quintuple meter" },
+    { value: "7/8", description: "Septuple meter" },
+    { value: "C", description: "Common time (4/4)" },
+    { value: "C|", description: "Cut time (2/2)" }
+  ],
+  "L:": [
+    { value: "1/4", description: "Quarter note" },
+    { value: "1/8", description: "Eighth note" },
+    { value: "1/16", description: "Sixteenth note" }
+  ],
+  "Q:": [
+    { value: "1/4=120", description: "Quarter note = 120 BPM" },
+    { value: "1/4=100", description: "Quarter note = 100 BPM" },
+    { value: "1/4=80", description: "Quarter note = 80 BPM" },
+    { value: "1/8=180", description: "Eighth note = 180 BPM" }
+  ],
+  "K:": [
+    { value: "C" },
+    { value: "G" },
+    { value: "D" },
+    { value: "A" },
+    { value: "E" },
+    { value: "B" },
+    { value: "F#" },
+    { value: "C#" },
+    { value: "F" },
+    { value: "Bb" },
+    { value: "Eb" },
+    { value: "Ab" },
+    { value: "Db" },
+    { value: "Gb" },
+    { value: "Cb" },
+    { value: "Am" },
+    { value: "Em" },
+    { value: "Bm" },
+    { value: "F#m" },
+    { value: "C#m" },
+    { value: "G#m" },
+    { value: "D#m" },
+    { value: "Dm" },
+    { value: "Gm" },
+    { value: "Cm" },
+    { value: "Fm" },
+    { value: "Bbm" },
+    { value: "Ebm" },
+    { value: "Abm" }
+  ],
+  "C:": [
+    { value: "Traditional", description: "Traditional composer" },
+    { value: "Unknown", description: "Unknown composer" }
+  ],
+  "R:": [
+    { value: "reel", description: "Reel rhythm" },
+    { value: "jig", description: "Jig rhythm" },
+    { value: "hornpipe", description: "Hornpipe rhythm" },
+    { value: "waltz", description: "Waltz rhythm" },
+    { value: "march", description: "March rhythm" }
+  ],
+  "A:": [
+    { value: "Ireland", description: "Area: Ireland" },
+    { value: "Scotland", description: "Area: Scotland" },
+    { value: "England", description: "Area: England" },
+    { value: "USA", description: "Area: USA" },
+    { value: "Japan", description: "Area: Japan" }
+  ],
+  "B:": [
+    { value: "The Session", description: "Book: The Session" },
+    { value: "O'Neill's Music of Ireland", description: "Book: O'Neill's Music of Ireland" }
+  ],
+  "D:": [
+    { value: "Album Name (Year)", description: "Discography template" }
+  ],
+  "F:": [
+    { value: "https://thesession.org/", description: "File URL template" }
+  ],
+  "G:": [
+    { value: "Group name", description: "Group template" }
+  ],
+  "H:": [
+    { value: "History note", description: "History template" }
+  ],
+  "I:": [
+    { value: "abc-charset utf-8", description: "Character set: UTF-8" }
+  ],
+  "m:": [
+    { value: "~g2 = {a}g{f}g", description: "Macro definition template" }
+  ],
+  "N:": [
+    { value: "Note text", description: "Notes template" }
+  ],
+  "O:": [
+    { value: "Traditional", description: "Origin: Traditional" },
+    { value: "Ireland", description: "Origin: Ireland" },
+    { value: "Scotland", description: "Origin: Scotland" }
+  ],
+  "P:": [
+    { value: "AABB", description: "Parts: AABB" },
+    { value: "ABCD", description: "Parts: ABCD" },
+    { value: "A", description: "Part: A" },
+    { value: "B", description: "Part: B" }
+  ],
+  "r:": [
+    { value: "Remark text", description: "Remark template" }
+  ],
+  "S:": [
+    { value: "Session tune", description: "Source: Session" },
+    { value: "Traditional", description: "Source: Traditional" }
+  ],
+  "s:": [
+    { value: "Symbol line", description: "Symbol line template" }
+  ],
+  "U:": [
+    { value: "u = !trill!", description: "User defined: trill" }
+  ],
+  "V:": [
+    { value: "1", description: "Voice 1" },
+    { value: "2", description: "Voice 2" },
+    { value: "T", description: "Tenor voice" },
+    { value: "B", description: "Bass voice" }
+  ],
+  "W:": [
+    { value: "Lyrics line", description: "Words (multi-line)" }
+  ],
+  "w:": [
+    { value: "Lyrics for this line", description: "Words (aligned)" }
+  ],
+  "Z:": [
+    { value: "Your Name", description: "Transcriber name" },
+    { value: "ABC transcription", description: "Transcription note" }
+  ]
+}, Tt = (t) => At[t] || [], Nt = [
+  {
+    value: "/header",
+    description: "Insert basic ABC header template",
+    template: `X:1
+T:Untitled
+M:4/4
+L:1/4
+K:C
+`
+  }
+], It = (t) => t.startsWith("/") ? Nt.filter(
+  (e) => e.value.toLowerCase().startsWith(t.toLowerCase())
+) : [], yt = ({
+  value: t,
+  textareaRef: e,
+  onChange: s
+}) => {
+  const [r, l] = M({
+    isOpen: !1,
+    suggestions: [],
+    selectedIndex: 0,
+    position: { top: 0, left: 0 },
+    fieldKey: null,
+    inputValue: "",
+    isCommand: !1
+  }), n = N(() => {
+    if (!e.current)
+      return null;
+    const i = e.current.selectionStart, o = t.substring(0, i).split(`
+`), u = o[o.length - 1];
+    if (u.startsWith("/"))
+      return {
+        fieldKey: null,
+        inputValue: u,
+        line: u,
+        lineStartPos: i - u.length,
+        isCommand: !0
+      };
+    const p = u.match(y);
+    if (p) {
+      const [, x, m] = p;
+      return {
+        fieldKey: x,
+        inputValue: m,
+        line: u,
+        lineStartPos: i - u.length,
+        isCommand: !1
+      };
+    }
+    return null;
+  }, [t, e]), a = N(() => {
+    if (!e.current)
+      return { top: 0, left: 0 };
+    const i = e.current, o = i.selectionStart, p = t.substring(0, o).split(`
+`).length - 1, x = parseFloat(getComputedStyle(i).lineHeight) || 24;
+    return { top: (parseFloat(getComputedStyle(i).paddingTop) || 16) + (p + 1) * x - i.scrollTop, left: 60 };
+  }, [t, e]);
+  B(() => {
+    const i = n();
+    if (!i) {
+      l((u) => ({ ...u, isOpen: !1 }));
+      return;
+    }
+    let o = [];
+    if (i.isCommand ? o = It(i.inputValue) : i.fieldKey && (o = Tt(i.fieldKey).filter(
+      (p) => p.value.toLowerCase().startsWith(i.inputValue.toLowerCase())
+    )), o.length > 0) {
+      const u = a();
+      l({
+        isOpen: !0,
+        suggestions: o,
+        selectedIndex: 0,
+        position: u,
+        fieldKey: i.fieldKey,
+        inputValue: i.inputValue,
+        isCommand: i.isCommand
+      });
+    } else
+      l((u) => ({ ...u, isOpen: !1 }));
+  }, [t, n, a]);
+  const c = N(
+    (i) => {
+      if (!e.current)
+        return;
+      const o = e.current.selectionStart, u = t.substring(0, o).split(`
+`), p = u[u.length - 1];
+      let x, m;
+      if (r.isCommand && i.template) {
+        const g = t.substring(0, o - p.length), A = t.substring(o);
+        x = g + i.template + A, m = g.length + i.template.length;
+      } else if (r.fieldKey) {
+        const g = r.fieldKey + i.value, A = t.substring(0, o - p.length), b = t.substring(o);
+        x = A + g + b, m = A.length + g.length;
+      } else
+        return;
+      s(x), setTimeout(() => {
+        e.current && (e.current.selectionStart = m, e.current.selectionEnd = m, e.current.focus());
+      }, 0), l((g) => ({ ...g, isOpen: !1 }));
+    },
+    [e, r.fieldKey, r.isCommand, t, s]
+  ), v = N(
+    (i) => {
+      if (r.isOpen)
+        switch (i.key) {
+          case "ArrowDown":
+            i.preventDefault(), l((o) => ({
+              ...o,
+              selectedIndex: Math.min(o.selectedIndex + 1, o.suggestions.length - 1)
+            }));
+            break;
+          case "ArrowUp":
+            i.preventDefault(), l((o) => ({
+              ...o,
+              selectedIndex: Math.max(o.selectedIndex - 1, 0)
+            }));
+            break;
+          case "Enter":
+            r.suggestions.length > 0 && (i.preventDefault(), c(r.suggestions[r.selectedIndex]));
+            break;
+          case "Escape":
+            i.preventDefault(), l((o) => ({ ...o, isOpen: !1 }));
+            break;
+        }
+    },
+    [r.isOpen, r.suggestions, r.selectedIndex, c]
+  ), f = N((i) => {
+    l((o) => ({ ...o, selectedIndex: i }));
+  }, []);
+  return {
+    isOpen: r.isOpen,
+    suggestions: r.suggestions,
+    selectedIndex: r.selectedIndex,
+    position: r.position,
+    handleKeyDown: v,
+    selectSuggestion: c,
+    handleMouseEnter: f
+  };
+}, Ct = ({
+  suggestions: t,
+  selectedIndex: e,
+  position: s,
+  onSelect: r,
+  onMouseEnter: l
+}) => {
+  const n = I(null);
+  return B(() => {
+    n.current?.scrollIntoView({
+      block: "nearest",
+      behavior: "smooth"
+    });
+  }, [e]), t.length === 0 ? null : /* @__PURE__ */ h(
+    "div",
+    {
+      className: "absolute z-50 bg-slate-800 border border-slate-600 rounded-md shadow-lg overflow-hidden",
+      style: {
+        top: `${s.top}px`,
+        left: `${s.left}px`,
+        minWidth: "200px",
+        maxWidth: "400px",
+        maxHeight: "300px",
+        overflowY: "auto"
+      },
+      children: t.map((a, c) => /* @__PURE__ */ T(
+        "div",
+        {
+          ref: c === e ? n : null,
+          className: `px-3 py-2 cursor-pointer ${c === e ? "bg-blue-600 text-white" : "text-slate-200 hover:bg-slate-700"}`,
+          onClick: () => r(a),
+          onMouseEnter: () => l(c),
+          children: [
+            /* @__PURE__ */ h("div", { className: "font-mono text-sm", children: a.value }),
+            a.description && /* @__PURE__ */ h("div", { className: "text-xs opacity-75 mt-1", children: a.description })
+          ]
+        },
+        `${a.value}-${c}`
+      ))
+    }
+  );
+}, wt = (t) => {
+  const e = t.trim();
+  if (e === "C")
+    return { beatsPerMeasure: 4, beatUnit: 4 };
+  if (e === "C|")
+    return { beatsPerMeasure: 2, beatUnit: 2 };
+  const s = e.match(/^(\d+)\/(\d+)$/);
+  return s ? {
+    beatsPerMeasure: parseInt(s[1], 10),
+    beatUnit: parseInt(s[2], 10)
+  } : { beatsPerMeasure: 4, beatUnit: 4 };
+}, Et = (t) => {
+  const s = t.trim().match(/^(\d+)\/(\d+)$/);
+  return s ? parseInt(s[1], 10) / parseInt(s[2], 10) : 1 / 8;
+}, Bt = (t) => {
+  const e = t.split(`
+`);
+  let s = { beatsPerMeasure: 4, beatUnit: 4 }, r = 1 / 8;
+  for (const l of e) {
+    const n = l.match(y);
+    if (n) {
+      const [, a, c] = n;
+      a === "M:" ? s = wt(c) : a === "L:" && (r = Et(c));
+    }
+  }
+  return { meter: s, unitNoteLength: r };
+}, L = (t) => {
+  if (!t)
+    return 1;
+  if (t.startsWith("/"))
+    return 1 / parseInt(t.substring(1), 10);
+  if (t.includes("/")) {
+    const [e, s] = t.split("/");
+    return parseInt(e, 10) / parseInt(s, 10);
+  }
+  return parseInt(t, 10);
+}, St = (t, e) => {
+  let s = 0, r = 0;
+  for (; r < t.length; ) {
+    const l = t[r];
+    if (E.test(l) || k.test(l)) {
+      let n = r + 1;
+      for (; n < t.length && (t[n] === "'" || t[n] === ","); )
+        n++;
+      let a = "";
+      if (n < t.length && (t[n] === "/" || /\d/.test(t[n]))) {
+        const o = n;
+        for (t[n] === "/" && n++; n < t.length && /\d/.test(t[n]); )
+          n++;
+        if (n < t.length && t[n] === "/")
+          for (n++; n < t.length && /\d/.test(t[n]); )
+            n++;
+        a = t.substring(o, n);
+      }
+      const c = L(a), v = e.unitNoteLength * c, f = 1 / e.meter.beatUnit, i = v / f;
+      s += i, r = n;
+    } else if (l === "[") {
+      let n = r + 1;
+      for (; n < t.length && t[n] !== "]"; ) {
+        const a = t[n];
+        if (E.test(a)) {
+          let c = n + 1;
+          for (; c < t.length && (t[c] === "'" || t[c] === ","); )
+            c++;
+          n = c;
+        } else
+          n++;
+      }
+      if (n < t.length && t[n] === "]") {
+        n++;
+        let a = "";
+        if (n < t.length && (t[n] === "/" || /\d/.test(t[n]))) {
+          const o = n;
+          for (t[n] === "/" && n++; n < t.length && /\d/.test(t[n]); )
+            n++;
+          if (n < t.length && t[n] === "/")
+            for (n++; n < t.length && /\d/.test(t[n]); )
+              n++;
+          a = t.substring(o, n);
+        }
+        const c = L(a), v = e.unitNoteLength * c, f = 1 / e.meter.beatUnit, i = v / f;
+        s += i;
+      }
+      r = n;
+    } else
+      r++;
+  }
+  return s;
+}, $t = (t) => {
+  const e = [], s = t.split(`
+`), r = Bt(t);
+  return s.forEach((l, n) => {
+    if (!(l.trim().startsWith("%") || y.test(l)) && l.includes("|")) {
+      let a = 0;
+      const c = l.split("|");
+      let v = 0;
+      c.forEach((f, i) => {
+        if (i === c.length - 1 && f.trim() === "")
+          return;
+        const o = f.trim();
+        if (o.startsWith(":") || o.startsWith("[") || o === "") {
+          a += f.length + 1;
+          return;
+        }
+        const u = St(o, r), p = r.meter.beatsPerMeasure;
+        if (Math.abs(u - p) > 0.01) {
+          const m = l.indexOf(o, a), g = m + o.length;
+          e.push({
+            line: n,
+            measureIndex: v,
+            startCol: m,
+            endCol: g,
+            expected: p,
+            actual: u,
+            message: `Expected ${p} beats, got ${u.toFixed(2)}`
+          });
+        }
+        v++, a += f.length + 1;
+      });
+    }
+  }), e;
+}, Pt = ({ value: t, onChange: e }) => {
+  const s = I(null), r = I(null), l = I(null), [n, a] = M(null), c = j(t), v = _(t), f = F(() => $t(t), [t]), {
+    isOpen: i,
+    suggestions: o,
+    selectedIndex: u,
+    position: p,
+    handleKeyDown: x,
+    selectSuggestion: m,
+    handleMouseEnter: g
+  } = yt({ value: t, textareaRef: s, onChange: e }), A = () => {
+    s.current && r.current && l.current && (r.current.scrollTop = s.current.scrollTop, l.current.scrollTop = s.current.scrollTop);
+  };
+  return /* @__PURE__ */ h("div", { className: "w-full md:w-1/2 h-2/3 md:h-full flex flex-col p-4", style: { backgroundColor: "#161616" }, children: /* @__PURE__ */ T("div", { className: "w-full flex-1 flex flex-col rounded-lg border border-slate-600 overflow-hidden", style: { backgroundColor: "#1a1a1a" }, children: [
+    /* @__PURE__ */ T("div", { className: "flex-1 flex overflow-hidden", children: [
+      /* @__PURE__ */ h(
+        "div",
+        {
+          ref: r,
+          className: "overflow-hidden text-right text-sm font-mono leading-relaxed text-slate-500 select-none",
+          style: { backgroundColor: "#0f0f0f", minWidth: "2.5rem" },
+          children: /* @__PURE__ */ h("pre", { className: "m-0 pl-1 pr-3 py-4", children: c })
+        }
+      ),
+      /* @__PURE__ */ T("div", { className: "flex-1 relative", children: [
+        /* @__PURE__ */ h(
+          "div",
+          {
+            ref: l,
+            className: "absolute inset-0 overflow-hidden px-4 py-4 text-sm font-mono leading-relaxed pointer-events-none",
+            style: {
+              backgroundColor: "#1a1a1a",
+              opacity: n ? 0.3 : 1,
+              transition: "opacity 0.2s"
+            },
+            children: /* @__PURE__ */ h(
+              "pre",
+              {
+                className: "m-0",
+                dangerouslySetInnerHTML: { __html: v }
+              }
+            )
+          }
+        ),
+        n && (() => {
+          const b = t.split(`
+`), R = (b[n.line] || "").substring(n.startCol, n.endCol), D = _(R);
+          return /* @__PURE__ */ h(
+            "div",
+            {
+              className: "absolute inset-0 overflow-hidden px-4 py-4 text-sm font-mono leading-relaxed pointer-events-none",
+              style: { backgroundColor: "transparent" },
+              children: /* @__PURE__ */ h("pre", { className: "m-0", children: b.map((C, w) => {
+                if (w === n.line) {
+                  const U = C.substring(0, n.startCol), W = C.substring(n.endCol);
+                  return /* @__PURE__ */ T("div", { children: [
+                    /* @__PURE__ */ h("span", { style: { opacity: 0 }, children: U }),
+                    /* @__PURE__ */ h(
+                      "span",
+                      {
+                        className: "bg-amber-500/20 px-1 rounded",
+                        dangerouslySetInnerHTML: { __html: D }
+                      }
+                    ),
+                    /* @__PURE__ */ h("span", { style: { opacity: 0 }, children: W })
+                  ] }, w);
+                }
+                return /* @__PURE__ */ h("div", { style: { opacity: 0 }, children: C }, w);
+              }) })
+            }
+          );
+        })(),
+        /* @__PURE__ */ h(
+          "textarea",
+          {
+            ref: s,
+            className: "absolute inset-0 w-full h-full resize-none px-4 py-4 text-sm font-mono leading-relaxed outline-none border-0",
+            style: { backgroundColor: "transparent", color: "transparent", caretColor: "#fff" },
+            value: t,
+            onChange: (b) => e(b.target.value),
+            onScroll: A,
+            onKeyDown: x,
+            spellCheck: !1,
+            placeholder: "Type /header to insert template..."
+          }
+        ),
+        i && /* @__PURE__ */ h(
+          Ct,
+          {
+            suggestions: o,
+            selectedIndex: u,
+            position: p,
+            onSelect: m,
+            onMouseEnter: g
+          }
+        )
+      ] })
+    ] }),
+    f.length > 0 && /* @__PURE__ */ T(
+      "div",
+      {
+        className: "border-t border-slate-600 px-4 py-3 text-xs font-mono overflow-auto",
+        style: { backgroundColor: "#0f0f0f", maxHeight: "8rem" },
+        children: [
+          /* @__PURE__ */ T("div", { className: "text-slate-500 mb-2 text-[10px] uppercase tracking-wide", children: [
+            "Validation Errors (",
+            f.length,
+            ")"
+          ] }),
+          f.map((b, S) => /* @__PURE__ */ T(
+            "div",
+            {
+              className: "flex items-start gap-3 mb-2 last:mb-0 hover:bg-slate-800/30 px-2 py-1 rounded transition-colors cursor-pointer",
+              onMouseEnter: () => a(b),
+              onMouseLeave: () => a(null),
+              children: [
+                /* @__PURE__ */ h("span", { className: "text-amber-500 shrink-0 mt-0.5", children: "⚠️" }),
+                /* @__PURE__ */ T("div", { className: "flex-1 flex gap-2", children: [
+                  /* @__PURE__ */ T("span", { className: "text-cyan-400 shrink-0", children: [
+                    "Ln ",
+                    b.line + 1,
+                    ", M",
+                    b.measureIndex + 1,
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ h("span", { className: "text-amber-300", children: b.message })
+                ] })
+              ]
+            },
+            S
+          ))
+        ]
+      }
+    )
+  ] }) });
+}, kt = ({ abc: t }) => {
+  const e = I(null);
+  return B(() => {
+    e.current && K.renderAbc(e.current, t, {
+      responsive: "resize",
+      foregroundColor: "#ffffff",
+      format: {
+        titlefont: "serif 20"
+      }
+    });
+  }, [t]), /* @__PURE__ */ h("div", { ref: e, className: "w-full abc-preview" });
+};
+export {
+  H as ABC_ACCIDENTAL_PATTERN,
+  O as ABC_ANNOTATION_PATTERN,
+  G as ABC_BAR_PATTERN,
+  nt as ABC_BROKEN_RHYTHM_PATTERN,
+  Q as ABC_CHORD_BRACKET_PATTERN,
+  X as ABC_CHORD_SYMBOL_PATTERN,
+  Nt as ABC_COMMANDS,
+  st as ABC_COMMENT_PATTERN,
+  Z as ABC_DECORATION_PATTERN,
+  P as ABC_DURATION_PATTERN,
+  y as ABC_FIELD_PATTERN,
+  q as ABC_GRACE_NOTE_PATTERN,
+  et as ABC_INLINE_FIELD_PATTERN,
+  E as ABC_NOTE_PATTERN,
+  V as ABC_OCTAVE_PATTERN,
+  J as ABC_ORNAMENT_PATTERN,
+  k as ABC_REST_PATTERN,
+  z as ABC_SLUR_PATTERN,
+  At as ABC_SUGGESTIONS,
+  $ as ABC_TIE_PATTERN,
+  Y as ABC_TUPLET_PATTERN,
+  tt as ABC_VOLTA_BRACKET_PATTERN,
+  Pt as AbcEditor,
+  kt as AbcPreview,
+  Ct as SuggestionList,
+  _ as highlightAbc,
+  yt as useAbcAutoComplete,
+  j as useLineNumbers,
+  $t as validateAbc
+};