@web-noise/core 0.0.11-fix2 → 0.0.12-fix

package/dist/esm/components.js

@@ -1,1122 +0,0 @@
-let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion/styled";import{useEffect as n,useState as l,useCallback as a,useRef as d}from"react";import{createPortal as s}from"react-dom";import{MdClose as c,MdSettings as h,MdInfoOutline as p}from"react-icons/md";import{useTheme as g,withTheme as m}from"@emotion/react";import"nanoid";import{FaPlus as f}from"react-icons/fa6";import"@web-noise/fetch";import{getConnectedEdges as u,addEdge as v,applyNodeChanges as b,applyEdgeChanges as w,Handle as x}from"reactflow";import{create as y}from"zustand";import{setAudioNodeTypes as $,createPatch as k}from"@web-noise/patch";import{reverse as C,patch as z,create as P}from"jsondiffpatch";import{injectGlobal as N}from"@emotion/css";import"reactflow/dist/style.css";import{Item as j,Menu as _}from"react-contexify";import"react-contexify/dist/ReactContexify.css";import"js-file-download";import"hotkeys-js";import"react-file-drop";import{FaFileUpload as E,FaVolumeOff as S,FaRegArrowAltCircleRight as F}from"react-icons/fa";import"re-resizable";import"react-grid-layout";import"react-grid-layout/css/styles.css";import"react-icons/ai";import"react-icons/rx";import"react-modern-drawer";import"react-modern-drawer/dist/index.css";import"marked";import{useThrottledCallback as I}from"use-debounce";import A from"rc-slider";import"rc-slider/assets/index.css";import{CanvasSpliner as R}from"CanvasSpliner";function T(e,o,t,r){Object.defineProperty(e,o,{get:t,set:r,enumerable:!0,configurable:!0})}var M,L,D={};T(D,"Modal",()=>B),T(D,"Checker",()=>em),T(D,"RadioGroup",()=>eu),T(D,"Input",()=>ew),T(D,"DropdownInput",()=>eP),T(D,"ColorInput",()=>e_),T(D,"NumberInput",()=>eF),T(D,"Button",()=>eI),T(D,"Select",()=>eR),T(D,"Slider",()=>eT),T(D,"SplineEditor",()=>eD),T(D,"ConfigRowLabel",()=>eH),T(D,"ConfigRowControl",()=>eG),T(D,"ConfigRowSeparator",()=>eO),T(D,"ConfigRow",()=>eW),T(D,"ConfigPanel",()=>eB),T(D,"ConfigRowInner",()=>eV);var H=()=>g();let G=i.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;
-`,O=i.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;
-`,W=i(c)`
-  position: absolute;
-  top: 0.2rem;
-  right: 0.2rem;
-  cursor: pointer;
-`,B=({children:e,onClose:o,...i})=>{let l=H();return n(()=>{let e=e=>{"Escape"===e.key&&o?.()};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[o]),s(t(G,{theme:l,onClick:o,children:r(O,{...i,onClick:e=>{e.stopPropagation()},theme:l,children:[e,t(W,{theme:l,onClick:o})]})}),document.body)},V="web-noise-drag-handle",J=`.${V}`;(M=L||(L={})).Gate="gate",M.Number="number",M.Audio="audio",M.Any="any";let K=e=>JSON.parse(JSON.stringify(e)),U=(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))}};y((e=(...e)=>{let[o,t]=e;return{...((e,o)=>({nodes:[],edges:[],onNodesChange:o=>{e(({nodes:e})=>({nodes:b(o,e).map(e=>({dragHandle:J,...e}))}))},onEdgesChange:o=>{e(({edges:e})=>({edges:w(o,e)}))},onConnect:o=>{e(({edges:e})=>({edges:v(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:i,skipCollect:n}=r;if(n)return void e({history:{...r,skipCollect:!1}});e(({history:e})=>{if(!e)return{};let{buffer:o,pointer:r}=e,n=o.slice(Math.max(r-i+1,0),r);return{history:{...e,buffer:[...n,t],pointer:Math.min(r+1,i)}}})},back:()=>{let{nodes:t,edges:r,controlPanel:i,history:n}=o(),{buffer:l,pointer:a}=n,d=l[a-1];if(!d)return;let s=C(d);s&&e({...z(K({nodes:t,edges:r,controlPanel:i}),s),history:{...n,pointer:a-1,skipCollect:!0}})},forward:()=>{let{nodes:t,edges:r,controlPanel:i,history:n}=o(),{buffer:l,pointer:a}=n,d=l[a];d&&e({...z(K({nodes:t,edges:r,controlPanel:i}),d),history:{...n,pointer:a+1,skipCollect:!0}})},clear:()=>{let{history:t}=o();e({history:{...t,buffer:[],pointer:0,skipCollect:!0}})}}}))(...e),...((e,o)=>({patch:k(),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:i}=o(),n=i.files[t];"audio"!==n.type&&r(t,{...n,file:e()})},syncEditorWithCurrentFile:()=>{let{currentFileIndex:e,setEditorState:t,project:r}=o(),i=r.files[e];if("audio"===i.type)return void console.log("audio file. skipping");t(i.file)},currentFileIndex:0,setCurrentFileIndex(t){let{currentFileIndex:r}=o();t!==r&&e({currentFileIndex:t})},updateFileContent(t,r){let{project:i}=o();e({project:{...i,files:i.files.map((e,o)=>o===t?{...e,...r}:e)}})},updateFileName(t,r){let{project:i}=o();e({project:{...i,files:i.files.map((e,o)=>o===t?{...e,name:r}:e)}})},addFile(t){let{project:r}=o(),i=[...r.files,t];e({project:{...r,files:i}})},deleteFile:t=>{let{project:r,currentFileIndex:i}=o();e({project:{...r,files:r.files.filter((e,o)=>t!==o)}}),t<=i&&e({currentFileIndex:i-1})}}))(...e),setGraph:async({nodes:e,edges:o})=>{let{patch:r,createNodes:i,createEdges:n,setNodesAndEdges:l,nodes:a,edges:d}=t();l({nodes:[],edges:[]}),await i(e),n(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:i,id:n,data:l}=e;if(void 0===i)throw Error(`node type is not defined for node: ${n}`);o({...e,data:{...l,config:{...r[i]?.defaultConfig,...l?.config}}})},removeNode:e=>t().removeNodes([e]),removeNodes:e=>{let{edges:r,nodes:i,onNodesDelete:n,removeEdges:l,removeNodesFromControlPanel:a}=t(),d=e.map(({id:e})=>e),s=[...e,...i.filter(({parentNode:e})=>e&&d.includes(e))];a(s),l(u(s,r)),n(s);let c=s.map(({id:e})=>e);o({nodes:i.filter(({id:e})=>!c.includes(e))})},removeEdges:e=>{let{edges:r,onEdgesDelete:i}=t(),n=e.map(({id:e})=>e);i(e),o({edges:r.filter(({id:e})=>!n.includes(e))})},createEdges:e=>{let{patch:o,edges:r,setEdges:i}=t();i(e)},onConnect:async e=>{let{edges:o,createEdges:r}=t();r(v(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 i=e.reduce((e,o)=>({...e,...o.components.reduce((e,o)=>({...e,[o.type]:o}),{})}),{}),n=Object.keys(i).reduce((e,o)=>({...e,[o]:i[o].node}),{});$(Object.keys(i).reduce((e,o)=>({...e,[o]:i[o].audioNode}),{})),r(n),o(({nodesConfiguration:e})=>({nodesConfiguration:{...e,...i}}))},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:i,viewport:n})=>{let{setGraph:l}=t();await l({nodes:e,edges:r}),await new Promise(e=>setTimeout(e,1e3)),o({controlPanel:i,viewport:n})},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(),i=e.filter(({selected:e})=>e),n=o.filter(({selected:e})=>e);i.length&&r({nodes:i,edges:n})},pasteBuffer:(e=0,r=0)=>{let{copyBuffer:i,createNodes:n,setEdges:l,nodes:a,edges:d}=t(),{nodes:s,edges:c}=i;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:m,mapping:f}=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:{}});n(m);let u=c.map(e=>{let o=f[e.source]||e.source,t=f[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})),...u])},getControlPanelNode:e=>{let{nodesConfiguration:o}=t(),{type:r}=e;if(!r)return null;let i=o[r]?.controlPanelNode;return i||(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(),i=e.type?r[e.type]?.defaultConfig:{},{height:n}=i?.size||{},l={id:e.id,...n?{height:n/10}:{}};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 i=((e,o)=>{let t,r=P({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)}),i=o();return(e,n)=>{e.currentFileIndex!==n.currentFileIndex&&o().history.clear(),clearTimeout(t),i||(i=n),t=setTimeout(()=>{let t=r.diff(i,e);i=null,t&&o().history.push(t)},500)}})(0,t);return r.subscribe(i),e((...e)=>o(...e),t,r)},(e,t,r)=>{r.subscribe(async(e,o)=>{});let i=new Set,n={...t(),nodes:[],edges:[]};return o(async(...o)=>{let r=t(),[l]=o,a={...n,..."function"==typeof l?l({...n}):l},d=U(n.nodes,a.nodes),s=U(n.edges,a.edges);n=a;let c=d.added,h=s.added,p=s.removed,g=d.removed,{patch:m}=r;if(c.length){let e=m.registerAudioNodes(c);i.add(e),await e,i.delete(e)}if(!(h.length||p.length||g.length))return void e(...o);if(i.size)try{await Promise.all([...i.values()])}catch(e){console.log("some error",e)}h.length&&m.registerAudioConnections(h),p.length&&m.unregisterAudioConnections(p),g.length&&m.unregisterAudioNodes(g),e(...o)},t,r)}));var Y="#292d39",X="#181c20",q="#373c4b",Q="#007bff",Z="#14df42";N`
-  .react-flow {
-    .react-flow__pane {
-    /* background: rgb(106 106 106); */
-    /* background: "white"; */
-    // background: #292d39;
-      background: ${q};
-    }
-
-    .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:  ${Q};
-    }
-
-    .react-flow__node.selected {
-      border: 1px solid ${Q};
-      box-shadow: 0 0 0 0.5px #${Q};
-    }
-
-    .react-flow__node-default.selected, .react-flow__node-default.selected:hover {
-      box-shadow: 0 0 0 0.5px #${Q};
-    }
-
-    /* .react-flow__minimap-mask {
-      fill: ${Y}
-    }
-
-    .react-flow__minimap-node {
-      fill:${Q}
-    } */
-  }
-
-`,i(j)``,i(_)`
-  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;
-  }
-`,m(i.div`
-  width: 100%;
-`),m(i.div`
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-`),m(i.ul`
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  padding-bottom: 10px;
-  columns: 2;
-
-  li {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 4px;
-    overflow: hidden;
-    border: 1px solid ${({theme:e})=>e.colors.elevation3};
-    border-radius: 4px;
-    margin-bottom: 0.5rem;
-    &:hover {
-      border-color: ${({theme:e})=>e.colors.accent2};
-      cursor: pointer;
-    }
-  }
-`),m(i.div`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`),m(i.div`
-  color: ${({theme:e})=>e.colors.highlight2};
-  font-size: 12px;
-`),m(i.div`
-  display: flex;
-  gap: 0.2rem;
-  flex-wrap: wrap;
-`);let ee=m(i.span`
-  cursor: pointer;
-  font-size: 10px;
-  background: ${({theme:e,isActive:o})=>o?e.colors.highlight1:e.colors.elevation3};
-  border-radius: 2px;
-  padding: 0.1rem 0.2rem;
-  border: 1px solid;
-  border-color: ${({theme:e})=>e.colors.elevation2};
-  &:hover {
-    border-color: ${({theme:e})=>e.colors.accent2};
-  }
-`);m(i.div``),m(i.div`
-  font-size: 1.1rem;
-  padding: 0.25rem 0;
-  color: ${({theme:e})=>e.colors.highlight3};
-`),m(i.div`
-  color: ${({theme:e})=>e.colors.highlight2};
-  font-size: 12px;
-`),i.div`
-  display: flex;
-  position: relative;
-`,i.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;
-  }
-`,i.div`
-  display: flex;
-  flex-direction: column;
-  padding: 0.6rem;
-  gap: 0.6rem;
-  border-right: 1px solid ${({theme:e})=>e.colors.elevation3};
-  min-width: 14rem;
-`,i.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;
-  }
-`,m(i(ee)`
-  font-size: 12px;
-  padding: 0.2rem 0.4rem;
-  &:hover {
-  }
-  &::after {
-    content: "×";
-    margin-left: 0.4rem;
-  }
-`),i.div`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  gap: 1rem;
-`,i.div`
-  flex-grow: 1;
-  height: 100%;
-  overflow-y: scroll;
-`,i.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;
-  }
-`,i.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-`,i(E)`
-  width: 100%;
-  height: 8rem;
-`,i.div`
-  font-size: 2rem;
-`,i.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;
-  }
-`,i.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-`,i(E)`
-  width: 100%;
-  height: 8rem;
-`,i.div`
-  font-size: 2rem;
-`,i.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;
-  }
-`,i.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-`,i(E)`
-  width: 100%;
-  height: 8rem;
-`,i.div`
-  font-size: 2rem;
-`,i.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;
-  }
-`,m(i.div`
-  height: 100%;
-  width: 100%;
-  overflow: scroll;
-  padding: 0.6rem;
-  box-sizing: border-box;
-
-  hr {
-    border: none;
-    border-bottom: 1px solid ${({theme:e})=>e.colors.elevation3};
-  }
-
-  code {
-    background-color: ${({theme:e})=>e.colors.elevation3};
-    color: ${({theme:e})=>e.colors.highlight3};
-    font-family:
-      source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-  }
-
-  pre {
-    background-color: ${({theme:e})=>e.colors.elevation3};
-    padding: 0.2rem 0.3rem;
-    border-radius: 1px;
-  }
-
-  a {
-    color: ${({theme:e})=>e.colors.accent1};
-  }
-`);let eo=i.div`
-  background-color: var(--leva-colors-elevation1);
-`;i(eo)`
-  padding: 2rem 5rem;
-`,i(eo)`
-  padding: 1rem 2rem;
-`,i(h)`
-  font-size: 1.2rem;
-  opacity: 0.4;
-  width: 1rem;
-  &:hover {
-    opacity: 1;
-    cursor: pointer;
-  }
-`,i(p)`
-  font-size: 1.2rem;
-  opacity: 0.4;
-  width: 1rem;
-  &:hover {
-    opacity: 1;
-    cursor: pointer;
-  }
-`;let et=i.div`
-  position: relative;
-  font-family: var(--leva-fonts-mono);
-  font-size: var(--leva-fontSizes-root);
-  background-color: var(--leva-colors-elevation1);
-`,er=i(et)`
-  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;
-`;i(et)(({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;
-`),i.div`
-  grid-area: inputs;
-  text-align: left;
-`,i.div`
-  grid-area: outputs;
-  text-align: right;
-`,i.div`
-  position: relative;
-  padding: 5px 10px;
-`;let ei={[L.Audio]:"#4ade80",[L.Gate]:"#c084fc",[L.Number]:"#38bdf8",[L.Any]:"#ffffff"},en=m(i(x,{shouldForwardProp:e=>"portType"!==e})`
-  --port-color: ${e=>{if(!e.portType)return e.theme.colors.highlight2;if(!Array.isArray(e.portType))return ei[e.portType];{let o=e.portType.map(e=>ei[e]);return`linear-gradient(0.25turn, ${o.join(", ")});`}}};
-  border-color: var(--port-color);
-  background: var(--port-color);
-  box-shadow: 0px 0px 0px 1px ${({theme:e})=>e.colors.elevation2} inset;
-`);m(i(en)`
-  left: -3px;
-`),m(i(en)`
-  right: -3px;
-`);let el=i.div`
-  width: 100%;
-  padding: 0.4rem 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`,ea=i(({className:e,...o})=>t(er,{...o,className:[e,V].join(" ")}))`
-  display: flex;
-  gap: 0.1rem;
-  padding: 0 0.4rem;
-  justify-content: start;
-  font-size: 0.6rem;
-  height: auto;
-  min-width: 0;
-`,ed=i.div`
-  display: flex;
-  align-items: center;
-  height: 70%;
-  width: auto;
-  gap: 0.4rem;
-`,es=i.span`
-  width: auto;
-  height: 100%;
-  cursor: pointer;
-  svg {
-    width: auto;
-    height: 100%;
-  }
-  &:hover {
-    color: ${({theme:e})=>e.colors.highlight2};
-    cursor: pointer;
-  }
-`;i.div`
-  height: 100%;
-  display: grid;
-  grid-template-rows: auto 1fr;
-`,i.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;
-  }
-`,i(ed)`
-  height: 80%;
-`,i(es)`
-  font-size: 1rem;
-  display: flex;
-  align-items: center;
-`,i(ea)`
-  grid-template-columns: 1fr auto;
-  border-bottom: 1px solid ${({theme:e})=>e.colors.elevation3};
-  font-size: 0.7rem;
-`,i(el)`
-  text-align: center;
-`,i.div`
-  height: 100%;
-  width: 100%;
-  padding: 0.3rem 0.4rem;
-  box-sizing: border-box;
-`,i.div`
-  height: auto;
-  padding: 0;
-  max-height: 95vh;
-  overflow-y: scroll;
-  border: 1px solid ${({theme:e})=>e.colors.elevation3};
-`,i.div`
-  padding: 1rem 0;
-  font-family: var(--leva-fonts-mono);
-  font-size: 0.8rem;
-`,i.div`
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  color: ${({theme:e})=>e.colors.highlight1};
-  &:hover {
-    color: ${({theme:e})=>e.colors.highlight2};
-  }
-`,i.div`
-  position: absolute;
-  height: 1rem;
-  top: 0;
-  bottom: 0;
-  margin: auto;
-  left: 0.5rem;
-  border-right: 1px solid ${({theme:e})=>e.colors.whitePrimary};
-`,i.div`
-  box-sizing: border-box;
-  overflow: hidden;
-  .react-resizable-handle:after {
-    border-color: ${({theme:e})=>e.colors.whitePrimary};
-    border-width: 1px;
-  }
-`,m(i.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);
-  }
-`),m(i.div`
-  padding: 1rem;
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-`),i.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;
-`,i.div`
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-`,i.div`
-  font-family: var(--leva-fonts-mono);
-  font-size: 2rem;
-`,i(S)`
-  width: 7rem;
-  height: 7rem;
-`,m(i.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-`),m(i.div`
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.7);
-  color: white;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 2rem;
-`),m(i.div`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  position: relative;
-`),m(i.div`
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  background: ${({theme:e})=>e.colors.elevation3};
-`),m(i.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;
-`),m(i.div`
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  background: ${({theme:e})=>e.colors.elevation2};
-`),m(i.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};
-    }
-  }
-`),m(i.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};
-  }
-`),m(i(f)`
-  height: 40%;
-  width: auto;
-`),m(i(c)`
-  height: 70%;
-  width: auto;
-  cursor: pointer;
-  color: ${({theme:e})=>e.colors.highlight1};
-  &:hover {
-    color: ${({theme:e})=>e.colors.whitePrimary};
-  }
-`);let ec=i.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 0.6rem;
-  height: 0.6rem;
-  background: ${({theme:e})=>e.colors.whitePrimary};
-  border: 1px solid ${({theme:e})=>e.colors.highlight1};
-  &::after {
-    content: "";
-    background: ${({theme:e})=>e.colors.accent1};
-  }
-`,eh=i.div``,ep=i.div`
-  font-size: 0.4rem;
-  color: ${({theme:e})=>e.colors.highlight1};
-`,eg=i.label`
-  display: flex;
-  cursor: pointer;
-  gap: 0.4rem;
-  line-height: 0.7rem;
-  input {
-    display: none;
-  }
-  input[type="radio"] ~ .checker-box {
-    border-radius: 50%;
-    &::after {
-      border-radius: 50%;
-    }
-  }
-  input:checked ~ .checker-box:after {
-    width: 70%;
-    height: 70%;
-  }
-`,em=({label:e,subtitle:o,name:i,type:n="checkbox",onChange:l,checked:a=!1})=>{let d=H();return r(eg,{children:[t("input",{type:n,name:i,checked:a,onChange:({target:e})=>l?.(e.checked)}),t(ec,{className:"checker-box",theme:d}),r("div",{children:[t(eh,{children:e}),o?t(ep,{theme:d,children:o}):null]})]})},ef=i.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  font-family: var(--leva-fonts-mono);
-  font-size: 0.7rem;
-  color: ${({theme:e})=>e.colors.highlight2};
-  padding: 0.5rem;
-`,eu=({options:e,value:o,onChange:r})=>t(ef,{theme:H(),children:e.map(({value:e,label:i,subtitle:n},l)=>t(em,{value:o,type:"radio",label:i,subtitle:n,onChange:()=>r(e),checked:e===o},l))}),ev=i.div`
-  display: flex;
-  position: relative;
-`,eb=m(i.input`
-  padding-right: 2rem;
-  padding-left: 0.3rem;
-  padding-top: 0;
-  padding-bottom: 0;
-  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: var(--leva-colors-elevation3);
-  border-radius: 0.2rem;
-  height: 1.5rem;
-  color: var(--leva-colors-highlight2);
-
-  &:focus,
-  &:hover {
-    box-shadow: 0 0 0 var(--leva-borderWidths-focus) var(--leva-colors-accent2);
-    color: ${({theme:e})=>e.colors.whitePrimary};
-  }
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin-right: 1rem;
-  }
-`),ew=({type:e,value:o,placeholder:r,onChange:i=()=>{},inputProps:n,...l})=>t(ev,{...l,children:t(eb,{type:e,value:o,placeholder:r,onKeyDownCapture:e=>{e.stopPropagation()},onChange:e=>{i(e.target.value)},...n})}),ex=m(i.button`
-  position: absolute;
-  right: 0;
-  height: 100%;
-  outline: none;
-  background: none;
-  border: none;
-  color: ${({theme:e})=>e.colors.highlight1};
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  z-index: 2;
-  &:hover {
-    color: ${({theme:e})=>e.colors.highlight2};
-  }
-  &:active {
-    color: ${({theme:e})=>e.colors.highlight3};
-  }
-`),ey=i.div`
-  position: relative;
-  width: 100%;
-`,e$=m(i.div`
-  position: absolute;
-  top: calc(100% + 2px);
-  left: 0;
-  right: 0;
-  max-height: 200px;
-  overflow-y: auto;
-  background-color: ${({theme:e})=>e.colors.elevation2};
-  border: 1px solid ${({theme:e})=>e.colors.elevation3};
-  border-radius: 0.2rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-  z-index: 1000;
-  display: ${({isOpen:e})=>e?"block":"none"};
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: ${({theme:e})=>e.colors.elevation1};
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: ${({theme:e})=>e.colors.elevation3};
-    border-radius: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: ${({theme:e})=>e.colors.highlight1};
-  }
-`),ek=m(i.div`
-  padding: 0.4rem 0.5rem;
-  cursor: pointer;
-  color: ${({theme:e})=>e.colors.highlight1};
-  background-color: ${({theme:e,isHighlighted:o})=>o?e.colors.elevation3:"transparent"};
-  font-family: var(--leva-fonts-mono);
-  font-size: 0.9em;
-
-  &:hover {
-    background-color: ${({theme:e})=>e.colors.elevation3};
-    color: ${({theme:e})=>e.colors.highlight2};
-  }
-`),eC=i.div`
-  font-size: 0.85em;
-  opacity: 0.7;
-  margin-top: 2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`,ez=i.div`
-  font-size: 1em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`,eP=({value:e="",placeholder:o="",onSubmit:i=()=>{},options:s=[],...c})=>{let[h,p]=l(e),[g,m]=l(!1),[f,u]=l(-1),v=d(null),b=d(null),w=s.filter(e=>""===h||e.value.toLowerCase().includes(h.toLowerCase())||e.label?.toLowerCase().includes(h.toLowerCase())),x=a(()=>{i(h),m(!1),u(-1)},[h,i]),y=a(e=>{p(e.value),i(e.value),m(!1),u(-1)},[i]),$=a(e=>{switch(e.key){case"Escape":m(!1),u(-1);break;case"Enter":g&&f>=0&&w[f]?(e.preventDefault(),y(w[f])):x();break;case"ArrowDown":e.preventDefault(),g?u(e=>e<w.length-1?e+1:e):(m(!0),u(0));break;case"ArrowUp":e.preventDefault(),g&&u(e=>e>0?e-1:e)}},[x,g,f,w,y]);return n(()=>{let e=e=>{b.current&&!b.current.contains(e.target)&&v.current&&!v.current.contains(e.target)&&(m(!1),u(-1))};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),n(()=>{if(f>=0&&b.current){let e=b.current.children[f];e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})}},[f]),r(ey,{children:[r(ev,{children:[t(eb,{...c,ref:v,value:h,placeholder:o,onKeyDown:$,onChange:e=>{p(e.target.value),m(!0),u(-1)},onFocus:()=>{s.length>0&&m(!0)},onBlur:()=>{setTimeout(()=>{m(!1),u(-1)},200)},autoComplete:"off"}),t(ex,{onClick:x,children:t(F,{})})]}),s.length>0&&t(e$,{ref:b,isOpen:g&&w.length>0,children:w.map((e,o)=>r(ek,{isHighlighted:o===f,onClick:()=>y(e),onMouseEnter:()=>u(o),children:[t(ez,{children:e.label||e.value}),e.value&&t(eC,{children:e.value})]},e.value+o))})]})},eN=i(ev)`
-  gap: 0.5rem;
-`,ej=i(eb)`
-  padding: 0;
-  aspect-ratio: 1 / 1;
-  width: auto;
-  cursor: pointer;
-  &::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-  &::-webkit-color-swatch {
-    border-radius: 0.2rem;
-    border: none;
-  }
-`,e_=({value:e,onChange:o=()=>{},...i})=>r(eN,{...i,children:[t(ej,{type:"color",value:e,onChange:e=>{o(e.target.value)}}),t(eb,{value:e,onChange:e=>{o(e.target.value)}})]}),eE=i.span`
-  position: relative;
-  &:after {
-    content: "↕";
-    position: absolute;
-    top: -1px;
-    right: 0;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    font-size: 1.2em;
-    color: var(--leva-colors-highlight1);
-  }
-`,eS=i.input`
-  width: 100%;
-  appearance: textfield;
-  font-size: inherit;
-  background: none;
-  border: none;
-  text-align: right;
-  color: var(--leva-colors-highlight1);
-  font-family: var(--leva-fonts-mono);
-  cursor: inherit;
-  text-overflow: ellipsis;
-  outline: none;
-  appearance: textfield;
-  cursor: auto;
-  background-color: var(--leva-colors-elevation3);
-  border-radius: 0.2rem;
-  height: 1.5rem;
-  color: var(--leva-colors-highlight2);
-
-  &:focus,
-  &:hover {
-    box-shadow: 0 0 0 var(--leva-borderWidths-focus) var(--leva-colors-accent2);
-  }
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin-right: 1rem;
-  }
-`,eF=({max:e=1/0,min:o=-1/0,value:r,step:i=1,onChange:l=()=>{},placeholder:a,...s})=>{let c=d(null),h=I(t=>{if(void 0===r)return;let n=e<10?5:e/100,a=+(r+Math.round(t.deltaY/n)*i).toFixed(2);a<o||a>e||l(a)},100);return n(()=>{c.current&&(c.current.addEventListener("wheel",e=>{e.preventDefault(),e.stopPropagation(),h(e)}),c.current.onchange=e=>{l(+e.target.value)})},[c.current,l]),n(()=>{void 0!==r&&c.current&&(c.current.value=r.toString())},[c.current,r]),t(eE,{...s,children:t(eS,{ref:c,type:"number",step:i,min:o,max:e,placeholder:a})})},eI=i.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  outline: none;
-  font-size: inherit;
-  font-family: inherit;
-  border: none;
-  appearance: none;
-  font-weight: var(--leva-fontWeights-button);
-  height: var(--leva-sizes-rowHeight);
-  border-radius: var(--leva-radii-sm);
-  background-color: ${({theme:e})=>e.colors.elevation1};
-  color: ${({theme:e})=>e.colors.highlight3};
-  background-color: ${({theme:e})=>e.colors.accent2};
-  cursor: pointer;
-  font-family: var(--leva-fonts-mono);
-  font-size: var(--leva-fontSizes-root);
-
-  &:hover {
-    box-shadow: inset 0 0 0 var(--leva-borderWidths-hover)
-      ${({theme:e})=>e.colors.accent3};
-  }
-
-  &:active {
-    box-shadow: inset 0 0 0 var(--leva-borderWidths-active)
-      ${({theme:e})=>e.colors.accent3};
-    background-color: ${({theme:e})=>e.colors.accent1};
-  }
-`,eA=m(i.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-
-  select {
-    appearance: none;
-    border: none;
-    outline: none;
-    width: 100%;
-    font-weight: var(--leva-fontWeights-button);
-    padding: 0.3rem 0.5rem;
-    padding-right: 1rem;
-    border-radius: var(--leva-radii-sm);
-    background-color: ${({theme:e})=>e.colors.elevation1};
-    color: ${({theme:e})=>e.colors.highlight3};
-    cursor: pointer;
-    font-family: var(--leva-fonts-mono);
-    font-size: var(--leva-fontSizes-root);
-
-    &:hover {
-      box-shadow: inset 0 0 0 var(--leva-borderWidths-hover)
-        ${({theme:e})=>e.colors.accent3};
-    }
-
-    &:active {
-      box-shadow: inset 0 0 0 var(--leva-borderWidths-active)
-        ${({theme:e})=>e.colors.accent3};
-      background-color: ${({theme:e})=>e.colors.accent1};
-    }
-  }
-
-  &::after {
-    position: absolute;
-    right: 0.3rem;
-    content: "";
-    width: 0.5em;
-    height: 0.3em;
-    background-color: ${({theme:e})=>e.colors.highlight3};
-    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
-  }
-`),eR=({options:e,placeholder:o,value:i,onChange:n,...l})=>t(eA,{...l,children:r("select",{value:i||"",onChange:e=>n?.(e.target.value),children:[o&&t("option",{value:"",disabled:!0,children:o}),e.map(({value:e,label:o})=>t("option",{value:e,children:o},e+o))]})}),eT=i(A)`
-  padding: 0;
-  cursor: pointer;
-  position: relative;
-
-  &:hover {
-    filter: brightness(125%);
-  }
-
-  .rc-slider-dot {
-    border-radius: 0;
-    box-shadow: none;
-    margin: 0;
-    border: none;
-    background: ${({theme:e})=>e.colors.highlight2};
-  }
-
-  &.rc-slider-horizontal .rc-slider-dot {
-    width: 1px;
-    height: 0.25rem;
-    bottom: -6px;
-  }
-
-  &.rc-slider-vertical .rc-slider-dot {
-    width: 0.25rem;
-    height: 1px;
-    left: 3px;
-  }
-
-  .rc-slider-rail {
-    background: ${({theme:e})=>e.colors.elevation1};
-  }
-
-  .rc-slider-track {
-    background: ${({theme:e,color:o})=>o||e.colors.accent2};
-  }
-
-  .rc-slider-handle {
-    border-radius: 0.125rem;
-    background: ${({theme:e,color:o})=>o||e.colors.accent2};
-    opacity: 1;
-    cursor: pointer;
-    border: none;
-    &:hover {
-      filter: brightness(110%);
-    }
-  }
-
-  .rc-slider-handle,
-  .rc-slider-handle.rc-slider-handle-dragging {
-    box-shadow: 0 0 0 2px ${({theme:e})=>e.colors.elevation2};
-  }
-
-  &:before {
-    content: "";
-    position: absolute;
-    background: transparent;
-  }
-
-  &.rc-slider-horizontal {
-    height: 2px;
-
-    .rc-slider-rail,
-    .rc-slider-track,
-    .rc-slider-step {
-      height: 100%;
-    }
-
-    .rc-slider-handle {
-      width: 0.5rem;
-      height: 1rem;
-      bottom: -7px;
-    }
-
-    .rc-slider-handle-dragging {
-      cursor: ew-resize;
-    }
-
-    &:before {
-      width: 100%;
-      height: 1rem;
-      top: -7px;
-    }
-  }
-
-  &.rc-slider-vertical {
-    width: 2px;
-
-    .rc-slider-rail,
-    .rc-slider-track,
-    .rc-slider-step {
-      width: 100%;
-    }
-
-    .rc-slider-track {
-      left: 0;
-    }
-
-    .rc-slider-handle {
-      width: 1rem;
-      height: 0.5rem;
-      right: -7px;
-    }
-
-    .rc-slider-handle-dragging {
-      cursor: ns-resize;
-    }
-
-    &:before {
-      height: 100%;
-      width: 1rem;
-      right: -7px;
-    }
-  }
-
-  &.rc-slider-horizontal .rc-slider-mark {
-    top: 1rem;
-  }
-
-  &.rc-slider-vertical .rc-slider-mark {
-    left: 1rem;
-  }
-
-  .rc-slider-mark-text {
-    font-size: 0.4rem;
-  }
-`;class eM extends R{_updateMousePosition(e){let o=this._canvas?.getBoundingClientRect(),t=this._canvas.width/o.width,r=this._canvas.height/o.height;this._mouse={x:(e.clientX-o.left)*t,y:this._height-(e.clientY-o.top)*r}}getPoints(){let e=1/this._width,o=1/this._height;return this._pointCollection._points.map(({x:t,y:r})=>({x:t*e,y:r*o}))}removeAll(){let e=this._pointCollection.getNumberOfPoints();for(let o=e;o>0;o--)this._pointCollection.remove(o-1)}update(e){this.removeAll();let o=this._width,t=this._height;e.forEach(({x:e,y:r})=>{this._pointCollection.add({x:e*o,y:r*t})}),this.draw()}off(e,o){}}let eL=i.div`
-  height: 100%;
-  width: 100%;
-  position: relative;
-  canvas {
-    border: none !important;
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 100%;
-    width: 100%;
-  }
-`,eD=({onChange:e,onMove:o,points:r,type:i="monotonic",textColor:s="red",curveColor:c=Q,gridStep:h=.25,gridColor:p=X,controlPointRadius:g=14,controlPointColor:m=Z})=>{let f=d(null),[u,v]=l(),b=a(o=>{let t=o.getPoints();e?.(t)},[e]),w=a(e=>{let t=e.getPoints();o?.(t)},[o]);return n(()=>u?.update(r),[u,r]),n(()=>u?.setSplineType(i),[u,i]),n(()=>u?.setGridStep(h),[u,h]),n(()=>u?.setGridColor(p),[u,p]),n(()=>u?.setControlPointRadius(g),[u,g]),n(()=>u?.setTextColor(s),[u,s]),n(()=>{u?.setCurveColor("idle",c)},[u,c]),n(()=>{u?.setControlPointColor("idle",m)},[u,m]),n(()=>{if(u)return u.setCurveThickness(4),u.on("movePoint",w),u.on("releasePoint",b),u.on("pointAdded",b),u.on("pointRemoved",b),u.draw(),()=>{u.off("movePoint",w),u.off("releasePoint",b),u.off("pointAdded",b),u.off("pointRemoved",b)}},[u,b,w]),n(()=>{f.current&&v(new eM(f.current,1024,1024))},[f]),t(eL,{ref:f})},eH=i.div``,eG=i.div`
-  font-family: var(--leva-fonts-mono);
-  font-size: 0.7rem;
-  color: ${({theme:e})=>e.colors.whitePrimary};
-`,eO=i.div`
-  border-bottom: 1px solid ${({theme:e})=>e.colors.elevation1};
-`,eW=i.div`
-  padding: 0.2rem 0.4rem;
-  font-size: 0.7rem;
-  color: ${({theme:e})=>e.colors.highlight2};
-  position: relative;
-  display: grid;
-  align-items: center;
-  grid-template-rows: minmax(1.5rem, max-content);
-  grid-template-columns: ${({oneLineLabels:e})=>e?"1fr":"auto 10rem"};
-  row-gap: 0.1rem;
-  column-gap: 0.4rem;
-`,eB=i.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  background: ${({theme:e})=>e.colors.elevation2};
-  padding: 0.4rem 0.1rem;
-`,eV=i.div``;export{B as Modal,em as Checker,eu as RadioGroup,ew as Input,eP as DropdownInput,e_ as ColorInput,eF as NumberInput,eI as Button,eR as Select,eT as Slider,eD as SplineEditor,eH as ConfigRowLabel,eG as ConfigRowControl,eO as ConfigRowSeparator,eW as ConfigRow,eB as ConfigPanel,eV as ConfigRowInner};
-//# sourceMappingURL=components.js.map