strudel/packages/react/dist/index.cjs.js

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var o=require("react"),te=require("react-codemirror6"),q=require("@codemirror/view"),I=require("@codemirror/state"),oe=require("@codemirror/lang-javascript"),n=require("@codemirror/highlight"),ae=require("react-hook-inview"),re=require("@strudel.cycles/eval"),ne=require("@strudel.cycles/core/util.mjs"),b=require("@strudel.cycles/tone"),O=require("@strudel.cycles/core"),v=require("@strudel.cycles/midi");function ce(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var g=ce(o);const se="#abb2bf",le="#7d8799",ie="#ffffff",ue="#21252b",P="rgba(0, 0, 0, 0.5)",de="transparent",W="#353a42",fe="rgba(128, 203, 196, 0.2)",z="#ffcc00",ge=q.EditorView.theme({"&":{color:"#ffffff",backgroundColor:de,fontSize:"15px","z-index":11},".cm-content":{caretColor:z,lineHeight:"22px"},".cm-line":{background:"#2C323699"},"&.cm-focused .cm-cursor":{borderLeftColor:z},"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":{backgroundColor:fe},".cm-panels":{backgroundColor:ue,color:"#ffffff"},".cm-panels.cm-panels-top":{borderBottom:"2px solid black"},".cm-panels.cm-panels-bottom":{borderTop:"2px solid black"},".cm-searchMatch":{backgroundColor:"#72a1ff59",outline:"1px solid #457dff"},".cm-searchMatch.cm-searchMatch-selected":{backgroundColor:"#6199ff2f"},".cm-activeLine":{backgroundColor:P},".cm-selectionMatch":{backgroundColor:"#aafe661a"},"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{backgroundColor:"#bad0f847",outline:"1px solid #515a6b"},".cm-gutters":{background:"#2C323699",color:"#676e95",border:"none"},".cm-activeLineGutter":{backgroundColor:P},".cm-foldPlaceholder":{backgroundColor:"transparent",border:"none",color:"#ddd"},".cm-tooltip":{border:"none",backgroundColor:W},".cm-tooltip .cm-tooltip-arrow:before":{borderTopColor:"transparent",borderBottomColor:"transparent"},".cm-tooltip .cm-tooltip-arrow:after":{borderTopColor:W,borderBottomColor:W},".cm-tooltip-autocomplete":{"& > ul > li[aria-selected]":{backgroundColor:P,color:se}}},{dark:!0}),me=n.HighlightStyle.define([{tag:n.tags.keyword,color:"#c792ea"},{tag:n.tags.operator,color:"#89ddff"},{tag:n.tags.special(n.tags.variableName),color:"#eeffff"},{tag:n.tags.typeName,color:"#f07178"},{tag:n.tags.atom,color:"#f78c6c"},{tag:n.tags.number,color:"#ff5370"},{tag:n.tags.definition(n.tags.variableName),color:"#82aaff"},{tag:n.tags.string,color:"#c3e88d"},{tag:n.tags.special(n.tags.string),color:"#f07178"},{tag:n.tags.comment,color:le},{tag:n.tags.variableName,color:"#f07178"},{tag:n.tags.tagName,color:"#ff5370"},{tag:n.tags.bracket,color:"#a2a1a4"},{tag:n.tags.meta,color:"#ffcb6b"},{tag:n.tags.attributeName,color:"#c792ea"},{tag:n.tags.propertyName,color:"#c792ea"},{tag:n.tags.className,color:"#decb6b"},{tag:n.tags.invalid,color:ie}]),be=[ge,me],B=I.StateEffect.define(),pe=I.StateField.define({create(){return q.Decoration.none},update(e,a){try{for(let i of a.effects)i.is(B)&&(e=q.Decoration.set(i.value.flatMap(u=>(u.context.locations||[]).map(({start:m,end:c})=>{const s=u.context.color||"#FFCA28";let d=a.newDoc.line(m.line).from+m.column,r=a.newDoc.line(c.line).from+c.column;const l=a.newDoc.length;return d>l||r>l?void 0:q.Decoration.mark({attributes:{style:`outline: 1px solid ${s}`}}).range(d,r)})).filter(Boolean),!0));return e}catch{return e}},provide:e=>q.EditorView.decorations.from(e)});function $({value:e,onChange:a,onViewChanged:i,onCursor:u,options:m,editorDidMount:c}){return g.default.createElement(g.default.Fragment,null,g.default.createElement(te.CodeMirror,{onViewChange:i,style:{display:"flex",flexDirection:"column",flex:"1 0 auto"},value:e,onChange:a,extensions:[oe.javascript(),be,pe]}))}function Q(e){const{onEvent:a,onQuery:i,onSchedule:u,ready:m=!0,onDraw:c}=e,[s,d]=o.useState(!1),r=1,l=()=>Math.floor(b.Tone.getTransport().seconds/r),C=(p=l())=>{const E=new O.TimeSpan(p,p+1),D=i?.(new O.State(E))||[];u?.(D,p);const H=E.begin.valueOf();b.Tone.getTransport().cancel(H);const S=(p+1)*r-.5,R=Math.max(b.Tone.getTransport().seconds,S)+.1;b.Tone.getTransport().schedule(()=>{C(p+1)},R),D?.filter(h=>h.part.begin.equals(h.whole?.begin)).forEach(h=>{b.Tone.getTransport().schedule(k=>{a(k,h,b.Tone.getContext().currentTime),b.Tone.Draw.schedule(()=>{c?.(k,h)},k)},h.part.begin.valueOf())})};o.useEffect(()=>{m&&C()},[a,u,i,c,m]);const x=async()=>{d(!0),await b.Tone.start(),b.Tone.getTransport().start("+0.1")},w=()=>{b.Tone.getTransport().pause(),d(!1)};return{start:x,stop:w,onEvent:a,started:s,setStarted:d,toggle:()=>s?w():x(),query:C,activeCycle:l}}function U(e){return o.useEffect(()=>(window.addEventListener("message",e),()=>window.removeEventListener("message",e)),[e]),o.useCallback(a=>window.postMessage(a,"*"),[])}let he=()=>Math.floor((1+Math.random())*65536).toString(16).substring(1);const ve=e=>encodeURIComponent(btoa(e));function G({tune:e,defaultSynth:a,autolink:i=!0,onEvent:u,onDraw:m}){const c=o.useMemo(()=>he(),[]),[s,d]=o.useState(e),[r,l]=o.useState(),[C,x]=o.useState(""),[w,y]=o.useState(),[p,E]=o.useState(!1),[D,H]=o.useState(""),[S,R]=o.useState(),h=o.useMemo(()=>s!==r||w,[s,r,w]),k=o.useCallback(f=>x(t=>t+`${t?`

`:""}${f}`),[]),K=o.useMemo(()=>{if(r&&!r.includes("strudel disable-highlighting"))return(f,t)=>m?.(f,t,r)},[r,m]),T=Q({onDraw:K,onEvent:o.useCallback((f,t,Y)=>{try{u?.(t),t.context.logs?.length&&t.context.logs.forEach(k);const{onTrigger:_,velocity:Z}=t.context;if(_)_(f,t,Y,1,t.wholeOrPart().begin.valueOf(),t.duration.valueOf());else if(a){const ee=ne.getPlayableNoteValue(t);a.triggerAttackRelease(ee,t.duration.valueOf(),f,Z)}else throw new Error("no defaultSynth passed to useRepl.")}catch(_){console.warn(_),_.message="unplayable event: "+_?.message,k(_.message)}},[u,k,a]),onQuery:o.useCallback(f=>{try{return S?.query(f)||[]}catch(t){return console.warn(t),t.message="query error: "+t.message,y(t),[]}},[S]),onSchedule:o.useCallback((f,t)=>X(f,t),[]),ready:!!S&&!!r}),L=U(({data:{from:f,type:t}})=>{t==="start"&&f!==c&&(T.setStarted(!1),l(void 0))}),A=o.useCallback(async(f=s)=>{if(r&&!h){y(void 0),T.start();return}try{E(!0);const t=await re.evaluate(f);T.start(),L({type:"start",from:c}),R(()=>t.pattern),i&&(window.location.hash="#"+encodeURIComponent(btoa(s))),H(ve(s)),y(void 0),l(f),E(!1)}catch(t){t.message="evaluation error: "+t.message,console.warn(t),y(t)}},[r,h,s,T,i,c,L]),X=(f,t)=>{f.length};return{pending:p,code:s,setCode:d,pattern:S,error:w,cycle:T,setPattern:R,dirty:h,log:C,togglePlay:()=>{T.started?T.stop():A()},setActiveCode:l,activateCode:A,activeCode:r,pushLog:k,hash:D}}function V(...e){return e.filter(Boolean).join(" ")}let N=[],F;function J({view:e,pattern:a,active:i}){o.useEffect(()=>{if(e)if(a&&i){let m=function(){try{const c=b.Tone.getTransport().seconds,s=[F||c,c+1/60];F=c+1/60,N=N.filter(r=>r.whole.end>c);const d=a.queryArc(...s).filter(r=>r.hasOnset());N=N.concat(d),e.dispatch({effects:B.of(N)})}catch{e.dispatch({effects:B.of([])})}u=requestAnimationFrame(m)},u=requestAnimationFrame(m);return()=>{cancelAnimationFrame(u)}}else N=[],e.dispatch({effects:B.of([])})},[a,i,e])}const ye="_container_10e1g_1",Ce="_header_10e1g_5",we="_buttons_10e1g_9",ke="_button_10e1g_9",Me="_buttonDisabled_10e1g_17",Ee="_error_10e1g_21",Te="_body_10e1g_25";var M={container:ye,header:Ce,buttons:we,button:ke,buttonDisabled:Me,error:Ee,body:Te};function j({type:e}){return g.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",className:"sc-h-5 sc-w-5",viewBox:"0 0 20 20",fill:"currentColor"},{refresh:g.default.createElement("path",{fillRule:"evenodd",d:"M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z",clipRule:"evenodd"}),play:g.default.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z",clipRule:"evenodd"}),pause:g.default.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z",clipRule:"evenodd"})}[e])}function _e({tune:e,defaultSynth:a}){const{code:i,setCode:u,pattern:m,activateCode:c,error:s,cycle:d,dirty:r,togglePlay:l}=G({tune:e,defaultSynth:a,autolink:!1}),[C,x]=o.useState(),[w,y]=ae.useInView({threshold:.01}),p=o.useRef(),E=o.useMemo(()=>(y&&(p.current=!0),y||p.current),[y]);return J({view:C,pattern:m,active:d.started}),g.default.createElement("div",{className:M.container,ref:w},g.default.createElement("div",{className:M.header},g.default.createElement("div",{className:M.buttons},g.default.createElement("button",{className:V(M.button,d.started?"sc-animate-pulse":""),onClick:()=>l()},g.default.createElement(j,{type:d.started?"pause":"play"})),g.default.createElement("button",{className:V(r?M.button:M.buttonDisabled),onClick:()=>c()},g.default.createElement(j,{type:"refresh"}))),s&&g.default.createElement("div",{className:M.error},s.message)),g.default.createElement("div",{className:M.body},E&&g.default.createElement($,{value:i,onChange:u,onViewChanged:x})))}function xe(e){const{ready:a,connected:i,disconnected:u}=e,[m,c]=o.useState(!0),[s,d]=o.useState(v.WebMidi?.outputs||[]);return o.useEffect(()=>{v.enableWebMidi().then(()=>{v.WebMidi.addListener("connected",l=>{d([...v.WebMidi.outputs]),i?.(v.WebMidi,l)}),v.WebMidi.addListener("disconnected",l=>{d([...v.WebMidi.outputs]),u?.(v.WebMidi,l)}),a?.(v.WebMidi),c(!1)}).catch(l=>{if(l){console.error(l),console.warn("Web Midi could not be enabled..");return}})},[a,i,u,s]),{loading:m,outputs:s,outputByName:l=>v.WebMidi.getOutputByName(l)}}exports.CodeMirror=$;exports.MiniRepl=_e;exports.cx=V;exports.useCycle=Q;exports.useHighlighting=J;exports.usePostMessage=U;exports.useRepl=G;exports.useWebMidi=xe;