1import{E as e,Q as g,d as M,G as B,Y as k,B as b,S as P}from"./index-DLBW2Cqq.js";import{I as C,s as _,a as H}from"./Image.es-CER3wIP7.js";import{m as y}from"./SpinnerGap.es-CDq4NjDJ.js";import{F,u as Y,e as O}from"./billing-DVIL18mS.js";import{u as w}from"./auth-middleware-BHI1UjGn.js";import{B as J}from"./badge-C3KkRs6T.js";import{b as Q,m as K}from"./auth-client-C0kRgu_Q.js";import{t as X,i as Z}from"./quiver-9VmCSW5f.js";function ee(){return{mode:"imagine",prompt:"",uploadedImage:null,creations:[],viewMode:"list",isLoading:!1,error:null,draftRequest:null}}const i=Q(ee());function f(r){i.set({...i.get(),mode:r})}function S(r){i.set({...i.get(),prompt:r})}function N(r){const t=i.get();i.set({...t,uploadedImage:r,mode:r?"vectorize":t.mode})}function re(r){i.set({...i.get(),draftRequest:r,isLoading:!0,error:null})}function se(r){const t=i.get();i.set({...t,creations:[r,...t.creations],prompt:t.mode==="imagine"?"":t.prompt,isLoading:!1,draftRequest:null})}function te(r){i.set({...i.get(),error:r,isLoading:!1})}const ae=["A friendly capybara mascot as a clean sticker SVG","Minimal app icon for an AI vector tool","A playful botanical badge with smooth editable paths","Modern SaaS logo mark with a checkmark, flat vector"];function ne(){return xe()?e.jsx(ie,{}):e.jsx(oe,{})}function oe(){return e.jsxs("div",{className:"flex min-h-screen flex-col bg-background text-foreground",children:[e.jsx(M,{}),e.jsxs("main",{className:"mx-auto w-full max-w-[1200px] flex-1 px-6 py-10",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"font-serif text-3xl font-extrabold tracking-tight",children:"Create SVG"}),e.jsx("p",{className:"mt-1 text-sm text-foreground/60",children:"Generate clean, editable SVGs from a text prompt or an image."})]}),e.jsxs("span",{className:"rounded-full border border-border bg-card px-3 py-1 text-xs text-foreground/60",children:["Sign in for ",F," free credits"]})]}),e.jsxs("div",{className:"mt-8 grid gap-6 lg:grid-cols-[minmax(0,420px)_minmax(0,1fr)]",children:[e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"rounded-xl border border-border bg-card p-5",children:[e.jsxs("div",{className:"flex rounded-lg border border-border bg-muted/40 p-1",children:[e.jsxs("div",{className:"flex flex-1 items-center justify-center gap-2 rounded-md bg-background px-3 py-2 text-sm font-semibold shadow-sm",children:[e.jsx(B,{className:"size-4"}),"Imagine"]}),e.jsxs("div",{className:"flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-foreground/60",children:[e.jsx(k,{className:"size-4"}),"Vectorize"]})]}),e.jsx("textarea",{disabled:!0,placeholder:"Describe the SVG you want to createâ¦",rows:4,className:"mt-4 w-full resize-y rounded-lg border border-border bg-background p-3 text-sm leading-relaxed outline-none"}),e.jsxs("div",{className:"mt-3 flex items-center justify-between gap-2",children:[e.jsxs("span",{className:"inline-flex cursor-not-allowed items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-xs font-medium text-foreground/70",children:[e.jsx(C,{className:"size-3.5"}),"Upload image"]}),e.jsxs(b,{disabled:!0,children:[e.jsx(_,{className:"size-4"}),"Generate SVG"]})]})]})}),e.jsxs("div",{className:"rounded-xl border border-border bg-card p-5",children:[e.jsx("h2",{className:"text-sm font-semibold",children:"Preview"}),e.jsx("div",{className:"mt-3 flex min-h-[300px] items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 p-6",children:e.jsx("p",{className:"text-sm text-foreground/40",children:"Your generated SVG will appear here."})})]})]})]}),e.jsx(P,{})]})}function ie(){const r=w(X),t=w(Z),o=w(O),{data:n}=K(),[d,m]=g.useState(null),[u,G]=g.useState(null),{creations:v,draftRequest:ue,error:E,isLoading:x,mode:l,prompt:h,uploadedImage:p}=Y(i),V=l==="imagine"?h.trim().length>0:!!p,R=v[v.length-1]??null,U=async()=>{if(!n?.user){m(null);return}try{m(await o())}catch{m(null)}};g.useEffect(()=>{U()},[n?.user]),g.useEffect(()=>{const s=new URLSearchParams(window.location.search),c=s.get("mode"),a=s.get("prompt")?.trim(),j=s.get("imageUrl")?.trim();c==="vectorize"&&f("vectorize"),a&&(f("imagine"),S(a)),j&&(f("vectorize"),ce(j))},[]),g.useEffect(()=>{const s=c=>{if(c.source!==window)return;const a=c.data;if(a?.source!=="gensvg-chrome-extension"||a.type!=="GENSVG_PENDING_IMAGE"||typeof a.image!="string")return;const j=a.image.startsWith("data:image/png")?"image/png":"image/jpeg",W=le(a.image,j),$=typeof a.name=="string"?a.name:"pending-image",q=new File([W],$,{type:j});z(q).then(N)};
1return window.addEventListener("message",s),()=>window.removeEventListener("message",s)},[]);const I=async s=>{if(s?.preventDefault(),!V||x)return;const c={id:crypto.randomUUID(),prompt:h.trim()||"Vectorize image",image:l==="vectorize"?p:void 0,mode:l,createdAt:Date.now()};re(c);try{const a=l==="imagine"?await r({data:{prompt:h.trim()}}):await t({data:{image:{base64:p.replace(/^data:[^,]+,/,"")}}});se({id:a.id,createdAt:a.created,credits:a.credits,svgs:a.svgs,provider:a.provider,model:a.model,prompt:h.trim(),mode:l,image:l==="vectorize"?p:void 0}),a.svgs[0]&&G(a.svgs[0]),U()}catch(a){te(a instanceof Error?a.message:"Failed to create SVG")}},L=async s=>{const c=s.target.files?.[0];c&&(N(await z(c)),s.target.value="")},A=s=>{f("imagine"),S(s)},T=()=>{u&&me(u,"gensvg.svg")},D=()=>{if(!u)return;const s=new URLSearchParams({src:encodeURIComponent(u)});window.open(`/editor?${s.toString()}`,"_blank")};return e.jsxs("div",{className:"flex min-h-screen flex-col bg-background text-foreground",children:[e.jsx(M,{}),e.jsxs("main",{className:"mx-auto w-full max-w-[1200px] flex-1 px-6 py-10",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("h1",{className:"font-serif text-3xl font-extrabold tracking-tight",children:"Create SVG"}),e.jsx("p",{className:"mt-1 text-sm text-foreground/60",children:"Generate clean, editable SVGs from a text prompt or an image."})]}),n?.user&&d?e.jsxs("span",{className:"rounded-full border border-border bg-card px-3 py-1 text-xs text-foreground/60",children:[d.total," credits"]}):e.jsxs("span",{className:"rounded-full border border-border bg-card px-3 py-1 text-xs text-foreground/60",children:["Sign in for ",F," free credits"]})]}),e.jsxs("div",{className:"mt-8 grid gap-6 lg:grid-cols-[minmax(0,420px)_minmax(0,1fr)]",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"rounded-xl border border-border bg-card p-5",children:[e.jsxs("div",{className:"flex rounded-lg border border-border bg-muted/40 p-1",children:[e.jsxs("button",{type:"button",onClick:()=>f("imagine"),className:`flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition-colors ${l==="imagine"?"bg-background text-foreground shadow-sm":"text-foreground/60 hover:text-foreground"}`,children:[e.jsx(B,{className:"size-4"}),"Imagine"]}),e.jsxs("button",{type:"button",onClick:()=>f("vectorize"),className:`flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition-colors ${l==="vectorize"?"bg-background text-foreground shadow-sm":"text-foreground/60 hover:text-foreground"}`,children:[e.jsx(k,{className:"size-4"}),"Vectorize"]})]}),l==="imagine"?e.jsxs("form",{className:"mt-4",onSubmit:I,children:[e.jsx("textarea",{value:h,onChange:s=>S(s.target.value),placeholder:"Describe the SVG you want to createâ¦",rows:4,className:"w-full resize-y rounded-lg border border-border bg-background p-3 text-sm leading-relaxed outline-none focus:border-primary"}),E?e.jsx("p",{className:"mt-2 rounded-lg border border-destructive/30 bg-destructive/10 p-2.5 text-xs text-destructive",children:E}):null,e.jsxs("div",{className:"mt-3 flex items-center justify-between gap-2",children:[e.jsxs("label",{className:"inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-border px-3 py-2 text-xs font-medium text-foreground/70 transition-colors hover:border-primary/50",children:[e.jsx(C,{className:"size-3.5"}),"Upload image",e.jsx("input",{accept:"image/png,image/jpeg,image/webp",type:"file",className:"hidden",onChange:L})]}),e.jsxs(b,{type:"submit",disabled:!V||x,children:[x?e.jsx(y,{className:"size-4 animate-spin"}):e.jsx(_,{className:"size-4"}),x?"Generatingâ¦":"Generate SVG"]})]})]}):e.jsx("div",{className:"mt-4",children:p?e.jsxs("div",{className:"rounded-lg border border-border bg-background p-3",children:[e.jsx("img",{src:p,alt:"Source image",className:"mx-auto max-h-48 rounded object-contain"}),e.jsxs("div",{className:"mt-2 flex items-center justify-between",children:[e.jsx("span",{className:"text-xs text-foreground
1/60",children:"Image ready"}),e.jsx(b,{variant:"ghost",size:"sm",onClick:()=>N(null),children:"Replace"})]}),e.jsxs(b,{className:"mt-2 w-full",onClick:I,disabled:x,children:[x?e.jsx(y,{className:"size-4 animate-spin"}):e.jsx(k,{className:"size-4"}),x?"Vectorizingâ¦":"Vectorize image"]})]}):e.jsxs("label",{className:"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-background p-10 text-center transition-colors hover:border-primary/50",children:[e.jsx(C,{className:"size-6 text-foreground/40"}),e.jsx("span",{className:"text-sm font-medium",children:"Choose an image"}),e.jsx("span",{className:"text-xs text-foreground/40",children:"PNG, JPG, or WebP"}),e.jsx("input",{accept:"image/png,image/jpeg,image/webp",type:"file",className:"hidden",onChange:L})]})})]}),e.jsxs("div",{className:"rounded-xl border border-border bg-card p-4",children:[e.jsx("p",{className:"text-xs font-semibold uppercase tracking-wide text-foreground/40",children:"Try a prompt"}),e.jsx("div",{className:"mt-2.5 flex flex-wrap gap-2",children:ae.map(s=>e.jsx("button",{type:"button",onClick:()=>A(s),className:"rounded-full border border-border px-3 py-1.5 text-xs text-foreground/70 transition-colors hover:border-primary/50 hover:text-foreground",children:s},s))})]})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"rounded-xl border border-border bg-card p-5",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("h2",{className:"text-sm font-semibold",children:"Preview"}),u?e.jsxs("div",{className:"flex gap-1.5",children:[e.jsx(b,{size:"sm",variant:"outline",onClick:D,children:"Edit"}),e.jsxs(b,{size:"sm",onClick:T,children:[e.jsx(H,{className:"size-3.5"}),"Export SVG"]})]}):null]}),e.jsx("div",{className:"mt-3 flex min-h-[300px] items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 p-6",children:u?e.jsx("div",{className:"max-h-[60vh] max-w-full",dangerouslySetInnerHTML:{__html:u}}):R?e.jsx("div",{className:"max-h-[60vh] max-w-full opacity-60",dangerouslySetInnerHTML:{__html:R.svgs[0]??""}}):x?e.jsxs("div",{className:"flex flex-col items-center gap-2 text-foreground/50",children:[e.jsx(y,{className:"size-6 animate-spin"}),e.jsx("span",{className:"text-sm",children:"Building SVG pathsâ¦"})]}):e.jsx("p",{className:"text-sm text-foreground/40",children:"Your generated SVG will appear here."})})]}),v.length>0?e.jsxs("div",{children:[e.jsx("h2",{className:"text-sm font-semibold",children:"Results"}),e.jsx("div",{className:"mt-3 grid grid-cols-2 gap-3 max-[640px]:grid-cols-1",children:v.map(s=>e.jsx(de,{creation:s,onSelect:G},s.id))})]}):null]})]})]}),e.jsx(P,{})]})}function de({creation:r,onSelect:t}){return e.jsxs("div",{className:"rounded-xl border border-border bg-card p-3",children:[e.jsx("p",{className:"line-clamp-2 text-xs text-foreground/60",children:r.prompt}),e.jsx("div",{className:"mt-2.5 grid gap-2",children:r.svgs.map((o,n)=>e.jsxs("button",{type:"button",onClick:()=>t(o),className:"group flex items-center justify-between rounded-lg border border-border bg-background p-2 text-left transition-colors hover:border-primary/50",children:[e.jsx("div",{className:"h-12 w-12 shrink-0 overflow-hidden rounded bg-muted/40",dangerouslySetInnerHTML:{__html:o}}),e.jsx(J,{variant:"outline",className:"ml-2 shrink-0",children:r.mode==="imagine"?"AI":"VEC"})]},`${r.id}-${n}`))})]})}function z(r){return new Promise((t,o)=>{const n=new FileReader;n.addEventListener("load",()=>t(String(n.result))),n.addEventListener("error",()=>o(n.error)),n.readAsDataURL(r)})}function le(r,t){const o=r.replace(/^data:[^,]+,/,""),n=atob(o),d=new Uint8Array(n.length);for(let m=0;m<n.length;m++)d[m]=n.charCodeAt(m);return new Blob([d],{type:t})}async function ce(r){try{const t=await fetch(r,{credentials:"omit",mode:"cors"});if(!t.ok)return;const o=await t.blob(),n=new File([o],"web-image",{type:o.type||"image/png"});N(await z(n))}catch{}}function me(r,t){const o=new Blob([r],{type:"image/svg+xml"}),n=URL.createObjectURL(o),d=document.createElement("a");d.href=n,d.download=t,d.click(),URL.revokeObjectURL(n)}function xe(){const[r,t]=g.useState(!1);return g.useEffect(()=>{t(!0)},[]),r}const ye=ne;export{ye as component};
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.