@ovnonvo/abc-editor 0.3.1 → 0.3.4

package/dist/abc-editor.es.js

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