@ovnonvo/abc-editor 0.1.5 → 0.2.1

package/dist/abc-editor.es.js

@@ -1,98 +1,98 @@
-(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.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-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-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-amber-300:oklch(87.9% .169 91.605);--color-amber-500:oklch(76.9% .188 70.08);--color-cyan-400:oklch(78.9% .154 211.53);--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-600:oklch(44.6% .043 257.281);--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);--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);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@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}.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}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-slate-600{border-color:var(--color-slate-600)}.bg-amber-500\\/20{background-color:#f99c0033}@supports (color:color-mix(in lab,red,red)){.bg-amber-500\\/20{background-color:color-mix(in oklab,var(--color-amber-500)20%,transparent)}}.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-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)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-amber-300{color:var(--color-amber-300)}.text-amber-500{color:var(--color-amber-500)}.text-cyan-400{color:var(--color-cyan-400)}.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)}.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)}.hover\\:bg-slate-800\\/30:hover{background-color:#1d293d4d}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-slate-800\\/30:hover{background-color:color-mix(in oklab,var(--color-slate-800)30%,transparent)}}}@media(min-width:48rem){.md\\:h-full{height:100%}.md\\:w-1\\/2{width:50%}.md\\:flex-row{flex-direction:row}}}:root{--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:#fff!important}textarea::placeholder{color:#64748b;opacity:1}.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-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(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.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-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--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-600:oklch(44.6% .043 257.281);--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);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@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}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-slate-600{border-color:var(--color-slate-600)}.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-2{padding:calc(var(--spacing)*2)}.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)}.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}}}: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(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import { jsx as h, jsxs as T } from "react/jsx-runtime";
-import { useState as M, useCallback as N, useEffect as B, useRef as I, useMemo as F } from "react";
-import K from "abcjs";
-const j = (t) => t.split(`
-`).map((s, r) => r + 1).join(`
-`), y = /^([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]:)(.*)$/, E = /[A-Ga-g]/, H = /[\^_=]/, V = /[',]/, G = /\|[:|\]]?|:?\|/, Q = /[\\[\]]/, z = /[()]/, Y = /^\(\d+$/, P = /^\/?\d+(\/\d+)?$/, k = /[zZx]/, $ = /^\.?-$/, J = /[.~HLMOPSTuv]/, X = /^"[^"]*"$/, O = /^"[\^_<>@][^"]*"$/, Z = /^![^!]+!$/, q = /^\{[^}]+\}$/, tt = /^\[\d+$/, et = /^\[([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]):([^\]]*)\]$/, nt = /^[<>]+$/, st = /^%.*$/, d = (t) => t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"), rt = (t, e) => {
-  const s = t[e];
-  if (s !== "|" && s !== ":")
+import { useState as k, useCallback as I, useEffect as L, useRef as y, useMemo as K } from "react";
+import j from "abcjs";
+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 !== ":")
     return null;
-  let r = s, l = e + 1;
-  for (; l < t.length && (t[l] === "|" || t[l] === ":" || t[l] === "]"); )
-    r += t[l], l++;
-  return G.test(r) ? {
-    html: `<span class="${r === "||" ? "abc-bar-double" : "abc-bar"}">${d(r)}</span>`,
+  let s = n, 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>`,
     nextIndex: l
   } : null;
-}, lt = (t, e) => {
-  const s = t[e];
-  return H.test(s) ? {
-    html: `<span class="abc-accidental">${d(s)}</span>`,
-    nextIndex: e + 1
+}, oe = (e, t) => {
+  const n = e[t];
+  return G.test(n) ? {
+    html: `<span class="abc-accidental">${d(n)}</span>`,
+    nextIndex: t + 1
   } : null;
-}, at = (t, e, s) => {
-  const r = t[e];
-  if (!z.test(r))
+}, ce = (e, t, n) => {
+  const s = e[t];
+  if (!J.test(s))
     return null;
-  if (r === "(") {
-    if (e + 1 < t.length && /\d/.test(t[e + 1])) {
-      let l = r, n = e + 1;
-      for (; n < t.length && /\d/.test(t[n]); )
-        l += t[n], n++;
-      if (Y.test(l))
+  if (s === "(") {
+    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))
         return {
           html: `<span class="abc-tuplet">${d(l)}</span>`,
-          nextIndex: n,
+          nextIndex: r,
           slurLevelDelta: 0
         };
     }
     return {
-      html: `<span class="abc-slur abc-slur-level-${s % 5}">${d(r)}</span>`,
-      nextIndex: e + 1,
+      html: `<span class="abc-slur abc-slur-level-${n % 5}">${d(s)}</span>`,
+      nextIndex: t + 1,
       slurLevelDelta: 1
     };
-  } else if (r === ")")
+  } else if (s === ")")
     return {
-      html: `<span class="abc-slur abc-slur-level-${Math.max(0, s - 1) % 5}">${d(r)}</span>`,
-      nextIndex: e + 1,
+      html: `<span class="abc-slur abc-slur-level-${Math.max(0, n - 1) % 5}">${d(s)}</span>`,
+      nextIndex: t + 1,
       slurLevelDelta: -1
     };
   return null;
-}, ot = (t, e) => {
-  const s = t[e];
-  if (!E.test(s))
+}, ie = (e, t) => {
+  const n = e[t];
+  if (!E.test(n))
     return null;
-  let r = `<span class="abc-note">${d(s)}</span>`, l = e + 1, n = "";
-  for (; l < t.length && V.test(t[l]); )
-    n += t[l], l++;
-  if (n) {
-    const c = n[0] === "'" ? "abc-octave-high" : "abc-octave-low";
-    r += `<span class="${c}">${d(n)}</span>`;
+  let s = `<span class="abc-note">${d(n)}</span>`, l = t + 1, r = "";
+  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>`;
   }
   let a = "";
-  if (l < t.length && (t[l] === "/" || /\d/.test(t[l]))) {
-    for (t[l] === "/" && (a += t[l], l++); l < t.length && /\d/.test(t[l]); )
-      a += t[l], l++;
-    if (l < t.length && t[l] === "/")
-      for (a += t[l], l++; l < t.length && /\d/.test(t[l]); )
-        a += t[l], l++;
+  if (l < e.length && (e[l] === "/" || /\d/.test(e[l]))) {
+    for (e[l] === "/" && (a += e[l], l++); l < e.length && /\d/.test(e[l]); )
+      a += e[l], l++;
+    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", r += `<span class="${c}">${d(a)}</span>`;
+      a.startsWith("/") ? c += " abc-duration-short" : a.includes("/") ? c += " abc-duration-fraction" : c += " abc-duration-long", s += `<span class="${c}">${d(a)}</span>`;
     }
   }
   return {
-    html: r,
+    html: s,
     nextIndex: l
   };
-}, ct = (t, e) => {
-  const s = t[e];
-  return Q.test(s) ? {
-    html: `<span class="abc-chord">${d(s)}</span>`,
-    nextIndex: e + 1
+}, ue = (e, t) => {
+  const n = e[t];
+  return Y.test(n) ? {
+    html: `<span class="abc-chord">${d(n)}</span>`,
+    nextIndex: t + 1
   } : null;
-}, it = (t, e) => {
-  const s = t[e];
-  if (!k.test(s))
+}, de = (e, t) => {
+  const n = e[t];
+  if (!O.test(n))
     return null;
-  let l = `<span class="${s === "x" ? "abc-rest-invisible" : "abc-rest"}">${d(s)}</span>`, n = e + 1, a = "";
-  if (n < t.length && (t[n] === "/" || /\d/.test(t[n]))) {
-    for (t[n] === "/" && (a += t[n], n++); n < t.length && /\d/.test(t[n]); )
-      a += t[n], n++;
-    if (n < t.length && t[n] === "/")
-      for (a += t[n], n++; n < t.length && /\d/.test(t[n]); )
-        a += t[n], n++;
+  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>`;
@@ -100,207 +100,207 @@ const j = (t) => t.split(`
   }
   return {
     html: l,
-    nextIndex: n
+    nextIndex: r
   };
-}, ut = (t, e) => {
-  const s = t[e];
-  return s === "." && e + 1 < t.length && t[e + 1] === "-" && $.test(".-") ? {
+}, 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>`,
-    nextIndex: e + 2
-  } : s === "-" && $.test(s) ? {
-    html: `<span class="abc-tie">${d(s)}</span>`,
-    nextIndex: e + 1
+    nextIndex: t + 2
+  } : n === "-" && $.test(n) ? {
+    html: `<span class="abc-tie">${d(n)}</span>`,
+    nextIndex: t + 1
   } : null;
-}, dt = (t, e) => {
-  const s = t[e];
-  return !J.test(s) || s === "." && e + 1 < t.length && t[e + 1] === "-" ? null : {
-    html: `<span class="abc-ornament">${d(s)}</span>`,
-    nextIndex: e + 1
+}, 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>`,
+    nextIndex: t + 1
   };
-}, pt = (t, e) => {
-  if (t[e] !== '"')
+}, fe = (e, t) => {
+  if (e[t] !== '"')
     return null;
-  let r = e + 1;
-  for (; r < t.length && t[r] !== '"'; )
-    r++;
-  if (r >= t.length)
+  let s = t + 1;
+  for (; s < e.length && e[s] !== '"'; )
+    s++;
+  if (s >= e.length)
     return null;
-  const l = t.substring(e, r + 1);
-  return O.test(l) ? {
+  const l = e.substring(t, s + 1);
+  return R.test(l) ? {
     html: `<span class="abc-annotation">${d(l)}</span>`,
-    nextIndex: r + 1
+    nextIndex: s + 1
   } : null;
-}, ht = (t, e) => {
-  if (t[e] !== '"')
+}, me = (e, t) => {
+  if (e[t] !== '"')
     return null;
-  let r = e + 1;
-  for (; r < t.length && t[r] !== '"'; )
-    r++;
-  if (r >= t.length)
+  let s = t + 1;
+  for (; s < e.length && e[s] !== '"'; )
+    s++;
+  if (s >= e.length)
     return null;
-  const l = t.substring(e, r + 1);
-  return O.test(l) || !X.test(l) ? 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: r + 1
+    nextIndex: s + 1
   };
-}, ft = (t, e) => {
-  if (t[e] !== "!")
+}, ge = (e, t) => {
+  if (e[t] !== "!")
     return null;
-  let r = e + 1;
-  for (; r < t.length && t[r] !== "!"; )
-    r++;
-  if (r >= t.length)
+  let s = t + 1;
+  for (; s < e.length && e[s] !== "!"; )
+    s++;
+  if (s >= e.length)
     return null;
-  const l = t.substring(e, r + 1);
-  return Z.test(l) ? {
+  const l = e.substring(t, s + 1);
+  return ee.test(l) ? {
     html: `<span class="abc-decoration">${d(l)}</span>`,
-    nextIndex: r + 1
+    nextIndex: s + 1
   } : null;
-}, mt = (t, e) => {
-  if (t[e] !== "{")
+}, be = (e, t) => {
+  if (e[t] !== "{")
     return null;
-  let r = e + 1;
-  for (; r < t.length && t[r] !== "}"; )
-    r++;
-  if (r >= t.length)
+  let s = t + 1;
+  for (; s < e.length && e[s] !== "}"; )
+    s++;
+  if (s >= e.length)
     return null;
-  const l = t.substring(e, r + 1);
-  return q.test(l) ? {
+  const l = e.substring(t, s + 1);
+  return te.test(l) ? {
     html: `<span class="abc-grace-note">${d(l)}</span>`,
-    nextIndex: r + 1
+    nextIndex: s + 1
   } : null;
-}, gt = (t, e) => {
-  if (t[e] !== "[")
+}, ve = (e, t) => {
+  if (e[t] !== "[")
     return null;
-  let r = e + 1;
-  for (; r < t.length && t[r] !== "]"; )
-    r++;
-  if (r >= t.length)
+  let s = t + 1;
+  for (; s < e.length && e[s] !== "]"; )
+    s++;
+  if (s >= e.length)
     return null;
-  const n = t.substring(e, r + 1).match(et);
-  if (!n)
+  const r = e.substring(t, s + 1).match(se);
+  if (!r)
     return null;
-  const [, a, c] = n;
+  const [, a, c] = r;
   return {
     html: `<span class="abc-inline-field-bracket">[</span><span class="abc-inline-field-key">${d(a)}:</span><span class="abc-inline-field-value">${d(c)}</span><span class="abc-inline-field-bracket">]</span>`,
-    nextIndex: r + 1
+    nextIndex: s + 1
   };
-}, bt = (t, e) => {
-  if (t[e] !== "[" || e + 1 >= t.length || !/\d/.test(t[e + 1]))
+}, Ae = (e, t) => {
+  if (e[t] !== "[" || t + 1 >= e.length || !/\d/.test(e[t + 1]))
     return null;
-  let r = e + 1;
-  for (; r < t.length && /\d/.test(t[r]); )
-    r++;
-  const l = t.substring(e, r);
-  return tt.test(l) ? {
+  let s = t + 1;
+  for (; s < e.length && /\d/.test(e[s]); )
+    s++;
+  const l = e.substring(t, s);
+  return ne.test(l) ? {
     html: `<span class="abc-volta-bracket">${d(l)}</span>`,
-    nextIndex: r
+    nextIndex: s
   } : null;
-}, vt = (t, e) => {
-  const s = t[e];
-  if (s !== ">" && s !== "<")
+}, xe = (e, t) => {
+  const n = e[t];
+  if (n !== ">" && n !== "<")
     return null;
-  let r = e + 1;
-  for (; r < t.length && t[r] === s; )
-    r++;
-  const l = t.substring(e, r);
-  return nt.test(l) ? {
+  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: r
+    nextIndex: s
   } : null;
-}, xt = (t) => {
-  let e = "", s = 0, r = 0;
-  for (; s < t.length; ) {
-    const l = rt(t, s);
+}, Te = (e) => {
+  let t = "", n = 0, s = 0;
+  for (; n < e.length; ) {
+    const l = ae(e, n);
     if (l) {
-      e += l.html, s = l.nextIndex;
+      t += l.html, n = l.nextIndex;
       continue;
     }
-    const n = ft(t, s);
-    if (n) {
-      e += n.html, s = n.nextIndex;
+    const r = ge(e, n);
+    if (r) {
+      t += r.html, n = r.nextIndex;
       continue;
     }
-    const a = mt(t, s);
+    const a = be(e, n);
     if (a) {
-      e += a.html, s = a.nextIndex;
+      t += a.html, n = a.nextIndex;
       continue;
     }
-    const c = lt(t, s);
+    const c = oe(e, n);
     if (c) {
-      e += c.html, s = c.nextIndex;
+      t += c.html, n = c.nextIndex;
       continue;
     }
-    const v = dt(t, s);
-    if (v) {
-      e += v.html, s = v.nextIndex;
+    const b = he(e, n);
+    if (b) {
+      t += b.html, n = b.nextIndex;
       continue;
     }
-    const f = pt(t, s);
+    const f = fe(e, n);
     if (f) {
-      e += f.html, s = f.nextIndex;
+      t += f.html, n = f.nextIndex;
       continue;
     }
-    const i = ht(t, s);
+    const i = me(e, n);
     if (i) {
-      e += i.html, s = i.nextIndex;
+      t += i.html, n = i.nextIndex;
       continue;
     }
-    const o = at(t, s, r);
+    const o = ce(e, n, s);
     if (o) {
-      e += o.html, s = o.nextIndex, o.slurLevelDelta && (r += o.slurLevelDelta);
+      t += o.html, n = o.nextIndex, o.slurLevelDelta && (s += o.slurLevelDelta);
       continue;
     }
-    const u = it(t, s);
+    const u = de(e, n);
     if (u) {
-      e += u.html, s = u.nextIndex;
+      t += u.html, n = u.nextIndex;
       continue;
     }
-    const p = ot(t, s);
+    const p = ie(e, n);
     if (p) {
-      e += p.html, s = p.nextIndex;
+      t += p.html, n = p.nextIndex;
       continue;
     }
-    const x = vt(t, s);
-    if (x) {
-      e += x.html, s = x.nextIndex;
+    const v = xe(e, n);
+    if (v) {
+      t += v.html, n = v.nextIndex;
       continue;
     }
-    const m = gt(t, s);
+    const m = ve(e, n);
     if (m) {
-      e += m.html, s = m.nextIndex;
+      t += m.html, n = m.nextIndex;
       continue;
     }
-    const g = bt(t, s);
+    const g = Ae(e, n);
     if (g) {
-      e += g.html, s = g.nextIndex;
+      t += g.html, n = g.nextIndex;
       continue;
     }
-    const A = ct(t, s);
+    const A = ue(e, n);
     if (A) {
-      e += A.html, s = A.nextIndex;
+      t += A.html, n = A.nextIndex;
       continue;
     }
-    const b = ut(t, s);
-    if (b) {
-      e += b.html, s = b.nextIndex;
+    const N = pe(e, n);
+    if (N) {
+      t += N.html, n = N.nextIndex;
       continue;
     }
-    e += `<span class="abc-text">${d(t[s])}</span>`, s++;
+    t += `<span class="abc-text">${d(e[n])}</span>`, n++;
   }
-  return e;
-}, _ = (t) => t.split(`
-`).map((s) => {
-  if (st.test(s))
-    return `<span class="abc-comment">${d(s)}</span>`;
-  const r = s.match(y);
-  if (r) {
-    const [, l, n] = r;
-    return l === "w:" || l === "W:" ? `<span class="abc-lyrics-key">${d(l)}</span><span class="abc-lyrics-value">${d(n)}</span>` : `<span class="abc-meta-key">${d(l)}</span><span class="abc-meta-value">${d(n)}</span>`;
+  return 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>`;
   }
-  return xt(s);
+  return Te(n);
 }).join(`
-`), At = {
+`), Ne = {
   "X:": [
     { value: "1", description: "Reference number 1" },
     { value: "2", description: "Reference number 2" }
@@ -446,7 +446,7 @@ const j = (t) => t.split(`
     { value: "Your Name", description: "Transcriber name" },
     { value: "ABC transcription", description: "Transcription note" }
   ]
-}, Tt = (t) => At[t] || [], Nt = [
+}, Ie = (e) => Ne[e] || [], ye = [
   {
     value: "/header",
     description: "Insert basic ABC header template",
@@ -457,14 +457,14 @@ L:1/4
 K:C
 `
   }
-], It = (t) => t.startsWith("/") ? Nt.filter(
-  (e) => e.value.toLowerCase().startsWith(t.toLowerCase())
-) : [], yt = ({
-  value: t,
-  textareaRef: e,
-  onChange: s
+], Ce = (e) => e.startsWith("/") ? ye.filter(
+  (t) => t.value.toLowerCase().startsWith(e.toLowerCase())
+) : [], Be = ({
+  value: e,
+  textareaRef: t,
+  onChange: n
 }) => {
-  const [r, l] = M({
+  const [s, l] = k({
     isOpen: !1,
     suggestions: [],
     selectedIndex: 0,
@@ -472,10 +472,10 @@ K:C
     fieldKey: null,
     inputValue: "",
     isCommand: !1
-  }), n = N(() => {
-    if (!e.current)
+  }), r = I(() => {
+    if (!t.current)
       return null;
-    const i = e.current.selectionStart, o = t.substring(0, i).split(`
+    const i = t.current.selectionStart, o = e.substring(0, i).split(`
 `), u = o[o.length - 1];
     if (u.startsWith("/"))
       return {
@@ -485,11 +485,11 @@ K:C
         lineStartPos: i - u.length,
         isCommand: !0
       };
-    const p = u.match(y);
+    const p = u.match(C);
     if (p) {
-      const [, x, m] = p;
+      const [, v, m] = p;
       return {
-        fieldKey: x,
+        fieldKey: v,
         inputValue: m,
         line: u,
         lineStartPos: i - u.length,
@@ -497,21 +497,21 @@ K:C
       };
     }
     return null;
-  }, [t, e]), a = N(() => {
-    if (!e.current)
+  }, [e, t]), a = I(() => {
+    if (!t.current)
       return { top: 0, left: 0 };
-    const i = e.current, o = i.selectionStart, p = t.substring(0, o).split(`
-`).length - 1, x = parseFloat(getComputedStyle(i).lineHeight) || 24;
-    return { top: (parseFloat(getComputedStyle(i).paddingTop) || 16) + (p + 1) * x - i.scrollTop, left: 60 };
-  }, [t, e]);
-  B(() => {
-    const i = n();
+    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 };
+  }, [e, t]);
+  L(() => {
+    const i = r();
     if (!i) {
       l((u) => ({ ...u, isOpen: !1 }));
       return;
     }
     let o = [];
-    if (i.isCommand ? o = It(i.inputValue) : i.fieldKey && (o = Tt(i.fieldKey).filter(
+    if (i.isCommand ? o = Ce(i.inputValue) : i.fieldKey && (o = Ie(i.fieldKey).filter(
       (p) => p.value.toLowerCase().startsWith(i.inputValue.toLowerCase())
     )), o.length > 0) {
       const u = a();
@@ -526,30 +526,30 @@ K:C
       });
     } else
       l((u) => ({ ...u, isOpen: !1 }));
-  }, [t, n, a]);
-  const c = N(
+  }, [e, r, a]);
+  const c = I(
     (i) => {
-      if (!e.current)
+      if (!t.current)
         return;
-      const o = e.current.selectionStart, u = t.substring(0, o).split(`
+      const o = t.current.selectionStart, u = e.substring(0, o).split(`
 `), p = u[u.length - 1];
-      let x, m;
-      if (r.isCommand && i.template) {
-        const g = t.substring(0, o - p.length), A = t.substring(o);
-        x = g + i.template + A, m = g.length + i.template.length;
-      } else if (r.fieldKey) {
-        const g = r.fieldKey + i.value, A = t.substring(0, o - p.length), b = t.substring(o);
-        x = A + g + b, m = A.length + g.length;
+      let v, m;
+      if (s.isCommand && i.template) {
+        const g = e.substring(0, o - p.length), A = e.substring(o);
+        v = g + i.template + A, m = g.length + i.template.length;
+      } else if (s.fieldKey) {
+        const g = s.fieldKey + i.value, A = e.substring(0, o - p.length), N = e.substring(o);
+        v = A + g + N, m = A.length + g.length;
       } else
         return;
-      s(x), setTimeout(() => {
-        e.current && (e.current.selectionStart = m, e.current.selectionEnd = m, e.current.focus());
+      n(v), setTimeout(() => {
+        t.current && (t.current.selectionStart = m, t.current.selectionEnd = m, t.current.focus());
       }, 0), l((g) => ({ ...g, isOpen: !1 }));
     },
-    [e, r.fieldKey, r.isCommand, t, s]
-  ), v = N(
+    [t, s.fieldKey, s.isCommand, e, n]
+  ), b = I(
     (i) => {
-      if (r.isOpen)
+      if (s.isOpen)
         switch (i.key) {
           case "ArrowDown":
             i.preventDefault(), l((o) => ({
@@ -564,57 +564,57 @@ K:C
             }));
             break;
           case "Enter":
-            r.suggestions.length > 0 && (i.preventDefault(), c(r.suggestions[r.selectedIndex]));
+            s.suggestions.length > 0 && (i.preventDefault(), c(s.suggestions[s.selectedIndex]));
             break;
           case "Escape":
             i.preventDefault(), l((o) => ({ ...o, isOpen: !1 }));
             break;
         }
     },
-    [r.isOpen, r.suggestions, r.selectedIndex, c]
-  ), f = N((i) => {
+    [s.isOpen, s.suggestions, s.selectedIndex, c]
+  ), f = I((i) => {
     l((o) => ({ ...o, selectedIndex: i }));
   }, []);
   return {
-    isOpen: r.isOpen,
-    suggestions: r.suggestions,
-    selectedIndex: r.selectedIndex,
-    position: r.position,
-    handleKeyDown: v,
+    isOpen: s.isOpen,
+    suggestions: s.suggestions,
+    selectedIndex: s.selectedIndex,
+    position: s.position,
+    handleKeyDown: b,
     selectSuggestion: c,
     handleMouseEnter: f
   };
-}, Ct = ({
-  suggestions: t,
-  selectedIndex: e,
-  position: s,
-  onSelect: r,
+}, we = ({
+  suggestions: e,
+  selectedIndex: t,
+  position: n,
+  onSelect: s,
   onMouseEnter: l
 }) => {
-  const n = I(null);
-  return B(() => {
-    n.current?.scrollIntoView({
+  const r = y(null);
+  return L(() => {
+    r.current?.scrollIntoView({
       block: "nearest",
       behavior: "smooth"
     });
-  }, [e]), t.length === 0 ? null : /* @__PURE__ */ h(
+  }, [t]), e.length === 0 ? null : /* @__PURE__ */ h(
     "div",
     {
       className: "absolute z-50 bg-slate-800 border border-slate-600 rounded-md shadow-lg overflow-hidden",
       style: {
-        top: `${s.top}px`,
-        left: `${s.left}px`,
+        top: `${n.top}px`,
+        left: `${n.left}px`,
         minWidth: "200px",
         maxWidth: "400px",
         maxHeight: "300px",
         overflowY: "auto"
       },
-      children: t.map((a, c) => /* @__PURE__ */ T(
+      children: e.map((a, c) => /* @__PURE__ */ T(
         "div",
         {
-          ref: c === e ? n : null,
-          className: `px-3 py-2 cursor-pointer ${c === e ? "bg-blue-600 text-white" : "text-slate-200 hover:bg-slate-700"}`,
-          onClick: () => r(a),
+          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),
           children: [
             /* @__PURE__ */ h("div", { className: "font-mono text-sm", children: a.value }),
@@ -625,102 +625,102 @@ K:C
       ))
     }
   );
-}, wt = (t) => {
-  const e = t.trim();
-  if (e === "C")
+}, Ee = (e) => {
+  const t = e.trim();
+  if (t === "C")
     return { beatsPerMeasure: 4, beatUnit: 4 };
-  if (e === "C|")
+  if (t === "C|")
     return { beatsPerMeasure: 2, beatUnit: 2 };
-  const s = e.match(/^(\d+)\/(\d+)$/);
-  return s ? {
-    beatsPerMeasure: parseInt(s[1], 10),
-    beatUnit: parseInt(s[2], 10)
+  const n = t.match(/^(\d+)\/(\d+)$/);
+  return n ? {
+    beatsPerMeasure: parseInt(n[1], 10),
+    beatUnit: parseInt(n[2], 10)
   } : { beatsPerMeasure: 4, beatUnit: 4 };
-}, Et = (t) => {
-  const s = t.trim().match(/^(\d+)\/(\d+)$/);
-  return s ? parseInt(s[1], 10) / parseInt(s[2], 10) : 1 / 8;
-}, Bt = (t) => {
-  const e = t.split(`
+}, Le = (e) => {
+  const n = e.trim().match(/^(\d+)\/(\d+)$/);
+  return n ? parseInt(n[1], 10) / parseInt(n[2], 10) : 1 / 8;
+}, Se = (e) => {
+  const t = e.split(`
 `);
-  let s = { beatsPerMeasure: 4, beatUnit: 4 }, r = 1 / 8;
-  for (const l of e) {
-    const n = l.match(y);
-    if (n) {
-      const [, a, c] = n;
-      a === "M:" ? s = wt(c) : a === "L:" && (r = Et(c));
+  let n = { beatsPerMeasure: 4, beatUnit: 4 }, s = 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));
     }
   }
-  return { meter: s, unitNoteLength: r };
-}, L = (t) => {
-  if (!t)
+  return { meter: n, unitNoteLength: s };
+}, M = (e) => {
+  if (!e)
     return 1;
-  if (t.startsWith("/"))
-    return 1 / parseInt(t.substring(1), 10);
-  if (t.includes("/")) {
-    const [e, s] = t.split("/");
-    return parseInt(e, 10) / parseInt(s, 10);
+  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);
   }
-  return parseInt(t, 10);
-}, St = (t, e) => {
-  let s = 0, r = 0;
-  for (; r < t.length; ) {
-    const l = t[r];
-    if (E.test(l) || k.test(l)) {
-      let n = r + 1;
-      for (; n < t.length && (t[n] === "'" || t[n] === ","); )
-        n++;
+  return parseInt(e, 10);
+}, $e = (e, t) => {
+  let n = 0, s = 0;
+  for (; s < e.length; ) {
+    const l = e[s];
+    if (E.test(l) || O.test(l)) {
+      let r = s + 1;
+      for (; r < e.length && (e[r] === "'" || e[r] === ","); )
+        r++;
       let a = "";
-      if (n < t.length && (t[n] === "/" || /\d/.test(t[n]))) {
-        const o = n;
-        for (t[n] === "/" && n++; n < t.length && /\d/.test(t[n]); )
-          n++;
-        if (n < t.length && t[n] === "/")
-          for (n++; n < t.length && /\d/.test(t[n]); )
-            n++;
-        a = t.substring(o, n);
+      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);
       }
-      const c = L(a), v = e.unitNoteLength * c, f = 1 / e.meter.beatUnit, i = v / f;
-      s += i, r = n;
+      const c = M(a), b = t.unitNoteLength * c, f = 1 / t.meter.beatUnit, i = b / f;
+      n += i, s = r;
     } else if (l === "[") {
-      let n = r + 1;
-      for (; n < t.length && t[n] !== "]"; ) {
-        const a = t[n];
+      let r = s + 1;
+      for (; r < e.length && e[r] !== "]"; ) {
+        const a = e[r];
         if (E.test(a)) {
-          let c = n + 1;
-          for (; c < t.length && (t[c] === "'" || t[c] === ","); )
+          let c = r + 1;
+          for (; c < e.length && (e[c] === "'" || e[c] === ","); )
             c++;
-          n = c;
+          r = c;
         } else
-          n++;
+          r++;
       }
-      if (n < t.length && t[n] === "]") {
-        n++;
+      if (r < e.length && e[r] === "]") {
+        r++;
         let a = "";
-        if (n < t.length && (t[n] === "/" || /\d/.test(t[n]))) {
-          const o = n;
-          for (t[n] === "/" && n++; n < t.length && /\d/.test(t[n]); )
-            n++;
-          if (n < t.length && t[n] === "/")
-            for (n++; n < t.length && /\d/.test(t[n]); )
-              n++;
-          a = t.substring(o, n);
+        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);
         }
-        const c = L(a), v = e.unitNoteLength * c, f = 1 / e.meter.beatUnit, i = v / f;
-        s += i;
+        const c = M(a), b = t.unitNoteLength * c, f = 1 / t.meter.beatUnit, i = b / f;
+        n += i;
       }
-      r = n;
+      s = r;
     } else
-      r++;
+      s++;
   }
-  return s;
-}, $t = (t) => {
-  const e = [], s = t.split(`
-`), r = Bt(t);
-  return s.forEach((l, n) => {
-    if (!(l.trim().startsWith("%") || y.test(l)) && l.includes("|")) {
+  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("|")) {
       let a = 0;
       const c = l.split("|");
-      let v = 0;
+      let b = 0;
       c.forEach((f, i) => {
         if (i === c.length - 1 && f.trim() === "")
           return;
@@ -729,12 +729,12 @@ K:C
           a += f.length + 1;
           return;
         }
-        const u = St(o, r), p = r.meter.beatsPerMeasure;
+        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;
-          e.push({
-            line: n,
-            measureIndex: v,
+          t.push({
+            line: r,
+            measureIndex: b,
             startCol: m,
             endCol: g,
             expected: p,
@@ -742,77 +742,98 @@ K:C
             message: `Expected ${p} beats, got ${u.toFixed(2)}`
           });
         }
-        v++, a += f.length + 1;
+        b++, a += f.length + 1;
       });
     }
-  }), e;
-}, Pt = ({ value: t, onChange: e }) => {
-  const s = I(null), r = I(null), l = I(null), [n, a] = M(null), c = j(t), v = _(t), f = F(() => $t(t), [t]), {
-    isOpen: i,
-    suggestions: o,
-    selectedIndex: u,
-    position: p,
-    handleKeyDown: x,
-    selectSuggestion: m,
-    handleMouseEnter: g
-  } = yt({ value: t, textareaRef: s, onChange: e }), A = () => {
-    s.current && r.current && l.current && (r.current.scrollTop = s.current.scrollTop, l.current.scrollTop = s.current.scrollTop);
+  }), 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" ? {
+    bg: "#161616",
+    editorBg: "#1a1a1a",
+    lineNumBg: "#0f0f0f",
+    caretColor: "#fff",
+    errorHeader: "#94a3b8",
+    errorIcon: "#f59e0b",
+    errorLocation: "#22d3ee",
+    errorMessage: "#fcd34d",
+    errorHighlight: "rgba(245, 158, 11, 0.2)"
+  } : {
+    bg: "#f5f5f5",
+    editorBg: "#ffffff",
+    lineNumBg: "#eeeeee",
+    caretColor: "#000",
+    errorHeader: "#64748b",
+    errorIcon: "#d97706",
+    errorLocation: "#0891b2",
+    errorMessage: "#b45309",
+    errorHighlight: "#fde047"
+  }, {
+    isOpen: u,
+    suggestions: p,
+    selectedIndex: v,
+    position: m,
+    handleKeyDown: g,
+    selectSuggestion: A,
+    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);
   };
-  return /* @__PURE__ */ h("div", { className: "w-full h-full flex flex-col p-4", style: { backgroundColor: "#161616" }, children: /* @__PURE__ */ T("div", { className: "w-full flex-1 flex flex-col rounded-lg border border-slate-600 overflow-hidden", style: { backgroundColor: "#1a1a1a" }, children: [
+  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 border border-slate-600 overflow-hidden", style: { backgroundColor: o.editorBg }, children: [
     /* @__PURE__ */ T("div", { className: "flex-1 flex overflow-hidden", children: [
       /* @__PURE__ */ h(
         "div",
         {
-          ref: r,
+          ref: l,
           className: "overflow-hidden text-right text-sm font-mono leading-relaxed text-slate-500 select-none",
-          style: { backgroundColor: "#0f0f0f", minWidth: "2.5rem" },
-          children: /* @__PURE__ */ h("pre", { className: "m-0 pl-1 pr-3 py-4", children: c })
+          style: { backgroundColor: o.lineNumBg, minWidth: "2.5rem" },
+          children: /* @__PURE__ */ h("pre", { className: "m-0 pl-1 pr-3 py-4", children: b })
         }
       ),
       /* @__PURE__ */ T("div", { className: "flex-1 relative", children: [
         /* @__PURE__ */ h(
           "div",
           {
-            ref: l,
+            ref: r,
             className: "absolute inset-0 overflow-hidden px-4 py-4 text-sm font-mono leading-relaxed pointer-events-none",
             style: {
-              backgroundColor: "#1a1a1a",
-              opacity: n ? 0.3 : 1,
+              backgroundColor: o.editorBg,
+              opacity: a ? 0.3 : 1,
               transition: "opacity 0.2s"
             },
             children: /* @__PURE__ */ h(
               "pre",
               {
                 className: "m-0",
-                dangerouslySetInnerHTML: { __html: v }
+                dangerouslySetInnerHTML: { __html: f }
               }
             )
           }
         ),
-        n && (() => {
-          const b = t.split(`
-`), R = (b[n.line] || "").substring(n.startCol, n.endCol), D = _(R);
+        a && (() => {
+          const x = e.split(`
+`), U = (x[a.line] || "").substring(a.startCol, a.endCol), H = _(U);
           return /* @__PURE__ */ h(
             "div",
             {
               className: "absolute inset-0 overflow-hidden px-4 py-4 text-sm font-mono leading-relaxed pointer-events-none",
               style: { backgroundColor: "transparent" },
-              children: /* @__PURE__ */ h("pre", { className: "m-0", children: b.map((C, w) => {
-                if (w === n.line) {
-                  const U = C.substring(0, n.startCol), W = C.substring(n.endCol);
+              children: /* @__PURE__ */ h("pre", { className: "m-0", children: x.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: U }),
+                    /* @__PURE__ */ h("span", { style: { opacity: 0 }, children: W }),
                     /* @__PURE__ */ h(
                       "span",
                       {
-                        className: "bg-amber-500/20 px-1 rounded",
-                        dangerouslySetInnerHTML: { __html: D }
+                        className: "px-1 rounded",
+                        style: { backgroundColor: o.errorHighlight },
+                        dangerouslySetInnerHTML: { __html: H }
                       }
                     ),
-                    /* @__PURE__ */ h("span", { style: { opacity: 0 }, children: W })
+                    /* @__PURE__ */ h("span", { style: { opacity: 0 }, children: F })
                   ] }, w);
                 }
-                return /* @__PURE__ */ h("div", { style: { opacity: 0 }, children: C }, w);
+                return /* @__PURE__ */ h("div", { style: { opacity: 0 }, children: B }, w);
               }) })
             }
           );
@@ -822,55 +843,58 @@ K:C
           {
             ref: s,
             className: "absolute inset-0 w-full h-full resize-none px-4 py-4 text-sm font-mono leading-relaxed outline-none border-0",
-            style: { backgroundColor: "transparent", color: "transparent", caretColor: "#fff" },
-            value: t,
-            onChange: (b) => e(b.target.value),
-            onScroll: A,
-            onKeyDown: x,
+            style: { backgroundColor: "transparent", color: "transparent", caretColor: o.caretColor },
+            value: e,
+            onChange: (x) => t(x.target.value),
+            onScroll: D,
+            onKeyDown: g,
             spellCheck: !1,
             placeholder: "Type /header to insert template..."
           }
         ),
-        i && /* @__PURE__ */ h(
-          Ct,
+        u && /* @__PURE__ */ h(
+          we,
           {
-            suggestions: o,
-            selectedIndex: u,
-            position: p,
-            onSelect: m,
-            onMouseEnter: g
+            suggestions: p,
+            selectedIndex: v,
+            position: m,
+            onSelect: A,
+            onMouseEnter: N
           }
         )
       ] })
     ] }),
-    f.length > 0 && /* @__PURE__ */ T(
+    i.length > 0 && /* @__PURE__ */ T(
       "div",
       {
         className: "border-t border-slate-600 px-4 py-3 text-xs font-mono overflow-auto",
-        style: { backgroundColor: "#0f0f0f", maxHeight: "8rem" },
+        style: { backgroundColor: o.lineNumBg, maxHeight: "8rem" },
         children: [
-          /* @__PURE__ */ T("div", { className: "text-slate-500 mb-2 text-[10px] uppercase tracking-wide", children: [
+          /* @__PURE__ */ T("div", { className: "mb-2 text-[10px] uppercase tracking-wide", style: { color: o.errorHeader }, children: [
             "Validation Errors (",
-            f.length,
+            i.length,
             ")"
           ] }),
-          f.map((b, S) => /* @__PURE__ */ T(
+          i.map((x, S) => /* @__PURE__ */ T(
             "div",
             {
-              className: "flex items-start gap-3 mb-2 last:mb-0 hover:bg-slate-800/30 px-2 py-1 rounded transition-colors cursor-pointer",
-              onMouseEnter: () => a(b),
-              onMouseLeave: () => a(null),
+              className: "flex items-start gap-3 mb-2 last:mb-0 px-2 py-1 rounded transition-colors cursor-pointer",
+              style: {
+                backgroundColor: a === x ? n === "dark" ? "rgba(51, 65, 85, 0.3)" : "rgba(226, 232, 240, 0.6)" : "transparent"
+              },
+              onMouseEnter: () => c(x),
+              onMouseLeave: () => c(null),
               children: [
-                /* @__PURE__ */ h("span", { className: "text-amber-500 shrink-0 mt-0.5", 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: "text-cyan-400 shrink-0", children: [
+                  /* @__PURE__ */ T("span", { className: "shrink-0", style: { color: o.errorLocation }, children: [
                     "Ln ",
-                    b.line + 1,
+                    x.line + 1,
                     ", M",
-                    b.measureIndex + 1,
+                    x.measureIndex + 1,
                     ":"
                   ] }),
-                  /* @__PURE__ */ h("span", { className: "text-amber-300", children: b.message })
+                  /* @__PURE__ */ h("span", { style: { color: o.errorMessage }, children: x.message })
                 ] })
               ]
             },
@@ -880,46 +904,46 @@ K:C
       }
     )
   ] }) });
-}, kt = ({ value: t }) => {
-  const e = I(null);
-  return B(() => {
-    e.current && K.renderAbc(e.current, t, {
+}, Re = ({ value: e, theme: t = "light" }) => {
+  const n = y(null);
+  return L(() => {
+    n.current && j.renderAbc(n.current, e, {
       responsive: "resize",
-      foregroundColor: "#ffffff",
+      foregroundColor: t === "dark" ? "#ffffff" : "#000000",
       format: {
         titlefont: "serif 20"
       }
     });
-  }, [t]), /* @__PURE__ */ h("div", { ref: e, className: "w-full abc-preview" });
+  }, [e, t]), /* @__PURE__ */ h("div", { ref: n, className: "w-full abc-preview", "data-theme": t });
 };
 export {
-  H as ABC_ACCIDENTAL_PATTERN,
-  O as ABC_ANNOTATION_PATTERN,
-  G as ABC_BAR_PATTERN,
-  nt as ABC_BROKEN_RHYTHM_PATTERN,
-  Q as ABC_CHORD_BRACKET_PATTERN,
-  X as ABC_CHORD_SYMBOL_PATTERN,
-  Nt as ABC_COMMANDS,
-  st as ABC_COMMENT_PATTERN,
-  Z as ABC_DECORATION_PATTERN,
+  G as ABC_ACCIDENTAL_PATTERN,
+  R as ABC_ANNOTATION_PATTERN,
+  z as ABC_BAR_PATTERN,
+  re as ABC_BROKEN_RHYTHM_PATTERN,
+  Y as ABC_CHORD_BRACKET_PATTERN,
+  q as ABC_CHORD_SYMBOL_PATTERN,
+  ye as ABC_COMMANDS,
+  le as ABC_COMMENT_PATTERN,
+  ee as ABC_DECORATION_PATTERN,
   P as ABC_DURATION_PATTERN,
-  y as ABC_FIELD_PATTERN,
-  q as ABC_GRACE_NOTE_PATTERN,
-  et as ABC_INLINE_FIELD_PATTERN,
+  C as ABC_FIELD_PATTERN,
+  te as ABC_GRACE_NOTE_PATTERN,
+  se as ABC_INLINE_FIELD_PATTERN,
   E as ABC_NOTE_PATTERN,
-  V as ABC_OCTAVE_PATTERN,
-  J as ABC_ORNAMENT_PATTERN,
-  k as ABC_REST_PATTERN,
-  z as ABC_SLUR_PATTERN,
-  At as ABC_SUGGESTIONS,
+  Q as ABC_OCTAVE_PATTERN,
+  Z as ABC_ORNAMENT_PATTERN,
+  O as ABC_REST_PATTERN,
+  J as ABC_SLUR_PATTERN,
+  Ne as ABC_SUGGESTIONS,
   $ as ABC_TIE_PATTERN,
-  Y as ABC_TUPLET_PATTERN,
-  tt as ABC_VOLTA_BRACKET_PATTERN,
-  Pt as AbcEditor,
-  kt as AbcPreview,
-  Ct as SuggestionList,
+  X as ABC_TUPLET_PATTERN,
+  ne as ABC_VOLTA_BRACKET_PATTERN,
+  Oe as AbcEditor,
+  Re as AbcPreview,
+  we as SuggestionList,
   _ as highlightAbc,
-  yt as useAbcAutoComplete,
-  j as useLineNumbers,
-  $t as validateAbc
+  Be as useAbcAutoComplete,
+  V as useLineNumbers,
+  _e as validateAbc
 };