@ovnonvo/abc-editor 0.2.2 → 0.3.0
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 +33 -18
- package/dist/abc-editor.cjs.js +15 -13
- package/dist/abc-editor.es.js +562 -447
- package/dist/lib/index.d.ts +0 -1
- package/dist/lib/index.d.ts.map +1 -1
- package/dist/src/components/AbcEditor.d.ts.map +1 -1
- package/package.json +1 -3
package/README.md
CHANGED
|
@@ -24,9 +24,6 @@ A React component for editing ABC music notation with syntax highlighting, autoc
|
|
|
24
24
|
- **Error Highlighting**: Hover over validation errors to highlight the problematic measure
|
|
25
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
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
|
-
|
|
30
27
|
|
|
31
28
|
## Installation
|
|
32
29
|
|
|
@@ -47,15 +44,14 @@ This package requires the following peer dependencies:
|
|
|
47
44
|
```json
|
|
48
45
|
{
|
|
49
46
|
"react": "^18.0.0 || ^19.0.0",
|
|
50
|
-
"react-dom": "^18.0.0 || ^19.0.0"
|
|
51
|
-
"abcjs": "^6.0.0"
|
|
47
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
52
48
|
}
|
|
53
49
|
```
|
|
54
50
|
|
|
55
51
|
Install them if you haven't already:
|
|
56
52
|
|
|
57
53
|
```bash
|
|
58
|
-
npm install react react-dom
|
|
54
|
+
npm install react react-dom
|
|
59
55
|
```
|
|
60
56
|
|
|
61
57
|
## Usage
|
|
@@ -64,7 +60,7 @@ npm install react react-dom abcjs
|
|
|
64
60
|
|
|
65
61
|
```tsx
|
|
66
62
|
import { useState } from 'react';
|
|
67
|
-
import { AbcEditor
|
|
63
|
+
import { AbcEditor } from '@ovnonvo/abc-editor';
|
|
68
64
|
|
|
69
65
|
function App() {
|
|
70
66
|
const [abcCode, setAbcCode] = useState(`X:1
|
|
@@ -74,9 +70,8 @@ K:C
|
|
|
74
70
|
C D E F | G A B c |`);
|
|
75
71
|
|
|
76
72
|
return (
|
|
77
|
-
<div style={{
|
|
73
|
+
<div style={{ height: '100vh' }}>
|
|
78
74
|
<AbcEditor value={abcCode} onChange={setAbcCode} />
|
|
79
|
-
<AbcPreview value={abcCode} />
|
|
80
75
|
</div>
|
|
81
76
|
);
|
|
82
77
|
}
|
|
@@ -90,7 +85,7 @@ export default App;
|
|
|
90
85
|
|
|
91
86
|
```tsx
|
|
92
87
|
import { useState } from 'react';
|
|
93
|
-
import { AbcEditor,
|
|
88
|
+
import { AbcEditor, type Theme } from '@ovnonvo/abc-editor';
|
|
94
89
|
|
|
95
90
|
function App() {
|
|
96
91
|
const [abcCode, setAbcCode] = useState(`X:1
|
|
@@ -105,9 +100,8 @@ C D E F | G A B c |`);
|
|
|
105
100
|
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
|
|
106
101
|
Toggle Theme
|
|
107
102
|
</button>
|
|
108
|
-
<div style={{
|
|
103
|
+
<div style={{ height: '100vh' }}>
|
|
109
104
|
<AbcEditor value={abcCode} onChange={setAbcCode} theme={theme} />
|
|
110
|
-
<AbcPreview value={abcCode} theme={theme} />
|
|
111
105
|
</div>
|
|
112
106
|
</div>
|
|
113
107
|
);
|
|
@@ -135,13 +129,35 @@ The main editor component with syntax highlighting and validation.
|
|
|
135
129
|
- Error display with hover highlighting
|
|
136
130
|
- Light and dark mode
|
|
137
131
|
|
|
138
|
-
|
|
132
|
+
### Adding Preview Functionality
|
|
139
133
|
|
|
140
|
-
|
|
134
|
+
This package focuses on the editor functionality. For music notation preview, you can integrate a rendering library like `abcjs`:
|
|
141
135
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
136
|
+
```tsx
|
|
137
|
+
import { useEffect, useRef } from 'react';
|
|
138
|
+
import abcjs from 'abcjs';
|
|
139
|
+
|
|
140
|
+
function AbcPreview({ value, theme = 'light' }) {
|
|
141
|
+
const ref = useRef<HTMLDivElement>(null);
|
|
142
|
+
|
|
143
|
+
useEffect(() => {
|
|
144
|
+
if (ref.current) {
|
|
145
|
+
abcjs.renderAbc(ref.current, value, {
|
|
146
|
+
responsive: 'resize',
|
|
147
|
+
foregroundColor: theme === 'dark' ? '#ffffff' : '#000000',
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
}, [value, theme]);
|
|
151
|
+
|
|
152
|
+
return <div ref={ref} />;
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
Install abcjs separately:
|
|
157
|
+
|
|
158
|
+
```bash
|
|
159
|
+
npm install abcjs
|
|
160
|
+
```
|
|
145
161
|
|
|
146
162
|
### Autocomplete
|
|
147
163
|
|
|
@@ -287,6 +303,5 @@ Contributions are welcome! Please open an issue or submit a pull request.
|
|
|
287
303
|
|
|
288
304
|
Built with:
|
|
289
305
|
- [React](https://reactjs.org/)
|
|
290
|
-
- [abcjs](https://www.abcjs.net/)
|
|
291
306
|
- [Vite](https://vitejs.dev/)
|
|
292
307
|
- [Tailwind CSS](https://tailwindcss.com/)
|
package/dist/abc-editor.cjs.js
CHANGED
|
@@ -1,17 +1,19 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode('@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-600:oklch(54.6% .245 262.881);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-950:oklch(12.9% .042 264.695);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--font-weight-medium:500;--tracking-wide:.025em;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1)}}@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.z-50{z-index:50}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing)*0)}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.block{display:block}.flex{display:flex}.inline{display:inline}.table{display:table}.h-1\\/3{height:33.3333%}.h-2\\/3{height:66.6667%}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-start{align-items:flex-start}.justify-end{justify-content:flex-end}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.bg-blue-600{background-color:var(--color-blue-600)}.bg-slate-800{background-color:var(--color-slate-800)}.bg-slate-950{background-color:var(--color-slate-950)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.pr-3{padding-right:calc(var(--spacing)*3)}.pl-1{padding-left:calc(var(--spacing)*1)}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[10px\\]{font-size:10px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-slate-200{color:var(--color-slate-200)}.text-slate-500{color:var(--color-slate-500)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\\[foo\\:bar\\]{foo:bar}.last\\:mb-0:last-child{margin-bottom:calc(var(--spacing)*0)}@media(hover:hover){.hover\\:bg-slate-700:hover{background-color:var(--color-slate-700)}}@media(min-width:48rem){.md\\:h-full{height:100%}.md\\:w-1\\/2{width:50%}.md\\:flex-row{flex-direction:row}}}*{box-sizing:border-box}body{margin:0;padding:0}:root{--abc-ink:#1a1a1a;--abc-key:#06c;--abc-value:#996300;--abc-lyrics-key:#c06;--abc-lyrics-value:#b30059;--abc-note:#000;--abc-octave-high:#00994d;--abc-octave-low:#60c;--abc-rest:#666;--abc-rest-muted:#999;--abc-accidental:#b35900;--abc-duration-long:#cc5200;--abc-duration-short:#09c;--abc-duration-fraction:#c90;--abc-broken:#00b359;--abc-bar:#0080cc;--abc-bar-double:#06c;--abc-chord:#c09;--abc-slur-0:#cc004d;--abc-slur-1:#cc8000;--abc-slur-2:#0080cc;--abc-slur-3:#00b359;--abc-slur-4:#70c;--abc-tuplet:#00b359;--abc-tie:#c06;--abc-tie-dotted:#cc0080;--abc-ornament:#56c;--abc-chord-symbol:#00997a;--abc-annotation:#c80;--abc-decoration:#86c;--abc-grace:#66b300;--abc-volta:#c60;--abc-inline-bracket:#666;--abc-inline-key:#06c;--abc-inline-value:#960;--abc-comment:#999}[data-theme=dark]{--abc-ink:#e8f1ff;--abc-key:#7ad7ff;--abc-value:#ffd48a;--abc-lyrics-key:#ff7ba1;--abc-lyrics-value:#ffc8d8;--abc-note:#f8fbff;--abc-octave-high:#73f8c4;--abc-octave-low:#c7b3ff;--abc-rest:#8ca3b8;--abc-rest-muted:#596779;--abc-accidental:#f2c079;--abc-duration-long:#ffa25f;--abc-duration-short:#6edff6;--abc-duration-fraction:#ffe38f;--abc-broken:#7be495;--abc-bar:#79cfff;--abc-bar-double:#4aafff;--abc-chord:#ff8ccf;--abc-slur-0:#ff92b2;--abc-slur-1:#ffd77a;--abc-slur-2:#7ed4ff;--abc-slur-3:#92f3c6;--abc-slur-4:#c6a9ff;--abc-tuplet:#82f0a2;--abc-tie:#f07fb3;--abc-tie-dotted:#ff9ecf;--abc-ornament:#9fb0ff;--abc-chord-symbol:#63f5d3;--abc-annotation:#ffd88a;--abc-decoration:#d1a6ff;--abc-grace:#a4f28f;--abc-volta:#f9a15a;--abc-inline-bracket:#8ca7c0;--abc-inline-key:#7ad7ff;--abc-inline-value:#ffdcb2;--abc-comment:#7b8797}.abc-preview svg text{fill:#000!important}.abc-preview[data-theme=dark] svg text{fill:#fff!important}textarea::placeholder{color:#999;opacity:1}[data-theme=dark] textarea::placeholder{color:#64748b}.abc-meta-key{color:var(--abc-key);font-weight:600}.abc-meta-value{color:var(--abc-value)}.abc-lyrics-key{color:var(--abc-lyrics-key);font-weight:600}.abc-lyrics-value{color:var(--abc-lyrics-value)}.abc-note{color:var(--abc-note)}.abc-octave-high{color:var(--abc-octave-high);font-weight:600}.abc-octave-low{color:var(--abc-octave-low);font-weight:600}.abc-rest{color:var(--abc-rest)}.abc-rest-invisible{color:var(--abc-rest-muted);opacity:.5}.abc-accidental{color:var(--abc-accidental)}.abc-duration{font-weight:600}.abc-duration-long{color:var(--abc-duration-long)}.abc-duration-short{color:var(--abc-duration-short)}.abc-duration-fraction{color:var(--abc-duration-fraction)}.abc-broken-rhythm{color:var(--abc-broken);font-weight:700}.abc-bar{color:var(--abc-bar);font-weight:600}.abc-bar-double{color:var(--abc-bar-double);font-weight:900}.abc-chord{color:var(--abc-chord)}.abc-slur{font-weight:700}.abc-slur-level-0{color:var(--abc-slur-0)}.abc-slur-level-1{color:var(--abc-slur-1)}.abc-slur-level-2{color:var(--abc-slur-2)}.abc-slur-level-3{color:var(--abc-slur-3)}.abc-slur-level-4{color:var(--abc-slur-4)}.abc-tuplet{color:var(--abc-tuplet);font-weight:700}.abc-tie{color:var(--abc-tie);font-weight:600}.abc-tie-dotted{color:var(--abc-tie-dotted)}.abc-ornament{color:var(--abc-ornament);font-weight:700}.abc-chord-symbol{color:var(--abc-chord-symbol);font-weight:700}.abc-annotation{color:var(--abc-annotation);font-style:italic;font-weight:600}.abc-decoration{color:var(--abc-decoration);font-weight:700}.abc-grace-note{color:var(--abc-grace);font-weight:600}.abc-volta-bracket{color:var(--abc-volta);font-weight:700}.abc-inline-field-bracket{color:var(--abc-inline-bracket)}.abc-inline-field-key{color:var(--abc-inline-key);font-weight:600}.abc-inline-field-value{color:var(--abc-inline-value)}.abc-comment{color:var(--abc-comment);font-style:italic}.abc-text{color:var(--abc-ink)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}')),document.head.appendChild(a)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),
|
|
3
|
-
`).map((s
|
|
4
|
-
`),C=/^([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]:)(.*)$/,
|
|
5
|
-
`).map(
|
|
6
|
-
`),
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode('@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-ease:initial}}}@layer theme{:root,:host{--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-600:oklch(54.6% .245 262.881);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-950:oklch(12.9% .042 264.695);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1)}}@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.z-50{z-index:50}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing)*0)}.mt-0\\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.block{display:block}.flex{display:flex}.inline{display:inline}.table{display:table}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.bg-blue-600{background-color:var(--color-blue-600)}.bg-slate-800{background-color:var(--color-slate-800)}.bg-slate-950{background-color:var(--color-slate-950)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-0\\.5{padding-block:calc(var(--spacing)*.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.pr-3{padding-right:calc(var(--spacing)*3)}.pl-1{padding-left:calc(var(--spacing)*1)}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-slate-200{color:var(--color-slate-200)}.text-slate-500{color:var(--color-slate-500)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\\[foo\\:bar\\]{foo:bar}@media(hover:hover){.hover\\:bg-slate-700:hover{background-color:var(--color-slate-700)}}}*{box-sizing:border-box}body{margin:0;padding:0}:root{--abc-ink:#1a1a1a;--abc-key:#06c;--abc-value:#996300;--abc-lyrics-key:#c06;--abc-lyrics-value:#b30059;--abc-note:#000;--abc-octave-high:#00994d;--abc-octave-low:#60c;--abc-rest:#666;--abc-rest-muted:#999;--abc-accidental:#b35900;--abc-duration-long:#cc5200;--abc-duration-short:#09c;--abc-duration-fraction:#c90;--abc-broken:#00b359;--abc-bar:#0080cc;--abc-bar-double:#06c;--abc-chord:#c09;--abc-slur-0:#cc004d;--abc-slur-1:#cc8000;--abc-slur-2:#0080cc;--abc-slur-3:#00b359;--abc-slur-4:#70c;--abc-tuplet:#00b359;--abc-tie:#c06;--abc-tie-dotted:#cc0080;--abc-ornament:#56c;--abc-chord-symbol:#00997a;--abc-annotation:#c80;--abc-decoration:#86c;--abc-grace:#66b300;--abc-volta:#c60;--abc-inline-bracket:#666;--abc-inline-key:#06c;--abc-inline-value:#960;--abc-comment:#999}[data-theme=dark]{--abc-ink:#e8f1ff;--abc-key:#7ad7ff;--abc-value:#ffd48a;--abc-lyrics-key:#ff7ba1;--abc-lyrics-value:#ffc8d8;--abc-note:#f8fbff;--abc-octave-high:#73f8c4;--abc-octave-low:#c7b3ff;--abc-rest:#8ca3b8;--abc-rest-muted:#596779;--abc-accidental:#f2c079;--abc-duration-long:#ffa25f;--abc-duration-short:#6edff6;--abc-duration-fraction:#ffe38f;--abc-broken:#7be495;--abc-bar:#79cfff;--abc-bar-double:#4aafff;--abc-chord:#ff8ccf;--abc-slur-0:#ff92b2;--abc-slur-1:#ffd77a;--abc-slur-2:#7ed4ff;--abc-slur-3:#92f3c6;--abc-slur-4:#c6a9ff;--abc-tuplet:#82f0a2;--abc-tie:#f07fb3;--abc-tie-dotted:#ff9ecf;--abc-ornament:#9fb0ff;--abc-chord-symbol:#63f5d3;--abc-annotation:#ffd88a;--abc-decoration:#d1a6ff;--abc-grace:#a4f28f;--abc-volta:#f9a15a;--abc-inline-bracket:#8ca7c0;--abc-inline-key:#7ad7ff;--abc-inline-value:#ffdcb2;--abc-comment:#7b8797}.abc-preview svg text{fill:#000!important}.abc-preview[data-theme=dark] svg text{fill:#fff!important}textarea::placeholder{color:#999;opacity:1}[data-theme=dark] textarea::placeholder{color:#64748b}.abc-meta-key{color:var(--abc-key);font-weight:600}.abc-meta-value{color:var(--abc-value)}.abc-lyrics-key{color:var(--abc-lyrics-key);font-weight:600}.abc-lyrics-value{color:var(--abc-lyrics-value)}.abc-note{color:var(--abc-note)}.abc-octave-high{color:var(--abc-octave-high);font-weight:600}.abc-octave-low{color:var(--abc-octave-low);font-weight:600}.abc-rest{color:var(--abc-rest)}.abc-rest-invisible{color:var(--abc-rest-muted);opacity:.5}.abc-accidental{color:var(--abc-accidental)}.abc-duration{font-weight:600}.abc-duration-long{color:var(--abc-duration-long)}.abc-duration-short{color:var(--abc-duration-short)}.abc-duration-fraction{color:var(--abc-duration-fraction)}.abc-broken-rhythm{color:var(--abc-broken);font-weight:700}.abc-bar{color:var(--abc-bar);font-weight:600}.abc-bar-double{color:var(--abc-bar-double);font-weight:900}.abc-chord{color:var(--abc-chord)}.abc-slur{font-weight:700}.abc-slur-level-0{color:var(--abc-slur-0)}.abc-slur-level-1{color:var(--abc-slur-1)}.abc-slur-level-2{color:var(--abc-slur-2)}.abc-slur-level-3{color:var(--abc-slur-3)}.abc-slur-level-4{color:var(--abc-slur-4)}.abc-tuplet{color:var(--abc-tuplet);font-weight:700}.abc-tie{color:var(--abc-tie);font-weight:600}.abc-tie-dotted{color:var(--abc-tie-dotted)}.abc-ornament{color:var(--abc-ornament);font-weight:700}.abc-chord-symbol{color:var(--abc-chord-symbol);font-weight:700}.abc-annotation{color:var(--abc-annotation);font-style:italic;font-weight:600}.abc-decoration{color:var(--abc-decoration);font-weight:700}.abc-grace-note{color:var(--abc-grace);font-weight:600}.abc-volta-bracket{color:var(--abc-volta);font-weight:700}.abc-inline-field-bracket{color:var(--abc-inline-bracket)}.abc-inline-field-key{color:var(--abc-inline-key);font-weight:600}.abc-inline-field-value{color:var(--abc-inline-value)}.abc-comment{color:var(--abc-comment);font-style:italic}.abc-text{color:var(--abc-ink)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ease{syntax:"*";inherits:false}')),document.head.appendChild(a)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),T=require("react"),j=e=>e.split(`
|
|
3
|
+
`).map((n,s)=>s+1).join(`
|
|
4
|
+
`),C=/^([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]:)(.*)$/,_=/[A-Ga-g]/,M=/[\^_=]/,O=/[',]/,$=/\|[:|\]]?|:?\|/,D=/[\\[\]]/,H=/[()]/,U=/^\(\d+$/,k=/^\/?\d+(\/\d+)?$/,w=/[zZx]/,R=/^\.?-$/,W=/[.~HLMOPSTuv]/,K=/^"[^"]*"$/,P=/^"[\^_<>@][^"]*"$/,F=/^![^!]+!$/,V=/^\{[^}]+\}$/,G=/^\[\d+$/,Q=/^\[([ABCDFGHIKLMmNOPQRrSsTUVWwXZ]):([^\]]*)\]$/,z=/^[<>]+$/,Y=/^%.*$/,p=e=>e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"),oe=(e,t)=>{const n=e[t];if(n!=="|"&&n!==":")return null;let s=n,l=t+1;for(;l<e.length&&(e[l]==="|"||e[l]===":"||e[l]==="]");)s+=e[l],l++;return $.test(s)?{html:`<span class="${s==="||"?"abc-bar-double":"abc-bar"}">${p(s)}</span>`,nextIndex:l}:null},ae=(e,t)=>{const n=e[t];return M.test(n)?{html:`<span class="abc-accidental">${p(n)}</span>`,nextIndex:t+1}:null},ie=(e,t,n)=>{const s=e[t];if(!H.test(s))return null;if(s==="("){if(t+1<e.length&&/\d/.test(e[t+1])){let l=s,r=t+1;for(;r<e.length&&/\d/.test(e[r]);)l+=e[r],r++;if(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-${n%5}">${p(s)}</span>`,nextIndex:t+1,slurLevelDelta:1}}else if(s===")")return{html:`<span class="abc-slur abc-slur-level-${Math.max(0,n-1)%5}">${p(s)}</span>`,nextIndex:t+1,slurLevelDelta:-1};return null},ce=(e,t)=>{const n=e[t];if(!_.test(n))return null;let s=`<span class="abc-note">${p(n)}</span>`,l=t+1,r="";for(;l<e.length&&O.test(e[l]);)r+=e[l],l++;if(r){const i=r[0]==="'"?"abc-octave-high":"abc-octave-low";s+=`<span class="${i}">${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&&k.test(a)){let i="abc-duration";a.startsWith("/")?i+=" abc-duration-short":a.includes("/")?i+=" abc-duration-fraction":i+=" abc-duration-long",s+=`<span class="${i}">${p(a)}</span>`}}return{html:s,nextIndex:l}},ue=(e,t)=>{const n=e[t];return D.test(n)?{html:`<span class="abc-chord">${p(n)}</span>`,nextIndex:t+1}:null},de=(e,t)=>{const n=e[t];if(!w.test(n))return null;let l=`<span class="${n==="x"?"abc-rest-invisible":"abc-rest"}">${p(n)}</span>`,r=t+1,a="";if(r<e.length&&(e[r]==="/"||/\d/.test(e[r]))){for(e[r]==="/"&&(a+=e[r],r++);r<e.length&&/\d/.test(e[r]);)a+=e[r],r++;if(r<e.length&&e[r]==="/")for(a+=e[r],r++;r<e.length&&/\d/.test(e[r]);)a+=e[r],r++;if(a&&k.test(a)){let i="abc-duration";a.startsWith("/")?i+=" abc-duration-short":a.includes("/")?i+=" abc-duration-fraction":i+=" abc-duration-long",l+=`<span class="${i}">${p(a)}</span>`}}return{html:l,nextIndex:r}},pe=(e,t)=>{const n=e[t];return n==="."&&t+1<e.length&&e[t+1]==="-"&&R.test(".-")?{html:`<span class="abc-tie abc-tie-dotted">${p(".-")}</span>`,nextIndex:t+2}:n==="-"&&R.test(n)?{html:`<span class="abc-tie">${p(n)}</span>`,nextIndex:t+1}:null},he=(e,t)=>{const n=e[t];return!W.test(n)||n==="."&&t+1<e.length&&e[t+1]==="-"?null:{html:`<span class="abc-ornament">${p(n)}</span>`,nextIndex:t+1}},fe=(e,t)=>{if(e[t]!=='"')return null;let s=t+1;for(;s<e.length&&e[s]!=='"';)s++;if(s>=e.length)return null;const l=e.substring(t,s+1);return P.test(l)?{html:`<span class="abc-annotation">${p(l)}</span>`,nextIndex:s+1}:null},ge=(e,t)=>{if(e[t]!=='"')return null;let s=t+1;for(;s<e.length&&e[s]!=='"';)s++;if(s>=e.length)return null;const l=e.substring(t,s+1);return P.test(l)||!K.test(l)?null:{html:`<span class="abc-chord-symbol">${p(l)}</span>`,nextIndex:s+1}},me=(e,t)=>{if(e[t]!=="!")return null;let s=t+1;for(;s<e.length&&e[s]!=="!";)s++;if(s>=e.length)return null;const l=e.substring(t,s+1);return F.test(l)?{html:`<span class="abc-decoration">${p(l)}</span>`,nextIndex:s+1}:null},be=(e,t)=>{if(e[t]!=="{")return null;let s=t+1;for(;s<e.length&&e[s]!=="}";)s++;if(s>=e.length)return null;const l=e.substring(t,s+1);return V.test(l)?{html:`<span class="abc-grace-note">${p(l)}</span>`,nextIndex:s+1}:null},xe=(e,t)=>{if(e[t]!=="[")return null;let s=t+1;for(;s<e.length&&e[s]!=="]";)s++;if(s>=e.length)return null;const r=e.substring(t,s+1).match(Q);if(!r)return null;const[,a,i]=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(i)}</span><span class="abc-inline-field-bracket">]</span>`,nextIndex:s+1}},ve=(e,t)=>{if(e[t]!=="["||t+1>=e.length||!/\d/.test(e[t+1]))return null;let s=t+1;for(;s<e.length&&/\d/.test(e[s]);)s++;const l=e.substring(t,s);return G.test(l)?{html:`<span class="abc-volta-bracket">${p(l)}</span>`,nextIndex:s}:null},Te=(e,t)=>{const n=e[t];if(n!==">"&&n!=="<")return null;let s=t+1;for(;s<e.length&&e[s]===n;)s++;const l=e.substring(t,s);return z.test(l)?{html:`<span class="abc-broken-rhythm">${p(l)}</span>`,nextIndex:s}:null},Ae=e=>{let t="",n=0,s=0;for(;n<e.length;){const l=oe(e,n);if(l){t+=l.html,n=l.nextIndex;continue}const r=me(e,n);if(r){t+=r.html,n=r.nextIndex;continue}const a=be(e,n);if(a){t+=a.html,n=a.nextIndex;continue}const i=ae(e,n);if(i){t+=i.html,n=i.nextIndex;continue}const x=he(e,n);if(x){t+=x.html,n=x.nextIndex;continue}const g=fe(e,n);if(g){t+=g.html,n=g.nextIndex;continue}const c=ge(e,n);if(c){t+=c.html,n=c.nextIndex;continue}const o=ie(e,n,s);if(o){t+=o.html,n=o.nextIndex,o.slurLevelDelta&&(s+=o.slurLevelDelta);continue}const d=de(e,n);if(d){t+=d.html,n=d.nextIndex;continue}const h=ce(e,n);if(h){t+=h.html,n=h.nextIndex;continue}const v=Te(e,n);if(v){t+=v.html,n=v.nextIndex;continue}const m=xe(e,n);if(m){t+=m.html,n=m.nextIndex;continue}const b=ve(e,n);if(b){t+=b.html,n=b.nextIndex;continue}const A=ue(e,n);if(A){t+=A.html,n=A.nextIndex;continue}const N=pe(e,n);if(N){t+=N.html,n=N.nextIndex;continue}t+=`<span class="abc-text">${p(e[n])}</span>`,n++}return t},L=e=>e.split(`
|
|
5
|
+
`).map(n=>{if(Y.test(n))return`<span class="abc-comment">${p(n)}</span>`;const s=n.match(C);if(s){const[,l,r]=s;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 Ae(n)}).join(`
|
|
6
|
+
`),X={"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"}]},Ne=e=>X[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
|
-
`}],
|
|
12
|
-
`),d=o[o.length-1];if(d.startsWith("/"))return{fieldKey:null,inputValue:d,line:d,lineStartPos:
|
|
13
|
-
`).length-1,v=parseFloat(getComputedStyle(
|
|
14
|
-
`),h=d[d.length-1];let v,
|
|
15
|
-
`);let
|
|
16
|
-
`),
|
|
17
|
-
`),
|
|
11
|
+
`}],Be=e=>e.startsWith("/")?q.filter(t=>t.value.toLowerCase().startsWith(e.toLowerCase())):[],J=({value:e,textareaRef:t,onChange:n})=>{const[s,l]=T.useState({isOpen:!1,suggestions:[],selectedIndex:0,position:{top:0,left:0},fieldKey:null,inputValue:"",isCommand:!1}),r=T.useCallback(()=>{if(!t.current)return null;const c=t.current.selectionStart,o=e.substring(0,c).split(`
|
|
12
|
+
`),d=o[o.length-1];if(d.startsWith("/"))return{fieldKey:null,inputValue:d,line:d,lineStartPos:c-d.length,isCommand:!0};const h=d.match(C);if(h){const[,v,m]=h;return{fieldKey:v,inputValue:m,line:d,lineStartPos:c-d.length,isCommand:!1}}return null},[e,t]),a=T.useCallback(()=>{if(!t.current)return{top:0,left:0};const c=t.current,o=c.selectionStart,h=e.substring(0,o).split(`
|
|
13
|
+
`).length-1,v=parseFloat(getComputedStyle(c).lineHeight)||24;return{top:(parseFloat(getComputedStyle(c).paddingTop)||16)+(h+1)*v-c.scrollTop,left:60}},[e,t]);T.useEffect(()=>{const c=r();if(!c){l(d=>({...d,isOpen:!1}));return}let o=[];if(c.isCommand?o=Be(c.inputValue):c.fieldKey&&(o=Ne(c.fieldKey).filter(h=>h.value.toLowerCase().startsWith(c.inputValue.toLowerCase()))),o.length>0){const d=a();l({isOpen:!0,suggestions:o,selectedIndex:0,position:d,fieldKey:c.fieldKey,inputValue:c.inputValue,isCommand:c.isCommand})}else l(d=>({...d,isOpen:!1}))},[e,r,a]);const i=T.useCallback(c=>{if(!t.current)return;const o=t.current.selectionStart,d=e.substring(0,o).split(`
|
|
14
|
+
`),h=d[d.length-1];let v,m;if(s.isCommand&&c.template){const b=e.substring(0,o-h.length),A=e.substring(o);v=b+c.template+A,m=b.length+c.template.length}else if(s.fieldKey){const b=s.fieldKey+c.value,A=e.substring(0,o-h.length),N=e.substring(o);v=A+b+N,m=A.length+b.length}else return;n(v),setTimeout(()=>{t.current&&(t.current.selectionStart=m,t.current.selectionEnd=m,t.current.focus())},0),l(b=>({...b,isOpen:!1}))},[t,s.fieldKey,s.isCommand,e,n]),x=T.useCallback(c=>{if(s.isOpen)switch(c.key){case"ArrowDown":c.preventDefault(),l(o=>({...o,selectedIndex:Math.min(o.selectedIndex+1,o.suggestions.length-1)}));break;case"ArrowUp":c.preventDefault(),l(o=>({...o,selectedIndex:Math.max(o.selectedIndex-1,0)}));break;case"Enter":s.suggestions.length>0&&(c.preventDefault(),i(s.suggestions[s.selectedIndex]));break;case"Escape":c.preventDefault(),l(o=>({...o,isOpen:!1}));break}},[s.isOpen,s.suggestions,s.selectedIndex,i]),g=T.useCallback(c=>{l(o=>({...o,selectedIndex:c}))},[]);return{isOpen:s.isOpen,suggestions:s.suggestions,selectedIndex:s.selectedIndex,position:s.position,handleKeyDown:x,selectSuggestion:i,handleMouseEnter:g}},Z=({suggestions:e,selectedIndex:t,position:n,onSelect:s,onMouseEnter:l})=>{const r=T.useRef(null);return T.useEffect(()=>{r.current?.scrollIntoView({block:"nearest",behavior:"smooth"})},[t]),e.length===0?null:u.jsx("div",{className:"absolute z-50 bg-slate-800 rounded-md shadow-xl overflow-hidden",style:{top:`${n.top}px`,left:`${n.left}px`,minWidth:"200px",maxWidth:"400px",maxHeight:"300px",overflowY:"auto"},children:e.map((a,i)=>u.jsxs("div",{ref:i===t?r:null,className:`px-3 py-2 cursor-pointer ${i===t?"bg-blue-600 text-white":"text-slate-200 hover:bg-slate-700"}`,onClick:()=>s(a),onMouseEnter:()=>l(i),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}-${i}`))})},Ce=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}},Ee=e=>{const n=e.trim().match(/^(\d+)\/(\d+)$/);return n?parseInt(n[1],10)/parseInt(n[2],10):1/8},_e=e=>{const t=e.split(`
|
|
15
|
+
`);let n={beatsPerMeasure:4,beatUnit:4},s=1/8;for(const l of t){const r=l.match(C);if(r){const[,a,i]=r;a==="M:"?n=Ce(i):a==="L:"&&(s=Ee(i))}}return{meter:n,unitNoteLength:s}},S=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)},ye=(e,t)=>{let n=0,s=0;for(;s<e.length;){const l=e[s];if(_.test(l)||w.test(l)){let r=s+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 i=S(a),x=t.unitNoteLength*i,g=1/t.meter.beatUnit,c=x/g;n+=c,s=r}else if(l==="["){let r=s+1;for(;r<e.length&&e[r]!=="]";){const a=e[r];if(_.test(a)){let i=r+1;for(;i<e.length&&(e[i]==="'"||e[i]===",");)i++;r=i}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 i=S(a),x=t.unitNoteLength*i,g=1/t.meter.beatUnit,c=x/g;n+=c}s=r}else s++}return n},ee=e=>{const t=[],n=e.split(`
|
|
16
|
+
`),s=_e(e);return n.forEach((l,r)=>{if(!(l.trim().startsWith("%")||C.test(l))&&l.includes("|")){let a=0;const i=l.split("|");let x=0;i.forEach((g,c)=>{if(c===i.length-1&&g.trim()==="")return;const o=g.trim();if(o.startsWith(":")||o.startsWith("[")||o===""){a+=g.length+1;return}const d=ye(o,s),h=s.meter.beatsPerMeasure;if(Math.abs(d-h)>.01){const m=l.indexOf(o,a),b=m+o.length;t.push({line:r,measureIndex:x,startCol:m,endCol:b,expected:h,actual:d,message:`Expected ${h} beats, got ${d.toFixed(2)}`})}x++,a+=g.length+1})}}),t},Ie=({value:e,onChange:t,theme:n="light"})=>{const s=T.useRef(null),l=T.useRef(null),r=T.useRef(null),[a,i]=T.useState(null),x=j(e),g=L(e),c=T.useMemo(()=>ee(e),[e]),o=n==="dark"?{bg:"#1a1a1a",editorBg:"#262626",lineNumBg:"#0f0f0f",lineNumBorder:"#2d2d2d",caretColor:"#fff",errorBg:"#1a1a1a",errorBorder:"#2d2d2d",errorHeader:"#ffffff",errorBadgeBg:"#dc2626",errorBadgeText:"#ffffff",errorIcon:"#f59e0b",errorLocation:"#22d3ee",errorMessage:"#e5e7eb",errorHighlight:"rgba(245, 158, 11, 0.2)",errorHoverBg:"rgba(51, 65, 85, 0.4)",errorItemBorder:"rgba(255, 255, 255, 0.05)"}:{bg:"#f8f9fa",editorBg:"#ffffff",lineNumBg:"#ffffff",lineNumBorder:"#e5e7eb",caretColor:"#000",errorBg:"#ffffff",errorBorder:"#e5e7eb",errorHeader:"#1f2937",errorBadgeBg:"#dc2626",errorBadgeText:"#ffffff",errorIcon:"#dc2626",errorLocation:"#0891b2",errorMessage:"#1f2937",errorHighlight:"#fde047",errorHoverBg:"rgba(254, 202, 202, 0.4)",errorItemBorder:"rgba(220, 38, 38, 0.1)"},{isOpen:d,suggestions:h,selectedIndex:v,position:m,handleKeyDown:b,selectSuggestion:A,handleMouseEnter:N}=J({value:e,textareaRef:s,onChange:t}),te=()=>{s.current&&l.current&&r.current&&(l.current.scrollTop=s.current.scrollTop,r.current.scrollTop=s.current.scrollTop)},se=f=>{if(s.current){const B=e.split(`
|
|
17
|
+
`),E=B.slice(0,f.line).join(`
|
|
18
|
+
`).length+(f.line>0?1:0);s.current.focus(),s.current.setSelectionRange(E,E),s.current.scrollTop=s.current.scrollHeight*(f.line/B.length)}};return u.jsx("div",{className:"w-full h-full flex flex-col p-4","data-theme":n,style:{backgroundColor:o.bg},children:u.jsxs("div",{className:"w-full flex-1 flex flex-col rounded-lg overflow-hidden shadow-lg",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",borderRight:`1px solid ${o.lineNumBorder}`},children:u.jsx("pre",{className:"m-0 pl-1 pr-3 py-4",children:x})}),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:g}})}),a&&(()=>{const f=e.split(`
|
|
19
|
+
`),E=(f[a.line]||"").substring(a.startCol,a.endCol),ne=L(E);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:f.map((y,I)=>{if(I===a.line){const re=y.substring(0,a.startCol),le=y.substring(a.endCol);return u.jsxs("div",{children:[u.jsx("span",{style:{opacity:0},children:re}),u.jsx("span",{className:"px-1 rounded",style:{backgroundColor:o.errorHighlight},dangerouslySetInnerHTML:{__html:ne}}),u.jsx("span",{style:{opacity:0},children:le})]},I)}return u.jsx("div",{style:{opacity:0},children:y},I)})})})})(),u.jsx("textarea",{ref:s,className:"absolute inset-0 w-full h-full resize-none px-4 py-4 text-sm font-mono leading-relaxed outline-none border-0",style:{backgroundColor:"transparent",color:"transparent",caretColor:o.caretColor},value:e,onChange:f=>t(f.target.value),onScroll:te,onKeyDown:b,spellCheck:!1,placeholder:"Type /header to insert template..."}),d&&u.jsx(Z,{suggestions:h,selectedIndex:v,position:m,onSelect:A,onMouseEnter:N})]})]}),c.length>0&&u.jsxs("div",{className:"flex",children:[u.jsx("div",{style:{backgroundColor:o.lineNumBg,minWidth:"2.5rem",borderRight:`1px solid ${o.lineNumBorder}`}}),u.jsxs("div",{className:"flex-1 px-4 py-3 text-xs font-mono overflow-auto border-t",style:{backgroundColor:o.errorBg,borderColor:o.errorBorder,maxHeight:"12rem",scrollbarWidth:"thin",scrollbarColor:`${o.errorIcon} transparent`},children:[u.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[u.jsxs("div",{className:"flex items-center gap-2",children:[u.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{color:o.errorIcon},children:[u.jsx("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"}),u.jsx("line",{x1:"12",y1:"9",x2:"12",y2:"13"}),u.jsx("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})]}),u.jsx("span",{className:"text-[11px] font-semibold uppercase tracking-wide",style:{color:o.errorHeader},children:"Validation Issues"})]}),u.jsx("div",{className:"px-2 py-0.5 rounded-full text-[10px] font-bold",style:{backgroundColor:o.errorBadgeBg,color:o.errorBadgeText},children:c.length})]}),u.jsx("div",{className:"space-y-1",children:c.map((f,B)=>u.jsxs("div",{className:"flex items-start gap-3 px-3 py-2 rounded-md border cursor-pointer",style:{backgroundColor:a===f?o.errorHoverBg:"transparent",borderColor:a===f?o.errorIcon:o.errorItemBorder,transition:"all 0.15s ease-in-out",transform:a===f?"translateX(2px)":"translateX(0)"},onMouseEnter:()=>i(f),onMouseLeave:()=>i(null),onClick:()=>se(f),children:[u.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"shrink-0 mt-0.5",style:{color:o.errorIcon},children:[u.jsx("circle",{cx:"12",cy:"12",r:"10"}),u.jsx("line",{x1:"12",y1:"8",x2:"12",y2:"12"}),u.jsx("line",{x1:"12",y1:"16",x2:"12.01",y2:"16"})]}),u.jsxs("div",{className:"flex-1 flex flex-col gap-1",children:[u.jsx("div",{className:"flex items-baseline gap-2 flex-wrap",children:u.jsxs("span",{className:"font-semibold text-[11px] px-1.5 py-0.5 rounded",style:{color:o.errorLocation,backgroundColor:n==="dark"?"rgba(34, 211, 238, 0.1)":"rgba(8, 145, 178, 0.1)"},children:["Line ",f.line+1,", Measure ",f.measureIndex+1]})}),u.jsx("span",{className:"text-[11px] leading-relaxed",style:{color:o.errorMessage},children:f.message})]}),u.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"shrink-0 mt-1 opacity-50",style:{color:o.errorIcon,opacity:a===f?1:.3,transition:"opacity 0.15s ease-in-out"},children:[u.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),u.jsx("polyline",{points:"12 5 19 12 12 19"})]})]},B))})]})]})]})})};exports.ABC_ACCIDENTAL_PATTERN=M;exports.ABC_ANNOTATION_PATTERN=P;exports.ABC_BAR_PATTERN=$;exports.ABC_BROKEN_RHYTHM_PATTERN=z;exports.ABC_CHORD_BRACKET_PATTERN=D;exports.ABC_CHORD_SYMBOL_PATTERN=K;exports.ABC_COMMANDS=q;exports.ABC_COMMENT_PATTERN=Y;exports.ABC_DECORATION_PATTERN=F;exports.ABC_DURATION_PATTERN=k;exports.ABC_FIELD_PATTERN=C;exports.ABC_GRACE_NOTE_PATTERN=V;exports.ABC_INLINE_FIELD_PATTERN=Q;exports.ABC_NOTE_PATTERN=_;exports.ABC_OCTAVE_PATTERN=O;exports.ABC_ORNAMENT_PATTERN=W;exports.ABC_REST_PATTERN=w;exports.ABC_SLUR_PATTERN=H;exports.ABC_SUGGESTIONS=X;exports.ABC_TIE_PATTERN=R;exports.ABC_TUPLET_PATTERN=U;exports.ABC_VOLTA_BRACKET_PATTERN=G;exports.AbcEditor=Ie;exports.SuggestionList=Z;exports.highlightAbc=L;exports.useAbcAutoComplete=J;exports.useLineNumbers=j;exports.validateAbc=ee;
|