https://www.artbase.ai/assets/MobielProducerLab-DlXlfWFo.js

1import{r as e,j as a}from"./vendor-react-D9EY4K7J.js";import{e as t,f as l,H as s}from"./Home-C9nmqYQu.js";import{e as r,h as n,s as o,f as i}from"./heroIconSkin-DcH_yfFW.js";import{f as d,g as c,h as u}from"./quickStartKaartChrome-Cekc4157.js";import{P as m,s as p,a as x}from"./promptBalkSkin-CY5fWqiK.js";import{aS as b}from"./index-D9uSPnBe.js";import"./productionFlowCopy-DbFhQkgQ.js";import"./SEOHead-B8DIxQlM.js";import"./vendor-router-C8Uie-O4.js";import"./japaneseGate-Bu3Id9mM.js";import"./cjkText-DoPSvC_e.js";import"./createScriptGen-C0qVunfi.js";import"./scriptWeigering-Bc2ftnyF.js";import"./VoiceModeTabs-DA0GVT23.js";import"./fishLanguageVoices-CaXarBQi.js";import"./ChipPaneel-CkU3ZKIf.js";import"./mic-Du645_dX.js";import"./chevron-down-BFe2apu9.js";import"./useModelMask-CGA151Xk.js";import"./createFlowStep-ByKdMyOQ.js";import"./doodleScriptGen-C09o5mT-.js";import"./doodleEerlijkeBuckets-CnL3eemI.js";import"./HuisstijlHome-CoRnAX64.js";import"./HuisAchtergrond-VMBA9EG4.js";import"./vendor-radix-CF8nJVj4.js";import"./vendor-supabase-D-rWnkq6.js";import"./vendor-utils-CyS8xr2I.js";import"./vendor-query-C2PGt4Dw.js";import"./huisSkinActief-D8jzNG8D.js";import"./chevron-right-DkY1Zt0A.js";import"./assetModalSkin-B-fRulbP.js";import"./users-Bjb-YIB_.js";import"./shuffle-Dkj127un.js";import"./arrow-up-D5Z2AwFY.js";import"./play-Dc17rqVh.js";import"./volume-x-uhZdOraL.js";import"./film-CdJOJ4fq.js";import"./monitor-D5v7JdEd.js";import"./zap-Bg-28jGx.js";const g="What do you want to create?",f="Anything you need, we'll make it together.",j=[5],h="#fb23c2",v="#ff82db",k=t,y={promptSchaal:1,quickStartSchaal:1,promptWeg:!1,titelOffset:0,titelGrootte:30,titelRegelhoogte:1.25,ruimteTitel:12},w={aan:!0,...l},N=(e,a)=>e.map((e,t)=>t>0&&a.includes(t)?`\n${e}`:e).join(" ").replace(/ \n/g,"\n"),S={fontFamily:"'Manrope', sans-serif",letterSpacing:"-0.02em"},C="#141416",$="#1f1f1f",R="#272727",T="#eeeeee",E="#9e9e9e",B="#616161",O="#fb23c2",z="#ff82db",G="rgba(78,78,78,0.5)",M="artbase-mobiel-producer",F="mobielProducerLab.presets.v1",L=({label:e,waarde:t,children:l})=>a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"flex items-center justify-between",children:[a.jsx("span",{className:"text-[12px] font-semibold",style:{color:E},children:e}),t&&a.jsx("span",{className:"text-[11px] font-semibold",style:{color:B},children:t})]}),a.jsx("div",{className:"mt-1 mb-3",children:l})]}),P=({children:e})=>a.jsxs(a.Fragment,{children:[a.jsx("div",{className:"mb-3",style:{borderTop:`1px solid ${G}`}}),a.jsx("div",{className:"mb-2 text-[11px] font-bold uppercase tracking-[0.14em]",style:{color:B},children:e})]}),H=[{naam:"360",breedte:360,hoogte:780},{naam:"390",breedte:390,hoogte:844},{naam:"430",breedte:430,hoogte:932}];function J(){const[t,l]=e.useState({skin:d,balk:m,titel:null,subtitel:null,icoon:null,maten:k});return e.useEffect(()=>{var e;const a=e=>{var a;e.origin===window.location.origin&&(null==(a=e.data)?void 0:a.type)===M&&l(e.data.stand)};return window.addEventListener("message",a),null==(e=window.parent)||e.postMessage({type:`${M}-klaar`},window.location.origin),()=>window.removeEventListener("message",a)},[]),e.useEffect(()=>(c(t.skin),()=>c(null)),[t.skin]),e.useEffect(()=>(p(t.balk),()=>p(null)),[t.balk]),e.useEffect(()=>(r(t.titel),()=>r(null)),[t.titel]),e.useEffect(()=>(n(t.subtitel),()=>n(null)),[t.subtitel]),e.useEffect(()=>(o(t.icoon),()=>o(null)),[t.icoon]),e.useEffect(()=>(i(t.maten),()=>i(null)),[t.maten]),a.jsx(s,{quickStart:"desktop",quickStartSet:"producer",railActief:"producer",paginaFade:!0})}function q(){const[t,s]=e.useState(d),[r,n]=e.useState(m),[o,i]=e.useState(k),[c,p]=e.useState(w),[J,q]=e.useState(1),[K,A]=e.useState(g),[D,I]=e.useState(f),[W,V]=e.useState([]),[Q,U]=e.useState(j),[Z,X]=e.useState(()=>{try{return JSON.parse(localStorage.getItem(F)??"[]")}catch{return[]}}),[Y,_]=e.useState(null),ee=e.useRef(null),ae=K.split(/\s+/).filter(Boolean),te=K.trim()?{tekst:N(ae,W),van:h,naar:v,mat:"#eeeeee",nadruk:Q}:null,le={url:l.url,dx:c.dx,dy:c.dy,scale:c.scale,verborgen:!c.aan},se={skin:t,balk:r,titel:te,subtitel:D,icoon:le,maten:o},re=()=>{var e,a;null==(a=null==(e=ee.current)?void 0:e.contentWindow)||a.postMessage({type:M,stand:se},window.location.origin)};e.useEffect(()=>{re()},[t,r,o,c,K,D,W,Q]),e.useEffect(()=>{const e=e=>{var a;e.origin===window.location.origin&&(null==(a=e.data)?void 0:a.type)===`${M}-klaar`&&re()};return window.addEventListener("message",e),()=>window.removeEventListener("message",e)},[t,r,o,c,K,D,W,Q]);const ne=(e,a)=>i(t=>({...t,[e]:a})),oe=(e,a)=>s(t=>({...t,[e]:a})),ie=(e,a)=>n(t=>({...t,[e]:a})),de=(e,a)=>p(t=>({...t,[e]:a})),ce=e=>{const a="live"===e;s(a?d:u),n(a?m:x),i(a?k:y),p(a?w:{...w,aan:!1}),A(g),I(f),V([]),U(j),_(null)},ue=H[J],me=t.kolommen>0;return a.jsx("div",{className:"min-h-[100dvh] w-full",style:{...S,background:"#0b0b0c"},children:a.jsxs("div",{className:"mx-auto flex max-w-[1180px] flex-col items-start gap-8 px-6 py-8 lg:flex-row lg:items-start",children:[a.jsxs("div",{className:"sticky top-8 flex flex-col items-center gap-3",children:[a.jsx("div",{className:"overflow-hidden",style:{width:ue.breedte,height:ue.hoogte,borderRadius:38,background:"#000",boxShadow:"0 0 0 8px #17171a, 0 24px 60px rgba(0,0,0,0.55)"},children:a.jsx("iframe",{ref:ee,src:"/lab/mobiel-producer/frame",title:"Mobiele producer",className:"h-full w-full border-0"})}),a.jsx("div",{className:"flex gap-1.5",children:H.map((e,t)=>a.jsxs("button",{onClick:()=>q(t),className:"px-2.5 py-1 text-[11px] font-bold",style:{borderRadius:8,background:t===J?O:R,color:t===J?"#fff":E},children:[e.naam,"px"]},e.naam))})]}),a.jsxs("div",{className:"w-full max-w-[340px] px-4 py-4",style:{background:C,borderRadius:16},children:[a.jsx("div",{className:"text-[11px] font-bold uppercase tracking-[0.14em]",style:{color:B},children:"Mobiele producer"}),a.jsx("div",{className:"mb-4 mt-1 text-[11px] font-semibold leading-snug",style:{color:B}

1,children:"Je kijkt naar de échte /producer in een telefoon-viewport. De startstand is wat er nu live staat: kop van /home (40px + pijltje), roze rand om de balk, tegels twee per rij, en géén uitstalvak — dat staat mobiel niet meer op de pagina."}),a.jsx("div",{className:"mb-2 text-[11px] font-bold uppercase tracking-[0.14em]",style:{color:B},children:"Tekst"}),a.jsx("div",{className:"mb-1 text-[11px] font-semibold",style:{color:B},children:"Titel"}),a.jsx("textarea",{value:K,onChange:e=>{A(e.target.value),V([]),U([])},rows:2,className:"mb-2 w-full resize-none px-2 py-1.5 text-[12px] font-semibold",style:{borderRadius:8,background:$,color:T,boxShadow:`inset 0 0 0 1px ${G}`}}),a.jsx("div",{className:"mb-1 text-[11px] font-semibold",style:{color:B},children:"Klik een woord = naar de volgende regel · shift-klik = kleur"}),a.jsx("div",{className:"mb-3 flex flex-wrap gap-1",children:ae.map((e,t)=>{const l=W.includes(t),s=Q.includes(t);return a.jsxs("button",{onClick:e=>{e.shiftKey?U(e=>s?e.filter(e=>e!==t):[...e,t]):t>0&&V(e=>l?e.filter(e=>e!==t):[...e,t])},className:"px-1.5 py-0.5 text-[11px] font-bold",style:s?{borderRadius:6,backgroundImage:`linear-gradient(90deg, ${h}, ${v})`,color:"#0b0b0c"}:{borderRadius:6,background:R,color:l?z:E,boxShadow:l?`inset 0 0 0 1px ${O}`:"none"},children:[l?"↵ ":"",e]},`${e}-${t}`)})}),a.jsx("div",{className:"mb-1 text-[11px] font-semibold",style:{color:B},children:"Ondertitel"}),a.jsx("input",{value:D,onChange:e=>I(e.target.value),className:"mb-3 w-full px-2 py-1.5 text-[12px] font-semibold",style:{borderRadius:8,background:$,color:T,boxShadow:`inset 0 0 0 1px ${G}`}}),a.jsx(L,{label:"Titelgrootte",waarde:`${o.titelGrootte??30}px`,children:a.jsx("input",{type:"range",min:18,max:56,step:1,value:o.titelGrootte??30,onChange:e=>ne("titelGrootte",Number(e.target.value)),className:"w-full",style:{accentColor:O}})}),a.jsx(L,{label:"Regelhoogte",waarde:`${(o.titelRegelhoogte??1.25).toFixed(2)}`,children:a.jsx("input",{type:"range",min:.9,max:1.8,step:.05,value:o.titelRegelhoogte??1.25,onChange:e=>ne("titelRegelhoogte",Number(e.target.value)),className:"w-full",style:{accentColor:O}})}),a.jsx(L,{label:"Onder de titel",waarde:`${o.ruimteTitel??12}px`,children:a.jsx("input",{type:"range",min:0,max:60,step:1,value:o.ruimteTitel??12,onChange:e=>ne("ruimteTitel",Number(e.target.value)),className:"w-full",style:{accentColor:O}})}),a.jsx(P,{children:"Pijltje"}),a.jsx(L,{label:"Tonen",children:a.jsx("button",{onClick:()=>de("aan",!c.aan),className:"px-2.5 py-1 text-[11px] font-bold",style:{borderRadius:8,background:c.aan?O:R,color:c.aan?"#fff":E},children:c.aan?"aan (home-stand)":"uit"})}),a.jsx(L,{label:"Links/rechts",waarde:`${c.dx}px`,children:a.jsx("input",{type:"range",min:-120,max:120,step:1,value:c.dx,disabled:!c.aan,onChange:e=>de("dx",Number(e.target.value)),className:"w-full",style:{accentColor:O,opacity:c.aan?1:.35}})}),a.jsx(L,{label:"Hoger/lager",waarde:`${c.dy}px`,children:a.jsx("input",{type:"range",min:-120,max:120,step:1,value:c.dy,disabled:!c.aan,onChange:e=>de("dy",Number(e.target.value)),className:"w-full",style:{accentColor:O,opacity:c.aan?1:.35}})}),a.jsx(L,{label:"Grootte",waarde:`${c.scale.toFixed(2)}×`,children:a.jsx("input",{type:"range",min:.5,max:5,step:.05,value:c.scale,disabled:!c.aan,onChange:e=>de("scale",Number(e.target.value)),className:"w-full",style:{accentColor:O,opacity:c.aan?1:.35}})}),a.jsx(P,{children:"Promptbalk"}),a.jsx(L,{label:"Rand",children:a.jsx("div",{className:"flex flex-wrap gap-1",children:["productie","wit","roze","hairline","geen"].map(e=>a.jsx("button",{onClick:()=>ie("rand",e),className:"px-2.5 py-1 text-[11px] font-bold",style:{borderRadius:8,background:r.rand===e?O:R,color:r.rand===e?"#fff":E},children:e},e))})}),a.jsx(L,{label:"Randdikte",waarde:`${r.randDikte}px`,children:a.jsx("input",{type:"range",min:.5,max:4,step:.5,value:r.randDikte,onChange:e=>ie("randDikte",Number(e.target.value)),className:"w-full",style:{accentColor:O}})}),a.jsx(L,{label:"Radius",waarde:null==r.radius?"rail (productie)":`${r.radius}px`,children:a.jsxs("div",{className:"flex items-center gap-2",children:[a.jsx("button",{onClick:()=>ie("radius",null==r.radius?24:null),className:"shrink-0 px-2 py-1 text-[11px] font-bold",style:{borderRadius:8,background:null==r.radius?R:O,color:null==r.radius?E:"#fff"},children:null==r.radius?"eigen":"rail"}),a.jsx("input",{type:"range",min:0,max:40,step:1,value:r.radius??24,disabled:null==r.radius,onChange:e=>ie("radius",Number(e.target.value)),className:"w-full",style:{accentColor:O,opacity:null==r.radius?.35:1}})]})}),a.jsx(L,{label:"Balk hoger/lager",waarde:`${r.ruimteBoven>0?"+":""}${r.ruimteBoven}px`,children:a.jsx("input",{type:"range",min:-80,max:120,step:1,value:r.ruimteBoven,onChange:e=>ie("ruimteBoven",Number(e.target.value)),className:"w-full",style:{accentColor:O}})}),a.jsx(L,{label:"Zijmarge",waarde:`${r.zijmarge}px`,children:a.jsx("input",{type:"range",min:0,max:48,step:1,value:r.zijmarge,onChange:e=>ie("zijmarge",Number(e.target.value)),className:"w-full",style:{accentColor:O}})}

1),a.jsx(P,{children:"Quick Start-tegels"}),a.jsx(L,{label:"Boven de tegels",waarde:`${t.ruimteBoven}px`,children:a.jsx("input",{type:"range",min:0,max:96,step:1,value:t.ruimteBoven,onChange:e=>oe("ruimteBoven",Number(e.target.value)),className:"w-full",style:{accentColor:O}})}),a.jsx(L,{label:"Per rij",children:a.jsx("div",{className:"flex gap-1",children:[0,2,3].map(e=>a.jsx("button",{onClick:()=>oe("kolommen",e),className:"px-2.5 py-1 text-[11px] font-bold",style:{borderRadius:8,background:t.kolommen===e?O:R,color:t.kolommen===e?"#fff":E},children:0===e?"carousel":`${e} breed`},e))})}),a.jsx(L,{label:"Tegelmaat",waarde:me?"vult de kolom":`${t.maat}px`,children:a.jsx("input",{type:"range",min:110,max:260,step:2,value:t.maat,disabled:me,onChange:e=>oe("maat",Number(e.target.value)),className:"w-full",style:{accentColor:O,opacity:me?.35:1}})}),a.jsx(L,{label:"Tussenruimte",waarde:`${t.gap}px`,children:a.jsx("input",{type:"range",min:0,max:28,step:1,value:t.gap,onChange:e=>oe("gap",Number(e.target.value)),className:"w-full",style:{accentColor:O}})}),a.jsx(L,{label:"Radius",waarde:`${t.radius}px`,children:a.jsx("input",{type:"range",min:0,max:32,step:1,value:t.radius,onChange:e=>oe("radius",Number(e.target.value)),className:"w-full",style:{accentColor:O}})}),a.jsx(L,{label:"Rand",children:a.jsx("div",{className:"flex flex-wrap gap-1",children:["hairline","wit","roze","geen"].map(e=>a.jsx("button",{onClick:()=>oe("rand",e),className:"px-2.5 py-1 text-[11px] font-bold",style:{borderRadius:8,background:t.rand===e?O:R,color:t.rand===e?"#fff":E},children:e},e))})}),a.jsxs("div",{className:"mt-4 flex gap-1.5",style:{borderTop:`1px solid ${G}`,paddingTop:12},children:[a.jsxs("select",{value:"",onChange:e=>{const a=Z.find(a=>a.naam===e.target.value);a&&(s(a.skin),a.balk&&n(a.balk),a.maten&&i(a.maten),a.pijl&&p(a.pijl),null!=a.titelTekst&&A(a.titelTekst),null!=a.subtitel&&I(a.subtitel),V(a.breek??[]),U(a.nadruk??j),_(a.naam))},className:"min-w-0 flex-1 px-2 py-1.5 text-[12px] font-semibold",style:{borderRadius:8,background:R,color:T,border:"none"},children:[a.jsx("option",{value:"",children:Y?`Geladen: ${Y}`:Z.length?"Stand laden…":"Nog niets bewaard"}),Z.map(e=>a.jsx("option",{value:e.naam,children:e.naam},e.naam))]}),a.jsx("button",{onClick:()=>{var e;const a=null==(e=window.prompt("Naam voor deze producer-stand:",Y??""))?void 0:e.trim();a&&((e=>{X(e);try{localStorage.setItem(F,JSON.stringify(e))}catch{b.error("Opslaan in de browser mislukt")}})([...Z.filter(e=>e.naam!==a),{naam:a,skin:t,balk:r,maten:o,pijl:c,titelTekst:K,subtitel:D,breek:W,nadruk:Q}]),_(a),b.success(`"${a}" bewaard`))},className:"px-2.5 py-1.5 text-[11px] font-bold",style:{borderRadius:8,background:O,color:"#fff"},children:"Opslaan"})]}),a.jsx("button",{onClick:()=>{navigator.clipboard.writeText(JSON.stringify({maten:o,pijltje:c,promptbalk:r,tegels:t,titel:te,subtitel:D},null,2)).then(()=>b.success("Producer-JSON gekopieerd")).catch(()=>b.error("Kopiëren mislukt"))},className:"mt-2 w-full px-2 py-1.5 text-[11px] font-bold",style:{borderRadius:8,background:R,color:T,boxShadow:`inset 0 0 0 1px ${G}`},children:"Copy JSON"}),a.jsxs("div",{className:"mt-1.5 flex gap-1.5",children:[a.jsx("button",{onClick:()=>ce("live"),className:"flex-1 px-2 py-1.5 text-[11px] font-bold",style:{borderRadius:8,background:"transparent",color:E,boxShadow:`inset 0 0 0 1px ${G}`},children:"Live stand"}),a.jsx("button",{onClick:()=>ce("kaal"),className:"flex-1 px-2 py-1.5 text-[11px] font-bold",style:{borderRadius:8,background:"transparent",color:E,boxShadow:`inset 0 0 0 1px ${G}`},children:"Kale stand"})]})]})]})})}export{J as MobielProducerFrame,q as default};