1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3436],{31894:function(e,t,r){r.d(t,{QL:function(){return i},Ql:function(){return a},UL:function(){return l},m6:function(){return o}});let l=[{id:"white",nameKey:"bgPresetWhite",type:"solid",preview:"#FFFFFF",value:"#FFFFFF"},{id:"black",nameKey:"bgPresetBlack",type:"solid",preview:"#000000",value:"#000000"},{id:"cream",nameKey:"bgPresetCream",type:"solid",preview:"#FFF8E7",value:"#FFF8E7"},{id:"ivory",nameKey:"bgPresetIvory",type:"solid",preview:"#FFFFF0",value:"#FFFFF0"},{id:"navy",nameKey:"bgPresetNavy",type:"solid",preview:"#1B2838",value:"#1B2838"},{id:"burgundy",nameKey:"bgPresetBurgundy",type:"solid",preview:"#800020",value:"#800020"},{id:"forest",nameKey:"bgPresetForest",type:"solid",preview:"#228B22",value:"#228B22"},{id:"slate",nameKey:"bgPresetSlate",type:"solid",preview:"#708090",value:"#708090"}],i=[{id:"sunset",nameKey:"bgPresetSunset",type:"gradient",preview:"linear-gradient(to right, #FF6B35, #F7931E)",value:{type:"linear",direction:"horizontal",start:"#FF6B35",end:"#F7931E"}},{id:"ocean",nameKey:"bgPresetOcean",type:"gradient",preview:"linear-gradient(to bottom, #2193b0, #6dd5ed)",value:{type:"linear",direction:"vertical",start:"#2193b0",end:"#6dd5ed"}},{id:"purpleGlow",nameKey:"bgPresetPurple",type:"gradient",preview:"radial-gradient(circle, #7209AA, #3A0066)",value:{type:"radial",start:"#7209AA",end:"#3A0066"}},{id:"goldenHour",nameKey:"bgPresetGolden",type:"gradient",preview:"linear-gradient(to right, #F2994A, #F2C94C)",value:{type:"linear",direction:"horizontal",start:"#F2994A",end:"#F2C94C"}},{id:"midnight",nameKey:"bgPresetMidnight",type:"gradient",preview:"linear-gradient(to bottom, #0F2027, #203A43)",value:{type:"linear",direction:"vertical",start:"#0F2027",end:"#203A43"}},{id:"pastel",nameKey:"bgPresetPastel",type:"gradient",preview:"linear-gradient(to right, #FFDEE9, #B5FFFC)",value:{type:"linear",direction:"horizontal",start:"#FFDEE9",end:"#B5FFFC"}}],o=[{id:"dots",nameKey:"bgPatDots",label:"Dots"},{id:"stripes",nameKey:"bgPatStripes",label:"Stripes"},{id:"diagonalLines",nameKey:"bgPatDiagonal",label:"Diagonal"},{id:"grid",nameKey:"bgPatGrid",label:"Grid"},{id:"chevron",nameKey:"bgPatChevron",label:"Chevron"},{id:"diamonds",nameKey:"bgPatDiamonds",label:"Diamonds"},{id:"waves",nameKey:"bgPatWaves",label:"Waves"},{id:"crosshatch",nameKey:"bgPatCrosshatch",label:"Crosshatch"},{id:"hexagons",nameKey:"bgPatHexagons",label:"Hexagons"},{id:"zigzag",nameKey:"bgPatZigzag",label:"Zigzag"},{id:"brick",nameKey:"bgPatBrick",label:"Brick"},{id:"scales",nameKey:"bgPatScales",label:"Scales"},{id:"herringbone",nameKey:"bgPatHerringbone",label:"Herringbone"},{id:"stars",nameKey:"bgPatStars",label:"Stars"},{id:"confetti",nameKey:"bgPatConfetti",label:"Confetti"},{id:"plaid",nameKey:"bgPatPlaid",label:"Plaid"},{id:"wood",nameKey:"bgPatWood",label:"Wood"},{id:"marble",nameKey:"bgPatMarble",label:"Marble"},{id:"linen",nameKey:"bgPatLinen",label:"Linen"},{id:"paper",nameKey:"bgPatPaper",label:"Paper"}],a=(e,t="#000000",r="#FFFFFF",l=1)=>{let i=20*l,o={dots:`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}"><rect width="${i}" height="${i}" fill="${r}"/><circle cx="${i/2}" cy="${i/2}" r="${.15*i}" fill="${t}"/></svg>`,stripes:`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}"><rect width="${i}" height="${i}" fill="${r}"/><rect width="${.25*i}" height="${i}" fill="${t}"/></svg>`,diagonalLines:`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}"><rect width="${i}" height="${i}" fill="${r}"/><line x1="0" y1="${i}" x2="${i}" y2="0" stroke="${t}" stroke-width="${.1*i}"/></svg>`,grid:`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}"><rect width="${i}" height="${i}" fill="${r}"/><line x1="${i/2}" y1="0" x2="${i/2}" y2="${i}" stroke="${t}" stroke-width="${.05*i}"/><line x1="0" y1="${i/2}" x2="${i}" y2="${i/2}" stroke="${t}" stroke-width="${.05*i}"/></svg>`,chevron:`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}"><rect width="${i}" height="${i}" fill="${r}"/><polyline points="0,${.75*i} ${i/2},${.25*i} ${i},${.75*i}" fill="none" stroke="${t}" stroke-width="${.1*i}"/></svg>`,diamonds:`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}"><rect width="${i}" height="${i}" fill="${r}"/><polygon points="${i/2},${.1*i} ${.9*i},${i/2} ${i/2},${.9*i} ${.1*i},${i/2}" fill="none" stroke="${t}" stroke-width="${.05*i}"/></svg>`,waves:`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}"><rect width="${i}" height="${i}" fill="${r}"/><path d="M0 ${i/2} Q${.25*i} ${.25*i} ${i/2} ${i/2} Q${.75*i} ${.75*i} ${i} ${i/2}" fill="none" stroke="${t}" stroke-width="${.08*i}"/></svg>`,crosshatch:`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}"><rect width="${i}" height="${i}" fill="${r}"/><line x1="0" y1="0" x2="${i}" y2="${i}" stroke="${t}" stroke-width="${.05*i}"/><line x1="${i}" y1="0" x2="0" y2="${i}" stroke="${t}" stroke-width="${.05*i}"/></svg>`,linen:`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}"><rect width="${i}" height="${i}" fill="${r}"/><line x1="0" y1="${.25*i}" x2="${i}" y2="${.25*i}" stroke="${t}" stroke-width="${.02*i}" opacity="0.3"/><line x1="0" y1="${.5*i}" x2="${i}" y2="${.5*i}" stroke="${t}" stroke-width="${.02*i}" opacity="0.2"/><line x1="0" y1="${.75*i}" x2="${i}" y2="${.75*i}" stroke="${t}" stroke-width="${.02*i}" opacity="0.3"/><line x1="${.25*i}" y1="0" x2="${.25*i}" y2="${i}" stroke="${t}" stroke-width="${.02*i}" opacity="0.15"/><line x1="${.5*i}" y1="0" x2="${.5*i}" y2="${i}" stroke="${t}" stroke-width="${.02*i}" opacity="0.2"/><line x1="${.75*i}" y1="0" x2="${.75*i}" y2="${i}" stroke="${t}" stroke-width="${.02*i}" opacity="0.15"/></svg>`,paper:`<svg xmlns="http://www.w3.org/2000/svg" width="${2*i}" height="${2*i}"><rect width="${2*i}" height="${2*i}" fill="${r}"/><circle cx="${.3*i}" cy="${.4*i}" r="${.05*i}" fill="${t}" opacity="0.08"/><circle cx="${1.2*i}" cy="${.2*i}" r="${.04*i}" fill="${t}" opacity="0.06"/><circle cx="${.7*i}" cy="${.9*i}" r="${.06*i}" fill="${t}" opacity="0.07"/><circle cx="${1.6*i}
1" cy="${.7*i}" r="${.03*i}" fill="${t}" opacity="0.09"/><circle cx="${.2*i}" cy="${1.4*i}" r="${.05*i}" fill="${t}" opacity="0.05"/><circle cx="${1.1*i}" cy="${1.6*i}" r="${.04*i}" fill="${t}" opacity="0.08"/><circle cx="${1.8*i}" cy="${1.3*i}" r="${.06*i}" fill="${t}" opacity="0.06"/><circle cx="${.5*i}" cy="${1.8*i}" r="${.03*i}" fill="${t}" opacity="0.07"/></svg>`,marble:`<svg xmlns="http://www.w3.org/2000/svg" width="${2*i}" height="${2*i}"><rect width="${2*i}" height="${2*i}" fill="${r}"/><path d="M0 ${.3*i} Q${.5*i} ${.1*i} ${i} ${.5*i} T${2*i} ${.4*i}" fill="none" stroke="${t}" stroke-width="${.03*i}" opacity="0.2"/><path d="M${.2*i} ${i} Q${.8*i} ${.7*i} ${1.5*i} ${1.2*i} T${2*i} ${.9*i}" fill="none" stroke="${t}" stroke-width="${.05*i}" opacity="0.15"/><path d="M0 ${1.5*i} Q${.4*i} ${1.3*i} ${i} ${1.6*i} T${2*i} ${1.4*i}" fill="none" stroke="${t}" stroke-width="${.02*i}" opacity="0.25"/><circle cx="${.3*i}" cy="${.8*i}" r="${.15*i}" fill="${t}" opacity="0.05"/><circle cx="${1.4*i}" cy="${1.5*i}" r="${.2*i}" fill="${t}" opacity="0.04"/></svg>`,wood:`<svg xmlns="http://www.w3.org/2000/svg" width="${3*i}" height="${2*i}"><rect width="${3*i}" height="${2*i}" fill="${r}"/><path d="M0 ${.15*i} Q${.8*i} ${.08*i} ${1.5*i} ${.18*i} T${3*i} ${.14*i}" fill="none" stroke="${t}" stroke-width="${.06*i}" opacity="0.5"/><path d="M0 ${.35*i} Q${.5*i} ${.28*i} ${1.2*i} ${.38*i} T${3*i} ${.33*i}" fill="none" stroke="${t}" stroke-width="${.04*i}" opacity="0.35"/><path d="M0 ${.55*i} Q${.9*i} ${.48*i} ${1.8*i} ${.58*i} T${3*i} ${.52*i}" fill="none" stroke="${t}" stroke-width="${.07*i}" opacity="0.45"/><path d="M0 ${.72*i} Q${.6*i} ${.68*i} ${1.4*i} ${.75*i} T${3*i} ${.7*i}" fill="none" stroke="${t}" stroke-width="${.03*i}" opacity="0.3"/><path d="M0 ${.9*i} Q${1*i} ${.84*i} ${2*i} ${.93*i} T${3*i} ${.88*i}" fill="none" stroke="${t}" stroke-width="${.05*i}" opacity="0.4"/><path d="M0 ${1.1*i} Q${.7*i} ${1.05*i} ${1.6*i} ${1.14*i} T${3*i} ${1.08*i}" fill="none" stroke="${t}" stroke-width="${.06*i}" opacity="0.35"/><path d="M0 ${1.32*i} Q${1.1*i} ${1.26*i} ${2.2*i} ${1.35*i} T${3*i} ${1.3*i}" fill="none" stroke="${t}" stroke-width="${.04*i}" opacity="0.45"/><path d="M0 ${1.55*i} Q${.4*i} ${1.5*i} ${1.3*i} ${1.58*i} T${3*i} ${1.53*i}" fill="none" stroke="${t}" stroke-width="${.07*i}" opacity="0.38"/><path d="M0 ${1.78*i} Q${.8*i} ${1.72*i} ${1.9*i} ${1.8*i} T${3*i} ${1.75*i}" fill="none" stroke="${t}" stroke-width="${.03*i}" opacity="0.42"/><ellipse cx="${.8*i}" cy="${.45*i}" rx="${.25*i}" ry="${.08*i}" fill="none" stroke="${t}" stroke-width="${.02*i}" opacity="0.2"/><ellipse cx="${2.2*i}" cy="${1.3*i}" rx="${.3*i}" ry="${.06*i}" fill="none" stroke="${t}" stroke-width="${.02*i}" opacity="0.15"/></svg>`,hexagons:(()=>{let e=.866*i,l=1.5*i,o=2*e;return`<svg xmlns="http://www.w3.org/2000/svg" width="${l}" height="${o}"><rect width="${l}" height="${o}" fill="${r}"/><polygon points="${.5*i},0 ${i},${.5*e} ${i},${1.5*e} ${.5*i},${o} 0,${1.5*e} 0,${.5*e}" fill="none" stroke="${t}" stroke-width="${.05*i}"/>
1<polygon points="${1.25*i},${e} ${l},${.5*e} ${l},${1.5*e}" fill="none" stroke="${t}" stroke-width="${.05*i}"/></svg>`})(),zigzag:`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}"><rect width="${i}" height="${i}" fill="${r}"/><polyline points="0,${.3*i} ${.25*i},${.1*i} ${.5*i},${.3*i} ${.75*i},${.1*i} ${i},${.3*i}" fill="none" stroke="${t}" stroke-width="${.08*i}" stroke-linejoin="miter"/><polyline points="0,${.7*i} ${.25*i},${.5*i} ${.5*i},${.7*i} ${.75*i},${.5*i} ${i},${.7*i}" fill="none" stroke="${t}" stroke-width="${.08*i}" stroke-linejoin="miter"/></svg>`,brick:`<svg xmlns="http://www.w3.org/2000/svg" width="${2*i}" height="${i}"><rect width="${2*i}" height="${i}" fill="${r}"/><rect x="0" y="0" width="${2*i}" height="${.45*i}" fill="none" stroke="${t}" stroke-width="${.05*i}" opacity="0.7"/><line x1="${i}" y1="0" x2="${i}" y2="${.45*i}" stroke="${t}" stroke-width="${.05*i}" opacity="0.7"/><rect x="0" y="${.5*i}" width="${2*i}" height="${.45*i}" fill="none" stroke="${t}" stroke-width="${.05*i}" opacity="0.7"/><line x1="${.5*i}" y1="${.5*i}" x2="${.5*i}" y2="${.95*i}" stroke="${t}" stroke-width="${.05*i}" opacity="0.7"/><line x1="${1.5*i}" y1="${.5*i}" x2="${1.5*i}" y2="${.95*i}" stroke="${t}" stroke-width="${.05*i}" opacity="0.7"/></svg>`,scales:`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}"><rect width="${i}" height="${i}" fill="${r}"/><path d="M0 ${i} A${.5*i} ${.5*i} 0 0 1 ${i} ${i}" fill="none" stroke="${t}" stroke-width="${.06*i}"/><path d="M${-(.5*i)} ${.5*i} A${.5*i} ${.5*i} 0 0 1 ${.5*i} ${.5*i}" fill="none" stroke="${t}" stroke-width="${.06*i}"/><path d="M${.5*i} ${.5*i} A${.5*i} ${.5*i} 0 0 1 ${1.5*i} ${.5*i}" fill="none" stroke="${t}" stroke-width="${.06*i}"/></svg>`,herringbone:`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${2*i}"><rect width="${i}" height="${2*i}" fill="${r}"/><line x1="0" y1="0" x2="${.5*i}" y2="${.5*i}" stroke="${t}" stroke-width="${.08*i}"/><line x1="${.5*i}" y1="${.5*i}" x2="0" y2="${i}" stroke="${t}" stroke-width="${.08*i}"/><line x1="${.5*i}" y1="0" x2="${i}" y2="${.5*i}" stroke="${t}" stroke-width="${.08*i}"/><line x1="${i}" y1="${.5*i}" x2="${.5*i}" y2="${i}" stroke="${t}" stroke-width="${.08*i}"/><line x1="0" y1="${i}" x2="${.5*i}" y2="${1.5*i}" stroke="${t}" stroke-width="${.08*i}"/><line x1="${.5*i}" y1="${1.5*i}" x2="0" y2="${2*i}" stroke="${t}" stroke-width="${.08*i}"/><line x1="${.5*i}" y1="${i}" x2="${i}" y2="${1.5*i}" stroke="${t}" stroke-width="${.08*i}"/><line x1="${i}" y1="${1.5*i}" x2="${.5*i}" y2="${2*i}" stroke="${t}" stroke-width="${.08*i}"/></svg>`,stars:(()=>{let e=.5*i,l=.5*i,o=.3*i,a=.12*i,n=Array.from({length:10},(t,r)=>{let i=Math.PI/2+Math.PI*r/5,n=r%2==0?o:a;return`${e+n*Math.cos(i)},${l-n*Math.sin(i)}`}).join(" ");return`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}"><rect width="${i}" height="${i}" fill="${r}"/><polygon points="${n}" fill="${t}" opacity="0.7"/></svg>`})(),confetti:`<svg xmlns="http://www.w3.org/2000/svg" width="${2*i}" height="${2*i}"><rect width="${2*i}" height="${2*i}" fill="${r}"/><rect x="${.2*i}" y="${.3*i}" width="${.15*i}" height="${.25*i}" rx="${.02*i}" fill="${t}" opacity="0.6" transform="rotate(25 ${.275*i} ${.425*i})"/><rect x="${1.1*i}" y="${.15*i}" width="${.12*i}" height="${.22*i}" rx="${.02*i}" fill="${t}" opacity="0.45" transform="rotate(-15 ${1.16*i} ${.26*i})"/><rect x="${.6*i}" y="${.8*i}" width="${.14*i}" height="${.2*i}" rx="${.02*i}" fill="${t}" opacity="0.55" transform="rotate(45 ${.67*i} ${.9*i})"/><rect x="${1.5*i}" y="${.7*i}" width="${.13*i}" height="${.24*i}" rx="${.02*i}" fill="${t}" opacity="0.5" transform="rotate(-35 ${1.565*i} ${.82*i})"/><rect x="${.3*i}" y="${1.3*i}" width="${.16*i}" height="${.2*i}" rx="${.02*i}" fill="${t}" opacity="0.4" transform="rotate(60 ${.38*i} ${1.4*i})"/><rect x="${1.3*i}" y="${1.4*i}" width="${.11*i}" height="${.23*i}" rx="${.02*i}" fill="${t}" opacity="0.55" transform="rotate(-50 ${1.355*i} ${1.515*i})"/><circle cx="${.9*i}" cy="${.4*i}" r="${.06*i}" fill="${t}" opacity="0.5"/><circle cx="${.15*i}" cy="${1.7*i}" r="${.05*i}" fill="${t}" opacity="0.4"/><circle cx="${1.7*i}" cy="${1.1*i}" r="${.07*i}" fill="${t}" opacity="0.45"/></svg>`,plaid:`<svg xmlns="http://www.w3.org/2000/svg" width="${2*i}" height="${2*i}"><rect width="${2*i}" height="${2*i}" fill="${r}"/><rect x="0" y="0" width="${.3*i}" height="${2*i}" fill="${t}" opacity="0.12"/><rect x="${i}" y="0" width="${.3*i}" height="${2*i}" fill="${t}" opacity="0.12"/><rect x="0" y="0" width="${2*i}" height="${.3*i}" fill="${t}" opacity="0.12"/><rect x="0" y="${i}" width="${2*i}" height="${.3*i}" fill="${t}" opacity="0.12"/><rect x="${.1*i}" y="0" width="${.08*i}" height="${2*i}" fill="${t}" opacity="0.25"/><rect x="${1.1*i}" y="0" width="${.08*i}" height="${2*i}" fill="${t}" opacity="0.25"/><rect x="0" y="${.1*i}" width="${2*i}" height="${.08*i}" fill="${t}" opacity="0.25"/><rect x="0" y="${1.1*i}" width="${2*i}" height="${.08*i}" fill="${t}" opacity="0.25"/></svg>`};return`data:image/svg+xml;charset=utf-8,${encodeURIComponent(o[e])}`}},2516:function(e,t,r){r.r(t),r.d(t,{default:function(){return F}});var l=r(85893),i=r(67294),o=r(42746),a=r(25675),n=r.n(a),s=r(75028),$=r(53660),d=r(48132),c=r(99984),h=r(88953),g=r(31894);let p=e=>{let t=e.replace("#","");return!(t.length<6)&&(299*parseInt(t.substring(0,2),16)+587*parseInt(t.substring(2,4),16)+114*parseInt(t.substring(4,6),16))/1e3>220},y=["white","black","navy","burgundy","forest"],x=g.UL.filter(e=>y.includes(e.id));var b=({canvas:e,currentColor:t,onColorChange:r,expandedSection:i,onToggleSection:o,t:a})=>{let n=(0,l.jsx)("div",{className:"flex gap-2 py-1",children:x.map(e=>(0,l.jsx)("button",{type:"button",onClick:t=>{t.stopPropagation(),r(e.value)},className:`flex-shrink-0 w-7 h-7 rounded-full transition-all hover:scale-110 ${t===e.value?"ring-2 ring-purple-400 ring-offset-1":""} ${p(e.preview)?"border-2 border-gray-300 shadow-sm":"border border-gray-200/50"}`,style:{backgroundColor:e.value},title:a(e.nameKey)},e.id))});
1return(0,l.jsxs)(h.Z,{title:a("bgSolidColorTitle"),sectionKey:"solidColor",expandedSection:i,onToggle:o,preview:n,children:[(0,l.jsx)("div",{className:"flex flex-wrap gap-2 mb-3",children:g.UL.map(e=>(0,l.jsx)("button",{type:"button",onClick:()=>r(e.value),className:`w-9 h-9 rounded-full transition-all hover:scale-110 ${t===e.value?"ring-2 ring-purple-400 ring-offset-2":""} ${p(e.preview)?"border-2 border-gray-300 shadow-sm":"border border-gray-200/50 shadow-sm"}`,style:{backgroundColor:e.value},title:a(e.nameKey)},e.id))}),(0,l.jsx)(d.Z,{canvas:e,color:t,onChange:e=>{r(`rgba(${e.rgb.r},${e.rgb.g},${e.rgb.b},${e.rgb.a})`)},presetColors:c.qr,eyedropperLabel:a("colorEyedropper"),pickingLabel:a("colorEyedropperPicking")})]})},w=({canvas:e,getBgRect:t,expandedSection:r,onToggleSection:o,setUnsavedChanges:a,t:n})=>{let[$,p]=(0,i.useState)("#7209AA"),[y,x]=(0,i.useState)("#00D4FF"),[b,w]=(0,i.useState)("horizontal"),[u,f]=(0,i.useState)("linear"),[m,k]=(0,i.useState)("start"),v=(0,i.useCallback)((r=$,l=y,i=b,o=u)=>{let n;let d=t();if(!d)return;let c=d.width??e.getWidth(),h=d.height??e.getHeight();if("linear"===o)switch(i){case"horizontal":n={x1:0,y1:0,x2:c,y2:0};break;case"vertical":n={x1:0,y1:0,x2:0,y2:h};break;case"diagonal":n={x1:0,y1:0,x2:c,y2:h}}else n={x1:c/2,y1:h/2,x2:c/2,y2:h/2,r1:0,r2:Math.max(c,h)/2};let g=new s.Gradient({type:o,coords:n,colorStops:[{offset:0,color:r},{offset:1,color:l}]});d.set("fill",g),e.sendObjectToBack(d),e.renderAll(),a(!0)},[e,t,$,y,b,u,a]),F=e=>{w(e),v($,y,e,u)},j=e=>{f(e),v($,y,b,e)},C=e=>{let t=e.value;p(t.start),x(t.end),f(t.type),t.direction&&w(t.direction),v(t.start,t.end,t.direction||"horizontal",t.type)},N=(0,l.jsx)("div",{className:"flex gap-[6px] py-1",children:g.QL.map(e=>(0,l.jsx)("button",{type:"button",onClick:t=>{t.stopPropagation(),C(e)},className:"flex-1 h-6 rounded-md border border-gray-200/60 transition-all hover:scale-105 hover:shadow-sm",style:{background:e.preview},title:n(e.nameKey)},e.id))});return(0,l.jsxs)(h.Z,{title:n("bgGradientTitle"),sectionKey:"gradient",expandedSection:r,onToggle:o,preview:N,children:[(0,l.jsx)("div",{className:"grid grid-cols-3 gap-2 mb-3",children:g.QL.map(e=>(0,l.jsx)("button",{type:"button",onClick:()=>C(e),className:"w-full h-8 rounded-lg border border-gray-200 transition-all hover:scale-105 hover:shadow-md",style:{background:e.preview},title:n(e.nameKey)},e.id))}),(0,l.jsxs)("div",{className:"flex gap-1 mb-2",children:[(0,l.jsx)("button",{type:"button",onClick:()=>j("linear"),className:`flex-1 h-[32px] rounded-md text-[11px] font-bold transition-all ${"linear"===u?"bg-purple-100 text-purple-700 border border-purple-300":"bg-gray-50 text-gray-600 border border-gray-200 hover:border-gray-400"}`,children:n("gradientLinearTxt")}),(0,l.jsx)("button",{type:"button",onClick:()=>j("radial"),className:`flex-1 h-[32px] rounded-md text-[11px] font-bold transition-all ${"radial"===u?"bg-purple-100 text-purple-700 border border-purple-300":"bg-gray-50 text-gray-600 border border-gray-200 hover:border-gray-400"}`,children:n("gradientRadialTxt")})]}),"linear"===u&&(0,l.jsxs)("div",{className:"flex flex-col gap-1 mb-2",children:[(0,l.jsx)("span",{className:"text-[10px] text-gray-500",children:n("gradientDirectionTxt")}),(0,l.jsx)("div",{className:"flex gap-1",children:[{key:"horizontal",icon:"â"},{key:"vertical",icon:"â"},{key:"diagonal",icon:"â"}].map(e=>(0,l.jsx)("button",{type:"button",onClick:()=>F(e.key),className:`flex-1 h-[32px] rounded-md text-base transition-all ${b===e.key?"bg-purple-100 text-purple-700 border border-purple-300":"bg-gray-50 text-gray-500 border border-gray-200 hover:border-gray-400"}`,children:e.icon},e.key))})]}),(0,l.jsx)("div",{className:"w-full h-8 rounded-lg border border-gray-200 mb-3",style:{background:"linear"===u?`linear-gradient(${"horizontal"===b?"to right":"vertical"===b?"to bottom":"to bottom right"}, ${$}, ${y})`:`radial-gradient(circle, ${$}, ${y})`}}),(0,l.jsxs)("div",{className:"flex gap-2 mb-3",children:[(0,l.jsxs)("button",{type:"button",onClick:()=>k("start"),className:`flex-1 flex flex-col items-center gap-1 p-2 rounded-lg border transition-all ${"start"===m?"border-purple-400 bg-purple-50":"border-gray-200"}`,children:[(0,l.jsx)("div",{className:"w-6 h-6 rounded-full border border-gray-300",style:{backgroundColor:$}}),(0,l.jsx)("span",{className:"text-[9px] text-gray-500",children:n("gradientStartTxt")})]}),(0,l.jsxs)("button",{type:"button",onClick:()=>k("end"),className:`flex-1 flex flex-col items-center gap-1 p-2 rounded-lg border transition-all ${"end"===m?"border-purple-400 bg-purple-50":"border-gray-200"}`,children:[(0,l.jsx)("div",{className:"w-6 h-6 rounded-full border border-gray-300",style:{backgroundColor:y}}),(0,l.jsx)("span",{className:"text-[9px] text-gray-500",children:n("gradientEndTxt")})]})]}),(0,l.jsx)(d.Z,{canvas:e,color:"start"===m?$:y,onChange:e=>{let t=`rgba(${e.rgb.r},${e.rgb.g},${e.rgb.b},${e.rgb.a})`;"start"===m?(p(t),v(t,y,b,u)):(x(t),v($,t,b,u))},presetColors:c.qr,eyedropperLabel:n("colorEyedropper"),pickingLabel:n("colorEyedropperPicking")})]})};let u=[{key:"small",label:"S",value:.6},{key:"medium",label:"M",value:1},{key:"large",label:"L",value:1.8}];var f=({canvas:e,getBgRect:t,expandedSection:r,onToggleSection:o,setUnsavedChanges:a,t:n})=>{let[$,p]=(0,i.useState)(null),[y,x]=(0,i.useState)("#000000"),[b,w]=(0,i.useState)("#FFFFFF"),[f,m]=(0,i.useState)(1),[k,v]=(0,i.useState)("pattern"),F=(r,l=y,i=b,o=f)=>{let n=t();if(!n)return;let $=(0,g.Ql)(r,l,i,o),d=new Image;d.onload=()=>
1{let t=new s.Pattern({source:d,repeat:"repeat"});n.set("fill",t),e.sendObjectToBack(n),e.renderAll(),a(!0)},d.src=$},j=e=>{p(e),F(e)},C=e=>{m(e),$&&F($,y,b,e)},N=(0,l.jsx)("div",{className:"grid grid-cols-4 gap-2 py-1",children:g.m6.slice(0,8).map(e=>{let t=(0,g.Ql)(e.id,"#111111","#F9F9F9",1);return(0,l.jsx)("button",{type:"button",onClick:t=>{t.stopPropagation(),j(e.id)},className:`w-full h-11 rounded-lg border-2 transition-all hover:scale-105 ${$===e.id?"border-purple-500 shadow-md":"border-gray-200 hover:border-gray-300"}`,style:{backgroundImage:`url("${t}")`,backgroundSize:"18px 18px"},title:e.label},e.id)})});return(0,l.jsxs)(h.Z,{title:n("bgPatternTitle"),sectionKey:"pattern",expandedSection:r,onToggle:o,preview:N,children:[(0,l.jsx)("div",{className:"grid grid-cols-4 gap-2 mb-3",children:g.m6.map(e=>{let t=(0,g.Ql)(e.id,"#111111","#F9F9F9",1);return(0,l.jsx)("button",{type:"button",onClick:()=>j(e.id),className:`w-full h-11 rounded-lg border-2 transition-all hover:scale-105 ${$===e.id?"border-purple-500 shadow-md":"border-gray-200 hover:border-gray-300"}`,style:{backgroundImage:`url("${t}")`,backgroundSize:"18px 18px"},title:e.label},e.id)})}),$&&(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)("div",{className:"flex flex-col gap-1 mb-3",children:[(0,l.jsx)("span",{className:"text-[10px] text-gray-500",children:n("bgPatternScaleTxt")}),(0,l.jsx)("div",{className:"flex gap-1",children:u.map(e=>(0,l.jsx)("button",{type:"button",onClick:()=>C(e.value),className:`flex-1 h-[32px] rounded-md text-[11px] font-bold transition-all ${f===e.value?"bg-purple-100 text-purple-700 border border-purple-300":"bg-gray-50 text-gray-600 border border-gray-200 hover:border-gray-400"}`,children:e.label},e.key))})]}),(0,l.jsxs)("div",{className:"flex gap-2 mb-3",children:[(0,l.jsxs)("button",{type:"button",onClick:()=>v("pattern"),className:`flex-1 flex flex-col items-center gap-1 p-2 rounded-lg border transition-all ${"pattern"===k?"border-purple-400 bg-purple-50":"border-gray-200"}`,children:[(0,l.jsx)("div",{className:"w-6 h-6 rounded-full border border-gray-300",style:{backgroundColor:y}}),(0,l.jsx)("span",{className:"text-[9px] text-gray-500",children:n("bgPatternColorTxt")})]}),(0,l.jsxs)("button",{type:"button",onClick:()=>v("background"),className:`flex-1 flex flex-col items-center gap-1 p-2 rounded-lg border transition-all ${"background"===k?"border-purple-400 bg-purple-50":"border-gray-200"}`,children:[(0,l.jsx)("div",{className:"w-6 h-6 rounded-full border border-gray-300",style:{backgroundColor:b}}),(0,l.jsx)("span",{className:"text-[9px] text-gray-500",children:n("bgPatternBgColorTxt")})]})]}),(0,l.jsx)(d.Z,{canvas:e,color:"pattern"===k?y:b,onChange:e=>{let t=`rgba(${e.rgb.r},${e.rgb.g},${e.rgb.b},${e.rgb.a})`;"pattern"===k?(x(t),$&&F($,t,b,f)):(w(t),$&&F($,y,t,f))},presetColors:c.qr,eyedropperLabel:n("colorEyedropper"),pickingLabel:n("colorEyedropperPicking")})]})]})},m=r(43598);let k={full:"coverBgFull",front:"coverBgFront",back:"coverBgBack",spine:"coverBgSpine"},v=(e,t)=>{let r=e.getWidth(),l=e.getHeight(),i=96*(t.bleedWidth||.125),o=96*(t.bleedHeight||.125),a=96*t.spineWidth,n=(r-2*i-a)/2;return{front:{left:i+n+a,top:0,width:n+i,height:l},back:{left:0,top:0,width:i+n,height:l},spine:{left:i+n,top:0,width:a,height:l},bleedW:i,bleedH:o,trimW:n,trimH:l-2*o,spineW:a,W:r,H:l}};var F=({canvas:e,setUnsavedChanges:t,setActiveMenu:r,coverMode:a,coverGeneralValues:d,coverView:c="front"})=>{let h=(0,o.useTranslations)("projects"),[g,p]=(0,i.useState)("solidColor"),[y,x]=(0,i.useState)("front"===c?"front":"back"===c?"back":"full"),[u,F]=(0,i.useState)("#FFFFFF"),j=a&&d?.spineWidth>0;(0,i.useEffect)(()=>{if(!e)return;let t=e.getObjects().find(e=>e.id===k[y]);t&&"string"==typeof t.fill&&F(t.fill)},[y,e]);let C=(0,i.useCallback)(t=>{let r=e.getWidth(),l=e.getHeight();if("full"===t||"full"!==c||!j||!d)return{left:0,top:0,width:r,height:l};let i=v(e,d);switch(t){case"front":return{left:i.front.left,top:0,width:i.front.width,height:l};case"back":return{left:0,top:0,width:i.back.width,height:l};case"spine":return{left:i.spine.left,top:0,width:i.spine.width,height:l};default:return{left:0,top:0,width:r,height:l}}},[e,j,d,c]),N=(0,i.useCallback)(t=>{if(!e)return;let r="full"===t?[k.front,k.back,k.spine]:[k.full];e.getObjects().filter(e=>
1r.includes(e.id)).forEach(t=>e.remove(t))},[e]),P=(0,i.useCallback)(()=>{if(!e)return null;let t=k[y];N("full"===y?"full":"zone");let r=e.getObjects().find(e=>e.id===t);if(!r){let l=C(y);(r=new s.Rect({...l,fill:"#FFFFFF",selectable:!1,evented:!1,erasable:!1,lockMovementX:!0,lockMovementY:!0,lockRotation:!0,lockScalingX:!0,lockScalingY:!0,hasControls:!1,hasBorders:!1,hoverCursor:"default"})).id=t,r.viewTag="full",r.isCoverBackground=!0,r.bgZone=y,e.add(r)}return e.sendObjectToBack(r),r},[e,y,N,C]),K=e=>{p(e)},T=[{key:"full",labelKey:"bgZoneFullTxt",show:!0},{key:"front",labelKey:"bgZoneFrontTxt",show:!0},{key:"back",labelKey:"bgZoneBackTxt",show:!0},{key:"spine",labelKey:"bgZoneSpineTxt",show:!!j}],S=(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)("div",{className:"flex gap-1 mb-4",children:T.filter(e=>e.show).map(e=>(0,l.jsx)("button",{type:"button",onClick:()=>x(e.key),className:`flex-1 h-[30px] rounded-lg text-[10px] font-bold transition-all ${y===e.key?"bg-purpleOne text-white shadow-md":"bg-gray-100 text-gray-600 hover:bg-gray-200"}`,children:h(e.labelKey)},e.key))}),(0,l.jsx)(b,{canvas:e,currentColor:u,onColorChange:r=>{F(r);let l=P();l&&(l.set("fill",r),e.sendObjectToBack(l),e.renderAll(),t(!0))},expandedSection:g,onToggleSection:K,t:h}),(0,l.jsx)(w,{canvas:e,getBgRect:P,expandedSection:g,onToggleSection:K,setUnsavedChanges:t,t:h}),(0,l.jsx)(f,{canvas:e,getBgRect:P,expandedSection:g,onToggleSection:K,setUnsavedChanges:t,t:h})]}),B=(0,l.jsxs)("button",{type:"button",onClick:()=>{let r=k[y],l=e.getObjects().find(e=>e.id===r);l&&(e.remove(l),e.renderAll(),t(!0)),F("#FFFFFF")},className:"flex flex-shrink-0 w-full h-[42px] min-h-[42px] text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg font-bold text-sm px-4 items-center justify-center transition-colors gap-2",children:[(0,l.jsx)(n(),{src:(0,$.w)("/images/icon_clean_black.svg"),width:16,height:16,className:"object-contain opacity-70",alt:"reset"}),h("bgResetTxt")]});return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(m.Z,{title:h("bgToolTitle"),onClose:()=>r(""),footer:B,children:S}),(0,l.jsx)("div",{className:"flex xl:hidden fixed bottom-[70px] left-0 right-0 z-[3000] flex-col",children:(0,l.jsxs)("div",{className:"relative bg-white/95 backdrop-blur-sm rounded-t-2xl shadow-2xl border-t border-gray-200 max-h-[60vh] flex flex-col",children:[(0,l.jsx)("div",{className:"flex justify-center pt-3 pb-1 flex-shrink-0",children:(0,l.jsx)("div",{className:"w-10 h-1 bg-gray-300 rounded-full"})}),(0,l.jsxs)("div",{className:"flex items-center justify-between px-5 pt-1 pb-2 flex-shrink-0",children:[(0,l.jsx)("span",{className:"text-[15px] font-bold text-[#1A1A1A]",children:h("bgToolTitle")}),(0,l.jsx)("button",{type:"button",onClick:()=>r(""),"aria-label":"Close",className:"w-7 h-7 flex items-center justify-center rounded-full text-[#706D6A] hover:bg-[#F5F3F0]",children:(0,l.jsxs)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.4",strokeLinecap:"round",strokeLinejoin:"round",children:[(0,l.jsx)("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),(0,l.jsx)("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]}),(0,l.jsx)("div",{className:"px-5 pt-1 flex-1 overflow-y-auto",children:S}),(0,l.jsx)("div",{className:"px-5 pb-5 pt-3 border-t border-[#ECEAE7]",children:B})]})})]})}},88953:function(e,t,r){var l=r(85893);t.Z=({title:e,sectionKey:t,expandedSection:r,onToggle:i,children:o,preview:a})=>{let n=r===t;return(0,l.jsxs)("div",{className:"flex flex-col mb-3",children:[(0,l.jsxs)("button",{type:"button",onClick:()=>i(n?"":t),className:"flex items-center justify-between w-full mb-1 cursor-pointer",children:[(0,l.jsx)("span",{className:"text-[10px] font-bold text-[#3F3B36] uppercase tracking-wider",children:e}),(0,l.jsx)("svg",{className:`w-3 h-3 text-[#5C5852] transition-transform duration-200 ${n?"rotate-180":""}`,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,l.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}),n?(0,l.jsx)("div",{className:"flex flex-col mt-1",children:o}):a&&(0,l.jsx)("div",{className:"mt-1",children:a})]})}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.