@ovnonvo/abc-editor 0.1.2 → 0.1.3

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.
Files changed (5) hide show
  1. package/README.md +11 -9
  2. package/dist/abc-editor.cjs.js +1 -0
  3. package/dist/abc-editor.es.js +1 -0
  4. package/package.json +7 -13
  5. package/dist/abc-editor.css +0 -1
package/README.md CHANGED
@@ -48,8 +48,6 @@ npm install react react-dom abcjs
48
48
  ```tsx
49
49
  import { useState } from 'react';
50
50
  import { AbcEditor, AbcPreview } from '@ovnonvo/abc-editor';
51
- // Import styles
52
- import '@ovnonvo/abc-editor/styles.css';
53
51
 
54
52
  function App() {
55
53
  const [abcCode, setAbcCode] = useState(`X:1
@@ -69,7 +67,7 @@ C D E F | G A B c |`);
69
67
  export default App;
70
68
  ```
71
69
 
72
- **Important:** Don't forget to import the CSS file to get the proper styling!
70
+ **Note:** Styles are automatically included - no need to import CSS separately!
73
71
 
74
72
  ### Components
75
73
 
@@ -180,15 +178,19 @@ import type {
180
178
 
181
179
  ## Styling
182
180
 
183
- The package includes pre-built CSS with all necessary styles. Simply import the CSS file as shown in the usage example:
181
+ The package automatically injects all necessary styles when you import the components. **No separate CSS import required!**
184
182
 
185
- ```tsx
186
- import '@ovnonvo/abc-editor/styles.css';
187
- ```
183
+ **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.
188
184
 
189
- **Note:** You don't need to install or configure Tailwind CSS in your project. All styles are included in the package.
185
+ If you need custom styling, you can override the CSS variables or add your own CSS rules:
190
186
 
191
- If you need custom styling, you can override the CSS variables defined in the stylesheet or add your own CSS rules.
187
+ ```css
188
+ :root {
189
+ --abc-key: #your-color;
190
+ --abc-note: #your-color;
191
+ /* ... other variables */
192
+ }
193
+ ```
192
194
 
193
195
  ## Development
194
196
 
package/dist/abc-editor.cjs.js CHANGED
@@ -1,3 +1,4 @@
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)}})();
1
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(`
2
3
  `).map((n,r)=>r+1).join(`
3
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(`
package/dist/abc-editor.es.js CHANGED
@@ -1,3 +1,4 @@
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)}})();
1
2
  import { jsx as h, jsxs as T } from "react/jsx-runtime";
2
3
  import { useState as M, useCallback as N, useEffect as B, useRef as I, useMemo as F } from "react";
3
4
  import K from "abcjs";
package/package.json CHANGED
@@ -1,22 +1,16 @@
1
1
  {
2
2
  "name": "@ovnonvo/abc-editor",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "A React component for editing ABC music notation with syntax highlighting, autocomplete, and validation",
5
5
  "type": "module",
6
6
  "main": "./dist/abc-editor.cjs.js",
7
7
  "module": "./dist/abc-editor.es.js",
8
8
  "types": "./dist/lib/index.d.ts",
9
- "style": "./dist/abc-editor.css",
10
9
  "exports": {
11
10
  ".": {
12
11
  "types": "./dist/lib/index.d.ts",
13
12
  "import": "./dist/abc-editor.es.js",
14
13
  "require": "./dist/abc-editor.cjs.js"
15
- },
16
- "./styles.css": {
17
- "import": "./dist/abc-editor.css",
18
- "require": "./dist/abc-editor.css",
19
- "default": "./dist/abc-editor.css"
20
14
  }
21
15
  },
22
16
  "files": [
@@ -56,15 +50,11 @@
56
50
  "prepublishOnly": "npm run build"
57
51
  },
58
52
  "peerDependencies": {
53
+ "abcjs": "^6.0.0",
59
54
  "react": "^18.0.0 || ^19.0.0",
60
- "react-dom": "^18.0.0 || ^19.0.0",
61
- "abcjs": "^6.0.0"
55
+ "react-dom": "^18.0.0 || ^19.0.0"
62
56
  },
63
- "dependencies": {},
64
57
  "devDependencies": {
65
- "abcjs": "^6.5.2",
66
- "react": "^19.2.0",
67
- "react-dom": "^19.2.0",
68
58
  "@eslint/js": "^9.39.1",
69
59
  "@tailwindcss/postcss": "^4.1.17",
70
60
  "@types/node": "^24.10.1",
@@ -72,6 +62,7 @@
72
62
  "@types/react-dom": "^19.2.3",
73
63
  "@vitejs/plugin-react": "^5.1.1",
74
64
  "@vitest/ui": "^4.0.12",
65
+ "abcjs": "^6.5.2",
75
66
  "autoprefixer": "^10.4.22",
76
67
  "eslint": "^9.39.1",
77
68
  "eslint-plugin-react-hooks": "^7.0.1",
@@ -79,10 +70,13 @@
79
70
  "globals": "^16.5.0",
80
71
  "jsdom": "^27.2.0",
81
72
  "postcss": "^8.5.6",
73
+ "react": "^19.2.0",
74
+ "react-dom": "^19.2.0",
82
75
  "tailwindcss": "^4.1.17",
83
76
  "typescript": "~5.9.3",
84
77
  "typescript-eslint": "^8.46.4",
85
78
  "vite": "^7.2.4",
79
+ "vite-plugin-css-injected-by-js": "^3.5.2",
86
80
  "vitest": "^4.0.12"
87
81
  }
88
82
  }
package/dist/abc-editor.css DELETED
@@ -1 +0,0 @@
1
- @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}