@web-noise/core 0.0.1

package/dist/module.js

@@ -0,0 +1,602 @@
+let e,o;import{jsxs as t,jsx as r,Fragment as n}from"react/jsx-runtime";import{withTheme as i,ThemeProvider as l,Global as a,css as d,useTheme as s}from"@emotion/react";import c from"@emotion/styled";import{nanoid as h}from"nanoid";import{useState as p,useEffect as g,useMemo as u,useCallback as m,useRef as f}from"react";import{FaPlus as v}from"react-icons/fa6";import{MdClose as y,MdDragHandle as x,MdSettings as w}from"react-icons/md";import"reactflow/dist/style.css";import b,{getConnectedEdges as C,addEdge as $,applyNodeChanges as N,applyEdgeChanges as k,useOnViewportChange as P,Background as z,BackgroundVariant as E,MiniMap as j,Controls as A,ReactFlowProvider as S,useReactFlow as M,Position as F,Handle as D,ControlButton as T,getBezierPath as H}from"reactflow";import{create as W}from"zustand";import{reverse as _,patch as O,create as I}from"jsondiffpatch";import{injectGlobal as L}from"@emotion/css";import{useContextMenu as R,Item as B,Menu as G,Separator as V}from"react-contexify";import"react-contexify/dist/ReactContexify.css";import U from"js-file-download";import J from"hotkeys-js";import{FileDrop as X}from"react-file-drop";import{FaFileUpload as Y,FaQuestion as q,FaVolumeOff as K,FaMap as Q,FaRegMap as Z}from"react-icons/fa";import{Resizable as ee}from"re-resizable";import eo from"react-grid-layout";import"react-grid-layout/css/styles.css";import{AiFillLock as et,AiFillUnlock as er}from"react-icons/ai";import{RxDashboard as en}from"react-icons/rx";import ei from"react-modern-drawer";import"react-modern-drawer/dist/index.css";import{marked as el}from"marked";function ea(e){return e&&e.__esModule?e.default:e}let ed=[],es={},ec=new URL(ea("data:application/javascript,class%20e%20extends%20AudioWorkletProcessor%7Bprocess%28%29%7Breturn%210%7D%7DregisterProcessor%28%22dump-node-processor%22%2Ce%29%3Bexport%7Be%20as%20DumpNodeProcessor%7D%3B"),"file:///packages/patch/src/createPatch.ts"),eh="web-noise-drag-handle",ep=`.${eh}`,eg=10,eu=e=>JSON.parse(JSON.stringify(e)),em=(e,o)=>{let t=new Set(e.map(e=>e.id)),r=new Set(o.map(e=>e.id));return{added:o.filter(e=>!t.has(e.id)),removed:e.filter(e=>!r.has(e.id))}};var ef=W((e=(...e)=>{let[o,t]=e;return{...((e,o)=>({nodes:[],edges:[],onNodesChange:o=>{e(({nodes:e})=>({nodes:N(o,e).map(e=>({dragHandle:ep,...e}))}))},onEdgesChange:o=>{e(({edges:e})=>({edges:k(o,e)}))},onConnect:o=>{e(({edges:e})=>({edges:$(o,e)}))},addNode:o=>{e(({nodes:e})=>({nodes:e.concat(o)}))},setNodes:o=>{e({nodes:o})},setEdges:o=>{e({edges:o})},setNodesAndEdges:({nodes:o,edges:t})=>{e({nodes:o,edges:t})},getNodesAndEdges:()=>{let{nodes:e,edges:t}=o();return{nodes:e,edges:t}},clearElements:()=>{e({nodes:[],edges:[]})},getNode:e=>{let{nodes:t}=o();return t.find(o=>o.id===e)||null},updateNodeData:(o,t)=>{e(({nodes:e})=>({nodes:e.map(e=>e.id===o?{...e,data:{...e.data,...t}}:e)}))},nodeTypes:{},setNodeTypes:o=>e({nodeTypes:o})}))(...e),...((e,o)=>({history:{maxHistoryLength:5,buffer:[],pointer:0,skipCollect:!1,push:t=>{let{history:r}=o(),{maxHistoryLength:n,skipCollect:i}=r;if(i)return void e({history:{...r,skipCollect:!1}});e(({history:e})=>{if(!e)return{};let{buffer:o,pointer:r}=e,i=o.slice(Math.max(r-n+1,0),r);return{history:{...e,buffer:[...i,t],pointer:Math.min(r+1,n)}}})},back:()=>{let{nodes:t,edges:r,controlPanel:n,history:i}=o(),{buffer:l,pointer:a}=i,d=l[a-1];if(!d)return;let s=_(d);s&&e({...O(eu({nodes:t,edges:r,controlPanel:n}),s),history:{...i,pointer:a-1,skipCollect:!0}})},forward:()=>{let{nodes:t,edges:r,controlPanel:n,history:i}=o(),{buffer:l,pointer:a}=i,d=l[a];d&&e({...O(eu({nodes:t,edges:r,controlPanel:n}),d),history:{...i,pointer:a+1,skipCollect:!0}})},clear:()=>{let{history:t}=o();e({history:{...t,buffer:[],pointer:0,skipCollect:!0}})}}}))(...e),...((e,o)=>({patch:((e=new AudioContext)=>{let o=e.audioWorklet.addModule(ec).then(()=>new AudioWorkletNode(e,"dump-node-processor")),t=new Map,r=new Map,n=async r=>{let{id:n,type:i,data:l}=r;if(!i)return void t.set(n,{loading:!1,error:Error(`Node: ${n} has no type`),node:null});let a=es[i];if(!1!==a){if(!a)return void t.set(n,{loading:!1,error:Error(`Could not find handler for audio type ${i}`),node:null});t.set(n,{loading:!0,error:null,node:null});try{let r=await a(e,l),i=await o;t.set(n,{loading:!1,error:null,node:r}),Object.values(r.outputs||[]).forEach(({port:e})=>{i&&(e instanceof AudioWorkletNode&&e.connect(i),Array.isArray(e)&&e[0]instanceof AudioWorkletNode&&e[0].connect(i,e[1]))})}catch(e){t.set(n,{loading:!1,error:e,node:null})}}},i=async e=>Promise.all(e.map(n)),l=e=>{let{id:o,data:r}=e,n=t.get(o);if(!n)return void console.error(`Audio node #${o} does not exist`);let{loading:i,error:l,node:a}=n;return i?void console.error(`Audio node #${o} is yet not loaded`):l?void console.error(`Audio node #${o} is in error state: ${l.toString()}`):void(a.destroy&&a.destroy(),Object.values(a.inputs||{}).forEach(({port:e})=>e instanceof AudioNode&&e.disconnect&&e.disconnect()),Object.values(a.outputs||{}).forEach(({port:e})=>e instanceof AudioNode&&e.disconnect&&e.disconnect()),t.delete(o))},a=e=>{let{source:o,sourceHandle:n,target:i,targetHandle:l,id:a}=e,{node:d}=t.get(o)||{};if(!d)return void console.error(`can't find source node ${o}`);if(!n)return void console.error(`source handle is not defined in node ${o}`);let s=d.outputs?.[n],c=s?.port,{node:h}=t.get(i)||{};if(!h)return void console.error(`can't find target node ${h}`);if(!l)return void console.error(`source handle is not defined in node ${d}`);let p=h.inputs?.[l],g=p?.port;if(!c)return void console.error(`Can't find output port: ${o}:${n}`);if(!g)return void console.error(`Can't find input port: ${i}:${l}`);let u=g instanceof AudioNode,m=g instanceof AudioParam,f=g instanceof Array,v=u||m,y=c instanceof AudioNode,x=c instanceof Array;y&&v?c.connect(g):y&&f?c.connect(g[0],0,g[1]):x&&v?c[0].connect(g,c[1]):x&&f?c[0].connect(g[0],c[1],g[1]):(console.log(c,g),console.error("ports can be only AudioNode or AudioNodeChannel")),r.set(a,{output:s,input:p})},d=e=>{let{id:o,data:t}=e,n=r.get(o);if(!n)return void console.error(`can't find connection with id: ${o}`);let{input:{port:i},output:{port:l}}=n,a=i instanceof AudioNode,d=i instanceof AudioParam,s=i instanceof Array,c=a||d,h=l instanceof AudioNode,p=l instanceof Array;if(h&&c)l.disconnect(i);else if(h&&s)l.disconnect(i[0],0,i[1]);else if(p&&c)l[0].disconnect(i,l[1]);else if(p&&s)l[0].disconnect(i[0],l[1],i[1]);else throw console.log(l,i),Error("output port can not be only AudioNode or AudioNodeChannel");r.delete(o)};return{audioContext:e,audioNodes:t,registerAudioNode:n,registerAudioNodes:i,unregisterAudioNode:l,unregisterAudioNodes:e=>e.map(l),audioConnections:r,registerAudioConnection:a,registerAudioConnections:e=>e.map(a),unregisterAudioConnection:d,unregisterAudioConnections:e=>e.map(d)}})(),nodesState:{}}))(...e),...((e,o)=>({project:{files:[]},setProject(o){e({project:o,currentFileIndex:0})},getProject:()=>o().project,pullEditorChanges(){let{getEditorState:e,currentFileIndex:t,updateFileContent:r,project:n}=o(),i=n.files[t];r(t,{...i,file:e()})},currentFileIndex:0,setCurrentFileIndex(t){let{currentFileIndex:r}=o();t!==r&&e({currentFileIndex:t})},updateFileContent(t,r){let{project:n}=o();e({project:{...n,files:n.files.map((e,o)=>o===t?{...e,...r}:e)}})},updateFileName(t,r){let{project:n}=o();e({project:{...n,files:n.files.map((e,o)=>o===t?{...e,name:r}:e)}})},addFile(t){let{project:r}=o(),n=[...r.files,t];e({project:{...r,files:n},currentFileIndex:n.length-1})},deleteFile:t=>{let{project:r,currentFileIndex:n}=o();e({project:{...r,files:r.files.filter((e,o)=>t!==o)}}),t<=n&&e({currentFileIndex:n-1})}}))(...e),setGraph:async({nodes:e,edges:o})=>{let{patch:r,createNodes:n,createEdges:i,setNodesAndEdges:l,nodes:a,edges:d}=t();l({nodes:[],edges:[]}),await n(e),i(o)},clearGraph:()=>{let{setGraph:e}=t();e({nodes:[],edges:[]})},createNodes:async e=>{let{createNode:o}=t();await Promise.all(e.map(e=>o(e)))},createNode:e=>{let{addNode:o,nodesConfiguration:r}=t(),{type:n,id:i,data:l}=e;if(void 0===n)throw Error(`node type is not defined for node: ${i}`);o({...e,data:{...l,config:{...r[n]?.defaultConfig,...l?.config}}})},removeNode:e=>t().removeNodes([e]),removeNodes:e=>{let{edges:r,nodes:n,onNodesDelete:i,removeEdges:l,removeNodesFromControlPanel:a}=t(),d=e.map(({id:e})=>e),s=[...e,...n.filter(({parentNode:e})=>e&&d.includes(e))];a(s),l(C(s,r)),i(s);let c=s.map(({id:e})=>e);o({nodes:n.filter(({id:e})=>!c.includes(e))})},removeEdges:e=>{let{edges:r,onEdgesDelete:n}=t(),i=e.map(({id:e})=>e);n(e),o({edges:r.filter(({id:e})=>!i.includes(e))})},createEdges:e=>{let{patch:o,edges:r,setEdges:n}=t();n(e)},onConnect:async e=>{let{edges:o,createEdges:r}=t();r($(e,o))},onEdgesDelete:e=>{let{patch:o}=t()},onNodesDelete:async e=>{let{removeNodesFromControlPanel:o,patch:r}=t();o(e)},plugins:[],setPlugins:async e=>{let{setNodeTypes:r}=t();o({plugins:e});let n=e.reduce((e,o)=>({...e,...o.components.reduce((e,o)=>({...e,[o.type]:o}),{})}),{}),i=Object.keys(n).reduce((e,o)=>({...e,[o]:n[o].node}),{});Object.assign(es,Object.keys(n).reduce((e,o)=>({...e,[o]:n[o].audioNode}),{})),r(i),o(({nodesConfiguration:e})=>({nodesConfiguration:{...e,...n}}))},nodesConfiguration:{},config:{showMinimap:!1},setConfig:e=>{o(({config:o})=>({config:{...o,...e}}))},getEditorState:()=>{let{getNodesAndEdges:e,controlPanel:o,viewport:r}=t();return{...e(),controlPanel:o,viewport:r}},setEditorState:async({nodes:e,edges:r,controlPanel:n,viewport:i})=>{let{setGraph:l}=t();await l({nodes:e,edges:r}),await new Promise(e=>setTimeout(e,1e3)),o({controlPanel:n,viewport:i})},isHelpShown:!1,toggleHelp:()=>{let{isHelpShown:e}=t();o({isHelpShown:!e})},copyBuffer:{nodes:[],edges:[]},copy:e=>{o({copyBuffer:e})},copySelectedItems:()=>{let{nodes:e,edges:o,copy:r}=t(),n=e.filter(({selected:e})=>e),i=o.filter(({selected:e})=>e);n.length&&r({nodes:n,edges:i})},pasteBuffer:(e=0,r=0)=>{let{copyBuffer:n,createNodes:i,setEdges:l,nodes:a,edges:d}=t(),{nodes:s,edges:c}=n;if(!s.length)return;o({nodes:a.map(e=>({...e,selected:!1}))});let h=s.reduce((e,o)=>!e||o.position.x<e.position.x&&o.position.y<e.position.y?o:e),p=h.position.x-e,g=h.position.y-r,{nodes:u,mapping:m}=s.reduce((e,o)=>{let t=(e=>{let o=+new Date+Math.floor(1e3*Math.random());return e?.type?`${e.type}-${o}`:o.toString()})(o);return{nodes:[...e.nodes,{...o,id:t,position:{x:o.position.x-p,y:o.position.y-g},selected:!0}],mapping:{...e.mapping,[o.id]:t}}},{nodes:[],mapping:{}});i(u);let f=c.map(e=>{let o=m[e.source]||e.source,t=m[e.target]||e.target;return{...e,id:e.id.replace(e.source,o).replace(e.target,t),source:o,target:t,selected:!0}});l([...d.map(e=>({...e,selected:!1})),...f])},getControlPanelNode:e=>{let{nodesConfiguration:o}=t(),{type:r}=e;if(!r)return null;let n=o[r]?.controlPanelNode;return n||(console.error(`could not find node for type ${r}`),null)},controlPanel:{show:!0,nodes:[],size:{width:200,height:100}},showControlPanel:()=>o(({controlPanel:e})=>({controlPanel:{...e,show:!0}})),hideControlPanel:()=>o(({controlPanel:e})=>({controlPanel:{...e,show:!1}})),addNodeToControlPanel:e=>{let{nodesConfiguration:r}=t(),n=e.type?r[e.type]?.defaultConfig:{},{height:i}=n?.size||{},l={id:e.id,...i?{height:i/eg}:{}};o(({controlPanel:e})=>({controlPanel:{...e,nodes:[...e.nodes,l]}}))},removeNodeFromControlPanel:e=>t().removeNodesFromControlPanel([e]),removeNodesFromControlPanel:e=>{let t=e.map(({id:e})=>e);o(({controlPanel:e})=>{let o=e.nodes.filter(({id:e})=>!t.includes(e));return{controlPanel:{...e,nodes:o}}})},setControlPanelNodes:e=>{o(({controlPanel:o})=>({controlPanel:{...o,nodes:e}}))},setControlPanelSize:e=>{o(({controlPanel:o})=>({controlPanel:{...o,size:e}}))},viewport:{x:0,y:0,zoom:1},setViewport:e=>o({viewport:e})}},o=(o,t,r)=>{let n=((e,o)=>{let t,r=I({propertyFilter:(e,o)=>!!(o.parent?.parent?.childName==="controlPanel"||["data","position","controlPanel"].includes(o.parent?.childName))||["controlPanel","size","edges","nodes","data","label","config","values","position","x","y"].includes(e)}),n=o();return(e,i)=>{e.currentFileIndex!==i.currentFileIndex&&o().history.clear(),clearTimeout(t),n||(n=i),t=setTimeout(()=>{let t=r.diff(n,e);n=null,t&&o().history.push(t)},500)}})(0,t);return r.subscribe(n),e((...e)=>o(...e),t,r)},(e,t,r)=>{r.subscribe(async(e,o)=>{});let n=new Set,i={...t(),nodes:[],edges:[]};return o(async(...o)=>{let r=t(),[l]=o,a={...i,..."function"==typeof l?l({...i}):l},d=em(i.nodes,a.nodes),s=em(i.edges,a.edges);i=a;let c=d.added,h=s.added,p=s.removed,g=d.removed,{patch:u}=r;if(c.length){let e=u.registerAudioNodes(c);n.add(e),await e,n.delete(e)}if(!(h.length||p.length||g.length))return void e(...o);if(n.size)try{await Promise.all([...n.values()])}catch(e){console.log("some error",e)}h.length&&u.registerAudioConnections(h),p.length&&u.unregisterAudioConnections(p),g.length&&u.unregisterAudioNodes(g),e(...o)},t,r)})),ev={colors:{elevation1:"#292d39",elevation2:"#181c20",elevation3:"#373c4b",accent1:"#0066dc",accent2:"#007bff",accent3:"#3c93ff",highlight1:"#535760",highlight2:"#8c92a4",highlight3:"#fefefe",vivid1:"#14df42",whitePrimary:"#ffffff",error:"#db5353"},zIndex:{modal:9998,controlPanel:9999,resumeContextLayout:10003}};L`
+  .react-flow {
+    .react-flow__pane {
+    /* background: rgb(106 106 106); */
+    /* background: "white"; */
+    // background: #292d39;
+      background: ${ev.colors.elevation3};
+    }
+
+    .react-flow__background {
+      /* background: #efefef; */
+      stroke: white;
+    }
+
+    .react-flow__node-default {
+      background: #292d39;
+      color: white;
+      border: none;
+      /* background: transparent; */
+    }
+
+    .react-flow__node {
+      padding: 0;
+      width: auto;
+    }
+
+    .react-flow__edge-path {
+      stroke:  ${ev.colors.accent2};
+    }
+
+    .react-flow__node.selected {
+      border: 1px solid ${ev.colors.accent2};
+      box-shadow: 0 0 0 0.5px #${ev.colors.accent2};
+    }
+
+    .react-flow__node-default.selected, .react-flow__node-default.selected:hover {
+      box-shadow: 0 0 0 0.5px #${ev.colors.accent2};
+    }
+
+    /* .react-flow__minimap-mask {
+      fill: ${ev.colors.elevation1}
+    }
+
+    .react-flow__minimap-node {
+      fill:${ev.colors.accent2}
+    } */
+  }
+
+`;var ey=()=>s();let ex=c(B)``,ew=c(G)`
+  background: ${({colors:e})=>e.elevation2};
+  padding: 0;
+  border-radius: 0;
+
+  .react-contexify__item__content {
+    color: ${({colors:e})=>e.whitePrimary};
+  }
+
+  .react-contexify__separator {
+    background-color: ${({colors:e})=>e.elevation1};
+    margin: 0;
+  }
+`,eb="editor-edge-menu";var eC=()=>{let e=ey(),o=ef(e=>e.removeEdges);return r(n,{children:r(ew,{id:eb,animation:!1,colors:e.colors,children:r(ex,{onClick:e=>o([e.props.edge]),children:"Delete Edge (DEL)"})})})};let e$=c.div`
+  position: fixed;
+  z-index: ${({theme:e})=>e.zIndex.modal};
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: ${({theme:e})=>e.colors.elevation3}cc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,eN=c.div`
+  background: ${({theme:e})=>e.colors.elevation2};
+  box-shadow: 1px 1px 1px 1px ${({theme:e})=>e.colors.elevation1};
+  color: white;
+  width: 70%;
+  height: 80%;
+  overflow-y: scroll;
+  position: relative;
+`,ek=c(y)`
+  position: absolute;
+  top: 0.2rem;
+  right: 0.2rem;
+  cursor: pointer;
+`;var eP=({children:e,onClose:o,...n})=>{let i=ey();return g(()=>{let e=e=>{"Escape"===e.key&&o?.()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[o]),r(e$,{theme:i,onClick:o,children:t(eN,{...n,onClick:e=>{e.stopPropagation()},theme:i,children:[e,r(ek,{theme:i,onClick:o})]})})};let ez=c.div`
+  display: flex;
+  position: relative;
+`,eE=c.input`
+  padding-right: 2rem;
+  padding-left: 0.3rem;
+  width: 100%;
+  appearance: textfield;
+  font-size: inherit;
+  background: none;
+  border: none;
+  color: var(--leva-colors-highlight1);
+  font-family: var(--leva-fonts-mono);
+  cursor: inherit;
+  text-overflow: ellipsis;
+  outline: none;
+  appearance: textfield;
+  cursor: auto;
+  background-color: ${({theme:e})=>e.colors.elevation3};
+  border-radius: 0.1rem;
+  height: 2rem;
+  color: ${({theme:e})=>e.colors.highlight2};
+
+  &:focus,
+  &:hover {
+    box-shadow: 0 0 0 var(--leva-borderWidths-focus)
+      ${({theme:e})=>e.colors.accent2};
+    color: ${({theme:e})=>e.colors.whitePrimary};
+  }
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin-right: 1rem;
+  }
+`,ej=c.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0.6rem;
+  gap: 0.6rem;
+  border-right: 1px solid ${({theme:e})=>e.colors.elevation3};
+`,eA=c.label`
+  user-select: none;
+  input {
+    display: none;
+  }
+  input:checked + span {
+    color: ${({theme:e})=>e.colors.accent2};
+  }
+  &:hover {
+    color: ${({theme:e})=>e.colors.accent3};
+    cursor: pointer;
+  }
+`;var eS=({onChange:e,value:o})=>{let n=ey(),i=ef(({plugins:e})=>e),l=f(null);return g(()=>{l.current&&l.current.focus()},[l]),t(ej,{theme:n,children:[r(ez,{children:r(eE,{ref:l,theme:n,value:o.search||"",placeholder:"search...",onChange:t=>e({...o,search:t.target.value})})}),i.map(({name:i,components:l},a)=>i?t(eA,{theme:n,children:[r("input",{type:"checkbox",name:"plugin",value:i,checked:i===o.plugin,onChange:()=>{e({...o,plugin:i===o.plugin?null:i})}}),r("span",{children:i})]},a):null)]})};let eM=c.div`
+  width: 100%;
+`,eF=c.div`
+  padding: 1rem;
+`,eD=c.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-bottom: 10px;
+  columns: 2;
+
+  li {
+    padding: 4px;
+    &:hover {
+      color: ${({theme:e})=>e.colors.accent2};
+      cursor: pointer;
+    }
+  }
+`,eT=c.div`
+  font-size: 1.1rem;
+  padding: 0.25rem;
+  color: ${({theme:e})=>e.colors.highlight2};
+`;var eH=({onComponentClick:e,filters:{plugin:o,search:n}})=>{let i=ey(),l=ef(({plugins:e})=>e),a=u(()=>o?l.filter(({name:e})=>e===o):l,[l,o]);return r(eM,{theme:i,children:u(()=>n?a.map(e=>({...e,components:e.components.filter(({type:e})=>e.toLocaleLowerCase().includes(n.toLocaleLowerCase()))})):a,[a,n]).map(({name:o,components:n},l)=>n.length?t(eF,{theme:i,children:[r(eT,{theme:i,children:o}),r(eD,{theme:i,children:n.sort((e,o)=>e.type.toLowerCase()>o.type.toLowerCase()?1:-1).map((o,t)=>r("li",{onClick:()=>e(o),children:o.type},t))})]},l):null)})};let eW=c.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  gap: 1rem;
+`,e_=c.div`
+  flex-grow: 1;
+  height: 100%;
+  overflow-y: scroll;
+`;var eO=({isOpen:e,closeMenu:o,mousePosition:n})=>{let i=ey(),{screenToFlowPosition:l}=M(),{createNode:a}=ef(({createNode:e})=>({createNode:e})),[d,s]=p({}),c=m(({type:e})=>{let{x:t,y:r}=l(n);a({id:`${e}-${+new Date}`,type:e,data:{label:e},position:{x:t,y:r},targetPosition:F.Left,sourcePosition:F.Right}),o()},[n,l,a,o,n]);return e?r(eP,{onClose:()=>{o(),s({})},children:t(eW,{theme:i,children:[r(eS,{onChange:s,value:d}),r(e_,{theme:i,children:r(eH,{filters:d,onComponentClick:e=>{c(e),s({})}})})]})}):null};let eI=c.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+
+  .drop-zone-wrapper {
+    width: 80%;
+    height: 80%;
+  }
+
+  .drop-zone {
+    height: 100%;
+    width: 100%;
+    border-style: dashed;
+    border-width: 2px;
+    border-color: ${({theme:e})=>e.colors.highlight2};
+    opacity: 0.5;
+    cursor: pointer;
+  }
+
+  .drop-zone:hover,
+  .drop-zone-drag-over {
+    opacity: 1;
+  }
+`,eL=c.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+`,eR=c(Y)`
+  width: 100%;
+  height: 8rem;
+`,eB=c.div`
+  font-size: 2rem;
+`;var eG=({isOpen:e,closeMenu:o})=>{let n=ey(),i=ef(({setGraph:e})=>e),l=ef(e=>e.setEditorState),a=f(null),d=m(e=>{let[t]=e||[];t.text().then(JSON.parse).then(e=>{l(e),o()}).catch(console.error)},[i,o]);return e?r(eP,{onClose:o,children:t(eI,{theme:n,children:[r("input",{onChange:({target:{files:e}})=>d(e),ref:a,type:"file",className:"hidden",style:{display:"none"},accept:".json"}),r(X,{className:"drop-zone-wrapper",targetClassName:"drop-zone",draggingOverTargetClassName:"drop-zone-drag-over",onTargetClick:()=>{a.current?.click()},onDrop:e=>d(e),children:t(eL,{theme:n,children:[r(eR,{}),r(eB,{children:"click or drop file here"})]})})]})}):null};let eV=c.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+
+  .drop-zone-wrapper {
+    width: 80%;
+    height: 80%;
+  }
+
+  .drop-zone {
+    height: 100%;
+    width: 100%;
+    border-style: dashed;
+    border-width: 2px;
+    border-color: ${({theme:e})=>e.colors.highlight2};
+    opacity: 0.5;
+    cursor: pointer;
+  }
+
+  .drop-zone:hover,
+  .drop-zone-drag-over {
+    opacity: 1;
+  }
+`,eU=c.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+`,eJ=c(Y)`
+  width: 100%;
+  height: 8rem;
+`,eX=c.div`
+  font-size: 2rem;
+`;var eY=({isOpen:e,closeMenu:o})=>{let n=ey(),i=ef(e=>e.setProject),l=f(null),a=m(e=>{let[t]=e||[];t.text().then(JSON.parse).then(e=>{i(e),o()}).catch(console.error)},[i,o]);return e?r(eP,{onClose:o,children:t(eV,{theme:n,children:[r("input",{onChange:({target:{files:e}})=>a(e),ref:l,type:"file",className:"hidden",style:{display:"none"},accept:".json"}),r(X,{className:"drop-zone-wrapper",targetClassName:"drop-zone",draggingOverTargetClassName:"drop-zone-drag-over",onTargetClick:()=>{l.current?.click()},onDrop:e=>a(e),children:t(eU,{theme:n,children:[r(eJ,{}),r(eX,{children:"click or drop file here"})]})})]})}):null};let eq="editor-menu";var eK=({editorContextMenu:e=[]})=>{let o=ey(),[i,l]=p({x:0,y:0}),[a,d]=p(!1),[s,c]=p(!1),[h,f]=p(!1),v=m((e,o)=>{l({x:e,y:o}),d(!0)},[d]),y=ef(e=>e.pasteBuffer),{screenToFlowPosition:x}=M(),w=m(e=>{let{x:o,y:t}=x(e);y(o,t)},[d,x]),b=ef(({clearGraph:e})=>e),C=ef(e=>e.getEditorState),$=ef(e=>e.getProject),N=m(()=>{b()},[b]),k=ef(e=>e.toggleHelp),P=ef(e=>e.history.back),z=ef(e=>e.history.forward),E=ef(e=>e.history.pointer),j=ef(e=>e.history.buffer),A=ef(e=>e.copySelectedItems),S=ef(e=>e.nodes),F=u(()=>S.filter(({selected:e})=>e),[S]),D=ef(e=>e.copyBuffer),T=M(),H=m(()=>{U(JSON.stringify({...C()},null,2),"web-noise-patch.json")},[C,T]),W=m(()=>{U(JSON.stringify({...$()},null,2),"web-noise-project.json")},[C,T]);return g(()=>(J("command+shift+a",()=>(v(200,50),!1)),J("shift+/",()=>(k(),!1)),J("command+z",()=>(P(),!1)),J("command+shift+z",()=>(z(),!1)),J("command+c",()=>(A(),!1)),J("command+v",()=>(w({x:200,y:50}),!1)),()=>{J.unbind()}),[v,w]),t(n,{children:[r(eO,{isOpen:a,closeMenu:()=>d(!1),mousePosition:i}),r(eG,{isOpen:s,closeMenu:()=>c(!1)}),r(eY,{isOpen:h,closeMenu:()=>f(!1)}),t(ew,{id:eq,animation:!1,colors:o.colors,children:[r(ex,{onClick:({triggerEvent:{clientX:e,clientY:o}})=>v(e,o),children:"Add Node (⌘+⇧+A)"}),r(V,{}),r(ex,{onClick:N,children:"Delete All"}),r(V,{}),r(ex,{onClick:H,children:"Download patch"}),r(ex,{onClick:()=>c(!0),children:"Upload patch"}),r(V,{}),r(ex,{onClick:W,children:"Download project"}),r(ex,{onClick:()=>f(!0),children:"Upload project"}),r(V,{}),r(ex,{disabled:0===E,onClick:P,children:"Undo (⌘+z)"}),r(ex,{disabled:E===j.length,onClick:z,children:"Redo (⌘+⇧+Z)"}),r(V,{}),r(ex,{disabled:!F.length,onClick:A,children:"Copy Selected (⌘+c)"}),r(ex,{disabled:!D.nodes.length,onClick:({triggerEvent:{clientX:e,clientY:o}})=>w({x:e,y:o}),children:"Paste (⌘+v)"}),r(V,{}),e.map((e,o)=>r(ex,{children:e},o)),r(V,{}),r(ex,{onClick:k,children:"Help (⇧+?)"})]})]})};let eQ="editor-node-menu";var eZ=e=>{let o=ey(),i=ef(e=>e.removeNodes),l=ef(e=>e.addNodeToControlPanel),a=ef(e=>e.removeNodeFromControlPanel),d=ef(e=>e.copy),s=ef(e=>e.nodesConfiguration),c=ef(e=>e.controlPanel.nodes),h=m(({props:e})=>!!e?.node.type&&!!c.find(({id:o})=>o===e.node.id),[c]),p=m(({props:e})=>{if(!e?.node.type)return!1;let o=s[e.node.type];return!!o?.controlPanelNode},[s]);return r(n,{children:t(ew,{id:eQ,animation:!1,colors:o.colors,children:[r(ex,{onClick:e=>i([e.props.node]),children:"Delete Node (DEL)"}),r(ex,{hidden:(...e)=>!p(...e)||h(...e),onClick:e=>l(e.props.node),children:"Add To Control Panel"}),r(ex,{hidden:(...e)=>!p(...e)||!h(...e),onClick:e=>a(e.props.node),children:"Remove From Control Panel"}),r(ex,{onClick:e=>d({nodes:[e.props.node],edges:[]}),children:"Copy (⌘+c)"})]})})},e0=e=>ef(({patch:e})=>e).audioNodes.get(e),e1=e=>{let o=ef(({updateNodeData:e})=>e),t=m(t=>o(e,{values:t}),[e,o]);return{updateNodeValues:t,updateNodeConfig:m(t=>o(e,{config:t}),[e,o]),updateNodeLabel:m(t=>o(e,{label:t}),[e,o])}};let e2=c.input`
+  width: 100%;
+  background: none;
+  border: none;
+  text-align: center;
+  color: var(--leva-colors-highlight1);
+  font-family: var(--leva-fonts-mono);
+  font-size: var(--leva-fontSizes-root);
+  cursor: inherit;
+  text-overflow: ellipsis;
+  outline: none;
+
+  &:focus {
+    box-shadow: 0 0 0 green var(--leva-colors-accent2);
+  }
+  &:focus-within {
+    box-shadow: 0 0 0 green var(--leva-colors-accent2);
+  }
+  &:focus-vissible {
+    box-shadow: 0 0 0 green var(--leva-colors-accent2);
+  }
+  &:not([readonly]):focus {
+    color: #fff;
+    appearance: none;
+    cursor: auto;
+    background-color: var(--leva-colors-elevation2);
+    padding: 0.3rem;
+    border-radius: 0.2rem;
+  }
+`;var e3=({onChange:e,value:o="",className:t})=>{let n=f(null),[i,l]=p(!1),a=m(e=>{e.target?.select(),l(!0)},[l]),d=m(()=>{window.getSelection()?.collapseToEnd(),l(!1)},[l]),s=m(()=>{d(),n.current&&e(n.current.value)},[n,d,e]),c=m(()=>{d(),n.current&&o&&(n.current.value=o)},[n,d,o]);return g(()=>{n.current&&(n.current.value=o)},[o,n]),r(e2,{ref:n,type:"text",readOnly:!i,onDoubleClick:e=>a(e),onBlur:s,onKeyDown:e=>{switch(e.key){case"Escape":c();break;case"Enter":s()}},className:t})};let e9=c.div`
+  background-color: var(--leva-colors-elevation1);
+`,e8=c(e9)`
+  padding: 2rem 5rem;
+`,e5=c(e9)`
+  padding: 1rem 2rem;
+`,e7=c(w)`
+  font-size: 1.2rem;
+  opacity: 0.4;
+  width: 1rem;
+  &:hover {
+    opacity: 1;
+    cursor: pointer;
+  }
+`,e4=c.div`
+  position: relative;
+  font-family: var(--leva-fonts-mono);
+  font-size: var(--leva-fontSizes-root);
+  background-color: var(--leva-colors-elevation1);
+`,e6=c(e4)`
+  display: flex;
+  height: var(--leva-sizes-titleBarHeight);
+  touch-action: none;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 0%;
+  color: var(--leva-colors-highlight1);
+  padding: 0 0.4rem;
+  gap: 0.3rem;
+`,oe=c(e4)(({theme:e})=>`
+  display: grid;
+  grid-template-areas: "inputs outputs";
+  background: ${e.colors.elevation2};
+  border-bottom: 1px solid ${e.colors.elevation1};
+  color: ${e.colors.highlight3};
+  font-size: 0.6rem;
+`),oo=c.div`
+  grid-area: inputs;
+  text-align: left;
+`,ot=c.div`
+  grid-area: outputs;
+  text-align: right;
+`,or=c.div`
+  position: relative;
+  padding: 5px 10px;
+`,on=c(D)`
+  left: -3px;
+`,oi=e=>r(on,{...e,type:"target",position:F.Left}),ol=c(D)`
+  right: -3px;
+`,oa=e=>r(ol,{...e,type:"source",position:F.Right}),od=({className:e,...o})=>r(e6,{...o,className:[e,eh].join(" ")}),os=e=>{var o;let{id:n,children:i,selected:l,...a}=e,d=ey(),s=ef(({getNode:e})=>e),c=ef(e=>e.nodesConfiguration),h=u(()=>c[e.type].resizable??!1,[c,e.type]),{updateNodeLabel:g,updateNodeConfig:m}=e1(n),{data:f}=s(n)||{},v=e0(n),{ConfigNode:y}=(o=a.type,{ConfigNode:ef(e=>e.nodesConfiguration[o]?.configNode)}),[x,w]=p(!1);if(!v)return r(e8,{className:eh,children:"can't find audio node"});if(v.loading)return r(e8,{className:eh,children:"loading"});if(v.error)return t(e5,{className:eh,children:["error: ",v.error.toString()]});if(!v.node)return r(e8,{className:eh,children:"can't find audio node"});let b=f?.config?.size,{node:{inputs:C,outputs:$}}=v;return t(e9,{children:[t(od,{children:[r(e3,{value:f?.label??"No Name",onChange:g}),y&&r(e7,{onClickCapture:()=>w(e=>!e)})]}),t(oe,{theme:d,children:[r(oo,{children:C?Object.keys(C).map((e,o)=>t(or,{children:[r(oi,{id:e}),r("span",{children:e})]},o)):null}),r(ot,{children:$?Object.keys($).map((e,o)=>t(or,{children:[r(oa,{id:e}),r("span",{children:e})]},o)):null})]}),y&&x&&l?r(y,{...e}):h?r(ee,{size:b,minWidth:180,minHeight:30,enable:{bottom:!0,bottomRight:!0,right:!0},onResizeStop:(e,o,t,r)=>{let n=b?{width:b.width+r.width,height:b.height+r.height}:t.getBoundingClientRect();m({...f?.config,size:n})},children:i}):i]})},oc=c.div`
+  width: 100%;
+  padding: 0.4rem 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,oh=c(od)`
+  display: flex;
+  gap: 0.1rem;
+  padding: 0 0.4rem;
+  justify-content: start;
+  font-size: 0.6rem;
+  height: auto;
+  min-width: 0;
+`,op=c.div`
+  display: flex;
+  align-items: center;
+  height: 70%;
+  width: auto;
+  gap: 0.4rem;
+`,og=c.span`
+  width: auto;
+  height: 100%;
+  cursor: pointer;
+  svg {
+    width: auto;
+    height: 100%;
+  }
+  &:hover {
+    color: ${({theme:e})=>e.colors.highlight2};
+    cursor: pointer;
+  }
+`,ou=c.div`
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr;
+`,om=e=>{let{node:o}=e,t=ef(e=>e.getControlPanelNode),n=u(()=>t(o),[o]);return n?r(n,{...e}):null};var of=e=>{let{node:o,showControls:n,onDelete:i}=e,l=ey(),{id:a}=o,{node:d}=e0(a)||{},{updateNodeValues:s}=e1(a);return t(ou,{theme:l,children:[t(oh,{theme:l,children:[r(oc,{children:o.data.label}),n&&t(op,{children:[r(og,{theme:l,children:r(x,{className:"grid-item-handle"})}),r(og,{theme:l,children:r(y,{onClick:()=>i(o)})})]})]}),r(om,{node:o,audioNode:d,updateNodeValues:s})]})};let ov=c.div`
+  position: fixed;
+  z-index: 5;
+  box-shadow: 0px 1px 2px ${({theme:e})=>e.colors.elevation2};
+  left: 1rem;
+  top: 4rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${({theme:e})=>e.colors.elevation1};
+  color: ${({theme:e})=>e.colors.highlight1};
+
+  :hover {
+    color: ${({theme:e})=>e.colors.highlight2};
+    cursor: pointer;
+  }
+`,oy=c(op)`
+  height: 80%;
+`,ox=c(og)`
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+`,ow=c(oh)`
+  grid-template-columns: 1fr auto;
+  border-bottom: 1px solid ${({theme:e})=>e.colors.elevation3};
+  font-size: 0.7rem;
+`,ob=c(oc)`
+  text-align: center;
+`,oC=c.div`
+  height: 100%;
+  width: 100%;
+  padding: 0.3rem 0.4rem;
+  box-sizing: border-box;
+`,o$=c.div`
+  height: auto;
+  padding: 0;
+  max-height: 95vh;
+  overflow-y: scroll;
+  border: 1px solid ${({theme:e})=>e.colors.elevation3};
+`,oN=c.div`
+  padding: 1rem 0;
+  font-family: var(--leva-fonts-mono);
+  font-size: 0.8rem;
+`,ok=c.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  color: ${({theme:e})=>e.colors.highlight1};
+  &:hover {
+    color: ${({theme:e})=>e.colors.highlight2};
+  }
+`,oP=c.div`
+  position: absolute;
+  height: 1rem;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  left: 0.5rem;
+  border-right: 1px solid ${({theme:e})=>e.colors.whitePrimary};
+`,oz=c.div`
+  box-sizing: border-box;
+  overflow: hidden;
+  .react-resizable-handle:after {
+    border-color: ${({theme:e})=>e.colors.whitePrimary};
+    border-width: 1px;
+  }
+`;var oE=()=>{let e=ey(),o=f(null),i=ef(e=>e.nodes),{show:l,nodes:a,size:d}=ef(e=>e.controlPanel),{width:s=200,height:c}=d,h=u(()=>{let e=a.map(({id:e})=>e);return i.filter(({id:o})=>e.includes(o))},[i,a]),g=ef(e=>e.showControlPanel),m=ef(e=>e.hideControlPanel),v=ef(e=>e.setControlPanelNodes),x=ef(e=>e.setControlPanelSize),w=ef(e=>e.removeNodeFromControlPanel),[b,C]=p(!0),$=u(()=>{let e=a.reduce((e,{height:o=eg,x:t,y:r=0})=>{let n=r+o;return n>e?n:e},0);return a.map(({id:o,width:t,height:r,x:n,y:i})=>({i:o,w:t||4,h:r||6,x:n??0,y:i??e}))},[a]);return h.length?t(n,{children:[r(ov,{theme:e,ref:o,onClick:g,children:r(en,{})}),t(ei,{open:l,onClose:m,direction:"left",className:"",size:"auto",enableOverlay:!1,style:{background:e.colors.elevation1,position:"absolute"},children:[t(ow,{theme:e,children:[r(ob,{children:"Control Panel"}),r(oy,{children:r(ox,{onClick:m,theme:e,children:r(y,{})})})]}),t(oC,{children:[r(oN,{children:b?t(ok,{theme:e,onClick:()=>C(!1),children:[r(et,{}),"Unlock grid"]}):t(ok,{theme:e,onClick:()=>C(!0),children:[r(er,{}),"Lock grid"]})}),r(ee,{enable:{top:!1,right:!b,bottom:!1,left:!1,topRight:!1,bottomRight:!1,bottomLeft:!1,topLeft:!1},handleComponent:{right:r(oP,{theme:e})},minWidth:120,size:{width:s,height:"auto"},onResizeStop:(e,o,t,r)=>{x({width:s+r.width,height:c+r.height})},children:r(o$,{theme:e,children:r(eo,{layout:$,className:"layout",cols:4,rowHeight:eg,width:s,margin:[0,0],isResizable:!b,draggableHandle:".grid-item-handle",onLayoutChange:e=>{requestAnimationFrame(()=>{v(e.map(({i:e,w:o,h:t,x:r,y:n})=>({id:e,width:o,height:t,x:r,y:n})))})},children:h.map(o=>r(oz,{theme:e,children:r(of,{node:o,showControls:!b,onDelete:w})},o.id))})})})]})]})]}):null},oj={};oj="# Quick start\n\n## Add node\n  - Mouse right click\n  - Select **'Add Node'** from context menu\n\n  ### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;or\n\n  - Press `CMD+SHIFT+A`\n\n<br/>\n\n## Connect nodes\n  - Mouse left click and hold on source port\n  - Drop on target port\n\n<br/>\n\n## Delete Node or Connection\n  - Mouse right click on node/connection\n  - Select **'Delete Node'**/**'Delete Connection'** from context menu\n\n  ### &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;or\n\n  - Mouse left click on node/connection, then press `Backspace`\n\n<br/>\n\n\n## Move node\n  - Drag and Drop\n\n";let oA=i(c.div`
+  font-family: var(--leva-fonts-mono);
+  font-size: 0.7rem;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  overflow: scroll;
+  color: ${({theme:e})=>e.colors.whitePrimary};
+  padding: 0 0.5rem;
+
+  code {
+    color: ${({theme:e})=>e.colors.accent3};
+    filter: hue-rotate(180deg);
+  }
+`),oS=i(c.div`
+  padding: 1rem;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+`);var oM=()=>{let e=ef(e=>e.isHelpShown),o=ef(e=>e.toggleHelp);return e?r(eP,{onClose:()=>{o()},children:r(oS,{children:r(oA,{dangerouslySetInnerHTML:{__html:el(ea(oj))},onWheelCapture:e=>e.stopPropagation()})})}):null};let oF=()=>r(n,{children:r(T,{onClick:ef(e=>e.toggleHelp),children:r(q,{})})}),oD=c.div`
+  position: fixed;
+  z-index: ${({theme:e})=>e.zIndex.resumeContextLayout};
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgb(24 28 32 / 90%);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  color: ${({theme:e})=>e.colors.whitePrimary};
+  cursor: pointer;
+`,oT=c.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+`,oH=c.div`
+  font-family: var(--leva-fonts-mono);
+  font-size: 2rem;
+`,oW=c(K)`
+  width: 7rem;
+  height: 7rem;
+`;var o_=()=>{let e=ey(),o=ef(({patch:e})=>e).audioContext,[n,i]=p("running"===o.state);return n?null:t(oD,{theme:e,onClick:()=>{o.resume(),i(!0)},children:[r(oT,{children:r(oH,{theme:e,children:"Click anywhere to resume audio context"})}),r(oT,{children:r(oW,{})})]})},oO=()=>{let e=ef(({setConfig:e})=>e),{showMinimap:o}=ef(({config:e})=>e);return r(T,{onClick:()=>e({showMinimap:!o}),children:o?r(Q,{}):r(Z,{})})},oI=({id:e,sourceX:o,sourceY:i,targetX:l,targetY:a,sourcePosition:d,targetPosition:s,style:c={},data:h,markerStart:p,markerEnd:u,source:m,target:f,sourceHandleId:v,targetHandleId:y,selected:x})=>{let w=ey(),b=ef(({getNode:e})=>e),C=b(m),$=b(f),N=C?.selected||$?.selected;g(()=>{if(v&&y)return console.log(`connected ${m} to ${f}`),()=>{console.log(`disconnected ${m} from ${f}`)}},[m,v,f,y]);let[k]=H({targetX:l,targetY:a,targetPosition:s,sourceX:o,sourceY:i,sourcePosition:d});return t(n,{children:[r("path",{id:e,style:{...c,stroke:x?w.colors.accent2:N?w.colors.highlight3:w.colors.highlight2},className:"react-flow__edge-path Wire",d:k,markerEnd:u}),r("path",{style:{...c,strokeWidth:8,color:"transparent",opacity:0,cursor:"pointer"},d:k,markerEnd:u})]})};let oL=(e,o)=>console.log("drag stop",o),oR=(e,o)=>console.log("click",o),oB=[20,20],oG=({editorState:e,plugins:o=[],editorContextMenu:n=[],onChange:i=()=>{}})=>{let l=u(()=>({wire:oI}),[]),{nodes:a,edges:d,controlPanel:s,onNodesChange:c,onNodesDelete:h,onEdgesChange:f,onEdgesDelete:v,onConnect:y,setEditorState:x,setPlugins:w,setViewport:C,viewport:$}=ef(),N=ef(({config:e})=>e),k=ef(({nodeTypes:e})=>e);g(()=>{w(o)},[o]),g(()=>{e&&x(e)},[e,x]);let[S,M]=p(null);g(()=>{S&&i({nodes:a,edges:d,controlPanel:s,viewport:$})},[a,d,s,$]);let F=m(e=>{S||(M(e),console.log("flow loaded:",e))},[S]),{onContextMenu:D}=(()=>{let{show:e}=R({id:eq});return{onContextMenu:e}})(),{onContextMenu:T}=(()=>{let{show:e}=R({id:eQ});return{onContextMenu:m((o,t)=>{o.stopPropagation(),e(o,{props:{node:t}})},[])}})(),{onContextMenu:H}=(()=>{let{show:e}=R({id:eb});return{onContextMenu:m((o,t)=>{o.stopPropagation(),e(o,{props:{edge:t}})},[e])}})();return g(()=>{$&&S?.setViewport($)},[$,S]),P({onEnd:C}),t(b,{nodes:a,edges:d,onNodesChange:c,onNodesDelete:h,onEdgesChange:f,onConnect:y,onNodeDragStop:oL,onEdgesDelete:v,onInit:F,onNodeClick:oR,onContextMenu:D,onNodeContextMenu:T,onEdgeContextMenu:H,nodeTypes:k,edgeTypes:l,snapGrid:oB,defaultViewport:e?.viewport,defaultEdgeOptions:{type:"wire"},snapToGrid:!0,fitView:!0,disableKeyboardA11y:!0,children:[r(z,{variant:E.Dots,gap:12}),N.showMinimap?r(j,{}):null,t(A,{style:{right:"1rem",left:"initial",bottom:"40%",top:"initial"},showInteractive:!1,children:[r(oO,{}),r(oF,{})]}),r(o_,{}),r(oE,{}),r(oM,{}),r(eK,{editorContextMenu:n}),r(eZ,{}),r(eC,{})]})},oV=e=>r(S,{children:r(oG,{...e})}),oU={nodes:[],edges:[],controlPanel:{nodes:[],show:!1,size:{width:200,height:100}},viewport:{x:0,y:0,zoom:1.5}},oJ=i(c.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+`),oX=i(c.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  position: relative;
+`),oY=i(c.div`
+  background: ${({theme:e})=>e.colors.elevation2};
+  opacity: 0.7;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  font-family: var(--leva-fonts-mono);
+  color: ${({theme:e})=>e.colors.whitePrimary};
+  display: ${({show:e})=>e?"flex":"none"};
+  align-items: center;
+  justify-content: center;
+  font-size: 6rem;
+`),oq=i(c.div`
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  background: ${({theme:e})=>e.colors.elevation2};
+`),oK=i(c.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0.3rem 0.4rem;
+
+  border-right: 1px solid ${({theme:e})=>e.colors.elevation1};
+
+  input {
+    color: ${({theme:e,active:o})=>o?e.colors.whitePrimary:e.colors.highlight1};
+
+    &:not([readonly]):focus {
+      background-color: ${({theme:e})=>e.colors.elevation1};
+    }
+  }
+`),oQ=i(c.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 0.5rem;
+  cursor: pointer;
+
+  color: ${({theme:e})=>e.colors.highlight1};
+  &:hover {
+    color: ${({theme:e})=>e.colors.whitePrimary};
+  }
+`),oZ=i(c(v)`
+  height: 40%;
+  width: auto;
+`),o0=i(c(y)`
+  height: 70%;
+  width: auto;
+  cursor: pointer;
+  color: ${({theme:e})=>e.colors.highlight1};
+  &:hover {
+    color: ${({theme:e})=>e.colors.whitePrimary};
+  }
+`),o1=()=>({file:oU,name:"Unnamed",type:"patch",id:h()});var o2=({...e})=>{let{projectState:o,theme:n}=e,i=ef(e=>e.currentFileIndex),s=ef(e=>e.setCurrentFileIndex),c=ef(e=>e.project),h=ef(e=>e.setProject),u=ef(e=>e.getProject),m=ef(e=>e.updateFileName),f=ef(e=>e.pullEditorChanges),v=ef(e=>e.addFile),y=ef(e=>e.deleteFile),x=ef(e=>e.setEditorState),[w,b]=p(!1);return g(()=>{h(o||{files:[o1()]}),o&&x(o.files[0].file)},[o]),g(()=>{var e;return e=async(...e)=>{let o=new Request(...e),t=u().files,r=o.url.replace("project://",""),n=t.find(({id:e})=>e===r);return new Response(JSON.stringify(n?.file??null))},ed.push(["project://*",e]),()=>{}},[u]),g(()=>{b(!0),x(u().files[i]?.file),setTimeout(()=>{b(!1)},1600)},[i,x]),t(l,{theme:n||ev,children:[r(a,{styles:d`
+          :root {
+            --leva-colors-elevation1: #292d39;
+            --leva-colors-elevation2: #181c20;
+            --leva-colors-elevation3: #373c4b;
+            --leva-colors-accent1: #0066dc;
+            --leva-colors-accent2: #007bff;
+            --leva-colors-accent3: #3c93ff;
+            --leva-colors-highlight1: #535760;
+            --leva-colors-highlight2: #8c92a4;
+            --leva-colors-highlight3: #fefefe;
+            --leva-colors-vivid1: #ffcc00;
+            --leva-colors-folderWidgetColor: var(--leva-colors-highlight2);
+            --leva-colors-folderTextColor: var(--leva-colors-highlight3);
+            --leva-colors-toolTipBackground: var(--leva-colors-highlight3);
+            --leva-colors-toolTipText: var(--leva-colors-elevation2);
+            --leva-radii-xs: 2px;
+            --leva-radii-sm: 3px;
+            --leva-radii-lg: 10px;
+            --leva-space-xs: 3px;
+            --leva-space-sm: 6px;
+            --leva-space-md: 10px;
+            --leva-space-rowGap: 7px;
+            --leva-space-colGap: 7px;
+            --leva-fonts-mono:
+              ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace;
+            --leva-fonts-sans: system-ui, sans-serif;
+            --leva-fontSizes-root: 11px;
+            --leva-fontSizes-toolTip: var(--leva-fontSizes-root);
+            --leva-sizes-rootWidth: 280px;
+            --leva-sizes-controlWidth: 160px;
+            --leva-sizes-numberInputMinWidth: 38px;
+            --leva-sizes-scrubberWidth: 8px;
+            --leva-sizes-scrubberHeight: 16px;
+            --leva-sizes-rowHeight: 24px;
+            --leva-sizes-folderTitleHeight: 20px;
+            --leva-sizes-checkboxSize: 16px;
+            --leva-sizes-joystickWidth: 100px;
+            --leva-sizes-joystickHeight: 100px;
+            --leva-sizes-colorPickerWidth: var(--leva-sizes-controlWidth);
+            --leva-sizes-colorPickerHeight: 100px;
+            --leva-sizes-imagePreviewWidth: var(--leva-sizes-controlWidth);
+            --leva-sizes-imagePreviewHeight: 100px;
+            --leva-sizes-monitorHeight: 60px;
+            --leva-sizes-titleBarHeight: 39px;
+            --leva-shadows-level1: 0 0 9px 0 #00000088;
+            --leva-shadows-level2: 0 4px 14px #00000033;
+            --leva-borderWidths-root: 0px;
+            --leva-borderWidths-input: 1px;
+            --leva-borderWidths-focus: 1px;
+            --leva-borderWidths-hover: 1px;
+            --leva-borderWidths-active: 1px;
+            --leva-borderWidths-folder: 1px;
+            --leva-fontWeights-label: normal;
+            --leva-fontWeights-folder: normal;
+            --leva-fontWeights-button: normal;
+          }
+        `}),t(oJ,{children:[t(oq,{children:[c.files.map((e,o)=>t(oK,{onClick:()=>s(o),active:o===i,children:[r(e3,{onChange:e=>m(o,e),value:e.name||"Unnamed"}),r(o0,{onClick:e=>{e.stopPropagation(),window.confirm("Do you really want to delete this file?")&&y(o)}})]},o)),r(oQ,{onClick:()=>v(o1()),children:r(oZ,{})})]}),t(oX,{children:[r(oV,{...e,onChange:e=>{f()},editorState:oU}),r(oY,{show:w,children:"Loading..."})]})]})]})};export{o2 as Editor,oI as Wire,os as WNNode,od as TitleBar,oe as PortsPanel,ot as OutputPorts,oa as OutputHandle,oo as InputPorts,oi as InputHandle,or as Port,eP as Modal,e3 as EditableLabel,e0 as useAudioNode,e1 as useNode,ey as useTheme,ef as useStore,ev as theme};
+//# sourceMappingURL=module.js.map