@ovnonvo/abc-editor 0.3.5 → 0.4.0

package/dist/abc-editor.es.js

@@ -1,1164 +1,1148 @@
-(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode('@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-600:oklch(54.6% .245 262.881);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-950:oklch(12.9% .042 264.695);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1)}}@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.z-50{z-index:50}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.table{display:table}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.bg-blue-600{background-color:var(--color-blue-600)}.bg-slate-800{background-color:var(--color-slate-800)}.bg-slate-950{background-color:var(--color-slate-950)}.p-3{padding:calc(var(--spacing)*3)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.break-all{word-break:break-all}.text-slate-200{color:var(--color-slate-200)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.select-none{-webkit-user-select:none;user-select:none}.\\[foo\\:bar\\]{foo:bar}@media(hover:hover){.hover\\:bg-slate-700:hover{background-color:var(--color-slate-700)}}}*{box-sizing:border-box}body{margin:0;padding:0}:root{--abc-ink:#1a1a1a;--abc-key:#06c;--abc-value:#996300;--abc-lyrics-key:#c06;--abc-lyrics-value:#b30059;--abc-note:#000;--abc-octave-high:#00994d;--abc-octave-low:#60c;--abc-rest:#666;--abc-rest-muted:#999;--abc-accidental:#b35900;--abc-duration-long:#cc5200;--abc-duration-short:#09c;--abc-duration-fraction:#c90;--abc-broken:#00b359;--abc-bar:#0080cc;--abc-bar-double:#06c;--abc-chord:#c09;--abc-slur-0:#cc004d;--abc-slur-1:#cc8000;--abc-slur-2:#0080cc;--abc-slur-3:#00b359;--abc-slur-4:#70c;--abc-tuplet:#00b359;--abc-tie:#c06;--abc-tie-dotted:#cc0080;--abc-ornament:#56c;--abc-chord-symbol:#00997a;--abc-annotation:#c80;--abc-decoration:#86c;--abc-grace:#66b300;--abc-volta:#c60;--abc-inline-bracket:#666;--abc-inline-key:#06c;--abc-inline-value:#960;--abc-comment:#999}[data-theme=dark]{--abc-ink:#e8f1ff;--abc-key:#7ad7ff;--abc-value:#ffd48a;--abc-lyrics-key:#ff7ba1;--abc-lyrics-value:#ffc8d8;--abc-note:#f8fbff;--abc-octave-high:#73f8c4;--abc-octave-low:#c7b3ff;--abc-rest:#8ca3b8;--abc-rest-muted:#596779;--abc-accidental:#f2c079;--abc-duration-long:#ffa25f;--abc-duration-short:#6edff6;--abc-duration-fraction:#ffe38f;--abc-broken:#7be495;--abc-bar:#79cfff;--abc-bar-double:#4aafff;--abc-chord:#ff8ccf;--abc-slur-0:#ff92b2;--abc-slur-1:#ffd77a;--abc-slur-2:#7ed4ff;--abc-slur-3:#92f3c6;--abc-slur-4:#c6a9ff;--abc-tuplet:#82f0a2;--abc-tie:#f07fb3;--abc-tie-dotted:#ff9ecf;--abc-ornament:#9fb0ff;--abc-chord-symbol:#63f5d3;--abc-annotation:#ffd88a;--abc-decoration:#d1a6ff;--abc-grace:#a4f28f;--abc-volta:#f9a15a;--abc-inline-bracket:#8ca7c0;--abc-inline-key:#7ad7ff;--abc-inline-value:#ffdcb2;--abc-comment:#7b8797}.abc-preview svg text{fill:#000!important}.abc-preview[data-theme=dark] svg text{fill:#fff!important}textarea::placeholder{color:#999;opacity:1}[data-theme=dark] textarea::placeholder{color:#64748b}.abc-meta-key{color:var(--abc-key);font-weight:600}.abc-meta-value{color:var(--abc-value)}.abc-lyrics-key{color:var(--abc-lyrics-key);font-weight:600}.abc-lyrics-value{color:var(--abc-lyrics-value)}.abc-note{color:var(--abc-note)}.abc-octave-high{color:var(--abc-octave-high);font-weight:600}.abc-octave-low{color:var(--abc-octave-low);font-weight:600}.abc-rest{color:var(--abc-rest)}.abc-rest-invisible{color:var(--abc-rest-muted);opacity:.5}.abc-accidental{color:var(--abc-accidental)}.abc-duration{font-weight:600}.abc-duration-long{color:var(--abc-duration-long)}.abc-duration-short{color:var(--abc-duration-short)}.abc-duration-fraction{color:var(--abc-duration-fraction)}.abc-broken-rhythm{color:var(--abc-broken);font-weight:700}.abc-bar{color:var(--abc-bar);font-weight:600}.abc-bar-double{color:var(--abc-bar-double);font-weight:900}.abc-chord{color:var(--abc-chord)}.abc-slur{font-weight:700}.abc-slur-level-0{color:var(--abc-slur-0)}.abc-slur-level-1{color:var(--abc-slur-1)}.abc-slur-level-2{color:var(--abc-slur-2)}.abc-slur-level-3{color:var(--abc-slur-3)}.abc-slur-level-4{color:var(--abc-slur-4)}.abc-tuplet{color:var(--abc-tuplet);font-weight:700}.abc-tie{color:var(--abc-tie);font-weight:600}.abc-tie-dotted{color:var(--abc-tie-dotted)}.abc-ornament{color:var(--abc-ornament);font-weight:700}.abc-chord-symbol{color:var(--abc-chord-symbol);font-weight:700}.abc-annotation{color:var(--abc-annotation);font-style:italic;font-weight:600}.abc-decoration{color:var(--abc-decoration);font-weight:700}.abc-grace-note{color:var(--abc-grace);font-weight:600}.abc-volta-bracket{color:var(--abc-volta);font-weight:700}.abc-inline-field-bracket{color:var(--abc-inline-bracket)}.abc-inline-field-key{color:var(--abc-inline-key);font-weight:600}.abc-inline-field-value{color:var(--abc-inline-value)}.abc-comment{color:var(--abc-comment);font-style:italic}.abc-text{color:var(--abc-ink)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}')),document.head.appendChild(a)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { jsx as h, jsxs as x } from "react/jsx-runtime";
-import { useState as R, useCallback as I, useEffect as P, useRef as w, useMemo as V } from "react";
-const G = (e) => e.split(`
-`).map((t, r) => r + 1).join(`
-`), S = /^([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]:)(.*)$/, E = /[A-Ga-g]/, z = /[\^_=]/, Q = /[',]/, q = /\|[:|\]]?|:?\|/, X = /[\\[\]]/, Y = /[()]/, J = /^\(\d+$/, O = /^(\/+|\d+(\/\d+)?|\/?\d+(\/\d+)?)$/, D = /[zZx]/, M = /^\.?-$/, Z = /[.~HLMOPSTuv]/, ee = /^"[^"]*"$/, W = /^"[\^_<>@][^"]*"$/, te = /^![^!]+!$/, ne = /^\{[^}]+\}$/, re = /^\[\d+$/, se = /^\[([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]):([^\]]*)\]$/, le = /^[<>]+$/, oe = /^%.*$/, p = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"), ae = (e, n) => {
-  const t = e[n];
-  if (t !== "|" && t !== ":")
-    return null;
-  let r = t, s = n + 1;
-  for (; s < e.length && (e[s] === "|" || e[s] === ":" || e[s] === "]"); )
-    r += e[s], s++;
-  return q.test(r) ? {
-    html: `<span class="${r === "||" ? "abc-bar-double" : "abc-bar"}">${p(r)}</span>`,
-    nextIndex: s
-  } : null;
-}, ie = (e, n) => {
-  const t = e[n];
-  return z.test(t) ? {
-    html: `<span class="abc-accidental">${p(t)}</span>`,
-    nextIndex: n + 1
-  } : null;
-}, ce = (e, n, t) => {
-  const r = e[n];
-  if (!Y.test(r))
-    return null;
-  if (r === "(") {
-    if (n + 1 < e.length && /\d/.test(e[n + 1])) {
-      let s = r, o = n + 1;
-      for (; o < e.length && /\d/.test(e[o]); )
-        s += e[o], o++;
-      if (J.test(s))
-        return {
-          html: `<span class="abc-tuplet">${p(s)}</span>`,
-          nextIndex: o,
-          slurLevelDelta: 0
-        };
+import { jsx as a, jsxs as p, Fragment as M } from "react/jsx-runtime";
+import { useState as _, useCallback as y, useEffect as k, useRef as N, useMemo as O } from "react";
+import D, { tokenize as W, parse as F, analyze as K, format_default as H } from "chamber-abc";
+let ne, ge, ie, Ce, le, me, Q, Te, fe, ce, z, he, ve, re, oe, pe, de, se, G, ue, ae, be, ye, X, V, J, $, Z;
+let __tla = (async () => {
+  (function() {
+    "use strict";
+    try {
+      if (typeof document < "u") {
+        var a2 = document.createElement("style");
+        a2.appendChild(document.createTextNode('@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-600:oklch(54.6% .245 262.881);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-950:oklch(12.9% .042 264.695);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1)}}@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.z-50{z-index:50}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.block{display:block}.flex{display:flex}.inline{display:inline}.table{display:table}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.bg-blue-600{background-color:var(--color-blue-600)}.bg-slate-800{background-color:var(--color-slate-800)}.bg-slate-950{background-color:var(--color-slate-950)}.p-3{padding:calc(var(--spacing)*3)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.break-all{word-break:break-all}.text-slate-200{color:var(--color-slate-200)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.select-none{-webkit-user-select:none;user-select:none}@media(hover:hover){.hover\\:bg-slate-700:hover{background-color:var(--color-slate-700)}}}*{box-sizing:border-box}body{margin:0;padding:0}:root{--abc-ink:#1a1a1a;--abc-key:#06c;--abc-value:#996300;--abc-lyrics-key:#c06;--abc-lyrics-value:#b30059;--abc-note:#000;--abc-octave-high:#00994d;--abc-octave-low:#60c;--abc-rest:#666;--abc-rest-muted:#999;--abc-accidental:#b35900;--abc-duration-long:#cc5200;--abc-duration-short:#09c;--abc-duration-fraction:#c90;--abc-broken:#00b359;--abc-bar:#0080cc;--abc-bar-double:#06c;--abc-chord:#c09;--abc-slur-0:#cc004d;--abc-slur-1:#cc8000;--abc-slur-2:#0080cc;--abc-slur-3:#00b359;--abc-slur-4:#70c;--abc-tuplet:#00b359;--abc-tie:#c06;--abc-tie-dotted:#cc0080;--abc-ornament:#56c;--abc-chord-symbol:#00997a;--abc-annotation:#c80;--abc-decoration:#86c;--abc-grace:#66b300;--abc-volta:#c60;--abc-inline-bracket:#666;--abc-inline-key:#06c;--abc-inline-value:#960;--abc-comment:#999}[data-theme=dark]{--abc-ink:#e8f1ff;--abc-key:#7ad7ff;--abc-value:#ffd48a;--abc-lyrics-key:#ff7ba1;--abc-lyrics-value:#ffc8d8;--abc-note:#f8fbff;--abc-octave-high:#73f8c4;--abc-octave-low:#c7b3ff;--abc-rest:#8ca3b8;--abc-rest-muted:#596779;--abc-accidental:#f2c079;--abc-duration-long:#ffa25f;--abc-duration-short:#6edff6;--abc-duration-fraction:#ffe38f;--abc-broken:#7be495;--abc-bar:#79cfff;--abc-bar-double:#4aafff;--abc-chord:#ff8ccf;--abc-slur-0:#ff92b2;--abc-slur-1:#ffd77a;--abc-slur-2:#7ed4ff;--abc-slur-3:#92f3c6;--abc-slur-4:#c6a9ff;--abc-tuplet:#82f0a2;--abc-tie:#f07fb3;--abc-tie-dotted:#ff9ecf;--abc-ornament:#9fb0ff;--abc-chord-symbol:#63f5d3;--abc-annotation:#ffd88a;--abc-decoration:#d1a6ff;--abc-grace:#a4f28f;--abc-volta:#f9a15a;--abc-inline-bracket:#8ca7c0;--abc-inline-key:#7ad7ff;--abc-inline-value:#ffdcb2;--abc-comment:#7b8797}.abc-preview svg text{fill:#000!important}.abc-preview[data-theme=dark] svg text{fill:#fff!important}textarea::placeholder{color:#999;opacity:1}[data-theme=dark] textarea::placeholder{color:#64748b}.abc-meta-key{color:var(--abc-key);font-weight:600}.abc-meta-value{color:var(--abc-value)}.abc-lyrics-key{color:var(--abc-lyrics-key);font-weight:600}.abc-lyrics-value{color:var(--abc-lyrics-value)}.abc-note{color:var(--abc-note)}.abc-octave-high{color:var(--abc-octave-high);font-weight:600}.abc-octave-low{color:var(--abc-octave-low);font-weight:600}.abc-rest{color:var(--abc-rest)}.abc-rest-invisible{color:var(--abc-rest-muted);opacity:.5}.abc-accidental{color:var(--abc-accidental)}.abc-duration{font-weight:600}.abc-duration-long{color:var(--abc-duration-long)}.abc-duration-short{color:var(--abc-duration-short)}.abc-duration-fraction{color:var(--abc-duration-fraction)}.abc-broken-rhythm{color:var(--abc-broken);font-weight:700}.abc-bar{color:var(--abc-bar);font-weight:600}.abc-bar-double{color:var(--abc-bar-double);font-weight:900}.abc-chord{color:var(--abc-chord)}.abc-slur{font-weight:700}.abc-slur-level-0{color:var(--abc-slur-0)}.abc-slur-level-1{color:var(--abc-slur-1)}.abc-slur-level-2{color:var(--abc-slur-2)}.abc-slur-level-3{color:var(--abc-slur-3)}.abc-slur-level-4{color:var(--abc-slur-4)}.abc-tuplet{color:var(--abc-tuplet);font-weight:700}.abc-tie{color:var(--abc-tie);font-weight:600}.abc-tie-dotted{color:var(--abc-tie-dotted)}.abc-ornament{color:var(--abc-ornament);font-weight:700}.abc-chord-symbol{color:var(--abc-chord-symbol);font-weight:700}.abc-annotation{color:var(--abc-annotation);font-style:italic;font-weight:600}.abc-decoration{color:var(--abc-decoration);font-weight:700}.abc-grace-note{color:var(--abc-grace);font-weight:600}.abc-volta-bracket{color:var(--abc-volta);font-weight:700}.abc-inline-field-bracket{color:var(--abc-inline-bracket)}.abc-inline-field-key{color:var(--abc-inline-key);font-weight:600}.abc-inline-field-value{color:var(--abc-inline-value)}.abc-comment{color:var(--abc-comment);font-style:italic}.abc-text{color:var(--abc-ink)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}')), document.head.appendChild(a2);
+      }
+    } catch (t) {
+      console.error("vite-plugin-css-injected-by-js", t);
     }
-    return {
-      html: `<span class="abc-slur abc-slur-level-${t % 5}">${p(r)}</span>`,
-      nextIndex: n + 1,
-      slurLevelDelta: 1
-    };
-  } else if (r === ")")
-    return {
-      html: `<span class="abc-slur abc-slur-level-${Math.max(0, t - 1) % 5}">${p(r)}</span>`,
-      nextIndex: n + 1,
-      slurLevelDelta: -1
-    };
-  return null;
-}, ue = (e, n) => {
-  const t = e[n];
-  if (!E.test(t))
-    return null;
-  let r = `<span class="abc-note">${p(t)}</span>`, s = n + 1, o = "";
-  for (; s < e.length && Q.test(e[s]); )
-    o += e[s], s++;
-  if (o) {
-    const u = o[0] === "'" ? "abc-octave-high" : "abc-octave-low";
-    r += `<span class="${u}">${p(o)}</span>`;
-  }
-  let l = "";
-  const c = s;
-  if (s < e.length && (e[s] === "/" || /\d/.test(e[s]))) {
-    for (e[s] === "/" && (l += e[s], s++); s < e.length && /\d/.test(e[s]); )
-      l += e[s], s++;
-    if (s < e.length && e[s] === "/")
-      for (l += e[s], s++; s < e.length && /\d/.test(e[s]); )
-        l += e[s], s++;
-    if (l && O.test(l)) {
-      let u = "abc-duration";
-      l.startsWith("/") ? u += " abc-duration-short" : l.includes("/") ? u += " abc-duration-fraction" : u += " abc-duration-long", r += `<span class="${u}">${p(l)}</span>`;
-    } else
-      s = c;
-  }
-  return {
-    html: r,
-    nextIndex: s
-  };
-}, de = (e, n) => {
-  const t = e[n];
-  return X.test(t) ? {
-    html: `<span class="abc-chord">${p(t)}</span>`,
-    nextIndex: n + 1
-  } : null;
-}, pe = (e, n) => {
-  const t = e[n];
-  if (!D.test(t))
-    return null;
-  let s = `<span class="${t === "x" ? "abc-rest-invisible" : "abc-rest"}">${p(t)}</span>`, o = n + 1, l = "";
-  const c = o;
-  if (o < e.length && (e[o] === "/" || /\d/.test(e[o]))) {
-    for (e[o] === "/" && (l += e[o], o++); o < e.length && /\d/.test(e[o]); )
-      l += e[o], o++;
-    if (o < e.length && e[o] === "/")
-      for (l += e[o], o++; o < e.length && /\d/.test(e[o]); )
-        l += e[o], o++;
-    if (l && O.test(l)) {
-      let u = "abc-duration";
-      l.startsWith("/") ? u += " abc-duration-short" : l.includes("/") ? u += " abc-duration-fraction" : u += " abc-duration-long", s += `<span class="${u}">${p(l)}</span>`;
-    } else
-      o = c;
-  }
-  return {
-    html: s,
-    nextIndex: o
-  };
-}, he = (e, n) => {
-  const t = e[n];
-  return t === "." && n + 1 < e.length && e[n + 1] === "-" && M.test(".-") ? {
-    html: `<span class="abc-tie abc-tie-dotted">${p(".-")}</span>`,
-    nextIndex: n + 2
-  } : t === "-" && M.test(t) ? {
-    html: `<span class="abc-tie">${p(t)}</span>`,
-    nextIndex: n + 1
-  } : null;
-}, fe = (e, n) => {
-  const t = e[n];
-  return !Z.test(t) || t === "." && n + 1 < e.length && e[n + 1] === "-" ? null : {
-    html: `<span class="abc-ornament">${p(t)}</span>`,
-    nextIndex: n + 1
+  })();
+  $ = (r) => r.split(`
+`).map((i, e) => e + 1).join(`
+`);
+  await D();
+  let U, B, j, Y, L, S;
+  U = {
+    FieldLabel: "abc-meta-key",
+    Colon: "abc-meta-key",
+    Note: "abc-note",
+    Rest: "abc-rest",
+    OctaveUp: "abc-octave-high",
+    OctaveDown: "abc-octave-low",
+    NoteLength: "abc-duration",
+    Sharp: "abc-accidental",
+    Natural: "abc-accidental",
+    Flat: "abc-accidental",
+    Bar: "abc-bar",
+    DoubleBar: "abc-bar-double",
+    RepeatStart: "abc-bar",
+    RepeatEnd: "abc-bar",
+    ThinThickBar: "abc-bar-double",
+    ThickThinBar: "abc-bar-double",
+    LeftBracket: "abc-chord",
+    RightBracket: "abc-chord",
+    LeftParen: "abc-slur",
+    RightParen: "abc-slur",
+    LeftBrace: "abc-grace-note",
+    RightBrace: "abc-grace-note",
+    Tie: "abc-tie",
+    BrokenRhythm: "abc-broken-rhythm",
+    Tuplet: "abc-tuplet",
+    Decoration: "abc-decoration",
+    Text: "abc-meta-value",
+    Number: "abc-duration",
+    Slash: "abc-duration",
+    Whitespace: "",
+    Newline: "",
+    Comment: "abc-comment",
+    LineContinuation: "abc-text",
+    Eof: "",
+    Error: "abc-error"
   };
-}, ge = (e, n) => {
-  if (e[n] !== '"')
-    return null;
-  let r = n + 1;
-  for (; r < e.length && e[r] !== '"'; )
-    r++;
-  if (r >= e.length)
-    return null;
-  const s = e.substring(n, r + 1);
-  return W.test(s) ? {
-    html: `<span class="abc-annotation">${p(s)}</span>`,
-    nextIndex: r + 1
-  } : null;
-}, me = (e, n) => {
-  if (e[n] !== '"')
-    return null;
-  let r = n + 1;
-  for (; r < e.length && e[r] !== '"'; )
-    r++;
-  if (r >= e.length)
-    return null;
-  const s = e.substring(n, r + 1);
-  return W.test(s) || !ee.test(s) ? null : {
-    html: `<span class="abc-chord-symbol">${p(s)}</span>`,
-    nextIndex: r + 1
+  B = (r) => r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+  V = (r) => {
+    const n = W(r);
+    if (!n || !Array.isArray(n)) return B(r);
+    let i = "", e = 0;
+    for (const l of n) {
+      const d = l.range.start, m = l.range.end;
+      d > e && (i += B(r.slice(e, d)));
+      const g = r.slice(d, m), C = U[l.kind];
+      C ? i += `<span class="${C}">${B(g)}</span>` : i += B(g), e = m;
+    }
+    return e < r.length && (i += B(r.slice(e))), i;
   };
-}, be = (e, n) => {
-  if (e[n] !== "!")
-    return null;
-  let r = n + 1;
-  for (; r < e.length && e[r] !== "!"; )
-    r++;
-  if (r >= e.length)
-    return null;
-  const s = e.substring(n, r + 1);
-  return te.test(s) ? {
-    html: `<span class="abc-decoration">${p(s)}</span>`,
-    nextIndex: r + 1
-  } : null;
-}, ve = (e, n) => {
-  if (e[n] !== "{")
-    return null;
-  let r = n + 1;
-  for (; r < e.length && e[r] !== "}"; )
-    r++;
-  if (r >= e.length)
-    return null;
-  const s = e.substring(n, r + 1);
-  return ne.test(s) ? {
-    html: `<span class="abc-grace-note">${p(s)}</span>`,
-    nextIndex: r + 1
-  } : null;
-}, xe = (e, n) => {
-  if (e[n] !== "[")
-    return null;
-  let r = n + 1;
-  for (; r < e.length && e[r] !== "]"; )
-    r++;
-  if (r >= e.length)
-    return null;
-  const o = e.substring(n, r + 1).match(se);
-  if (!o)
-    return null;
-  const [, l, c] = o;
-  return {
-    html: `<span class="abc-inline-field-bracket">[</span><span class="abc-inline-field-key">${p(l)}:</span><span class="abc-inline-field-value">${p(c)}</span><span class="abc-inline-field-bracket">]</span>`,
-    nextIndex: r + 1
+  z = /^([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]:)(.*)$/;
+  re = /[A-Ga-g]/;
+  ne = /[\^_=]/;
+  oe = /[',]/;
+  ie = /\|[:|\]]?|:?\|/;
+  le = /[\\[\]]/;
+  se = /[()]/;
+  ae = /^\(\d+$/;
+  ce = /^(\/+|\d+(\/\d+)?|\/?\d+(\/\d+)?)$/;
+  de = /[zZx]/;
+  ue = /^\.?-$/;
+  pe = /[.~HLMOPSTuv]/;
+  me = /^"[^"]*"$/;
+  ge = /^"[\^_<>@][^"]*"$/;
+  fe = /^![^!]+!$/;
+  he = /^\{[^}]+\}$/;
+  be = /^\[\d+$/;
+  ve = /^\[([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]):([^\]]*)\]$/;
+  Ce = /^[<>]+$/;
+  Te = /^%.*$/;
+  G = {
+    "X:": [
+      {
+        value: "1",
+        description: "Reference number 1"
+      },
+      {
+        value: "2",
+        description: "Reference number 2"
+      }
+    ],
+    "T:": [
+      {
+        value: "\u30BF\u30A4\u30C8\u30EB",
+        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"
+      }
+    ]
   };
-}, ye = (e, n) => {
-  if (e[n] !== "[" || n + 1 >= e.length || !/\d/.test(e[n + 1]))
-    return null;
-  let r = n + 1;
-  for (; r < e.length && /\d/.test(e[r]); )
-    r++;
-  const s = e.substring(n, r);
-  return re.test(s) ? {
-    html: `<span class="abc-volta-bracket">${p(s)}</span>`,
-    nextIndex: r
-  } : null;
-}, Be = (e, n) => {
-  const t = e[n];
-  if (t !== ">" && t !== "<")
-    return null;
-  let r = n + 1;
-  for (; r < e.length && e[r] === t; )
-    r++;
-  const s = e.substring(n, r);
-  return le.test(s) ? {
-    html: `<span class="abc-broken-rhythm">${p(s)}</span>`,
-    nextIndex: r
-  } : null;
-}, Te = (e) => {
-  let n = "", t = 0, r = 0;
-  for (; t < e.length; ) {
-    const s = ae(e, t);
-    if (s) {
-      n += s.html, t = s.nextIndex;
-      continue;
-    }
-    const o = be(e, t);
-    if (o) {
-      n += o.html, t = o.nextIndex;
-      continue;
-    }
-    const l = ve(e, t);
-    if (l) {
-      n += l.html, t = l.nextIndex;
-      continue;
-    }
-    const c = ie(e, t);
-    if (c) {
-      n += c.html, t = c.nextIndex;
-      continue;
-    }
-    const u = fe(e, t);
-    if (u) {
-      n += u.html, t = u.nextIndex;
-      continue;
-    }
-    const f = ge(e, t);
-    if (f) {
-      n += f.html, t = f.nextIndex;
-      continue;
-    }
-    const i = me(e, t);
-    if (i) {
-      n += i.html, t = i.nextIndex;
-      continue;
-    }
-    const a = ce(e, t, r);
-    if (a) {
-      n += a.html, t = a.nextIndex, a.slurLevelDelta && (r += a.slurLevelDelta);
-      continue;
-    }
-    const d = pe(e, t);
-    if (d) {
-      n += d.html, t = d.nextIndex;
-      continue;
-    }
-    const m = ue(e, t);
-    if (m) {
-      n += m.html, t = m.nextIndex;
-      continue;
-    }
-    const y = Be(e, t);
-    if (y) {
-      n += y.html, t = y.nextIndex;
-      continue;
-    }
-    const b = xe(e, t);
-    if (b) {
-      n += b.html, t = b.nextIndex;
-      continue;
-    }
-    const v = ye(e, t);
-    if (v) {
-      n += v.html, t = v.nextIndex;
-      continue;
-    }
-    const B = de(e, t);
-    if (B) {
-      n += B.html, t = B.nextIndex;
-      continue;
-    }
-    const T = he(e, t);
-    if (T) {
-      n += T.html, t = T.nextIndex;
-      continue;
-    }
-    n += `<span class="abc-text">${p(e[t])}</span>`, t++;
-  }
-  return n;
-}, $ = (e) => e.split(`
-`).map((t) => {
-  if (oe.test(t))
-    return `<span class="abc-comment">${p(t)}</span>`;
-  const r = t.match(S);
-  if (r) {
-    const [, s, o] = r;
-    return s === "w:" || s === "W:" ? `<span class="abc-lyrics-key">${p(s)}</span><span class="abc-lyrics-value">${p(o)}</span>` : `<span class="abc-meta-key">${p(s)}</span><span class="abc-meta-value">${p(o)}</span>`;
-  }
-  return Te(t);
-}).join(`
-`), Ae = {
-  "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" }
-  ]
-}, Ie = (e) => Ae[e] || [], Ne = [
-  {
-    value: "/header",
-    description: "Insert basic ABC header template",
-    template: `X:1
+  j = (r) => G[r] || [];
+  Q = [
+    {
+      value: "/header",
+      description: "Insert basic ABC header template",
+      template: `X:1
 T:Untitled
 M:4/4
 L:1/4
 K:C
 `
-  }
-], Ce = (e) => e.startsWith("/") ? Ne.filter(
-  (n) => n.value.toLowerCase().startsWith(e.toLowerCase())
-) : [], we = ({
-  value: e,
-  textareaRef: n,
-  onChange: t
-}) => {
-  const [r, s] = R({
-    isOpen: !1,
-    suggestions: [],
-    selectedIndex: 0,
-    position: { top: 0, left: 0 },
-    fieldKey: null,
-    inputValue: "",
-    isCommand: !1
-  }), o = I(() => {
-    if (!n.current)
-      return null;
-    const i = n.current.selectionStart, a = e.substring(0, i).split(`
-`), d = a[a.length - 1];
-    if (d.startsWith("/"))
-      return {
+    }
+  ];
+  Y = (r) => r.startsWith("/") ? Q.filter((n) => n.value.toLowerCase().startsWith(r.toLowerCase())) : [];
+  J = ({ value: r, textareaRef: n, onChange: i }) => {
+    const [e, l] = _({
+      isOpen: false,
+      suggestions: [],
+      selectedIndex: 0,
+      position: {
+        top: 0,
+        left: 0
+      },
+      fieldKey: null,
+      inputValue: "",
+      isCommand: false
+    }), d = y(() => {
+      if (!n.current) return null;
+      const o = n.current.selectionStart, t = r.substring(0, o).split(`
+`), c = t[t.length - 1];
+      if (c.startsWith("/")) return {
         fieldKey: null,
-        inputValue: d,
-        line: d,
-        lineStartPos: i - d.length,
-        isCommand: !0
+        inputValue: c,
+        line: c,
+        lineStartPos: o - c.length,
+        isCommand: true
       };
-    const m = d.match(S);
-    if (m) {
-      const [, y, b] = m;
+      const f = c.match(z);
+      if (f) {
+        const [, b, v] = f;
+        return {
+          fieldKey: b,
+          inputValue: v,
+          line: c,
+          lineStartPos: o - c.length,
+          isCommand: false
+        };
+      }
+      return null;
+    }, [
+      r,
+      n
+    ]), m = y(() => {
+      if (!n.current) return {
+        top: 0,
+        left: 0
+      };
+      const o = n.current, t = o.selectionStart, f = r.substring(0, t).split(`
+`).length - 1, b = parseFloat(getComputedStyle(o).lineHeight) || 24;
       return {
-        fieldKey: y,
-        inputValue: b,
-        line: d,
-        lineStartPos: i - d.length,
-        isCommand: !1
+        top: (parseFloat(getComputedStyle(o).paddingTop) || 16) + (f + 1) * b - o.scrollTop,
+        left: 60
       };
-    }
-    return null;
-  }, [e, n]), l = I(() => {
-    if (!n.current)
-      return { top: 0, left: 0 };
-    const i = n.current, a = i.selectionStart, m = e.substring(0, a).split(`
-`).length - 1, y = parseFloat(getComputedStyle(i).lineHeight) || 24;
-    return { top: (parseFloat(getComputedStyle(i).paddingTop) || 16) + (m + 1) * y - i.scrollTop, left: 60 };
-  }, [e, n]);
-  P(() => {
-    const i = o();
-    if (!i) {
-      s((d) => ({ ...d, isOpen: !1 }));
-      return;
-    }
-    let a = [];
-    if (i.isCommand ? a = Ce(i.inputValue) : i.fieldKey && (a = Ie(i.fieldKey).filter(
-      (m) => m.value.toLowerCase().startsWith(i.inputValue.toLowerCase())
-    )), a.length > 0) {
-      const d = l();
-      s({
-        isOpen: !0,
-        suggestions: a,
-        selectedIndex: 0,
-        position: d,
-        fieldKey: i.fieldKey,
-        inputValue: i.inputValue,
-        isCommand: i.isCommand
-      });
-    } else
-      s((d) => ({ ...d, isOpen: !1 }));
-  }, [e, o, l]);
-  const c = I(
-    (i) => {
-      if (!n.current)
+    }, [
+      r,
+      n
+    ]);
+    k(() => {
+      const o = d();
+      if (!o) {
+        l((c) => ({
+          ...c,
+          isOpen: false
+        }));
         return;
-      const a = n.current.selectionStart, d = e.substring(0, a).split(`
-`), m = d[d.length - 1];
-      let y, b;
-      if (r.isCommand && i.template) {
-        const v = e.substring(0, a - m.length), B = e.substring(a);
-        y = v + i.template + B, b = v.length + i.template.length;
-      } else if (r.fieldKey) {
-        const v = r.fieldKey + i.value, B = e.substring(0, a - m.length), T = e.substring(a);
-        y = B + v + T, b = B.length + v.length;
-      } else
-        return;
-      t(y), setTimeout(() => {
-        n.current && (n.current.selectionStart = b, n.current.selectionEnd = b, n.current.focus());
-      }, 0), s((v) => ({ ...v, isOpen: !1 }));
-    },
-    [n, r.fieldKey, r.isCommand, e, t]
-  ), u = I(
-    (i) => {
-      if (r.isOpen)
-        switch (i.key) {
-          case "ArrowDown":
-            i.preventDefault(), s((a) => ({
-              ...a,
-              selectedIndex: Math.min(a.selectedIndex + 1, a.suggestions.length - 1)
-            }));
-            break;
-          case "ArrowUp":
-            i.preventDefault(), s((a) => ({
-              ...a,
-              selectedIndex: Math.max(a.selectedIndex - 1, 0)
-            }));
-            break;
-          case "Enter":
-            r.suggestions.length > 0 && (i.preventDefault(), c(r.suggestions[r.selectedIndex]));
-            break;
-          case "Escape":
-            i.preventDefault(), s((a) => ({ ...a, isOpen: !1 }));
-            break;
-        }
-    },
-    [r.isOpen, r.suggestions, r.selectedIndex, c]
-  ), f = I((i) => {
-    s((a) => ({ ...a, selectedIndex: i }));
-  }, []);
-  return {
-    isOpen: r.isOpen,
-    suggestions: r.suggestions,
-    selectedIndex: r.selectedIndex,
-    position: r.position,
-    handleKeyDown: u,
-    selectSuggestion: c,
-    handleMouseEnter: f
+      }
+      let t = [];
+      if (o.isCommand ? t = Y(o.inputValue) : o.fieldKey && (t = j(o.fieldKey).filter((f) => f.value.toLowerCase().startsWith(o.inputValue.toLowerCase()))), t.length > 0) {
+        const c = m();
+        l({
+          isOpen: true,
+          suggestions: t,
+          selectedIndex: 0,
+          position: c,
+          fieldKey: o.fieldKey,
+          inputValue: o.inputValue,
+          isCommand: o.isCommand
+        });
+      } else l((c) => ({
+        ...c,
+        isOpen: false
+      }));
+    }, [
+      r,
+      d,
+      m
+    ]);
+    const g = y((o) => {
+      if (!n.current) return;
+      const t = n.current.selectionStart, c = r.substring(0, t).split(`
+`), f = c[c.length - 1];
+      let b, v;
+      if (e.isCommand && o.template) {
+        const h = r.substring(0, t - f.length), T = r.substring(t);
+        b = h + o.template + T, v = h.length + o.template.length;
+      } else if (e.fieldKey) {
+        const h = e.fieldKey + o.value, T = r.substring(0, t - f.length), w = r.substring(t);
+        b = T + h + w, v = T.length + h.length;
+      } else return;
+      i(b), setTimeout(() => {
+        n.current && (n.current.selectionStart = v, n.current.selectionEnd = v, n.current.focus());
+      }, 0), l((h) => ({
+        ...h,
+        isOpen: false
+      }));
+    }, [
+      n,
+      e.fieldKey,
+      e.isCommand,
+      r,
+      i
+    ]), C = y((o) => {
+      if (e.isOpen) switch (o.key) {
+        case "ArrowDown":
+          o.preventDefault(), l((t) => ({
+            ...t,
+            selectedIndex: Math.min(t.selectedIndex + 1, t.suggestions.length - 1)
+          }));
+          break;
+        case "ArrowUp":
+          o.preventDefault(), l((t) => ({
+            ...t,
+            selectedIndex: Math.max(t.selectedIndex - 1, 0)
+          }));
+          break;
+        case "Enter":
+          e.suggestions.length > 0 && (o.preventDefault(), g(e.suggestions[e.selectedIndex]));
+          break;
+        case "Escape":
+          o.preventDefault(), l((t) => ({
+            ...t,
+            isOpen: false
+          }));
+          break;
+      }
+    }, [
+      e.isOpen,
+      e.suggestions,
+      e.selectedIndex,
+      g
+    ]), A = y((o) => {
+      l((t) => ({
+        ...t,
+        selectedIndex: o
+      }));
+    }, []);
+    return {
+      isOpen: e.isOpen,
+      suggestions: e.suggestions,
+      selectedIndex: e.selectedIndex,
+      position: e.position,
+      handleKeyDown: C,
+      selectSuggestion: g,
+      handleMouseEnter: A
+    };
   };
-}, Se = ({
-  suggestions: e,
-  selectedIndex: n,
-  position: t,
-  onSelect: r,
-  onMouseEnter: s
-}) => {
-  const o = w(null);
-  return P(() => {
-    o.current?.scrollIntoView({
-      block: "nearest",
-      behavior: "smooth"
-    });
-  }, [n]), e.length === 0 ? null : /* @__PURE__ */ h(
-    "div",
-    {
+  X = ({ suggestions: r, selectedIndex: n, position: i, onSelect: e, onMouseEnter: l }) => {
+    const d = N(null);
+    return k(() => {
+      var _a;
+      (_a = d.current) == null ? void 0 : _a.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }, [
+      n
+    ]), r.length === 0 ? null : a("div", {
       className: "absolute z-50 bg-slate-800 rounded-md shadow-xl overflow-hidden",
       style: {
-        top: `${t.top}px`,
-        left: `${t.left}px`,
+        top: `${i.top}px`,
+        left: `${i.left}px`,
         minWidth: "200px",
         maxWidth: "400px",
         maxHeight: "300px",
         overflowY: "auto"
       },
-      children: e.map((l, c) => /* @__PURE__ */ x(
-        "div",
-        {
-          ref: c === n ? o : null,
-          className: `px-3 py-2 cursor-pointer ${c === n ? "bg-blue-600 text-white" : "text-slate-200 hover:bg-slate-700"}`,
-          onClick: () => r(l),
-          onMouseEnter: () => s(c),
-          children: [
-            /* @__PURE__ */ h("div", { className: "font-mono text-sm", children: l.value }),
-            l.description && /* @__PURE__ */ h("div", { className: "text-xs opacity-75 mt-1", children: l.description })
-          ]
-        },
-        `${l.value}-${c}`
-      ))
-    }
-  );
-}, ke = (e) => {
-  const n = e.trim();
-  if (n === "C")
-    return { beatsPerMeasure: 4, beatUnit: 4 };
-  if (n === "C|")
-    return { beatsPerMeasure: 2, beatUnit: 2 };
-  const t = n.match(/^(\d+)\/(\d+)$/);
-  return t ? {
-    beatsPerMeasure: parseInt(t[1], 10),
-    beatUnit: parseInt(t[2], 10)
-  } : { beatsPerMeasure: 4, beatUnit: 4 };
-}, Le = (e) => {
-  const t = e.trim().match(/^(\d+)\/(\d+)$/);
-  return t ? parseInt(t[1], 10) / parseInt(t[2], 10) : 1 / 8;
-}, Ee = (e) => {
-  const n = e.split(`
-`);
-  let t = { beatsPerMeasure: 4, beatUnit: 4 }, r = 1 / 8;
-  for (const s of n) {
-    const o = s.match(S);
-    if (o) {
-      const [, l, c] = o;
-      l === "M:" ? t = ke(c) : l === "L:" && (r = Le(c));
-    }
-  }
-  return { meter: t, unitNoteLength: r };
-}, _ = (e) => {
-  if (!e)
-    return 1;
-  if (/^\/+$/.test(e))
-    return 1 / Math.pow(2, e.length);
-  if (e.startsWith("/"))
-    return 1 / parseInt(e.substring(1), 10);
-  if (e.includes("/")) {
-    const [n, t] = e.split("/");
-    return parseInt(n, 10) / parseInt(t, 10);
-  }
-  return parseInt(e, 10);
-}, Me = (e, n) => {
-  if (e[n] !== "(") return null;
-  let t = n + 1;
-  if (t >= e.length || !/\d/.test(e[t])) return null;
-  let r = "";
-  for (; t < e.length && /\d/.test(e[t]); )
-    r += e[t], t++;
-  const s = parseInt(r, 10);
-  let o;
-  s === 2 || s === 4 || s === 8 ? o = 3 : o = 2;
-  let l = s;
-  if (t < e.length && e[t] === ":") {
-    t++;
-    let c = "";
-    for (; t < e.length && /\d/.test(e[t]); )
-      c += e[t], t++;
-    if (c && (o = parseInt(c, 10)), t < e.length && e[t] === ":") {
-      t++;
-      let u = "";
-      for (; t < e.length && /\d/.test(e[t]); )
-        u += e[t], t++;
-      u && (l = parseInt(u, 10));
-    }
-  }
-  return {
-    info: { p: s, q: o, remaining: l },
-    nextIndex: t
+      children: r.map((m, g) => p("div", {
+        ref: g === n ? d : null,
+        className: `px-3 py-2 cursor-pointer ${g === n ? "bg-blue-600 text-white" : "text-slate-200 hover:bg-slate-700"}`,
+        onClick: () => e(m),
+        onMouseEnter: () => l(g),
+        children: [
+          a("div", {
+            className: "font-mono text-sm",
+            children: m.value
+          }),
+          m.description && a("div", {
+            className: "text-xs opacity-75 mt-1",
+            children: m.description
+          })
+        ]
+      }, `${m.value}-${g}`))
+    });
   };
-}, $e = (e, n) => {
-  let t = 0, r = 0, s = null;
-  for (; r < e.length; ) {
-    const o = e[r];
-    if (o === "\\") {
-      r++;
-      continue;
-    }
-    if (o === "(") {
-      const l = Me(e, r);
-      if (l) {
-        s = l.info, r = l.nextIndex;
-        continue;
-      }
-      r++;
-      continue;
+  L = (r, n) => {
+    let i = 0, e = 0, l = 0;
+    for (const d of r) {
+      if (l >= n) break;
+      d === `
+` ? (i++, e = 0) : e++, l++;
     }
-    if (E.test(o) || D.test(o)) {
-      let l = r + 1;
-      for (; l < e.length && (e[l] === "'" || e[l] === ","); )
-        l++;
-      let c = "";
-      if (l < e.length && (e[l] === "/" || /\d/.test(e[l]))) {
-        const d = l;
-        for (; l < e.length && e[l] === "/"; )
-          l++;
-        for (; l < e.length && /\d/.test(e[l]); )
-          l++;
-        if (l < e.length && e[l] === "/")
-          for (l++; l < e.length && /\d/.test(e[l]); )
-            l++;
-        c = e.substring(d, l);
-      }
-      const u = _(c);
-      let f = n.unitNoteLength * u;
-      s && (f = f * s.q / s.p, s.remaining--, s.remaining <= 0 && (s = null));
-      const i = 1 / n.meter.beatUnit, a = f / i;
-      t += a, r = l;
-    } else if (o === "[") {
-      let l = r + 1;
-      for (; l < e.length && e[l] !== "]"; ) {
-        const c = e[l];
-        if (E.test(c)) {
-          let u = l + 1;
-          for (; u < e.length && (e[u] === "'" || e[u] === ","); )
-            u++;
-          l = u;
-        } else
-          l++;
-      }
-      if (l < e.length && e[l] === "]") {
-        l++;
-        let c = "";
-        if (l < e.length && (e[l] === "/" || /\d/.test(e[l]))) {
-          const d = l;
-          for (; l < e.length && e[l] === "/"; )
-            l++;
-          for (; l < e.length && /\d/.test(e[l]); )
-            l++;
-          if (l < e.length && e[l] === "/")
-            for (l++; l < e.length && /\d/.test(e[l]); )
-              l++;
-          c = e.substring(d, l);
-        }
-        const u = _(c);
-        let f = n.unitNoteLength * u;
-        s && (f = f * s.q / s.p, s.remaining--, s.remaining <= 0 && (s = null));
-        const i = 1 / n.meter.beatUnit, a = f / i;
-        t += a;
+    return {
+      line: i,
+      col: e
+    };
+  };
+  Z = (r) => {
+    const n = [];
+    try {
+      const i = F(r);
+      if (i && i.diagnostics) for (const e of i.diagnostics) {
+        const l = L(r, e.range.start);
+        n.push({
+          line: l.line,
+          column: l.col,
+          startCol: e.range.start,
+          endCol: e.range.end,
+          severity: e.severity.toLowerCase(),
+          code: e.code,
+          message: e.message
+        });
       }
-      r = l;
-    } else
-      r++;
-  }
-  return t;
-}, _e = (e) => {
-  const n = [], t = e.split(`
-`), r = Ee(e);
-  return t.forEach((s, o) => {
-    if (!(s.trim().startsWith("%") || S.test(s)) && s.includes("|")) {
-      let l = 0;
-      const c = s.split("|");
-      let u = 0;
-      c.forEach((f, i) => {
-        if (i === c.length - 1 && f.trim() === "")
-          return;
-        const a = f.trim();
-        if (a.startsWith(":") || a.startsWith("[") || a === "") {
-          l += f.length + 1;
-          return;
-        }
-        const d = $e(a, r), m = r.meter.beatsPerMeasure;
-        if (Math.abs(d - m) > 0.01) {
-          const b = s.indexOf(a, l), v = b + a.length;
+      if (i && i.tune) {
+        const e = K(i.tune);
+        if (e && e.diagnostics) for (const l of e.diagnostics) {
+          const d = L(r, l.range.start);
           n.push({
-            line: o,
-            measureIndex: u,
-            startCol: b,
-            endCol: v,
-            expected: m,
-            actual: d,
-            message: `Expected ${m} beats, got ${d.toFixed(2)}`
+            line: d.line,
+            column: d.col,
+            startCol: l.range.start,
+            endCol: l.range.end,
+            severity: l.severity.toLowerCase(),
+            code: l.code,
+            message: l.message
           });
         }
-        u++, l += f.length + 1;
-      });
-    }
-  }), n;
-}, C = {
-  margin: 0,
-  padding: "16px",
-  border: "none",
-  outline: "none",
-  fontSize: "14px",
-  fontFamily: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-  fontWeight: 400,
-  fontStyle: "normal",
-  fontVariant: "normal",
-  fontStretch: "normal",
-  lineHeight: "24px",
-  letterSpacing: "normal",
-  wordSpacing: "normal",
-  textAlign: "left",
-  textIndent: 0,
-  textTransform: "none",
-  whiteSpace: "pre-wrap",
-  wordBreak: "break-all",
-  wordWrap: "break-word",
-  overflowWrap: "break-word",
-  tabSize: 4,
-  boxSizing: "border-box",
-  WebkitFontSmoothing: "antialiased",
-  MozOsxFontSmoothing: "grayscale"
-}, Oe = ({ value: e, onChange: n, theme: t = "light" }) => {
-  const r = w(null), s = w(null), o = w(null), [l, c] = R(null), u = G(e), f = $(e), i = V(() => _e(e), [e]), a = t === "dark" ? {
-    editorBg: "#262626",
-    lineNumBg: "#0f0f0f",
-    lineNumBorder: "#2d2d2d",
-    caretColor: "#fff",
-    errorBg: "#1a1a1a",
-    errorBorder: "#2d2d2d",
-    errorHeader: "#ffffff",
-    errorBadgeBg: "#dc2626",
-    errorBadgeText: "#ffffff",
-    errorIcon: "#f59e0b",
-    errorLocation: "#22d3ee",
-    errorMessage: "#e5e7eb",
-    errorHighlight: "rgba(245, 158, 11, 0.2)",
-    errorHoverBg: "rgba(51, 65, 85, 0.4)",
-    errorItemBorder: "rgba(255, 255, 255, 0.05)"
-  } : {
-    editorBg: "#ffffff",
-    lineNumBg: "#ffffff",
-    lineNumBorder: "#e5e7eb",
-    caretColor: "#000",
-    errorBg: "#ffffff",
-    errorBorder: "#e5e7eb",
-    errorHeader: "#1f2937",
-    errorBadgeBg: "#dc2626",
-    errorBadgeText: "#ffffff",
-    errorIcon: "#dc2626",
-    errorLocation: "#0891b2",
-    errorMessage: "#1f2937",
-    errorHighlight: "#fde047",
-    errorHoverBg: "rgba(254, 202, 202, 0.4)",
-    errorItemBorder: "rgba(220, 38, 38, 0.1)"
-  }, {
-    isOpen: d,
-    suggestions: m,
-    selectedIndex: y,
-    position: b,
-    handleKeyDown: v,
-    selectSuggestion: B,
-    handleMouseEnter: T
-  } = we({ value: e, textareaRef: r, onChange: n }), H = () => {
-    r.current && s.current && o.current && (s.current.scrollTop = r.current.scrollTop, o.current.scrollTop = r.current.scrollTop);
-  }, U = (g) => {
-    if (r.current) {
-      const A = e.split(`
-`), N = A.slice(0, g.line).join(`
-`).length + (g.line > 0 ? 1 : 0);
-      r.current.focus(), r.current.setSelectionRange(N, N), r.current.scrollTop = r.current.scrollHeight * (g.line / A.length);
+      }
+    } catch (i) {
+      console.warn("validateAbc error:", i);
     }
+    return n.sort((i, e) => i.startCol - e.startCol), n;
   };
-  return /* @__PURE__ */ x("div", { className: "w-full h-full flex flex-col rounded-lg overflow-hidden shadow-lg", "data-theme": t, style: { backgroundColor: a.editorBg }, children: [
-    /* @__PURE__ */ x("div", { className: "flex-1 flex overflow-hidden", children: [
-      /* @__PURE__ */ h(
-        "div",
-        {
-          ref: s,
-          className: "overflow-hidden select-none",
-          style: {
-            ...C,
-            backgroundColor: a.lineNumBg,
-            minWidth: "3rem",
-            padding: "16px 8px 16px 8px",
-            color: "#6b7280",
-            borderRightColor: a.lineNumBorder,
-            borderRightStyle: "solid",
-            borderRightWidth: "1px"
-          },
-          children: u.split(`
-`).map((g, A) => /* @__PURE__ */ h("div", { style: { textAlign: "center" }, children: g }, A))
-        }
-      ),
-      /* @__PURE__ */ x("div", { className: "flex-1 relative", children: [
-        /* @__PURE__ */ h(
-          "div",
-          {
-            ref: o,
-            className: "absolute inset-0 overflow-hidden pointer-events-none",
-            style: {
-              ...C,
-              backgroundColor: a.editorBg,
-              opacity: l ? 0.3 : 1,
-              transition: "opacity 0.2s"
-            },
-            dangerouslySetInnerHTML: { __html: f }
-          }
-        ),
-        l && (() => {
-          const g = e.split(`
-`), N = (g[l.line] || "").substring(l.startCol, l.endCol), F = $(N);
-          return /* @__PURE__ */ h(
-            "div",
-            {
-              className: "absolute inset-0 overflow-hidden pointer-events-none",
+  S = {
+    margin: 0,
+    padding: "16px",
+    border: "none",
+    outline: "none",
+    fontSize: "14px",
+    fontFamily: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    fontWeight: 400,
+    fontStyle: "normal",
+    fontVariant: "normal",
+    fontStretch: "normal",
+    lineHeight: "24px",
+    letterSpacing: "normal",
+    wordSpacing: "normal",
+    textAlign: "left",
+    textIndent: 0,
+    textTransform: "none",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-all",
+    wordWrap: "break-word",
+    overflowWrap: "break-word",
+    tabSize: 4,
+    boxSizing: "border-box",
+    WebkitFontSmoothing: "antialiased",
+    MozOsxFontSmoothing: "grayscale"
+  };
+  ye = ({ value: r, onChange: n, theme: i = "light" }) => {
+    const e = N(null), l = N(null), d = N(null), m = $(r), g = V(r), C = O(() => Z(r), [
+      r
+    ]), [A, o] = _(null), t = i === "dark" ? {
+      editorBg: "#262626",
+      lineNumBg: "#0f0f0f",
+      lineNumBorder: "#2d2d2d",
+      caretColor: "#fff",
+      errorBg: "#1a1a1a",
+      errorBorder: "#2d2d2d",
+      errorHeader: "#ffffff",
+      errorBadgeBg: "#dc2626",
+      errorBadgeText: "#ffffff",
+      errorIcon: "#f59e0b",
+      errorLocation: "#22d3ee",
+      errorMessage: "#e5e7eb",
+      warningIcon: "#fbbf24",
+      infoIcon: "#60a5fa"
+    } : {
+      editorBg: "#ffffff",
+      lineNumBg: "#ffffff",
+      lineNumBorder: "#e5e7eb",
+      caretColor: "#000",
+      errorBg: "#ffffff",
+      errorBorder: "#e5e7eb",
+      errorHeader: "#1f2937",
+      errorBadgeBg: "#dc2626",
+      errorBadgeText: "#ffffff",
+      errorIcon: "#dc2626",
+      errorLocation: "#0891b2",
+      errorMessage: "#1f2937",
+      warningIcon: "#d97706",
+      infoIcon: "#2563eb"
+    }, { isOpen: c, suggestions: f, selectedIndex: b, position: v, handleKeyDown: h, selectSuggestion: T, handleMouseEnter: w } = J({
+      value: r,
+      textareaRef: e,
+      onChange: n
+    }), R = () => {
+      e.current && l.current && d.current && (l.current.scrollTop = e.current.scrollTop, d.current.scrollTop = e.current.scrollTop);
+    }, I = (s) => {
+      if (e.current) {
+        const u = r.split(`
+`), x = u.slice(0, s).join(`
+`).length + (s > 0 ? 1 : 0);
+        e.current.focus(), e.current.setSelectionRange(x, x), e.current.scrollTop = e.current.scrollHeight * (s / u.length);
+      }
+    }, E = y(() => {
+      try {
+        const s = H(r);
+        s !== r && n(s);
+      } catch (s) {
+        console.warn("Format error:", s);
+      }
+    }, [
+      r,
+      n
+    ]);
+    k(() => {
+      const s = (u) => {
+        (u.metaKey || u.ctrlKey) && u.key === "s" && (u.preventDefault(), E());
+      };
+      return window.addEventListener("keydown", s), () => window.removeEventListener("keydown", s);
+    }, [
+      E
+    ]);
+    const P = (s) => {
+      switch (s) {
+        case "error":
+          return t.errorIcon;
+        case "warning":
+          return t.warningIcon;
+        case "info":
+          return t.infoIcon;
+        default:
+          return t.errorIcon;
+      }
+    };
+    return p("div", {
+      className: "w-full h-full flex flex-col rounded-lg overflow-hidden shadow-lg",
+      "data-theme": i,
+      style: {
+        backgroundColor: t.editorBg
+      },
+      children: [
+        p("div", {
+          className: "flex-1 flex overflow-hidden",
+          children: [
+            a("div", {
+              ref: l,
+              className: "overflow-hidden select-none",
               style: {
-                ...C,
-                backgroundColor: "transparent"
+                ...S,
+                backgroundColor: t.lineNumBg,
+                minWidth: "3rem",
+                padding: "16px 8px 16px 8px",
+                color: "#6b7280",
+                borderRightColor: t.lineNumBorder,
+                borderRightStyle: "solid",
+                borderRightWidth: "1px"
               },
-              children: g.map((k, L) => {
-                if (L === l.line) {
-                  const j = k.substring(0, l.startCol), K = k.substring(l.endCol);
-                  return /* @__PURE__ */ x("div", { children: [
-                    /* @__PURE__ */ h("span", { style: { visibility: "hidden" }, children: j }),
-                    /* @__PURE__ */ h(
-                      "span",
-                      {
-                        style: {
-                          backgroundColor: a.errorHighlight,
-                          borderRadius: "2px",
-                          padding: "1px 2px"
-                        },
-                        dangerouslySetInnerHTML: { __html: F }
-                      }
-                    ),
-                    /* @__PURE__ */ h("span", { style: { visibility: "hidden" }, children: K })
-                  ] }, L);
-                }
-                return /* @__PURE__ */ h("div", { style: { visibility: "hidden" }, children: k || "​" }, L);
-              })
-            }
-          );
-        })(),
-        /* @__PURE__ */ h(
-          "textarea",
-          {
-            ref: r,
-            className: "absolute inset-0 w-full h-full resize-none",
-            style: {
-              ...C,
-              backgroundColor: "transparent",
-              color: "transparent",
-              caretColor: a.caretColor,
-              // ブラウザ固有のスタイルをリセット
-              WebkitAppearance: "none",
-              appearance: "none"
-            },
-            value: e,
-            onChange: (g) => n(g.target.value),
-            onScroll: H,
-            onKeyDown: v,
-            spellCheck: !1,
-            autoCapitalize: "off",
-            autoComplete: "off",
-            autoCorrect: "off",
-            placeholder: "Type /header to insert template..."
-          }
-        ),
-        d && /* @__PURE__ */ h(
-          Se,
-          {
-            suggestions: m,
-            selectedIndex: y,
-            position: b,
-            onSelect: B,
-            onMouseEnter: T
-          }
-        )
-      ] })
-    ] }),
-    i.length > 0 && /* @__PURE__ */ x("div", { className: "flex", children: [
-      /* @__PURE__ */ h(
-        "div",
-        {
-          style: {
-            backgroundColor: a.lineNumBg,
-            minWidth: "3rem",
-            borderRightColor: a.lineNumBorder,
-            borderRightStyle: "solid",
-            borderRightWidth: "1px"
-          }
-        }
-      ),
-      /* @__PURE__ */ x(
-        "div",
-        {
-          className: "flex-1 px-4 py-3 text-xs font-mono overflow-auto border-t",
-          style: {
-            backgroundColor: a.errorBg,
-            borderColor: a.errorBorder,
-            maxHeight: "12rem",
-            scrollbarWidth: "thin",
-            scrollbarColor: `${a.errorIcon} transparent`
-          },
-          children: [
-            /* @__PURE__ */ x("div", { className: "flex items-center gap-2 mb-3", children: [
-              /* @__PURE__ */ x("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ x(
-                  "svg",
-                  {
-                    width: "14",
-                    height: "14",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    style: { color: a.errorIcon },
-                    children: [
-                      /* @__PURE__ */ h("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
-                      /* @__PURE__ */ h("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
-                      /* @__PURE__ */ h("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
-                    ]
+              children: m.split(`
+`).map((s, u) => a("div", {
+                style: {
+                  textAlign: "center"
+                },
+                children: s
+              }, u))
+            }),
+            p("div", {
+              className: "flex-1 relative",
+              children: [
+                a("div", {
+                  ref: d,
+                  className: "absolute inset-0 overflow-hidden pointer-events-none",
+                  style: {
+                    ...S,
+                    backgroundColor: t.editorBg
+                  },
+                  dangerouslySetInnerHTML: {
+                    __html: g
                   }
-                ),
-                /* @__PURE__ */ h("span", { className: "text-[11px] font-semibold uppercase tracking-wide", style: { color: a.errorHeader }, children: "Validation Issues" })
-              ] }),
-              /* @__PURE__ */ h(
-                "div",
-                {
-                  className: "px-2 py-0.5 rounded-full text-[10px] font-bold",
+                }),
+                a("textarea", {
+                  ref: e,
+                  className: "absolute inset-0 w-full h-full resize-none",
                   style: {
-                    backgroundColor: a.errorBadgeBg,
-                    color: a.errorBadgeText
+                    ...S,
+                    backgroundColor: "transparent",
+                    color: "transparent",
+                    caretColor: t.caretColor,
+                    WebkitAppearance: "none",
+                    appearance: "none"
                   },
-                  children: i.length
-                }
-              )
-            ] }),
-            /* @__PURE__ */ h("div", { className: "space-y-1", children: i.map((g, A) => /* @__PURE__ */ x(
-              "div",
-              {
-                className: "flex items-start gap-3 px-3 py-2 rounded-md border cursor-pointer",
-                style: {
-                  backgroundColor: l === g ? a.errorHoverBg : "transparent",
-                  borderColor: l === g ? a.errorIcon : a.errorItemBorder,
-                  transition: "all 0.15s ease-in-out",
-                  transform: l === g ? "translateX(2px)" : "translateX(0)"
-                },
-                onMouseEnter: () => c(g),
-                onMouseLeave: () => c(null),
-                onClick: () => U(g),
-                children: [
-                  /* @__PURE__ */ x(
-                    "svg",
-                    {
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      className: "shrink-0 mt-0.5",
-                      style: { color: a.errorIcon },
+                  value: r,
+                  onChange: (s) => n(s.target.value),
+                  onScroll: R,
+                  onKeyDown: h,
+                  spellCheck: false,
+                  autoCapitalize: "off",
+                  autoComplete: "off",
+                  autoCorrect: "off",
+                  placeholder: "Type /header to insert template..."
+                }),
+                c && a(X, {
+                  suggestions: f,
+                  selectedIndex: b,
+                  position: v,
+                  onSelect: T,
+                  onMouseEnter: w
+                })
+              ]
+            })
+          ]
+        }),
+        C.length > 0 && p("div", {
+          className: "flex",
+          children: [
+            a("div", {
+              style: {
+                backgroundColor: t.lineNumBg,
+                minWidth: "3rem",
+                borderRightColor: t.lineNumBorder,
+                borderRightStyle: "solid",
+                borderRightWidth: "1px"
+              }
+            }),
+            p("div", {
+              className: "flex-1 px-4 py-3 text-xs font-mono overflow-auto border-t",
+              style: {
+                backgroundColor: t.errorBg,
+                borderColor: t.errorBorder,
+                maxHeight: "12rem",
+                scrollbarWidth: "thin",
+                scrollbarColor: `${t.errorIcon} transparent`
+              },
+              children: [
+                p("div", {
+                  className: "flex items-center gap-2 mb-3",
+                  children: [
+                    p("div", {
+                      className: "flex items-center gap-2",
                       children: [
-                        /* @__PURE__ */ h("circle", { cx: "12", cy: "12", r: "10" }),
-                        /* @__PURE__ */ h("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-                        /* @__PURE__ */ h("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+                        p("svg", {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          style: {
+                            color: t.errorIcon
+                          },
+                          children: [
+                            a("path", {
+                              d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+                            }),
+                            a("line", {
+                              x1: "12",
+                              y1: "9",
+                              x2: "12",
+                              y2: "13"
+                            }),
+                            a("line", {
+                              x1: "12",
+                              y1: "17",
+                              x2: "12.01",
+                              y2: "17"
+                            })
+                          ]
+                        }),
+                        a("span", {
+                          className: "text-[11px] font-semibold uppercase tracking-wide",
+                          style: {
+                            color: t.errorHeader
+                          },
+                          children: "Diagnostics"
+                        })
                       ]
-                    }
-                  ),
-                  /* @__PURE__ */ x("div", { className: "flex-1 flex flex-col gap-1", children: [
-                    /* @__PURE__ */ h("div", { className: "flex items-baseline gap-2 flex-wrap", children: /* @__PURE__ */ x(
-                      "span",
-                      {
-                        className: "font-semibold text-[11px] px-1.5 py-0.5 rounded",
+                    }),
+                    a("div", {
+                      className: "px-2 py-0.5 rounded-full text-[10px] font-bold",
+                      style: {
+                        backgroundColor: t.errorBadgeBg,
+                        color: t.errorBadgeText
+                      },
+                      children: C.length
+                    })
+                  ]
+                }),
+                a("div", {
+                  className: "space-y-1",
+                  children: C.map((s, u) => p("div", {
+                    className: "flex items-start gap-3 px-3 py-2 rounded-md border cursor-pointer hover:bg-opacity-50",
+                    style: {
+                      borderColor: "transparent",
+                      transition: "all 0.15s ease-in-out"
+                    },
+                    onClick: () => I(s.line),
+                    children: [
+                      p("svg", {
+                        width: "16",
+                        height: "16",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        className: "shrink-0 mt-0.5",
                         style: {
-                          color: a.errorLocation,
-                          backgroundColor: t === "dark" ? "rgba(34, 211, 238, 0.1)" : "rgba(8, 145, 178, 0.1)"
+                          color: P(s.severity)
                         },
                         children: [
-                          "Line ",
-                          g.line + 1,
-                          ", Measure ",
-                          g.measureIndex + 1
+                          a("circle", {
+                            cx: "12",
+                            cy: "12",
+                            r: "10"
+                          }),
+                          a("line", {
+                            x1: "12",
+                            y1: "8",
+                            x2: "12",
+                            y2: "12"
+                          }),
+                          a("line", {
+                            x1: "12",
+                            y1: "16",
+                            x2: "12.01",
+                            y2: "16"
+                          })
                         ]
-                      }
-                    ) }),
-                    /* @__PURE__ */ h("span", { className: "text-[11px] leading-relaxed", style: { color: a.errorMessage }, children: g.message })
-                  ] }),
-                  /* @__PURE__ */ x(
-                    "svg",
-                    {
-                      width: "14",
-                      height: "14",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      className: "shrink-0 mt-1 opacity-50",
-                      style: {
-                        color: a.errorIcon,
-                        opacity: l === g ? 1 : 0.3,
-                        transition: "opacity 0.15s ease-in-out"
-                      },
-                      children: [
-                        /* @__PURE__ */ h("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
-                        /* @__PURE__ */ h("polyline", { points: "12 5 19 12 12 19" })
-                      ]
-                    }
-                  )
-                ]
-              },
-              A
-            )) })
+                      }),
+                      p("div", {
+                        className: "flex-1 flex flex-col gap-1",
+                        children: [
+                          p("div", {
+                            className: "flex items-baseline gap-2 flex-wrap",
+                            children: [
+                              p("span", {
+                                className: "font-semibold text-[11px] px-1.5 py-0.5 rounded",
+                                style: {
+                                  color: t.errorLocation,
+                                  backgroundColor: i === "dark" ? "rgba(34, 211, 238, 0.1)" : "rgba(8, 145, 178, 0.1)"
+                                },
+                                children: [
+                                  "Line ",
+                                  s.line + 1,
+                                  ":",
+                                  s.column + 1
+                                ]
+                              }),
+                              a("span", {
+                                className: "text-[10px] px-1.5 py-0.5 rounded opacity-70",
+                                style: {
+                                  backgroundColor: i === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.05)"
+                                },
+                                children: s.code
+                              })
+                            ]
+                          }),
+                          a("span", {
+                            className: "text-[11px] leading-relaxed",
+                            style: {
+                              color: t.errorMessage
+                            },
+                            children: s.message
+                          })
+                        ]
+                      }),
+                      a("svg", {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        className: "shrink-0 mt-1 cursor-pointer transition-opacity",
+                        style: {
+                          color: A === u ? "#22c55e" : t.errorMessage,
+                          opacity: A === u ? 1 : 0.3
+                        },
+                        onClick: (x) => {
+                          x.stopPropagation(), navigator.clipboard.writeText(s.message), o(u), setTimeout(() => o(null), 2e3);
+                        },
+                        children: A === u ? a("polyline", {
+                          points: "20 6 9 17 4 12"
+                        }) : p(M, {
+                          children: [
+                            a("rect", {
+                              x: "9",
+                              y: "9",
+                              width: "13",
+                              height: "13",
+                              rx: "2",
+                              ry: "2"
+                            }),
+                            a("path", {
+                              d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+                            })
+                          ]
+                        })
+                      })
+                    ]
+                  }, u))
+                })
+              ]
+            })
           ]
-        }
-      )
-    ] })
-  ] });
-};
+        })
+      ]
+    });
+  };
+})();
 export {
-  z as ABC_ACCIDENTAL_PATTERN,
-  W as ABC_ANNOTATION_PATTERN,
-  q as ABC_BAR_PATTERN,
-  le as ABC_BROKEN_RHYTHM_PATTERN,
-  X as ABC_CHORD_BRACKET_PATTERN,
-  ee as ABC_CHORD_SYMBOL_PATTERN,
-  Ne as ABC_COMMANDS,
-  oe as ABC_COMMENT_PATTERN,
-  te as ABC_DECORATION_PATTERN,
-  O as ABC_DURATION_PATTERN,
-  S as ABC_FIELD_PATTERN,
-  ne as ABC_GRACE_NOTE_PATTERN,
-  se as ABC_INLINE_FIELD_PATTERN,
-  E as ABC_NOTE_PATTERN,
-  Q as ABC_OCTAVE_PATTERN,
-  Z as ABC_ORNAMENT_PATTERN,
-  D as ABC_REST_PATTERN,
-  Y as ABC_SLUR_PATTERN,
-  Ae as ABC_SUGGESTIONS,
-  M as ABC_TIE_PATTERN,
-  J as ABC_TUPLET_PATTERN,
-  re as ABC_VOLTA_BRACKET_PATTERN,
-  Oe as AbcEditor,
-  Se as SuggestionList,
-  $ as highlightAbc,
-  we as useAbcAutoComplete,
-  G as useLineNumbers,
-  _e as validateAbc
+  ne as ABC_ACCIDENTAL_PATTERN,
+  ge as ABC_ANNOTATION_PATTERN,
+  ie as ABC_BAR_PATTERN,
+  Ce as ABC_BROKEN_RHYTHM_PATTERN,
+  le as ABC_CHORD_BRACKET_PATTERN,
+  me as ABC_CHORD_SYMBOL_PATTERN,
+  Q as ABC_COMMANDS,
+  Te as ABC_COMMENT_PATTERN,
+  fe as ABC_DECORATION_PATTERN,
+  ce as ABC_DURATION_PATTERN,
+  z as ABC_FIELD_PATTERN,
+  he as ABC_GRACE_NOTE_PATTERN,
+  ve as ABC_INLINE_FIELD_PATTERN,
+  re as ABC_NOTE_PATTERN,
+  oe as ABC_OCTAVE_PATTERN,
+  pe as ABC_ORNAMENT_PATTERN,
+  de as ABC_REST_PATTERN,
+  se as ABC_SLUR_PATTERN,
+  G as ABC_SUGGESTIONS,
+  ue as ABC_TIE_PATTERN,
+  ae as ABC_TUPLET_PATTERN,
+  be as ABC_VOLTA_BRACKET_PATTERN,
+  ye as AbcEditor,
+  X as SuggestionList,
+  __tla,
+  V as highlightAbc,
+  J as useAbcAutoComplete,
+  $ as useLineNumbers,
+  Z as validateAbc
 };