https://www.soniare.net/_next/static/chunks/6829.e2acebdec9d39785.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6829],{6829:function(e,t,a){a.r(t),a.d(t,{default:function(){return AlbumArtClient}});var r=a(7437),l=a(2265),n=a(7702),s=a(6835),i=a(4760),o=a.n(i),d=a(9716),c=a(1040),u=a(9029),h=a(8126),g=a(7209),m=a(1344),x=a(6516),p=a(9979),b=a(4492),y=a(1892),f=a(3823),v=a(4451),w=a(1356),k=a(4112);function ConnectSongModal(e){var t;let{uid:a,connectingSongId:n,connectedSong:s,onSelect:i,onClose:o}=e,[d,c]=(0,l.useState)(null),[u,h]=(0,l.useState)({}),[g,m]=(0,l.useState)(null);(0,l.useEffect)(()=>{let e=!1;return(0,p.pB)(a).then(t=>{e||c(t)}),(0,v.QT)((0,v.JU)(x.db,"Artists",a)).then(t=>{if(!e&&t.exists()){var a;m((0,y.Uu)((null!==(a=t.data().displayName)&&void 0!==a?a:"").trim()))}}),()=>{e=!0}},[a]),(0,l.useEffect)(()=>{if(!d)return;let e=!1;return Promise.all(d.map(async e=>{var t;return[e.id,await (0,b.Vn)(a,null!==(t=e.artId)&&void 0!==t?t:"",e.art300Url)]})).then(t=>{e||h(Object.fromEntries(t))}),()=>{e=!0}},[d,a]);let f=s&&g?"/".concat(g,"/").concat((0,y.Uu)(null!==(t=s.songName)&&void 0!==t?t:"")):null;return(0,r.jsxs)("div",{className:"fixed inset-0 z-50 flex items-center justify-center px-4",children:[(0,r.jsx)("button",{className:"absolute inset-0 bg-black/70",onClick:o,"aria-label":"Close modal"}),(0,r.jsx)("div",{role:"dialog","aria-modal":"true","aria-label":"Connect to Song",className:"relative z-10 flex max-h-[80vh] w-full max-w-sm flex-col rounded-2xl bg-gray-900 p-6",children:s?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("h3",{className:"mb-2 text-center text-lg font-semibold text-white",children:"Album art connected!"}),(0,r.jsxs)("p",{className:"mb-6 text-center text-sm text-white/50",children:['This artwork is now the cover for "',s.songName,'".']}),(0,r.jsxs)("div",{className:"flex flex-col gap-3",children:[(0,r.jsx)("button",{type:"button",onClick:()=>{f&&window.open(f,"_blank","noopener,noreferrer"),o()},disabled:!f,className:"w-full rounded-full bg-primary-500 py-3 font-semibold text-primary-fg transition-colors hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50",children:"Go to Song"}),(0,r.jsx)("button",{type:"button",onClick:o,className:"w-full rounded-full border border-white/20 py-3 font-semibold text-white transition-colors hover:bg-white/10",children:"Done"})]})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("h3",{className:"mb-4 text-center text-lg font-semibold text-white",children:"Connect to Song"}),null===d&&(0,r.jsx)("p",{className:"text-center text-sm text-white/50",children:"Loading your songs…"}),null!==d&&0===d.length&&(0,r.jsxs)("div",{className:"text-center",children:[(0,r.jsx)("p",{className:"mb-4 text-sm text-white/50",children:"You don't have any songs yet. Upload one first, then come back to connect this artwork to it."}),(0,r.jsx)(w.Z,{href:"/tools/song-share",className:"inline-block rounded-full bg-primary-500 px-4 py-2 text-sm font-semibold text-primary-fg transition-colors hover:bg-primary-600",children:"Upload a Song"})]}),null!==d&&d.length>0&&(0,r.jsx)("div",{className:"flex flex-col gap-2 overflow-y-auto",children:d.map(e=>{var t;return(0,r.jsxs)("button",{type:"button",onClick:()=>i(e),disabled:null!==n,className:"flex items-center gap-3 rounded-lg border border-white/10 px-3 py-2 text-left transition hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50",children:[(0,r.jsx)("div",{className:"flex h-12 w-12 shrink-0 overflow-hidden rounded-md",children:u[e.id]?(0,r.jsx)("img",{src:u[e.id],alt:"","aria-hidden":"true",className:"h-full w-full object-cover"}):(0,r.jsx)("div",{className:"h-full w-full bg-white/10",children:(0,r.jsx)(k.Z,{className:"h-full w-full bg-white",label:null!==(t=e.songName)&&void 0!==t?t:"Song art"})})}),(0,r.jsx)("span",{className:"min-w-0 flex-1 truncate text-sm font-medium text-white",children:e.songName}),n===e.id&&(0,r.jsx)("span",{className:"shrink-0 text-xs text-white/50",children:"Connecting…"})]},e.id)})}),(0,r.jsx)("button",{onClick:o,disabled:null!==n,className:"mt-6 w-full rounded-full border border-white/20 py-3 font-semibold text-white transition-colors hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50",children:"Cancel"})]})})]})}var j=a(1704),N=a(7931);let S="mesh-gradient-canvas",C=[{value:"cells",label:"Cells"},{value:"triangles",label:"Triangles"},{value:"mesh",label:"Mesh"}],M=[{value:"none",label:"No Restriction"},{value:"no-repeat",label:"Skip Immediate Repeats"},{value:"no-double-repeat",label:"Skip Triple Repeats"},{value:"no-return",label:"Skip Doubling Back"},{value:"no-neighbor",label:"Skip Neighboring Point"},{value:"no-neighbor-after-repeat",label:"Skip Neighbor After a Repeat"}],A=[{value:"cityscape",label:"Cityscape"},{value:"spheres",label:"Spheres"},{value:"carved",label:"Carved Block"}],P=[{value:"none",label:"None"},{value:"circle",label:"Circle",content:'<path d="M0.5 0 A0.5 0.5 0 1 1 0.5 1 A0.5 0.5 0 1 1 0.5 0 Z" fill="none" stroke="#000" stroke-width="6" vector-effect="non-scaling-stroke"/>'},{value:"cross",label:"Cross",content:'<path d="M0 0 L1 1 M1 0 L0 1" stroke="#000" stroke-width="6" vector-effect="non-scaling-stroke" fill="none"/>'}],R=[{value:"oblique",label:"Oblique",camera:{type:"oblique",angle:45,distance:15}},{value:"isometric",label:"Isometric",camera:{type:"isometric",angle:45}}

1,{value:"orthographic",label:"Orthographic",camera:{type:"orthographic",angle:45,pitch:35.264}},{value:"perspective",label:"Perspective",camera:{type:"perspective",position:[5,5],distance:10}}],hslToHex=(e,t,a)=>{let r=(1-Math.abs(2*a-1))*t,l=r*(1-Math.abs(e/60%2-1)),n=a-r/2,s=0,i=0,o=0;e<60?(s=r,i=l,o=0):e<120?(s=l,i=r,o=0):e<180?(s=0,i=r,o=l):e<240?(s=0,i=l,o=r):e<300?(s=l,i=0,o=r):(s=r,i=0,o=l);let toHex=e=>{let t=Math.round((e+n)*255);return t.toString(16).padStart(2,"0")};return"#".concat(toHex(s)).concat(toHex(i)).concat(toHex(o))},hexToRgb=e=>{let t=e.replace("#","");return{r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16)}},rgbToHex=e=>{let{r:t,g:a,b:r}=e,toHex=e=>e.toString(16).padStart(2,"0");return"#".concat(toHex(t)).concat(toHex(a)).concat(toHex(r))},darkenHslCss=(e,t)=>{let a=e.match(/^hsl\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*\)$/);if(!a)return e;let[,r,l,n]=a,s=Math.max(0,Number(n)-t);return"hsl(".concat(r,", ").concat(l,"%, ").concat(s,"%)")},blendHslCss=e=>{let t=0,a=0,r=0;for(let l of e){let e=l.match(/^hsl\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*\)$/),[n,s,i]=e?[Number(e[1]),Number(e[2])/100,Number(e[3])/100]:[0,0,.5],o=hslToHex(n,s,i);t+=parseInt(o.slice(1,3),16),a+=parseInt(o.slice(3,5),16),r+=parseInt(o.slice(5,7),16)}let l=e.length,toHex=e=>Math.round(e/l).toString(16).padStart(2,"0");return"#".concat(toHex(t)).concat(toHex(a)).concat(toHex(r))},L=[{value:"linearPosition",label:"linearPosition"},{value:"exponentialPosition",label:"exponentialPosition"},{value:"quadraticPosition",label:"quadraticPosition"},{value:"cubicPosition",label:"cubicPosition"},{value:"quarticPosition",label:"quarticPosition"},{value:"sinusoidalPosition",label:"sinusoidalPosition"},{value:"asinusoidalPosition",label:"asinusoidalPosition"},{value:"arcPosition",label:"arcPosition"},{value:"smoothStepPosition",label:"smoothStepPosition"}],E=[{id:"palette",label:"Palette",description:"Build a colour palette by hand on a wheel."},{id:"gradient-mesh",label:"Gradient Mesh",description:"Blends palette colours into a soft background."},{id:"voxel-sculpture",label:"Voxel Sculpture",description:"Builds a tiny 3D voxel sculpture."},{id:"blobs",label:"Blobs",description:"Scatters organic blob shapes in your palette."},{id:"voronoi",label:"Voronoi",description:"Tiles a mosaic of cells across your palette."},{id:"fractal",label:"Fractal",description:"Grows a one-of-a-kind fractal from a few simple rules."},{id:"upload-image",label:"Upload Image",description:"Add your own picture as a layer, at its real size."},{id:"remix-pile",label:"Remix Pile",description:"Browse a random batch of saved album art."},{id:"my-songs",label:"My Songs",description:"Pull the art from one of your own songs to remix."},{id:"my-saved-art",label:"My Saved Art",description:"Browse and reuse pictures you saved for later."}],I={hue:0,saturation:100,contrast:100,brightness:100,opacity:1,scale:1,offsetX:0,offsetY:0,rotation:0},generateThumbnail=e=>{let t=document.createElement("canvas");t.width=96,t.height=96;let a=t.getContext("2d");return a?(a.drawImage(e,0,0,96,96),t.toDataURL("image/png")):""},F=Math.sqrt(195075),replaceColorInCanvas=(e,t,a,r)=>{let l=e.width,n=e.height,s=document.createElement("canvas");s.width=l,s.height=n;let i=s.getContext("2d",{willReadFrequently:!0});if(!i)return e;i.drawImage(e,0,0);let o=i.getImageData(0,0,l,n),d=o.data,c=a/100*F;for(let e=0;e<d.length;e+=4){let a=d[e]-t.r,l=d[e+1]-t.g,n=d[e+2]-t.b,s=Math.sqrt(a*a+l*l+n*n);s<=c&&(d[e]=r.r,d[e+1]=r.g,d[e+2]=r.b,d[e+3]=r.a)}return i.putImageData(o,0,0),s},distanceToEdge=(e,t,a,r,l,n)=>{let s=[];return e>1e-9?s.push((l-a)/e):e<-.000000001&&s.push(-(a/e)),t>1e-9?s.push((n-r)/t):t<-.000000001&&s.push(-(r/t)),Math.min(...s)},sampleBilinear=(e,t,a,r,l,n,s)=>{let clampCol=e=>Math.max(0,Math.min(t-1,e)),clampRow=e=>Math.max(0,Math.min(a-1,e)),i=Math.floor(r),o=clampRow(Math.floor(l)),d=clampRow(o+1),c=n?(i%t+t)%t:clampCol(i),u=n?((i+1)%t+t)%t:clampCol(i+1),h=r-Math.floor(r),g=l-Math.floor(l),m=(o*t+c)*4,x=(o*t+u)*4,p=(d*t+c)*4,b=(d*t+u)*4;for(let t=0;t<4;t+=1){let a=e[m+t]+(e[x+t]-e[m+t])*h,r=e[p+t]+(e[b+t]-e[p+t])*h;s[t]=a+(r-a)*g}},imageToPolar=(e,t,a,r)=>

1{let l=e.data,n=t.data,s=e.width,i=e.height,o=360/s*Math.PI/180,d=new Float32Array(4);for(let e=0;e<s;e+=1){let t=Math.sin(e*o),c=Math.cos(e*o),u=distanceToEdge(c,t,a,r,s,i);for(let o=0;o<i;o+=1){let h=a+u*o/i*c,g=r+u*o/i*t;sampleBilinear(l,s,i,h,g,!1,d);let m=(e+o*s)*4;n[m]=d[0],n[m+1]=d[1],n[m+2]=d[2],n[m+3]=d[3]}}},imageFromPolar=(e,t,a,r)=>{let l=e.data,n=t.data,s=e.width,i=e.height,o=new Float32Array(4);for(let e=0;e<s;e+=1)for(let t=0;t<i;t+=1){let d=e-a,c=t-r,u=Math.sqrt(d*d+c*c),h=u>0?d/u:1,g=u>0?c/u:0,m=distanceToEdge(h,g,a,r,s,i),x=u*i/m,p=(180*Math.atan2(c,d)/Math.PI+360)%360*s/360;sampleBilinear(l,s,i,p,x,!0,o);let b=(t*s+e)*4;n[b]=o[0],n[b+1]=o[1],n[b+2]=o[2],n[b+3]=o[3]}},kaleidoscopeMosaicCanvas=(e,t,a)=>{let r=e.width,l=e.height,n=document.createElement("canvas");n.width=r,n.height=l;let s=n.getContext("2d",{willReadFrequently:!0});if(!s)return e;s.drawImage(e,0,0);let i=Math.round(t);if(i<1)return n;let o=r/2,d=l/2,c=s.getImageData(0,0,r,l),u=s.createImageData(r,l);imageToPolar(c,u,o,d);let h=Math.max(1,8*r/3e3),g=r/Math.pow(2,i);for(;g<=h;)g*=2,i-=1;g=Math.ceil(g);let m=Math.floor(r*(a%360)/360),x=m+g>r,p=x?g:0,b=x?0:g,y=x?-1:1;for(let e=0;e<l;e+=1)for(let t=p;t!==b;t+=y){let a=Math.round(t+m)%r,l=(r*e+a)*4,n=(r*e+t)*4;u.data[n]=u.data[l],u.data[n+1]=u.data[l+1],u.data[n+2]=u.data[l+2],u.data[n+3]=u.data[l+3]}for(let e=0;e<l;e+=1){let t=g;for(let a=0;a<i;a+=1){for(let a=0;

1a<t+1;a+=1){let l=(r*e+a)*4,n=(r*e+2*t-a-1)*4;u.data[n]=u.data[l],u.data[n+1]=u.data[l+1],u.data[n+2]=u.data[l+2],u.data[n+3]=u.data[l+3]}t*=2}}let f=s.createImageData(r,l);return imageFromPolar(u,f,o,d),s.putImageData(f,0,0),n},kaleidoscopeMirrorCanvas=(e,t,a)=>{let r=e.width,l=e.height,n=document.createElement("canvas");n.width=r,n.height=l;let s=n.getContext("2d");if(!s)return e;let i=Math.round(t);if(i<1)return s.drawImage(e,0,0),n;let o=r/2,d=l/2,c=Math.min(o,d),u=Math.pow(2,i),h=2*Math.PI/u,g=a*Math.PI/180;for(let t=0;t<u;t+=1)s.save(),s.translate(o,d),s.rotate(g+t*h),s.beginPath(),s.moveTo(0,0),s.arc(0,0,c,0,h),s.closePath(),s.clip(),t%2==1&&s.scale(1,-1),s.translate(-o,-d),s.drawImage(e,0,0),s.restore();return n},scaledContentBounds=(e,t,a)=>{if(!e)return{x:0,y:0,width:t,height:a};let r=t/3e3;return{x:e.x*r,y:e.y*r,width:e.width*r,height:e.height*r}},tileCanvas=(e,t,a,r)=>{let l=e.width,n=e.height,s=document.createElement("canvas");s.width=l,s.height=n;let i=s.getContext("2d");if(!i)return e;let o=Math.max(1,Math.round(t));if(a){let t=l/o,a=n/o;for(let l=0;l<o;l+=1)for(let n=0;n<o;n+=1)i.drawImage(e,r.x,r.y,r.width,r.height,n*t,l*a,t,a)}else{let t=l/(o+.5),a=n/(o+.5);for(let s=0;s<n;s+=a)for(let n=0;n<l;n+=t)i.drawImage(e,r.x,r.y,r.width,r.height,n,s,t,a)}return s};function SettingRow(e){let{label:t,sublabel:a,children:l}=e;return(0,r.jsxs)("div",{className:"flex items-center justify-between gap-4 py-3",children:[(0,r.jsxs)("span",{className:"text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:[t,a&&(0,r.jsx)("span",{className:"block text-[10px] font-normal normal-case tracking-normal text-gray-400 dark:text-gray-500",children:a})]}),l]})}let B="cursor-pointer bg-transparent pr-8 text-right text-sm underline decoration-gray-400 underline-offset-4 focus:outline-none dark:decoration-gray-500",T="h-5 w-5 shrink-0 rounded-sm border-2 border-gray-400 text-primary-500 focus:ring-primary-500 dark:border-gray-500";function AlbumArtClient(){var e;let{user:t,showAuthModal:a}=(0,m.useAuth)(),[i,v]=(0,l.useState)(!1);(0,l.useEffect)(()=>{if(!t){v(!1);return}let checkProStatus=async()=>{try{let e=(0,g.$C)(x.H),t=(0,g.V1)(e,"checkProStatus"),a=await t({testing:!1}),r=a.data;v(r.hasPro)}catch(e){console.error("Error checking Pro status:",e),v(!1)}};checkProStatus()},[t]);let w=(0,l.useMemo)(()=>new n.WW({anchorColors:[[227,.66,.5],[37,.85,.6]],numPoints:4,positionFunctionX:n.Rq.smoothStepPosition,positionFunctionY:n.Rq.smoothStepPosition,positionFunctionZ:n.Rq.linearPosition,clampToCircle:!0}),[]),[k,F]=(0,l.useState)(4),[U,H]=(0,l.useState)("smoothStepPosition"),[V,D]=(0,l.useState)("smoothStepPosition"),[z,q]=(0,l.useState)("linearPosition"),[O,W]=(0,l.useState)(!1),[G,X]=(0,l.useState)(!1),[Y,Z]=(0,l.useState)(()=>w.colorsCSS),[J,_]=(0,l.useState)(()=>w.anchorPoints.length),[K,Q]=(0,l.useState)(null),[$,ee]=(0,l.useState)(!1),[et,ea]=(0,l.useState)("palette"),[er,el]=(0,l.useState)([]),[en,es]=(0,l.useState)(null),[ei,eo]=(0,l.useState)(null),[ed,ec]=(0,l.useState)("basics"),[eu,eh]=(0,l.useState)(!1),[eg,em]=(0,l.useState)(null),[ex,ep]=(0,l.useState)(20),[eb,ey]=(0,l.useState)("#ffffff"),[ef,ev]=(0,l.useState)(100),[ew,ek]=(0,l.useState)("mosaic"),[ej,eN]=(0,l.useState)(3),[eS,eC]=(0,l.useState)(0),[eM,eA]=(0,l.useState)(3),[eP,eR]=(0,l.useState)(!1),[eL,eE]=(0,l.useState)(11),[eI,eF]=(0,l.useState)(320),[eB,eT]=(0,l.useState)(4),[eU,eH]=(0,l.useState)([!0,!0,!0,!0]),[eV,eD]=(0,l.useState)("isometric"),[ez,eq]=(0,l.useState)(5),[eO,eW]=(0,l.useState)("cityscape"),[eG,eX]=(0,l.useState)(.08),[eY,eZ]=(0,l.useState)(45),[eJ,e_]=(0,l.useState)(null),[eK,eQ]=(0,l.useState)(!1),[e$,e0]=(0,l.useState)(45),[e1,e3]=(0,l.useState)(8),[e5,e2]=(0,l.useState)(2),[e4,e6]=(0,l.useState)(1),[e8,e7]=(0,l.useState)(0),[e9,te]=(0,l.useState)("none"),[tt,ta]=(0,l.useState)(!1),[tr,tl]=(0,l.useState)(!1),[tn,ts]=(0,l.useState)("#000000"),[ti,to]=(0,l.useState)(40),[td,tc]=(0,l.useState)(2),[tu,th]=(0,l.useState)("cells"),[tg,tm]=(0,l.useState)(!0),[tx,tp]=(0,l.useState)("#000000"),[tb,ty]=(0,l.useState)(2),[tf,tv]=(0,l.useState)(3e3),[tw,tk]=(0,l.useState)(3),[tj,tN]=(0,l.useState)(.5),[tS,tC]=(0,l.useState)(!1),[tM,tA]=(0,l.useState)(!1),[tP,tR]=(0,l.useState)("none"),[tL,tE]=(0,l.useState)("#ffffff"),[tI,tF]=(0,l.useState)(!1),[tB,tT]=(0,l.useState)([]),[tU,tH]=(0,l.useState)(0),[tV,tD]=(0,l.useState)(null),[tz,tq]=(0,l.useState)(!1),[tO,tW]=(0,l.useState)(null),[tG,tX]=(0,l.useState)(!1),[tY,tZ]=(0,l.useState)(!1),[tJ,t_]=(0,l.useState)(null),[tK,tQ]=(0,l.useState)(null),[t$,t0]=(0,l.useState)(!1),[t1,t3]=(0,l.useState)(!1),[t5,t2]=(0,l.useState)(!1),[t4,t6]=(0,l.useState)([]),[t8,t7]=(0,l.useState)(0),[t9,ae]=(0,l.useState)(null),[at,aa]=(0,l.useState)(!1),[ar,al]=(0,l.useState)({}),[an,as]=(0,l.useState)(null),[ai,ao]=(0,l.useState)([]),[ad,ac]=(0,l.useState)(0),[au,ah]=(0,l.useState)(null),[ag,am]=(0,l.useState)(!1),[ax,ap]=(0,l.useState)({}),[ab,ay]=(0,l.useState)(null),[af,av]=(0,l.useState)(null),[aw,ak]=(0,l.useState)(!1),[aj,aN]=(0,l.useState)(!1),[aS,aC]=(0,l.useState)(null),aM=(0,l.useRef)(null),aA=(0,l.useRef)(null),aP=(0,l.useRef)(null),aR=(0,l.useRef)(null),aL=(0,l.useRef)(null),aE=(0,l.useRef)(null),aI=(0,l.useRef)(null),aF=(0,l.useRef)(Math.floor(1e3*Math.random())),aB=(0,l.useRef)(null),aT=(0,l.useRef)(null),aU=(0,l.useRef)(null),aH=(0,l.useRef)(null),aV=(0,l.useRef)(null),aD=(0,l.useRef)(null),az=(0,l.useRef)([null]),aq=(0,l.useRef)(new Map),aO=(0,l.useRef)([null]),aW=(0,l.useRef)(new Map),aG=(0,l.useRef)([null]),aX=(0,l.useRef)(new Map),syncFromPoline=()=>{Z([...w.colorsCSS]),_(w.anchorPoints.length)};(0,l.useEffect)(()=>{let e=aM.current;if(!e)return;e.setPoline(w),e.setAllowAddPoints(!0);let handleChange=()=>syncFromPoline();return e.addEventListener("poline-change",handleChange),()=>e.removeEventListener("poline-change",handleChange)},[w]),(0,l.useEffect)(()=>{let handleWindowPointerUp=e=>{var t,a;let r=null===(a=aM.current)||void 0===a?void 0:null===(t=a.shadowRoot)||void 0===t?void 0:t.querySelector("svg");r&&r.dispatchEvent(new PointerEvent("pointerup",{bubbles:!0,pointerId:e.pointerId,clientX:e.clientX,clientY:e.clientY}))};return window.addEventListener("pointerup",handleWindowPointerUp),()=>window.removeEventListener("pointerup",handleWindowPointerUp)},[]);let getFourMeshColors=()=>{let e=w.colors;return 0===e.length?["#000000","#000000","#000000","#000000"]:[0,1,2,3].map(t=>{let a=Math.min(e.length-1,Math.round(t*(e.length-1)/3)),[r,l,n]=e[a];return hslToHex(r,l,n)})},randomPaletteHex=()=>{let e=w.colors;if(0===e.length)return"#000000";let[t,a,r]=e[Math.floor(Math.random()*e.length)];return hslToHex(t,a,r)},drawLayerOnto=(e,t)=>{if(!t.visible)return;e.save(),e.globalAlpha=t.opacity,e.filter="hue-rotate(".concat(t.hue,"deg) 

1saturate(").concat(t.saturation,"%) contrast(").concat(t.contrast,"%) brightness(").concat(t.brightness,"%)");let a=3e3*t.scale,r=(3e3-a)/2+t.offsetX/100*3e3,l=(3e3-a)/2-t.offsetY/100*3e3,n=r+a/2,s=l+a/2;e.translate(n,s),e.rotate(t.rotation*Math.PI/180),e.drawImage(t.canvas,-a/2,-a/2,a,a),e.restore()};(0,l.useEffect)(()=>{let e=aA.current;if(!e)return;let t=e.getContext("2d");t&&(t.clearRect(0,0,3e3,3e3),er.forEach(e=>drawLayerOnto(t,e)))},[er]);let aY=null!==(e=er.find(e=>e.id===ei))&&void 0!==e?e:null;(0,l.useEffect)(()=>{let e=aP.current;if(!e||!aY)return;let t=e.getContext("2d");t&&(t.clearRect(0,0,e.width,e.height),t.drawImage(aY.canvas,0,0,e.width,e.height))},[null==aY?void 0:aY.canvas,ed]),(0,l.useEffect)(()=>{if("kaleidoscope"!==ed||!aY)return;let e=aR.current;if(!e)return;let t=document.createElement("canvas");t.width=600,t.height=600;let a=t.getContext("2d");if(!a)return;a.drawImage(aY.canvas,0,0,600,600);let r="mosaic"===ew?kaleidoscopeMosaicCanvas(t,ej,eS):kaleidoscopeMirrorCanvas(t,ej,eS),l=e.getContext("2d");l&&(l.clearRect(0,0,e.width,e.height),l.drawImage(r,0,0))},[null==aY?void 0:aY.canvas,ed,ew,ej,eS]),(0,l.useEffect)(()=>{if("tile"!==ed||!aY)return;let e=aL.current;if(!e)return;let t=document.createElement("canvas");t.width=600,t.height=600;let a=t.getContext("2d");if(!a)return;a.drawImage(aY.canvas,0,0,600,600);let r=scaledContentBounds(aY.contentBounds,600,600),l=tileCanvas(t,eM,eP,r),n=e.getContext("2d");n&&(n.clearRect(0,0,e.width,e.height),n.drawImage(l,0,0))},[null==aY?void 0:aY.canvas,ed,eM,eP]),(0,l.useEffect)(()=>{eh(!1),em(null),ec("basics")},[ei]);let revertLayerEdit=e=>{el(t=>t.map(t=>t.id===e&&t.revertCanvas?{...t,canvas:t.revertCanvas,thumbnail:generateThumbnail(t.revertCanvas),revertCanvas:void 0,contentBounds:t.revertContentBounds,revertContentBounds:void 0}:t))},addLayer=(e,t,a)=>{let r;let l=document.createElement("canvas");l.width=3e3,l.height=3e3;let n=l.getContext("2d");if(!n)return;if(null==a?void 0:a.preserveNativeSize){let e=(3e3-t.width)/2,a=(3e3-t.height)/2;n.drawImage(t,e,a),r={x:e,y:a,width:t.width,height:t.height}}else n.drawImage(t,0,0,3e3,3e3);let s=generateThumbnail(l);el(t=>[...t,{id:"layer-".concat(Date.now()),name:e,canvas:l,thumbnail:s,visible:!0,contentBounds:r,...I}])},updateLayer=(e,t)=>{el(a=>a.map(a=>a.id===e?{...a,...t}:a))},deleteLayer=e=>{el(t=>t.filter(t=>t.id!==e)),e===ei&&(eo(null),ea(null))},toggleLayerVisibility=e=>{el(t=>t.map(t=>t.id===e?{...t,visible:!t.visible}:t))},duplicateLayer=e=>{el(t=>{let a=t.findIndex(t=>t.id===e);if(-1===a)return t;let r={...t[a],id:"layer-".concat(Date.now())},l=[...t];return l.splice(a+1,0,r),l})},mergeLayerDown=e=>{let t=er.findIndex(t=>t.id===e);if(t<=0)return;let a=er[t-1],r=er[t],l=document.createElement("canvas");l.width=3e3,l.height=3e3;let n=l.getContext("2d");if(!n)return;drawLayerOnto(n,a),drawLayerOnto(n,r);let s=document.createElement("canvas");s.width=96,s.height=96;let i=s.getContext("2d"),o="";i&&(i.drawImage(l,0,0,96,96),o=s.toDataURL("image/png"));let d={id:"layer-".concat(Date.now()),name:"Merged",canvas:l,thumbnail:o,visible:!0,...I};el(e=>{let a=[...e];return a.splice(t-1,2,d),a}),(ei===a.id||ei===r.id)&&(eo(null),ea(null))},reorderLayers=(e,t)=>{e!==t&&el(a=>{let r=a.findIndex(t=>t.id===e),l=a.findIndex(e=>e.id===t);if(-1===r||-1===l)return a;let n=[...a],[s]=n.splice(r,1);return n.splice(l,0,s),n})};(0,l.useEffect)(()=>{let e=getFourMeshColors(),t=aI.current;t||((t=new s.Z).initGradient("#".concat(S),e),aI.current=t),t.freqX=2e-5*eL,t.freqY=2e-5*eL,t.amp=eI,t.seed=eB,t.activeColors=eU.map(e=>e?1:0),t.changeGradientColors(e),t.changePosition(aF.current)},[Y,eL,eI,eB,eU]),(0,l.useEffect)(()=>()=>{var e;return null===(e=aI.current)||void 0===e?void 0:e.disconnect()},[]);let drawBlobs=()=>{let e=aB.current;if(!e)return;let t=e.getContext("2d");if(!t)return;t.clearRect(0,0,3e3,3e3);let a=Y.length>0?Y:["#888888"],r=3+Math.floor(4*Math.random());for(let e=0;e<r;e++){let e=3e3*(.12+.73*Math.random()),r=3e3*Math.random(),l=3e3*Math.random(),n=Math.random()*Math.PI*2,s=.6+.8*Math.random(),i=.6+.8*Math.random(),{path:d}=o()({size:e,growth:1+9*Math.random(),edges:3+Math.floor(12*Math.random())});t.save(),t.translate(r,l),t.rotate(n),t.scale(s,i),t.translate(-e/2,-e/2),t.fillStyle=a[Math.floor(Math.random()*a.length)],t.globalAlpha=.35+.65*Math.random(),t.fill(new Path2D(d)),t.restore(

1)}};(0,l.useEffect)(()=>{drawBlobs()},[Y]);let drawVoronoi=()=>{let e=aT.current;if(!e)return;let t=e.getContext("2d");if(!t)return;t.clearRect(0,0,3e3,3e3);let a=Y.length>0?Y:["#888888"],r=[];for(let e=0;e<ti;e++)r.push([3e3*Math.random(),3e3*Math.random()]);let l=r.map(()=>a[Math.floor(Math.random()*a.length)]),n=c.Z.from(r),s=n.voronoi([0,0,3e3,3e3]),i=n.points;for(let e=0;e<td;e++){for(let e=0;e<r.length;e++){let t=s.cellPolygon(e);if(!t)continue;let a=0,r=0;for(let[e,l]of t)a+=e,r+=l;i[2*e]=a/t.length,i[2*e+1]=r/t.length}s.update()}for(let e=0;e<r.length;e++)r[e]=[i[2*e],i[2*e+1]];if("mesh"===tu)t.beginPath(),n.render(t),t.strokeStyle=tx,t.lineWidth=tb,t.stroke();else if("triangles"===tu){let{triangles:e}=n;for(let a=0;a<e.length/3;a++){let n=e[3*a],s=e[3*a+1],i=e[3*a+2];t.beginPath(),t.moveTo(r[n][0],r[n][1]),t.lineTo(r[s][0],r[s][1]),t.lineTo(r[i][0],r[i][1]),t.closePath(),t.fillStyle=blendHslCss([l[n],l[s],l[i]]),t.fill(),tg&&(t.strokeStyle=tx,t.lineWidth=tb,t.stroke())}}else for(let e=0;e<r.length;e++)t.beginPath(),s.renderCell(e,t),t.fillStyle=l[e],t.fill(),tg&&(t.strokeStyle=tx,t.lineWidth=tb,t.stroke())};(0,l.useEffect)(()=>{drawVoronoi()},[Y,ti,td,tu,tg,tx,tb]),(0,l.useEffect)(()=>{let e=aU.current;if(!e)return;let t=new u.Z(e,{canvasSize:tf,sides:tw,jumpDistance:tj,midpointVertex:tS,centerVertex:tM,restriction:tP,symmetrical:!1,gammaExponent:.3,fgColor:tL,solidBg:!1,autoStop:!0,stabilityNewPixelsThreshold:1e3});return t.play(),()=>t.worker.terminate()},[tf,tw,tj,tS,tM,tP,tL]);let processUploadedImageFile=async e=>{if(!e.type.startsWith("image/")&&!e.name.toLowerCase().endsWith(".heic")){aC("That file doesn't look like an image.");return}aC(null),aN(!0);let t=null;try{let a=await (0,y.Ar)(e);t=URL.createObjectURL(a);let r=await new Promise((e,a)=>{let r=new Image;r.onload=()=>e(r),r.onerror=()=>a(Error("Failed to load image")),r.src=t}),l=document.createElement("canvas");l.width=r.width,l.height=r.height;let n=l.getContext("2d");if(!n)return;n.drawImage(r,0,0);let s=e.name.replace(/\.[^/.]+$/,"")||"Uploaded Image";addLayer(s,l,{preserveNativeSize:!0})}catch(e){console.error("Error adding uploaded image layer:",e),aC("Could not load that image. Try a different file.")}finally{t&&URL.revokeObjectURL(t),aN(!1)}},fetchRemixPage=async e=>{var t;tq(!0);let a=aW.current.get(e);if(a){tT(a),tq(!1);return}let r=null!==(t=aO.current[e])&&void 0!==t?t:null,{items:l,lastDoc:n}=await (0,p.im)(4,r);aW.current.set(e,l),aO.current[e+1]=n,tT(l),tq(!1)};(0,l.useEffect)(()=>{"remix-pile"===et&&0===tB.length&&null===tV&&(fetchRemixPage(0),(0,p.P0)().then(tD))},[et]);let aZ=null!==tV?Math.max(1,Math.ceil(tV/4)):null,aJ=null!==aZ?tU>=aZ-1:tB.length<4,handleAddRemixLayer=async e=>{tW(e.id);try{let t=await new Promise((t,a)=>{let r=new Image;r.crossOrigin="anonymous",r.onload=()=>t(r),r.onerror=()=>a(Error("Failed to load image")),r.src=e.url}),a=document.createElement("canvas");a.width=3e3,a.height=3e3;let r=a.getContext("2d");if(!r)return;r.drawImage(t,0,0,3e3,3e3),addLayer("Remix Pile",a)}catch(e){console.error("Error adding remix pile layer:",e)}finally{tW(null)}},fetchMySongsPage=async(e,t)=>{var a;aa(!0);let r=aX.current.get(t);if(r){t6(r),aa(!1);return}let l=null!==(a=aG.current[t])&&void 0!==a?a:null,{songs:n,lastDoc:s}=await (0,p.B0)(e,4,l);aX.current.set(t,n),aG.current[t+1]=s,t6(n),aa(!1)};(0,l.useEffect)(()=>{"my-songs"===et&&t&&0===t4.length&&null===t9&&(fetchMySongsPage(t.uid,0),(0,p.uG)(t.uid).then(ae))},[et,t]);let a_=null!==t9?Math.max(1,Math.ceil(t9/4)):null,aK=null!==a_?t8>=a_-1:t4.length<4;(0,l.useEffect)(()=>{if(!t||0===t4.length)return;let e=!1;return Promise.all(t4.filter(e=>e.artId).map(async e=>[e.id,await (0,b.Vn)(t.uid,e.artId,e.art300Url)])).then(t=>{e||al(e=>({...e,...Object.fromEntries(t)}))}),()=>{e=!0}},[t4,t]);let handleAddMySongLayer=async e=>{if(t&&e.artId){as(e.id);try{let a=await (0,b.$j)(t.uid,e.artId);if(!a)return;let r=await new Promise((e,t)=>{let r=new Image;r.crossOrigin="anonymous",r.onload=()=>e(r),r.onerror=()=>t(Error("Failed to load image")),r.src=a}),l=document.createElement("canvas");l.width=3e3,l.height=3e3;let n=l.getContext("2d");if(!n)return;n.drawImage(r,0,0,3e3,3e3),addLayer(e.songName||"Song Art",l)}catch(e){console.error("Error adding song art layer:",e)}finally{as(null)}}},fetchSavedArtPage=async(e,t)=>{var a;am(!0);let r=aq.current.get(t);if(r){ao(r),am(!1);return}let l=null!==(a=az.current[t])&&void 0!==a?a:null,{items:n,lastDoc:s}=await (0,p.NX)(e,4,l);aq.current.set(t,n),az.current[t+1]=s,ao(n),am(!1)};(0,l.useEffect)(()=>{"my-saved-art"===et&&t&&i&&0===ai.length&&null===au&&(fetchSavedArtPage(t.uid,0),(0,p.Bc)(t.uid).then(ah))},[et,t,i]);let aQ=null!==au?Math.max(1,Math.ceil(au/4)):null,a$=null!==aQ?ad>=aQ-1:ai.length<4;(0,l.useEffect)(()=>

1{if(!t||0===ai.length)return;let e=!1;return Promise.all(ai.map(async e=>[e.id,await (0,b.Vn)(t.uid,e.id,e.art300Url,"savedArt")])).then(t=>{e||ap(e=>({...e,...Object.fromEntries(t)}))}),()=>{e=!0}},[ai,t]);let handleAddSavedArtLayer=async e=>{if(t){ay(e.id);try{let a=await (0,b.XV)(t.uid,e.id),r=await new Promise((e,t)=>{let r=new Image;r.crossOrigin="anonymous",r.onload=()=>e(r),r.onerror=()=>t(Error("Failed to load image")),r.src=a}),l=document.createElement("canvas");l.width=3e3,l.height=3e3;let n=l.getContext("2d");if(!n)return;n.drawImage(r,0,0,3e3,3e3),addLayer("Saved Art",l)}catch(e){console.error("Error adding saved art layer:",e)}finally{ay(null)}}},handleDeleteSavedArt=async e=>{if(t){av(e.id);try{await (0,p.mJ)(e.id),await Promise.all([(0,h.oq)((0,h.iH)(x.tO,"users/".concat(t.uid,"/savedArt/").concat(e.id))).catch(()=>{}),(0,h.oq)((0,h.iH)(x.tO,"users/".concat(t.uid,"/savedArt/").concat(e.id,"_300"))).catch(()=>{})]);let a=ai.filter(t=>t.id!==e.id);ao(a),aq.current.set(ad,a),ah(e=>null!==e?Math.max(0,e-1):e)}catch(e){console.error("Error deleting saved art:",e)}finally{av(null)}}},handleSaveForLater=async()=>{if(!t){a();return}if(!i){window.location.href="/pricing?f=album-art-save-for-later";return}let e=aA.current;if(e){t3(!0);try{let a=await new Promise(t=>e.toBlob(t,"image/png"));if(!a)throw Error("Failed to create image blob");let r=(0,p.SM)(),l=(0,h.iH)(x.tO,"users/".concat(t.uid,"/savedArt/").concat(r.id));await (0,h.KV)(l,a,{contentType:"image/png"}),await (0,p.x4)(r,t.uid),t2(!0),setTimeout(()=>t2(!1),2e3),az.current=[null],aq.current=new Map,ac(0),ao([]),ah(null),"my-saved-art"===et&&(fetchSavedArtPage(t.uid,0),(0,p.Bc)(t.uid).then(ah))}catch(e){console.error("Error saving art for later:",e)}finally{t3(!1)}}},handleAddToRemixPile=async()=>{if(!t){a();return}let e=aA.current;if(e){tX(!0);try{let a=await new Promise(t=>e.toBlob(t,"image/png"));if(!a)throw Error("Failed to create image blob");let r=(0,p.A2)(),l=(0,h.iH)(x.tO,"remixPile/".concat(r.id,".png"));await (0,h.KV)(l,a,{contentType:"image/png"});let n=await (0,h.Jt)(l);await (0,p.b6)(r,t.uid,n),t0(!0),setTimeout(()=>t0(!1),2e3)}catch(e){console.error("Error adding to remix pile:",e)}finally{tX(!1)}}},handleConnectSong=async e=>{if(!t)return;let a=aA.current;if(a){t_(e.id);try{let r=await new Promise(e=>a.toBlob(e,"image/png"));if(!r)throw Error("Failed to create image blob");let l=(0,y.cb)(),n=(0,h.iH)(x.tO,"users/".concat(t.uid,"/art/").concat(l));await (0,h.KV)(n,r,{contentType:"image/png"}),await (0,p.M5)(e.id,{artId:l,artUrl:"",art300Url:"",art1200Url:"",artSocialUrl:"",artSizeInBytes:r.size,artSizeReadable:(0,y.td)(r.size)}),tQ(e)}catch(e){console.error("Error connecting song to album art:",e)}finally{t_(null)}}},regenerateHeerichLayout=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:eO,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:ez,a=Y.length>0?Y:["hsl(220, 20%, 50%)"],randomColor=()=>a[Math.floor(Math.random()*a.length)];if("cityscape"===e){let e=[];for(let a=0;a<t;a++)for(let r=0;r<t;r++)e.push({x:a,z:r,height:1+Math.floor(6*Math.random()),color:randomColor()});e_({scene:"cityscape",blocks:e})}else if("spheres"===e){let e=1.5*t,a=2*t,r=[];for(let t=0;t<a;t++)r.push({center:[Math.random()*e,Math.random()*e,Math.random()*e],radius:.5+1.5*Math.random(),color:randomColor()});e_({scene:"spheres",spheres:r})}else{let e=2*t,a=randomColor(),r=3+Math.floor(4*Math.random()),l=[];for(let t=0;t<r;t++){let t=1+Math.random()*(e/3),a=[Math.random()*(e-t),Math.random()*(e-t),Math.random()*(e-t)];l.push({shape:.5>Math.random()?"box":"sphere",position:a,size:t,color:randomColor()})}e_({scene:"carved",baseColor:a,blockSize:e,carves:l})}};(0,l.useEffect)(()=>{regenerateHeerichLayout()},[eO,ez,Y]);let renderHeerichLayout=async()=>{var e;let t=aH.current;if(!t||!eJ)return;let a=t.getContext("2d");if(!a)return;let r=null!==(e=R.find(e=>e.value===eV))&&void 0!==e?e:R[0],l="perspective"===eV?r.camera:{...r.camera,angle:eY},n=new d.XI({tile:40,camera:l,gap:eG}),applyGeometry=e=>n.applyGeometry(e),s=P.find(e=>e.value===e9);s&&"none"!==s.value&&n.defineDecal(s.value,{content:s.content});let i=s&&"none"!==s.value?{decal:s.value}:{},displayColor=e=>tt?"hsl(0, 0%, 95%)":e,displayShade=(e,t)=>tt?"hsl(0, 0%, ".concat(Math.max(0,Math.min(100,95-t)),"%)"):darkenHslCss(e,t),hatchStyle=e=>eK?{hatch:{angle:e$+e,period:e1,strokeWidth:e5}}:{},o=e4<1||e8>0,taperScale=e=>{if(o)return(t,a)=>{let r=e4*(1-e8*(1-a/e));return[r,1,r]}},c=o?[.5,1,.5]:void 0;if("cityscape"===eJ.scene)for(let e of eJ.blocks)applyGeometry({type:"box",position:[e.x,0,e.z],size:[1,e.height,1],scale:taperScale(e.height),scaleOrigin:c,style:{to

1p:{fill:displayColor(e.color),...i},left:{fill:displayShade(e.color,12),...hatchStyle(0)},right:{fill:displayShade(e.color,12),...hatchStyle(0)},front:{fill:displayShade(e.color,22),...hatchStyle(90)},back:{fill:displayShade(e.color,22),...hatchStyle(90)}}});else if("spheres"===eJ.scene)for(let e of eJ.spheres)applyGeometry({type:"sphere",center:e.center,radius:e.radius,style:{default:{fill:displayColor(e.color),...i,...hatchStyle(45)},top:{fill:displayShade(e.color,-10)}}});else for(let e of(applyGeometry({type:"box",position:[0,0,0],size:eJ.blockSize,scale:taperScale(eJ.blockSize),scaleOrigin:c,style:{top:{fill:displayColor(eJ.baseColor),...i},left:{fill:displayShade(eJ.baseColor,12),...hatchStyle(0)},right:{fill:displayShade(eJ.baseColor,12),...hatchStyle(0)},front:{fill:displayShade(eJ.baseColor,22),...hatchStyle(90)},back:{fill:displayShade(eJ.baseColor,22),...hatchStyle(90)}}}),eJ.carves))applyGeometry("box"===e.shape?{type:"box",position:e.position,size:e.size,mode:"subtract",style:{default:{fill:displayColor(e.color)}}}:{type:"sphere",center:e.position.map(t=>t+e.size/2),radius:e.size/2,mode:"subtract",style:{default:{fill:displayColor(e.color)}}});let u=n.getBounds(20),h={padding:20};tr&&(h.prepend='<defs><filter id="cel"><feMorphology in="SourceAlpha" operator="dilate" radius="2" result="thick"/><feFlood flood-color="'.concat(tn,'"/><feComposite in2="thick" operator="in" result="border"/><feMerge><feMergeNode in="border"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#cel)">'),h.append="</g>");let g=n.toSVG(h),m=new Image,x="data:image/svg+xml;charset=utf-8,".concat(encodeURIComponent(g));await new Promise((e,t)=>{m.onload=()=>e(),m.onerror=()=>t(Error("Failed to render Heerich scene")),m.src=x}),a.clearRect(0,0,3e3,3e3);let p=Math.min(3e3/u.w,3e3/u.h),b=u.w*p,y=u.h*p,f=(3e3-b)/2,v=(3e3-y)/2;a.drawImage(m,f,v,b,y)};(0,l.useEffect)(()=>{renderHeerichLayout().catch(e=>console.error(e))},[eJ,eV,eG,eY,e9,eK,e$,e1,e5,e4,e8,tt,tr,tn]);let handleNumPointsChange=e=>{var t;F(e),w.numPoints=e,null===(t=aM.current)||void 0===t||t.setPoline(w),syncFromPoline()},handlePositionFunctionXChange=e=>{var t;H(e),w.positionFunctionX=n.Rq[e],null===(t=aM.current)||void 0===t||t.setPoline(w),syncFromPoline()},handlePositionFunctionYChange=e=>{var t;D(e),w.positionFunctionY=n.Rq[e],null===(t=aM.current)||void 0===t||t.setPoline(w),syncFromPoline()},handlePositionFunctionZChange=e=>{var t;q(e),w.positionFunctionZ=n.Rq[e],null===(t=aM.current)||void 0===t||t.setPoline(w),syncFromPoline()},handleClosedLoopChange=e=>{var t;W(e),w.closedLoop=e,null===(t=aM.current)||void 0===t||t.setPoline(w),syncFromPoline()},handleInvertedLightnessChange=e=>{var t;X(e),w.invertedLightness=e,null===(t=aM.current)||void 0===t||t.setPoline(w),syncFromPoline()},randomizeColors=()=>{var e;w.anchorPoints.forEach(e=>{e.hsl=[(e.color[0]+(-90+180*Math.random()))%360,Math.random(),e.color[2]+(-.05+.1*Math.random())]}),w.updateAnchorPairs();let randomPositionFunction=()=>{let e=Math.floor(Math.random()*L.length);return L[e].value},t=2+Math.floor(9*Math.random()),a=randomPositionFunction(),r=randomPositionFunction(),l=randomPositionFunction(),s=.5>Math.random(),i=.5>Math.random();w.numPoints=t,w.positionFunctionX=n.Rq[a],w.positionFunctionY=n.Rq[r],w.positionFunctionZ=n.Rq[l],w.closedLoop=s,w.invertedLightness=i,F(t),H(a),D(r),q(l),W(s),X(i),null===(e=aM.current)||void 0===e||e.setPoline(w),syncFromPoline()};(0,l.useEffect)(()=>{randomizeColors()},[]);let handleCopyPalette=async()=>{let e=w.colors.map(e=>{let[t,a,r]=e;return hslToHex(t,a,r)});await navigator.clipboard.writeText(JSON.stringify(e)),ee(!0),setTimeout(()=>ee(!1),2e3)};return(0,r.jsxs)("div",{className:"py-6",children:[(0,r.jsxs)("div",{className:"grid gap-8 lg:grid-cols-[180px_360px_110px_1fr]",children:[(0,r.jsxs)("div",{children:[(0,r.jsx)("span",{className:"mb-2 block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"Tools"}),(0,r.jsx)("div",{className:"flex flex-col gap-2",children:E.map(e=>(0,r.jsxs)("button",{type:"button",onClick:()=>{ea(e.id),eo(null)},className:"rounded-md px-3 py-2 text-left transition-colors ".concat(et===e.id?"bg-primary-500/10":"hover:bg-gray-100 dark:hover:bg-gray-800"),children:[(0,r.jsx)("span",{className:"text-sm font-semibold ".concat(et===e.id?"text-primary-500":"text-gray-700 dark:text-gray-300"),children:e.label}),(0,r.jsx)("p",{className:"mt-1 text-xs text-gray-600 dark:text-gray-400",children:e.description})]},e.id))})]}),(0,r.jsxs)("div",{className:null===ei?"":"hidden",children:[(0,r.jsxs)("div",{className:"palette"===et?"space-y-6":"hidden",children:[(0,r.jsxs)("div",{className:"flex gap-3",children:[(0,r.jsx)("div",{className:"flex w-8 shrink-0 flex-col",children:Y.map((e,t)=>(0,r.jsx)("div",{className:"min-h-0 flex-1",style:{backgroundColor:e},title:e},"".concat(e,"-").concat(t)))}),(0,r.jsx)("div",{className:"min-w-0 flex-1",onPointerDownCapture:e=>{let t=e.currentTarget.getBoundingClientRect(),a=(e.clientX-t.left)/t.width,r=(e.clientY-t.top)/t.height,l=w.getClosestAnchorPoint({xyz:[a,r,null],maxDistance:.1});aV.current=l,Q(l?l.hslCSS:null)},children:(0,r.jsx)("poline-picker",{ref:aM,interactive:!0,style:{width:"100%",height:"auto",aspectRatio:"1 / 1",display:"block","--poline-picker-line-color":"#333","--poline-picker-bg-color":"#fff"}})})]}),(0,r.jsxs)("div",{className:"flex flex-wrap items-center gap-2",children:[(0,r.jsx)(j.V4,{onClick:randomizeColors,variant:"secondary",children:"Randomize"}),(0,r.jsx)(j.V4,{onClick:()=>{var e;let t=aV.current;t&&!(w.anchorPoints.length<=2)&&(w.removeAnchorPoint({point:t}),aV.current=null,Q(null),null===(e=aM.current)||void 0===e||e.setPoline(w),syncFromPoline())},disabled:!K||J<=2,variant:"secondary",children:"Remove Selected"}),K&&(0,r.jsx)("span",{className:"h-5 w-5 shrink-0 rounded-full border border-black/10 dark:border-white/10",style:{backgroundColor:K},title:"Selected point"})]}),(0,r.jsxs)("div",{className:"rounded-xl border border-gray-300 bg-white px-6 py-3 dark:border-gray-700 dark:bg-gray-900",children:[(0,r.jsx)(SettingRow,{label:"Steps",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{id:"numPoints",type:"range",min:2,max:10,value:k,onChange:e=>handleNumPointsChange(Number(e.target.value)),className:"w-32 accent-primary-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-4 text-right text-sm text-gray-500 dark:text-gray-400",children:k})]})}),(0,r.jsx)(SettingRow,{label:"Invert Lightness",children:(0,r.jsx)("input",{type:"checkbox",checked:G,onChange:e=>handleInvertedLightnessChange(e.target.checked),className:T})}),(0,r.jsx)(SettingRow,{label:"Closed Loop",children:(0,r.jsx)("input",{type:"checkbox",checked:O,onChange:e=>handleClosedLoopChange(e.target.checked),className:T})}),(0,r.jsx)(SettingRow,{label:"Position fn X",sublabel:"(Hue / Light)",children:(0,r.jsx)("select",{id:"positionFunctionX",value:U,onChange:e=>handlePositionFunctionXChange(e.target.value),className:B,children:L.map(e=>(0,r.jsx)("option",{value:e.value,children:e.label},e.value))})}),(0,r.jsx)(SettingRow,{label:"Position fn Y",sublabel:"(Hue / Light)",children:(0,r.jsx)("select",{id:"positionFunctionY",value:V,onChange:e=>handlePositionFunctionYChange(e.target.value),className:B,children:L.map(e=>(0,r.jsx)("option",{value:e.value,children:e.label},e.value))})}),(0,r.jsx)(SettingRow,{label:"Position fn Z",sublabel:"(Saturation)",children:(0,r.jsx)("select",{id:"positionFunctionZ",value:z,onChange:e=>handlePositionFunctionZChange(e.target.value),className:B,children:L.map(e=>(0,r.jsx)("option",{value:e.value,children:e.label},e.value))})}),(0,r.jsx)("div",{className:"border-t border-gray-200 py-3 dark:border-gray-700",children:(0,r.jsx)(j.V4,{onClick:handleCopyPalette,variant:"secondary",className:"w-full",children:$?"Copied!":"Copy palette"})})]})]}),(0,r.jsx)("div",{className:"gradient-mesh"===et?"":"hidden",children:(0,r.jsxs)("div",{className:"rounded-xl border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-900",children:[(0,r.jsx)("span",{className:"mb-3 block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"Gradient Mesh"}),(0,r.jsx)("canvas",{ref:aE,id:S,width:3e3,height:3e3,className:"mb-3 w-full rounded-lg border border-gray-200 dark:border-gray-700",style:{aspectRatio:"".concat(3e3," / ").concat(3e3)}}),(0,r.jsxs)("div",{className:"flex gap-2",children:[(0,r.jsx)(j.V4,{onClick:()=>{let e=1+Math.floor(20*Math.random()),t=1+Math.floor(500*Math.random()),a=0+Math.floor(1e3*Math.random()),r=eU.map(()=>.75>Math.random());r.some(Boolean)||(r[Math.floor(Math.random()*r.length)]=!0),aF.current=Math.floor(1e3*Math.random()),eE(e),eF(t),eT(a),eH(r)},variant:"secondary",className:"flex-1",children:"Randomize"}),(0,r.jsx)(j.V4,{onClick:()=>{aE.current&&addLayer("Gradient Mesh",aE.current)},variant:"primary",className:"flex-1",children:"Add Layer"})]}),(0,r.jsx)(SettingRow,{label:"Frequency",sublabel:"How busy the pattern looks",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:1,max:20,value:eL,onChange:e=>eE(Number(e.target.value)),className:"w-32 accent-primary-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-6 text-right text-sm text-gray-500 dark:text-gray-400",children:eL})]})}),(0,r.jsx)(SettingRow,{label:"Amplitude",sublabel:"How strongly the colors w

1ave",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:1,max:500,value:eI,onChange:e=>eF(Number(e.target.value)),className:"w-32 accent-primary-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-10 text-right text-sm text-gray-500 dark:text-gray-400",children:eI})]})}),(0,r.jsx)(SettingRow,{label:"Seed",sublabel:"A different pattern shape",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:0,max:999,value:eB,onChange:e=>eT(Number(e.target.value)),className:"w-32 accent-primary-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-10 text-right text-sm text-gray-500 dark:text-gray-400",children:eB})]})}),(0,r.jsx)(SettingRow,{label:"Colors",sublabel:"Which palette colors the blend uses",children:(0,r.jsx)("div",{className:"flex gap-2",children:getFourMeshColors().map((e,t)=>(0,r.jsxs)("label",{className:"flex items-center gap-1.5",children:[(0,r.jsx)("span",{className:"h-4 w-4 shrink-0 rounded-full border border-black/10 dark:border-white/10",style:{backgroundColor:e}}),(0,r.jsx)("input",{type:"checkbox","aria-label":"Color ".concat(t+1),checked:eU[t],onChange:e=>eH(a=>a.map((a,r)=>r===t?e.target.checked:a)),className:T})]},t))})})]})}),(0,r.jsx)("div",{className:"blobs"===et?"":"hidden",children:(0,r.jsxs)("div",{className:"rounded-xl border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-900",children:[(0,r.jsx)("span",{className:"mb-3 block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"Blobs"}),(0,r.jsx)("canvas",{ref:aB,width:3e3,height:3e3,className:"mb-3 aspect-square w-full rounded-lg border border-gray-200 dark:border-gray-700"}),(0,r.jsxs)("div",{className:"flex gap-2",children:[(0,r.jsx)(j.V4,{onClick:drawBlobs,variant:"secondary",className:"flex-1",children:"Randomize"}),(0,r.jsx)(j.V4,{onClick:()=>{aB.current&&addLayer("Blobs",aB.current)},variant:"primary",className:"flex-1",children:"Add Layer"})]})]})}),(0,r.jsx)("div",{className:"voronoi"===et?"":"hidden",children:(0,r.jsxs)("div",{className:"rounded-xl border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-900",children:[(0,r.jsx)("span",{className:"mb-3 block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"Voronoi"}),(0,r.jsx)("canvas",{ref:aT,width:3e3,height:3e3,className:"mb-3 aspect-square w-full rounded-lg border border-gray-200 dark:border-gray-700"}),(0,r.jsxs)("div",{className:"mb-3 flex gap-2",children:[(0,r.jsx)(j.V4,{onClick:()=>{let e=8+Math.floor(143*Math.random()),t=Math.floor(9*Math.random()),a=Math.floor(Math.random()*C.length),r=C[a].value,l=.5>Math.random(),n=randomPaletteHex(),s=1+Math.floor(8*Math.random());to(e),tc(t),th(r),tm(l),tp(n),ty(s)},variant:"secondary",className:"flex-1",children:"Randomize"}),(0,r.jsx)(j.V4,{onClick:()=>{aT.current&&addLayer("Voronoi",aT.current)},variant:"primary",className:"flex-1",children:"Add Layer"})]}),(0,r.jsx)(SettingRow,{label:"Style",children:(0,r.jsx)("select",{value:tu,onChange:e=>th(e.target.value),className:B,children:C.map(e=>(0,r.jsx)("option",{value:e.value,children:e.label},e.value))})}),(0,r.jsx)(SettingRow,{label:"Cells",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:8,max:150,value:ti,onChange:e=>to(Number(e.target.value)),className:"w-32 accent-primary-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:ti})]})}),(0,r.jsx)(SettingRow,{label:"Relax",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:0,max:8,value:td,onChange:e=>tc(Number(e.target.value)),className:"w-32 accent-primary-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:td})]})}),(0,r.jsx)(SettingRow,{label:"Stroke",sublabel:"mesh"===tu?"(always on for Mesh)":void 0,children:(0,r.jsx)("input",{type:"checkbox",checked:tg||"mesh"===tu,disabled:"mesh"===tu,onChange:e=>tm(e.target.checked),className:"".concat(T," disabled:cursor-not-allowed disabled:opacity-30")})}

1),(0,r.jsx)(SettingRow,{label:"Stroke Color",children:(0,r.jsx)("input",{type:"color",disabled:!tg&&"mesh"!==tu,value:tx,onChange:e=>tp(e.target.value),className:"h-8 w-8 cursor-pointer rounded border border-gray-300 disabled:cursor-not-allowed disabled:opacity-30 dark:border-gray-600"})}),(0,r.jsx)(SettingRow,{label:"Stroke Width",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:1,max:8,disabled:!tg&&"mesh"!==tu,value:tb,onChange:e=>ty(Number(e.target.value)),className:"w-32 accent-primary-500 disabled:opacity-30 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:tb})]})})]})}),(0,r.jsx)("div",{className:"fractal"===et?"":"hidden",children:(0,r.jsxs)("div",{className:"rounded-xl border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-900",children:[(0,r.jsx)("span",{className:"mb-3 block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"Fractal"}),(0,r.jsx)("canvas",{ref:aU,width:tf,height:tf,className:"mb-3 aspect-square w-full rounded-lg border border-gray-200 dark:border-gray-700"}),(0,r.jsxs)("div",{className:"mb-3 flex gap-2",children:[(0,r.jsx)(j.V4,{onClick:()=>{let e=3+Math.floor(14*Math.random()),t=Math.round((.35+.5*Math.random())*100)/100,a=.4>Math.random(),r=.3>Math.random(),l=Math.floor(Math.random()*M.length),n=M[l].value;tk(e),tN(t),tC(a),tA(r),tR(n),tI||tE(randomPaletteHex())},variant:"secondary",className:"flex-1",children:"Randomize"}),(0,r.jsx)(j.V4,{onClick:()=>{aU.current&&addLayer("Fractal",aU.current,{preserveNativeSize:!0})},variant:"primary",className:"flex-1",children:"Add Layer"})]}),(0,r.jsx)(SettingRow,{label:"Canvas Size",sublabel:"Bigger looks sharper but takes longer to fill in",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:256,max:6e3,step:8,value:tf,onChange:e=>tv(Number(e.target.value)),className:"w-32 accent-primary-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsxs)("span",{className:"w-14 text-right text-sm text-gray-500 dark:text-gray-400",children:[tf,"px"]})]})}),(0,r.jsx)(SettingRow,{label:"Polygon Sides",sublabel:"Corners of the starting shape",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:3,max:16,value:tw,onChange:e=>tk(Number(e.target.value)),className:"w-32 accent-primary-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-4 text-right text-sm text-gray-500 dark:text-gray-400",children:tw})]})}),(0,r.jsx)(SettingRow,{label:"Jump Distance",sublabel:"How far each step moves toward its point",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:.35,max:.85,step:.01,value:tj,onChange:e=>tN(Number(e.target.value)),className:"w-32 accent-primary-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-10 text-right text-sm text-gray-500 dark:text-gray-400",children:tj.toFixed(2)})]})}),(0,r.jsx)(SettingRow,{label:"Rule",sublabel:"Which point is allowed to come next",children:(0,r.jsx)("select",{value:tP,onChange:e=>tR(e.target.value),className:B,children:M.map(e=>(0,r.jsx)("option",{value:e.value,children:e.label},e.value))})}),(0,r.jsx)(SettingRow,{label:"Midpoints",sublabel:"Adds a point between each corner",children:(0,r.jsx)("input",{type:"checkbox",checked:tS,onChange:e=>tC(e.target.checked),className:T})}),(0,r.jsx)(SettingRow,{label:"Center Point",sublabel:"Adds a point in the middle",children:(0,r.jsx)("input",{type:"checkbox",checked:tM,onChange:e=>tA(e.target.checked),className:T})}),(0,r.jsx)(SettingRow,{label:"Point Color",children:(0,r.jsx)("input",{type:"color",value:tL,onChange:e=>tE(e.target.value),className:"h-8 w-8 cursor-pointer rounded border border-gray-300 dark:border-gray-600"})}),(0,r.jsx)(SettingRow,{label:"Lock Color",sublabel:"Keeps this color through Randomize",children:(0,r.jsx)("input",{type:"checkbox",checked:tI,onChange:e=>tF(e.target.checked),className:T})})]})}),(0,r.jsx)("div",{className:"upload-image"===et?"":"hidden",children:(0,r.jsxs)("div",{className:"rounded-xl border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-900",children:[(0,r.jsx)("span",{className:"mb-3 block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"Upload Image"}),(0,r.jsx)("p",{className:"mb-3 text-xs text-gray-600 dark:text-gray-400",children:"Added at its own real size, not stretched to fill the canvas — a small picture stays small until you scale it up yourself."}),(0,r.jsxs)("div",{onDragOver:e=>{e.preventDefault(),ak(!0)},onDragLeave:()=>ak(!1),onDrop:e=>{var t;e.preventDefault(),ak(!1);let a=null===(t=e.dataTransfer.files)||void 0===t?void 0:t[0];a&&processUploadedImageFile(a)},onClick:()=>{var e;return null===(e=aD.current)||void 0===e?void 0:e.click()},role:"button",tabIndex:0,onKeyDown:e=>{if("Enter"===e.key||" "===e.key){var t;null===(t=aD.current)||void 0===t||t.click()}},className:"flex min-h-[220px] cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 text-center transition-colors ".concat(aw?"border-primary-500 bg-primary-500/5":"border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"),children:[(0,r.jsx)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:1.5,className:"h-8 w-8 text-gray-400","aria-hidden":"true",children:(0,r.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 8.25 12 3.75m0 0L7.5 8.25M12 3.75v13.5"})}),aj?(0,r.jsx)("span",{className:"text-sm font-medium text-gray-500 dark:text-gray-400",children:"Adding…"}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("span",{className:"text-sm font-medium text-gray-700 dark:text-gray-300",children:"Drag and drop an image here"}),(0,r.jsx)("span",{className:"text-xs text-gray-500 dark:text-gray-400",children:"or click to browse"})]})]}),(0,r.jsx)("input",{ref:aD,type:"file",accept:"image/*",onChange:e=>{var t;let a=null===(t=e.target.files)||void 0===t?void 0:t[0];a&&processUploadedImageFile(a),e.target.value=""},className:"hidden"}),aS&&(0,r.jsx)("p",{className:"mt-3 text-sm text-red-500",children:aS})]})}),(0,r.jsx)("div",{className:"voxel-sculpture"===et?"":"hidden",children:(0,r.jsxs)("div",{className:"rounded-xl border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-900",children:[(0,r.jsx)("span",{className:"mb-3 block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"Voxel Sculpture"}),(0,r.jsx)("canvas",{ref:aH,width:3e3,height:3e3,className:"mb-3 aspect-square w-full rounded-lg border border-gray-200 dark:border-gray-700"}),(0,r.jsxs)("div",{className:"mb-3 flex gap-2",children:[(0,r.jsx)(j.V4,{onClick:()=>{let e=A[Math.floor(Math.random()*A.length)].value,t=R[Math.floor(Math.random()*R.length)].value,a=3+Math.floor(6*Math.random()),r=0+.3*Math.random(),l=Math.floor(360*Math.random()),n=.5>Math.random(),s=Math.floor(180*Math.random()),i=2+Math.floor(19*Math.random()),o=1+Math.floor(8*Math.random()),d=.3+.7*Math.random(),c=Math.random(),u=P[Math.floor(Math.random()*P.length)].value,h=.5>Math.random(),g=.5>Math.random(),m=randomPaletteHex();eW(e),eD(t),eq(a),eX(r),eZ(l),eQ(n),e0(s),e3(i),e2(o),e6(d),e7(c),te(u),ta(h),tl(g),ts(m),regenerateHeerichLayout(e,a)},variant:"secondary",className:"flex-1",children:"Randomize"}),(0,r.jsx)(j.V4,{onClick:()=>{aH.current&&addLayer("Voxel Sculpture",aH.current)},variant:"primary",className:"flex-1",children:"Add Layer"})]}),(0,r.jsx)(SettingRow,{label:"Scene",children:(0,r.jsx)("select",{value:eO,onCh

1ange:e=>eW(e.target.value),className:B,children:A.map(e=>(0,r.jsx)("option",{value:e.value,children:e.label},e.value))})}),(0,r.jsx)(SettingRow,{label:"Camera",children:(0,r.jsx)("select",{value:eV,onChange:e=>eD(e.target.value),className:B,children:R.map(e=>(0,r.jsx)("option",{value:e.value,children:e.label},e.value))})}),(0,r.jsx)(SettingRow,{label:"Angle",sublabel:"perspective"===eV?"(n/a for Perspective)":void 0,children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:0,max:360,disabled:"perspective"===eV,value:eY,onChange:e=>eZ(Number(e.target.value)),className:"w-32 accent-primary-500 disabled:opacity-30 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:eY})]})}),(0,r.jsx)(SettingRow,{label:"Size",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:3,max:8,value:ez,onChange:e=>eq(Number(e.target.value)),className:"w-32 accent-primary-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-4 text-right text-sm text-gray-500 dark:text-gray-400",children:ez})]})}),(0,r.jsx)(SettingRow,{label:"Gap",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:0,max:.3,step:.01,value:eG,onChange:e=>eX(Number(e.target.value)),className:"w-32 accent-primary-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:eG.toFixed(2)})]})}),(0,r.jsx)(SettingRow,{label:"Decal",children:(0,r.jsx)("select",{value:e9,onChange:e=>te(e.target.value),className:B,children:P.map(e=>(0,r.jsx)("option",{value:e.value,children:e.label},e.value))})}),(0,r.jsx)(SettingRow,{label:"Plain White",children:(0,r.jsx)("input",{type:"checkbox",checked:tt,onChange:e=>ta(e.target.checked),className:T})}),(0,r.jsx)(SettingRow,{label:"Outline",children:(0,r.jsx)("input",{type:"checkbox",checked:tr,onChange:e=>tl(e.target.checked),className:T})}),(0,r.jsx)(SettingRow,{label:"Outline Color",children:(0,r.jsx)("input",{type:"color",disabled:!tr,value:tn,onChange:e=>ts(e.target.value),className:"h-8 w-8 cursor-pointer rounded border border-gray-300 disabled:cursor-not-allowed disabled:opacity-30 dark:border-gray-600"})}),(0,r.jsx)(SettingRow,{label:"Hatching",children:(0,r.jsx)("input",{type:"checkbox",checked:eK,onChange:e=>eQ(e.target.checked),className:T})}),(0,r.jsx)(SettingRow,{label:"Hatch Angle",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:0,max:180,disabled:!eK,value:e$,onChange:e=>e0(Number(e.target.value)),className:"w-32 accent-primary-500 disabled:opacity-30 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:e$})]})}),(0,r.jsx)(SettingRow,{label:"Hatch Period",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:2,max:20,disabled:!eK,value:e1,onChange:e=>e3(Number(e.target.value)),className:"w-32 accent-primary-500 disabled:opacity-30 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:e1})]})}),(0,r.jsx)(SettingRow,{label:"Hatch Width",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:1,max:8,disabled:!eK,value:e5,onChange:e=>e2(Number(e.target.value)),className:"w-32 accent-primary-500 disabled:opacity-30 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:e5})]})}),(0,r.jsx)(SettingRow,{label:"Size",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:.3,max:1,step:.05,value:e4,onChange:e=>e6(Number(e.target.value)),className:"w-32 accent-primary-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:e4.toFixed(2)})]})}),(0,r.jsx)(SettingRow,{label:"Taper",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:0,max:1,step:.

105,value:e8,onChange:e=>e7(Number(e.target.value)),className:"w-32 accent-primary-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:e8.toFixed(2)})]})})]})}),(0,r.jsx)("div",{className:"remix-pile"===et?"":"hidden",children:(0,r.jsxs)("div",{className:"rounded-xl border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-900",children:[(0,r.jsx)("span",{className:"mb-3 block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"Remix Pile"}),tz&&0===tB.length&&(0,r.jsx)("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"Loading…"}),!tz&&0===tB.length&&(0,r.jsx)("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"No saved album art yet."}),(0,r.jsx)("div",{className:"flex flex-col gap-2",children:tB.map(e=>(0,r.jsxs)("button",{type:"button",onClick:()=>handleAddRemixLayer(e),disabled:tO===e.id,className:"flex items-center gap-3 rounded-md border border-gray-200 p-2 text-left disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700",children:[(0,r.jsx)("img",{src:e.url300||e.url,alt:"",className:"h-32 w-32 shrink-0 rounded object-cover"}),(0,r.jsx)("span",{className:"truncate text-sm text-gray-700 dark:text-gray-300",children:tO===e.id?"Adding…":"Add layer"})]},e.id))}),(tU>0||!aJ)&&(0,r.jsxs)("div",{className:"mt-3 flex items-center justify-between border-t border-gray-200 pt-3 dark:border-gray-700",children:[(0,r.jsx)("button",{type:"button",onClick:()=>{let e=Math.max(0,tU-1);tH(e),fetchRemixPage(e)},disabled:0===tU||tz,className:"text-xs font-medium text-gray-500 transition-colors hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-40 dark:text-gray-400 dark:hover:text-gray-100",children:"Previous"}),(0,r.jsx)("span",{className:"text-xs text-gray-400 dark:text-gray-500",children:null!==aZ?"Page ".concat(tU+1," of ").concat(aZ):"Page ".concat(tU+1)}),(0,r.jsx)("button",{type:"button",onClick:()=>{let e=tU+1;tH(e),fetchRemixPage(e)},disabled:aJ||tz,className:"text-xs font-medium text-gray-500 transition-colors hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-40 dark:text-gray-400 dark:hover:text-gray-100",children:"Next"})]})]})}),(0,r.jsx)("div",{className:"my-songs"===et?"":"hidden",children:(0,r.jsxs)("div",{className:"rounded-xl border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-900",children:[(0,r.jsx)("span",{className:"mb-3 block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"My Songs"}),t?(0,r.jsxs)(r.Fragment,{children:[at&&0===t4.length&&(0,r.jsx)("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"Loading…"}),!at&&0===t4.length&&(0,r.jsx)("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"You haven't uploaded any songs yet."}),(0,r.jsx)("div",{className:"flex flex-col gap-2",children:t4.map(e=>{var t;return(0,r.jsxs)("button",{type:"button",onClick:()=>handleAddMySongLayer(e),disabled:an===e.id||!e.artId,className:"flex items-center gap-3 rounded-md border border-gray-200 p-2 text-left disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700",children:[ar[e.id]?(0,r.jsx)("img",{src:ar[e.id],alt:"",className:"h-32 w-32 shrink-0 rounded object-cover"}):(0,r.jsx)("div",{className:"flex h-32 w-32 shrink-0 items-center justify-center rounded bg-gray-100 text-center text-xs text-gray-400 dark:bg-gray-800 dark:text-gray-500",children:"No art"}),(0,r.jsx)("span",{className:"min-w-0 flex-1 truncate text-sm text-gray-700 dark:text-gray-300",children:an===e.id?"Adding…":null!==(t=e.songName)&&void 0!==t?t:"Untitled"})]},e.id)})}),t4.length>0&&(t8>0||!aK)&&(0,r.jsxs)("div",{className:"mt-3 flex items-center justify-between border-t border-gray-200 pt-3 dark:border-gray-700",children:[(0,r.jsx)("button",{type:"button",onClick:()=>{if(!t)return;let e=Math.max(0,t8-1);t7(e),fetchMySongsPage(t.uid,e)},disabled:0===t8||at,className:"text-xs font-medium text-gray-500 transition-colors hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-40 dark:text-gray-400 dark:hover:text-gray-100",children:"Previous"}),(0,r.jsx)("span",{className:"text-xs text-gray-400 dark:text-gray-500",children:null!==a_?"Page ".concat(t8+1," of ").concat(a_):"Page ".concat(t8+1)}),(0,r.jsx)("button",{type:"button",onClick:()=>

1{if(!t)return;let e=t8+1;t7(e),fetchMySongsPage(t.uid,e)},disabled:aK||at,className:"text-xs font-medium text-gray-500 transition-colors hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-40 dark:text-gray-400 dark:hover:text-gray-100",children:"Next"})]})]}):(0,r.jsx)("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"Sign in to pull art from your own songs."})]})}),(0,r.jsx)("div",{className:"my-saved-art"===et?"":"hidden",children:(0,r.jsxs)("div",{className:"rounded-xl border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-900",children:[(0,r.jsx)("span",{className:"mb-3 block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"My Saved Art"}),t?i?(0,r.jsxs)(r.Fragment,{children:[ag&&0===ai.length&&(0,r.jsx)("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"Loading…"}),!ag&&0===ai.length&&(0,r.jsx)("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"Nothing saved yet — use “Save for Later” below the finished picture to add some."}),(0,r.jsx)("div",{className:"flex flex-col gap-2",children:ai.map(e=>(0,r.jsxs)("div",{className:"flex items-center gap-3 rounded-md border border-gray-200 p-2 dark:border-gray-700",children:[(0,r.jsxs)("button",{type:"button",onClick:()=>handleAddSavedArtLayer(e),disabled:ab===e.id,className:"flex min-w-0 flex-1 items-center gap-3 text-left disabled:cursor-not-allowed disabled:opacity-50",children:[ax[e.id]?(0,r.jsx)("img",{src:ax[e.id],alt:"",className:"h-32 w-32 shrink-0 rounded object-cover"}):(0,r.jsx)("div",{className:"h-32 w-32 shrink-0 rounded bg-gray-100 dark:bg-gray-800"}),(0,r.jsx)("span",{className:"truncate text-sm text-gray-700 dark:text-gray-300",children:ab===e.id?"Adding…":"Add layer"})]}),(0,r.jsx)("button",{type:"button",onClick:()=>handleDeleteSavedArt(e),disabled:af===e.id,"aria-label":"Delete",className:"shrink-0 rounded-md p-2 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-red-900/20",children:(0,r.jsx)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,className:"h-4 w-4","aria-hidden":"true",children:(0,r.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0-1 14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2L4 6h16Z"})})})]},e.id))}),(ad>0||!a$)&&(0,r.jsxs)("div",{className:"mt-3 flex items-center justify-between border-t border-gray-200 pt-3 dark:border-gray-700",children:[(0,r.jsx)("button",{type:"button",onClick:()=>{if(!t)return;let e=Math.max(0,ad-1);ac(e),fetchSavedArtPage(t.uid,e)},disabled:0===ad||ag,className:"text-xs font-medium text-gray-500 transition-colors hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-40 dark:text-gray-400 dark:hover:text-gray-100",children:"Previous"}),(0,r.jsx)("span",{className:"text-xs text-gray-400 dark:text-gray-500",children:null!==aQ?"Page ".concat(ad+1," of ").concat(aQ):"Page ".concat(ad+1)}),(0,r.jsx)("button",{type:"button",onClick:()=>{if(!t)return;let e=ad+1;ac(e),fetchSavedArtPage(t.uid,e)},disabled:a$||ag,className:"text-xs font-medium text-gray-500 transition-colors hover:text-gray-900 disabled:cursor-not-allowed disabled:opacity-40 dark:text-gray-400 dark:hover:text-gray-100",children:"Next"})]})]}):(0,r.jsxs)("div",{className:"flex items-center justify-between gap-3 rounded-md border border-accent-500/40 bg-accent-500/5 px-4 py-3",children:[(0,r.jsxs)("span",{className:"text-sm font-medium",children:["Saving art for later is a"," ",(0,r.jsx)("span",{className:"font-semibold text-accent-500",children:"Pro"})," feature."]}),(0,r.jsx)("a",{href:"/pricing?f=album-art-saved-art-widget",className:"shrink-0 text-sm font-semibold text-accent-500 hover:underline",children:"Upgrade →"})]}):(0,r.jsx)("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"Sign in to see art you've saved for later."})]})}),null===et&&(0,r.jsx)("div",{className:"flex min-h-[300px] items-center justify-center rounded-xl border border-dashed border-gray-300 dark:border-gray-700",children:(0,r.jsx)("p",{className:"text-sm text-gray-400 dark:text-gray-500",children:"Select a tool on the left to see its controls."})})]}),aY&&(0,r.jsxs)("div",{className:"rounded-xl border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-900",children:[(0,r.jsxs)("div",{className:"mb-3 flex items-center justify-between",children:[(0,r.jsxs)("span",{className:"text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:["Edit “",aY.name,"”"]}),(0,r.jsx)("button",{type:"button",onClick:()=>eo(null),className:"text-xs font-medium text-primary-500 hover:underline",children:"Done"})]}),"basics"===ed&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(SettingRow,{label:"Hue",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:-180,max:180,value:aY.hue,onChange:e=>updateLayer(aY.id,{hue:Number(e.target.value)}),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:aY.hue})]})}),(0,r.jsx)(SettingRow,{label:"Saturation",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:0,max:200,value:aY.saturation,onChange:e=>updateLayer(aY.id,{saturation:Number(e.target.value)}),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:aY.saturation})]})}),(0,r.jsx)(SettingRow,{label:"Contrast",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:0,max:200,value:aY.contrast,onChange:e=>updateLayer(aY.id,{contrast:Number(e.target.value)}),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:aY.contrast})]})}),(0,r.jsx)(SettingRow,{label:"Brightness",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:0,max:200,value:aY.brightness,onChange:e=>updateLayer(aY.id,{brightness:Number(e.target.value)}),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:aY.brightness})]})}

1),(0,r.jsx)(SettingRow,{label:"Transparency",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:0,max:100,value:Math.round(100*aY.opacity),onChange:e=>updateLayer(aY.id,{opacity:Number(e.target.value)/100}),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:Math.round(100*aY.opacity)})]})}),(0,r.jsx)(SettingRow,{label:"Size",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:20,max:200,value:Math.round(100*aY.scale),onChange:e=>updateLayer(aY.id,{scale:Number(e.target.value)/100}),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:Math.round(100*aY.scale)})]})}),(0,r.jsx)(SettingRow,{label:"Position X",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:-50,max:50,value:aY.offsetX,onChange:e=>updateLayer(aY.id,{offsetX:Number(e.target.value)}),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:aY.offsetX})]})}),(0,r.jsx)(SettingRow,{label:"Position Y",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:-50,max:50,value:aY.offsetY,onChange:e=>updateLayer(aY.id,{offsetY:Number(e.target.value)}),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:aY.offsetY})]})}),(0,r.jsx)(SettingRow,{label:"Rotation",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:-180,max:180,value:aY.rotation,onChange:e=>updateLayer(aY.id,{rotation:Number(e.target.value)}),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:aY.rotation})]})})]}),"color-changer"===ed&&(0,r.jsxs)("div",{className:"space-y-3",children:[(0,r.jsxs)("div",{className:"flex items-center gap-1.5",children:[(0,r.jsx)("span",{className:"text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"Color Changer"}),(0,r.jsx)("span",{className:"rounded-full bg-accent-500/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-accent-500",children:"Beta"})]}),(0,r.jsx)("p",{className:"text-[11px] leading-snug text-gray-400 dark:text-gray-500",children:"Pick Color, then click a spot below to select that exact color from this layer."}),(0,r.jsx)("canvas",{ref:aP,width:3e3,height:3e3,onClick:e=>{if(!eu||!aY)return;let t=e.currentTarget,a=t.getBoundingClientRect(),r=Math.floor((e.clientX-a.left)/a.width*t.width),l=Math.floor((e.clientY-a.top)/a.height*t.height),n=t.getContext("2d");if(!n)return;let[s,i,o]=n.getImageData(r,l,1,1).data;em({r:s,g:i,b:o}),ey(rgbToHex({r:s,g:i,b:o})),eh(!1)},className:"aspect-square w-full rounded-md border border-gray-300 dark:border-gray-600 ".concat(eu?"cursor-crosshair":"cursor-default")}),(0,r.jsx)(j.V4,{onClick:()=>eh(e=>!e),variant:"secondary",className:"w-full",children:eu?"Click the layer above…":"Pick Color"}),eg&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(SettingRow,{label:"Selected",children:(0,r.jsx)("div",{className:"h-6 w-6 rounded border border-gray-300 dark:border-gray-600",style:{backgroundColor:"rgb(".concat(eg.r,", ").concat(eg.g,", ").concat(eg.b,")")}})}),(0,r.jsx)(SettingRow,{label:"Tolerance",sublabel:"How close a color must be to match",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:0,max:100,value:ex,onChange:e=>ep(Number(e.target.value)),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:ex})]})}),(0,r.jsx)(SettingRow,{label:"Replace with",children:(0,r.jsx)("input",{type:"color",value:eb,onChange:e=>ey(e.target.value),className:"h-8 w-8 cursor-pointer rounded border border-gray-300 dark:border-gray-600"})}

1),(0,r.jsx)(SettingRow,{label:"Transparency",sublabel:"0 = erase the color, 100 = solid",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:0,max:100,value:ef,onChange:e=>ev(Number(e.target.value)),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:ef})]})}),(0,r.jsx)(j.V4,{onClick:()=>{if(!aY||!eg)return;let e=replaceColorInCanvas(aY.canvas,eg,ex,{...hexToRgb(eb),a:Math.round(ef/100*255)});updateLayer(aY.id,{canvas:e,thumbnail:generateThumbnail(e),revertCanvas:aY.canvas,revertContentBounds:aY.contentBounds}),em(null)},variant:"primary",className:"w-full",children:"Apply"})]}),aY.revertCanvas&&(0,r.jsx)(j.V4,{onClick:()=>revertLayerEdit(aY.id),variant:"secondary",className:"w-full",children:"Revert Edit"})]}),"kaleidoscope"===ed&&(0,r.jsxs)("div",{className:"space-y-3",children:[(0,r.jsxs)("div",{className:"flex items-center gap-1.5",children:[(0,r.jsx)("span",{className:"text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"Kaleidoscope"}),(0,r.jsx)("span",{className:"rounded-full bg-accent-500/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-accent-500",children:"Beta"})]}),(0,r.jsx)("p",{className:"text-[11px] leading-snug text-gray-400 dark:text-gray-500",children:"Mirrors wedges of the layer out from its center. Adjust Power and Angle, then Apply to bake it in."}),(0,r.jsxs)("div",{className:"flex gap-2",children:[(0,r.jsxs)("button",{type:"button",onClick:()=>ek("mosaic"),className:"flex-1 rounded-md border px-3 py-2 text-left transition-colors ".concat("mosaic"===ew?"border-primary-500 bg-primary-500/10":"border-gray-300 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800"),children:[(0,r.jsx)("span",{className:"block text-xs font-semibold ".concat("mosaic"===ew?"text-primary-500":"text-gray-700 dark:text-gray-300"),children:"Mosaic"}),(0,r.jsx)("span",{className:"block text-[10px] text-gray-500 dark:text-gray-400",children:"Swirled, distorted tiles"})]}),(0,r.jsxs)("button",{type:"button",onClick:()=>ek("mirror"),className:"flex-1 rounded-md border px-3 py-2 text-left transition-colors ".concat("mirror"===ew?"border-primary-500 bg-primary-500/10":"border-gray-300 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800"),children:[(0,r.jsx)("span",{className:"block text-xs font-semibold ".concat("mirror"===ew?"text-primary-500":"text-gray-700 dark:text-gray-300"),children:"Mirror"}),(0,r.jsx)("span",{className:"block text-[10px] text-gray-500 dark:text-gray-400",children:"Crisp mirrored facets"})]})]}),(0,r.jsx)("canvas",{ref:aR,width:600,height:600,className:"aspect-square w-full rounded-md border border-gray-300 dark:border-gray-600"}),(0,r.jsx)(SettingRow,{label:"Power",sublabel:"Number of mirrored wedges",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:1,max:8,value:ej,onChange:e=>eN(Number(e.target.value)),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:ej})]})}),(0,r.jsx)(SettingRow,{label:"Angle",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:0,max:359,value:eS,onChange:e=>eC(Number(e.target.value)),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:eS})]})}),(0,r.jsx)(j.V4,{onClick:()=>{if(!aY)return;let e="mosaic"===ew?kaleidoscopeMosaicCanvas(aY.canvas,ej,eS):kaleidoscopeMirrorCanvas(aY.canvas,ej,eS);updateLayer(aY.id,{canvas:e,thumbnail:generateThumbnail(e),revertCanvas:aY.canvas,revertContentBounds:aY.contentBounds,contentBounds:void 0})},variant:"primary",className:"w-full",children:"Apply"}),aY.revertCanvas&&(0,r.jsx)(j.V4,{onClick:()=>revertLayerEdit(aY.id),variant:"secondary",className:"w-full",children:"Revert Edit"})]}),"tile"===ed&&(0,r.jsxs)("div",{className:"space-y-3",children:[(0,r.jsxs)("div",{className:"flex items-center gap-1.5",children:[(0,r.jsx)("span",{className:"text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"Tile"}),(0,r.jsx)("span",{className:"rounded-full bg-accent-500/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-accent-500",children:"Beta"})]}),(0,r.jsx)("p",{className:"text-[11px] leading-snug text-gray-400 dark:text-gray-500",children:"Repeats the layer in a grid to fill the canvas. Adjust Tiles and Fit, then Apply to bake it in."}),(0,r.jsx)("canvas",{ref:aL,width:600,height:600,className:"aspect-square w-full rounded-md border border-gray-300 dark:border-gray-600"}),(0,r.jsx)(SettingRow,{label:"Tiles",sublabel:"Higher = smaller tiles",children:(0,r.jsxs)("div",{className:"flex items-center gap-3",children:[(0,r.jsx)("input",{type:"range",min:1,max:12,value:eM,onChange:e=>eA(Number(e.target.value)),className:"w-32 accent-primary-500"}),(0,r.jsx)("span",{className:"w-8 text-right text-sm text-gray-500 dark:text-gray-400",children:eM})]})}),(0,r.jsx)(SettingRow,{label:"Fit",sublabel:"Stretch tiles flush to the edges",children:(0,r.jsx)("input",{type:"checkbox",checked:eP,onChange:e=>eR(e.target.checked),className:T})}),(0,r.jsx)(j.V4,{onClick:()=>

1{if(!aY)return;let e=scaledContentBounds(aY.contentBounds,aY.canvas.width,aY.canvas.height),t=tileCanvas(aY.canvas,eM,eP,e);updateLayer(aY.id,{canvas:t,thumbnail:generateThumbnail(t),revertCanvas:aY.canvas,revertContentBounds:aY.contentBounds,contentBounds:void 0})},variant:"primary",className:"w-full",children:"Apply"}),aY.revertCanvas&&(0,r.jsx)(j.V4,{onClick:()=>revertLayerEdit(aY.id),variant:"secondary",className:"w-full",children:"Revert Edit"})]}),(0,r.jsxs)("div",{className:"mt-3 flex gap-2 border-t border-gray-200 pt-3 dark:border-gray-700",children:[(0,r.jsx)("button",{type:"button",onClick:()=>ec("basics"),className:"rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ".concat("basics"===ed?"bg-primary-500/10 text-primary-500":"text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"),children:"Basics"}),(0,r.jsx)("button",{type:"button",onClick:()=>ec("color-changer"),className:"rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ".concat("color-changer"===ed?"bg-primary-500/10 text-primary-500":"text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"),children:"Color Changer"}),(0,r.jsx)("button",{type:"button",onClick:()=>ec("kaleidoscope"),className:"rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ".concat("kaleidoscope"===ed?"bg-primary-500/10 text-primary-500":"text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"),children:"Kaleidoscope"}),(0,r.jsx)("button",{type:"button",onClick:()=>ec("tile"),className:"rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ".concat("tile"===ed?"bg-primary-500/10 text-primary-500":"text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"),children:"Tile"})]}),(0,r.jsxs)("div",{className:"mt-3 space-y-2 border-t border-gray-200 pt-3 dark:border-gray-700",children:[(0,r.jsx)(j.V4,{onClick:()=>duplicateLayer(aY.id),variant:"secondary",className:"w-full",children:"Duplicate"}),(0,r.jsx)(j.V4,{onClick:()=>updateLayer(aY.id,I),variant:"secondary",className:"w-full",children:"Reset"})]})]}),(0,r.jsxs)("div",{children:[(0,r.jsx)("span",{className:"mb-2 block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",children:"Layers"}),(0,r.jsxs)("div",{className:"flex gap-2 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible lg:pb-0",children:[0===er.length&&(0,r.jsx)("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:"No layers yet."}),[...er].reverse().map(e=>{let t=er.findIndex(t=>t.id===e.id);return(0,r.jsxs)("div",{draggable:!0,onDragStart:()=>es(e.id),onDragOver:e=>e.preventDefault(),onDrop:()=>{en&&reorderLayers(en,e.id),es(null)},onDragEnd:()=>es(null),title:e.name,className:"group relative aspect-square w-20 shrink-0 cursor-grab overflow-hidden rounded-md border active:cursor-grabbing lg:w-full ".concat(en===e.id?"border-primary-500 opacity-50":"border-gray-300 dark:border-gray-600"),children:[(0,r.jsx)("img",{src:e.thumbnail,alt:e.name,className:"h-full w-full object-cover",style:{filter:"hue-rotate(".concat(e.hue,"deg) saturate(").concat(e.saturation,"%) contrast(").concat(e.contrast,"%) brightness(").concat(e.brightness,"%)"),opacity:e.visible?e.opacity:.25*e.opacity}}),(0,r.jsx)("button",{type:"button",onClick:()=>{eo(e.id),es(null)},"aria-label":"Edit ".concat(e.name),className:"absolute left-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-white opacity-0 transition-opacity group-hover:opacity-100",children:(0,r.jsx)("svg",{viewBox:"0 0 20 20",fill:"currentColor",className:"h-3 w-3",children:(0,r.jsx)("path",{d:"M17.414 2.586a2 2 0 0 0-2.828 0l-1.5 1.5 2.828 2.828 1.5-1.5a2 2 0 0 0 0-2.828zM11.672 5.328 4 13v3h3l7.672-7.672-3-3z"})})}),(0,r.jsx)("button",{type:"button",onClick:()=>deleteLayer(e.id),"aria-label":"Delete ".concat(e.name),className:"absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-xs text-white opacity-0 transition-opacity group-hover:opacity-100",children:"\xd7"}),(0,r.jsx)("button",{type:"button",onClick:()=>toggleLayerVisibility(e.id),"aria-label":e.visible?"Hide ".concat(e.name):"Show ".concat(e.name),className:"absolute bottom-1 left-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-white opacity-0 transition-opacity group-hover:opacity-100",children:e.visible?(0,r.jsx)("svg",{viewBox:"0 0 20 20",fill:"currentColor",className:"h-3 w-3",children:(0,r.jsx)("path",{d:"M10 4C5 4 1.5 9 1.5 9s3.5 5 8.5 5 8.5-5 8.5-5S15 4 10 4zm0 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"})}):(0,r.jsx)("svg",{viewBox:"0 0 20 20",fill:"currentColor",className:"h-3 w-3",children:(0,r.jsx)("path",{d:"M3.28 2.22a.75.75 0 0 0-1.06 1.06l14.5 14.5a.75.75 0 1 0 1.06-1.06l-2.02-2.02C17.53 13.36 18.5 12 18.5 12S15 6 10 6c-1.03 0-1.97.19-2.82.5L3.28 2.22zM10 8a2.5 2.5 0 0 1 2.36 3.36L9.14 8.14A2.48 2.48 0 0 1 10 8zM5.02 6.44 6.6 8.02A2.5 2.5 0 0 0 10 11.4l1.58 1.58A8.9 8.9 0 0 1 10 13c-5 0-8.5-5-8.5-5s1.3-1.86 3.52-3.06z"})})}),(0,r.jsx)("button",{type:"button",onClick:()=>mergeLayerDown(e.id),disabled:!(t>0),"aria-label":"Merge ".concat(e.name," down"),title:"Merge down",className:"absolute bottom-1 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-white opacity-0 transition-opacity disabled:cursor-not-allowed group-hover:opacity-100 disabled:group-hover:opacity-30",children:(0,r.jsx)("svg",{viewBox:"0 0 20 20",fill:"currentColor",className:"h-3 w-3",children:(0,r.jsx)("path",{d:"M4 4h12v2H4V4zm0 10h12v2H4v-2zm5-7h2v3h3l-4 4-4-4h3V7z"})})})]},e.id)})]})]}),(0,r.jsxs)("div",{className:"space-y-4",children:[(0,r.jsx)("canvas",{ref:aA,width:3e3,height:3e3,className:"aspect-square w-full rounded-lg border border-gray-200 dark:border-gray-700"}),(0,r.jsxs)("div",{className:"flex flex-wrap gap-2",children:[(0,r.jsx)(j.V4,{onClick:()=>{let e=aA.current;if(!e)return;let t=document.createElement("a");t.href=e.toDataURL("image/png"),t.download="album-art.png",t.click()},variant:"primary",children:"Download PNG"}),(0,r.jsx)(j.V4,{onClick:()=>{let e=aA.current;if(!e)return;let t=Math.min(1,1200/e.width),a=document.createElement("canvas");a.width=Math.round(e.width*t),a.height=Math.round(e.height*t);let r=a.getContext("2d");if(r){r.drawImage(e,0,0,a.width,a.height);try{(0,f.u)(a.toDataURL("image/jpeg",.92)),window.open("/tools/spectrogram-tag","_blank")}catch(e){console.error("Error handing image off to Spectrogram Tag Maker:",e)}}},variant:"secondary",children:"Send to Spectrogram Tag Maker"}),(0,r.jsx)(j.V4,{onClick:handleAddToRemixPile,disabled:tG,variant:"secondary",children:tG?"Saving…":t$?"Added!":"Add to Remix Pile"}),(0,r.jsx)(j.V4,{onClick:()=>

1{if(!t){a();return}tZ(!0)},variant:"secondary",children:"Connect to Song"}),(0,r.jsxs)(j.V4,{onClick:handleSaveForLater,disabled:t1,variant:"secondary",className:"flex items-center gap-1.5",children:[t1?"Saving…":t5?"Saved!":"Save for Later",t&&!i&&(0,r.jsx)("span",{className:"rounded-full bg-accent-500/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-accent-500",children:"Pro"})]})]}),(0,r.jsx)(N.Z,{source:"album-art"})]})]}),tY&&t&&(0,r.jsx)(ConnectSongModal,{uid:t.uid,connectingSongId:tJ,connectedSong:tK,onSelect:handleConnectSong,onClose:()=>{tZ(!1),tQ(null)}})]})}},7931:function(e,t,a){a.d(t,{Z:function(){return AuwenPromo}});var r=a(7437),l=a(9758),n={src:"/_next/static/media/auwen164.11acad1e.png",height:900,width:1600,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAGFBMVEUGBQYPEA8lJBgaGhE1NCsjNy44MhQaJiaLYVJFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAJklEQVR4nAXBgQEAMAiDMEp1/v/xEoDc7gJ1Rsm9N2MxJFWaWOADCXcAYGlS6kgAAAAASUVORK5CYII=",blurWidth:8,blurHeight:5};function AuwenPromo(e){let{source:t}=e;return(0,r.jsx)("div",{className:"rounded-xl border border-gray-300 bg-white p-6 dark:border-gray-700 dark:bg-gray-900",children:(0,r.jsxs)("a",{href:"/auwen?f=".concat(t),target:"_blank",rel:"noopener noreferrer",className:"flex items-center gap-4 transition-opacity hover:opacity-80",children:[(0,r.jsx)(l.Z,{src:n,alt:"Auwen",width:360,height:204,className:"w-1/2 shrink-0 rounded-md"}),(0,r.jsxs)("span",{className:"flex-1 text-center text-sm text-gray-600 dark:text-gray-400",children:["Check out ",(0,r.jsx)("span",{className:"font-semibold text-gray-900 dark:text-gray-100",children:"Auwen"}),", our full digital audio workstation."]})]})})}},9758:function(e,t,a){var r=a(7437),l=a(6691),n=a.n(l);t.Z=e=>{let{...t}=e;return(0,r.jsx)(n(),{...t})}},1356:function(e,t,a){var r=a(7437),l=a(1396),n=a.n(l);t.Z=e=>{let{href:t,...a}=e,l=t&&t.startsWith("/"),s=t&&t.startsWith("#");return l?(0,r.jsx)(n(),{href:t,...a}):s?(0,r.jsx)("a",{href:t,...a}):(0,r.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:t,...a})}},4112:function(e,t,a){a.d(t,{Z:function(){return MaskedLogo}});var r=a(7437);a(2265);var l=a(5423);function MaskedLogo(e){let{className:t,label:a="Auwen"}=e;return(0,r.jsx)("div",{role:"img","aria-label":a,className:t,style:{maskImage:"url(".concat(l.default.src,")"),maskSize:"contain",maskRepeat:"no-repeat",maskPosition:"center",WebkitMaskImage:"url(".concat(l.default.src,")"),WebkitMaskSize:"contain",WebkitMaskRepeat:"no-repeat",WebkitMaskPosition:"center"}})}},1704:function(e,t,a){a.d(t,{Bm:function(){return ToolLinkButton},V4:function(){return ToolButton}});var r=a(7437);a(2265);let l={primary:"border border-primary-500 text-primary-500 hover:bg-primary-500/10",secondary:"border border-gray-300 text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800"};function toolButtonClassName(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"primary",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return"".concat("inline-flex items-center justify-center rounded-md px-4 py-2 text-center text-sm font-semibold transition-colors disabled:cursor-not-allowed disabled:opacity-50"," ").concat(l[e]," ").concat(t).trim()}function ToolButton(e){let{variant:t="primary",className:a="",type:l="button",...n}=e;return(0,r.jsx)("button",{type:l,className:toolButtonClassName(t,a),...n})}function ToolLinkButton(e){let{variant:t="primary",className:a="",...l}=e;return(0,r.jsx)("a",{className:toolButtonClassName(t,a),...l})}},1344:function(e,t,a){a.r(t),a.d(t,{AuthProvider:function(){return AuthProvider},useAuth:function(){return useAuth}});var r=a(7437),l=a(2265),n=a(9380);let s=(0,l.createContext)({user:null,loading:!0,showAuthModal:()=>{},hideAuthModal:()=>{},isAuthModalOpen:!1}),useAuth=()=>{let e=(0,l.useContext)(s);if(!e)throw Error("useAuth must be used within an AuthProvider");return e};function AuthProvider(e){let{children:t}=e,[a,i]=(0,l.useState)(null),[o,d]=(0,l.useState)(!0),[c,u]=(0,l.useState)(!1);return(0,l.useEffect)(()=>{let e=(0,n.Aj)(e=>{i(e),d(!1)});return()=>e()},[]),(0,r.jsx)(s.Provider,{value:{user:a,loading:o,showAuthModal:()=>u(!0),hideAuthModal:()=>u(!1),isAuthModalOpen:c},children:t})}},9380:function(e,t,a){a.d(t,{Aj:function(){return onAuthStateChanged},Ry:function(){return signInWithEmail},Yb:function(){return signUpWithEmail},c0:function(){return resetPassword},w7:function(){return signOut}});var r=a(9364),l=a(6516),n=a(4451);function onAuthStateChanged(e){return(0,r.Aj)(l.I8,e)}async function signUpWithEmail(e,t){try{let a=await (0,r.Xb)(l.I8,e,t),s=a.user;return await (0,n.pl)((0,n.JU)(l.db,"Users",s.uid),{id:s.uid,email:e,signedUp:(0,n.Bt)(),created:(0,n.Bt)()}),a.user}catch(e){throw console.error("Error signing up with email",e),e}}async function signInWithEmail(e,t){try{let a=await (0,r.e5)(l.I8,e,t);return a.user}catch(e){throw console.error("Error signing in with email",e),e}}async function signOut(){try{await (0,r.w7)(l.I8)}catch(e){throw console.error("Error signing out",e),e}}async function resetPassword(e){try{await (0,r.LS)(l.I8,e)}catch(e){throw console.error("Error sending password reset email",e),e}}},4492:function(e,t,a){a.d(t,{$j:function(){return getSongArtUrl},GD:function(){return getSongAudioUrl},Vn:function(){return getArtUrl},XV:function(){return getSavedArtImageUrl},mE:function(){return getSongFileUrl},q3:function(){return getAdlibAudioUrl}});var r=a(8126),l=a(6516);async function getSongAudioUrl(e,t){try{return await (0,r.Jt)((0,r.iH)(l.tO,"users/".concat(e,"/songs/").concat(t)))}catch(e){return console.error("Error getting song audio URL:",e),""}}async function getSongArtUrl(e,t){if(!t)return"";try{return await (0,r.Jt)((0,r.iH)(l.tO,"users/".concat(e,"/art/").concat(t)))}catch(e){return console.error("Error getting song art URL:",e),""}}async function getSongFileUrl(e,t){if(!t)return"";try{return await (0,r.Jt)((0,r.iH)(l.tO,"users/".concat(e,"/files/").concat(t)))}catch(e){return console.error("Error getting song file URL:",e),""}}async function getAdlibAudioUrl(e){if(!e)return"";try{return await (0,r.Jt)((0,r.iH)(l.tO,"adlibs/".concat(e,".wav")))}catch(e){return console.error("Error getting adlib audio URL:",e),""}}async function getSavedArtImageUrl(e,t){if(!t)return"";try{return await (0,r.Jt)((0,r.iH)(l.tO,"users/".concat(e,"/savedArt/").concat(t)))}catch(e){return console.error("Error getting saved art URL:",e),""}}async function getArtUrl(e,t,a){let r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"art";

1return a||(e&&t?"savedArt"===r?getSavedArtImageUrl(e,t):getSongArtUrl(e,t):"")}},3823:function(e,t,a){a.d(t,{j:function(){return takeIncomingSpectrogramImage},u:function(){return sendImageToSpectrogramTag}});let r="spectrogramTagIncomingImage";function sendImageToSpectrogramTag(e){localStorage.setItem(r,e)}function takeIncomingSpectrogramImage(){let e=localStorage.getItem(r);return e&&localStorage.removeItem(r),e}},5423:function(e,t,a){a.r(t),t.default={src:"/_next/static/media/logo.4c771550.png",height:512,width:512,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAFVBMVEVMaXH////////////////////////zsRG/AAAAB3RSTlMANHcfWJcRvxiX0gAAAAlwSFlzAAALEwAACxMBAJqcGAAAAClJREFUeJxjYIADRiYWFiZGBgYGZlZGRlZmkBAbExMbWA7GgEvBFUMBAA3IAGGpnk3gAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:8}}}]);