@ovnonvo/abc-editor 0.3.2 → 0.3.5

package/dist/abc-editor.es.js

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