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

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var t=require("react"),re=require("react-codemirror6"),H=require("@codemirror/view"),U=require("@codemirror/state"),ne=require("@codemirror/lang-javascript"),n=require("@codemirror/highlight"),se=require("react-hook-inview"),ce=require("@strudel.cycles/eval"),le=require("@strudel.cycles/core/util.mjs"),b=require("@strudel.cycles/tone"),I=require("@strudel.cycles/core"),y=require("@strudel.cycles/midi");function ie(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var u=ie(t);const ue="#abb2bf",de="#7d8799",fe="#ffffff",ge="#21252b",A="rgba(0, 0, 0, 0.5)",me="transparent",L="#353a42",pe="rgba(128, 203, 196, 0.5)",$="#ffcc00",be=H.EditorView.theme({"&":{color:"#ffffff",backgroundColor:me,fontSize:"15px","z-index":11},".cm-content":{caretColor:$,lineHeight:"22px"},".cm-line":{background:"#2C323699"},"&.cm-focused .cm-cursor":{backgroundColor:$,width:"3px"},"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":{backgroundColor:pe},".cm-panels":{backgroundColor:ge,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:A},".cm-selectionMatch":{backgroundColor:"#aafe661a"},"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{backgroundColor:"#bad0f847",outline:"1px solid #515a6b"},".cm-gutters":{background:"transparent",color:"#676e95",border:"none"},".cm-activeLineGutter":{backgroundColor:A},".cm-foldPlaceholder":{backgroundColor:"transparent",border:"none",color:"#ddd"},".cm-tooltip":{border:"none",backgroundColor:L},".cm-tooltip .cm-tooltip-arrow:before":{borderTopColor:"transparent",borderBottomColor:"transparent"},".cm-tooltip .cm-tooltip-arrow:after":{borderTopColor:L,borderBottomColor:L},".cm-tooltip-autocomplete":{"& > ul > li[aria-selected]":{backgroundColor:A,color:ue}}},{dark:!0}),he=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:de},{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:fe}]),ve=[be,he],W=U.StateEffect.define(),ye=U.StateField.define({create(){return H.Decoration.none},update(e,a){try{for(let i of a.effects)i.is(W)&&(e=H.Decoration.set(i.value.flatMap(d=>(d.context.locations||[]).map(({start:g,end:s})=>{const c=d.context.color||"#FFCA28";let m=a.newDoc.line(g.line).from+g.column,l=a.newDoc.line(s.line).from+s.column;const r=a.newDoc.length;return m>r||l>r?void 0:H.Decoration.mark({attributes:{style:`outline: 1px solid ${c}`}}).range(m,l)})).filter(Boolean),!0));return e}catch{return e}},provide:e=>H.EditorView.decorations.from(e)});function G({value:e,onChange:a,onViewChanged:i,onCursor:d,options:g,editorDidMount:s,theme:c}){return u.default.createElement(u.default.Fragment,null,u.default.createElement(re.CodeMirror,{onViewChange:i,style:{display:"flex",flexDirection:"column",flex:"1 0 auto"},value:e,onChange:a,extensions:[ne.javascript(),c||ve,ye]}))}function J(e){const{onEvent:a,onQuery:i,onSchedule:d,ready:g=!0,onDraw:s}=e,[c,m]=t.useState(!1),l=1,r=()=>Math.floor(b.Tone.getTransport().seconds/l),E=(h=r())=>{const _=new I.TimeSpan(h,h+1),q=i?.(new I.State(_))||[];d?.(q,h);const B=_.begin.valueOf();b.Tone.getTransport().cancel(B);const T=(h+1)*l-.5,R=Math.max(b.Tone.getTransport().seconds,T)+.1;b.Tone.getTransport().schedule(()=>{E(h+1)},R),q?.filter(p=>p.part.begin.equals(p.whole?.begin)).forEach(p=>{b.Tone.getTransport().schedule(v=>{a(v,p,b.Tone.getContext().currentTime),b.Tone.Draw.schedule(()=>{s?.(v,p)},v)},p.part.begin.valueOf())})};t.useEffect(()=>{g&&E()},[a,d,i,s,g]);const N=async()=>{m(!0),await b.Tone.start(),b.Tone.getTransport().start("+0.1")},C=(h=!1)=>{h?(b.Tone.getTransport().cancel(),b.Tone.getTransport().stop()):b.Tone.getTransport().pause(),m(!1)};return{start:N,stop:C,onEvent:a,started:c,setStarted:m,toggle:()=>c?C():N(),query:E,activeCycle:r}}function K(e){return t.useEffect(()=>(window.addEventListener("message",e),()=>window.removeEventListener("message",e)),[e]),t.useCallback(a=>window.postMessage(a,"*"),[])}let Ce=()=>Math.floor((1+Math.random())*65536).toString(16).substring(1);const we=e=>encodeURIComponent(btoa(e));function X({tune:e,defaultSynth:a,autolink:i=!0,onEvent:d,onDraw:g}){const s=t.useMemo(()=>Ce(),[]),[c,m]=t.useState(e),[l,r]=t.useState(),[E,N]=t.useState(""),[C,w]=t.useState(),[h,_]=t.useState(!1),[q,B]=t.useState(""),[T,R]=t.useState(),p=t.useMemo(()=>c!==l||C,[c,l,C]),v=t.useCallback(f=>N(o=>o+`${o?`

`:""}${f}`),[]),V=t.useMemo(()=>{if(l&&!l.includes("strudel disable-highlighting"))return(f,o)=>g?.(f,o,l)},[l,g]),x=J({onDraw:V,onEvent:t.useCallback((f,o,M)=>{try{d?.(f,o,M),o.context.logs?.length&&o.context.logs.forEach(v);const{onTrigger:S,velocity:oe}=o.context;if(S)S(f,o,M,1,o.wholeOrPart().begin.valueOf(),o.duration.valueOf());else if(a){const ae=le.getPlayableNoteValue(o);a.triggerAttackRelease(ae,o.duration.valueOf(),f,oe)}else if(!d)throw new Error("no defaultSynth nor onEvent passed to useRepl + event has no onTrigger. nothing happens")}catch(S){console.warn(S),S.message="unplayable event: "+S?.message,v(S.message)}},[d,v,a]),onQuery:t.useCallback(f=>{try{return T?.query(f)||[]}catch(o){return console.warn(o),o.message="query error: "+o.message,w(o),[]}},[T]),onSchedule:t.useCallback((f,o)=>Z(f,o),[]),ready:!!T&&!!l}),F=K(({data:{from:f,type:o}})=>{o==="start"&&f!==s&&(x.setStarted(!1),r(void 0))}),z=t.useCallback(async(f=c,o=!1)=>{if(l&&!p){w(void 0),!o&&x.start();return}try{_(!0);const M=await ce.evaluate(f);!o&&x.start(),F({type:"start",from:s}),R(()=>M.pattern),i&&(window.location.hash="#"+encodeURIComponent(btoa(c))),B(we(c)),w(void 0),r(f),_(!1)}catch(M){M.message="evaluation error: "+M.message,console.warn(M),w(M)}},[l,p,c,x,i,s,F]),Z=(f,o)=>{f.length},ee=()=>{x.started?x.stop():z()},j=()=>{x.stop(!0),r(void 0)},te=()=>{z(c,!0)};return t.useEffect(()=>()=>j(),[]),{pending:h,code:c,setCode:m,pattern:T,error:C,cycle:x,setPattern:R,dirty:p,log:E,togglePlay:ee,stop:j,setActiveCode:r,activateCode:z,evaluateOnly:te,activeCode:l,pushLog:v,hash:q}}function P(...e){return e.filter(Boolean).join(" ")}let D=[],Q;function Y({view:e,pattern:a,active:i}){t.useEffect(()=>{if(e)if(a&&i){let g=function(){try{const s=b.Tone.getTransport().seconds,m=[Math.max(Q||s,s-1/10),s+1/60];Q=s+1/60,D=D.filter(r=>r.whole.end>s);const l=a.queryArc(...m).filter(r=>r.hasOnset());D=D.concat(l),e.dispatch({effects:W.of(D)})}catch{e.dispatch({effects:W.of([])})}d=requestAnimationFrame(g)},d=requestAnimationFrame(g);return()=>{cancelAnimationFrame(d)}}else D=[],e.dispatch({effects:W.of([])})},[a,i,e])}const Me="_container_10e1g_1",ke="_header_10e1g_5",Ee="_buttons_10e1g_9",Te="_button_10e1g_9",xe="_buttonDisabled_10e1g_17",_e="_error_10e1g_21",Se="_body_10e1g_25";var k={container:Me,header:ke,buttons:Ee,button:Te,buttonDisabled:xe,error:_e,body:Se};function O({type:e}){return u.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:u.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:u.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:u.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"}),stop:u.default.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z",clipRule:"evenodd"})}[e])}function Ne({tune:e,defaultSynth:a,hideOutsideView:i=!1,theme:d,init:g,onEvent:s}){const{code:c,setCode:m,pattern:l,activeCode:r,activateCode:E,evaluateOnly:N,error:C,cycle:w,dirty:h,togglePlay:_,stop:q}=X({tune:e,defaultSynth:a,autolink:!1,onEvent:s});t.useEffect(()=>{g&&N()},[e,g]);const[B,T]=t.useState(),[R,p]=se.useInView({threshold:.01}),v=t.useRef(),V=t.useMemo(()=>((p||!i)&&(v.current=!0),p||v.current),[p,i]);return Y({view:B,pattern:l,active:w.started&&!r?.includes("strudel disable-highlighting")}),u.default.createElement("div",{className:k.container,ref:R},u.default.createElement("div",{className:k.header},u.default.createElement("div",{className:k.buttons},u.default.createElement("button",{className:P(k.button,w.started?"sc-animate-pulse":""),onClick:()=>_()},u.default.createElement(O,{type:w.started?"pause":"play"})),u.default.createElement("button",{className:P(h?k.button:k.buttonDisabled),onClick:()=>E()},u.default.createElement(O,{type:"refresh"})),u.default.createElement("button",{className:P(k.button),onClick:()=>q(!0)},u.default.createElement(O,{type:"stop"}))),C&&u.default.createElement("div",{className:k.error},C.message)),u.default.createElement("div",{className:k.body},V&&u.default.createElement(G,{theme:d,value:c,onChange:m,onViewChanged:T})))}function qe(e){const{ready:a,connected:i,disconnected:d}=e,[g,s]=t.useState(!0),[c,m]=t.useState(y.WebMidi?.outputs||[]);return t.useEffect(()=>{y.enableWebMidi().then(()=>{y.WebMidi.addListener("connected",r=>{m([...y.WebMidi.outputs]),i?.(y.WebMidi,r)}),y.WebMidi.addListener("disconnected",r=>{m([...y.WebMidi.outputs]),d?.(y.WebMidi,r)}),a?.(y.WebMidi),s(!1)}).catch(r=>{if(r){console.error(r),console.warn("Web Midi could not be enabled..");return}})},[a,i,d,c]),{loading:g,outputs:c,outputByName:r=>y.WebMidi.getOutputByName(r)}}exports.CodeMirror=G;exports.MiniRepl=Ne;exports.cx=P;exports.useCycle=J;exports.useHighlighting=Y;exports.usePostMessage=K;exports.useRepl=X;exports.useWebMidi=qe;