@web-noise/core 0.0.20 → 0.0.21

package/dist/esm/components.js

@@ -1,4 +1,4 @@
-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 s}from"react";import{createPortal as d}from"react-dom";import{MdClose as c,MdSettings as h,MdInfoOutline as p}from"react-icons/md";import{withTheme as m,useTheme as g}from"@emotion/react";import"nanoid";import{FaPlus as u}from"react-icons/fa6";import"@web-noise/fetch";import{getConnectedEdges as f,addEdge as v,applyNodeChanges as b,applyEdgeChanges as x,Controls as w,Handle as y}from"@xyflow/react";import{create as $}from"zustand";import{setAudioNodeTypes as k,createPatch as C}from"@web-noise/patch";import{reverse as P,patch as z,create as N}from"jsondiffpatch";import{injectGlobal as _}from"@emotion/css";import"@xyflow/react/dist/style.css";import{Item as j,Menu as E}from"react-contexify";import"react-contexify/dist/ReactContexify.css";import"hotkeys-js";import"react-file-drop";import{FaFileUpload as S,FaVolumeOff as F,FaRegArrowAltCircleRight as A}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 R from"rc-slider";import"rc-slider/assets/index.css";import{CanvasSpliner as T}from"CanvasSpliner";function L(e,o,t,r){Object.defineProperty(e,o,{get:t,set:r,enumerable:!0,configurable:!0})}var D,M,O={};L(O,"Modal",()=>U),L(O,"Checker",()=>ew),L(O,"RadioGroup",()=>e$),L(O,"Input",()=>eP),L(O,"DropdownInput",()=>eF),L(O,"ColorInput",()=>eR),L(O,"NumberInput",()=>eD),L(O,"Button",()=>eM),L(O,"Select",()=>eG),L(O,"Slider",()=>eH),L(O,"SplineEditor",()=>eV),L(O,"ConfigRowLabel",()=>eU),L(O,"ConfigRowControl",()=>eJ),L(O,"ConfigRowSeparator",()=>eK),L(O,"ConfigRow",()=>eY),L(O,"ConfigPanel",()=>eX),L(O,"ConfigRowInner",()=>eq);var G={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}},H=()=>{let e=g();return{...G,...e}};let B=m(i.div`
+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 s}from"react";import{createPortal as d}from"react-dom";import{MdClose as c,MdSettings as h,MdInfoOutline as p}from"react-icons/md";import{withTheme as m,useTheme as g}from"@emotion/react";import"nanoid";import{FaPlus as u}from"react-icons/fa6";import"@web-noise/fetch";import{getConnectedEdges as f,addEdge as v,applyNodeChanges as b,applyEdgeChanges as x,Controls as w,Handle as y}from"@xyflow/react";import{create as $}from"zustand";import{setAudioNodeTypes as k,createPatch as C}from"@web-noise/patch";import{reverse as P,patch as z,create as N}from"jsondiffpatch";import{injectGlobal as _}from"@emotion/css";import"@xyflow/react/dist/style.css";import{Item as j,Menu as E}from"react-contexify";import"react-contexify/dist/ReactContexify.css";import"hotkeys-js";import"react-file-drop";import{FaFileUpload as S,FaVolumeOff as F,FaRegArrowAltCircleRight as A}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 R from"rc-slider";import"rc-slider/assets/index.css";import{CanvasSpliner as T}from"CanvasSpliner";function L(e,o,t,r){Object.defineProperty(e,o,{get:t,set:r,enumerable:!0,configurable:!0})}var D,M,O={};L(O,"Modal",()=>U),L(O,"Checker",()=>ey),L(O,"RadioGroup",()=>ek),L(O,"Input",()=>ez),L(O,"DropdownInput",()=>eA),L(O,"ColorInput",()=>eT),L(O,"NumberInput",()=>eM),L(O,"Button",()=>eO),L(O,"Select",()=>eH),L(O,"Slider",()=>eB),L(O,"SplineEditor",()=>eU),L(O,"ConfigRowLabel",()=>eJ),L(O,"ConfigRowControl",()=>eK),L(O,"ConfigRowSeparator",()=>eY),L(O,"ConfigRow",()=>eX),L(O,"ConfigPanel",()=>eq),L(O,"ConfigRowInner",()=>eQ);var G={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}},H=()=>{let e=g();return{...G,...e}};let B=m(i.div`
   position: fixed;
   z-index: ${({theme:e})=>e.zIndex.modal};
   width: 100%;
@@ -740,7 +740,56 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
   ${({hide:e})=>e?`
     display: none;
                    `:""};
-`);let ef=i.div`
+`),m(i.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`),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 ef=i.div`
+  position: relative;
+  font-family: var(--leva-fonts-mono);
+  font-size: var(--leva-fontSizes-root);
+  background-color: var(--leva-colors-elevation1);
+`;i(ef)`
+  display: flex;
+  height: 2rem;
+  max-height: 2rem;
+  min-height: 2rem;
+  touch-action: none;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 0%;
+  color: var(--leva-colors-highlight1);
+  padding: 0 0.4rem;
+  gap: 0.3rem;
+`,i.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`,i(U)`
+  padding: 1rem;
+  max-width: 20rem;
+  height: auto;
+  max-height: 90%;
+`;let ev=i.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -752,10 +801,10 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
     content: "";
     background: ${({theme:e})=>e.colors.accent1};
   }
-`,ev=i.div``,eb=i.div`
+`,eb=i.div``,ex=i.div`
   font-size: 0.4rem;
   color: ${({theme:e})=>e.colors.highlight1};
-`,ex=i.label`
+`,ew=i.label`
   display: flex;
   cursor: pointer;
   gap: 0.4rem;
@@ -773,7 +822,7 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
     width: 70%;
     height: 70%;
   }
-`,ew=({label:e,subtitle:o,name:i,type:n="checkbox",onChange:l,checked:a=!1})=>{let s=H();return r(ex,{children:[t("input",{type:n,name:i,checked:a,onChange:({target:e})=>l?.(e.checked)}),t(ef,{className:"checker-box",theme:s}),r("div",{children:[t(ev,{children:e}),o?t(eb,{theme:s,children:o}):null]})]})},ey=i.div`
+`,ey=({label:e,subtitle:o,name:i,type:n="checkbox",onChange:l,checked:a=!1})=>{let s=H();return r(ew,{children:[t("input",{type:n,name:i,checked:a,onChange:({target:e})=>l?.(e.checked)}),t(ev,{className:"checker-box",theme:s}),r("div",{children:[t(eb,{children:e}),o?t(ex,{theme:s,children:o}):null]})]})},e$=i.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -781,10 +830,10 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
   font-size: 0.7rem;
   color: ${({theme:e})=>e.colors.highlight2};
   padding: 0.5rem;
-`,e$=({options:e,value:o,onChange:r})=>t(ey,{theme:H(),children:e.map(({value:e,label:i,subtitle:n},l)=>t(ew,{value:o,type:"radio",label:i,subtitle:n,onChange:()=>r(e),checked:e===o},l))}),ek=i.div`
+`,ek=({options:e,value:o,onChange:r})=>t(e$,{theme:H(),children:e.map(({value:e,label:i,subtitle:n},l)=>t(ey,{value:o,type:"radio",label:i,subtitle:n,onChange:()=>r(e),checked:e===o},l))}),eC=i.div`
   display: flex;
   position: relative;
-`,eC=m(i.input`
+`,eP=m(i.input`
   padding-right: 2rem;
   padding-left: 0.3rem;
   padding-top: 0;
@@ -816,7 +865,7 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
     -webkit-appearance: none;
     margin-right: 1rem;
   }
-`),eP=({type:e,value:o,placeholder:r,onChange:i=()=>{},inputProps:n,...l})=>t(ek,{...l,children:t(eC,{type:e,value:o,placeholder:r,onKeyDownCapture:e=>{e.stopPropagation()},onChange:e=>{i(e.target.value)},...n})}),ez=m(i.button`
+`),ez=({type:e,value:o,placeholder:r,onChange:i=()=>{},inputProps:n,...l})=>t(eC,{...l,children:t(eP,{type:e,value:o,placeholder:r,onKeyDownCapture:e=>{e.stopPropagation()},onChange:e=>{i(e.target.value)},...n})}),eN=m(i.button`
   position: absolute;
   right: 0;
   height: 100%;
@@ -834,10 +883,10 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
   &:active {
     color: ${({theme:e})=>e.colors.highlight3};
   }
-`),eN=i.div`
+`),e_=i.div`
   position: relative;
   width: 100%;
-`,e_=m(i.div`
+`,ej=m(i.div`
   position: absolute;
   top: calc(100% + 2px);
   left: 0;
@@ -867,7 +916,7 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
   &::-webkit-scrollbar-thumb:hover {
     background: ${({theme:e})=>e.colors.highlight1};
   }
-`),ej=m(i.div`
+`),eE=m(i.div`
   padding: 0.4rem 0.5rem;
   cursor: pointer;
   color: ${({theme:e})=>e.colors.highlight1};
@@ -879,21 +928,21 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
     background-color: ${({theme:e})=>e.colors.elevation3};
     color: ${({theme:e})=>e.colors.highlight2};
   }
-`),eE=i.div`
+`),eS=i.div`
   font-size: 0.85em;
   opacity: 0.7;
   margin-top: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-`,eS=i.div`
+`,eF=i.div`
   font-size: 1em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-`,eF=({value:e="",placeholder:o="",onSubmit:i=()=>{},options:d=[],...c})=>{let[h,p]=l(e),[m,g]=l(!1),[u,f]=l(-1),v=s(null),b=s(null),x=d.filter(e=>""===h||e.value.toLowerCase().includes(h.toLowerCase())||e.label?.toLowerCase().includes(h.toLowerCase())),w=a(()=>{i(h),g(!1),f(-1)},[h,i]),y=a(e=>{p(e.value),i(e.value),g(!1),f(-1)},[i]),$=a(e=>{switch(e.key){case"Escape":g(!1),f(-1);break;case"Enter":m&&u>=0&&x[u]?(e.preventDefault(),y(x[u])):w();break;case"ArrowDown":e.preventDefault(),m?f(e=>e<x.length-1?e+1:e):(g(!0),f(0));break;case"ArrowUp":e.preventDefault(),m&&f(e=>e>0?e-1:e)}},[w,m,u,x,y]);return n(()=>{let e=e=>{b.current&&!b.current.contains(e.target)&&v.current&&!v.current.contains(e.target)&&(g(!1),f(-1))};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),n(()=>{if(u>=0&&b.current){let e=b.current.children[u];e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})}},[u]),r(eN,{children:[r(ek,{children:[t(eC,{...c,ref:v,value:h,placeholder:o,onKeyDown:$,onChange:e=>{p(e.target.value),g(!0),f(-1)},onFocus:()=>{d.length>0&&g(!0)},onBlur:()=>{setTimeout(()=>{g(!1),f(-1)},200)},autoComplete:"off"}),t(ez,{onClick:w,children:t(A,{})})]}),d.length>0&&t(e_,{ref:b,isOpen:m&&x.length>0,children:x.map((e,o)=>r(ej,{isHighlighted:o===u,onClick:()=>y(e),onMouseEnter:()=>f(o),children:[t(eS,{children:e.label||e.value}),e.value&&t(eE,{children:e.value})]},e.value+o))})]})},eA=i(ek)`
+`,eA=({value:e="",placeholder:o="",onSubmit:i=()=>{},options:d=[],...c})=>{let[h,p]=l(e),[m,g]=l(!1),[u,f]=l(-1),v=s(null),b=s(null),x=d.filter(e=>""===h||e.value.toLowerCase().includes(h.toLowerCase())||e.label?.toLowerCase().includes(h.toLowerCase())),w=a(()=>{i(h),g(!1),f(-1)},[h,i]),y=a(e=>{p(e.value),i(e.value),g(!1),f(-1)},[i]),$=a(e=>{switch(e.key){case"Escape":g(!1),f(-1);break;case"Enter":m&&u>=0&&x[u]?(e.preventDefault(),y(x[u])):w();break;case"ArrowDown":e.preventDefault(),m?f(e=>e<x.length-1?e+1:e):(g(!0),f(0));break;case"ArrowUp":e.preventDefault(),m&&f(e=>e>0?e-1:e)}},[w,m,u,x,y]);return n(()=>{let e=e=>{b.current&&!b.current.contains(e.target)&&v.current&&!v.current.contains(e.target)&&(g(!1),f(-1))};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[]),n(()=>{if(u>=0&&b.current){let e=b.current.children[u];e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})}},[u]),r(e_,{children:[r(eC,{children:[t(eP,{...c,ref:v,value:h,placeholder:o,onKeyDown:$,onChange:e=>{p(e.target.value),g(!0),f(-1)},onFocus:()=>{d.length>0&&g(!0)},onBlur:()=>{setTimeout(()=>{g(!1),f(-1)},200)},autoComplete:"off"}),t(eN,{onClick:w,children:t(A,{})})]}),d.length>0&&t(ej,{ref:b,isOpen:m&&x.length>0,children:x.map((e,o)=>r(eE,{isHighlighted:o===u,onClick:()=>y(e),onMouseEnter:()=>f(o),children:[t(eF,{children:e.label||e.value}),e.value&&t(eS,{children:e.value})]},e.value+o))})]})},eI=i(eC)`
   gap: 0.5rem;
-`,eI=i(eC)`
+`,eR=i(eP)`
   padding: 0;
   aspect-ratio: 1 / 1;
   width: auto;
@@ -905,7 +954,7 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
     border-radius: 0.2rem;
     border: none;
   }
-`,eR=({value:e,onChange:o=()=>{},...i})=>r(eA,{...i,children:[t(eI,{type:"color",value:e,onChange:e=>{o(e.target.value)}}),t(eC,{value:e,onChange:e=>{o(e.target.value)}})]}),eT=i.span`
+`,eT=({value:e,onChange:o=()=>{},...i})=>r(eI,{...i,children:[t(eR,{type:"color",value:e,onChange:e=>{o(e.target.value)}}),t(eP,{value:e,onChange:e=>{o(e.target.value)}})]}),eL=i.span`
   position: relative;
   &:after {
     content: "↕";
@@ -918,7 +967,7 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
     font-size: 1.2em;
     color: var(--leva-colors-highlight1);
   }
-`,eL=i.input`
+`,eD=i.input`
   width: 100%;
   appearance: textfield;
   font-size: inherit;
@@ -946,7 +995,7 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
     -webkit-appearance: none;
     margin-right: 1rem;
   }
-`,eD=({max:e=1/0,min:o=-1/0,value:r,step:i=1,onChange:l=()=>{},placeholder:a,...d})=>{let c=s(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(eT,{...d,children:t(eL,{ref:c,type:"number",step:i,min:o,max:e,placeholder:a})})},eM=i.button`
+`,eM=({max:e=1/0,min:o=-1/0,value:r,step:i=1,onChange:l=()=>{},placeholder:a,...d})=>{let c=s(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(eL,{...d,children:t(eD,{ref:c,type:"number",step:i,min:o,max:e,placeholder:a})})},eO=i.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -975,7 +1024,7 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
       ${({theme:e})=>e.colors.accent3};
     background-color: ${({theme:e})=>e.colors.accent1};
   }
-`,eO=m(i.div`
+`,eG=m(i.div`
   display: flex;
   align-items: center;
   position: relative;
@@ -1016,7 +1065,7 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
     background-color: ${({theme:e})=>e.colors.highlight3};
     clip-path: polygon(100% 0%, 0 0%, 50% 100%);
   }
-`),eG=({options:e,placeholder:o,value:i,onChange:n,...l})=>t(eO,{...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))]})}),eH=i(R)`
+`),eH=({options:e,placeholder:o,value:i,onChange:n,...l})=>t(eG,{...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))]})}),eB=i(R)`
   padding: 0;
   cursor: pointer;
   position: relative;
@@ -1142,7 +1191,7 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
   .rc-slider-mark-text {
     font-size: 0.4rem;
   }
-`;class eB extends T{_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 eW=i.div`
+`;class eW extends T{_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 eV=i.div`
   height: 100%;
   width: 100%;
   position: relative;
@@ -1154,13 +1203,13 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
     height: 100%;
     width: 100%;
   }
-`,eV=({onChange:e,onMove:o,points:r,type:i="monotonic",textColor:d="red",curveColor:c=G.colors.accent2,gridStep:h=.25,gridColor:p=G.colors.elevation2,controlPointRadius:m=14,controlPointColor:g=G.colors.vivid1})=>{let u=s(null),[f,v]=l(),b=a(o=>{let t=o.getPoints();e?.(t)},[e]),x=a(e=>{let t=e.getPoints();o?.(t)},[o]);return n(()=>f?.update(r),[f,r]),n(()=>f?.setSplineType(i),[f,i]),n(()=>f?.setGridStep(h),[f,h]),n(()=>f?.setGridColor(p),[f,p]),n(()=>f?.setControlPointRadius(m),[f,m]),n(()=>f?.setTextColor(d),[f,d]),n(()=>{f?.setCurveColor("idle",c)},[f,c]),n(()=>{f?.setControlPointColor("idle",g)},[f,g]),n(()=>{if(f)return f.setCurveThickness(4),f.on("movePoint",x),f.on("releasePoint",b),f.on("pointAdded",b),f.on("pointRemoved",b),f.draw(),()=>{f.off("movePoint",x),f.off("releasePoint",b),f.off("pointAdded",b),f.off("pointRemoved",b)}},[f,b,x]),n(()=>{u.current&&v(new eB(u.current,1024,1024))},[u]),t(eW,{ref:u})},eU=i.div``,eJ=i.div`
+`,eU=({onChange:e,onMove:o,points:r,type:i="monotonic",textColor:d="red",curveColor:c=G.colors.accent2,gridStep:h=.25,gridColor:p=G.colors.elevation2,controlPointRadius:m=14,controlPointColor:g=G.colors.vivid1})=>{let u=s(null),[f,v]=l(),b=a(o=>{let t=o.getPoints();e?.(t)},[e]),x=a(e=>{let t=e.getPoints();o?.(t)},[o]);return n(()=>f?.update(r),[f,r]),n(()=>f?.setSplineType(i),[f,i]),n(()=>f?.setGridStep(h),[f,h]),n(()=>f?.setGridColor(p),[f,p]),n(()=>f?.setControlPointRadius(m),[f,m]),n(()=>f?.setTextColor(d),[f,d]),n(()=>{f?.setCurveColor("idle",c)},[f,c]),n(()=>{f?.setControlPointColor("idle",g)},[f,g]),n(()=>{if(f)return f.setCurveThickness(4),f.on("movePoint",x),f.on("releasePoint",b),f.on("pointAdded",b),f.on("pointRemoved",b),f.draw(),()=>{f.off("movePoint",x),f.off("releasePoint",b),f.off("pointAdded",b),f.off("pointRemoved",b)}},[f,b,x]),n(()=>{u.current&&v(new eW(u.current,1024,1024))},[u]),t(eV,{ref:u})},eJ=i.div``,eK=i.div`
   font-family: var(--leva-fonts-mono);
   font-size: 0.7rem;
   color: ${({theme:e})=>e.colors.whitePrimary};
-`,eK=i.div`
-  border-bottom: 1px solid ${({theme:e})=>e.colors.elevation1};
 `,eY=i.div`
+  border-bottom: 1px solid ${({theme:e})=>e.colors.elevation1};
+`,eX=i.div`
   padding: 0.2rem 0.4rem;
   font-size: 0.7rem;
   color: ${({theme:e})=>e.colors.highlight2};
@@ -1171,11 +1220,11 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
   grid-template-columns: ${({oneLineLabels:e})=>e?"1fr":"auto 10rem"};
   row-gap: 0.1rem;
   column-gap: 0.4rem;
-`,eX=i.div`
+`,eq=i.div`
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   background: ${({theme:e})=>e.colors.elevation2};
   padding: 0.4rem 0.1rem;
-`,eq=i.div``;export{U as Modal,ew as Checker,e$ as RadioGroup,eP as Input,eF as DropdownInput,eR as ColorInput,eD as NumberInput,eM as Button,eG as Select,eH as Slider,eV as SplineEditor,eU as ConfigRowLabel,eJ as ConfigRowControl,eK as ConfigRowSeparator,eY as ConfigRow,eX as ConfigPanel,eq as ConfigRowInner};
+`,eQ=i.div``;export{U as Modal,ey as Checker,ek as RadioGroup,ez as Input,eA as DropdownInput,eT as ColorInput,eM as NumberInput,eO as Button,eH as Select,eB as Slider,eU as SplineEditor,eJ as ConfigRowLabel,eK as ConfigRowControl,eY as ConfigRowSeparator,eX as ConfigRow,eq as ConfigPanel,eQ as ConfigRowInner};
 //# sourceMappingURL=components.js.map