diff --git a/packages/react/dist/index.cjs.js b/packages/react/dist/index.cjs.js index 48db00d7..b029045c 100644 --- a/packages/react/dist/index.cjs.js +++ b/packages/react/dist/index.cjs.js @@ -1,3 +1,3 @@ -"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var t=require("react"),oe=require("@uiw/react-codemirror"),E=require("@codemirror/view"),L=require("@codemirror/state"),ne=require("@codemirror/lang-javascript"),i=require("@lezer/highlight"),se=require("@uiw/codemirror-themes"),ce=require("react-hook-inview"),le=require("@strudel.cycles/eval"),ie=require("@strudel.cycles/core/util.mjs"),y=require("@strudel.cycles/tone"),O=require("@strudel.cycles/core"),M=require("@strudel.cycles/midi");function K(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var m=K(t),ue=K(oe),I=se.createTheme({theme:"dark",settings:{background:"#111",foreground:"#75baff",caret:"#ffcc00",selection:"rgba(128, 203, 196, 0.5)",selectionMatch:"#036dd626",lineHighlight:"#8a91991a",gutterBackground:"transparent",gutterForeground:"#676e95"},styles:[{tag:i.tags.keyword,color:"#c792ea"},{tag:i.tags.operator,color:"#89ddff"},{tag:i.tags.special(i.tags.variableName),color:"#eeffff"},{tag:i.tags.typeName,color:"#f07178"},{tag:i.tags.atom,color:"#f78c6c"},{tag:i.tags.number,color:"#ff5370"},{tag:i.tags.definition(i.tags.variableName),color:"#82aaff"},{tag:i.tags.string,color:"#c3e88d"},{tag:i.tags.special(i.tags.string),color:"#f07178"},{tag:i.tags.comment,color:"#7d8799"},{tag:i.tags.variableName,color:"#f07178"},{tag:i.tags.tagName,color:"#ff5370"},{tag:i.tags.bracket,color:"#a2a1a4"},{tag:i.tags.meta,color:"#ffcb6b"},{tag:i.tags.attributeName,color:"#c792ea"},{tag:i.tags.propertyName,color:"#c792ea"},{tag:i.tags.className,color:"#decb6b"},{tag:i.tags.invalid,color:"#ffffff"}]});const V=L.StateEffect.define(),de=L.StateField.define({create(){return E.Decoration.none},update(e,r){try{for(let n of r.effects)if(n.is(V))if(n.value){const u=E.Decoration.mark({attributes:{style:"background-color: #FFCA2880"}});e=E.Decoration.set([u.range(0,r.newDoc.length)])}else e=E.Decoration.set([]);return e}catch(n){return console.warn("flash error",n),e}},provide:e=>E.EditorView.decorations.from(e)}),Q=e=>{e.dispatch({effects:V.of(!0)}),setTimeout(()=>{e.dispatch({effects:V.of(!1)})},200)},A=L.StateEffect.define(),fe=L.StateField.define({create(){return E.Decoration.none},update(e,r){try{for(let n of r.effects)n.is(A)&&(e=E.Decoration.set(n.value.flatMap(u=>(u.context.locations||[]).map(({start:d,end:l})=>{const c=u.context.color||"#FFCA28";let f=r.newDoc.line(d.line).from+d.column,o=r.newDoc.line(l.line).from+l.column;const s=r.newDoc.length;return f>s||o>s?void 0:E.Decoration.mark({attributes:{style:`outline: 1.5px solid ${c};`}}).range(f,o)})).filter(Boolean),!0));return e}catch{return e}},provide:e=>E.EditorView.decorations.from(e)});function J({value:e,onChange:r,onViewChanged:n,onCursor:u,options:d,editorDidMount:l}){return console.log("coodemirrrorrr",I),m.default.createElement(m.default.Fragment,null,m.default.createElement(ue.default,{value:e,onChange:(c,f)=>{r(c)},onCreateEditor:c=>{n(c)},extensions:[ne.javascript(),I,fe,de]}))}function G(e){const{onEvent:r,onQuery:n,onSchedule:u,ready:d=!0,onDraw:l}=e,[c,f]=t.useState(!1),o=1,s=()=>Math.floor(y.Tone.getTransport().seconds/o),C=(p=s())=>{const D=new O.TimeSpan(p,p+1),q=n?.(new O.State(D))||[];u?.(q,p);const F=D.begin.valueOf();y.Tone.getTransport().cancel(F);const w=(p+1)*o-.5,N=Math.max(y.Tone.getTransport().seconds,w)+.1;y.Tone.getTransport().schedule(()=>{C(p+1)},N),q?.filter(b=>b.part.begin.equals(b.whole?.begin)).forEach(b=>{y.Tone.getTransport().schedule(v=>{r(v,b,y.Tone.getContext().currentTime),y.Tone.Draw.schedule(()=>{l?.(v,b)},v)},b.part.begin.valueOf())})};t.useEffect(()=>{d&&C()},[r,u,n,l,d]);const _=async()=>{f(!0),await y.Tone.start(),y.Tone.getTransport().start("+0.1")},T=()=>{y.Tone.getTransport().pause(),f(!1)};return{start:_,stop:T,onEvent:r,started:c,setStarted:f,toggle:()=>c?T():_(),query:C,activeCycle:s}}function X(e){return t.useEffect(()=>(window.addEventListener("message",e),()=>window.removeEventListener("message",e)),[e]),t.useCallback(r=>window.postMessage(r,"*"),[])}let ge=()=>Math.floor((1+Math.random())*65536).toString(16).substring(1);const me=e=>encodeURIComponent(btoa(e));function Y({tune:e,defaultSynth:r,autolink:n=!0,onEvent:u,onDraw:d}){const l=t.useMemo(()=>ge(),[]),[c,f]=t.useState(e),[o,s]=t.useState(),[C,_]=t.useState(""),[T,k]=t.useState(),[p,D]=t.useState(!1),[q,F]=t.useState(""),[w,N]=t.useState(),b=t.useMemo(()=>c!==o||T,[c,o,T]),v=t.useCallback(g=>_(a=>a+`${a?` +"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var t=require("react"),re=require("@uiw/react-codemirror"),E=require("@codemirror/view"),L=require("@codemirror/state"),oe=require("@codemirror/lang-javascript"),l=require("@lezer/highlight"),ne=require("@uiw/codemirror-themes"),se=require("react-hook-inview"),ce=require("@strudel.cycles/eval"),ie=require("@strudel.cycles/core/util.mjs"),y=require("@strudel.cycles/tone"),O=require("@strudel.cycles/core"),M=require("@strudel.cycles/midi");function K(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var g=K(t),le=K(re),ue=ne.createTheme({theme:"dark",settings:{background:"#222",foreground:"#75baff",caret:"#ffcc00",selection:"rgba(128, 203, 196, 0.5)",selectionMatch:"#036dd626",lineHighlight:"#8a91991a",gutterBackground:"transparent",gutterForeground:"#676e95"},styles:[{tag:l.tags.keyword,color:"#c792ea"},{tag:l.tags.operator,color:"#89ddff"},{tag:l.tags.special(l.tags.variableName),color:"#eeffff"},{tag:l.tags.typeName,color:"#f07178"},{tag:l.tags.atom,color:"#f78c6c"},{tag:l.tags.number,color:"#ff5370"},{tag:l.tags.definition(l.tags.variableName),color:"#82aaff"},{tag:l.tags.string,color:"#c3e88d"},{tag:l.tags.special(l.tags.string),color:"#f07178"},{tag:l.tags.comment,color:"#7d8799"},{tag:l.tags.variableName,color:"#f07178"},{tag:l.tags.tagName,color:"#ff5370"},{tag:l.tags.bracket,color:"#a2a1a4"},{tag:l.tags.meta,color:"#ffcb6b"},{tag:l.tags.attributeName,color:"#c792ea"},{tag:l.tags.propertyName,color:"#c792ea"},{tag:l.tags.className,color:"#decb6b"},{tag:l.tags.invalid,color:"#ffffff"}]});const V=L.StateEffect.define(),de=L.StateField.define({create(){return E.Decoration.none},update(e,r){try{for(let n of r.effects)if(n.is(V))if(n.value){const u=E.Decoration.mark({attributes:{style:"background-color: #FFCA2880"}});e=E.Decoration.set([u.range(0,r.newDoc.length)])}else e=E.Decoration.set([]);return e}catch(n){return console.warn("flash error",n),e}},provide:e=>E.EditorView.decorations.from(e)}),Q=e=>{e.dispatch({effects:V.of(!0)}),setTimeout(()=>{e.dispatch({effects:V.of(!1)})},200)},A=L.StateEffect.define(),fe=L.StateField.define({create(){return E.Decoration.none},update(e,r){try{for(let n of r.effects)n.is(A)&&(e=E.Decoration.set(n.value.flatMap(u=>(u.context.locations||[]).map(({start:d,end:i})=>{const c=u.context.color||"#FFCA28";let m=r.newDoc.line(d.line).from+d.column,o=r.newDoc.line(i.line).from+i.column;const s=r.newDoc.length;return m>s||o>s?void 0:E.Decoration.mark({attributes:{style:`outline: 1.5px solid ${c};`}}).range(m,o)})).filter(Boolean),!0));return e}catch{return e}},provide:e=>E.EditorView.decorations.from(e)});function U({value:e,onChange:r,onViewChanged:n,onCursor:u,options:d,editorDidMount:i}){return g.default.createElement(g.default.Fragment,null,g.default.createElement(le.default,{value:e,onChange:c=>{r(c)},onCreateEditor:c=>{n(c)},extensions:[oe.javascript(),ue,fe,de]}))}function J(e){const{onEvent:r,onQuery:n,onSchedule:u,ready:d=!0,onDraw:i}=e,[c,m]=t.useState(!1),o=1,s=()=>Math.floor(y.Tone.getTransport().seconds/o),C=(p=s())=>{const S=new O.TimeSpan(p,p+1),N=n?.(new O.State(S))||[];u?.(N,p);const F=S.begin.valueOf();y.Tone.getTransport().cancel(F);const w=(p+1)*o-.5,R=Math.max(y.Tone.getTransport().seconds,w)+.1;y.Tone.getTransport().schedule(()=>{C(p+1)},R),N?.filter(b=>b.part.begin.equals(b.whole?.begin)).forEach(b=>{y.Tone.getTransport().schedule(v=>{r(v,b,y.Tone.getContext().currentTime),y.Tone.Draw.schedule(()=>{i?.(v,b)},v)},b.part.begin.valueOf())})};t.useEffect(()=>{d&&C()},[r,u,n,i,d]);const k=async()=>{m(!0),await y.Tone.start(),y.Tone.getTransport().start("+0.1")},_=()=>{y.Tone.getTransport().pause(),m(!1)};return{start:k,stop:_,onEvent:r,started:c,setStarted:m,toggle:()=>c?_():k(),query:C,activeCycle:s}}function G(e){return t.useEffect(()=>(window.addEventListener("message",e),()=>window.removeEventListener("message",e)),[e]),t.useCallback(r=>window.postMessage(r,"*"),[])}let ge=()=>Math.floor((1+Math.random())*65536).toString(16).substring(1);const me=e=>encodeURIComponent(btoa(e));function X({tune:e,defaultSynth:r,autolink:n=!0,onEvent:u,onDraw:d}){const i=t.useMemo(()=>ge(),[]),[c,m]=t.useState(e),[o,s]=t.useState(),[C,k]=t.useState(""),[_,T]=t.useState(),[p,S]=t.useState(!1),[N,F]=t.useState(""),[w,R]=t.useState(),b=t.useMemo(()=>c!==o||_,[c,o,_]),v=t.useCallback(f=>k(a=>a+`${a?` -`:""}${g}`),[]),W=t.useMemo(()=>{if(o&&!o.includes("strudel disable-highlighting"))return(g,a)=>d?.(g,a,o)},[o,d]),P=t.useMemo(()=>o&&o.includes("strudel hide-header"),[o]),H=t.useMemo(()=>o&&o.includes("strudel hide-console"),[o]),h=G({onDraw:W,onEvent:t.useCallback((g,a,te)=>{try{u?.(a),a.context.logs?.length&&a.context.logs.forEach(v);const{onTrigger:S,velocity:ae}=a.context;if(S)S(g,a,te,1);else if(r){const re=ie.getPlayableNoteValue(a);r.triggerAttackRelease(re,a.duration.valueOf(),g,ae)}else throw new Error("no defaultSynth passed to useRepl.")}catch(S){console.warn(S),S.message="unplayable event: "+S?.message,v(S.message)}},[u,v,r]),onQuery:t.useCallback(g=>{try{return w?.query(g)||[]}catch(a){return console.warn(a),a.message="query error: "+a.message,k(a),[]}},[w]),onSchedule:t.useCallback((g,a)=>ee(g,a),[]),ready:!!w&&!!o}),j=X(({data:{from:g,type:a}})=>{a==="start"&&g!==l&&(h.setStarted(!1),s(void 0))}),B=t.useCallback(async(g=c)=>{if(o&&!b){k(void 0),h.start();return}try{D(!0);const a=await le.evaluate(g);h.start(),j({type:"start",from:l}),N(()=>a.pattern),n&&(window.location.hash="#"+encodeURIComponent(btoa(c))),F(me(c)),k(void 0),s(g),D(!1)}catch(a){a.message="evaluation error: "+a.message,console.warn(a),k(a)}},[o,b,c,h,n,l,j]),ee=(g,a)=>{g.length};return{hideHeader:P,hideConsole:H,pending:p,code:c,setCode:f,pattern:w,error:T,cycle:h,setPattern:N,dirty:b,log:C,togglePlay:()=>{h.started?h.stop():B()},setActiveCode:s,activateCode:B,activeCode:o,pushLog:v,hash:q}}function z(...e){return e.filter(Boolean).join(" ")}let R=[],U;function Z({view:e,pattern:r,active:n}){t.useEffect(()=>{if(e)if(r&&n){let d=function(){try{const l=y.Tone.getTransport().seconds,f=[Math.max(U||l,l-1/10),l+1/60];U=l+1/60,R=R.filter(s=>s.whole.end>l);const o=r.queryArc(...f).filter(s=>s.hasOnset());R=R.concat(o),e.dispatch({effects:A.of(R)})}catch{e.dispatch({effects:A.of([])})}u=requestAnimationFrame(d)},u=requestAnimationFrame(d);return()=>{cancelAnimationFrame(u)}}else R=[],e.dispatch({effects:A.of([])})},[r,n,e])}const he="_container_xpa19_1",pe="_header_xpa19_5",be="_buttons_xpa19_9",ve="_button_xpa19_9",ye="_buttonDisabled_xpa19_17",we="_error_xpa19_21",Me="_body_xpa19_25";var x={container:he,header:pe,buttons:be,button:ve,buttonDisabled:ye,error:we,body:Me};function $({type:e}){return m.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:m.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:m.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:m.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 Ee({tune:e,defaultSynth:r,hideOutsideView:n=!1,theme:u,init:d,onEvent:l,enableKeyboard:c}){const{code:f,setCode:o,pattern:s,activeCode:C,activateCode:_,evaluateOnly:T,error:k,cycle:p,dirty:D,togglePlay:q,stop:F}=Y({tune:e,defaultSynth:r,autolink:!1,onEvent:l});t.useEffect(()=>{d&&T()},[e,d]);const[w,N]=t.useState(),[b,v]=ce.useInView({threshold:.01}),W=t.useRef(),P=t.useMemo(()=>((v||!n)&&(W.current=!0),v||W.current),[v,n]);return Z({view:w,pattern:s,active:p.started&&!C?.includes("strudel disable-highlighting")}),t.useLayoutEffect(()=>{if(c){const H=async h=>{(h.ctrlKey||h.altKey)&&(h.code==="Enter"?(h.preventDefault(),Q(w),await _()):h.code==="Period"&&(p.stop(),h.preventDefault()))};return window.addEventListener("keydown",H,!0),()=>window.removeEventListener("keydown",H,!0)}},[c,s,f,_,p,w]),m.default.createElement("div",{className:x.container,ref:b},m.default.createElement("div",{className:x.header},m.default.createElement("div",{className:x.buttons},m.default.createElement("button",{className:z(x.button,p.started?"sc-animate-pulse":""),onClick:()=>q()},m.default.createElement($,{type:p.started?"pause":"play"})),m.default.createElement("button",{className:z(D?x.button:x.buttonDisabled),onClick:()=>_()},m.default.createElement($,{type:"refresh"}))),k&&m.default.createElement("div",{className:x.error},k.message)),m.default.createElement("div",{className:x.body},P&&m.default.createElement(J,{value:f,onChange:o,onViewChanged:N})))}function Ce(e){const{ready:r,connected:n,disconnected:u}=e,[d,l]=t.useState(!0),[c,f]=t.useState(M.WebMidi?.outputs||[]);return t.useEffect(()=>{M.enableWebMidi().then(()=>{M.WebMidi.addListener("connected",s=>{f([...M.WebMidi.outputs]),n?.(M.WebMidi,s)}),M.WebMidi.addListener("disconnected",s=>{f([...M.WebMidi.outputs]),u?.(M.WebMidi,s)}),r?.(M.WebMidi),l(!1)}).catch(s=>{if(s){console.error(s),console.warn("Web Midi could not be enabled..");return}})},[r,n,u,c]),{loading:d,outputs:c,outputByName:s=>M.WebMidi.getOutputByName(s)}}exports.CodeMirror=J;exports.MiniRepl=Ee;exports.cx=z;exports.flash=Q;exports.useCycle=G;exports.useHighlighting=Z;exports.usePostMessage=X;exports.useRepl=Y;exports.useWebMidi=Ce; +`:""}${f}`),[]),W=t.useMemo(()=>{if(o&&!o.includes("strudel disable-highlighting"))return(f,a)=>d?.(f,a,o)},[o,d]),P=t.useMemo(()=>o&&o.includes("strudel hide-header"),[o]),H=t.useMemo(()=>o&&o.includes("strudel hide-console"),[o]),h=J({onDraw:W,onEvent:t.useCallback((f,a,ee)=>{try{u?.(a),a.context.logs?.length&&a.context.logs.forEach(v);const{onTrigger:q,velocity:te}=a.context;if(q)q(f,a,ee,1);else if(r){const ae=ie.getPlayableNoteValue(a);r.triggerAttackRelease(ae,a.duration.valueOf(),f,te)}else throw new Error("no defaultSynth passed to useRepl.")}catch(q){console.warn(q),q.message="unplayable event: "+q?.message,v(q.message)}},[u,v,r]),onQuery:t.useCallback(f=>{try{return w?.query(f)||[]}catch(a){return console.warn(a),a.message="query error: "+a.message,T(a),[]}},[w]),onSchedule:t.useCallback((f,a)=>Z(f,a),[]),ready:!!w&&!!o}),j=G(({data:{from:f,type:a}})=>{a==="start"&&f!==i&&(h.setStarted(!1),s(void 0))}),B=t.useCallback(async(f=c)=>{if(o&&!b){T(void 0),h.start();return}try{S(!0);const a=await ce.evaluate(f);h.start(),j({type:"start",from:i}),R(()=>a.pattern),n&&(window.location.hash="#"+encodeURIComponent(btoa(c))),F(me(c)),T(void 0),s(f),S(!1)}catch(a){a.message="evaluation error: "+a.message,console.warn(a),T(a)}},[o,b,c,h,n,i,j]),Z=(f,a)=>{f.length};return{hideHeader:P,hideConsole:H,pending:p,code:c,setCode:m,pattern:w,error:_,cycle:h,setPattern:R,dirty:b,log:C,togglePlay:()=>{h.started?h.stop():B()},setActiveCode:s,activateCode:B,activeCode:o,pushLog:v,hash:N}}function z(...e){return e.filter(Boolean).join(" ")}let x=[],I;function Y({view:e,pattern:r,active:n}){t.useEffect(()=>{if(e)if(r&&n){let d=function(){try{const i=y.Tone.getTransport().seconds,m=[Math.max(I||i,i-1/10),i+1/60];I=i+1/60,x=x.filter(s=>s.whole.end>i);const o=r.queryArc(...m).filter(s=>s.hasOnset());x=x.concat(o),e.dispatch({effects:A.of(x)})}catch{e.dispatch({effects:A.of([])})}u=requestAnimationFrame(d)},u=requestAnimationFrame(d);return()=>{cancelAnimationFrame(u)}}else x=[],e.dispatch({effects:A.of([])})},[r,n,e])}const he="_container_3i85k_1",pe="_header_3i85k_5",be="_buttons_3i85k_9",ve="_button_3i85k_9",ye="_buttonDisabled_3i85k_17",we="_error_3i85k_21",Me="_body_3i85k_25";var D={container:he,header:pe,buttons:be,button:ve,buttonDisabled:ye,error:we,body:Me};function $({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 Ee({tune:e,defaultSynth:r,hideOutsideView:n=!1,theme:u,init:d,onEvent:i,enableKeyboard:c}){const{code:m,setCode:o,pattern:s,activeCode:C,activateCode:k,evaluateOnly:_,error:T,cycle:p,dirty:S,togglePlay:N,stop:F}=X({tune:e,defaultSynth:r,autolink:!1,onEvent:i});t.useEffect(()=>{d&&_()},[e,d]);const[w,R]=t.useState(),[b,v]=se.useInView({threshold:.01}),W=t.useRef(),P=t.useMemo(()=>((v||!n)&&(W.current=!0),v||W.current),[v,n]);return Y({view:w,pattern:s,active:p.started&&!C?.includes("strudel disable-highlighting")}),t.useLayoutEffect(()=>{if(c){const H=async h=>{(h.ctrlKey||h.altKey)&&(h.code==="Enter"?(h.preventDefault(),Q(w),await k()):h.code==="Period"&&(p.stop(),h.preventDefault()))};return window.addEventListener("keydown",H,!0),()=>window.removeEventListener("keydown",H,!0)}},[c,s,m,k,p,w]),g.default.createElement("div",{className:D.container,ref:b},g.default.createElement("div",{className:D.header},g.default.createElement("div",{className:D.buttons},g.default.createElement("button",{className:z(D.button,p.started?"sc-animate-pulse":""),onClick:()=>N()},g.default.createElement($,{type:p.started?"pause":"play"})),g.default.createElement("button",{className:z(S?D.button:D.buttonDisabled),onClick:()=>k()},g.default.createElement($,{type:"refresh"}))),T&&g.default.createElement("div",{className:D.error},T.message)),g.default.createElement("div",{className:D.body},P&&g.default.createElement(U,{value:m,onChange:o,onViewChanged:R})))}function Ce(e){const{ready:r,connected:n,disconnected:u}=e,[d,i]=t.useState(!0),[c,m]=t.useState(M.WebMidi?.outputs||[]);return t.useEffect(()=>{M.enableWebMidi().then(()=>{M.WebMidi.addListener("connected",s=>{m([...M.WebMidi.outputs]),n?.(M.WebMidi,s)}),M.WebMidi.addListener("disconnected",s=>{m([...M.WebMidi.outputs]),u?.(M.WebMidi,s)}),r?.(M.WebMidi),i(!1)}).catch(s=>{if(s){console.error(s),console.warn("Web Midi could not be enabled..");return}})},[r,n,u,c]),{loading:d,outputs:c,outputByName:s=>M.WebMidi.getOutputByName(s)}}exports.CodeMirror=U;exports.MiniRepl=Ee;exports.cx=z;exports.flash=Q;exports.useCycle=J;exports.useHighlighting=Y;exports.usePostMessage=G;exports.useRepl=X;exports.useWebMidi=Ce; diff --git a/packages/react/dist/index.es.js b/packages/react/dist/index.es.js index 895dfe5b..82f34146 100644 --- a/packages/react/dist/index.es.js +++ b/packages/react/dist/index.es.js @@ -15,7 +15,7 @@ import { WebMidi, enableWebMidi } from '@strudel.cycles/midi'; var strudelTheme = createTheme({ theme: 'dark', settings: { - background: '#111', + background: '#222', foreground: '#75baff', // whats that? caret: '#ffcc00', selection: 'rgba(128, 203, 196, 0.5)', @@ -110,10 +110,9 @@ const highlightField = StateField.define({ provide: (f) => EditorView.decorations.from(f) }); function CodeMirror({ value, onChange, onViewChanged, onCursor, options, editorDidMount }) { - console.log("coodemirrrorrr", strudelTheme); return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(_CodeMirror, { value, - onChange: (value2, viewUpdate) => { + onChange: (value2) => { onChange(value2); }, onCreateEditor: (view) => { @@ -422,13 +421,13 @@ function useHighlighting({ view, pattern, active }) { var tailwind = ''; -const container = "_container_xpa19_1"; -const header = "_header_xpa19_5"; -const buttons = "_buttons_xpa19_9"; -const button = "_button_xpa19_9"; -const buttonDisabled = "_buttonDisabled_xpa19_17"; -const error = "_error_xpa19_21"; -const body = "_body_xpa19_25"; +const container = "_container_3i85k_1"; +const header = "_header_3i85k_5"; +const buttons = "_buttons_3i85k_9"; +const button = "_button_3i85k_9"; +const buttonDisabled = "_buttonDisabled_3i85k_17"; +const error = "_error_3i85k_21"; +const body = "_body_3i85k_25"; var styles = { container: container, header: header, diff --git a/packages/react/dist/style.css b/packages/react/dist/style.css index a2aaf8ee..41602289 100644 --- a/packages/react/dist/style.css +++ b/packages/react/dist/style.css @@ -1 +1 @@ -.cm-editor{background-color:transparent!important;height:100%;z-index:11;font-size:16px}.cm-theme-light{width:100%}.cm-line>*{background:#00000095}*,:before,:after{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.sc-h-5{height:1.25rem}.sc-w-5{width:1.25rem}@keyframes sc-pulse{50%{opacity:.5}}.sc-animate-pulse{animation:sc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}._container_xpa19_1{overflow:hidden;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(17 17 17 / var(--tw-bg-opacity))}._header_xpa19_5{display:flex;justify-content:space-between;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}._buttons_xpa19_9{display:flex}._button_xpa19_9{display:flex;width:4rem;cursor:pointer;align-items:center;justify-content:center;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._button_xpa19_9:hover{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}._buttonDisabled_xpa19_17{display:flex;width:4rem;cursor:pointer;cursor:not-allowed;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}._error_xpa19_21{padding:.25rem;text-align:right;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity))}._body_xpa19_25{position:relative;overflow:auto} +.cm-editor{background-color:transparent!important;height:100%;z-index:11;font-size:16px}.cm-theme-light{width:100%}.cm-line>*{background:#00000095}*,:before,:after{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.sc-h-5{height:1.25rem}.sc-w-5{width:1.25rem}@keyframes sc-pulse{50%{opacity:.5}}.sc-animate-pulse{animation:sc-pulse 2s cubic-bezier(.4,0,.6,1) infinite}._container_3i85k_1{overflow:hidden;border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgb(34 34 34 / var(--tw-bg-opacity))}._header_3i85k_5{display:flex;justify-content:space-between;border-top-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}._buttons_3i85k_9{display:flex}._button_3i85k_9{display:flex;width:4rem;cursor:pointer;align-items:center;justify-content:center;border-right-width:1px;--tw-border-opacity: 1;border-color:rgb(100 116 139 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._button_3i85k_9:hover{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}._buttonDisabled_3i85k_17{display:flex;width:4rem;cursor:pointer;cursor:not-allowed;align-items:center;justify-content:center;--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity));padding:.25rem;--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity))}._error_3i85k_21{padding:.25rem;text-align:right;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity))}._body_3i85k_25{position:relative;overflow:auto} diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx index 483f8c1b..8ecca220 100644 --- a/packages/react/src/components/CodeMirror6.jsx +++ b/packages/react/src/components/CodeMirror6.jsx @@ -79,12 +79,11 @@ const highlightField = StateField.define({ }); export default function CodeMirror({ value, onChange, onViewChanged, onCursor, options, editorDidMount }) { - console.log('coodemirrrorrr', strudelTheme); return ( <> <_CodeMirror value={value} - onChange={(value, viewUpdate) => { + onChange={(value) => { onChange(value); }} onCreateEditor={(view) => { diff --git a/packages/react/src/components/MiniRepl.module.css b/packages/react/src/components/MiniRepl.module.css index 7826f9fb..28f64e6c 100644 --- a/packages/react/src/components/MiniRepl.module.css +++ b/packages/react/src/components/MiniRepl.module.css @@ -1,5 +1,5 @@ .container { - @apply sc-rounded-md sc-overflow-hidden sc-bg-[#111111]; + @apply sc-rounded-md sc-overflow-hidden sc-bg-[#222222]; } .header { diff --git a/packages/react/src/themes/strudel-theme.js b/packages/react/src/themes/strudel-theme.js index c13f93c6..514883a5 100644 --- a/packages/react/src/themes/strudel-theme.js +++ b/packages/react/src/themes/strudel-theme.js @@ -3,7 +3,7 @@ import { createTheme } from '@uiw/codemirror-themes'; export default createTheme({ theme: 'dark', settings: { - background: '#111', + background: '#222', foreground: '#75baff', // whats that? caret: '#ffcc00', selection: 'rgba(128, 203, 196, 0.5)',