@ovnonvo/abc-editor 0.2.2 → 0.3.0

package/dist/abc-editor.es.js

@@ -1,64 +1,63 @@
-(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-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}}}@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-500:oklch(55.4% .046 257.417);--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;--tracking-wide:.025em;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--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}}.m-0{margin:calc(var(--spacing)*0)}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.block{display:block}.flex{display:flex}.inline{display:inline}.table{display:table}.h-1\\/3{height:33.3333%}.h-2\\/3{height:66.6667%}.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-col-reverse{flex-direction:column-reverse}.items-start{align-items:flex-start}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.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-0{border-style:var(--tw-border-style);border-width:0}.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)}.p-4{padding:calc(var(--spacing)*4)}.px-1{padding-inline:calc(var(--spacing)*1)}.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-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.pr-3{padding-right:calc(var(--spacing)*3)}.pl-1{padding-left:calc(var(--spacing)*1)}.text-right{text-align:right}.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}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-slate-200{color:var(--color-slate-200)}.text-slate-500{color:var(--color-slate-500)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.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)}.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))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\\[foo\\:bar\\]{foo:bar}.last\\:mb-0:last-child{margin-bottom:calc(var(--spacing)*0)}@media(hover:hover){.hover\\:bg-slate-700:hover{background-color:var(--color-slate-700)}}@media(min-width:48rem){.md\\:h-full{height:100%}.md\\:w-1\\/2{width:50%}.md\\:flex-row{flex-direction:row}}}*{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-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}')),document.head.appendChild(a)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { jsx as h, jsxs as T } from "react/jsx-runtime";
-import { useState as k, useCallback as I, useEffect as L, useRef as y, useMemo as K } from "react";
-import j from "abcjs";
+(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-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-500:oklch(55.4% .046 257.417);--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}}.m-0{margin:calc(var(--spacing)*0)}.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-0{border-style:var(--tw-border-style);border-width:0}.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)}.p-4{padding:calc(var(--spacing)*4)}.px-1{padding-inline:calc(var(--spacing)*1)}.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)}.py-4{padding-block:calc(var(--spacing)*4)}.pr-3{padding-right:calc(var(--spacing)*3)}.pl-1{padding-left:calc(var(--spacing)*1)}.text-right{text-align:right}.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)}.text-slate-200{color:var(--color-slate-200)}.text-slate-500{color:var(--color-slate-500)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.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)}.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)}.outline-none{--tw-outline-style:none;outline-style:none}.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-ease{syntax:"*";inherits:false}')),document.head.appendChild(a)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { jsx as u, jsxs as v } from "react/jsx-runtime";
+import { useState as M, useCallback as A, useEffect as P, useRef as C, useMemo as K } from "react";
 const V = (e) => e.split(`
-`).map((n, s) => s + 1).join(`
-`), C = /^([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]:)(.*)$/, E = /[A-Ga-g]/, G = /[\^_=]/, Q = /[',]/, z = /\|[:|\]]?|:?\|/, Y = /[\\[\]]/, J = /[()]/, X = /^\(\d+$/, P = /^\/?\d+(\/\d+)?$/, O = /[zZx]/, $ = /^\.?-$/, Z = /[.~HLMOPSTuv]/, q = /^"[^"]*"$/, R = /^"[\^_<>@][^"]*"$/, ee = /^![^!]+!$/, te = /^\{[^}]+\}$/, ne = /^\[\d+$/, se = /^\[([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]):([^\]]*)\]$/, re = /^[<>]+$/, le = /^%.*$/, d = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"), ae = (e, t) => {
-  const n = e[t];
-  if (n !== "|" && n !== ":")
+`).map((r, n) => n + 1).join(`
+`), w = /^([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]:)(.*)$/, E = /[A-Ga-g]/, G = /[\^_=]/, Q = /[',]/, z = /\|[:|\]]?|:?\|/, X = /[\\[\]]/, Y = /[()]/, J = /^\(\d+$/, R = /^\/?\d+(\/\d+)?$/, O = /[zZx]/, $ = /^\.?-$/, Z = /[.~HLMOPSTuv]/, q = /^"[^"]*"$/, D = /^"[\^_<>@][^"]*"$/, ee = /^![^!]+!$/, te = /^\{[^}]+\}$/, ne = /^\[\d+$/, re = /^\[([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]):([^\]]*)\]$/, se = /^[<>]+$/, le = /^%.*$/, p = (e) => e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"), oe = (e, t) => {
+  const r = e[t];
+  if (r !== "|" && r !== ":")
     return null;
-  let s = n, l = t + 1;
+  let n = r, l = t + 1;
   for (; l < e.length && (e[l] === "|" || e[l] === ":" || e[l] === "]"); )
-    s += e[l], l++;
-  return z.test(s) ? {
-    html: `<span class="${s === "||" ? "abc-bar-double" : "abc-bar"}">${d(s)}</span>`,
+    n += e[l], l++;
+  return z.test(n) ? {
+    html: `<span class="${n === "||" ? "abc-bar-double" : "abc-bar"}">${p(n)}</span>`,
     nextIndex: l
   } : null;
-}, oe = (e, t) => {
-  const n = e[t];
-  return G.test(n) ? {
-    html: `<span class="abc-accidental">${d(n)}</span>`,
+}, ae = (e, t) => {
+  const r = e[t];
+  return G.test(r) ? {
+    html: `<span class="abc-accidental">${p(r)}</span>`,
     nextIndex: t + 1
   } : null;
-}, ce = (e, t, n) => {
-  const s = e[t];
-  if (!J.test(s))
+}, ie = (e, t, r) => {
+  const n = e[t];
+  if (!Y.test(n))
     return null;
-  if (s === "(") {
+  if (n === "(") {
     if (t + 1 < e.length && /\d/.test(e[t + 1])) {
-      let l = s, r = t + 1;
-      for (; r < e.length && /\d/.test(e[r]); )
-        l += e[r], r++;
-      if (X.test(l))
+      let l = n, s = t + 1;
+      for (; s < e.length && /\d/.test(e[s]); )
+        l += e[s], s++;
+      if (J.test(l))
         return {
-          html: `<span class="abc-tuplet">${d(l)}</span>`,
-          nextIndex: r,
+          html: `<span class="abc-tuplet">${p(l)}</span>`,
+          nextIndex: s,
           slurLevelDelta: 0
         };
     }
     return {
-      html: `<span class="abc-slur abc-slur-level-${n % 5}">${d(s)}</span>`,
+      html: `<span class="abc-slur abc-slur-level-${r % 5}">${p(n)}</span>`,
       nextIndex: t + 1,
       slurLevelDelta: 1
     };
-  } else if (s === ")")
+  } else if (n === ")")
     return {
-      html: `<span class="abc-slur abc-slur-level-${Math.max(0, n - 1) % 5}">${d(s)}</span>`,
+      html: `<span class="abc-slur abc-slur-level-${Math.max(0, r - 1) % 5}">${p(n)}</span>`,
       nextIndex: t + 1,
       slurLevelDelta: -1
     };
   return null;
-}, ie = (e, t) => {
-  const n = e[t];
-  if (!E.test(n))
+}, ce = (e, t) => {
+  const r = e[t];
+  if (!E.test(r))
     return null;
-  let s = `<span class="abc-note">${d(n)}</span>`, l = t + 1, r = "";
+  let n = `<span class="abc-note">${p(r)}</span>`, l = t + 1, s = "";
   for (; l < e.length && Q.test(e[l]); )
-    r += e[l], l++;
-  if (r) {
-    const c = r[0] === "'" ? "abc-octave-high" : "abc-octave-low";
-    s += `<span class="${c}">${d(r)}</span>`;
+    s += e[l], l++;
+  if (s) {
+    const i = s[0] === "'" ? "abc-octave-high" : "abc-octave-low";
+    n += `<span class="${i}">${p(s)}</span>`;
   }
   let a = "";
   if (l < e.length && (e[l] === "/" || /\d/.test(e[l]))) {
@@ -67,238 +66,238 @@ const V = (e) => e.split(`
     if (l < e.length && e[l] === "/")
       for (a += e[l], l++; l < e.length && /\d/.test(e[l]); )
         a += e[l], l++;
-    if (a && P.test(a)) {
-      let c = "abc-duration";
-      a.startsWith("/") ? c += " abc-duration-short" : a.includes("/") ? c += " abc-duration-fraction" : c += " abc-duration-long", s += `<span class="${c}">${d(a)}</span>`;
+    if (a && R.test(a)) {
+      let i = "abc-duration";
+      a.startsWith("/") ? i += " abc-duration-short" : a.includes("/") ? i += " abc-duration-fraction" : i += " abc-duration-long", n += `<span class="${i}">${p(a)}</span>`;
     }
   }
   return {
-    html: s,
+    html: n,
     nextIndex: l
   };
 }, ue = (e, t) => {
-  const n = e[t];
-  return Y.test(n) ? {
-    html: `<span class="abc-chord">${d(n)}</span>`,
+  const r = e[t];
+  return X.test(r) ? {
+    html: `<span class="abc-chord">${p(r)}</span>`,
     nextIndex: t + 1
   } : null;
 }, de = (e, t) => {
-  const n = e[t];
-  if (!O.test(n))
+  const r = e[t];
+  if (!O.test(r))
     return null;
-  let l = `<span class="${n === "x" ? "abc-rest-invisible" : "abc-rest"}">${d(n)}</span>`, r = t + 1, a = "";
-  if (r < e.length && (e[r] === "/" || /\d/.test(e[r]))) {
-    for (e[r] === "/" && (a += e[r], r++); r < e.length && /\d/.test(e[r]); )
-      a += e[r], r++;
-    if (r < e.length && e[r] === "/")
-      for (a += e[r], r++; r < e.length && /\d/.test(e[r]); )
-        a += e[r], r++;
-    if (a && P.test(a)) {
-      let c = "abc-duration";
-      a.startsWith("/") ? c += " abc-duration-short" : a.includes("/") ? c += " abc-duration-fraction" : c += " abc-duration-long", l += `<span class="${c}">${d(a)}</span>`;
+  let l = `<span class="${r === "x" ? "abc-rest-invisible" : "abc-rest"}">${p(r)}</span>`, s = t + 1, a = "";
+  if (s < e.length && (e[s] === "/" || /\d/.test(e[s]))) {
+    for (e[s] === "/" && (a += e[s], s++); s < e.length && /\d/.test(e[s]); )
+      a += e[s], s++;
+    if (s < e.length && e[s] === "/")
+      for (a += e[s], s++; s < e.length && /\d/.test(e[s]); )
+        a += e[s], s++;
+    if (a && R.test(a)) {
+      let i = "abc-duration";
+      a.startsWith("/") ? i += " abc-duration-short" : a.includes("/") ? i += " abc-duration-fraction" : i += " abc-duration-long", l += `<span class="${i}">${p(a)}</span>`;
     }
   }
   return {
     html: l,
-    nextIndex: r
+    nextIndex: s
   };
 }, pe = (e, t) => {
-  const n = e[t];
-  return n === "." && t + 1 < e.length && e[t + 1] === "-" && $.test(".-") ? {
-    html: `<span class="abc-tie abc-tie-dotted">${d(".-")}</span>`,
+  const r = e[t];
+  return r === "." && t + 1 < e.length && e[t + 1] === "-" && $.test(".-") ? {
+    html: `<span class="abc-tie abc-tie-dotted">${p(".-")}</span>`,
     nextIndex: t + 2
-  } : n === "-" && $.test(n) ? {
-    html: `<span class="abc-tie">${d(n)}</span>`,
+  } : r === "-" && $.test(r) ? {
+    html: `<span class="abc-tie">${p(r)}</span>`,
     nextIndex: t + 1
   } : null;
 }, he = (e, t) => {
-  const n = e[t];
-  return !Z.test(n) || n === "." && t + 1 < e.length && e[t + 1] === "-" ? null : {
-    html: `<span class="abc-ornament">${d(n)}</span>`,
+  const r = e[t];
+  return !Z.test(r) || r === "." && t + 1 < e.length && e[t + 1] === "-" ? null : {
+    html: `<span class="abc-ornament">${p(r)}</span>`,
     nextIndex: t + 1
   };
 }, fe = (e, t) => {
   if (e[t] !== '"')
     return null;
-  let s = t + 1;
-  for (; s < e.length && e[s] !== '"'; )
-    s++;
-  if (s >= e.length)
+  let n = t + 1;
+  for (; n < e.length && e[n] !== '"'; )
+    n++;
+  if (n >= e.length)
     return null;
-  const l = e.substring(t, s + 1);
-  return R.test(l) ? {
-    html: `<span class="abc-annotation">${d(l)}</span>`,
-    nextIndex: s + 1
+  const l = e.substring(t, n + 1);
+  return D.test(l) ? {
+    html: `<span class="abc-annotation">${p(l)}</span>`,
+    nextIndex: n + 1
   } : null;
-}, me = (e, t) => {
+}, ge = (e, t) => {
   if (e[t] !== '"')
     return null;
-  let s = t + 1;
-  for (; s < e.length && e[s] !== '"'; )
-    s++;
-  if (s >= e.length)
+  let n = t + 1;
+  for (; n < e.length && e[n] !== '"'; )
+    n++;
+  if (n >= e.length)
     return null;
-  const l = e.substring(t, s + 1);
-  return R.test(l) || !q.test(l) ? null : {
-    html: `<span class="abc-chord-symbol">${d(l)}</span>`,
-    nextIndex: s + 1
+  const l = e.substring(t, n + 1);
+  return D.test(l) || !q.test(l) ? null : {
+    html: `<span class="abc-chord-symbol">${p(l)}</span>`,
+    nextIndex: n + 1
   };
-}, ge = (e, t) => {
+}, me = (e, t) => {
   if (e[t] !== "!")
     return null;
-  let s = t + 1;
-  for (; s < e.length && e[s] !== "!"; )
-    s++;
-  if (s >= e.length)
+  let n = t + 1;
+  for (; n < e.length && e[n] !== "!"; )
+    n++;
+  if (n >= e.length)
     return null;
-  const l = e.substring(t, s + 1);
+  const l = e.substring(t, n + 1);
   return ee.test(l) ? {
-    html: `<span class="abc-decoration">${d(l)}</span>`,
-    nextIndex: s + 1
+    html: `<span class="abc-decoration">${p(l)}</span>`,
+    nextIndex: n + 1
   } : null;
 }, be = (e, t) => {
   if (e[t] !== "{")
     return null;
-  let s = t + 1;
-  for (; s < e.length && e[s] !== "}"; )
-    s++;
-  if (s >= e.length)
+  let n = t + 1;
+  for (; n < e.length && e[n] !== "}"; )
+    n++;
+  if (n >= e.length)
     return null;
-  const l = e.substring(t, s + 1);
+  const l = e.substring(t, n + 1);
   return te.test(l) ? {
-    html: `<span class="abc-grace-note">${d(l)}</span>`,
-    nextIndex: s + 1
+    html: `<span class="abc-grace-note">${p(l)}</span>`,
+    nextIndex: n + 1
   } : null;
 }, ve = (e, t) => {
   if (e[t] !== "[")
     return null;
-  let s = t + 1;
-  for (; s < e.length && e[s] !== "]"; )
-    s++;
-  if (s >= e.length)
+  let n = t + 1;
+  for (; n < e.length && e[n] !== "]"; )
+    n++;
+  if (n >= e.length)
     return null;
-  const r = e.substring(t, s + 1).match(se);
-  if (!r)
+  const s = e.substring(t, n + 1).match(re);
+  if (!s)
     return null;
-  const [, a, c] = r;
+  const [, a, i] = s;
   return {
-    html: `<span class="abc-inline-field-bracket">[</span><span class="abc-inline-field-key">${d(a)}:</span><span class="abc-inline-field-value">${d(c)}</span><span class="abc-inline-field-bracket">]</span>`,
-    nextIndex: s + 1
+    html: `<span class="abc-inline-field-bracket">[</span><span class="abc-inline-field-key">${p(a)}:</span><span class="abc-inline-field-value">${p(i)}</span><span class="abc-inline-field-bracket">]</span>`,
+    nextIndex: n + 1
   };
 }, xe = (e, t) => {
   if (e[t] !== "[" || t + 1 >= e.length || !/\d/.test(e[t + 1]))
     return null;
-  let s = t + 1;
-  for (; s < e.length && /\d/.test(e[s]); )
-    s++;
-  const l = e.substring(t, s);
+  let n = t + 1;
+  for (; n < e.length && /\d/.test(e[n]); )
+    n++;
+  const l = e.substring(t, n);
   return ne.test(l) ? {
-    html: `<span class="abc-volta-bracket">${d(l)}</span>`,
-    nextIndex: s
+    html: `<span class="abc-volta-bracket">${p(l)}</span>`,
+    nextIndex: n
   } : null;
-}, Ae = (e, t) => {
-  const n = e[t];
-  if (n !== ">" && n !== "<")
+}, ye = (e, t) => {
+  const r = e[t];
+  if (r !== ">" && r !== "<")
     return null;
-  let s = t + 1;
-  for (; s < e.length && e[s] === n; )
-    s++;
-  const l = e.substring(t, s);
-  return re.test(l) ? {
-    html: `<span class="abc-broken-rhythm">${d(l)}</span>`,
-    nextIndex: s
+  let n = t + 1;
+  for (; n < e.length && e[n] === r; )
+    n++;
+  const l = e.substring(t, n);
+  return se.test(l) ? {
+    html: `<span class="abc-broken-rhythm">${p(l)}</span>`,
+    nextIndex: n
   } : null;
-}, Te = (e) => {
-  let t = "", n = 0, s = 0;
-  for (; n < e.length; ) {
-    const l = ae(e, n);
+}, Be = (e) => {
+  let t = "", r = 0, n = 0;
+  for (; r < e.length; ) {
+    const l = oe(e, r);
     if (l) {
-      t += l.html, n = l.nextIndex;
+      t += l.html, r = l.nextIndex;
       continue;
     }
-    const r = ge(e, n);
-    if (r) {
-      t += r.html, n = r.nextIndex;
+    const s = me(e, r);
+    if (s) {
+      t += s.html, r = s.nextIndex;
       continue;
     }
-    const a = be(e, n);
+    const a = be(e, r);
     if (a) {
-      t += a.html, n = a.nextIndex;
+      t += a.html, r = a.nextIndex;
       continue;
     }
-    const c = oe(e, n);
-    if (c) {
-      t += c.html, n = c.nextIndex;
+    const i = ae(e, r);
+    if (i) {
+      t += i.html, r = i.nextIndex;
       continue;
     }
-    const b = he(e, n);
-    if (b) {
-      t += b.html, n = b.nextIndex;
+    const x = he(e, r);
+    if (x) {
+      t += x.html, r = x.nextIndex;
       continue;
     }
-    const f = fe(e, n);
-    if (f) {
-      t += f.html, n = f.nextIndex;
+    const g = fe(e, r);
+    if (g) {
+      t += g.html, r = g.nextIndex;
       continue;
     }
-    const i = me(e, n);
-    if (i) {
-      t += i.html, n = i.nextIndex;
+    const c = ge(e, r);
+    if (c) {
+      t += c.html, r = c.nextIndex;
       continue;
     }
-    const o = ce(e, n, s);
+    const o = ie(e, r, n);
     if (o) {
-      t += o.html, n = o.nextIndex, o.slurLevelDelta && (s += o.slurLevelDelta);
+      t += o.html, r = o.nextIndex, o.slurLevelDelta && (n += o.slurLevelDelta);
       continue;
     }
-    const u = de(e, n);
-    if (u) {
-      t += u.html, n = u.nextIndex;
+    const d = de(e, r);
+    if (d) {
+      t += d.html, r = d.nextIndex;
       continue;
     }
-    const p = ie(e, n);
-    if (p) {
-      t += p.html, n = p.nextIndex;
+    const h = ce(e, r);
+    if (h) {
+      t += h.html, r = h.nextIndex;
       continue;
     }
-    const v = Ae(e, n);
-    if (v) {
-      t += v.html, n = v.nextIndex;
+    const y = ye(e, r);
+    if (y) {
+      t += y.html, r = y.nextIndex;
       continue;
     }
-    const m = ve(e, n);
+    const m = ve(e, r);
     if (m) {
-      t += m.html, n = m.nextIndex;
+      t += m.html, r = m.nextIndex;
       continue;
     }
-    const g = xe(e, n);
-    if (g) {
-      t += g.html, n = g.nextIndex;
+    const b = xe(e, r);
+    if (b) {
+      t += b.html, r = b.nextIndex;
       continue;
     }
-    const x = ue(e, n);
-    if (x) {
-      t += x.html, n = x.nextIndex;
+    const B = ue(e, r);
+    if (B) {
+      t += B.html, r = B.nextIndex;
       continue;
     }
-    const N = pe(e, n);
+    const N = pe(e, r);
     if (N) {
-      t += N.html, n = N.nextIndex;
+      t += N.html, r = N.nextIndex;
       continue;
     }
-    t += `<span class="abc-text">${d(e[n])}</span>`, n++;
+    t += `<span class="abc-text">${p(e[r])}</span>`, r++;
   }
   return t;
-}, _ = (e) => e.split(`
-`).map((n) => {
-  if (le.test(n))
-    return `<span class="abc-comment">${d(n)}</span>`;
-  const s = n.match(C);
-  if (s) {
-    const [, l, r] = s;
-    return l === "w:" || l === "W:" ? `<span class="abc-lyrics-key">${d(l)}</span><span class="abc-lyrics-value">${d(r)}</span>` : `<span class="abc-meta-key">${d(l)}</span><span class="abc-meta-value">${d(r)}</span>`;
+}, S = (e) => e.split(`
+`).map((r) => {
+  if (le.test(r))
+    return `<span class="abc-comment">${p(r)}</span>`;
+  const n = r.match(w);
+  if (n) {
+    const [, l, s] = n;
+    return l === "w:" || l === "W:" ? `<span class="abc-lyrics-key">${p(l)}</span><span class="abc-lyrics-value">${p(s)}</span>` : `<span class="abc-meta-key">${p(l)}</span><span class="abc-meta-value">${p(s)}</span>`;
   }
-  return Te(n);
+  return Be(r);
 }).join(`
 `), Ne = {
   "X:": [
@@ -446,7 +445,7 @@ const V = (e) => e.split(`
     { value: "Your Name", description: "Transcriber name" },
     { value: "ABC transcription", description: "Transcription note" }
   ]
-}, Ie = (e) => Ne[e] || [], ye = [
+}, Te = (e) => Ne[e] || [], Ae = [
   {
     value: "/header",
     description: "Insert basic ABC header template",
@@ -457,14 +456,14 @@ L:1/4
 K:C
 `
   }
-], Ce = (e) => e.startsWith("/") ? ye.filter(
+], Ie = (e) => e.startsWith("/") ? Ae.filter(
   (t) => t.value.toLowerCase().startsWith(e.toLowerCase())
-) : [], Be = ({
+) : [], Ce = ({
   value: e,
   textareaRef: t,
-  onChange: n
+  onChange: r
 }) => {
-  const [s, l] = k({
+  const [n, l] = M({
     isOpen: !1,
     suggestions: [],
     selectedIndex: 0,
@@ -472,478 +471,594 @@ K:C
     fieldKey: null,
     inputValue: "",
     isCommand: !1
-  }), r = I(() => {
+  }), s = A(() => {
     if (!t.current)
       return null;
-    const i = t.current.selectionStart, o = e.substring(0, i).split(`
-`), u = o[o.length - 1];
-    if (u.startsWith("/"))
+    const c = t.current.selectionStart, o = e.substring(0, c).split(`
+`), d = o[o.length - 1];
+    if (d.startsWith("/"))
       return {
         fieldKey: null,
-        inputValue: u,
-        line: u,
-        lineStartPos: i - u.length,
+        inputValue: d,
+        line: d,
+        lineStartPos: c - d.length,
         isCommand: !0
       };
-    const p = u.match(C);
-    if (p) {
-      const [, v, m] = p;
+    const h = d.match(w);
+    if (h) {
+      const [, y, m] = h;
       return {
-        fieldKey: v,
+        fieldKey: y,
         inputValue: m,
-        line: u,
-        lineStartPos: i - u.length,
+        line: d,
+        lineStartPos: c - d.length,
         isCommand: !1
       };
     }
     return null;
-  }, [e, t]), a = I(() => {
+  }, [e, t]), a = A(() => {
     if (!t.current)
       return { top: 0, left: 0 };
-    const i = t.current, o = i.selectionStart, p = e.substring(0, o).split(`
-`).length - 1, v = parseFloat(getComputedStyle(i).lineHeight) || 24;
-    return { top: (parseFloat(getComputedStyle(i).paddingTop) || 16) + (p + 1) * v - i.scrollTop, left: 60 };
+    const c = t.current, o = c.selectionStart, h = e.substring(0, o).split(`
+`).length - 1, y = parseFloat(getComputedStyle(c).lineHeight) || 24;
+    return { top: (parseFloat(getComputedStyle(c).paddingTop) || 16) + (h + 1) * y - c.scrollTop, left: 60 };
   }, [e, t]);
-  L(() => {
-    const i = r();
-    if (!i) {
-      l((u) => ({ ...u, isOpen: !1 }));
+  P(() => {
+    const c = s();
+    if (!c) {
+      l((d) => ({ ...d, isOpen: !1 }));
       return;
     }
     let o = [];
-    if (i.isCommand ? o = Ce(i.inputValue) : i.fieldKey && (o = Ie(i.fieldKey).filter(
-      (p) => p.value.toLowerCase().startsWith(i.inputValue.toLowerCase())
+    if (c.isCommand ? o = Ie(c.inputValue) : c.fieldKey && (o = Te(c.fieldKey).filter(
+      (h) => h.value.toLowerCase().startsWith(c.inputValue.toLowerCase())
     )), o.length > 0) {
-      const u = a();
+      const d = a();
       l({
         isOpen: !0,
         suggestions: o,
         selectedIndex: 0,
-        position: u,
-        fieldKey: i.fieldKey,
-        inputValue: i.inputValue,
-        isCommand: i.isCommand
+        position: d,
+        fieldKey: c.fieldKey,
+        inputValue: c.inputValue,
+        isCommand: c.isCommand
       });
     } else
-      l((u) => ({ ...u, isOpen: !1 }));
-  }, [e, r, a]);
-  const c = I(
-    (i) => {
+      l((d) => ({ ...d, isOpen: !1 }));
+  }, [e, s, a]);
+  const i = A(
+    (c) => {
       if (!t.current)
         return;
-      const o = t.current.selectionStart, u = e.substring(0, o).split(`
-`), p = u[u.length - 1];
-      let v, m;
-      if (s.isCommand && i.template) {
-        const g = e.substring(0, o - p.length), x = e.substring(o);
-        v = g + i.template + x, m = g.length + i.template.length;
-      } else if (s.fieldKey) {
-        const g = s.fieldKey + i.value, x = e.substring(0, o - p.length), N = e.substring(o);
-        v = x + g + N, m = x.length + g.length;
+      const o = t.current.selectionStart, d = e.substring(0, o).split(`
+`), h = d[d.length - 1];
+      let y, m;
+      if (n.isCommand && c.template) {
+        const b = e.substring(0, o - h.length), B = e.substring(o);
+        y = b + c.template + B, m = b.length + c.template.length;
+      } else if (n.fieldKey) {
+        const b = n.fieldKey + c.value, B = e.substring(0, o - h.length), N = e.substring(o);
+        y = B + b + N, m = B.length + b.length;
       } else
         return;
-      n(v), setTimeout(() => {
+      r(y), setTimeout(() => {
         t.current && (t.current.selectionStart = m, t.current.selectionEnd = m, t.current.focus());
-      }, 0), l((g) => ({ ...g, isOpen: !1 }));
+      }, 0), l((b) => ({ ...b, isOpen: !1 }));
     },
-    [t, s.fieldKey, s.isCommand, e, n]
-  ), b = I(
-    (i) => {
-      if (s.isOpen)
-        switch (i.key) {
+    [t, n.fieldKey, n.isCommand, e, r]
+  ), x = A(
+    (c) => {
+      if (n.isOpen)
+        switch (c.key) {
           case "ArrowDown":
-            i.preventDefault(), l((o) => ({
+            c.preventDefault(), l((o) => ({
               ...o,
               selectedIndex: Math.min(o.selectedIndex + 1, o.suggestions.length - 1)
             }));
             break;
           case "ArrowUp":
-            i.preventDefault(), l((o) => ({
+            c.preventDefault(), l((o) => ({
               ...o,
               selectedIndex: Math.max(o.selectedIndex - 1, 0)
             }));
             break;
           case "Enter":
-            s.suggestions.length > 0 && (i.preventDefault(), c(s.suggestions[s.selectedIndex]));
+            n.suggestions.length > 0 && (c.preventDefault(), i(n.suggestions[n.selectedIndex]));
             break;
           case "Escape":
-            i.preventDefault(), l((o) => ({ ...o, isOpen: !1 }));
+            c.preventDefault(), l((o) => ({ ...o, isOpen: !1 }));
             break;
         }
     },
-    [s.isOpen, s.suggestions, s.selectedIndex, c]
-  ), f = I((i) => {
-    l((o) => ({ ...o, selectedIndex: i }));
+    [n.isOpen, n.suggestions, n.selectedIndex, i]
+  ), g = A((c) => {
+    l((o) => ({ ...o, selectedIndex: c }));
   }, []);
   return {
-    isOpen: s.isOpen,
-    suggestions: s.suggestions,
-    selectedIndex: s.selectedIndex,
-    position: s.position,
-    handleKeyDown: b,
-    selectSuggestion: c,
-    handleMouseEnter: f
+    isOpen: n.isOpen,
+    suggestions: n.suggestions,
+    selectedIndex: n.selectedIndex,
+    position: n.position,
+    handleKeyDown: x,
+    selectSuggestion: i,
+    handleMouseEnter: g
   };
 }, we = ({
   suggestions: e,
   selectedIndex: t,
-  position: n,
-  onSelect: s,
+  position: r,
+  onSelect: n,
   onMouseEnter: l
 }) => {
-  const r = y(null);
-  return L(() => {
-    r.current?.scrollIntoView({
+  const s = C(null);
+  return P(() => {
+    s.current?.scrollIntoView({
       block: "nearest",
       behavior: "smooth"
     });
-  }, [t]), e.length === 0 ? null : /* @__PURE__ */ h(
+  }, [t]), e.length === 0 ? null : /* @__PURE__ */ u(
     "div",
     {
       className: "absolute z-50 bg-slate-800 rounded-md shadow-xl overflow-hidden",
       style: {
-        top: `${n.top}px`,
-        left: `${n.left}px`,
+        top: `${r.top}px`,
+        left: `${r.left}px`,
         minWidth: "200px",
         maxWidth: "400px",
         maxHeight: "300px",
         overflowY: "auto"
       },
-      children: e.map((a, c) => /* @__PURE__ */ T(
+      children: e.map((a, i) => /* @__PURE__ */ v(
         "div",
         {
-          ref: c === t ? r : null,
-          className: `px-3 py-2 cursor-pointer ${c === t ? "bg-blue-600 text-white" : "text-slate-200 hover:bg-slate-700"}`,
-          onClick: () => s(a),
-          onMouseEnter: () => l(c),
+          ref: i === t ? s : null,
+          className: `px-3 py-2 cursor-pointer ${i === t ? "bg-blue-600 text-white" : "text-slate-200 hover:bg-slate-700"}`,
+          onClick: () => n(a),
+          onMouseEnter: () => l(i),
           children: [
-            /* @__PURE__ */ h("div", { className: "font-mono text-sm", children: a.value }),
-            a.description && /* @__PURE__ */ h("div", { className: "text-xs opacity-75 mt-1", children: a.description })
+            /* @__PURE__ */ u("div", { className: "font-mono text-sm", children: a.value }),
+            a.description && /* @__PURE__ */ u("div", { className: "text-xs opacity-75 mt-1", children: a.description })
           ]
         },
-        `${a.value}-${c}`
+        `${a.value}-${i}`
       ))
     }
   );
-}, Ee = (e) => {
+}, ke = (e) => {
   const t = e.trim();
   if (t === "C")
     return { beatsPerMeasure: 4, beatUnit: 4 };
   if (t === "C|")
     return { beatsPerMeasure: 2, beatUnit: 2 };
-  const n = t.match(/^(\d+)\/(\d+)$/);
-  return n ? {
-    beatsPerMeasure: parseInt(n[1], 10),
-    beatUnit: parseInt(n[2], 10)
+  const r = t.match(/^(\d+)\/(\d+)$/);
+  return r ? {
+    beatsPerMeasure: parseInt(r[1], 10),
+    beatUnit: parseInt(r[2], 10)
   } : { beatsPerMeasure: 4, beatUnit: 4 };
 }, Le = (e) => {
-  const n = e.trim().match(/^(\d+)\/(\d+)$/);
-  return n ? parseInt(n[1], 10) / parseInt(n[2], 10) : 1 / 8;
-}, Se = (e) => {
+  const r = e.trim().match(/^(\d+)\/(\d+)$/);
+  return r ? parseInt(r[1], 10) / parseInt(r[2], 10) : 1 / 8;
+}, Ee = (e) => {
   const t = e.split(`
 `);
-  let n = { beatsPerMeasure: 4, beatUnit: 4 }, s = 1 / 8;
+  let r = { beatsPerMeasure: 4, beatUnit: 4 }, n = 1 / 8;
   for (const l of t) {
-    const r = l.match(C);
-    if (r) {
-      const [, a, c] = r;
-      a === "M:" ? n = Ee(c) : a === "L:" && (s = Le(c));
+    const s = l.match(w);
+    if (s) {
+      const [, a, i] = s;
+      a === "M:" ? r = ke(i) : a === "L:" && (n = Le(i));
     }
   }
-  return { meter: n, unitNoteLength: s };
-}, M = (e) => {
+  return { meter: r, unitNoteLength: n };
+}, _ = (e) => {
   if (!e)
     return 1;
   if (e.startsWith("/"))
     return 1 / parseInt(e.substring(1), 10);
   if (e.includes("/")) {
-    const [t, n] = e.split("/");
-    return parseInt(t, 10) / parseInt(n, 10);
+    const [t, r] = e.split("/");
+    return parseInt(t, 10) / parseInt(r, 10);
   }
   return parseInt(e, 10);
 }, $e = (e, t) => {
-  let n = 0, s = 0;
-  for (; s < e.length; ) {
-    const l = e[s];
+  let r = 0, n = 0;
+  for (; n < e.length; ) {
+    const l = e[n];
     if (E.test(l) || O.test(l)) {
-      let r = s + 1;
-      for (; r < e.length && (e[r] === "'" || e[r] === ","); )
-        r++;
+      let s = n + 1;
+      for (; s < e.length && (e[s] === "'" || e[s] === ","); )
+        s++;
       let a = "";
-      if (r < e.length && (e[r] === "/" || /\d/.test(e[r]))) {
-        const o = r;
-        for (e[r] === "/" && r++; r < e.length && /\d/.test(e[r]); )
-          r++;
-        if (r < e.length && e[r] === "/")
-          for (r++; r < e.length && /\d/.test(e[r]); )
-            r++;
-        a = e.substring(o, r);
+      if (s < e.length && (e[s] === "/" || /\d/.test(e[s]))) {
+        const o = s;
+        for (e[s] === "/" && s++; s < e.length && /\d/.test(e[s]); )
+          s++;
+        if (s < e.length && e[s] === "/")
+          for (s++; s < e.length && /\d/.test(e[s]); )
+            s++;
+        a = e.substring(o, s);
       }
-      const c = M(a), b = t.unitNoteLength * c, f = 1 / t.meter.beatUnit, i = b / f;
-      n += i, s = r;
+      const i = _(a), x = t.unitNoteLength * i, g = 1 / t.meter.beatUnit, c = x / g;
+      r += c, n = s;
     } else if (l === "[") {
-      let r = s + 1;
-      for (; r < e.length && e[r] !== "]"; ) {
-        const a = e[r];
+      let s = n + 1;
+      for (; s < e.length && e[s] !== "]"; ) {
+        const a = e[s];
         if (E.test(a)) {
-          let c = r + 1;
-          for (; c < e.length && (e[c] === "'" || e[c] === ","); )
-            c++;
-          r = c;
+          let i = s + 1;
+          for (; i < e.length && (e[i] === "'" || e[i] === ","); )
+            i++;
+          s = i;
         } else
-          r++;
+          s++;
       }
-      if (r < e.length && e[r] === "]") {
-        r++;
+      if (s < e.length && e[s] === "]") {
+        s++;
         let a = "";
-        if (r < e.length && (e[r] === "/" || /\d/.test(e[r]))) {
-          const o = r;
-          for (e[r] === "/" && r++; r < e.length && /\d/.test(e[r]); )
-            r++;
-          if (r < e.length && e[r] === "/")
-            for (r++; r < e.length && /\d/.test(e[r]); )
-              r++;
-          a = e.substring(o, r);
+        if (s < e.length && (e[s] === "/" || /\d/.test(e[s]))) {
+          const o = s;
+          for (e[s] === "/" && s++; s < e.length && /\d/.test(e[s]); )
+            s++;
+          if (s < e.length && e[s] === "/")
+            for (s++; s < e.length && /\d/.test(e[s]); )
+              s++;
+          a = e.substring(o, s);
         }
-        const c = M(a), b = t.unitNoteLength * c, f = 1 / t.meter.beatUnit, i = b / f;
-        n += i;
+        const i = _(a), x = t.unitNoteLength * i, g = 1 / t.meter.beatUnit, c = x / g;
+        r += c;
       }
-      s = r;
+      n = s;
     } else
-      s++;
+      n++;
   }
-  return n;
-}, _e = (e) => {
-  const t = [], n = e.split(`
-`), s = Se(e);
-  return n.forEach((l, r) => {
-    if (!(l.trim().startsWith("%") || C.test(l)) && l.includes("|")) {
+  return r;
+}, Se = (e) => {
+  const t = [], r = e.split(`
+`), n = Ee(e);
+  return r.forEach((l, s) => {
+    if (!(l.trim().startsWith("%") || w.test(l)) && l.includes("|")) {
       let a = 0;
-      const c = l.split("|");
-      let b = 0;
-      c.forEach((f, i) => {
-        if (i === c.length - 1 && f.trim() === "")
+      const i = l.split("|");
+      let x = 0;
+      i.forEach((g, c) => {
+        if (c === i.length - 1 && g.trim() === "")
           return;
-        const o = f.trim();
+        const o = g.trim();
         if (o.startsWith(":") || o.startsWith("[") || o === "") {
-          a += f.length + 1;
+          a += g.length + 1;
           return;
         }
-        const u = $e(o, s), p = s.meter.beatsPerMeasure;
-        if (Math.abs(u - p) > 0.01) {
-          const m = l.indexOf(o, a), g = m + o.length;
+        const d = $e(o, n), h = n.meter.beatsPerMeasure;
+        if (Math.abs(d - h) > 0.01) {
+          const m = l.indexOf(o, a), b = m + o.length;
           t.push({
-            line: r,
-            measureIndex: b,
+            line: s,
+            measureIndex: x,
             startCol: m,
-            endCol: g,
-            expected: p,
-            actual: u,
-            message: `Expected ${p} beats, got ${u.toFixed(2)}`
+            endCol: b,
+            expected: h,
+            actual: d,
+            message: `Expected ${h} beats, got ${d.toFixed(2)}`
           });
         }
-        b++, a += f.length + 1;
+        x++, a += g.length + 1;
       });
     }
   }), t;
-}, Oe = ({ value: e, onChange: t, theme: n = "light" }) => {
-  const s = y(null), l = y(null), r = y(null), [a, c] = k(null), b = V(e), f = _(e), i = K(() => _e(e), [e]), o = n === "dark" ? {
+}, Pe = ({ value: e, onChange: t, theme: r = "light" }) => {
+  const n = C(null), l = C(null), s = C(null), [a, i] = M(null), x = V(e), g = S(e), c = K(() => Se(e), [e]), o = r === "dark" ? {
     bg: "#1a1a1a",
     editorBg: "#262626",
     lineNumBg: "#0f0f0f",
+    lineNumBorder: "#2d2d2d",
     caretColor: "#fff",
-    errorHeader: "#94a3b8",
+    errorBg: "#1a1a1a",
+    errorBorder: "#2d2d2d",
+    errorHeader: "#ffffff",
+    errorBadgeBg: "#dc2626",
+    errorBadgeText: "#ffffff",
     errorIcon: "#f59e0b",
     errorLocation: "#22d3ee",
-    errorMessage: "#fcd34d",
-    errorHighlight: "rgba(245, 158, 11, 0.2)"
+    errorMessage: "#e5e7eb",
+    errorHighlight: "rgba(245, 158, 11, 0.2)",
+    errorHoverBg: "rgba(51, 65, 85, 0.4)",
+    errorItemBorder: "rgba(255, 255, 255, 0.05)"
   } : {
     bg: "#f8f9fa",
     editorBg: "#ffffff",
-    lineNumBg: "#e8e8e8",
+    lineNumBg: "#ffffff",
+    lineNumBorder: "#e5e7eb",
     caretColor: "#000",
-    errorHeader: "#64748b",
-    errorIcon: "#d97706",
+    errorBg: "#ffffff",
+    errorBorder: "#e5e7eb",
+    errorHeader: "#1f2937",
+    errorBadgeBg: "#dc2626",
+    errorBadgeText: "#ffffff",
+    errorIcon: "#dc2626",
     errorLocation: "#0891b2",
-    errorMessage: "#b45309",
-    errorHighlight: "#fde047"
+    errorMessage: "#1f2937",
+    errorHighlight: "#fde047",
+    errorHoverBg: "rgba(254, 202, 202, 0.4)",
+    errorItemBorder: "rgba(220, 38, 38, 0.1)"
   }, {
-    isOpen: u,
-    suggestions: p,
-    selectedIndex: v,
+    isOpen: d,
+    suggestions: h,
+    selectedIndex: y,
     position: m,
-    handleKeyDown: g,
-    selectSuggestion: x,
+    handleKeyDown: b,
+    selectSuggestion: B,
     handleMouseEnter: N
-  } = Be({ value: e, textareaRef: s, onChange: t }), D = () => {
-    s.current && l.current && r.current && (l.current.scrollTop = s.current.scrollTop, r.current.scrollTop = s.current.scrollTop);
+  } = Ce({ value: e, textareaRef: n, onChange: t }), H = () => {
+    n.current && l.current && s.current && (l.current.scrollTop = n.current.scrollTop, s.current.scrollTop = n.current.scrollTop);
+  }, W = (f) => {
+    if (n.current) {
+      const T = e.split(`
+`), I = T.slice(0, f.line).join(`
+`).length + (f.line > 0 ? 1 : 0);
+      n.current.focus(), n.current.setSelectionRange(I, I), n.current.scrollTop = n.current.scrollHeight * (f.line / T.length);
+    }
   };
-  return /* @__PURE__ */ h("div", { className: "w-full h-full flex flex-col p-4", "data-theme": n, style: { backgroundColor: o.bg }, children: /* @__PURE__ */ T("div", { className: "w-full flex-1 flex flex-col rounded-lg overflow-hidden shadow-lg", style: { backgroundColor: o.editorBg }, children: [
-    /* @__PURE__ */ T("div", { className: "flex-1 flex overflow-hidden", children: [
-      /* @__PURE__ */ h(
+  return /* @__PURE__ */ u("div", { className: "w-full h-full flex flex-col p-4", "data-theme": r, style: { backgroundColor: o.bg }, children: /* @__PURE__ */ v("div", { className: "w-full flex-1 flex flex-col rounded-lg overflow-hidden shadow-lg", style: { backgroundColor: o.editorBg }, children: [
+    /* @__PURE__ */ v("div", { className: "flex-1 flex overflow-hidden", children: [
+      /* @__PURE__ */ u(
         "div",
         {
           ref: l,
           className: "overflow-hidden text-right text-sm font-mono leading-relaxed text-slate-500 select-none",
-          style: { backgroundColor: o.lineNumBg, minWidth: "2.5rem" },
-          children: /* @__PURE__ */ h("pre", { className: "m-0 pl-1 pr-3 py-4", children: b })
+          style: {
+            backgroundColor: o.lineNumBg,
+            minWidth: "2.5rem",
+            borderRight: `1px solid ${o.lineNumBorder}`
+          },
+          children: /* @__PURE__ */ u("pre", { className: "m-0 pl-1 pr-3 py-4", children: x })
         }
       ),
-      /* @__PURE__ */ T("div", { className: "flex-1 relative", children: [
-        /* @__PURE__ */ h(
+      /* @__PURE__ */ v("div", { className: "flex-1 relative", children: [
+        /* @__PURE__ */ u(
           "div",
           {
-            ref: r,
+            ref: s,
             className: "absolute inset-0 overflow-hidden px-4 py-4 text-sm font-mono leading-relaxed pointer-events-none",
             style: {
               backgroundColor: o.editorBg,
               opacity: a ? 0.3 : 1,
               transition: "opacity 0.2s"
             },
-            children: /* @__PURE__ */ h(
+            children: /* @__PURE__ */ u(
               "pre",
               {
                 className: "m-0",
-                dangerouslySetInnerHTML: { __html: f }
+                dangerouslySetInnerHTML: { __html: g }
               }
             )
           }
         ),
         a && (() => {
-          const A = e.split(`
-`), U = (A[a.line] || "").substring(a.startCol, a.endCol), H = _(U);
-          return /* @__PURE__ */ h(
+          const f = e.split(`
+`), I = (f[a.line] || "").substring(a.startCol, a.endCol), U = S(I);
+          return /* @__PURE__ */ u(
             "div",
             {
               className: "absolute inset-0 overflow-hidden px-4 py-4 text-sm font-mono leading-relaxed pointer-events-none",
               style: { backgroundColor: "transparent" },
-              children: /* @__PURE__ */ h("pre", { className: "m-0", children: A.map((B, w) => {
-                if (w === a.line) {
-                  const W = B.substring(0, a.startCol), F = B.substring(a.endCol);
-                  return /* @__PURE__ */ T("div", { children: [
-                    /* @__PURE__ */ h("span", { style: { opacity: 0 }, children: W }),
-                    /* @__PURE__ */ h(
+              children: /* @__PURE__ */ u("pre", { className: "m-0", children: f.map((k, L) => {
+                if (L === a.line) {
+                  const j = k.substring(0, a.startCol), F = k.substring(a.endCol);
+                  return /* @__PURE__ */ v("div", { children: [
+                    /* @__PURE__ */ u("span", { style: { opacity: 0 }, children: j }),
+                    /* @__PURE__ */ u(
                       "span",
                       {
                         className: "px-1 rounded",
                         style: { backgroundColor: o.errorHighlight },
-                        dangerouslySetInnerHTML: { __html: H }
+                        dangerouslySetInnerHTML: { __html: U }
                       }
                     ),
-                    /* @__PURE__ */ h("span", { style: { opacity: 0 }, children: F })
-                  ] }, w);
+                    /* @__PURE__ */ u("span", { style: { opacity: 0 }, children: F })
+                  ] }, L);
                 }
-                return /* @__PURE__ */ h("div", { style: { opacity: 0 }, children: B }, w);
+                return /* @__PURE__ */ u("div", { style: { opacity: 0 }, children: k }, L);
               }) })
             }
           );
         })(),
-        /* @__PURE__ */ h(
+        /* @__PURE__ */ u(
           "textarea",
           {
-            ref: s,
+            ref: n,
             className: "absolute inset-0 w-full h-full resize-none px-4 py-4 text-sm font-mono leading-relaxed outline-none border-0",
             style: { backgroundColor: "transparent", color: "transparent", caretColor: o.caretColor },
             value: e,
-            onChange: (A) => t(A.target.value),
-            onScroll: D,
-            onKeyDown: g,
+            onChange: (f) => t(f.target.value),
+            onScroll: H,
+            onKeyDown: b,
             spellCheck: !1,
             placeholder: "Type /header to insert template..."
           }
         ),
-        u && /* @__PURE__ */ h(
+        d && /* @__PURE__ */ u(
           we,
           {
-            suggestions: p,
-            selectedIndex: v,
+            suggestions: h,
+            selectedIndex: y,
             position: m,
-            onSelect: x,
+            onSelect: B,
             onMouseEnter: N
           }
         )
       ] })
     ] }),
-    i.length > 0 && /* @__PURE__ */ T(
-      "div",
-      {
-        className: "px-4 py-3 text-xs font-mono overflow-auto",
-        style: { backgroundColor: o.lineNumBg, maxHeight: "8rem" },
-        children: [
-          /* @__PURE__ */ T("div", { className: "mb-2 text-[10px] uppercase tracking-wide", style: { color: o.errorHeader }, children: [
-            "Validation Errors (",
-            i.length,
-            ")"
-          ] }),
-          i.map((A, S) => /* @__PURE__ */ T(
-            "div",
-            {
-              className: "flex items-start gap-3 mb-2 last:mb-0 px-2 py-1 rounded transition-colors cursor-pointer",
-              style: {
-                backgroundColor: a === A ? n === "dark" ? "rgba(51, 65, 85, 0.3)" : "rgba(226, 232, 240, 0.6)" : "transparent"
-              },
-              onMouseEnter: () => c(A),
-              onMouseLeave: () => c(null),
-              children: [
-                /* @__PURE__ */ h("span", { className: "shrink-0 mt-0.5", style: { color: o.errorIcon }, children: "⚠️" }),
-                /* @__PURE__ */ T("div", { className: "flex-1 flex gap-2", children: [
-                  /* @__PURE__ */ T("span", { className: "shrink-0", style: { color: o.errorLocation }, children: [
-                    "Ln ",
-                    A.line + 1,
-                    ", M",
-                    A.measureIndex + 1,
-                    ":"
+    c.length > 0 && /* @__PURE__ */ v("div", { className: "flex", children: [
+      /* @__PURE__ */ u(
+        "div",
+        {
+          style: {
+            backgroundColor: o.lineNumBg,
+            minWidth: "2.5rem",
+            borderRight: `1px solid ${o.lineNumBorder}`
+          }
+        }
+      ),
+      /* @__PURE__ */ v(
+        "div",
+        {
+          className: "flex-1 px-4 py-3 text-xs font-mono overflow-auto border-t",
+          style: {
+            backgroundColor: o.errorBg,
+            borderColor: o.errorBorder,
+            maxHeight: "12rem",
+            scrollbarWidth: "thin",
+            scrollbarColor: `${o.errorIcon} transparent`
+          },
+          children: [
+            /* @__PURE__ */ v("div", { className: "flex items-center gap-2 mb-3", children: [
+              /* @__PURE__ */ v("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ v(
+                  "svg",
+                  {
+                    width: "14",
+                    height: "14",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    style: { color: o.errorIcon },
+                    children: [
+                      /* @__PURE__ */ u("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__ */ u("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+                      /* @__PURE__ */ u("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ u("span", { className: "text-[11px] font-semibold uppercase tracking-wide", style: { color: o.errorHeader }, children: "Validation Issues" })
+              ] }),
+              /* @__PURE__ */ u(
+                "div",
+                {
+                  className: "px-2 py-0.5 rounded-full text-[10px] font-bold",
+                  style: {
+                    backgroundColor: o.errorBadgeBg,
+                    color: o.errorBadgeText
+                  },
+                  children: c.length
+                }
+              )
+            ] }),
+            /* @__PURE__ */ u("div", { className: "space-y-1", children: c.map((f, T) => /* @__PURE__ */ v(
+              "div",
+              {
+                className: "flex items-start gap-3 px-3 py-2 rounded-md border cursor-pointer",
+                style: {
+                  backgroundColor: a === f ? o.errorHoverBg : "transparent",
+                  borderColor: a === f ? o.errorIcon : o.errorItemBorder,
+                  transition: "all 0.15s ease-in-out",
+                  transform: a === f ? "translateX(2px)" : "translateX(0)"
+                },
+                onMouseEnter: () => i(f),
+                onMouseLeave: () => i(null),
+                onClick: () => W(f),
+                children: [
+                  /* @__PURE__ */ v(
+                    "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: o.errorIcon },
+                      children: [
+                        /* @__PURE__ */ u("circle", { cx: "12", cy: "12", r: "10" }),
+                        /* @__PURE__ */ u("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                        /* @__PURE__ */ u("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ v("div", { className: "flex-1 flex flex-col gap-1", children: [
+                    /* @__PURE__ */ u("div", { className: "flex items-baseline gap-2 flex-wrap", children: /* @__PURE__ */ v(
+                      "span",
+                      {
+                        className: "font-semibold text-[11px] px-1.5 py-0.5 rounded",
+                        style: {
+                          color: o.errorLocation,
+                          backgroundColor: r === "dark" ? "rgba(34, 211, 238, 0.1)" : "rgba(8, 145, 178, 0.1)"
+                        },
+                        children: [
+                          "Line ",
+                          f.line + 1,
+                          ", Measure ",
+                          f.measureIndex + 1
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ u("span", { className: "text-[11px] leading-relaxed", style: { color: o.errorMessage }, children: f.message })
                   ] }),
-                  /* @__PURE__ */ h("span", { style: { color: o.errorMessage }, children: A.message })
-                ] })
-              ]
-            },
-            S
-          ))
-        ]
-      }
-    )
+                  /* @__PURE__ */ v(
+                    "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: o.errorIcon,
+                        opacity: a === f ? 1 : 0.3,
+                        transition: "opacity 0.15s ease-in-out"
+                      },
+                      children: [
+                        /* @__PURE__ */ u("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+                        /* @__PURE__ */ u("polyline", { points: "12 5 19 12 12 19" })
+                      ]
+                    }
+                  )
+                ]
+              },
+              T
+            )) })
+          ]
+        }
+      )
+    ] })
   ] }) });
-}, Re = ({ value: e, theme: t = "light" }) => {
-  const n = y(null);
-  return L(() => {
-    n.current && j.renderAbc(n.current, e, {
-      responsive: "resize",
-      foregroundColor: t === "dark" ? "#ffffff" : "#000000",
-      format: {
-        titlefont: "serif 20"
-      }
-    });
-  }, [e, t]), /* @__PURE__ */ h("div", { ref: n, className: "w-full abc-preview", "data-theme": t });
 };
 export {
   G as ABC_ACCIDENTAL_PATTERN,
-  R as ABC_ANNOTATION_PATTERN,
+  D as ABC_ANNOTATION_PATTERN,
   z as ABC_BAR_PATTERN,
-  re as ABC_BROKEN_RHYTHM_PATTERN,
-  Y as ABC_CHORD_BRACKET_PATTERN,
+  se as ABC_BROKEN_RHYTHM_PATTERN,
+  X as ABC_CHORD_BRACKET_PATTERN,
   q as ABC_CHORD_SYMBOL_PATTERN,
-  ye as ABC_COMMANDS,
+  Ae as ABC_COMMANDS,
   le as ABC_COMMENT_PATTERN,
   ee as ABC_DECORATION_PATTERN,
-  P as ABC_DURATION_PATTERN,
-  C as ABC_FIELD_PATTERN,
+  R as ABC_DURATION_PATTERN,
+  w as ABC_FIELD_PATTERN,
   te as ABC_GRACE_NOTE_PATTERN,
-  se as ABC_INLINE_FIELD_PATTERN,
+  re as ABC_INLINE_FIELD_PATTERN,
   E as ABC_NOTE_PATTERN,
   Q as ABC_OCTAVE_PATTERN,
   Z as ABC_ORNAMENT_PATTERN,
   O as ABC_REST_PATTERN,
-  J as ABC_SLUR_PATTERN,
+  Y as ABC_SLUR_PATTERN,
   Ne as ABC_SUGGESTIONS,
   $ as ABC_TIE_PATTERN,
-  X as ABC_TUPLET_PATTERN,
+  J as ABC_TUPLET_PATTERN,
   ne as ABC_VOLTA_BRACKET_PATTERN,
-  Oe as AbcEditor,
-  Re as AbcPreview,
+  Pe as AbcEditor,
   we as SuggestionList,
-  _ as highlightAbc,
-  Be as useAbcAutoComplete,
+  S as highlightAbc,
+  Ce as useAbcAutoComplete,
   V as useLineNumbers,
-  _e as validateAbc
+  Se as validateAbc
 };