@web-noise/core 0.0.12-fix2 → 0.0.12-fix3

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 d,version as s}from"react";import{createPortal as c}from"react-dom";import{MdClose as h,MdSettings as p,MdInfoOutline as g}from"react-icons/md";import{useTheme as m,withTheme as f}from"@emotion/react";import"nanoid";import{FaPlus as u}from"react-icons/fa6";import"@web-noise/fetch";import{getConnectedEdges as v,addEdge as b,applyNodeChanges as w,applyEdgeChanges as x,Handle as y}from"reactflow";import{create as $}from"zustand";import{setAudioNodeTypes as k,createPatch as C}from"@web-noise/patch";import{reverse as z,patch as P,create as N}from"jsondiffpatch";import{injectGlobal as j}from"@emotion/css";import"reactflow/dist/style.css";import{Item as _,Menu as E}from"react-contexify";import"react-contexify/dist/ReactContexify.css";import"js-file-download";import"hotkeys-js";import"react-file-drop";import{FaFileUpload as S,FaVolumeOff as F,FaRegArrowAltCircleRight as I}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 A}from"use-debounce";import R from"rc-slider";import"rc-slider/assets/index.css";import{CanvasSpliner as T}from"CanvasSpliner";function M(e,o,t,r){Object.defineProperty(e,o,{get:t,set:r,enumerable:!0,configurable:!0})}var L,D,H={};M(H,"Modal",()=>B),M(H,"Checker",()=>em),M(H,"RadioGroup",()=>eu),M(H,"Input",()=>ew),M(H,"DropdownInput",()=>eP),M(H,"ColorInput",()=>e_),M(H,"NumberInput",()=>eF),M(H,"Button",()=>eI),M(H,"Select",()=>eR),M(H,"Slider",()=>eT),M(H,"SplineEditor",()=>eD),M(H,"ConfigRowLabel",()=>eH),M(H,"ConfigRowControl",()=>eG),M(H,"ConfigRowSeparator",()=>eO),M(H,"ConfigRow",()=>eW),M(H,"ConfigPanel",()=>eB),M(H,"ConfigRowInner",()=>eV);let G=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,version as a,useCallback as d,useRef as s}from"react";import{createPortal as c}from"react-dom";import{MdClose as h,MdSettings as p,MdInfoOutline as g}from"react-icons/md";import{useTheme as m,withTheme as f}from"@emotion/react";import"nanoid";import{FaPlus as u}from"react-icons/fa6";import"@web-noise/fetch";import{getConnectedEdges as v,addEdge as b,applyNodeChanges as w,applyEdgeChanges as x,Handle as y}from"reactflow";import{create as $}from"zustand";import{setAudioNodeTypes as k,createPatch as C}from"@web-noise/patch";import{reverse as z,patch as P,create as N}from"jsondiffpatch";import{injectGlobal as j}from"@emotion/css";import"reactflow/dist/style.css";import{Item as _,Menu as E}from"react-contexify";import"react-contexify/dist/ReactContexify.css";import"js-file-download";import"hotkeys-js";import"react-file-drop";import{FaFileUpload as S,FaVolumeOff as F,FaRegArrowAltCircleRight as I}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 A}from"use-debounce";import R from"rc-slider";import"rc-slider/assets/index.css";import{CanvasSpliner as T}from"CanvasSpliner";function M(e,o,t,r){Object.defineProperty(e,o,{get:t,set:r,enumerable:!0,configurable:!0})}var L,D,H={};M(H,"Modal",()=>B),M(H,"Checker",()=>em),M(H,"RadioGroup",()=>eu),M(H,"Input",()=>ew),M(H,"DropdownInput",()=>eP),M(H,"ColorInput",()=>e_),M(H,"NumberInput",()=>eF),M(H,"Button",()=>eI),M(H,"Select",()=>eR),M(H,"Slider",()=>eT),M(H,"SplineEditor",()=>eD),M(H,"ConfigRowLabel",()=>eH),M(H,"ConfigRowControl",()=>eG),M(H,"ConfigRowSeparator",()=>eO),M(H,"ConfigRow",()=>eW),M(H,"ConfigPanel",()=>eB),M(H,"ConfigRowInner",()=>eV);let G=i.div`
   position: fixed;
   z-index: ${({theme:e})=>e.zIndex.modal};
   width: 100%;
@@ -287,7 +287,7 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
   height: 8rem;
 `,i.div`
   font-size: 2rem;
-`,console.log(888888,`React version: ${s}`),i.div`
+`,console.log(888888,`React version: ${a}`),i.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -596,7 +596,7 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
 `,i(F)`
   width: 7rem;
   height: 7rem;
-`,f(i.div`
+`,console.log(99999,`React version: ${a}`),f(i.div`
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -832,7 +832,7 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
   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(I,{})})]}),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)`
+`,eP=({value:e="",placeholder:o="",onSubmit:i=()=>{},options:a=[],...c})=>{let[h,p]=l(e),[g,m]=l(!1),[f,u]=l(-1),v=s(null),b=s(null),w=a.filter(e=>""===h||e.value.toLowerCase().includes(h.toLowerCase())||e.label?.toLowerCase().includes(h.toLowerCase())),x=d(()=>{i(h),m(!1),u(-1)},[h,i]),y=d(e=>{p(e.value),i(e.value),m(!1),u(-1)},[i]),$=d(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:()=>{a.length>0&&m(!0)},onBlur:()=>{setTimeout(()=>{m(!1),u(-1)},200)},autoComplete:"off"}),t(ex,{onClick:x,children:t(I,{})})]}),a.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;
@@ -887,7 +887,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;
   }
-`,eF=({max:e=1/0,min:o=-1/0,value:r,step:i=1,onChange:l=()=>{},placeholder:a,...s})=>{let c=d(null),h=A(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`
+`,eF=({max:e=1/0,min:o=-1/0,value:r,step:i=1,onChange:l=()=>{},placeholder:a,...d})=>{let c=s(null),h=A(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,{...d,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;
@@ -1095,7 +1095,7 @@ let e,o;import{jsx as t,jsxs as r}from"react/jsx-runtime";import i from"@emotion
     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`
+`,eD=({onChange:e,onMove:o,points:r,type:i="monotonic",textColor:a="red",curveColor:c=Q,gridStep:h=.25,gridColor:p=X,controlPointRadius:g=14,controlPointColor:m=Z})=>{let f=s(null),[u,v]=l(),b=d(o=>{let t=o.getPoints();e?.(t)},[e]),w=d(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(a),[u,a]),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};