@ovnonvo/abc-editor 0.1.5 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -2,14 +2,31 @@
2
2
 
3
3
  A React component for editing ABC music notation with syntax highlighting, autocomplete, and real-time validation.
4
4
 
5
+ ## You can try it on web
6
+
7
+ [Here](https://abc-editor-theta.vercel.app/)
8
+
9
+
10
+
5
11
  ## Features
6
12
 
7
- - **Syntax Highlighting**: Color-coded ABC notation elements
13
+ - **Light & Dark Mode**: Built-in theme support with light mode as default
14
+ - **Syntax Highlighting**: Color-coded ABC notation elements optimized for both themes
8
15
  - **Line Numbers**: Clear visual reference for navigation
16
+ <img width="739" height="282" alt="スクリーンショット 2025-11-23 14 46 26" src="https://github.com/user-attachments/assets/e69f6bf6-3ea8-45d9-b194-3d5a6e4c5385" />
17
+
9
18
  - **Autocomplete**: Smart suggestions for ABC notation commands and fields
19
+
20
+ <img width="295" height="353" alt="スクリーンショット 2025-11-23 14 47 31" src="https://github.com/user-attachments/assets/625ae548-47ec-4c84-a984-9d9cd19f95c7" />
21
+
22
+
10
23
  - **Real-time Validation**: Measure beat count validation with visual feedback
11
- - **Preview**: Live preview of music notation using abcjs
12
24
  - **Error Highlighting**: Hover over validation errors to highlight the problematic measure
25
+ <img width="956" height="987" alt="スクリーンショット 2025-11-23 14 44 14" src="https://github.com/user-attachments/assets/50d7f3c4-5c7e-47df-8237-cdebb2ce086f" />
26
+
27
+ - **Preview**: Live preview of music notation using abcjs
28
+ <img width="1900" height="984" alt="スクリーンショット 2025-11-23 14 48 34" src="https://github.com/user-attachments/assets/f2af8ae6-30c5-46c9-b905-653cdacd4cf5" />
29
+
13
30
 
14
31
  ## Installation
15
32
 
@@ -69,6 +86,36 @@ export default App;
69
86
 
70
87
  **Note:** Styles are automatically included - no need to import CSS separately!
71
88
 
89
+ ### With Theme Support
90
+
91
+ ```tsx
92
+ import { useState } from 'react';
93
+ import { AbcEditor, AbcPreview, type Theme } from '@ovnonvo/abc-editor';
94
+
95
+ function App() {
96
+ const [abcCode, setAbcCode] = useState(`X:1
97
+ T:Untitled
98
+ M:4/4
99
+ K:C
100
+ C D E F | G A B c |`);
101
+ const [theme, setTheme] = useState<Theme>('light'); // 'light' or 'dark'
102
+
103
+ return (
104
+ <div>
105
+ <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
106
+ Toggle Theme
107
+ </button>
108
+ <div style={{ display: 'flex', height: '100vh' }}>
109
+ <AbcEditor value={abcCode} onChange={setAbcCode} theme={theme} />
110
+ <AbcPreview value={abcCode} theme={theme} />
111
+ </div>
112
+ </div>
113
+ );
114
+ }
115
+
116
+ export default App;
117
+ ```
118
+
72
119
  ### Components
73
120
 
74
121
  #### `AbcEditor`
@@ -78,13 +125,15 @@ The main editor component with syntax highlighting and validation.
78
125
  **Props:**
79
126
  - `value` (string): The ABC notation code
80
127
  - `onChange` ((value: string) => void): Callback when the code changes
128
+ - `theme?` ('light' | 'dark'): Editor theme (default: 'light')
81
129
 
82
130
  **Features:**
83
131
  - Line numbers
84
- - Syntax highlighting
132
+ - Syntax highlighting with theme support
85
133
  - Autocomplete (type `/` to trigger)
86
134
  - Real-time validation
87
135
  - Error display with hover highlighting
136
+ - Light and dark mode
88
137
 
89
138
  #### `AbcPreview`
90
139
 
@@ -92,6 +141,7 @@ Preview component that renders the ABC notation as sheet music.
92
141
 
93
142
  **Props:**
94
143
  - `value` (string): The ABC notation code to render
144
+ - `theme?` ('light' | 'dark'): Preview theme (default: 'light')
95
145
 
96
146
  ### Autocomplete
97
147
 
@@ -170,24 +220,41 @@ const errors = validateAbc(abcCode);
170
220
 
171
221
  ```tsx
172
222
  import type {
223
+ Theme,
173
224
  AbcField,
174
225
  AbcFieldKey,
175
226
  ValidationError,
176
227
  } from '@ovnonvo/abc-editor';
177
228
  ```
178
229
 
230
+ **Available Types:**
231
+ - `Theme`: 'light' | 'dark' - Theme configuration for components
232
+ - `AbcField`: ABC notation field structure
233
+ - `AbcFieldKey`: ABC field key types (X:, T:, M:, K:, etc.)
234
+ - `ValidationError`: Validation error structure
235
+
179
236
  ## Styling
180
237
 
181
238
  The package automatically injects all necessary styles when you import the components. **No separate CSS import required!**
182
239
 
183
240
  **Note:** You don't need to install or configure Tailwind CSS in your project. All styles are automatically included and injected when you use the components.
184
241
 
185
- If you need custom styling, you can override the CSS variables or add your own CSS rules:
242
+ ### Theme Customization
243
+
244
+ The editor comes with built-in light and dark themes. Light mode is the default. You can customize the theme colors by overriding the CSS variables:
186
245
 
187
246
  ```css
247
+ /* Light mode (default) */
188
248
  :root {
189
- --abc-key: #your-color;
190
- --abc-note: #your-color;
249
+ --abc-key: #0066cc;
250
+ --abc-note: #000000;
251
+ /* ... other variables */
252
+ }
253
+
254
+ /* Dark mode */
255
+ [data-theme="dark"] {
256
+ --abc-key: #7ad7ff;
257
+ --abc-note: #f8fbff;
191
258
  /* ... other variables */
192
259
  }
193
260
  ```
@@ -1,17 +1,17 @@
1
- (function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-amber-300:oklch(87.9% .169 91.605);--color-amber-500:oklch(76.9% .188 70.08);--color-cyan-400:oklch(78.9% .154 211.53);--color-blue-600:oklch(54.6% .245 262.881);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-950:oklch(12.9% .042 264.695);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--tracking-wide:.025em;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.z-50{z-index:50}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing)*0)}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.block{display:block}.flex{display:flex}.inline{display:inline}.table{display:table}.h-1\\/3{height:33.3333%}.h-2\\/3{height:66.6667%}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-start{align-items:flex-start}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-slate-600{border-color:var(--color-slate-600)}.bg-amber-500\\/20{background-color:#f99c0033}@supports (color:color-mix(in lab,red,red)){.bg-amber-500\\/20{background-color:color-mix(in oklab,var(--color-amber-500)20%,transparent)}}.bg-blue-600{background-color:var(--color-blue-600)}.bg-slate-800{background-color:var(--color-slate-800)}.bg-slate-950{background-color:var(--color-slate-950)}.p-4{padding:calc(var(--spacing)*4)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.pr-3{padding-right:calc(var(--spacing)*3)}.pl-1{padding-left:calc(var(--spacing)*1)}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[10px\\]{font-size:10px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-amber-300{color:var(--color-amber-300)}.text-amber-500{color:var(--color-amber-500)}.text-cyan-400{color:var(--color-cyan-400)}.text-slate-200{color:var(--color-slate-200)}.text-slate-500{color:var(--color-slate-500)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\\[foo\\:bar\\]{foo:bar}.last\\:mb-0:last-child{margin-bottom:calc(var(--spacing)*0)}@media(hover:hover){.hover\\:bg-slate-700:hover{background-color:var(--color-slate-700)}.hover\\:bg-slate-800\\/30:hover{background-color:#1d293d4d}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-slate-800\\/30:hover{background-color:color-mix(in oklab,var(--color-slate-800)30%,transparent)}}}@media(min-width:48rem){.md\\:h-full{height:100%}.md\\:w-1\\/2{width:50%}.md\\:flex-row{flex-direction:row}}}:root{--abc-ink:#e8f1ff;--abc-key:#7ad7ff;--abc-value:#ffd48a;--abc-lyrics-key:#ff7ba1;--abc-lyrics-value:#ffc8d8;--abc-note:#f8fbff;--abc-octave-high:#73f8c4;--abc-octave-low:#c7b3ff;--abc-rest:#8ca3b8;--abc-rest-muted:#596779;--abc-accidental:#f2c079;--abc-duration-long:#ffa25f;--abc-duration-short:#6edff6;--abc-duration-fraction:#ffe38f;--abc-broken:#7be495;--abc-bar:#79cfff;--abc-bar-double:#4aafff;--abc-chord:#ff8ccf;--abc-slur-0:#ff92b2;--abc-slur-1:#ffd77a;--abc-slur-2:#7ed4ff;--abc-slur-3:#92f3c6;--abc-slur-4:#c6a9ff;--abc-tuplet:#82f0a2;--abc-tie:#f07fb3;--abc-tie-dotted:#ff9ecf;--abc-ornament:#9fb0ff;--abc-chord-symbol:#63f5d3;--abc-annotation:#ffd88a;--abc-decoration:#d1a6ff;--abc-grace:#a4f28f;--abc-volta:#f9a15a;--abc-inline-bracket:#8ca7c0;--abc-inline-key:#7ad7ff;--abc-inline-value:#ffdcb2;--abc-comment:#7b8797}.abc-preview svg text{fill:#fff!important}textarea::placeholder{color:#64748b;opacity:1}.abc-meta-key{color:var(--abc-key);font-weight:600}.abc-meta-value{color:var(--abc-value)}.abc-lyrics-key{color:var(--abc-lyrics-key);font-weight:600}.abc-lyrics-value{color:var(--abc-lyrics-value)}.abc-note{color:var(--abc-note)}.abc-octave-high{color:var(--abc-octave-high);font-weight:600}.abc-octave-low{color:var(--abc-octave-low);font-weight:600}.abc-rest{color:var(--abc-rest)}.abc-rest-invisible{color:var(--abc-rest-muted);opacity:.5}.abc-accidental{color:var(--abc-accidental)}.abc-duration{font-weight:600}.abc-duration-long{color:var(--abc-duration-long)}.abc-duration-short{color:var(--abc-duration-short)}.abc-duration-fraction{color:var(--abc-duration-fraction)}.abc-broken-rhythm{color:var(--abc-broken);font-weight:700}.abc-bar{color:var(--abc-bar);font-weight:600}.abc-bar-double{color:var(--abc-bar-double);font-weight:900}.abc-chord{color:var(--abc-chord)}.abc-slur{font-weight:700}.abc-slur-level-0{color:var(--abc-slur-0)}.abc-slur-level-1{color:var(--abc-slur-1)}.abc-slur-level-2{color:var(--abc-slur-2)}.abc-slur-level-3{color:var(--abc-slur-3)}.abc-slur-level-4{color:var(--abc-slur-4)}.abc-tuplet{color:var(--abc-tuplet);font-weight:700}.abc-tie{color:var(--abc-tie);font-weight:600}.abc-tie-dotted{color:var(--abc-tie-dotted)}.abc-ornament{color:var(--abc-ornament);font-weight:700}.abc-chord-symbol{color:var(--abc-chord-symbol);font-weight:700}.abc-annotation{color:var(--abc-annotation);font-style:italic;font-weight:600}.abc-decoration{color:var(--abc-decoration);font-weight:700}.abc-grace-note{color:var(--abc-grace);font-weight:600}.abc-volta-bracket{color:var(--abc-volta);font-weight:700}.abc-inline-field-bracket{color:var(--abc-inline-bracket)}.abc-inline-field-key{color:var(--abc-inline-key);font-weight:600}.abc-inline-field-value{color:var(--abc-inline-value)}.abc-comment{color:var(--abc-comment);font-style:italic}.abc-text{color:var(--abc-ink)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
2
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),b=require("react"),ne=require("abcjs"),L=e=>e.split(`
3
- `).map((n,r)=>r+1).join(`
4
- `),N=/^([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]:)(.*)$/,C=/[A-Ga-g]/,O=/[\^_=]/,M=/[',]/,$=/\|[:|\]]?|:?\|/,k=/[\\[\]]/,j=/[()]/,D=/^\(\d+$/,R=/^\/?\d+(\/\d+)?$/,y=/[zZx]/,B=/^\.?-$/,U=/[.~HLMOPSTuv]/,H=/^"[^"]*"$/,P=/^"[\^_<>@][^"]*"$/,K=/^![^!]+!$/,W=/^\{[^}]+\}$/,F=/^\[\d+$/,V=/^\[([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]):([^\]]*)\]$/,G=/^[<>]+$/,Q=/^%.*$/,p=e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;"),re=(e,t)=>{const n=e[t];if(n!=="|"&&n!==":")return null;let r=n,l=t+1;for(;l<e.length&&(e[l]==="|"||e[l]===":"||e[l]==="]");)r+=e[l],l++;return $.test(r)?{html:`<span class="${r==="||"?"abc-bar-double":"abc-bar"}">${p(r)}</span>`,nextIndex:l}:null},le=(e,t)=>{const n=e[t];return O.test(n)?{html:`<span class="abc-accidental">${p(n)}</span>`,nextIndex:t+1}:null},ae=(e,t,n)=>{const r=e[t];if(!j.test(r))return null;if(r==="("){if(t+1<e.length&&/\d/.test(e[t+1])){let l=r,s=t+1;for(;s<e.length&&/\d/.test(e[s]);)l+=e[s],s++;if(D.test(l))return{html:`<span class="abc-tuplet">${p(l)}</span>`,nextIndex:s,slurLevelDelta:0}}return{html:`<span class="abc-slur abc-slur-level-${n%5}">${p(r)}</span>`,nextIndex:t+1,slurLevelDelta:1}}else if(r===")")return{html:`<span class="abc-slur abc-slur-level-${Math.max(0,n-1)%5}">${p(r)}</span>`,nextIndex:t+1,slurLevelDelta:-1};return null},oe=(e,t)=>{const n=e[t];if(!C.test(n))return null;let r=`<span class="abc-note">${p(n)}</span>`,l=t+1,s="";for(;l<e.length&&M.test(e[l]);)s+=e[l],l++;if(s){const c=s[0]==="'"?"abc-octave-high":"abc-octave-low";r+=`<span class="${c}">${p(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)){let c="abc-duration";a.startsWith("/")?c+=" abc-duration-short":a.includes("/")?c+=" abc-duration-fraction":c+=" abc-duration-long",r+=`<span class="${c}">${p(a)}</span>`}}return{html:r,nextIndex:l}},ce=(e,t)=>{const n=e[t];return k.test(n)?{html:`<span class="abc-chord">${p(n)}</span>`,nextIndex:t+1}:null},ie=(e,t)=>{const n=e[t];if(!y.test(n))return null;let l=`<span class="${n==="x"?"abc-rest-invisible":"abc-rest"}">${p(n)}</span>`,s=t+1,a="";if(s<e.length&&(e[s]==="/"||/\d/.test(e[s]))){for(e[s]==="/"&&(a+=e[s],s++);s<e.length&&/\d/.test(e[s]);)a+=e[s],s++;if(s<e.length&&e[s]==="/")for(a+=e[s],s++;s<e.length&&/\d/.test(e[s]);)a+=e[s],s++;if(a&&R.test(a)){let c="abc-duration";a.startsWith("/")?c+=" abc-duration-short":a.includes("/")?c+=" abc-duration-fraction":c+=" abc-duration-long",l+=`<span class="${c}">${p(a)}</span>`}}return{html:l,nextIndex:s}},ue=(e,t)=>{const n=e[t];return n==="."&&t+1<e.length&&e[t+1]==="-"&&B.test(".-")?{html:`<span class="abc-tie abc-tie-dotted">${p(".-")}</span>`,nextIndex:t+2}:n==="-"&&B.test(n)?{html:`<span class="abc-tie">${p(n)}</span>`,nextIndex:t+1}:null},de=(e,t)=>{const n=e[t];return!U.test(n)||n==="."&&t+1<e.length&&e[t+1]==="-"?null:{html:`<span class="abc-ornament">${p(n)}</span>`,nextIndex:t+1}},pe=(e,t)=>{if(e[t]!=='"')return null;let r=t+1;for(;r<e.length&&e[r]!=='"';)r++;if(r>=e.length)return null;const l=e.substring(t,r+1);return P.test(l)?{html:`<span class="abc-annotation">${p(l)}</span>`,nextIndex:r+1}:null},he=(e,t)=>{if(e[t]!=='"')return null;let r=t+1;for(;r<e.length&&e[r]!=='"';)r++;if(r>=e.length)return null;const l=e.substring(t,r+1);return P.test(l)||!H.test(l)?null:{html:`<span class="abc-chord-symbol">${p(l)}</span>`,nextIndex:r+1}},fe=(e,t)=>{if(e[t]!=="!")return null;let r=t+1;for(;r<e.length&&e[r]!=="!";)r++;if(r>=e.length)return null;const l=e.substring(t,r+1);return K.test(l)?{html:`<span class="abc-decoration">${p(l)}</span>`,nextIndex:r+1}:null},me=(e,t)=>{if(e[t]!=="{")return null;let r=t+1;for(;r<e.length&&e[r]!=="}";)r++;if(r>=e.length)return null;const l=e.substring(t,r+1);return W.test(l)?{html:`<span class="abc-grace-note">${p(l)}</span>`,nextIndex:r+1}:null},ge=(e,t)=>{if(e[t]!=="[")return null;let r=t+1;for(;r<e.length&&e[r]!=="]";)r++;if(r>=e.length)return null;const s=e.substring(t,r+1).match(V);if(!s)return null;const[,a,c]=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(c)}</span><span class="abc-inline-field-bracket">]</span>`,nextIndex:r+1}},be=(e,t)=>{if(e[t]!=="["||t+1>=e.length||!/\d/.test(e[t+1]))return null;let r=t+1;for(;r<e.length&&/\d/.test(e[r]);)r++;const l=e.substring(t,r);return F.test(l)?{html:`<span class="abc-volta-bracket">${p(l)}</span>`,nextIndex:r}:null},Ae=(e,t)=>{const n=e[t];if(n!==">"&&n!=="<")return null;let r=t+1;for(;r<e.length&&e[r]===n;)r++;const l=e.substring(t,r);return G.test(l)?{html:`<span class="abc-broken-rhythm">${p(l)}</span>`,nextIndex:r}:null},ve=e=>{let t="",n=0,r=0;for(;n<e.length;){const l=re(e,n);if(l){t+=l.html,n=l.nextIndex;continue}const s=fe(e,n);if(s){t+=s.html,n=s.nextIndex;continue}const a=me(e,n);if(a){t+=a.html,n=a.nextIndex;continue}const c=le(e,n);if(c){t+=c.html,n=c.nextIndex;continue}const v=de(e,n);if(v){t+=v.html,n=v.nextIndex;continue}const f=pe(e,n);if(f){t+=f.html,n=f.nextIndex;continue}const i=he(e,n);if(i){t+=i.html,n=i.nextIndex;continue}const o=ae(e,n,r);if(o){t+=o.html,n=o.nextIndex,o.slurLevelDelta&&(r+=o.slurLevelDelta);continue}const d=ie(e,n);if(d){t+=d.html,n=d.nextIndex;continue}const h=oe(e,n);if(h){t+=h.html,n=h.nextIndex;continue}const T=Ae(e,n);if(T){t+=T.html,n=T.nextIndex;continue}const m=ge(e,n);if(m){t+=m.html,n=m.nextIndex;continue}const g=be(e,n);if(g){t+=g.html,n=g.nextIndex;continue}const x=ce(e,n);if(x){t+=x.html,n=x.nextIndex;continue}const A=ue(e,n);if(A){t+=A.html,n=A.nextIndex;continue}t+=`<span class="abc-text">${p(e[n])}</span>`,n++}return t},I=e=>e.split(`
5
- `).map(n=>{if(Q.test(n))return`<span class="abc-comment">${p(n)}</span>`;const r=n.match(N);if(r){const[,l,s]=r;return l==="w:"||l==="W:"?`<span class="abc-lyrics-key">${p(l)}</span><span class="abc-lyrics-value">${p(s)}</span>`:`<span class="abc-meta-key">${p(l)}</span><span class="abc-meta-value">${p(s)}</span>`}return ve(n)}).join(`
6
- `),z={"X:":[{value:"1",description:"Reference number 1"},{value:"2",description:"Reference number 2"}],"T:":[{value:"タイトル",description:"Japanese title template"},{value:"Untitled",description:"Default title"}],"M:":[{value:"4/4",description:"Common time"},{value:"3/4",description:"Waltz time"},{value:"2/4",description:"March time"},{value:"6/8",description:"Compound duple"},{value:"9/8",description:"Compound triple"},{value:"12/8",description:"Compound quadruple"},{value:"5/4",description:"Quintuple meter"},{value:"7/8",description:"Septuple meter"},{value:"C",description:"Common time (4/4)"},{value:"C|",description:"Cut time (2/2)"}],"L:":[{value:"1/4",description:"Quarter note"},{value:"1/8",description:"Eighth note"},{value:"1/16",description:"Sixteenth note"}],"Q:":[{value:"1/4=120",description:"Quarter note = 120 BPM"},{value:"1/4=100",description:"Quarter note = 100 BPM"},{value:"1/4=80",description:"Quarter note = 80 BPM"},{value:"1/8=180",description:"Eighth note = 180 BPM"}],"K:":[{value:"C"},{value:"G"},{value:"D"},{value:"A"},{value:"E"},{value:"B"},{value:"F#"},{value:"C#"},{value:"F"},{value:"Bb"},{value:"Eb"},{value:"Ab"},{value:"Db"},{value:"Gb"},{value:"Cb"},{value:"Am"},{value:"Em"},{value:"Bm"},{value:"F#m"},{value:"C#m"},{value:"G#m"},{value:"D#m"},{value:"Dm"},{value:"Gm"},{value:"Cm"},{value:"Fm"},{value:"Bbm"},{value:"Ebm"},{value:"Abm"}],"C:":[{value:"Traditional",description:"Traditional composer"},{value:"Unknown",description:"Unknown composer"}],"R:":[{value:"reel",description:"Reel rhythm"},{value:"jig",description:"Jig rhythm"},{value:"hornpipe",description:"Hornpipe rhythm"},{value:"waltz",description:"Waltz rhythm"},{value:"march",description:"March rhythm"}],"A:":[{value:"Ireland",description:"Area: Ireland"},{value:"Scotland",description:"Area: Scotland"},{value:"England",description:"Area: England"},{value:"USA",description:"Area: USA"},{value:"Japan",description:"Area: Japan"}],"B:":[{value:"The Session",description:"Book: The Session"},{value:"O'Neill's Music of Ireland",description:"Book: O'Neill's Music of Ireland"}],"D:":[{value:"Album Name (Year)",description:"Discography template"}],"F:":[{value:"https://thesession.org/",description:"File URL template"}],"G:":[{value:"Group name",description:"Group template"}],"H:":[{value:"History note",description:"History template"}],"I:":[{value:"abc-charset utf-8",description:"Character set: UTF-8"}],"m:":[{value:"~g2 = {a}g{f}g",description:"Macro definition template"}],"N:":[{value:"Note text",description:"Notes template"}],"O:":[{value:"Traditional",description:"Origin: Traditional"},{value:"Ireland",description:"Origin: Ireland"},{value:"Scotland",description:"Origin: Scotland"}],"P:":[{value:"AABB",description:"Parts: AABB"},{value:"ABCD",description:"Parts: ABCD"},{value:"A",description:"Part: A"},{value:"B",description:"Part: B"}],"r:":[{value:"Remark text",description:"Remark template"}],"S:":[{value:"Session tune",description:"Source: Session"},{value:"Traditional",description:"Source: Traditional"}],"s:":[{value:"Symbol line",description:"Symbol line template"}],"U:":[{value:"u = !trill!",description:"User defined: trill"}],"V:":[{value:"1",description:"Voice 1"},{value:"2",description:"Voice 2"},{value:"T",description:"Tenor voice"},{value:"B",description:"Bass voice"}],"W:":[{value:"Lyrics line",description:"Words (multi-line)"}],"w:":[{value:"Lyrics for this line",description:"Words (aligned)"}],"Z:":[{value:"Your Name",description:"Transcriber name"},{value:"ABC transcription",description:"Transcription note"}]},Te=e=>z[e]||[],Y=[{value:"/header",description:"Insert basic ABC header template",template:`X:1
1
+ (function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-600:oklch(54.6% .245 262.881);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-950:oklch(12.9% .042 264.695);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--font-weight-medium:500;--tracking-wide:.025em;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.z-50{z-index:50}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing)*0)}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.block{display:block}.flex{display:flex}.inline{display:inline}.table{display:table}.h-1\\/3{height:33.3333%}.h-2\\/3{height:66.6667%}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-start{align-items:flex-start}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-slate-600{border-color:var(--color-slate-600)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-slate-800{background-color:var(--color-slate-800)}.bg-slate-950{background-color:var(--color-slate-950)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.pr-3{padding-right:calc(var(--spacing)*3)}.pl-1{padding-left:calc(var(--spacing)*1)}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[10px\\]{font-size:10px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-slate-200{color:var(--color-slate-200)}.text-slate-500{color:var(--color-slate-500)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\\[foo\\:bar\\]{foo:bar}.last\\:mb-0:last-child{margin-bottom:calc(var(--spacing)*0)}@media(hover:hover){.hover\\:bg-slate-700:hover{background-color:var(--color-slate-700)}}@media(min-width:48rem){.md\\:h-full{height:100%}.md\\:w-1\\/2{width:50%}.md\\:flex-row{flex-direction:row}}}:root{--abc-ink:#1a1a1a;--abc-key:#06c;--abc-value:#996300;--abc-lyrics-key:#c06;--abc-lyrics-value:#b30059;--abc-note:#000;--abc-octave-high:#00994d;--abc-octave-low:#60c;--abc-rest:#666;--abc-rest-muted:#999;--abc-accidental:#b35900;--abc-duration-long:#cc5200;--abc-duration-short:#09c;--abc-duration-fraction:#c90;--abc-broken:#00b359;--abc-bar:#0080cc;--abc-bar-double:#06c;--abc-chord:#c09;--abc-slur-0:#cc004d;--abc-slur-1:#cc8000;--abc-slur-2:#0080cc;--abc-slur-3:#00b359;--abc-slur-4:#70c;--abc-tuplet:#00b359;--abc-tie:#c06;--abc-tie-dotted:#cc0080;--abc-ornament:#56c;--abc-chord-symbol:#00997a;--abc-annotation:#c80;--abc-decoration:#86c;--abc-grace:#66b300;--abc-volta:#c60;--abc-inline-bracket:#666;--abc-inline-key:#06c;--abc-inline-value:#960;--abc-comment:#999}[data-theme=dark]{--abc-ink:#e8f1ff;--abc-key:#7ad7ff;--abc-value:#ffd48a;--abc-lyrics-key:#ff7ba1;--abc-lyrics-value:#ffc8d8;--abc-note:#f8fbff;--abc-octave-high:#73f8c4;--abc-octave-low:#c7b3ff;--abc-rest:#8ca3b8;--abc-rest-muted:#596779;--abc-accidental:#f2c079;--abc-duration-long:#ffa25f;--abc-duration-short:#6edff6;--abc-duration-fraction:#ffe38f;--abc-broken:#7be495;--abc-bar:#79cfff;--abc-bar-double:#4aafff;--abc-chord:#ff8ccf;--abc-slur-0:#ff92b2;--abc-slur-1:#ffd77a;--abc-slur-2:#7ed4ff;--abc-slur-3:#92f3c6;--abc-slur-4:#c6a9ff;--abc-tuplet:#82f0a2;--abc-tie:#f07fb3;--abc-tie-dotted:#ff9ecf;--abc-ornament:#9fb0ff;--abc-chord-symbol:#63f5d3;--abc-annotation:#ffd88a;--abc-decoration:#d1a6ff;--abc-grace:#a4f28f;--abc-volta:#f9a15a;--abc-inline-bracket:#8ca7c0;--abc-inline-key:#7ad7ff;--abc-inline-value:#ffdcb2;--abc-comment:#7b8797}.abc-preview svg text{fill:#000!important}.abc-preview[data-theme=dark] svg text{fill:#fff!important}textarea::placeholder{color:#999;opacity:1}[data-theme=dark] textarea::placeholder{color:#64748b}.abc-meta-key{color:var(--abc-key);font-weight:600}.abc-meta-value{color:var(--abc-value)}.abc-lyrics-key{color:var(--abc-lyrics-key);font-weight:600}.abc-lyrics-value{color:var(--abc-lyrics-value)}.abc-note{color:var(--abc-note)}.abc-octave-high{color:var(--abc-octave-high);font-weight:600}.abc-octave-low{color:var(--abc-octave-low);font-weight:600}.abc-rest{color:var(--abc-rest)}.abc-rest-invisible{color:var(--abc-rest-muted);opacity:.5}.abc-accidental{color:var(--abc-accidental)}.abc-duration{font-weight:600}.abc-duration-long{color:var(--abc-duration-long)}.abc-duration-short{color:var(--abc-duration-short)}.abc-duration-fraction{color:var(--abc-duration-fraction)}.abc-broken-rhythm{color:var(--abc-broken);font-weight:700}.abc-bar{color:var(--abc-bar);font-weight:600}.abc-bar-double{color:var(--abc-bar-double);font-weight:900}.abc-chord{color:var(--abc-chord)}.abc-slur{font-weight:700}.abc-slur-level-0{color:var(--abc-slur-0)}.abc-slur-level-1{color:var(--abc-slur-1)}.abc-slur-level-2{color:var(--abc-slur-2)}.abc-slur-level-3{color:var(--abc-slur-3)}.abc-slur-level-4{color:var(--abc-slur-4)}.abc-tuplet{color:var(--abc-tuplet);font-weight:700}.abc-tie{color:var(--abc-tie);font-weight:600}.abc-tie-dotted{color:var(--abc-tie-dotted)}.abc-ornament{color:var(--abc-ornament);font-weight:700}.abc-chord-symbol{color:var(--abc-chord-symbol);font-weight:700}.abc-annotation{color:var(--abc-annotation);font-style:italic;font-weight:600}.abc-decoration{color:var(--abc-decoration);font-weight:700}.abc-grace-note{color:var(--abc-grace);font-weight:600}.abc-volta-bracket{color:var(--abc-volta);font-weight:700}.abc-inline-field-bracket{color:var(--abc-inline-bracket)}.abc-inline-field-key{color:var(--abc-inline-key);font-weight:600}.abc-inline-field-value{color:var(--abc-inline-value)}.abc-comment{color:var(--abc-comment);font-style:italic}.abc-text{color:var(--abc-ink)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
2
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),b=require("react"),le=require("abcjs"),M=e=>e.split(`
3
+ `).map((s,n)=>n+1).join(`
4
+ `),C=/^([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]:)(.*)$/,E=/[A-Ga-g]/,O=/[\^_=]/,$=/[',]/,k=/\|[:|\]]?|:?\|/,j=/[\\[\]]/,D=/[()]/,U=/^\(\d+$/,R=/^\/?\d+(\/\d+)?$/,P=/[zZx]/,I=/^\.?-$/,H=/[.~HLMOPSTuv]/,K=/^"[^"]*"$/,L=/^"[\^_<>@][^"]*"$/,W=/^![^!]+!$/,F=/^\{[^}]+\}$/,V=/^\[\d+$/,G=/^\[([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]):([^\]]*)\]$/,Q=/^[<>]+$/,z=/^%.*$/,p=e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;"),ae=(e,t)=>{const s=e[t];if(s!=="|"&&s!==":")return null;let n=s,l=t+1;for(;l<e.length&&(e[l]==="|"||e[l]===":"||e[l]==="]");)n+=e[l],l++;return k.test(n)?{html:`<span class="${n==="||"?"abc-bar-double":"abc-bar"}">${p(n)}</span>`,nextIndex:l}:null},oe=(e,t)=>{const s=e[t];return O.test(s)?{html:`<span class="abc-accidental">${p(s)}</span>`,nextIndex:t+1}:null},ce=(e,t,s)=>{const n=e[t];if(!D.test(n))return null;if(n==="("){if(t+1<e.length&&/\d/.test(e[t+1])){let l=n,r=t+1;for(;r<e.length&&/\d/.test(e[r]);)l+=e[r],r++;if(U.test(l))return{html:`<span class="abc-tuplet">${p(l)}</span>`,nextIndex:r,slurLevelDelta:0}}return{html:`<span class="abc-slur abc-slur-level-${s%5}">${p(n)}</span>`,nextIndex:t+1,slurLevelDelta:1}}else if(n===")")return{html:`<span class="abc-slur abc-slur-level-${Math.max(0,s-1)%5}">${p(n)}</span>`,nextIndex:t+1,slurLevelDelta:-1};return null},ie=(e,t)=>{const s=e[t];if(!E.test(s))return null;let n=`<span class="abc-note">${p(s)}</span>`,l=t+1,r="";for(;l<e.length&&$.test(e[l]);)r+=e[l],l++;if(r){const c=r[0]==="'"?"abc-octave-high":"abc-octave-low";n+=`<span class="${c}">${p(r)}</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)){let c="abc-duration";a.startsWith("/")?c+=" abc-duration-short":a.includes("/")?c+=" abc-duration-fraction":c+=" abc-duration-long",n+=`<span class="${c}">${p(a)}</span>`}}return{html:n,nextIndex:l}},ue=(e,t)=>{const s=e[t];return j.test(s)?{html:`<span class="abc-chord">${p(s)}</span>`,nextIndex:t+1}:null},de=(e,t)=>{const s=e[t];if(!P.test(s))return null;let l=`<span class="${s==="x"?"abc-rest-invisible":"abc-rest"}">${p(s)}</span>`,r=t+1,a="";if(r<e.length&&(e[r]==="/"||/\d/.test(e[r]))){for(e[r]==="/"&&(a+=e[r],r++);r<e.length&&/\d/.test(e[r]);)a+=e[r],r++;if(r<e.length&&e[r]==="/")for(a+=e[r],r++;r<e.length&&/\d/.test(e[r]);)a+=e[r],r++;if(a&&R.test(a)){let c="abc-duration";a.startsWith("/")?c+=" abc-duration-short":a.includes("/")?c+=" abc-duration-fraction":c+=" abc-duration-long",l+=`<span class="${c}">${p(a)}</span>`}}return{html:l,nextIndex:r}},pe=(e,t)=>{const s=e[t];return s==="."&&t+1<e.length&&e[t+1]==="-"&&I.test(".-")?{html:`<span class="abc-tie abc-tie-dotted">${p(".-")}</span>`,nextIndex:t+2}:s==="-"&&I.test(s)?{html:`<span class="abc-tie">${p(s)}</span>`,nextIndex:t+1}:null},he=(e,t)=>{const s=e[t];return!H.test(s)||s==="."&&t+1<e.length&&e[t+1]==="-"?null:{html:`<span class="abc-ornament">${p(s)}</span>`,nextIndex:t+1}},fe=(e,t)=>{if(e[t]!=='"')return null;let n=t+1;for(;n<e.length&&e[n]!=='"';)n++;if(n>=e.length)return null;const l=e.substring(t,n+1);return L.test(l)?{html:`<span class="abc-annotation">${p(l)}</span>`,nextIndex:n+1}:null},ge=(e,t)=>{if(e[t]!=='"')return null;let n=t+1;for(;n<e.length&&e[n]!=='"';)n++;if(n>=e.length)return null;const l=e.substring(t,n+1);return L.test(l)||!K.test(l)?null:{html:`<span class="abc-chord-symbol">${p(l)}</span>`,nextIndex:n+1}},me=(e,t)=>{if(e[t]!=="!")return null;let n=t+1;for(;n<e.length&&e[n]!=="!";)n++;if(n>=e.length)return null;const l=e.substring(t,n+1);return W.test(l)?{html:`<span class="abc-decoration">${p(l)}</span>`,nextIndex:n+1}:null},be=(e,t)=>{if(e[t]!=="{")return null;let n=t+1;for(;n<e.length&&e[n]!=="}";)n++;if(n>=e.length)return null;const l=e.substring(t,n+1);return F.test(l)?{html:`<span class="abc-grace-note">${p(l)}</span>`,nextIndex:n+1}:null},Ae=(e,t)=>{if(e[t]!=="[")return null;let n=t+1;for(;n<e.length&&e[n]!=="]";)n++;if(n>=e.length)return null;const r=e.substring(t,n+1).match(G);if(!r)return null;const[,a,c]=r;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(c)}</span><span class="abc-inline-field-bracket">]</span>`,nextIndex:n+1}},ve=(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 V.test(l)?{html:`<span class="abc-volta-bracket">${p(l)}</span>`,nextIndex:n}:null},Te=(e,t)=>{const s=e[t];if(s!==">"&&s!=="<")return null;let n=t+1;for(;n<e.length&&e[n]===s;)n++;const l=e.substring(t,n);return Q.test(l)?{html:`<span class="abc-broken-rhythm">${p(l)}</span>`,nextIndex:n}:null},Ne=e=>{let t="",s=0,n=0;for(;s<e.length;){const l=ae(e,s);if(l){t+=l.html,s=l.nextIndex;continue}const r=me(e,s);if(r){t+=r.html,s=r.nextIndex;continue}const a=be(e,s);if(a){t+=a.html,s=a.nextIndex;continue}const c=oe(e,s);if(c){t+=c.html,s=c.nextIndex;continue}const A=he(e,s);if(A){t+=A.html,s=A.nextIndex;continue}const f=fe(e,s);if(f){t+=f.html,s=f.nextIndex;continue}const i=ge(e,s);if(i){t+=i.html,s=i.nextIndex;continue}const o=ce(e,s,n);if(o){t+=o.html,s=o.nextIndex,o.slurLevelDelta&&(n+=o.slurLevelDelta);continue}const d=de(e,s);if(d){t+=d.html,s=d.nextIndex;continue}const h=ie(e,s);if(h){t+=h.html,s=h.nextIndex;continue}const v=Te(e,s);if(v){t+=v.html,s=v.nextIndex;continue}const g=Ae(e,s);if(g){t+=g.html,s=g.nextIndex;continue}const m=ve(e,s);if(m){t+=m.html,s=m.nextIndex;continue}const T=ue(e,s);if(T){t+=T.html,s=T.nextIndex;continue}const x=pe(e,s);if(x){t+=x.html,s=x.nextIndex;continue}t+=`<span class="abc-text">${p(e[s])}</span>`,s++}return t},y=e=>e.split(`
5
+ `).map(s=>{if(z.test(s))return`<span class="abc-comment">${p(s)}</span>`;const n=s.match(C);if(n){const[,l,r]=n;return l==="w:"||l==="W:"?`<span class="abc-lyrics-key">${p(l)}</span><span class="abc-lyrics-value">${p(r)}</span>`:`<span class="abc-meta-key">${p(l)}</span><span class="abc-meta-value">${p(r)}</span>`}return Ne(s)}).join(`
6
+ `),Y={"X:":[{value:"1",description:"Reference number 1"},{value:"2",description:"Reference number 2"}],"T:":[{value:"タイトル",description:"Japanese title template"},{value:"Untitled",description:"Default title"}],"M:":[{value:"4/4",description:"Common time"},{value:"3/4",description:"Waltz time"},{value:"2/4",description:"March time"},{value:"6/8",description:"Compound duple"},{value:"9/8",description:"Compound triple"},{value:"12/8",description:"Compound quadruple"},{value:"5/4",description:"Quintuple meter"},{value:"7/8",description:"Septuple meter"},{value:"C",description:"Common time (4/4)"},{value:"C|",description:"Cut time (2/2)"}],"L:":[{value:"1/4",description:"Quarter note"},{value:"1/8",description:"Eighth note"},{value:"1/16",description:"Sixteenth note"}],"Q:":[{value:"1/4=120",description:"Quarter note = 120 BPM"},{value:"1/4=100",description:"Quarter note = 100 BPM"},{value:"1/4=80",description:"Quarter note = 80 BPM"},{value:"1/8=180",description:"Eighth note = 180 BPM"}],"K:":[{value:"C"},{value:"G"},{value:"D"},{value:"A"},{value:"E"},{value:"B"},{value:"F#"},{value:"C#"},{value:"F"},{value:"Bb"},{value:"Eb"},{value:"Ab"},{value:"Db"},{value:"Gb"},{value:"Cb"},{value:"Am"},{value:"Em"},{value:"Bm"},{value:"F#m"},{value:"C#m"},{value:"G#m"},{value:"D#m"},{value:"Dm"},{value:"Gm"},{value:"Cm"},{value:"Fm"},{value:"Bbm"},{value:"Ebm"},{value:"Abm"}],"C:":[{value:"Traditional",description:"Traditional composer"},{value:"Unknown",description:"Unknown composer"}],"R:":[{value:"reel",description:"Reel rhythm"},{value:"jig",description:"Jig rhythm"},{value:"hornpipe",description:"Hornpipe rhythm"},{value:"waltz",description:"Waltz rhythm"},{value:"march",description:"March rhythm"}],"A:":[{value:"Ireland",description:"Area: Ireland"},{value:"Scotland",description:"Area: Scotland"},{value:"England",description:"Area: England"},{value:"USA",description:"Area: USA"},{value:"Japan",description:"Area: Japan"}],"B:":[{value:"The Session",description:"Book: The Session"},{value:"O'Neill's Music of Ireland",description:"Book: O'Neill's Music of Ireland"}],"D:":[{value:"Album Name (Year)",description:"Discography template"}],"F:":[{value:"https://thesession.org/",description:"File URL template"}],"G:":[{value:"Group name",description:"Group template"}],"H:":[{value:"History note",description:"History template"}],"I:":[{value:"abc-charset utf-8",description:"Character set: UTF-8"}],"m:":[{value:"~g2 = {a}g{f}g",description:"Macro definition template"}],"N:":[{value:"Note text",description:"Notes template"}],"O:":[{value:"Traditional",description:"Origin: Traditional"},{value:"Ireland",description:"Origin: Ireland"},{value:"Scotland",description:"Origin: Scotland"}],"P:":[{value:"AABB",description:"Parts: AABB"},{value:"ABCD",description:"Parts: ABCD"},{value:"A",description:"Part: A"},{value:"B",description:"Part: B"}],"r:":[{value:"Remark text",description:"Remark template"}],"S:":[{value:"Session tune",description:"Source: Session"},{value:"Traditional",description:"Source: Traditional"}],"s:":[{value:"Symbol line",description:"Symbol line template"}],"U:":[{value:"u = !trill!",description:"User defined: trill"}],"V:":[{value:"1",description:"Voice 1"},{value:"2",description:"Voice 2"},{value:"T",description:"Tenor voice"},{value:"B",description:"Bass voice"}],"W:":[{value:"Lyrics line",description:"Words (multi-line)"}],"w:":[{value:"Lyrics for this line",description:"Words (aligned)"}],"Z:":[{value:"Your Name",description:"Transcriber name"},{value:"ABC transcription",description:"Transcription note"}]},xe=e=>Y[e]||[],q=[{value:"/header",description:"Insert basic ABC header template",template:`X:1
7
7
  T:Untitled
8
8
  M:4/4
9
9
  L:1/4
10
10
  K:C
11
- `}],xe=e=>e.startsWith("/")?Y.filter(t=>t.value.toLowerCase().startsWith(e.toLowerCase())):[],q=({value:e,textareaRef:t,onChange:n})=>{const[r,l]=b.useState({isOpen:!1,suggestions:[],selectedIndex:0,position:{top:0,left:0},fieldKey:null,inputValue:"",isCommand:!1}),s=b.useCallback(()=>{if(!t.current)return null;const i=t.current.selectionStart,o=e.substring(0,i).split(`
12
- `),d=o[o.length-1];if(d.startsWith("/"))return{fieldKey:null,inputValue:d,line:d,lineStartPos:i-d.length,isCommand:!0};const h=d.match(N);if(h){const[,T,m]=h;return{fieldKey:T,inputValue:m,line:d,lineStartPos:i-d.length,isCommand:!1}}return null},[e,t]),a=b.useCallback(()=>{if(!t.current)return{top:0,left:0};const i=t.current,o=i.selectionStart,h=e.substring(0,o).split(`
13
- `).length-1,T=parseFloat(getComputedStyle(i).lineHeight)||24;return{top:(parseFloat(getComputedStyle(i).paddingTop)||16)+(h+1)*T-i.scrollTop,left:60}},[e,t]);b.useEffect(()=>{const i=s();if(!i){l(d=>({...d,isOpen:!1}));return}let o=[];if(i.isCommand?o=xe(i.inputValue):i.fieldKey&&(o=Te(i.fieldKey).filter(h=>h.value.toLowerCase().startsWith(i.inputValue.toLowerCase()))),o.length>0){const d=a();l({isOpen:!0,suggestions:o,selectedIndex:0,position:d,fieldKey:i.fieldKey,inputValue:i.inputValue,isCommand:i.isCommand})}else l(d=>({...d,isOpen:!1}))},[e,s,a]);const c=b.useCallback(i=>{if(!t.current)return;const o=t.current.selectionStart,d=e.substring(0,o).split(`
14
- `),h=d[d.length-1];let T,m;if(r.isCommand&&i.template){const g=e.substring(0,o-h.length),x=e.substring(o);T=g+i.template+x,m=g.length+i.template.length}else if(r.fieldKey){const g=r.fieldKey+i.value,x=e.substring(0,o-h.length),A=e.substring(o);T=x+g+A,m=x.length+g.length}else return;n(T),setTimeout(()=>{t.current&&(t.current.selectionStart=m,t.current.selectionEnd=m,t.current.focus())},0),l(g=>({...g,isOpen:!1}))},[t,r.fieldKey,r.isCommand,e,n]),v=b.useCallback(i=>{if(r.isOpen)switch(i.key){case"ArrowDown":i.preventDefault(),l(o=>({...o,selectedIndex:Math.min(o.selectedIndex+1,o.suggestions.length-1)}));break;case"ArrowUp":i.preventDefault(),l(o=>({...o,selectedIndex:Math.max(o.selectedIndex-1,0)}));break;case"Enter":r.suggestions.length>0&&(i.preventDefault(),c(r.suggestions[r.selectedIndex]));break;case"Escape":i.preventDefault(),l(o=>({...o,isOpen:!1}));break}},[r.isOpen,r.suggestions,r.selectedIndex,c]),f=b.useCallback(i=>{l(o=>({...o,selectedIndex:i}))},[]);return{isOpen:r.isOpen,suggestions:r.suggestions,selectedIndex:r.selectedIndex,position:r.position,handleKeyDown:v,selectSuggestion:c,handleMouseEnter:f}},J=({suggestions:e,selectedIndex:t,position:n,onSelect:r,onMouseEnter:l})=>{const s=b.useRef(null);return b.useEffect(()=>{s.current?.scrollIntoView({block:"nearest",behavior:"smooth"})},[t]),e.length===0?null:u.jsx("div",{className:"absolute z-50 bg-slate-800 border border-slate-600 rounded-md shadow-lg overflow-hidden",style:{top:`${n.top}px`,left:`${n.left}px`,minWidth:"200px",maxWidth:"400px",maxHeight:"300px",overflowY:"auto"},children:e.map((a,c)=>u.jsxs("div",{ref:c===t?s:null,className:`px-3 py-2 cursor-pointer ${c===t?"bg-blue-600 text-white":"text-slate-200 hover:bg-slate-700"}`,onClick:()=>r(a),onMouseEnter:()=>l(c),children:[u.jsx("div",{className:"font-mono text-sm",children:a.value}),a.description&&u.jsx("div",{className:"text-xs opacity-75 mt-1",children:a.description})]},`${a.value}-${c}`))})},Ne=e=>{const t=e.trim();if(t==="C")return{beatsPerMeasure:4,beatUnit:4};if(t==="C|")return{beatsPerMeasure:2,beatUnit:2};const n=t.match(/^(\d+)\/(\d+)$/);return n?{beatsPerMeasure:parseInt(n[1],10),beatUnit:parseInt(n[2],10)}:{beatsPerMeasure:4,beatUnit:4}},Ce=e=>{const n=e.trim().match(/^(\d+)\/(\d+)$/);return n?parseInt(n[1],10)/parseInt(n[2],10):1/8},Ee=e=>{const t=e.split(`
15
- `);let n={beatsPerMeasure:4,beatUnit:4},r=1/8;for(const l of t){const s=l.match(N);if(s){const[,a,c]=s;a==="M:"?n=Ne(c):a==="L:"&&(r=Ce(c))}}return{meter:n,unitNoteLength:r}},w=e=>{if(!e)return 1;if(e.startsWith("/"))return 1/parseInt(e.substring(1),10);if(e.includes("/")){const[t,n]=e.split("/");return parseInt(t,10)/parseInt(n,10)}return parseInt(e,10)},_e=(e,t)=>{let n=0,r=0;for(;r<e.length;){const l=e[r];if(C.test(l)||y.test(l)){let s=r+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;for(e[s]==="/"&&s++;s<e.length&&/\d/.test(e[s]);)s++;if(s<e.length&&e[s]==="/")for(s++;s<e.length&&/\d/.test(e[s]);)s++;a=e.substring(o,s)}const c=w(a),v=t.unitNoteLength*c,f=1/t.meter.beatUnit,i=v/f;n+=i,r=s}else if(l==="["){let s=r+1;for(;s<e.length&&e[s]!=="]";){const a=e[s];if(C.test(a)){let c=s+1;for(;c<e.length&&(e[c]==="'"||e[c]===",");)c++;s=c}else s++}if(s<e.length&&e[s]==="]"){s++;let a="";if(s<e.length&&(e[s]==="/"||/\d/.test(e[s]))){const o=s;for(e[s]==="/"&&s++;s<e.length&&/\d/.test(e[s]);)s++;if(s<e.length&&e[s]==="/")for(s++;s<e.length&&/\d/.test(e[s]);)s++;a=e.substring(o,s)}const c=w(a),v=t.unitNoteLength*c,f=1/t.meter.beatUnit,i=v/f;n+=i}r=s}else r++}return n},X=e=>{const t=[],n=e.split(`
16
- `),r=Ee(e);return n.forEach((l,s)=>{if(!(l.trim().startsWith("%")||N.test(l))&&l.includes("|")){let a=0;const c=l.split("|");let v=0;c.forEach((f,i)=>{if(i===c.length-1&&f.trim()==="")return;const o=f.trim();if(o.startsWith(":")||o.startsWith("[")||o===""){a+=f.length+1;return}const d=_e(o,r),h=r.meter.beatsPerMeasure;if(Math.abs(d-h)>.01){const m=l.indexOf(o,a),g=m+o.length;t.push({line:s,measureIndex:v,startCol:m,endCol:g,expected:h,actual:d,message:`Expected ${h} beats, got ${d.toFixed(2)}`})}v++,a+=f.length+1})}}),t},Be=({value:e,onChange:t})=>{const n=b.useRef(null),r=b.useRef(null),l=b.useRef(null),[s,a]=b.useState(null),c=L(e),v=I(e),f=b.useMemo(()=>X(e),[e]),{isOpen:i,suggestions:o,selectedIndex:d,position:h,handleKeyDown:T,selectSuggestion:m,handleMouseEnter:g}=q({value:e,textareaRef:n,onChange:t}),x=()=>{n.current&&r.current&&l.current&&(r.current.scrollTop=n.current.scrollTop,l.current.scrollTop=n.current.scrollTop)};return u.jsx("div",{className:"w-full h-full flex flex-col p-4",style:{backgroundColor:"#161616"},children:u.jsxs("div",{className:"w-full flex-1 flex flex-col rounded-lg border border-slate-600 overflow-hidden",style:{backgroundColor:"#1a1a1a"},children:[u.jsxs("div",{className:"flex-1 flex overflow-hidden",children:[u.jsx("div",{ref:r,className:"overflow-hidden text-right text-sm font-mono leading-relaxed text-slate-500 select-none",style:{backgroundColor:"#0f0f0f",minWidth:"2.5rem"},children:u.jsx("pre",{className:"m-0 pl-1 pr-3 py-4",children:c})}),u.jsxs("div",{className:"flex-1 relative",children:[u.jsx("div",{ref:l,className:"absolute inset-0 overflow-hidden px-4 py-4 text-sm font-mono leading-relaxed pointer-events-none",style:{backgroundColor:"#1a1a1a",opacity:s?.3:1,transition:"opacity 0.2s"},children:u.jsx("pre",{className:"m-0",dangerouslySetInnerHTML:{__html:v}})}),s&&(()=>{const A=e.split(`
17
- `),Z=(A[s.line]||"").substring(s.startCol,s.endCol),ee=I(Z);return u.jsx("div",{className:"absolute inset-0 overflow-hidden px-4 py-4 text-sm font-mono leading-relaxed pointer-events-none",style:{backgroundColor:"transparent"},children:u.jsx("pre",{className:"m-0",children:A.map((E,_)=>{if(_===s.line){const te=E.substring(0,s.startCol),se=E.substring(s.endCol);return u.jsxs("div",{children:[u.jsx("span",{style:{opacity:0},children:te}),u.jsx("span",{className:"bg-amber-500/20 px-1 rounded",dangerouslySetInnerHTML:{__html:ee}}),u.jsx("span",{style:{opacity:0},children:se})]},_)}return u.jsx("div",{style:{opacity:0},children:E},_)})})})})(),u.jsx("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:"#fff"},value:e,onChange:A=>t(A.target.value),onScroll:x,onKeyDown:T,spellCheck:!1,placeholder:"Type /header to insert template..."}),i&&u.jsx(J,{suggestions:o,selectedIndex:d,position:h,onSelect:m,onMouseEnter:g})]})]}),f.length>0&&u.jsxs("div",{className:"border-t border-slate-600 px-4 py-3 text-xs font-mono overflow-auto",style:{backgroundColor:"#0f0f0f",maxHeight:"8rem"},children:[u.jsxs("div",{className:"text-slate-500 mb-2 text-[10px] uppercase tracking-wide",children:["Validation Errors (",f.length,")"]}),f.map((A,S)=>u.jsxs("div",{className:"flex items-start gap-3 mb-2 last:mb-0 hover:bg-slate-800/30 px-2 py-1 rounded transition-colors cursor-pointer",onMouseEnter:()=>a(A),onMouseLeave:()=>a(null),children:[u.jsx("span",{className:"text-amber-500 shrink-0 mt-0.5",children:"⚠️"}),u.jsxs("div",{className:"flex-1 flex gap-2",children:[u.jsxs("span",{className:"text-cyan-400 shrink-0",children:["Ln ",A.line+1,", M",A.measureIndex+1,":"]}),u.jsx("span",{className:"text-amber-300",children:A.message})]})]},S))]})]})})},Ie=({value:e})=>{const t=b.useRef(null);return b.useEffect(()=>{t.current&&ne.renderAbc(t.current,e,{responsive:"resize",foregroundColor:"#ffffff",format:{titlefont:"serif 20"}})},[e]),u.jsx("div",{ref:t,className:"w-full abc-preview"})};exports.ABC_ACCIDENTAL_PATTERN=O;exports.ABC_ANNOTATION_PATTERN=P;exports.ABC_BAR_PATTERN=$;exports.ABC_BROKEN_RHYTHM_PATTERN=G;exports.ABC_CHORD_BRACKET_PATTERN=k;exports.ABC_CHORD_SYMBOL_PATTERN=H;exports.ABC_COMMANDS=Y;exports.ABC_COMMENT_PATTERN=Q;exports.ABC_DECORATION_PATTERN=K;exports.ABC_DURATION_PATTERN=R;exports.ABC_FIELD_PATTERN=N;exports.ABC_GRACE_NOTE_PATTERN=W;exports.ABC_INLINE_FIELD_PATTERN=V;exports.ABC_NOTE_PATTERN=C;exports.ABC_OCTAVE_PATTERN=M;exports.ABC_ORNAMENT_PATTERN=U;exports.ABC_REST_PATTERN=y;exports.ABC_SLUR_PATTERN=j;exports.ABC_SUGGESTIONS=z;exports.ABC_TIE_PATTERN=B;exports.ABC_TUPLET_PATTERN=D;exports.ABC_VOLTA_BRACKET_PATTERN=F;exports.AbcEditor=Be;exports.AbcPreview=Ie;exports.SuggestionList=J;exports.highlightAbc=I;exports.useAbcAutoComplete=q;exports.useLineNumbers=L;exports.validateAbc=X;
11
+ `}],Ce=e=>e.startsWith("/")?q.filter(t=>t.value.toLowerCase().startsWith(e.toLowerCase())):[],J=({value:e,textareaRef:t,onChange:s})=>{const[n,l]=b.useState({isOpen:!1,suggestions:[],selectedIndex:0,position:{top:0,left:0},fieldKey:null,inputValue:"",isCommand:!1}),r=b.useCallback(()=>{if(!t.current)return null;const i=t.current.selectionStart,o=e.substring(0,i).split(`
12
+ `),d=o[o.length-1];if(d.startsWith("/"))return{fieldKey:null,inputValue:d,line:d,lineStartPos:i-d.length,isCommand:!0};const h=d.match(C);if(h){const[,v,g]=h;return{fieldKey:v,inputValue:g,line:d,lineStartPos:i-d.length,isCommand:!1}}return null},[e,t]),a=b.useCallback(()=>{if(!t.current)return{top:0,left:0};const i=t.current,o=i.selectionStart,h=e.substring(0,o).split(`
13
+ `).length-1,v=parseFloat(getComputedStyle(i).lineHeight)||24;return{top:(parseFloat(getComputedStyle(i).paddingTop)||16)+(h+1)*v-i.scrollTop,left:60}},[e,t]);b.useEffect(()=>{const i=r();if(!i){l(d=>({...d,isOpen:!1}));return}let o=[];if(i.isCommand?o=Ce(i.inputValue):i.fieldKey&&(o=xe(i.fieldKey).filter(h=>h.value.toLowerCase().startsWith(i.inputValue.toLowerCase()))),o.length>0){const d=a();l({isOpen:!0,suggestions:o,selectedIndex:0,position:d,fieldKey:i.fieldKey,inputValue:i.inputValue,isCommand:i.isCommand})}else l(d=>({...d,isOpen:!1}))},[e,r,a]);const c=b.useCallback(i=>{if(!t.current)return;const o=t.current.selectionStart,d=e.substring(0,o).split(`
14
+ `),h=d[d.length-1];let v,g;if(n.isCommand&&i.template){const m=e.substring(0,o-h.length),T=e.substring(o);v=m+i.template+T,g=m.length+i.template.length}else if(n.fieldKey){const m=n.fieldKey+i.value,T=e.substring(0,o-h.length),x=e.substring(o);v=T+m+x,g=T.length+m.length}else return;s(v),setTimeout(()=>{t.current&&(t.current.selectionStart=g,t.current.selectionEnd=g,t.current.focus())},0),l(m=>({...m,isOpen:!1}))},[t,n.fieldKey,n.isCommand,e,s]),A=b.useCallback(i=>{if(n.isOpen)switch(i.key){case"ArrowDown":i.preventDefault(),l(o=>({...o,selectedIndex:Math.min(o.selectedIndex+1,o.suggestions.length-1)}));break;case"ArrowUp":i.preventDefault(),l(o=>({...o,selectedIndex:Math.max(o.selectedIndex-1,0)}));break;case"Enter":n.suggestions.length>0&&(i.preventDefault(),c(n.suggestions[n.selectedIndex]));break;case"Escape":i.preventDefault(),l(o=>({...o,isOpen:!1}));break}},[n.isOpen,n.suggestions,n.selectedIndex,c]),f=b.useCallback(i=>{l(o=>({...o,selectedIndex:i}))},[]);return{isOpen:n.isOpen,suggestions:n.suggestions,selectedIndex:n.selectedIndex,position:n.position,handleKeyDown:A,selectSuggestion:c,handleMouseEnter:f}},X=({suggestions:e,selectedIndex:t,position:s,onSelect:n,onMouseEnter:l})=>{const r=b.useRef(null);return b.useEffect(()=>{r.current?.scrollIntoView({block:"nearest",behavior:"smooth"})},[t]),e.length===0?null:u.jsx("div",{className:"absolute z-50 bg-slate-800 border border-slate-600 rounded-md shadow-lg overflow-hidden",style:{top:`${s.top}px`,left:`${s.left}px`,minWidth:"200px",maxWidth:"400px",maxHeight:"300px",overflowY:"auto"},children:e.map((a,c)=>u.jsxs("div",{ref:c===t?r:null,className:`px-3 py-2 cursor-pointer ${c===t?"bg-blue-600 text-white":"text-slate-200 hover:bg-slate-700"}`,onClick:()=>n(a),onMouseEnter:()=>l(c),children:[u.jsx("div",{className:"font-mono text-sm",children:a.value}),a.description&&u.jsx("div",{className:"text-xs opacity-75 mt-1",children:a.description})]},`${a.value}-${c}`))})},Ee=e=>{const t=e.trim();if(t==="C")return{beatsPerMeasure:4,beatUnit:4};if(t==="C|")return{beatsPerMeasure:2,beatUnit:2};const s=t.match(/^(\d+)\/(\d+)$/);return s?{beatsPerMeasure:parseInt(s[1],10),beatUnit:parseInt(s[2],10)}:{beatsPerMeasure:4,beatUnit:4}},_e=e=>{const s=e.trim().match(/^(\d+)\/(\d+)$/);return s?parseInt(s[1],10)/parseInt(s[2],10):1/8},Be=e=>{const t=e.split(`
15
+ `);let s={beatsPerMeasure:4,beatUnit:4},n=1/8;for(const l of t){const r=l.match(C);if(r){const[,a,c]=r;a==="M:"?s=Ee(c):a==="L:"&&(n=_e(c))}}return{meter:s,unitNoteLength:n}},w=e=>{if(!e)return 1;if(e.startsWith("/"))return 1/parseInt(e.substring(1),10);if(e.includes("/")){const[t,s]=e.split("/");return parseInt(t,10)/parseInt(s,10)}return parseInt(e,10)},Ie=(e,t)=>{let s=0,n=0;for(;n<e.length;){const l=e[n];if(E.test(l)||P.test(l)){let r=n+1;for(;r<e.length&&(e[r]==="'"||e[r]===",");)r++;let a="";if(r<e.length&&(e[r]==="/"||/\d/.test(e[r]))){const o=r;for(e[r]==="/"&&r++;r<e.length&&/\d/.test(e[r]);)r++;if(r<e.length&&e[r]==="/")for(r++;r<e.length&&/\d/.test(e[r]);)r++;a=e.substring(o,r)}const c=w(a),A=t.unitNoteLength*c,f=1/t.meter.beatUnit,i=A/f;s+=i,n=r}else if(l==="["){let r=n+1;for(;r<e.length&&e[r]!=="]";){const a=e[r];if(E.test(a)){let c=r+1;for(;c<e.length&&(e[c]==="'"||e[c]===",");)c++;r=c}else r++}if(r<e.length&&e[r]==="]"){r++;let a="";if(r<e.length&&(e[r]==="/"||/\d/.test(e[r]))){const o=r;for(e[r]==="/"&&r++;r<e.length&&/\d/.test(e[r]);)r++;if(r<e.length&&e[r]==="/")for(r++;r<e.length&&/\d/.test(e[r]);)r++;a=e.substring(o,r)}const c=w(a),A=t.unitNoteLength*c,f=1/t.meter.beatUnit,i=A/f;s+=i}n=r}else n++}return s},Z=e=>{const t=[],s=e.split(`
16
+ `),n=Be(e);return s.forEach((l,r)=>{if(!(l.trim().startsWith("%")||C.test(l))&&l.includes("|")){let a=0;const c=l.split("|");let A=0;c.forEach((f,i)=>{if(i===c.length-1&&f.trim()==="")return;const o=f.trim();if(o.startsWith(":")||o.startsWith("[")||o===""){a+=f.length+1;return}const d=Ie(o,n),h=n.meter.beatsPerMeasure;if(Math.abs(d-h)>.01){const g=l.indexOf(o,a),m=g+o.length;t.push({line:r,measureIndex:A,startCol:g,endCol:m,expected:h,actual:d,message:`Expected ${h} beats, got ${d.toFixed(2)}`})}A++,a+=f.length+1})}}),t},ye=({value:e,onChange:t,theme:s="light"})=>{const n=b.useRef(null),l=b.useRef(null),r=b.useRef(null),[a,c]=b.useState(null),A=M(e),f=y(e),i=b.useMemo(()=>Z(e),[e]),o=s==="dark"?{bg:"#161616",editorBg:"#1a1a1a",lineNumBg:"#0f0f0f",caretColor:"#fff",errorHeader:"#94a3b8",errorIcon:"#f59e0b",errorLocation:"#22d3ee",errorMessage:"#fcd34d",errorHighlight:"rgba(245, 158, 11, 0.2)"}:{bg:"#f5f5f5",editorBg:"#ffffff",lineNumBg:"#eeeeee",caretColor:"#000",errorHeader:"#64748b",errorIcon:"#d97706",errorLocation:"#0891b2",errorMessage:"#b45309",errorHighlight:"#fde047"},{isOpen:d,suggestions:h,selectedIndex:v,position:g,handleKeyDown:m,selectSuggestion:T,handleMouseEnter:x}=J({value:e,textareaRef:n,onChange:t}),ee=()=>{n.current&&l.current&&r.current&&(l.current.scrollTop=n.current.scrollTop,r.current.scrollTop=n.current.scrollTop)};return u.jsx("div",{className:"w-full h-full flex flex-col p-4","data-theme":s,style:{backgroundColor:o.bg},children:u.jsxs("div",{className:"w-full flex-1 flex flex-col rounded-lg border border-slate-600 overflow-hidden",style:{backgroundColor:o.editorBg},children:[u.jsxs("div",{className:"flex-1 flex overflow-hidden",children:[u.jsx("div",{ref:l,className:"overflow-hidden text-right text-sm font-mono leading-relaxed text-slate-500 select-none",style:{backgroundColor:o.lineNumBg,minWidth:"2.5rem"},children:u.jsx("pre",{className:"m-0 pl-1 pr-3 py-4",children:A})}),u.jsxs("div",{className:"flex-1 relative",children:[u.jsx("div",{ref:r,className:"absolute inset-0 overflow-hidden px-4 py-4 text-sm font-mono leading-relaxed pointer-events-none",style:{backgroundColor:o.editorBg,opacity:a?.3:1,transition:"opacity 0.2s"},children:u.jsx("pre",{className:"m-0",dangerouslySetInnerHTML:{__html:f}})}),a&&(()=>{const N=e.split(`
17
+ `),te=(N[a.line]||"").substring(a.startCol,a.endCol),se=y(te);return u.jsx("div",{className:"absolute inset-0 overflow-hidden px-4 py-4 text-sm font-mono leading-relaxed pointer-events-none",style:{backgroundColor:"transparent"},children:u.jsx("pre",{className:"m-0",children:N.map((_,B)=>{if(B===a.line){const ne=_.substring(0,a.startCol),re=_.substring(a.endCol);return u.jsxs("div",{children:[u.jsx("span",{style:{opacity:0},children:ne}),u.jsx("span",{className:"px-1 rounded",style:{backgroundColor:o.errorHighlight},dangerouslySetInnerHTML:{__html:se}}),u.jsx("span",{style:{opacity:0},children:re})]},B)}return u.jsx("div",{style:{opacity:0},children:_},B)})})})})(),u.jsx("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},value:e,onChange:N=>t(N.target.value),onScroll:ee,onKeyDown:m,spellCheck:!1,placeholder:"Type /header to insert template..."}),d&&u.jsx(X,{suggestions:h,selectedIndex:v,position:g,onSelect:T,onMouseEnter:x})]})]}),i.length>0&&u.jsxs("div",{className:"border-t border-slate-600 px-4 py-3 text-xs font-mono overflow-auto",style:{backgroundColor:o.lineNumBg,maxHeight:"8rem"},children:[u.jsxs("div",{className:"mb-2 text-[10px] uppercase tracking-wide",style:{color:o.errorHeader},children:["Validation Errors (",i.length,")"]}),i.map((N,S)=>u.jsxs("div",{className:"flex items-start gap-3 mb-2 last:mb-0 px-2 py-1 rounded transition-colors cursor-pointer",style:{backgroundColor:a===N?s==="dark"?"rgba(51, 65, 85, 0.3)":"rgba(226, 232, 240, 0.6)":"transparent"},onMouseEnter:()=>c(N),onMouseLeave:()=>c(null),children:[u.jsx("span",{className:"shrink-0 mt-0.5",style:{color:o.errorIcon},children:"⚠️"}),u.jsxs("div",{className:"flex-1 flex gap-2",children:[u.jsxs("span",{className:"shrink-0",style:{color:o.errorLocation},children:["Ln ",N.line+1,", M",N.measureIndex+1,":"]}),u.jsx("span",{style:{color:o.errorMessage},children:N.message})]})]},S))]})]})})},Re=({value:e,theme:t="light"})=>{const s=b.useRef(null);return b.useEffect(()=>{s.current&&le.renderAbc(s.current,e,{responsive:"resize",foregroundColor:t==="dark"?"#ffffff":"#000000",format:{titlefont:"serif 20"}})},[e,t]),u.jsx("div",{ref:s,className:"w-full abc-preview","data-theme":t})};exports.ABC_ACCIDENTAL_PATTERN=O;exports.ABC_ANNOTATION_PATTERN=L;exports.ABC_BAR_PATTERN=k;exports.ABC_BROKEN_RHYTHM_PATTERN=Q;exports.ABC_CHORD_BRACKET_PATTERN=j;exports.ABC_CHORD_SYMBOL_PATTERN=K;exports.ABC_COMMANDS=q;exports.ABC_COMMENT_PATTERN=z;exports.ABC_DECORATION_PATTERN=W;exports.ABC_DURATION_PATTERN=R;exports.ABC_FIELD_PATTERN=C;exports.ABC_GRACE_NOTE_PATTERN=F;exports.ABC_INLINE_FIELD_PATTERN=G;exports.ABC_NOTE_PATTERN=E;exports.ABC_OCTAVE_PATTERN=$;exports.ABC_ORNAMENT_PATTERN=H;exports.ABC_REST_PATTERN=P;exports.ABC_SLUR_PATTERN=D;exports.ABC_SUGGESTIONS=Y;exports.ABC_TIE_PATTERN=I;exports.ABC_TUPLET_PATTERN=U;exports.ABC_VOLTA_BRACKET_PATTERN=V;exports.AbcEditor=ye;exports.AbcPreview=Re;exports.SuggestionList=X;exports.highlightAbc=y;exports.useAbcAutoComplete=J;exports.useLineNumbers=M;exports.validateAbc=Z;