PageSourceSearch

https://snew.ai/assets/ImageStylesAdminPage-BkVpHD5p.js

js snew.ai collected 2026-10-05 15:08:20 UTC 37,371 bytes, 29 lines download raw bytes

1import{r as c,j as e}from"./index-L9AYrVUw.js";import{s as D}from"./productFunnel-DiJFcMU2.js";import{a as ae,u as j,a8 as be,b as ye}from"./PlanAccessModal-P_W2GThH.js";import{m as ve}from"./ArrowsClockwise.es-CX8V1pij.js";import{s as Ae}from"./CaretUp.es-D42dYZU2.js";import{s as Fe}from"./Copy.es-BkRzHo-W.js";import{m as je}from"./DotsSixVertical.es-CqAy0LdQ.js";import{m as Se}from"./FloppyDisk.es-DCGe340Q.js";import{I as he}from"./Image.es-BLTC_PgL.js";import{m as we}from"./MagicWand.es-CAihBnXI.js";import{n as ke}from"./Plus.es-BeVefyFz.js";import{n as Ee}from"./Trash.es-D2Zs5Rpt.js";import{l as Ce}from"./UploadSimple.es-BDJIa312.js";import{c as de}from"./Warning.es-rGCmkxYb.js";import"./locale-Cctu0V3Y.js";const ze=[{id:"photography",label:"Photography",color:"#4A6FA5"},{id:"lifestyle",label:"Lifestyle",color:"#A07832"},{id:"editorial",label:"Editorial",color:"#7850C8"},{id:"cinematic",label:"Cinematic",color:"#28324A"},{id:"artistic",label:"Artistic",color:"#FF6B6B"}],Be={name:"",category:"photography",descriptionPt:"",descriptionEn:"",promptBase:"",negativePrompt:"",thumbnailUrl:"",icon:"camera",color:"rgba(74,111,165,0.4)",buildPromptTemplate:"",isActive:!0},Z="snew:admin:image-styles",ce={"studio-clean":"Professional product photography on plain seamless white studio backdrop, even diffused soft lighting from above, simple geometric object as subject (cylinder, sphere, or cube in neutral material), clean minimal composition, sharp focus throughout.","soft-minimal":"Minimalist photography on soft cream paper backdrop, gentle natural light from one side creating subtle delicate shadows, simple object placed off-center, neutral beige and cream color palette, premium minimalist aesthetic.","product-hero":"Bold hero product photography of single object centered and dominant in frame, slight angle perspective, dramatic but clean lighting, strong shadow defining product shape, premium commercial photography aesthetic.","natural-outdoor":"Outdoor lifestyle photography, natural sunlight environment, blurred natural backdrop with soft bokeh of foliage or horizon, candid documentary feel, organic composition, warm natural color grading.","cozy-indoor":"Cozy indoor lifestyle photography, warm interior environment with wooden surfaces and soft textiles, warm ambient lighting from window or lamp, lived-in comfort feel, layered cream and beige tones.","daily-moments":"Candid lifestyle photography of authentic daily setting, real-world environment with subtle imperfection, natural unposed composition, slightly off-center framing, warm natural color grading.","magazine-premium":"Premium magazine editorial photography, polished spread composition, sophisticated styling on neutral marble or paper backdrop, refined directional lighting, magazine cover quality.","high-fashion":"High fashion editorial photography setup, dramatic studio lighting with strong directional light, luxury haute couture aesthetic backdrop in deep neutral tones, sophisticated dramatic shadows.",documentary:"Documentary editorial photography aesthetic, photojournalistic feel, grounded realistic environment, natural ambient lighting, authentic storytelling visual narrative, slightly desaturated color grading.","moody-dark":"Moody cinematic photography, deep dark shadows with controlled highlights, low-key lighting, dramatic atmosphere on dark surface, rich blacks, mysterious mood, film noir aesthetic.","golden-hour":"Golden hour cinematic photography, warm sunset lighting with long shadows, atmospheric haze, amber and orange color grading, soft directional sun, cinematic mood.","dramatic-light":"Cinematic photography with strong dramatic directional lighting, high contrast chiaroscuro effect, single shaft of light through dark environment, theatrical mood, film-quality production.","vintage-film":"Vintage film photography aesthetic, analog film grain texture, faded retro color palette with slight cyan or amber shift, nostalgic 1970s or 1980s vibe, slight light leak effect.","pop-bold":"Pop art aesthetic photography, vibrant bold colors with high saturation, graphic composition with contrasting color blocks (cyan, magenta, yellow), modern playful feel, statement visual style.","brutalist-modern":"Brutalist contemporary aesthetic, raw monochromatic palette of greys and concrete tones, strong geometric composition, structured architectural feel, intentionally austere modern editorial."},pe="Vertical 9:16 portrait format. No text, no watermarks, no logos. High quality, sharp, professional photography.",ge=["high-fashion","daily-moments","cozy-indoor","magazine-premium"],Ie=[Z,"app:styles","snew:image-styles"];
1function me(a){return a.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-|-$/g,"")+"-"+Date.now().toString(36)}function De(a){switch(a){case"image/png":return"png";case"image/webp":return"webp";case"image/gif":return"gif";case"image/jpeg":default:return"jpg"}}function Re({style:a,isExpanded:h,isDragOver:ee,isRegenerating:R,isSaving:C,onToggleExpand:T,onDragStart:z,onDragOver:H,onDrop:O,onDragEnd:U,onToggleActive:x,onDuplicate:W,onDelete:te,onUpdate:f,onRegenerateThumbnail:re,onSaveAll:J,thumbnailReferenceProduct:Y,onGenerateAllImages:oe}){var G,L,V,_,M,K,Q;const k=c.useRef(null);c.useRef(null),c.useRef(null);const[se,ue]=c.useState(!1),[fe,ie]=c.useState(""),[u,ne]=c.useState(""),[b,P]=c.useState(!1),[S,$]=c.useState(0),q=r=>{var B;const y=5-(((B=a.styleReferences)==null?void 0:B.length)??0),w=r.filter(m=>m.type.startsWith("image/")).slice(0,y);w.length&&w.forEach((m,A)=>{const N=new FileReader;N.onload=I=>{var t;const E=(t=I.target)==null?void 0:t.result;f({styleReferences:[...a.styleReferences??[],{id:`sref-${Date.now()}-${A}`,dataUrl:E,base64:E.split(",")[1],mimeType:m.type||"image/jpeg"}].slice(-5)})},N.readAsDataURL(m)})};return e.jsxs("div",{className:`style-card${ee?" drag-over":""}`,draggable:!0,onDragStart:z,onDragOver:H,onDrop:O,onDragEnd:U,style:{background:"#FFFFFF",borderRadius:12,border:`1px solid ${h?"#1A1A1A":"#EBEBEB"}`,overflow:"hidden",opacity:a.isActive?1:.5,animation:"fadeIn 0.2s ease"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12,padding:"14px 16px",cursor:"pointer",background:"#FFFFFF",borderRadius:h?"12px 12px 0 0":12},onClick:T,children:[e.jsx("div",{className:"grip-handle",children:e.jsx(je,{size:15,color:"#CCC"})}),e.jsx("div",{style:{width:44,height:44,borderRadius:8,overflow:"hidden",background:a.color??"#E0E0DC",flexShrink:0},children:a.thumbnailUrl?e.jsx("img",{src:a.thumbnailUrl,alt:a.name,style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}}):e.jsx("div",{style:{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:12,fontWeight:600,color:"rgba(0,0,0,0.3)"},children:a.name.split(" ").map(r=>r[0]).join("").slice(0,2).toUpperCase()})}),e.jsxs("div",{style:{flex:1,minWidth:0},children:[e.jsx("p",{style:{fontSize:13,fontWeight:600,color:"#1A1A1A",margin:"0 0 2px",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:a.name}),e.jsx("p",{style:{fontSize:11,color:"#888",margin:0,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:a.descriptionPt||((G=a.promptBase)==null?void 0:G.slice(0,60))||"Sem descrição"})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6,flexShrink:0},onClick:r=>r.stopPropagation(),children:[e.jsx("button",{className:"toggle",onClick:x,style:{background:a.isActive?"#1A1A1A":"#E0E0E0"},title:a.isActive?"Desativar":"Ativar",children:e.jsx("div",{className:"knob",style:{left:a.isActive?19:3}})}),e.jsx("button",{className:"btn-ghost",style:{padding:"4px 8px"},onClick:W,title:"Duplicar",children:e.jsx(Fe,{size:13})}),e.jsx("button",{className:"btn-danger",style:{padding:"4px 8px"},onClick:te,title:"Excluir",children:e.jsx(Ee,{size:13})})]}),e.jsx("div",{style:{color:"#CCC",marginLeft:2},children:h?e.jsx(Ae,{size:14}):e.jsx(ye,{size:14})})]}),h&&e.jsxs("div",{style:{padding:"0 20px 20px",display:"flex",flexDirection:"column",gap:0},children:[e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:20,padding:"20px 0",borderBottom:"1px solid #F0F0EE",alignItems:"start"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[e.jsx("label",{style:{fontSize:10,fontWeight:700,color:"#AAA",textTransform:"uppercase",letterSpacing:"0.07em"},children:"Imagens de preview (até 4)"}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8},children:[0,1,2,3].map(r=>{var B;const y=r===0?a.thumbnailUrl||null:((B=a.hoverImages)==null?void 0:B[r-1])??null,w=r===0;return e.jsx("div",{style:{position:"relative",aspectRatio:"3/4",borderRadius:10,overflow:"hidden",background:"#F0EEE8",border:"1.5px dashed #D0CEC8"},children:y?e.jsxs(e.Fragment,{children:[e.jsx("img",{src:y,alt:"",style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}}),e.jsx("button",{onClick:m=>{if(m.stopPropagation(),w)f({thumbnailUrl:""});else{const A=[...a.hoverImages??[]];A.splice(r-1,1),f({hoverImages:A})}},style:{position:"absolute",top:4,right:4,width:20,height:20,borderRadius:"50%",background:"rgba(0,0,0,0.6)",border:"none",color:"#FFF",fontSize:10,
1cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center"},children:"×"}),w&&e.jsx("div",{style:{position:"absolute",bottom:4,left:4,fontSize:9,fontWeight:600,color:"#FFF",background:"rgba(0,0,0,0.5)",padding:"2px 6px",borderRadius:4,textTransform:"uppercase",letterSpacing:"0.04em"},children:"Principal"})]}):e.jsxs("div",{style:{width:"100%",height:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:10,padding:"12px 8px",boxSizing:"border-box"},children:[e.jsx("span",{style:{fontSize:10,color:"#BBB",fontWeight:600,textTransform:"uppercase",letterSpacing:"0.06em"},children:w?"Principal":`Hover ${r}`}),e.jsxs("button",{onClick:m=>{m.stopPropagation();const A=document.createElement("input");A.type="file",A.accept="image/*",A.onchange=async N=>{var E;const I=(E=N.target.files)==null?void 0:E[0];if(I)try{const t=`style-thumbs/${a.id}-hover${r}-${Date.now()}.${I.name.split(".").pop()||"png"}`,{error:o}=await D.storage.from("brand-references").upload(t,I,{upsert:!0});if(o)throw o;const{data:n}=D.storage.from("brand-references").getPublicUrl(t);if(w)f({thumbnailUrl:n.publicUrl});else{const i=[...a.hoverImages??[]];for(;i.length<r;)i.push("");i[r-1]=n.publicUrl,f({hoverImages:i.filter(Boolean)})}j.success("Imagem enviada!")}catch(t){j.error("Erro: "+(t.message||""))}},A.click()},style:{width:"100%",padding:"6px 0",borderRadius:7,border:"1px solid #D8D6D0",background:"#FFFFFF",fontSize:11,fontWeight:500,color:"#555",cursor:"pointer",fontFamily:"inherit",display:"flex",alignItems:"center",justifyContent:"center",gap:4,transition:"all 0.12s"},onMouseEnter:m=>{m.currentTarget.style.background="#F0EEE8",m.currentTarget.style.borderColor="#BBB"},onMouseLeave:m=>{m.currentTarget.style.background="#FFFFFF",m.currentTarget.style.borderColor="#D8D6D0"},children:[e.jsx(Ce,{size:11}),"UploadSimple"]}),e.jsxs("button",{className:"snew-main-action",onClick:m=>{m.stopPropagation(),re(void 0,void 0,r)},disabled:R,style:{width:"100%",padding:"6px 0",borderRadius:7,border:"none",fontSize:11,fontWeight:500,cursor:R?"not-allowed":"pointer",fontFamily:"inherit",display:"flex",alignItems:"center",justifyContent:"center",gap:4,transition:"background 0.12s"},children:[e.jsx(ae,{size:11}),R?"Gerando...":"Gerar"]})]})},r)})})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:16},children:[e.jsx("label",{style:{fontSize:10,fontWeight:700,color:"#AAA",textTransform:"uppercase",letterSpacing:"0.07em"},children:"Identidade"}),e.jsxs("div",{children:[e.jsx("label",{style:{display:"block",fontSize:10,fontWeight:600,color:"#BBB",textTransform:"uppercase",letterSpacing:"0.06em",marginBottom:4},children:"Nome"}),e.jsx("input",{value:a.name,onChange:r=>f({name:r.target.value}),style:{width:"100%",padding:"9px 12px",borderRadius:8,border:"1px solid #E8E8E4",fontSize:14,fontWeight:500,color:"#1A1A1A",fontFamily:"inherit",outline:"none",background:"#FAFAF8",boxSizing:"border-box",transition:"border-color 0.12s"},onFocus:r=>r.target.style.borderColor="#1A1A1A",onBlur:r=>r.target.style.borderColor="#E8E8E4"})]}),e.jsxs("div",{children:[e.jsx("label",{style:{display:"block",fontSize:10,fontWeight:600,color:"#BBB",textTransform:"uppercase",letterSpacing:"0.06em",marginBottom:4},children:"Descrição"}),e.jsx("textarea",{value:a.descriptionPt,onChange:r=>f({descriptionPt:r.target.value}),placeholder:"Ex: Produto limpo, fundo neutro, luz uniforme",rows:4,style:{width:"100%",padding:"9px 12px",borderRadius:8,border:"1px solid #E8E8E4",fontSize:13,color:"#1A1A1A",fontFamily:"inherit",outline:"none",background:"#FAFAF8",boxSizing:"border-box",resize:"none",lineHeight:1.6,transition:"border-color 0.12s"},onFocus:r=>r.target.style.borderColor="#1A1A1A",onBlur:r=>r.target.style.borderColor="#E8E8E4"})]}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:{fontSize:10,fontWeight:700,color:"#AAA",textTransform:"uppercase",letterSpacing:"0.06em",margin:"0 0 10px"},children:"Gerar imagens de preview"}),e.jsx("p",{style:{fontSize:12,color:"#999",margin:"0 0 12px",lineHeight:1.5},children:"Descreva o produto ou cena e geraremos 4 variações deste estilo automaticamente."}),e.jsx("textarea",{value:u,onChange:r=>ne(r.target.value),placeholder:"Ex: tênis branco minimalista, perfume âmbar, body de bebê neutro...",rows:3,style:{width:"100%",padding:"10px 12px",borderRadius:10,border:"1px solid #E0DDD8",background:"#FAFAF8",fontSize:13,color:"#1A1A1A",fontFamily:"inherit",resize:"none",outline:"none",lineHeight:1.5,boxSizing:"border-box",transition:"border-color 0.15s"},onFocus:r=>r.target.style.borderColor="#AAA",onBlur:r=>r.target.style.borderColor="#E0DDD8"}),b&&e.jsxs("div",{style:{margin:"10px 0",padding:"10px 14px",borderRadius:10,background:"#F7F6F3",border:"1px solid #E8E6E0"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8},children:[e.jsxs("span",{style:{fontSize:12,color:"#555",fontWeight:500},children:["Gerando imagem ",S," de 4..."]}),e.jsxs("span",{style:{fontSize:11,color:"#AAA"},children:[Math.round(S/4*100),"%"]})]}),e.jsx("div",{style:{height:4,borderRadius:99,background:"#E0DDD8",overflow:"hidden"},children:e.jsx("div",{style:{height:"100%",borderRadius:99,background:"#1A1A1A",width:`${S/4*100}%`,transition:"width 0.4s ease"}})})]}),e.jsx("button",{onClick:async()=>
1{if(!(!u.trim()||b)){P(!0),$(0);try{await oe(u.trim(),r=>$(r))}finally{P(!1),$(0)}}},disabled:!u.trim()||b,style:{width:"100%",marginTop:10,padding:"10px 0",borderRadius:10,border:"none",background:!u.trim()||b?"#E0DDD8":"#1A1A1A",color:!u.trim()||b?"#AAA":"#FFF",fontSize:13,fontWeight:600,cursor:!u.trim()||b?"default":"pointer",fontFamily:"inherit",display:"flex",alignItems:"center",justifyContent:"center",gap:7,transition:"all 0.15s"},children:b?e.jsxs(e.Fragment,{children:[e.jsx("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",style:{animation:"spin 1s linear infinite"},children:e.jsx("path",{d:"M21 12a9 9 0 1 1-6.219-8.56"})}),"Gerando ",S,"/4..."]}):e.jsxs(e.Fragment,{children:[e.jsx(ae,{size:13}),"Gerar 4 imagens"]})})]})]})]}),e.jsxs("div",{style:{padding:"20px 0",borderBottom:"1px solid #F0F0EE"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"baseline",justifyContent:"space-between",marginBottom:8},children:[e.jsx("label",{style:{fontSize:10,fontWeight:700,color:"#AAA",textTransform:"uppercase",letterSpacing:"0.07em"},children:"Orientações do estilo"}),e.jsx("span",{style:{fontSize:11,color:"#CCC"},children:"Visual · iluminação · composição · atmosfera"})]}),e.jsx("textarea",{value:a.promptBase,onChange:r=>f({promptBase:r.target.value}),placeholder:"Ex: Fundo branco puro, iluminação três pontos suave, produto nítido, sem reflexos no fundo...",rows:5,style:{width:"100%",padding:"11px 14px",borderRadius:8,border:"1px solid #E8E8E4",fontSize:12,color:"#1A1A1A",lineHeight:1.7,fontFamily:"'Geist Mono', 'SF Mono', 'Fira Code', monospace",outline:"none",background:"#FAFAF8",resize:"vertical",boxSizing:"border-box",transition:"border-color 0.12s",minHeight:110},onFocus:r=>r.target.style.borderColor="#1A1A1A",onBlur:r=>r.target.style.borderColor="#E8E8E4"}),e.jsx("p",{style:{fontSize:11,color:"#CCC",margin:"4px 0 0"},children:"Estas orientações são injetadas em todos os prompts gerados com este estilo."})]}),e.jsxs("div",{style:{padding:"20px 0",borderBottom:"1px solid #F0F0EE"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:8},children:[e.jsxs("label",{style:{fontSize:10,fontWeight:700,color:"#AAA",textTransform:"uppercase",letterSpacing:"0.07em"},children:["Referências visuais do estilo",(((L=a.styleReferences)==null?void 0:L.length)??0)>0&&e.jsxs("span",{style:{color:"#BBB",fontWeight:400,marginLeft:6},children:[a.styleReferences.length,"/5"]})]}),(((V=a.styleReferences)==null?void 0:V.length)??0)>0&&e.jsx("button",{onClick:()=>f({styleReferences:[]}),style:{fontSize:11,color:"#BBB",background:"none",border:"none",cursor:"pointer",fontFamily:"inherit",padding:0},onMouseEnter:r=>r.currentTarget.style.color="#E53E3E",onMouseLeave:r=>r.currentTarget.style.color="#BBB",children:"Limpar tudo"})]}),(((_=a.styleReferences)==null?void 0:_.length)??0)>0&&e.jsxs("div",{style:{display:"flex",gap:8,flexWrap:"wrap",marginBottom:10},children:[a.styleReferences.map(r=>e.jsxs("div",{style:{position:"relative"},children:[e.jsx("img",{src:r.dataUrl,alt:"",style:{width:56,height:56,borderRadius:8,objectFit:"cover",display:"block",border:"1px solid #E8E8E4"}}),e.jsx("button",{onClick:()=>f({styleReferences:a.styleReferences.filter(y=>y.id!==r.id)}),style:{position:"absolute",top:-5,right:-5,width:18,height:18,borderRadius:"50%",background:"#EF4444",border:"1.5px solid #FFF",color:"#FFF",cursor:"pointer",fontSize:9,display:"flex",alignItems:"center",justifyContent:"center",padding:0,lineHeight:1}})]},r.id)),(((M=a.styleReferences)==null?void 0:M.length)??0)<5&&e.jsx("button",{onClick:()=>{var r;return(r=k.current)==null?void 0:r.click()},style:{width:56,height:56,borderRadius:8,border:"1.5px dashed #D0D0CC",background:"#FAFAFA",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",color:"#BBB",fontSize:20,lineHeight:1,transition:"all 0.12s"},onMouseEnter:r=>{r.currentTarget.style.borderColor="#1A1A1A",r.currentTarget.style.color="#666"},onMouseLeave:r=>{r.currentTarget.style.borderColor="#D0D0CC",r.currentTarget.style.color="#BBB"},children:"+"})]}),(((K=a.styleReferences)==null?void 0:K.length)??0)<5&&(((Q=a.styleReferences)==null?void 0:Q.length)??0)===0&&e.jsxs("div",{onDragOver:r=>{r.preventDefault(),r.currentTarget.style.borderColor="#1A1A1A",r.currentTarget.style.background="#F5F5F3"},onDragLeave:r=>{r.currentTarget.style.borderColor="#E0E0DC",r.currentTarget.style.background="#FAFAF8"},onDrop:r=>{r.preventDefault(),r.currentTarget.style.borderColor="#E0E0DC",r.currentTarget.style.background="#FAFAF8",q(Array.from(r.dataTransfer.files))},onClick:()=>{var r;return(r=k.current)==null?void 0:r.click()},style:{border:"1.5px dashed #E0E0DC",borderRadius:10,padding:"16px 20px",display:"flex",alignItems:"center",gap:12,cursor:"pointer",transition:"all 0.12s",background:"#FAFAF8"},children:[e.jsx("div",{style:{width:36,height:36,borderRadius:9,background:"#EEEDE9",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:e.jsx(he,{size:16,style:{color:"#AAA"}})}),e.jsxs("div",{children:[e.jsx("p",{style:{fontSize:12,fontWeight:500,color:"#555",margin:"0 0 2px"},children:"Arraste ou clique para adicionar referências"}),e.jsx("p",{style:{fontSize:11,color:"#BBB",margin:0},children:"JPG, PNG — até 5 imagens. A IA seguirá este visual ao gerar."})]})]}),e.jsx("input",{ref:k,type:"file",accept:"image/*",multiple:!0,style:{display:"none"},onChange:r=>{q(Array.from(r.target.files??[])),r.target.value=""}})]}),e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"flex-end",gap:8,paddingTop:16},children:e.jsx("button",{className:"snew-main-action",onClick:J,disabled:C,style:{display:"flex",alignItems:"center",gap:6,padding:"8px 20px",borderRadius:8,border:"none",fontSize:12,fontWeight:600,cursor:C?"not-allowed":"pointer",fontFamily:"inherit",transition:"background 0.12s",letterSpacing:"0.01em",opacity:C?.6:1},children:C?"Salvando...":"Salvar"})})]})]})}function Ve(){const[a,h]=c.useState([]),[ee,R]=c.useState(null),[C,T]=c.useState(null),[z,H]=c.useState(!1),[O,U]=c.useState(!1),[x,W]=c.useState(null),[te,f]=c.useState(null),[re,J]=c.useState(!0),[Y,oe]=c.useState(""),[k,se]=c.useState("all"),[ue,fe]=c.useState(null),[ie,u]=c.useState(!1),[ne,b]=c.useState(null),[P,S]=c.useState(null),$=c.useCallback(t=>{const o=i=>{var p;const{buildPromptTemplate:l,styleReferences:d,...s}=i;return{...s,thumbnailUrl:(p=s.thumbnailUrl)!=null&&p.startsWith("data:")?"":s.thumbnailUrl,hoverImages:(s.hoverImages??[]).filter(g=>g&&!g.startsWith("data:")),styleReferences:d==null?void 0:d.map(({base64:g,...F})=>F)}},n=t.map(o);try{localStorage.setItem(Z,JSON.stringify(n)),localStorage.setItem("app:styles",JSON.stringify(t.filter(i=>i.isActive).map(o))),localStorage.setItem("snew:image-styles",JSON.stringify(t.filter(i=>i.isActive).map(o)))}catch{}},[]),q=c.useCallback(()=>{for(const t of Ie)try{const o=localStorage.getItem(t);if(!o)continue;const n=JSON.parse(o);if(!Array.isArray(n)||n.length===0)continue;return n.reduce((i,l)=>(l!=null&&l.id&&(i[l.id]=l),i),{})}catch{}return{}},[]),G=c.useCallback(async(t,o,n)=>{try{const i=await fetch(t);if(!i.ok)throw new Error(`Falha ao baixar imagem gerada (${i.status})`);const l=await i.blob(),d=De(l.type),s=`style-thumbs/${o}-${n}-${Date.now()}.${d}`,{error:p}=await D.storage.from("brand-references").upload(s,l,{contentType:l.type||"image/jpeg",upsert:!0});if(p)throw p;const{data:g}=D.storage.from("brand-references").getPublicUrl(s);return g.publicUrl}catch(i){return console.error("Erro ao persistir imagem gerada:",i),t}},[]);c.useEffect(()=>{L()},[]);const L=async()=>{J(!0);try{const t=q(),{data:o,error:n}=await D.from("image_styles").select("*").order("sort_order",{ascending:!0});if(!n&&o&&o.length>0)h(o.map(i=>V(i,t)));else{const i=localStorage.getItem(Z);if(i)h(JSON.parse(i));else{const l=localStorage.getItem("app:styles");if(l){const d=JSON.parse(l);h(d.map((s,p)=>({...s,isActive:!0,sortOrder:p})))}}}}catch{const t=localStorage.getItem(Z);t&&h(JSON.parse(t))}finally{J(!1)}};function V(t,o={}){const n=o[t.id]??{};return{id:t.id,name:n.name??t.name,category:n.category??t.category,descriptionPt:n.descriptionPt??t.description_pt??"",descriptionEn:n.descriptionEn??t.description_en??"",promptBase:n.promptBase??t.prompt_base??"",negativePrompt:n.negativePrompt??t.negative_prompt??"",thumbnailUrl:n.thumbnailUrl??t.thumbnail_url??"",hoverImages:Array.isArray(n.hoverImages)&&n.hoverImages.filter(
1Boolean).length>0?n.hoverImages.filter(Boolean):Array.isArray(t.hover_images)?t.hover_images.filter(Boolean):[],icon:n.icon??t.icon??"camera",color:n.color??t.color??"rgba(74,111,165,0.4)",buildPromptTemplate:n.buildPromptTemplate??t.build_prompt_template??"",isActive:n.isActive??t.is_active??!0,sortOrder:n.sortOrder??t.sort_order??0,createdAt:n.createdAt??t.created_at,updatedAt:n.updatedAt??t.updated_at,styleReferences:n.styleReferences}}const _=async()=>{H(!0);try{$(a);const t=a.map((o,n)=>{var i;return{id:o.id,name:o.name,category:o.category,prompt_base:o.promptBase,negative_prompt:o.negativePrompt,thumbnail_url:o.thumbnailUrl,hover_images:((i=o.hoverImages)==null?void 0:i.filter(Boolean))??[],icon:o.icon,color:o.color,build_prompt_template:o.buildPromptTemplate,is_active:o.isActive,sort_order:n,updated_at:new Date().toISOString()}});await be({resource:"table",action:"upsert",table:"image_styles",rows:t,onConflict:"id"}),u(!1),j.success("Presets salvos e sincronizados com o Studio.")}catch(t){j.error("Erro ao salvar: "+((t==null?void 0:t.message)??"tente novamente."))}finally{H(!1)}},M=async(t,o,n,i="main")=>{var g;const l=ce[t.id],d=l||`${t.name} photography style. ${t.promptBase}`,s=[];o!=null&&o.trim()&&s.push(o.trim()+"."),s.push(d),n!=null&&n.trim()&&s.push(n.trim()),s.push(pe);const p=s.join(" ");try{const{data:F,error:v}=await D.functions.invoke("gemini-generate",{body:{prompt:p,model:"gemini-3.1-flash-image-preview",aspectRatio:"4:3",negativePrompt:"text, letters, words, typography, text overlay, watermark, logo, signature, vertical text, diagonal text, headline text, cartoon, illustration, 3d render, vector art, neon, glitter, sparkle, chrome, glass, marble, glossy, metallic, "+(t.negativePrompt??""),personGeneration:ge.includes(t.id)?"allow_adult":"dont_allow",...(g=t.styleReferences)!=null&&g.length?{images:t.styleReferences.map(X=>X.base64)}:{}}});return v||!(F!=null&&F.imageUrl)?null:await G(F.imageUrl,t.id,i)}catch{return null}},K=async(t=!1)=>{const o=t?a.filter(i=>!i.thumbnailUrl):a;if(o.length===0){j.info("Todos os presets já têm thumbnail.");return}U(!0);const n=[...a];for(let i=0;i<o.length;i++){const l=o[i];W({current:i+1,total:o.length,styleName:l.name});const d=await M(l,void 0,void 0,"main");if(d){const s=n.findIndex(p=>p.id===l.id);s!==-1&&(n[s]={...n[s],thumbnailUrl:d}),h([...n])}await new Promise(s=>setTimeout(s,800))}h(n),u(!0),U(!1),W(null),j.success(`${o.length} thumbnail${o.length>1?"s":""} gerada${o.length>1?"s":""}! Salve para persistir.`)},Q=async(t,o,n,i=0)=>{const l=a.find(s=>s.id===t);if(!l)return;f(t);const d=await M(l,o,n,i===0?"main":`hover-${i}`);if(d){if(i===0)y(t,{thumbnailUrl:d});else{const s=a.find(g=>g.id===t),p=[...(s==null?void 0:s.hoverImages)??[]];for(;p.length<i;)p.push("");p[i-1]=d,y(t,{hoverImages:p.filter(Boolean)})}j.success(i===0?"Thumbnail regenerada!":`Hover ${i} gerada!`)}else j.error("Falha ao gerar imagem.");f(null)},r=()=>{const t={...Be,id:me("novo-estilo"),name:"Novo preset",sortOrder:a.length};h(o=>[...o,t]),R(t.id),T(t.id),u(!0)},y=(t,o)=>{h(n=>{const i=n.map(l=>l.id===t?{...l,...o}:l);return $(i),i}),u(!0)},w=t=>{confirm("Deletar este preset? Esta ação não pode ser desfeita.")&&(h(o=>o.filter(n=>n.id!==t)),ee===t&&R(null),C===t&&T(null),u(!0))},B=t=>{const o={...t,id:me(t.name+"-copy"),name:t.name+" (cópia)",sortOrder:a.length};h(n=>[...n,o]),T(o.id),u(!0),j.success("Preset duplicado.")},m=t=>{var o;y(t,{isActive:!((o=a.find(n=>n.id===t))!=null&&o.isActive)})},A=t=>S(t),N=(t,o)=>{t.preventDefault(),b(o)},I=t=>{if(!P||P===t){S(null),b(null);return}const o=a.findIndex(d=>d.id===P),n=a.findIndex(d=>d.id===t),i=[...a],[l]=i.splice(o,1);i.splice(n,0,l),h(i.map((d,s)=>({...d,sortOrder:s}))),S(null),b(null),u(!0)},E=a.filter(t=>{const o=!Y||t.name.toLowerCase().includes(Y.toLowerCase()),n=k==="all"||t.category===k;return o&&n});return re?e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100vh",background:"#F7F6F4"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:12}
1,children:[e.jsx("div",{style:{width:32,height:32,border:"2px solid #E0E0E0",borderTopColor:"#1A1A1A",borderRadius:"50%",animation:"spin 0.75s linear infinite"}}),e.jsx("span",{style:{fontSize:13,color:"#999",fontFamily:"'DM Sans', sans-serif"},children:"Carregando presets..."})]}),e.jsx("style",{children:"@keyframes spin { to { transform: rotate(360deg); } }"})]}):e.jsxs("div",{style:{minHeight:"100vh",background:"#F7F6F4",fontFamily:"'DM Sans', 'Inter', sans-serif"},children:[e.jsx("style",{children:`
2        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');
3        @keyframes spin { to { transform: rotate(360deg); } }
4        @keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
5        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
6        * { box-sizing: border-box; }
7        textarea, input { font-family: inherit; }
8        textarea:focus, input:focus, select:focus { outline: none; }
9        .style-card { transition: box-shadow 0.15s, transform 0.1s; }
10        .style-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
11        .style-card.drag-over { transform: scale(1.01); box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
12        .grip-handle { opacity: 0; transition: opacity 0.1s; cursor: grab; }
13        .style-card:hover .grip-handle { opacity: 1; }
14        .tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 500; letter-spacing: 0.03em; }
15        .field-label { font-size: 10px; font-weight: 600; color: #AAA; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; display: block; }
16        .field-input { width: 100%; padding: 9px 12px; border: 1px solid #E8E8E8; border-radius: 8px; background: #FAFAFA; font-size: 13px; color: #1A1A1A; transition: border-color 0.1s; }
17        .field-input:focus { border-color: #1A1A1A; background: #FFFFFF; }
18        .field-textarea { width: 100%; padding: 10px 12px; border: 1px solid #E8E8E8; border-radius: 8px; background: #FAFAFA; font-size: 12px; color: #1A1A1A; resize: vertical; line-height: 1.6; font-family: 'DM Mono', monospace; transition: border-color 0.1s; }
19        .field-textarea:focus { border-color: #1A1A1A; background: #FFFFFF; }
20        .btn-ghost { background: transparent; border: 1px solid #E8E8E8; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; color: #666; font-family: inherit; transition: all 0.1s; }
21        .btn-ghost:hover { background: #F0F0F0; color: #1A1A1A; border-color: #D0D0D0; }
22        .btn-primary { background: #1A1A1A; border: none; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; font-size: 13px; color: #FFFFFF; font-family: inherit; font-weight: 500; transition: all 0.1s; }
23        .btn-primary:hover { background: #333; }
24        .btn-primary:disabled { background: #CCC; cursor: not-allowed; }
25        .btn-danger { background: transparent; border: 1px solid #FECACA; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; font-size: 11px; color: #EF4444; font-family: inherit; transition: all 0.1s; }
26        .btn-danger:hover { background: #FEF2F2; }
27        .toggle { width: 36px; height: 20px; border-radius: 99px; cursor: pointer; border: none; position: relative; transition: background 0.2s; flex-shrink: 0; }
28        .toggle .knob { width: 14px; height: 14px; border-radius: 50%; background: #fff; position: absolute; top: 3px; transition: left 0.2s; }
29      `}),e.jsxs("div",{style:{position:"sticky",top:0,zIndex:100,background:"rgba(247,246,244,0.92)",backdropFilter:"blur(12px)",borderBottom:"1px solid #EBEBEB",padding:"0 32px",height:56,display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("div",{style:{width:28,height:28,borderRadius:7,background:"#1A1A1A",dis
29play:"flex",alignItems:"center",justifyContent:"center"},children:e.jsx(ae,{size:14,color:"#FFF"})}),e.jsx("span",{style:{fontSize:14,fontWeight:600,color:"#1A1A1A"},children:"Presets de Geração"}),e.jsx("span",{style:{fontSize:11,color:"#AAA"},children:"admin"})]}),e.jsx("div",{style:{height:16,width:1,background:"#E0E0E0"}}),e.jsxs("span",{style:{fontSize:12,color:"#999"},children:[a.length," presets · ",a.filter(t=>t.isActive).length," ativos"]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[ie&&e.jsxs("span",{style:{fontSize:11,color:"#F59E0B",display:"flex",alignItems:"center",gap:4},children:[e.jsx(de,{size:12}),"alterações não salvas"]}),e.jsxs("button",{className:"btn-ghost",onClick:L,children:[e.jsx(ve,{size:13}),"Recarregar"]}),e.jsx("button",{className:"btn-ghost",onClick:()=>K(!0),disabled:O,title:"Gerar thumbnails apenas para presets sem imagem",children:O?e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{width:11,height:11,border:"1.5px solid #888",borderTopColor:"#333",borderRadius:"50%",animation:"spin 0.75s linear infinite"}})," ",x?`${x.current}/${x.total} · ${x.styleName.slice(0,14)}...`:"Gerando..."]}):e.jsxs(e.Fragment,{children:[e.jsx(we,{size:13})," Gerar thumbnails"]})}),e.jsx("button",{className:"btn-primary",onClick:_,disabled:z,children:z?e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{width:12,height:12,border:"1.5px solid rgba(255,255,255,0.3)",borderTopColor:"#fff",borderRadius:"50%",animation:"spin 0.75s linear infinite"}})," Salvando..."]}):e.jsxs(e.Fragment,{children:[e.jsx(Se,{size:13})," Salvar tudo"]})})]})]}),O&&x&&e.jsxs("div",{style:{position:"fixed",top:56,left:0,right:0,zIndex:90,background:"#1A1A1A",padding:"10px 32px",display:"flex",alignItems:"center",gap:12},children:[e.jsx("div",{style:{width:14,height:14,border:"2px solid rgba(255,255,255,0.2)",borderTopColor:"#FFF",borderRadius:"50%",animation:"spin 0.75s linear infinite",flexShrink:0}}),e.jsx("div",{style:{flex:1},children:e.jsx("div",{style:{height:3,background:"rgba(255,255,255,0.1)",borderRadius:99,overflow:"hidden"},children:e.jsx("div",{style:{height:"100%",background:"#FFFFFF",borderRadius:99,width:`${x.current/x.total*100}%`,transition:"width 0.3s ease"}})})}),e.jsxs("span",{style:{fontSize:12,color:"hsl(var(--color-modal-text-dim))",whiteSpace:"nowrap"},children:[x.current,"/",x.total," · ",e.jsx("strong",{style:{color:"#FFF"},children:x.styleName})]}),e.jsx("button",{onClick:()=>{U(!1),W(null)},style:{background:"none",border:"none",cursor:"pointer",color:"hsl(var(--color-modal-text-mute))",fontSize:12,fontFamily:"inherit"},children:"cancelar"})]}),e.jsxs("div",{style:{maxWidth:900,margin:"0 auto",padding:"32px 24px"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10,marginBottom:24},children:[e.jsx("input",{className:"field-input",placeholder:"Buscar preset...",value:Y,onChange:t=>oe(t.target.value),style:{maxWidth:220}}),e.jsx("div",{style:{display:"flex",gap:4},children:[{id:"all",label:"Todos"},...ze].map(t=>e.jsx("button",{onClick:()=>se(t.id),style:{padding:"6px 12px",borderRadius:99,border:"none",cursor:"pointer",background:k===t.id?"#1A1A1A":"#EBEBEB",color:k===t.id?"#FFF":"#666",fontSize:11,fontWeight:500,transition:"all 0.1s"},children:t.id==="all"?"Todos":t.label},t.id))}),e.jsx("div",{style:{flex:1}}),e.jsxs("button",{className:"btn-primary",onClick:r,children:[e.jsx(ke,{size:14}),"Novo preset"]})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[E.length===0&&e.jsxs("div",{style:{textAlign:"center",padding:"48px 0",color:"#BBB"},children:[e.jsx(he,{size:32,style:{marginBottom:12,opacity:.4}}),e.jsx("p",{style:{margin:0,fontSize:13},children:"Nenhum preset encontrado."})]}),E.map(t=>{var n;const o=C===t.id;return e.jsx(Re,{style:t,isExpanded:o,isDragOver:ne===t.id,isRegenerating:te===t.id,isSaving:z,onToggleExpand:()=>T(o?null:t.id),onDragStart:()=>A(t.id),onDragOver:i=>N(i,t.id),onDrop:()=>I(t.id),onDragEnd:()=>{S(null),b(null)},onToggleActive:()=>m(t.id),onDuplicate:()=>B(t),onDelete:()=>w(t.id),onUpdate:i=>y(t.id,i),onRegenerateThumbnail:(i,l,d)=>Q(t.id,i,l,d),onSaveAll:_,thumbnailReferenceProduct:((n=ce[t.id])==null?void 0:n.slice(0,40))||t.name,onGenerateAllImages:async(i,l)=>{const d=[i,`${i}, different angle`,`${i}, close up detail`,`${i}, lifestyle context`],s=[];for(let g=0;g<4;g++){l(g+1);const F=`${d[g]}. ${t.promptBase??""} ${pe}`;try{const{data:v,error:X}=await D.functions.invoke("gemini-generate",{body:{prompt:F,model:"gemini-3.1-flash-image-preview",aspectRatio:"4:3",negativePrompt:"text, letters, words, typography, text overlay, watermark, logo, signature, vertical text, diagonal text, headline text, cartoon, illustration, 3d render, vector art, neon, glitter, sparkle, chrome, glass, marble, glossy, metallic",personGeneration:ge.includes(t.id)?"allow_adult":"dont_allow"}}
29);if(X)throw X;const le=(v==null?void 0:v.imageUrl)??(v==null?void 0:v.url)??null;if(le){const xe=await G(le,t.id,g===0?"main":`hover-${g}`);s.push(xe||"")}else s.push("")}catch(v){console.error(`Erro ao gerar imagem ${g+1}:`,v),s.push("")}await new Promise(v=>setTimeout(v,600))}const p=s.filter(Boolean);if(p.length>0){const[g,...F]=p;y(t.id,{thumbnailUrl:g,hoverImages:F.length?F:void 0}),u(!0),j.success(`${p.length} imagens geradas!`)}else j.error("Falha ao gerar imagens.")}},t.id)})]}),ie&&e.jsxs("div",{style:{position:"fixed",bottom:24,left:"50%",transform:"translateX(-50%)",display:"flex",alignItems:"center",gap:10,background:"#1A1A1A",borderRadius:12,padding:"10px 20px",boxShadow:"0 8px 32px rgba(0,0,0,0.2)",animation:"slideDown 0.2s ease"},children:[e.jsx(de,{size:14,color:"#F59E0B"}),e.jsx("span",{style:{fontSize:12,color:"hsl(var(--color-modal-text))"},children:"Alterações não salvas"}),e.jsx("button",{className:"btn-primary",onClick:_,disabled:z,style:{padding:"6px 14px",fontSize:12},children:z?"Salvando...":"Salvar agora"})]})]})]})}export{Ve as default};

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.