https://creatica.app/_next/static/chunks/pages/dashboard-1286a9cbccecb7b8.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8026],{528:function(e,t,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/dashboard",function(){return a(5833)}])},6412:function(e,t,a){"use strict";a.d(t,{Xi:function(){return r},mr:function(){return i},sP:function(){return l}});var s=a(5893),n=a(8736);a(7294),t.ZP=e=>{let{title:t,description:a,action:r,footer:l,className:i,children:d}=e;return(0,s.jsxs)("section",{className:(0,n.cx)("overflow-hidden rounded-2xl border border-white/10 bg-ink-900/60 shadow-card",i),children:[(t||a||r)&&(0,s.jsxs)("header",{className:"flex flex-wrap items-start justify-between gap-4 border-b border-white/10 px-6 py-5",children:[(0,s.jsxs)("div",{children:[t&&(0,s.jsx)("h2",{className:"font-afacad text-xl font-bold text-white",children:t}),a&&(0,s.jsx)("p",{className:"mt-1 text-sm text-ink-300",children:a})]}),r]}),d&&(0,s.jsx)("div",{className:"px-6 py-5",children:d}),l&&(0,s.jsx)("footer",{className:"border-t border-white/10 bg-ink-950/40 px-6 py-3 text-sm text-ink-400",children:l})]})};let r="h-10 w-full rounded-lg border border-white/10 bg-ink-950/70 px-3 text-sm text-white placeholder:text-ink-500 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/40 disabled:opacity-50",l={primary:"inline-flex h-10 items-center justify-center gap-2 rounded-full bg-primary px-5 text-sm font-semibold text-white transition hover:bg-primary-600 disabled:cursor-not-allowed disabled:opacity-50",secondary:"inline-flex h-10 items-center justify-center gap-2 rounded-full border border-white/15 bg-white/5 px-5 text-sm font-semibold text-white transition hover:border-white/30 hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50",danger:"inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-red-300 transition hover:bg-red-500/10 hover:text-red-200"},i=e=>{let{eyebrow:t,title:a,description:n,action:r}=e;return(0,s.jsxs)("div",{className:"flex flex-wrap items-end justify-between gap-6",children:[(0,s.jsxs)("div",{children:[t&&(0,s.jsx)("span",{className:"text-xs font-semibold uppercase tracking-[0.2em] text-primary-300",children:t}),(0,s.jsx)("h1",{className:"mt-2 font-afacad text-4xl font-bold text-white md:text-5xl",children:a}),n&&(0,s.jsx)("p",{className:"mt-3 max-w-2xl text-ink-300",children:n})]}),r]})}},8184:function(e,t,a){"use strict";a.d(t,{Z:function(){return d}});var s=a(5893),n=a(8736),r=a(2911),l=a(7294);let i=l.forwardRef(function({title:e,titleId:t,...a},s){return l.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:s,"aria-labelledby":t},a),e?l.createElement("title",{id:t},e):null,l.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"}))});var d=e=>{let{code:t,label:a,className:d}=e,[o,c]=(0,l.useState)(!1);(0,l.useEffect)(()=>{if(!o)return;let e=setTimeout(()=>c(!1),1600);return()=>clearTimeout(e)},[o]);let u=async()=>{try{await navigator.clipboard.writeText(t),c(!0)}catch(e){}};return(0,s.jsxs)("div",{className:(0,n.cx)("overflow-hidden rounded-xl border border-white/10 bg-ink-950/80 shadow-card",d),children:[(0,s.jsxs)("div",{className:"flex items-center justify-between border-b border-white/5 px-4 py-2",children:[(0,s.jsxs)("div",{className:"flex items-center gap-2",children:[(0,s.jsx)("span",{className:"h-2.5 w-2.5 rounded-full bg-white/10"}),(0,s.jsx)("span",{className:"h-2.5 w-2.5 rounded-full bg-white/10"}),(0,s.jsx)("span",{className:"h-2.5 w-2.5 rounded-full bg-white/10"}),a&&(0,s.jsx)("span",{className:"ml-2 font-ibmPlex text-xs text-ink-400",children:a})]}),(0,s.jsxs)("button",{type:"button",onClick:()=>void u(),className:"flex items-center gap-1 rounded-md px-2 py-1 text-xs text-ink-300 transition hover:bg-white/5 hover:text-white","aria-label":"Copy to clipboard",children:[o?(0,s.jsx)(r.Z,{className:"h-3.5 w-3.5 text-emerald-300"}):(0,s.jsx)(i,{className:"h-3.5 w-3.5"}),o?"Copied":"Copy"]})]}),(0,s.jsx)("pre",{className:"overflow-x-auto p-4 font-ibmPlex text-[13px] leading-relaxed text-ink-100",children:(0,s.jsx)("code",{children:t})})]})}},5833:function(e,t,a){"use strict";a.r(t),a.d(t,{__N_SSP:function(){return g},default:function(){return j}});var s,n=a(5893),r=a(8736),l=a(5107),i=a(4053),d=a(2453),o=a(6412),c=a(8184),u=a(1904),m=a(1401),x=a(1664),h=a.n(x),p=a(7294),f=a(3454);let b=null!==(s=f.env.NEXT_PUBLIC_CREATICA_API_URL)&&void 0!==s?s:"https://api.creatica.app";var g=!0;function j(){var e,t,a,s;let x=(0,i.useUser)(),f=(0,l.$)(),[g,j]=(0,p.useState)(null),[v,w]=(0,p.useState)([]),[y,k]=(0,p.useState)(""),[N,C]=(0,p.useState)(null),[_,P]=(0,p.useState)([]),[S,T]=(0,p.useState)({slug:"",name:"",colors:"",backgroundColor:"",defaultStructure:"",shareWithTeam:!1}),[E,A]=(0,p.useState)(null),[L,I]=(0,p.useState)(""),[O,X]=(0,p.useState)(""),[Z,M]=(0,p.useState)(null),R=(0,p.useCallback)(async()=>{let e=await fetch("/api/keys");if(e.ok){var t;let a=await e.json();j({plan:a.plan,monthlyQuota:a.monthlyQuota}),w(null!==(t=a.keys)&&void 0!==t?t:[])}let{data:a}=await f.from("brand_kits").select("*").order("updated_at",{ascending:!1});P(null!=a?a:[]);let s=await fetch("/api/team");if(s.ok){let e=await s.json();A(e.team?e:null)}},[f]);(0,p.useEffect)(()=>{R()},[R]);let B=async()=>{M(null);let e=await fetch("/api/keys",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({label:y})}),t=await e.json();if(!e.ok)return M(t.error);C(t.token),k(""),R()},D=async e=>{confirm("Revoke this key? Anything using it will stop working immediately.")&&(await fetch("/api/keys",{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:e})}),R())},U=async()=>{M(null);

1let e=S.colors.split(/[,\s]+/).filter(Boolean),t=S.shareWithTeam&&!!E,a={user_id:x.id,slug:S.slug.trim().toLowerCase(),name:S.name.trim(),colors:e,background_color:S.backgroundColor||null,default_structure:S.defaultStructure||null,team_id:t?E.team.id:null,updated_at:new Date().toISOString()},{error:s}=await f.from("brand_kits").upsert(a,{onConflict:t?"team_id,slug":"user_id,slug"});if(s)return M(s.message);T({slug:"",name:"",colors:"",backgroundColor:"",defaultStructure:"",shareWithTeam:!1}),R()},W=async()=>{M(null);let e=await fetch("/api/team",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:L})}),t=await e.json();if(!e.ok)return M(t.error);I(""),R()},H=async()=>{M(null);let e=await fetch("/api/team",{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:O})}),t=await e.json();if(!e.ok)return M(t.error);X(""),R()},J=async e=>{let t=e===(null==x?void 0:x.id);if(!confirm(t?"Leave this team?":"Remove this member?"))return;let a=await fetch("/api/team",{method:"DELETE",headers:{"Content-Type":"application/json"},body:JSON.stringify({userId:e})}),s=await a.json();if(!a.ok)return M(s.error);R()},z=async e=>{await f.from("brand_kits").delete().eq("id",e),R()},K=v.filter(e=>!e.revoked_at).reduce((t,a)=>t+(null!==(e=a.used_this_month)&&void 0!==e?e:0),0),F=v.filter(e=>!e.revoked_at),Q=null!==(t=null==g?void 0:g.monthlyQuota)&&void 0!==t?t:0,$=Math.min(100,100*K/Math.max(1,Q));return(0,n.jsxs)(m.Z,{children:[(0,n.jsx)(u.Z,{title:"API dashboard — Creatica",noindex:!0}),(0,n.jsxs)(d.Z,{size:"md",className:"space-y-6 pb-24 pt-14",children:[(0,n.jsx)(o.mr,{eyebrow:"Developers",title:"API dashboard",description:"Keys, usage and brand kits for the hosted API and remote MCP server.",action:(0,n.jsx)(h(),{href:"/pricing",className:o.sP.secondary,children:(null==g?void 0:g.plan)==="free"?"Upgrade plan":"Manage plan"})}),Z&&(0,n.jsx)("div",{role:"alert",className:"rounded-xl border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-200",children:Z}),(0,n.jsxs)(o.ZP,{title:"Plan & usage",children:[(0,n.jsxs)("div",{className:"flex flex-wrap items-end justify-between gap-4",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)("div",{className:"font-afacad text-3xl font-bold capitalize text-white",children:null!==(a=null==g?void 0:g.plan)&&void 0!==a?a:"…"}),(0,n.jsxs)("div",{className:"mt-1 text-sm text-ink-300",children:[K.toLocaleString()," / ",Q.toLocaleString()," hosted renders this month"]})]}),(0,n.jsxs)("div",{className:"text-sm text-ink-400",children:[F.length," active ",1===F.length?"key":"keys"]})]}),(0,n.jsx)("div",{className:"mt-4 h-2 w-full overflow-hidden rounded-full bg-white/10",role:"progressbar","aria-valuenow":Math.round($),"aria-valuemin":0,"aria-valuemax":100,children:(0,n.jsx)("div",{className:(0,r.cx)("h-full rounded-full transition-all",$>90?"bg-red-400":"bg-primary"),style:{width:"".concat($,"%")}})})]}),(0,n.jsxs)(o.ZP,{title:"API keys",description:(0,n.jsxs)(n.Fragment,{children:["Send as"," ",(0,n.jsx)("code",{className:"font-ibmPlex text-xs text-ink-100",children:"Authorization: Bearer <key>"})," ","to the API or the remote MCP endpoint. Keys are shown once."]}),children:[N&&(0,n.jsxs)("div",{className:"mb-5 rounded-xl border border-emerald-400/40 bg-emerald-400/10 p-4 text-sm",children:[(0,n.jsx)("div",{className:"mb-2 font-medium text-emerald-200",children:"Copy your new key now — it will not be shown again."}),(0,n.jsx)("code",{className:"block select-all break-all rounded-lg bg-ink-950/70 p-3 font-ibmPlex text-xs text-white",children:N}),(0,n.jsx)("button",{className:"mt-3 text-xs text-emerald-200 underline underline-offset-4",onClick:()=>C(null),children:"I have copied it"})]}),(0,n.jsxs)("div",{className:"flex flex-col gap-2 sm:flex-row",children:[(0,n.jsx)("input",{value:y,onChange:e=>k(e.target.value),placeholder:"Label (e.g. production)",className:(0,r.cx)(o.Xi,"flex-1")}),(0,n.jsx)("button",{onClick:()=>void B(),disabled:F.length>=10,className:o.sP.primary,children:"Create key"})]}),(0,n.jsx)("div",{className:"mt-5 overflow-x-auto",children:(0,n.jsxs)("table",{className:"w-full text-sm",children:[(0,n.jsx)("thead",{className:"text-left text-xs uppercase tracking-wider text-ink-400",children:(0,n.jsxs)("tr",{children:[(0,n.jsx)("th",{className:"pb-2 font-medium",children:"Key"}),(0,n.jsx)("th",{className:"pb-2 font-medium",children:"Label"}),(0,n.jsx)("th",{className:"pb-2 font-medium",children:"Used"}),(0,n.jsx)("th",{className:"pb-2 font-medium",children:"Last used"}),(0,n.jsx)("th",{})]})}),(0,n.jsxs)("tbody",{children:[v.map(e=>(0,n.jsxs)("tr",{className:(0,r.cx)("border-t border-white/10",e.revoked_at&&"text-ink-500 line-through"),children:[(0,n.jsxs)("td",{className:"py-2.5 font-ibmPlex text-xs",children:[e.prefix,"…"]}),(0,n.jsx)("td",{children:null!==(s=e.label)&&void 0!==s?s:"—"}),(0,n.jsx)("td",{children:e.used_this_month}),(0,n.jsx)("td",{children:e.last_used_at?new Date(e.last_used_at).toLocaleDateString():"—"}),(0,n.jsx)("td",{className:"text-right",children:!e.revoked_at&&(0,n.jsx)("button",{className:o.sP.danger,onClick:()=>void D(e.id),children:"Revoke"})})]},e.id)),!v.length&&(0,n.jsx)("tr",{children:(0,n.jsx)("td",{colSpan:5,className:"py-4 text-ink-500",children:"No keys yet. Create one above to start using the hosted API."})})]})]})})]}),(E||(null==g?void 0:g.plan)==="team")&&(0,n.jsx)(o.ZP,{title:"Team",description:"Members get the Team plan on their own API keys and can use and edit every brand kit shared with the team.",children:E?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)("div",{className:"flex flex-wrap items-center justify-between gap-2",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)("span",{className:"text-lg font-semibold",children:E.team.name})," ",(0,n.jsx)("span",{className:"font-ibmPlex text-xs text-ink-500",children:E.team.slug})]}),(0,n.jsxs)("div",{className:"text-sm text-ink-300",children:[E.seats.used," / ",E.seats.max," seats"]})]}),"owner"===E.role&&(0,n.jsxs)("div",{className:"mt-3 flex gap-2",children:[(0,n.jsx)("input",{value:O,onChange:e=>X(e.target.value),placeholder:"Add a member by their Creatica email",className:o.Xi}),(0,n.jsx)("button",{onClick:()=>void H(),disabled:!O.includes("@")||E.seats.used>=E.seats.max,className:o.sP.primary,children:"Add"})]}),(0,n.jsx)("ul",{className:"mt-4 divide-y divide-white/10 text-sm",children:E.members.map(e=>(0,n.jsxs)("li",{className:"flex items-center justify-between py-2",children:[(0,n.jsxs)("div",{children:[e.email," ",(0,n.jsx)("span",{className:"ml-1 rounded-full bg-white/10 px-2 py-0.5 text-[11px] text-ink-300",children:e.role})]}),"owner"!==e.role&&("owner"===E.role||e.user_id===(null==x?void 0:x.id))&&(0,n.jsx)("button",{className:"text-xs text-red-300 underline",onClick:()=>void J(e.user_id),children:e.user_id===(null==x?void 0:x.id)?"leave":"remove"})]},e.user_id))})]}):(0,n.jsxs)("div",{className:"flex gap-2",children:[(0,n.jsx)("input",{value:L,onChange:e=>I(e.target.value),placeholder:"Team name (Northwind Studio)",className:o.Xi}),(0,n.jsx)("button",{onClick:()=>void W(),disabled:!L.trim(),className:o.sP.primary,children:"Create team"})]})}),(0,n.jsxs)(o.ZP,{title:"Brand kits",description:(0,n.jsxs)(n.Fragment,{children:["Save your palette once; then"," ",(0,n.jsx)("code",{className:"font-ibmPlex text-xs text-ink-100",children:"brand=<slug>"})," ","on any render (or the ",(0,n.jsx)("em",{children:"brand"})," argument in MCP) keeps every background on-brand."]}),children:[(0,n.jsxs)("div",{className:"grid gap-2 md:grid-cols-2",children:[(0,n.jsx)("input",{value:S.slug,onChange:e=>T({...S,slug:e.target.value}),placeholder:"slug (acme)",className:o.Xi}),(0,n.jsx)("input",{value:S.name,onChange:e=>T({...S,name:e.target.value}),placeholder:"Name (Acme Corp)",className:o.Xi}),(0,n.jsx)("input",{value:S.colors,onChange:e=>T({...S,colors:e.target.value}),placeholder:"Colours: #0f172a, #38bdf8, #f472b6",className:(0,r.cx)(o.Xi,"md:col-span-2")}),(0,n.jsx)("input",{value:S.backgroundColor,onChange:e=>T({...S,backgroundColor:e.target.value}

1),placeholder:"Background (#000000, optional)",className:o.Xi}),(0,n.jsx)("input",{value:S.defaultStructure,onChange:e=>T({...S,defaultStructure:e.target.value}),placeholder:"Default structure (wave, optional)",className:o.Xi})]}),E&&(0,n.jsxs)("label",{className:"mt-3 flex items-center gap-2 text-sm text-ink-300",children:[(0,n.jsx)("input",{type:"checkbox",checked:S.shareWithTeam,onChange:e=>T({...S,shareWithTeam:e.target.checked})}),"Share with ",E.team.name," (every member can use and edit it)"]}),(0,n.jsx)("button",{onClick:()=>void U(),disabled:!S.slug||!S.name||!S.colors,className:(0,r.cx)(o.sP.primary,"mt-3"),children:"Save brand kit"}),(0,n.jsxs)("ul",{className:"mt-5 divide-y divide-white/10 text-sm",children:[_.map(e=>(0,n.jsxs)("li",{className:"flex items-center justify-between gap-3 py-3",children:[(0,n.jsxs)("div",{children:[(0,n.jsx)("span",{className:"font-ibmPlex text-xs text-white",children:e.slug})," ",(0,n.jsxs)("span",{className:"text-ink-300",children:["\xb7 ",e.name]}),e.team_id&&(0,n.jsx)("span",{className:"ml-2 rounded-full bg-primary/20 px-2 py-0.5 text-[11px] font-semibold text-primary",children:"team"}),(0,n.jsx)("div",{className:"mt-1.5 flex gap-1",children:e.colors.map(e=>(0,n.jsx)("span",{className:"inline-block h-4 w-4 rounded border border-white/10",style:{background:e},title:e},e))})]}),(0,n.jsxs)("div",{className:"flex items-center gap-3",children:[(0,n.jsxs)("code",{className:"hidden font-ibmPlex text-xs text-ink-500 md:block",children:[b,"/v1/render/wave.svg?brand=",e.slug]}),(0,n.jsx)("button",{className:o.sP.danger,onClick:()=>void z(e.id),children:"Delete"})]})]},e.id)),!_.length&&(0,n.jsx)("li",{className:"py-3 text-ink-500",children:"No brand kits yet."})]})]}),(0,n.jsx)(o.ZP,{title:"Use it",children:(0,n.jsx)(c.Z,{label:"quick start",code:'# CLI (local, free)\nnpx @creatica/cli gen wave -s hello -w 1200 -h 630 -o hero.svg\n\n# MCP in Claude Code (local, free)\nclaude mcp add creatica -- npx -y @creatica/mcp\n\n# Hosted image URL\n<img src="'.concat(b,'/v1/render/blurry.png?seed=hero&width=1600&height=900&colors=%23000,%23ff2d55">\n\n# Hosted API\ncurl -X POST ').concat(b,'/v1/generate -H "Authorization: Bearer $CREATICA_API_KEY" \\\n  -H "Content-Type: application/json" -d \'{"structure":"wave","seed":"launch","format":"url"}\'')})})]})]})}},5107:function(e,t,a){"use strict";a.d(t,{$:function(){return n}});var s=a(4053);function n(){return(0,s.useSupabaseClient)()}},2911:function(e,t,a){"use strict";var s=a(7294);let n=s.forwardRef(function({title:e,titleId:t,...a},n){return s.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true","data-slot":"icon",ref:n,"aria-labelledby":t},a),e?s.createElement("title",{id:t},e):null,s.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m4.5 12.75 6 6 9-13.5"}))});t.Z=n}},function(e){e.O(0,[1664,4718,1610,9774,2888,179],function(){return e(e.s=528)}),_N_E=e.O()}]);