https://www.artbase.ai/assets/StylePickerFilterLab-B0li20Md.js

1const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/PricingModal-BtkTc1wX.js","assets/vendor-react-D9EY4K7J.js","assets/index-D9uSPnBe.js","assets/vendor-router-C8Uie-O4.js","assets/vendor-radix-CF8nJVj4.js","assets/vendor-supabase-D-rWnkq6.js","assets/vendor-utils-CyS8xr2I.js","assets/vendor-query-C2PGt4Dw.js","assets/index-Dhd064tN.css","assets/useStripeCheckout-Fbqg6KON.js","assets/topupTiers-MM9gEMXv.js","assets/plus-B14LIkTz.js"])))=>i.map(i=>d[i]);
2import{aa as e,W as t,ab as a,B as s,Y as r,Z as i,$ as l,s as n,a0 as o,a1 as d,a2 as c,a3 as m,a4 as p,ac as x,a6 as u,a7 as h,a8 as g,a9 as b,C as f,_ as v}from"./index-D9uSPnBe.js";import{r as y,j}from"./vendor-react-D9EY4K7J.js";import{S as w}from"./SEOHead-B8DIxQlM.js";import{S as k,B as N}from"./bravoStyleLock-BrSes4UE.js";import{C as S}from"./chevron-left-DyNg8AjG.js";import{C as $}from"./chevron-right-DkY1Zt0A.js";import{S as z}from"./sparkles-CgI3MxJE.js";import{L as C}from"./layout-grid-FBlhsi_f.js";import{C as D}from"./chevron-down-BFe2apu9.js";import"./vendor-router-C8Uie-O4.js";import"./vendor-radix-CF8nJVj4.js";import"./vendor-supabase-D-rWnkq6.js";import"./vendor-utils-CyS8xr2I.js";import"./vendor-query-C2PGt4Dw.js";const E=y.lazy(()=>v(()=>import("./PricingModal-BtkTc1wX.js").then(e=>e.a),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11]))),M=[{id:"alle",kort:"All",lang:"All styles"},{id:"standaard",kort:"Default",lang:"Default styles"},{id:"eigen",kort:"Mine",lang:"Your own styles"}],_=Object.entries(N).map(([e,t])=>{const a=t.image.slice(0,t.image.lastIndexOf("/")),s=t.image.slice(t.image.lastIndexOf("/")+1).replace(/\.\w+$/,"");return{label:e,tagline:t.tagline,description:t.description,image:t.image,frames:Array.from({length:10},(e,t)=>`${a}/video/${s}/${t}.jpg`)}}),A=_.slice(0,5).map((e,t)=>({...e,label:k,tagline:"Your own style",customStyleId:`demo-${t}`,customStyleName:["Chalkboard","Jazz","Medieval Manuscript","Disco","Blueprint"][t]})),I=({image:e,frames:t,isCenter:a,eager:s})=>{const[r,i]=y.useState(0),[l,n]=y.useState(!1);y.useEffect(()=>{if(!a||t.length<2||l)return void i(0);const e=setInterval(()=>i(e=>(e+1)%t.length),3e3);return()=>clearInterval(e)},[a,t.length,l]);const o=a&&!l&&t.length>0?t[r]:e;return j.jsx("img",{src:o,alt:"",className:"absolute inset-0 w-full h-full object-cover",draggable:!1,loading:s?"eager":"lazy",onError:()=>n(!0),style:{transition:"opacity 0.4s ease"}})},L=[{id:"segment",naam:"01 · Segment-pil",uitleg:"Drie segmenten in één glazen pil — de vorm die /home al gebruikt."},{id:"onderstreep",naam:"02 · Onderstreepte tabs",uitleg:"Kale tekst met een roze streep eronder; het lichtst van gewicht."},{id:"chips",naam:"03 · Losse chips",uitleg:"Drie zelfstandige chips, actieve chip vult zich roze."},{id:"schakelaar",naam:"04 · Twee-standen-schakelaar",uitleg:"Alleen Default ⇄ Mine, met een schuivende knop. Geen 'alles'."},{id:"dropdown",naam:"05 · Dropdown",uitleg:"Eén knop die openklapt — neemt de minste breedte in."},{id:"telchips",naam:"06 · Chips met aantallen",uitleg:"Als 03, maar elke chip toont hoeveel stijlen erin zitten."}];function F({stand:e,waarde:t,zet:a,isDark:s,tel:r}){const[i,l]=y.useState(!1),n="var(--huis-accent-a, #fb23c2)",o=s?{background:"rgba(255,255,255,0.05)",border:"1px solid rgba(255,255,255,0.10)"}:{background:"rgba(255,255,255,0.75)",border:"1px solid rgba(0,0,0,0.06)"},d=s?"text-white/55":"text-gray-500",c=s?"text-white":"text-gray-900";if("segment"===e)return j.jsx("div",{className:"inline-flex items-center rounded-full p-[3px]",style:{...o,backdropFilter:"blur(12px)"},children:M.map(e=>{const s=t===e.id;return j.jsx("button",{onClick:()=>a(e.id),className:"px-3.5 py-1.5 rounded-full text-[13px] font-semibold transition-all "+(s?"text-white":`${d} hover:${c}`),style:s?{background:`linear-gradient(90deg, ${n}, var(--huis-accent-b, #ff82db))`}:void 0,children:e.kort},e.id)})});if("onderstreep"===e)return j.jsx("div",{className:"inline-flex items-center gap-5",children:M.map(e=>{const s=t===e.id;return j.jsxs("button",{onClick:()=>a(e.id),className:"relative pb-1.5 text-[13px] font-semibold transition-colors",children:[j.jsx("span",{className:s?c:d,children:e.kort}),j.jsx("span",{className:"absolute left-0 right-0 bottom-0 h-[2px] rounded-full transition-all",style:{background:s?n:"transparent"}})]},e.id)})});if("chips"===e||"telchips"===e)return j.jsx("div",{className:"inline-flex items-center gap-2",children:M.map(i=>{const l=t===i.id;return j.jsxs("button",{onClick:()=>a(i.id),className:`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12.5px] font-semibold transition-all ${l?"text-white":d}`,style:l?{background:`linear-gradient(90deg, ${n}, var(--huis-accent-b, #ff82db))`,border:"1px solid transparent"}:o,children:["eigen"===i.id&&j.jsx(z,{size:12}),"standaard"===i.id&&j.jsx(C,{size:12}),i.kort,"telchips"===e&&j.jsx("span",{className:"text-[11px] font-bold "+(l?"text-white/75":s?"text-white/35":"text-gray-400"),children:r[i.id]})]},i.id)})});if("schakelaar"===e){const e="eigen"===t;return j.jsxs("div",{className:"inline-flex items-center rounded-full p-[3px] relative",style:{...o,backdropFilter:"blur(12px)"},children:[j.jsx("span",{className:"absolute top-[3px] bottom-[3px] rounded-full transition-all duration-300",style:{left:e?"50%":"3px",width:"calc(50% - 3px)",background:`linear-gradient(90deg, ${n}, var(--huis-accent-b, #ff82db))`}}),["standaard","eigen"].map(e=>{const s=t===e;return j.jsx("button",{onClick:()=>a(e),className:`relative z-[1] px-4 py-1.5 rounded-full text-[13px] font-semibold transition-colors ${s?"text-white":d}`,children:"standaard"===e?"Default":"Mine"},e)})]})}const m=M.find(e=>e.id===t);return j.jsxs("div",{className:"relative",children:[j.jsxs("button",{onClick:()=>l(e=>!e),className:`inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-[13px] font-semibold ${c}`,style:{...o,backdropFilter:"blur(12px)"},children:[m.lang,j.jsx(D,{size:14,className:"transition-transform "+(i?"rotate-180":"")})]}),i&&j.jsx("div",{className:"absolute right-0 top-full mt-2 w-[190px] rounded-xl overflow-hidden z-50",style:{...o,backdropFilter:"blur(16px)"},children:M.map(e=>j.jsxs("button",{onClick:()=>{a(e.id),l(!1)},className:`w-full flex items-center justify-between px-3 py-2.5 text-[13px] font-medium text-left transition-colors ${s?"hover:bg-white/5":"hover:bg-black/5"} ${t===e.id?c:d}`,children:[e.lang,t===e.id&&j.jsx(f,{size:14,style:{color:n}})]},e.id))})]})}function O(){e();const{isDark:f}=t(),v=a(),[N,z]=y.useState(!1);y.useRef(!1);const[C,D]=y.useState(1),[M,O]=y.useState(!0),[P,T]=y.useState(!0),[R,Y]=y.useState(!0),[B,G]=y.useState("alle"),q=v?250:480,U=v?141:270,V=v?190:340,W=v?120:180,[H,J]=y.useState([]);y.useEffect(()=>{let e=!1;return(async()=>{const{data:{user:t}}=await s.auth.getUser();if(!t)return;const{data:a}=await s.from("styles").select("id, name, description, image_url, trailer, preview_urls").eq("user_id",t.id).in("flow",["doodle","storytelling"]).eq("status","approved").order("created_at",{ascending:!1});!e&&Array.isArray(a)&&J(a.filter(e=>e.trailer&&e.image_url).map(e=>({label:k,tagline:"Your own style",description:e.description||e.name||"Your own art style",image:e.image_url,frames:Array.isArray(e.preview_urls)?e.preview_urls.filter(e=>"string"==typeof e):[],customStyleId:e.id,customStyleName:e.name})))})(),()=>{e=!0}},[]);const K=P&&0===H.length?A:H,X=y.useMemo(()=>

2[..._,...K],[K]),Z={alle:X.length,standaard:_.length,eigen:K.length},Q=y.useMemo(()=>"standaard"===B?_:"eigen"===B?K:X,[B,X,K]),[ee,te]=y.useState(0);y.useEffect(()=>{te(e=>e>=Q.length?0:e)},[Q.length]);const ae=Q[ee]??Q[0],se=Q.length,re=e=>{let t=e-ee;return t>se/2&&(t-=se),t<-se/2&&(t+=se),t},ie=e=>te(t=>(t+e+se)%se);y.useEffect(()=>{const e=e=>{const t=e.target;t&&("INPUT"===t.tagName||"TEXTAREA"===t.tagName||t.isContentEditable)||("ArrowRight"===e.key?(e.preventDefault(),D(e=>(e+1)%L.length),O(!0)):"ArrowLeft"===e.key?(e.preventDefault(),D(e=>(e+L.length-1)%L.length),O(!0)):" "===e.key?(e.preventDefault(),O(e=>!e)):"c"===e.key||"C"===e.key?(e.preventDefault(),T(e=>!e)):"r"===e.key||"R"===e.key?(e.preventDefault(),Y(e=>!e),O(!0)):","===e.key?ie(-1):"."===e.key&&ie(1))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[ee,se]);const le=L[C];return j.jsxs(j.Fragment,{children:[j.jsx(w,{title:"Lab · Style picker filter"}),j.jsxs("div",{className:"min-h-screen relative overflow-hidden",style:b(f),children:[j.jsx(r,{}),j.jsx(i,{}),j.jsx(l,{suffix:"bravoStyle"}),j.jsx(n,{deel:.4}),j.jsx(o,{onClick:()=>{}}),j.jsx("div",{className:"absolute top-[104px] left-0 right-0 z-[20] pr-4 lg:pr-8 flex justify-end pointer-events-none",children:j.jsx("div",{className:"pointer-events-auto",children:j.jsx(F,{stand:le.id,waarde:B,zet:G,isDark:f,tel:Z})})}),j.jsxs("div",{style:u(),className:"relative z-[3] max-w-[1200px] mx-auto px-5 md:px-8 pt-5 md:pt-8 pb-40 md:pb-32",children:[j.jsx(d,{children:"Step 2 of 5 · Bravo Video v1"}),j.jsxs(c,{children:[j.jsx(m,{children:"Visual Style"})," Selection"]}),j.jsxs(p,{className:"mb-6 md:mb-10",children:["Bravo videos use no recurring main character — pick the visual treatment that fits your story. ",j.jsx("span",{className:"max-md:hidden",children:"Use the arrow keys or click cards to browse."})]}),j.jsxs("div",{className:"relative",children:[j.jsx("div",{className:"relative h-[220px] md:h-[380px]",style:{perspective:"2000px",pointerEvents:"none"},children:j.jsx("div",{className:"absolute inset-0",style:{transformStyle:"preserve-3d"},children:Q.map((e,t)=>{const a=re(t),s=Math.abs(a),r=0===a;if(s>3)return null;const i=a*V,l=-s*W,n=24*-a,o=r?1:1-.05*s,d=s<=1?1:2===s?.6:.25;return j.jsxs("div",{className:"absolute top-1/2 left-1/2 rounded-[18px] overflow-hidden transition-all duration-700 ease-out",style:{width:`${q}px`,height:`${U}px`,marginLeft:`-${q/2}px`,marginTop:`-${U/2}px`,transform:`translate3d(${i}px, 0, ${l}px) rotateY(${n}deg) scale(${o})`,transformStyle:"preserve-3d",opacity:d,zIndex:100-s,boxShadow:r?R?"0 30px 80px rgba(251,35,194,0.28), 0 10px 30px rgba(0,0,0,0.5)":"0 30px 80px rgba(99,102,241,0.35), 0 10px 30px rgba(0,0,0,0.45)":"0 20px 50px rgba(0,0,0,0.45)"},children:[j.jsx(I,{image:e.image,frames:e.frames,isCenter:r,eager:s<=1}),j.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-black/40 via-black/0 to-black/85"}),r&&j.jsx("div",{className:"absolute inset-0 rounded-[18px]",style:{padding:"2px",background:R?"linear-gradient(135deg, var(--huis-accent-a, #fb23c2), var(--huis-accent-b, #ff82db))":"linear-gradient(135deg, rgba(129,140,248,0.9), rgba(168,85,247,0.9))",WebkitMask:"linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",WebkitMaskComposite:"xor",maskComposite:"exclude"}}),j.jsx("div",{className:"absolute top-4 left-4 right-4 flex items-center justify-between",children:j.jsx("span",{className:"text-[11px] font-medium italic text-white/85",style:{fontFamily:"Georgia, 'Times New Roman', serif"},children:e.tagline})}),j.jsx("div",{className:"absolute bottom-0 left-0 right-0 p-4 text-left",children:j.jsxs("h3",{className:"text-white text-[16px] md:text-[20px] font-bold leading-tight",style:{fontFamily:"'Playfair Display', Georgia, serif"},children:[e.customStyleName||e.label,"."]})})]},e.customStyleId||e.label)})})}),j.jsx("div",{className:"absolute inset-0 h-[220px] md:h-[380px] pointer-events-none",children:Q.map((e,t)=>{const a=re(t),s=Math.abs(a);if(s>3)return null;const r=0===a,i=a*V,l=-s*W,n=2e3/(2e3+Math.abs(l)),o=r?1:1-.05*s,d=24*Math.abs(a),c=Math.cos(d*Math.PI/180),m=q*o*n*c,p=U*o*n,x=i*n;return j.jsx("button",{type:"button",onClick:()=>te(t),"aria-label":`Select ${e.customStyleName||e.label}

2`,"aria-pressed":r,className:"absolute top-1/2 rounded-[18px] transition-all duration-700 ease-out focus:outline-none "+(r?"cursor-default":"cursor-pointer"),style:{left:`calc(50% + ${x}px)`,width:`${m}px`,height:`${p}px`,marginLeft:`-${m/2}px`,marginTop:`-${p/2}px`,background:"transparent",border:"none",pointerEvents:"auto",zIndex:3-s+200}},e.customStyleId||e.label)})}),j.jsx("button",{onClick:()=>ie(-1),className:"absolute left-1 md:left-4 top-1/2 -translate-y-1/2 z-[110] w-11 h-11 rounded-full flex items-center justify-center transition-all "+(f?"bg-white/5 border border-white/10 hover:bg-white/10 text-white/80":"bg-white border border-gray-200 text-gray-600 shadow-sm"),"aria-label":"Previous style",children:j.jsx(S,{className:"w-5 h-5"})}),j.jsx("button",{onClick:()=>ie(1),className:"absolute right-1 md:right-4 top-1/2 -translate-y-1/2 z-[110] w-11 h-11 rounded-full flex items-center justify-center transition-all "+(f?"bg-white/5 border border-white/10 hover:bg-white/10 text-white/80":"bg-white border border-gray-200 text-gray-600 shadow-sm"),"aria-label":"Next style",children:j.jsx($,{className:"w-5 h-5"})})]}),j.jsx("p",{className:"text-center mt-6 max-w-[600px] mx-auto text-sm "+(f?"text-white/50":"text-gray-500"),children:null==ae?void 0:ae.description}),j.jsx(x,{count:Q.length,index:ee,onPick:te,labelOf:e=>`Go to ${Q[e].customStyleName||Q[e].label}`,className:"mt-6"})]}),j.jsx(h,{children:j.jsx(g,{onClick:()=>{},bezig:!1})}),M&&j.jsxs("div",{className:"fixed bottom-4 left-4 z-[300] w-[320px] rounded-xl p-3.5 text-[12px] leading-relaxed",style:{background:"rgba(10,10,14,0.92)",border:"1px solid rgba(255,255,255,0.12)",color:"rgba(255,255,255,0.85)",backdropFilter:"blur(10px)"},children:[j.jsx("div",{className:"font-bold text-[13px] mb-1",style:{color:"var(--huis-accent-a, #fb23c2)"},children:le.naam}),j.jsx("div",{className:"text-white/60 mb-2",children:le.uitleg}),j.jsxs("div",{className:"text-white/45",children:[Z.standaard," standaard · ",Z.eigen," eigen",P&&0===H.length?" (demo)":""," · nu ",Q.length," in beeld"]}),j.jsxs("div",{className:"mt-2 pt-2 border-t border-white/10 text-white/40",children:["←/→ stand · , en . draaien · C demo-stijlen · R ring ",R?"roze (huisstijl)":"indigo (oud)"," · spatie paneel"]})]})]}),j.jsx(y.Suspense,{fallback:null,children:j.jsx(E,{isOpen:N,onClose:()=>z(!1),variant:"create"})})]})}export{O as default};