open-lyric-plugin-player 0.1.6 → 0.1.10

package/README.md

@@ -82,5 +82,5 @@ npm whoami                                  # run `npm login` if this fails
 npm version patch --tag-version-prefix=""   # or minor / major
 npm publish
 git push origin main --follow-tags
-npm view open-lyric-plugin-player version                   # confirm the new version is live
+npm view open-lyric-plugin-player version   # confirm the new version is live
 ```

package/dist/index.cjs

@@ -115,5 +115,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.
         </ul>
       </details>
     </div>
-  `}var Jn=[`key`,`time`,`tempo`,`tempoRange`,`instruments`,`voicing`,`patterns`,`patternsEmpty`,`restore`,`input`,`add`,`addError`,`status`,`chords`,`chordsSummary`],Yn=`openLyricStrumPlayer.v2`,Xn=20,Zn=300,Qn=d.CONFIG_KEY_VALUES,$n=d.CONFIG_ENUM_FIELD_VALUES.Time,er=[`light`,`dark`],tr=[{id:`example-1`,label:`Slow rolling pulse`,source:`d--u-- | d-u-d-`},{id:`example-2`,label:`Lift on the chorus`,source:`ddu--u | d-d-du`}],Z={key:`E`,time:`4/4`,tempo:70,instrument:`guitar`},nr=`<svg viewBox="0 0 14 28" aria-hidden="true"><path d="M7 3v21M2.5 19.5 7 24.5l4.5-5"/></svg>`,rr=0,Q=0,$=null;function ir(){Q+=1,$||($=document.createElement(`style`),$.textContent=Bn,$.dataset.olpStylesheet=``,document.head.append($))}function ar(){Q=Math.max(0,Q-1),Q||($?.remove(),$=null)}function or(){return tr.map(e=>({...e}))}function sr(e){let t=Math.round(Number(e));return Number.isFinite(t)?Math.min(Zn,Math.max(Xn,t)):null}function cr(e){if(!e||typeof e.id!=`string`||typeof e.label!=`string`||typeof e.source!=`string`)return!1;try{return R(e,`4/4`),!0}catch{return!1}}function lr(e){let t=null;try{t=e?JSON.parse(localStorage.getItem(e)??`null`):null}catch{t=null}if(!t||typeof t!=`object`)return{...Z,patterns:or()};let n=Array.isArray(t.patterns)?t.patterns.filter(cr).map(({id:e,label:t,source:n})=>({id:e,label:t,source:n})):null;return{key:Qn.includes(t.key)?t.key:Z.key,time:$n.includes(t.time)?t.time:Z.time,tempo:sr(t.tempo)??Z.tempo,instrument:F(t.instrument)?.id??Z.instrument,patterns:n??or()}}function ur(e){return e?e.direction:`rest`}function dr(){let e=document.createElement(`template`);return e.innerHTML=`<svg class="icon-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.5 5.8v12.4a.8.8 0 0 0 1.2.7l9.6-6.2a.8.8 0 0 0 0-1.4L9.7 5.1a.8.8 0 0 0-1.2.7z"/></svg><svg class="icon-stop" viewBox="0 0 24 24" aria-hidden="true"><rect x="6.5" y="6.5" width="11" height="11" rx="1.6"/></svg>`,Array.from(e.content.children)}function fr(e,t,n){let r=t.steps[n],i=t.counts[n]??String(n+1),a=`${i} (step ${n+1}): ${ur(r)}`,[o,s]=Array.from(e.children);e.classList.toggle(`is-active`,!!r),e.classList.toggle(`step--break`,t.groupBreaks.includes(n)),e.setAttribute(`aria-label`,`${a}. Press to change.`),e.title=a,o.innerHTML=r?nr:``,o.firstElementChild?.classList.toggle(`stroke-up`,r?.direction===`up`),s.textContent=i}function pr(e,t){let n=document.createElement(`button`);n.type=`button`,n.className=`step`,n.dataset.step=String(t+1),n.dataset.action=`cycle`;for(let e of[`stroke`,`count`]){let t=document.createElement(`span`);t.className=`step__${e}`,t.setAttribute(`aria-hidden`,`true`),n.append(t)}return fr(n,e,t),n}function mr(e){let t=document.createElement(`article`),n=document.createElement(`div`),r=document.createElement(`button`),i=document.createElement(`span`),a=document.createElement(`h3`),o=document.createElement(`button`),s=document.createElement(`div`),c=document.createElement(`p`);return t.className=`pattern-card`,t.dataset.patternId=e.id,t.dataset.state=`idle`,n.className=`pattern-card__header`,r.className=`pattern-card__play`,r.type=`button`,r.dataset.action=`toggle`,i.className=`spinner`,i.setAttribute(`aria-hidden`,`true`),r.append(...dr(),i),a.className=`pattern-card__name`,a.textContent=e.label,o.className=`pattern-card__remove`,o.type=`button`,o.dataset.action=`remove`,o.textContent=`×`,o.title=`Remove ${e.label}`,o.setAttribute(`aria-label`,`Remove ${e.label}`),n.append(r,a,o),s.className=`pattern-card__steps`,s.setAttribute(`role`,`group`),s.setAttribute(`aria-label`,`${e.label} steps`),s.append(...e.steps.map((t,n)=>pr(e,n))),c.className=`pattern-card__source`,c.append(Object.assign(document.createElement(`code`),{textContent:e.source})),t.append(n,s,c),t}var hr=class{player;#e;#t;#n;#r;#i;#a=null;#o=null;#s=null;#c=[];#l;#u=new Map;#d=null;#f=null;#p=0;constructor(e){if(!(e?.container instanceof HTMLElement))throw TypeError("OpenLyricPlayerPlayground needs a `container` element.");this.#e=e.container,this.#t=!e.player,this.player=e.player??new U,this.#n=e.storageKey===void 0?Yn:e.storageKey,this.#r=this.#h(e.theme),this.#i=`olp-${++rr}`,this.#l=lr(this.#n)}get element(){return this.#a}get theme(){return this.#r}setTheme(e){this.#r=this.#h(e),this.#g()}render(){this.#m(),ir();let e=document.createElement(`div`),t=new AbortController;return e.className=`olp-playground`,e.innerHTML=qn(this.#i),this.#a=e,this.#s=t,this.#o=Object.fromEntries(Jn.map(t=>{let n=e.querySelector(`[data-olp-ref="${t}"]`);if(!n)throw Error(`The playground markup is missing ${t}.`);return[t,n]})),this.#g(),this.#e.append(e),this.#z(t.signal),this.#S(),this.#w(),this.#T(),this.#D(),this.#x(t.signal),this}destroy(){this.#m(),this.#t&&this.player.destroy()}#m(){this.#a&&(this.#u.has(this.player.patternId??``)&&this.player.stop(),this.#s?.abort(),this.#c.forEach(e=>e()),this.#c=[],this.#a.remove(),this.#a=null,this.#o=null,this.#s=null,this.#f=null,this.#d=null,ar())}#h(e){if(e!=null){if(!er.includes(e))throw TypeError(`Unknown theme “${String(e)}” — use 'light' or 'dark'.`);return e}}#g(){this.#a&&(this.#r?this.#a.dataset.theme=this.#r:delete this.#a.dataset.theme,this.#f?.refresh())}#_(){if(this.#n)try{localStorage.setItem(this.#n,JSON.stringify(this.#l))}catch{}}#v(){return F(this.#l.instrument)??ke[0]}#y(){return this.player.getVoicing(this.#l.instrument,this.#l.key)}#b(e,t=`info`){this.#o&&(this.#o.status.textContent=e,this.#o.status.dataset.tone=t)}#x(e){this.player.loadChords().then(()=>{e.aborted||!this.#a||!this.#o||(this.#T(),this.#f=Kn({root:this.#a,groups:this.#o.chords,summary:this.#o.chordsSummary,cardId:`${this.#i}-chord-card`,player:this.player,signal:e,getInstrument:()=>this.#v(),getKey:()=>this.#l.key,onError:e=>this.#b(e,`error`)}))},t=>{e.aborted||!this.#o||(this.#o.voicing.textContent=``,this.#b(`Could not load chord voicings: ${t instanceof Error?t.message:String(t)}`,`error`))})}#S(){let e=this.#o,t=this.#l;e.key.replaceChildren(...Qn.map(e=>new Option(e,e,!1,e===t.key))),e.time.replaceChildren(...$n.map(e=>new Option(e,e,!1,e===t.time))),e.tempo.value=String(t.tempo),e.tempoRange.value=String(t.tempo)}#C(e){let t=this.#o,n=sr(e)??this.#l.tempo;this.#l.tempo=n,t.tempo.value=String(n),t.tempoRange.value=String(n)}#w(){this.#o.instruments.replaceChildren(...ke.map(e=>{let t=document.createElement(`label`),n=document.createElement(`input`),r=document.createElement(`span`),i=document.createElement(`span`),a=document.createElement(`span`),o=document.createElement(`span`);return t.className=`instrument`,n.type=`radio`,n.name=`${this.#i}-instrument`,n.value=e.id,n.checked=e.id===this.#l.instrument,r.className=`instrument__text`,i.className=`instrument__name`,i.textContent=e.label,a.className=`instrument__sound`,a.textContent=e.soundfont.title,o.className=`instrument__switch`,o.setAttribute(`aria-hidden`,`true`),r.append(i,a),t.append(n,r,o),t}))}#T(){let e=this.#o;if(!this.player.chordsLoaded){e.voicing.textContent=`Loading chord voicings…`;return}let t=this.#y(),n=this.#v();if(!t){e.voicing.textContent=`No ${n.label} voicing for the key of ${this.#l.key}.`;return}let r=document.createElement(`div`),i=document.createElement(`div`);if(r.append(`Strums `),r.append(Object.assign(document.createElement(`strong`),{textContent:t.chord})),t.card.kind===`diagram`){let{frets:e,baseFret:n}=t.card.voicing;r.append(` — frets `),r.append(Object.assign(document.createElement(`code`),{textContent:e.map(e=>e<0?`x`:String(e===0?0:e+n-1)).join(` `)}))}i.className=`voicing__notes`,i.append(...t.midi.map(e=>Object.assign(document.createElement(`span`),{className:`voicing__note`,textContent:I(e,this.#l.key)}))),e.voicing.replaceChildren(r,i)}#E(e){return this.#o?.patterns.querySelector(`.pattern-card[data-pattern-id="${CSS.escape(e)}"]`)??null}#D(){let e=this.#o;this.#u=new Map;for(let e of this.#l.patterns)try{this.#u.set(e.id,R(e,this.#l.time))}catch(t){console.warn(`Skipping pattern ${e.label}:`,t)}this.#d=null,e.patterns.replaceChildren(...Array.from(this.#u.values(),mr)),e.patternsEmpty.hidden=this.#u.size>0,this.#O()}#O(){let e=this.#o;if(e)for(let t of e.patterns.querySelectorAll(`.pattern-card`)){let e=t.dataset.patternId===this.player.patternId?this.player.state:`idle`,n=t.querySelector(`.pattern-card__play`),r=this.#u.get(t.dataset.patternId)?.label??`pattern`;t.dataset.state=e,n.setAttribute(`aria-pressed`,String(e!==`idle`)),n.setAttribute(`aria-label`,e===`idle`?`Play ${r}`:`Stop ${r}`),n.title=e===`idle`?`Play ${r}`:`Stop ${r}`}}#k(e,t){this.#d?.classList.remove(`is-current`),this.#d=t==null?null:this.#E(e)?.querySelector(`.step[data-step="${t}"]`)??null,this.#d?.classList.add(`is-current`)}#A(e){let t=this.#u.get(e);if(t){if(!this.#y()){this.#b(this.player.chordsLoaded?`No ${this.#v().label} voicing for the key of ${this.#l.key}.`:`Chord voicings are still loading.`,`error`);return}this.player.playPattern({pattern:t,key:this.#l.key,tempo:this.#l.tempo,time:this.#l.time,instrument:this.#l.instrument}).catch(e=>this.#b(`Could not play: ${e instanceof Error?e.message:String(e)}`,`error`))}}#j(){let{patternId:e}=this.player;this.player.state!==`idle`&&e&&this.#u.has(e)&&this.#A(e)}#M(e,t){let n=this.#l,r=n.patterns.findIndex(t=>t.id===e);if(r===-1)return;let i=Ue(n.patterns[r],t,n.time),a=R(i,n.time),o=this.#E(e);n.patterns[r]=i,this.#u.set(e,a),this.#_(),o?.querySelectorAll(`.step`).forEach((e,t)=>fr(e,a,t));let s=o?.querySelector(`.pattern-card__source code`);s&&(s.textContent=a.source),this.player.updatePattern(a)}#N(e){let t=this.#u.get(e);this.player.patternId===e&&this.player.stop(),this.#l.patterns=this.#l.patterns.filter(t=>t.id!==e),this.#_(),this.#D(),this.#b(t?`Removed ${t.label}.`:``)}#P(){return this.#p+=1,`custom-${Date.now().toString(36)}-${this.#p}`}#F(){let e=this.#l.patterns.reduce((e,t)=>{let n=/^Pattern (\d+)$/.exec(t.label);return n?Math.max(e,Number(n[1])):e},0)+1;return()=>`Pattern ${e++}`}#I(){let e=this.#o;e.addError.textContent=``;try{let t=He(e.input.value,()=>this.#P(),this.#F());this.#l.patterns.push(...t),this.#_(),this.#D(),e.input.value=``,this.#b(`Added ${t.map(e=>e.label).join(`, `)}.`)}catch(t){e.addError.textContent=t instanceof Error?t.message:String(t)}}#L(){let e=this.#l.patterns.filter(e=>!tr.some(t=>t.id===e.id));tr.some(e=>e.id===this.player.patternId)&&this.player.stop(),this.#l.patterns=[...or(),...e],this.#_(),this.#D(),this.#b(`Restored the example patterns.`)}#R({state:e,patternId:t,error:n}){this.#O(),e!==`playing`&&this.#k(``,null);let r=t?this.#u.get(t):null;t&&!r||(e===`loading`?this.#b(`Loading ${this.#v().soundfont.title}…`):e===`playing`&&r?this.#b(`Playing ${r.label} — ${this.#y()?.chord??this.#l.key} on ${this.#v().label}, ${this.#l.tempo} bpm, ${this.#l.time}.`):n?this.#b(`Could not play: ${n instanceof Error?n.message:String(n)}`,`error`):this.#b(``))}#z(e){let t=this.#o,n=this.#l,r={signal:e};this.#c.push(this.player.on(`state`,e=>this.#R(e)),this.player.on(`step`,({patternId:e,stepNumber:t})=>this.#k(e,t))),t.patterns.addEventListener(`click`,e=>{let t=e.target.closest(`[data-action]`),n=t?.closest(`.pattern-card`)?.dataset.patternId;if(!(!t||!n))switch(t.dataset.action){case`toggle`:this.player.patternId===n&&this.player.state!==`idle`?this.player.stop():this.#A(n);break;case`remove`:this.#N(n);break;case`cycle`:this.#M(n,Number(t.dataset.step)-1)}},r),t.key.addEventListener(`change`,()=>{n.key=t.key.value,this.#_(),this.#T(),this.#f?.refresh(),this.#j()},r),t.time.addEventListener(`change`,()=>{n.time=t.time.value,this.#_(),this.#D(),this.#j()},r),t.tempoRange.addEventListener(`input`,()=>this.#C(t.tempoRange.value),r);for(let e of[t.tempo,t.tempoRange])e.addEventListener(`change`,()=>{this.#C(e.value),this.#_(),this.#j()},r);t.instruments.addEventListener(`change`,e=>{let t=F(e.target.value);t&&(n.instrument=t.id,this.#_(),this.#T(),this.#f?.refresh(),this.player.state===`idle`?this.player.preload(t.id).catch(()=>{}):this.#j())},r),t.add.addEventListener(`click`,()=>this.#I(),r),t.input.addEventListener(`keydown`,e=>{e.key===`Enter`&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),this.#I())},r),t.restore.addEventListener(`click`,()=>this.#L(),r)}},gr=`0.1.5`;exports.OpenLyricPlayer=U,exports.OpenLyricPlayerPlayground=hr,exports.OpenLyricPluginPlayer=zn,exports.version=gr;
+  `}var Jn=[`key`,`time`,`tempo`,`tempoRange`,`instruments`,`voicing`,`patterns`,`patternsEmpty`,`restore`,`input`,`add`,`addError`,`status`,`chords`,`chordsSummary`],Yn=`openLyricStrumPlayer.v2`,Xn=20,Zn=300,Qn=d.CONFIG_KEY_VALUES,$n=d.CONFIG_ENUM_FIELD_VALUES.Time,er=[`light`,`dark`],tr=[{id:`example-1`,label:`Slow rolling pulse`,source:`d--u-- | d-u-d-`},{id:`example-2`,label:`Lift on the chorus`,source:`ddu--u | d-d-du`}],Z={key:`E`,time:`4/4`,tempo:70,instrument:`guitar`},nr=`<svg viewBox="0 0 14 28" aria-hidden="true"><path d="M7 3v21M2.5 19.5 7 24.5l4.5-5"/></svg>`,rr=0,Q=0,$=null;function ir(){Q+=1,$||($=document.createElement(`style`),$.textContent=Bn,$.dataset.olpStylesheet=``,document.head.append($))}function ar(){Q=Math.max(0,Q-1),Q||($?.remove(),$=null)}function or(){return tr.map(e=>({...e}))}function sr(e){let t=Math.round(Number(e));return Number.isFinite(t)?Math.min(Zn,Math.max(Xn,t)):null}function cr(e){if(!e||typeof e.id!=`string`||typeof e.label!=`string`||typeof e.source!=`string`)return!1;try{return R(e,`4/4`),!0}catch{return!1}}function lr(e){let t=null;try{t=e?JSON.parse(localStorage.getItem(e)??`null`):null}catch{t=null}if(!t||typeof t!=`object`)return{...Z,patterns:or()};let n=Array.isArray(t.patterns)?t.patterns.filter(cr).map(({id:e,label:t,source:n})=>({id:e,label:t,source:n})):null;return{key:Qn.includes(t.key)?t.key:Z.key,time:$n.includes(t.time)?t.time:Z.time,tempo:sr(t.tempo)??Z.tempo,instrument:F(t.instrument)?.id??Z.instrument,patterns:n??or()}}function ur(e){return e?e.direction:`rest`}function dr(){let e=document.createElement(`template`);return e.innerHTML=`<svg class="icon-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.5 5.8v12.4a.8.8 0 0 0 1.2.7l9.6-6.2a.8.8 0 0 0 0-1.4L9.7 5.1a.8.8 0 0 0-1.2.7z"/></svg><svg class="icon-stop" viewBox="0 0 24 24" aria-hidden="true"><rect x="6.5" y="6.5" width="11" height="11" rx="1.6"/></svg>`,Array.from(e.content.children)}function fr(e,t,n){let r=t.steps[n],i=t.counts[n]??String(n+1),a=`${i} (step ${n+1}): ${ur(r)}`,[o,s]=Array.from(e.children);e.classList.toggle(`is-active`,!!r),e.classList.toggle(`step--break`,t.groupBreaks.includes(n)),e.setAttribute(`aria-label`,`${a}. Press to change.`),e.title=a,o.innerHTML=r?nr:``,o.firstElementChild?.classList.toggle(`stroke-up`,r?.direction===`up`),s.textContent=i}function pr(e,t){let n=document.createElement(`button`);n.type=`button`,n.className=`step`,n.dataset.step=String(t+1),n.dataset.action=`cycle`;for(let e of[`stroke`,`count`]){let t=document.createElement(`span`);t.className=`step__${e}`,t.setAttribute(`aria-hidden`,`true`),n.append(t)}return fr(n,e,t),n}function mr(e){let t=document.createElement(`article`),n=document.createElement(`div`),r=document.createElement(`button`),i=document.createElement(`span`),a=document.createElement(`h3`),o=document.createElement(`button`),s=document.createElement(`div`),c=document.createElement(`p`);return t.className=`pattern-card`,t.dataset.patternId=e.id,t.dataset.state=`idle`,n.className=`pattern-card__header`,r.className=`pattern-card__play`,r.type=`button`,r.dataset.action=`toggle`,i.className=`spinner`,i.setAttribute(`aria-hidden`,`true`),r.append(...dr(),i),a.className=`pattern-card__name`,a.textContent=e.label,o.className=`pattern-card__remove`,o.type=`button`,o.dataset.action=`remove`,o.textContent=`×`,o.title=`Remove ${e.label}`,o.setAttribute(`aria-label`,`Remove ${e.label}`),n.append(r,a,o),s.className=`pattern-card__steps`,s.setAttribute(`role`,`group`),s.setAttribute(`aria-label`,`${e.label} steps`),s.append(...e.steps.map((t,n)=>pr(e,n))),c.className=`pattern-card__source`,c.append(Object.assign(document.createElement(`code`),{textContent:e.source})),t.append(n,s,c),t}var hr=class{player;#e;#t;#n;#r;#i;#a=null;#o=null;#s=null;#c=[];#l;#u=new Map;#d=null;#f=null;#p=0;constructor(e){if(!(e?.container instanceof HTMLElement))throw TypeError("OpenLyricPlayerPlayground needs a `container` element.");this.#e=e.container,this.#t=!e.player,this.player=e.player??new U,this.#n=e.storageKey===void 0?Yn:e.storageKey,this.#r=this.#h(e.theme),this.#i=`olp-${++rr}`,this.#l=lr(this.#n)}get element(){return this.#a}get theme(){return this.#r}setTheme(e){this.#r=this.#h(e),this.#g()}render(){this.#m(),ir();let e=document.createElement(`div`),t=new AbortController;return e.className=`olp-playground`,e.innerHTML=qn(this.#i),this.#a=e,this.#s=t,this.#o=Object.fromEntries(Jn.map(t=>{let n=e.querySelector(`[data-olp-ref="${t}"]`);if(!n)throw Error(`The playground markup is missing ${t}.`);return[t,n]})),this.#g(),this.#e.append(e),this.#z(t.signal),this.#S(),this.#w(),this.#T(),this.#D(),this.#x(t.signal),this}destroy(){this.#m(),this.#t&&this.player.destroy()}#m(){this.#a&&(this.#u.has(this.player.patternId??``)&&this.player.stop(),this.#s?.abort(),this.#c.forEach(e=>e()),this.#c=[],this.#a.remove(),this.#a=null,this.#o=null,this.#s=null,this.#f=null,this.#d=null,ar())}#h(e){if(e!=null){if(!er.includes(e))throw TypeError(`Unknown theme “${String(e)}” — use 'light' or 'dark'.`);return e}}#g(){this.#a&&(this.#r?this.#a.dataset.theme=this.#r:delete this.#a.dataset.theme,this.#f?.refresh())}#_(){if(this.#n)try{localStorage.setItem(this.#n,JSON.stringify(this.#l))}catch{}}#v(){return F(this.#l.instrument)??ke[0]}#y(){return this.player.getVoicing(this.#l.instrument,this.#l.key)}#b(e,t=`info`){this.#o&&(this.#o.status.textContent=e,this.#o.status.dataset.tone=t)}#x(e){this.player.loadChords().then(()=>{e.aborted||!this.#a||!this.#o||(this.#T(),this.#f=Kn({root:this.#a,groups:this.#o.chords,summary:this.#o.chordsSummary,cardId:`${this.#i}-chord-card`,player:this.player,signal:e,getInstrument:()=>this.#v(),getKey:()=>this.#l.key,onError:e=>this.#b(e,`error`)}))},t=>{e.aborted||!this.#o||(this.#o.voicing.textContent=``,this.#b(`Could not load chord voicings: ${t instanceof Error?t.message:String(t)}`,`error`))})}#S(){let e=this.#o,t=this.#l;e.key.replaceChildren(...Qn.map(e=>new Option(e,e,!1,e===t.key))),e.time.replaceChildren(...$n.map(e=>new Option(e,e,!1,e===t.time))),e.tempo.value=String(t.tempo),e.tempoRange.value=String(t.tempo)}#C(e){let t=this.#o,n=sr(e)??this.#l.tempo;this.#l.tempo=n,t.tempo.value=String(n),t.tempoRange.value=String(n)}#w(){this.#o.instruments.replaceChildren(...ke.map(e=>{let t=document.createElement(`label`),n=document.createElement(`input`),r=document.createElement(`span`),i=document.createElement(`span`),a=document.createElement(`span`),o=document.createElement(`span`);return t.className=`instrument`,n.type=`radio`,n.name=`${this.#i}-instrument`,n.value=e.id,n.checked=e.id===this.#l.instrument,r.className=`instrument__text`,i.className=`instrument__name`,i.textContent=e.label,a.className=`instrument__sound`,a.textContent=e.soundfont.title,o.className=`instrument__switch`,o.setAttribute(`aria-hidden`,`true`),r.append(i,a),t.append(n,r,o),t}))}#T(){let e=this.#o;if(!this.player.chordsLoaded){e.voicing.textContent=`Loading chord voicings…`;return}let t=this.#y(),n=this.#v();if(!t){e.voicing.textContent=`No ${n.label} voicing for the key of ${this.#l.key}.`;return}let r=document.createElement(`div`),i=document.createElement(`div`);if(r.append(`Strums `),r.append(Object.assign(document.createElement(`strong`),{textContent:t.chord})),t.card.kind===`diagram`){let{frets:e,baseFret:n}=t.card.voicing;r.append(` — frets `),r.append(Object.assign(document.createElement(`code`),{textContent:e.map(e=>e<0?`x`:String(e===0?0:e+n-1)).join(` `)}))}i.className=`voicing__notes`,i.append(...t.midi.map(e=>Object.assign(document.createElement(`span`),{className:`voicing__note`,textContent:I(e,this.#l.key)}))),e.voicing.replaceChildren(r,i)}#E(e){return this.#o?.patterns.querySelector(`.pattern-card[data-pattern-id="${CSS.escape(e)}"]`)??null}#D(){let e=this.#o;this.#u=new Map;for(let e of this.#l.patterns)try{this.#u.set(e.id,R(e,this.#l.time))}catch(t){console.warn(`Skipping pattern ${e.label}:`,t)}this.#d=null,e.patterns.replaceChildren(...Array.from(this.#u.values(),mr)),e.patternsEmpty.hidden=this.#u.size>0,this.#O()}#O(){let e=this.#o;if(e)for(let t of e.patterns.querySelectorAll(`.pattern-card`)){let e=t.dataset.patternId===this.player.patternId?this.player.state:`idle`,n=t.querySelector(`.pattern-card__play`),r=this.#u.get(t.dataset.patternId)?.label??`pattern`;t.dataset.state=e,n.setAttribute(`aria-pressed`,String(e!==`idle`)),n.setAttribute(`aria-label`,e===`idle`?`Play ${r}`:`Stop ${r}`),n.title=e===`idle`?`Play ${r}`:`Stop ${r}`}}#k(e,t){this.#d?.classList.remove(`is-current`),this.#d=t==null?null:this.#E(e)?.querySelector(`.step[data-step="${t}"]`)??null,this.#d?.classList.add(`is-current`)}#A(e){let t=this.#u.get(e);if(t){if(!this.#y()){this.#b(this.player.chordsLoaded?`No ${this.#v().label} voicing for the key of ${this.#l.key}.`:`Chord voicings are still loading.`,`error`);return}this.player.playPattern({pattern:t,key:this.#l.key,tempo:this.#l.tempo,time:this.#l.time,instrument:this.#l.instrument}).catch(e=>this.#b(`Could not play: ${e instanceof Error?e.message:String(e)}`,`error`))}}#j(){let{patternId:e}=this.player;this.player.state!==`idle`&&e&&this.#u.has(e)&&this.#A(e)}#M(e,t){let n=this.#l,r=n.patterns.findIndex(t=>t.id===e);if(r===-1)return;let i=Ue(n.patterns[r],t,n.time),a=R(i,n.time),o=this.#E(e);n.patterns[r]=i,this.#u.set(e,a),this.#_(),o?.querySelectorAll(`.step`).forEach((e,t)=>fr(e,a,t));let s=o?.querySelector(`.pattern-card__source code`);s&&(s.textContent=a.source),this.player.updatePattern(a)}#N(e){let t=this.#u.get(e);this.player.patternId===e&&this.player.stop(),this.#l.patterns=this.#l.patterns.filter(t=>t.id!==e),this.#_(),this.#D(),this.#b(t?`Removed ${t.label}.`:``)}#P(){return this.#p+=1,`custom-${Date.now().toString(36)}-${this.#p}`}#F(){let e=this.#l.patterns.reduce((e,t)=>{let n=/^Pattern (\d+)$/.exec(t.label);return n?Math.max(e,Number(n[1])):e},0)+1;return()=>`Pattern ${e++}`}#I(){let e=this.#o;e.addError.textContent=``;try{let t=He(e.input.value,()=>this.#P(),this.#F());this.#l.patterns.push(...t),this.#_(),this.#D(),e.input.value=``,this.#b(`Added ${t.map(e=>e.label).join(`, `)}.`)}catch(t){e.addError.textContent=t instanceof Error?t.message:String(t)}}#L(){let e=this.#l.patterns.filter(e=>!tr.some(t=>t.id===e.id));tr.some(e=>e.id===this.player.patternId)&&this.player.stop(),this.#l.patterns=[...or(),...e],this.#_(),this.#D(),this.#b(`Restored the example patterns.`)}#R({state:e,patternId:t,error:n}){this.#O(),e!==`playing`&&this.#k(``,null);let r=t?this.#u.get(t):null;t&&!r||(e===`loading`?this.#b(`Loading ${this.#v().soundfont.title}…`):e===`playing`&&r?this.#b(`Playing ${r.label} — ${this.#y()?.chord??this.#l.key} on ${this.#v().label}, ${this.#l.tempo} bpm, ${this.#l.time}.`):n?this.#b(`Could not play: ${n instanceof Error?n.message:String(n)}`,`error`):this.#b(``))}#z(e){let t=this.#o,n=this.#l,r={signal:e};this.#c.push(this.player.on(`state`,e=>this.#R(e)),this.player.on(`step`,({patternId:e,stepNumber:t})=>this.#k(e,t))),t.patterns.addEventListener(`click`,e=>{let t=e.target.closest(`[data-action]`),n=t?.closest(`.pattern-card`)?.dataset.patternId;if(!(!t||!n))switch(t.dataset.action){case`toggle`:this.player.patternId===n&&this.player.state!==`idle`?this.player.stop():this.#A(n);break;case`remove`:this.#N(n);break;case`cycle`:this.#M(n,Number(t.dataset.step)-1)}},r),t.key.addEventListener(`change`,()=>{n.key=t.key.value,this.#_(),this.#T(),this.#f?.refresh(),this.#j()},r),t.time.addEventListener(`change`,()=>{n.time=t.time.value,this.#_(),this.#D(),this.#j()},r),t.tempoRange.addEventListener(`input`,()=>this.#C(t.tempoRange.value),r);for(let e of[t.tempo,t.tempoRange])e.addEventListener(`change`,()=>{this.#C(e.value),this.#_(),this.#j()},r);t.instruments.addEventListener(`change`,e=>{let t=F(e.target.value);t&&(n.instrument=t.id,this.#_(),this.#T(),this.#f?.refresh(),this.player.state===`idle`?this.player.preload(t.id).catch(()=>{}):this.#j())},r),t.add.addEventListener(`click`,()=>this.#I(),r),t.input.addEventListener(`keydown`,e=>{e.key===`Enter`&&(e.ctrlKey||e.metaKey)&&(e.preventDefault(),this.#I())},r),t.restore.addEventListener(`click`,()=>this.#L(),r)}},gr=`0.1.10`;exports.OpenLyricPlayer=U,exports.OpenLyricPlayerPlayground=hr,exports.OpenLyricPluginPlayer=zn,exports.version=gr;
 //# sourceMappingURL=index.cjs.map