\n OSO STUDIO\n \n \n

▧ Imagen{const f=e.target.files?.[0];if(f)upload(f);e.currentTarget.value=\"\"}}/>

\n \n

\n\n

\n {panel===\"layers\"&&

{doc.pages.map((p,i)=>)}

{[...page.elements].reverse().map(e=>

setSel(x.shiftKey?[...new Set([...sel,e.id])]:[e.id])} className={\"mb-1 flex items-center gap-2 rounded-xl px-2 py-2 text-sm \"+(sel.includes(e.id)?\"bg-black text-white\":\"hover:bg-white\")}>{e.name}

)}

}\n {panel===\"assets\"&&

Assets

+ Subir{const f=e.target.files?.[0];if(f)upload(f);e.currentTarget.value=\"\"}}/>

{assets.length===0?

Aún no hay recursos.

{assets.map(a=>)}

}

}\n {panel===\"brand\"&&

Brand Kit

Marcachange(d=>{d.brand.name=e.target.value},\"Marca\")}/>Principalchange(d=>{d.brand.primary=e.target.value},\"Marca\")}/>Secundariochange(d=>{d.brand.secondary=e.target.value},\"Marca\")}/>Acentochange(d=>{d.brand.accent=e.target.value},\"Marca\")}/>Fuentechange(d=>{d.brand.font=e.target.value},\"Marca\")}/>

}\n {panel===\"ai\"&&

Copiloto

{sel.length?\"Trabajará sobre la selección.\":\"Trabajará sobre el diseño completo.\"}

setAi(e.target.value)} className=\"w-full rounded-xl border p-3 text-sm\" placeholder=\"Ej: haz el título más premium\"/><button disabled={busy} onClick={()=>askAI()} className=\"w-full rounded-xl bg-black py-3 text-sm font-black text-white\">{busy?\"Pensando\":\"✦ Proponer cambios\"}</button><div className=\"grid grid-cols-2 gap-2\"><button className=\"mini\" onClick={()=>askAI(\"Mejora jerarquía, balance y espaciado sin cambiar el contenido\")}>Mejorar</button><button className=\"mini\" onClick={()=>askAI(\"Haz el diseño más premium y limpio\")}>Premium</button><button className=\"mini col-span-2\" disabled={busy} onClick={generateAIImage}>✦ Generar imagen como capa</button></div>{cmds.length>0&&<div className=\"rounded-xl border bg-white p-3\"><b className=\"text-sm\">Propuesta · {aiProvider}</b><div className=\"mt-2 text-xs\">{cmds.map((c,i)=><div key={i} className=\"mb-1 rounded bg-slate-50 p-2\">{c.type}</div>)}</div><div className=\"mt-2 grid grid-cols-2 gap-2\"><button onClick={applyAI} className=\"rounded-lg bg-emerald-500 py-2 text-xs font-black text-white\">Aplicar</button><button onClick={()=>setCmds([])} className=\"mini\">Cancelar</button></div></div>}</div>}\n    {panel===\"versions\"&&<div className=\"p-3\"><div className=\"mb-3 flex items-center justify-between\"><h3 className=\"font-black\">Versiones</h3><button onClick={saveVersion} className=\"mini\">+ Guardar</button></div>{versions.length===0?<p className=\"text-xs text-slate-400\">Todavía no hay checkpoints.</p>:<div className=\"space-y-2\">{versions.map(v=><button key={v.id} onClick={()=>restoreVersion(v)} className=\"w-full rounded-xl border bg-white p-3 text-left\"><b className=\"block truncate text-xs\">{v.name}</b><span className=\"mt-1 block text-[10px] text-slate-400\">{new Date(v.createdAt).toLocaleString()}</span></button>)}</div>}</div>}\n   </aside>\n\n   <main className=\"order-1 overflow-auto bg-[#d8d8d5] lg:order-2\">\n    <div className=\"sticky top-0 z-20 flex h-11 items-center justify-center gap-2 bg-[#efefec]\"><button className=\"mini\" onClick={()=>setZoom(Math.max(.15,zoom-.1))}>−</button><span className=\"w-12 text-center text-xs font-black\">{Math.round(zoom*100)}%</span><button className=\"mini\" onClick={()=>setZoom(Math.min(2,zoom+.1))}>+</button><button className={\"mini \"+(grid?\"bg-black text-white\":\"\")} onClick={()=>setGrid(!grid)}>Grid</button><button className={\"mini \"+(snap?\"bg-black text-white\":\"\")} onClick={()=>setSnap(!snap)}>Snap</button><div className=\"hidden gap-1 md:flex\"><button className=\"mini\" onClick={()=>preset(1080,1920)}>9:16</button><button className=\"mini\" onClick={()=>preset(1080,1080)}>1:1</button><button className=\"mini\" onClick={()=>preset(1080,1350)}>4:5</button><button className=\"mini\" onClick={()=>preset(1920,1080)}>16:9</button></div></div>\n    <div className=\"min-h-[calc(100vh-110px)] min-w-max p-12\" onPointerDown={()=>setSel([])}><div className=\"mx-auto bg-white shadow-2xl\" style={{width:doc.width*zoom,height:doc.height*zoom}}><svg ref={svg} viewBox={\"0 0 \"+doc.width+\" \"+doc.height} width=\"100%\" height=\"100%\" className=\"block touch-none\" style={{background:page.bg}}>{grid&&<defs><pattern id=\"grid\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\"><path d=\"M20 0H0V20\" fill=\"none\" stroke=\"#000\" strokeOpacity=\".06\"/></pattern></defs>}{grid&&<rect width=\"100%\" height=\"100%\" fill=\"url(#grid)\" pointerEvents=\"none\"/>}{page.elements.map(e=>e.hidden?null:<g key={e.id} opacity={e.o} transform={e.r?\"rotate(\"+e.r+\" \"+(e.x+e.w/2)+\" \"+(e.y+e.h/2)+\")\":undefined} onPointerDown={x=>drag(x,e)} style={{cursor:e.locked?\"not-allowed\":\"move\"}}>{e.type===\"rect\"&&<rect x={e.x} y={e.y} width={e.w} height={e.h} rx={e.radius||0} fill={e.fill} stroke={e.stroke||\"none\"} strokeWidth={e.sw||0}/>} {e.type===\"ellipse\"&&<ellipse cx={e.x+e.w/2} cy={e.y+e.h/2} rx={e.w/2} ry={e.h/2} fill={e.fill} stroke={e.stroke||\"none\"} strokeWidth={e.sw||0}/>} {e.type===\"triangle\"&&<polygon points={(e.x+e.w/2)+\",\"+e.y+\" \"+(e.x+e.w)+\",\"+(e.y+e.h)+\" \"+e.x+\",\"+(e.y+e.h)} fill={e.fill} stroke={e.stroke||\"none\"} strokeWidth={e.sw||0}/>} {e.type===\"star\"&&<polygon points={starPoints(e)} fill={e.fill} stroke={e.stroke||\"none\"} strokeWidth={e.sw||0}/>} {e.type===\"line\"&&<line x1={e.x} y1={e.y+e.h/2} x2={e.x+e.w} y2={e.y+e.h/2} stroke={e.stroke||e.fill||\"#111\"} strokeWidth={e.sw||Math.max(2,e.h)} strokeLinecap=\"round\"/>} {e.type===\"image\"&&<>{e.mask&&e.mask!==\"none\"&&<defs><clipPath id={\"clip-\"+e.id}>{e.mask===\"circle\"?<ellipse cx={e.x+e.w/2} cy={e.y+e.h/2} rx={e.w/2} ry={e.h/2}/>:<rect x={e.x} y={e.y} width={e.w} height={e.h} rx={Math.min(e.w,e.h)*.12}/>}</clipPath></defs>}<image href={e.src} x={e.x} y={e.y} width={e.w} height={e.h} preserveAspectRatio={imagePAR(e)} clipPath={e.mask&&e.mask!==\"none\"?\"url(#clip-\"+e.id+\")\":undefined} style={{filter:\"brightness(\"+(e.brightness??1)+\") contrast(\"+(e.contrast??1)+\") saturate(\"+(e.saturate??1)+\") blur(\"+(e.blur??0)+\"px)\"}}/></>} {e.type===\"text\"&&<foreignObject x={e.x} y={e.y} width={e.w} height={e.h}><div xmlns=\"http://www.w3.org/1999/xhtml\" style={{fontFamily:e.font||\"Inter\",fontSize:(e.fs||48)+\"px\",fontWeight:e.fw||400,fontStyle:e.italic?\"italic\":\"normal\",textDecoration:e.underline?\"underline\":\"none\",letterSpacing:(e.letterSpacing||0)+\"px\",lineHeight:e.lineHeight||1.05,color:e.fill||\"#111\",width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",overflow:\"hidden\",whiteSpace:\"pre-wrap\",textAlign:e.textAlign||\"left\"}}>{e.text}</div></foreignObject>}{sel.includes(e.id)&&<rect x={e.x-3} y={e.y-3} width={e.w+6} height={e.h+6} fill=\"none\" stroke=\"#2563eb\" strokeWidth=\"3\" strokeDasharray=\"8 6\" pointerEvents=\"none\"/>}{sel.length===1&&sel[0]===e.id&&!e.locked&&<rect x={e.x+e.w-12} y={e.y+e.h-12} width=\"24\" height=\"24\" rx=\"4\" fill=\"white\" stroke=\"#2563eb\" strokeWidth=\"3\" onPointerDown={x=>resize(x,e)} style={{cursor:\"nwse-resize\"}}/>}</g>)}</svg></div></div>\n   </main>\n\n   <aside className=\"order-3 border-l bg-[#f7f7f5] p-4\">\n    {!one?<div className=\"space-y-4\"><p className=\"text-xs font-black text-slate-400\">DOCUMENTO</p><h3 className=\"text-lg font-black\">{doc.width} × {doc.height}</h3><label className=\"field\">Fondo<input type=\"color\" value={page.bg} onChange={e=>pageChange(p=>{p.bg=e.target.value},\"Fondo\")}/></label><div className=\"grid grid-cols-2 gap-2\"><label className=\"field\">Ancho<input type=\"number\" value={doc.width} onChange={e=>change(d=>{d.width=Math.max(100,+e.target.value)},\"Tamaño\")}/></label><label className=\"field\">Alto<input type=\"number\" value={doc.height} onChange={e=>change(d=>{d.height=Math.max(100,+e.target.value)},\"Tamaño\")}/></label></div><div className=\"border-t pt-3\"><p className=\"mb-2 text-xs font-black text-slate-400\">EXPORTAR</p><div className=\"grid grid-cols-3 gap-2\"><button className=\"mini\" onClick={()=>exportRaster(\"png\")}>PNG</button><button className=\"mini\" onClick={()=>exportRaster(\"jpeg\")}>JPG</button><button className=\"mini\" onClick={exportPDF}>PDF</button></div></div></div>:<div className=\"space-y-3\"><div className=\"flex justify-between\"><h3 className=\"font-black\">{one.name}</h3><button onClick={remove} className=\"mini\">⌫</button></div><div className=\"grid grid-cols-2 gap-2\"><label className=\"field\">X<input type=\"number\" value={Math.round(one.x)} onChange={e=>patch(sel,{x:+e.target.value})}/></label><label className=\"field\">Y<input type=\"number\" value={Math.round(one.y)} onChange={e=>patch(sel,{y:+e.target.value})}/></label><label className=\"field\">Ancho<input type=\"number\" value={Math.round(one.w)} onChange={e=>patch(sel,{w:+e.target.value})}/></label><label className=\"field\">Alto<input type=\"number\" value={Math.round(one.h)} onChange={e=>patch(sel,{h:+e.target.value})}/></label></div>{one.type!==\"image\"&&<label className=\"field\">Color<input type=\"color\" value={one.fill||\"#111827\"} onChange={e=>patch(sel,{fill:e.target.value})}/></label>}{(one.type===\"rect\"||one.type===\"ellipse\"||one.type===\"triangle\"||one.type===\"star\"||one.type===\"line\")&&<div className=\"grid grid-cols-2 gap-2\"><label className=\"field\">Borde<input type=\"color\" value={one.stroke||\"#111827\"} onChange={e=>patch(sel,{stroke:e.target.value})}/></label><label className=\"field\">Grosor<input type=\"number\" min=\"0\" value={one.sw||0} onChange={e=>patch(sel,{sw:+e.target.value})}/></label></div>}{one.type===\"rect\"&&<label className=\"field\">Esquinas<input type=\"range\" min=\"0\" max=\"150\" value={one.radius||0} onChange={e=>patch(sel,{radius:+e.target.value})}/></label>}{one.type===\"text\"&&<><label className=\"field\">Texto<textarea rows={3} value={one.text||\"\"} onChange={e=>patch(sel,{text:e.target.value})}/></label><div className=\"grid grid-cols-2 gap-2\"><label className=\"field\">Tamaño<input type=\"number\" value={one.fs||48} onChange={e=>patch(sel,{fs:+e.target.value})}/></label><label className=\"field\">Peso<select value={one.fw||400} onChange={e=>patch(sel,{fw:+e.target.value})}><option value=\"400\">Regular</option><option value=\"700\">Bold</option><option value=\"900\">Black</option></select></label></div><label className=\"field\">Fuente<select value={one.font||\"Inter\"} onChange={e=>patch(sel,{font:e.target.value})}>{fonts.map(f=><option key={f} value={f}>{f}</option>)}</select></label><div className=\"grid grid-cols-2 gap-2\"><button className={\"mini \"+(one.italic?\"bg-black text-white\":\"\")} onClick={()=>patch(sel,{italic:!one.italic})}><i>I</i> Itálica</button><button className={\"mini \"+(one.underline?\"bg-black text-white\":\"\")} onClick={()=>patch(sel,{underline:!one.underline})}><u>U</u> Subrayar</button></div><div className=\"grid grid-cols-2 gap-2\"><label className=\"field\">Espaciado<input type=\"number\" step=\".5\" value={one.letterSpacing||0} onChange={e=>patch(sel,{letterSpacing:+e.target.value})}/></label><label className=\"field\">Interlínea<input type=\"number\" min=\".5\" max=\"3\" step=\".05\" value={one.lineHeight||1.05} onChange={e=>patch(sel,{lineHeight:+e.target.value})}/></label></div><div className=\"grid grid-cols-3 gap-2\"><button className=\"mini\" onClick={()=>patch(sel,{textAlign:\"left\"})}>Izq</button><button className=\"mini\" onClick={()=>patch(sel,{textAlign:\"center\"})}>Centro</button><button className=\"mini\" onClick={()=>patch(sel,{textAlign:\"right\"})}>Der</button></div></>}{one.type===\"image\"&&<div className=\"space-y-2\"><div className=\"grid grid-cols-2 gap-2\"><button className={\"mini \"+((one.fit||\"cover\")===\"cover\"?\"bg-black text-white\":\"\")} onClick={()=>patch(sel,{fit:\"cover\"})}>Fill</button><button className={\"mini \"+(one.fit===\"contain\"?\"bg-black text-white\":\"\")} onClick={()=>patch(sel,{fit:\"contain\"})}>Fit</button></div><div className=\"grid grid-cols-3 gap-2\"><button className={\"mini \"+((one.mask||\"none\")===\"none\"?\"bg-black text-white\":\"\")} onClick={()=>patch(sel,{mask:\"none\"})}>Libre</button><button className={\"mini \"+(one.mask===\"circle\"?\"bg-black text-white\":\"\")} onClick={()=>patch(sel,{mask:\"circle\"})}>Círculo</button><button className={\"mini \"+(one.mask===\"round\"?\"bg-black text-white\":\"\")} onClick={()=>patch(sel,{mask:\"round\"})}>Round</button></div><label className=\"field\">Encuadre X<input type=\"range\" min=\"0\" max=\"100\" value={one.cropX??50} onChange={e=>patch(sel,{cropX:+e.target.value})}/></label><label className=\"field\">Encuadre Y<input type=\"range\" min=\"0\" max=\"100\" value={one.cropY??50} onChange={e=>patch(sel,{cropY:+e.target.value})}/></label><label className=\"field\">Brillo<input type=\"range\" min=\".2\" max=\"2\" step=\".05\" value={one.brightness??1} onChange={e=>patch(sel,{brightness:+e.target.value})}/></label><label className=\"field\">Contraste<input type=\"range\" min=\".2\" max=\"2\" step=\".05\" value={one.contrast??1} onChange={e=>patch(sel,{contrast:+e.target.value})}/></label><label className=\"field\">Saturación<input type=\"range\" min=\"0\" max=\"2\" step=\".05\" value={one.saturate??1} onChange={e=>patch(sel,{saturate:+e.target.value})}/></label><label className=\"field\">Blur<input type=\"range\" min=\"0\" max=\"20\" step=\".5\" value={one.blur??0} onChange={e=>patch(sel,{blur:+e.target.value})}/></label></div>}<label className=\"field\">Rotación<input type=\"range\" min=\"-180\" max=\"180\" value={one.r||0} onChange={e=>patch(sel,{r:+e.target.value})}/></label><label className=\"field\">Opacidad<input type=\"range\" min=\"0\" max=\"1\" step=\".01\" value={one.o} onChange={e=>patch(sel,{o:+e.target.value})}/></label>{sel.length>1&&<div className=\"grid grid-cols-3 gap-2 border-t pt-3\"><button className=\"mini\" onClick={()=>align(\"left\")}>←</button><button className=\"mini\" onClick={()=>align(\"center\")}>↔</button><button className=\"mini\" onClick={()=>align(\"right\")}>→</button><button className=\"mini\" onClick={()=>align(\"top\")}>↑</button><button className=\"mini\" onClick={()=>align(\"middle\")}>↕</button><button className=\"mini\" onClick={()=>align(\"bottom\")}>↓</button></div>}<div className=\"grid grid-cols-2 gap-2 border-t pt-3\"><button className=\"mini\" onClick={duplicate}>Duplicar</button><button className=\"mini\" onClick={selected.some(e=>e.group)?ungroup:group}>{selected.some(e=>e.group)?\"Desagrupar\":\"Agrupar\"}</button><button className=\"mini\" onClick={()=>front()}>Al frente</button><button className=\"mini\" onClick={()=>front(true)}>Al fondo</button><button className=\"mini col-span-2\" onClick={remove}>Eliminar</button></div></div>}\n   </aside>\n  </div>\n\n  <div className=\"fixed bottom-3 left-1/2 z-50 flex max-w-[calc(100vw-16px)] -translate-x-1/2 gap-1 overflow-x-auto rounded-2xl bg-white p-2 shadow-xl lg:hidden\"><button onClick={()=>add(\"text\")} className=\"mobile\">T</button><button onClick={()=>add(\"rect\")} className=\"mobile\">▭</button><button onClick={()=>add(\"ellipse\")} className=\"mobile\">○</button><button onClick={()=>add(\"triangle\")} className=\"mobile\">△</button><button onClick={()=>add(\"star\")} className=\"mobile\">★</button><button onClick={()=>add(\"line\")} className=\"mobile\">━</button><label className=\"mobile cursor-pointer\">▧<input type=\"file\" accept=\"image/*\" className=\"hidden\" onChange={e=>{const f=e.target.files?.[0];if(f)upload(f)}}/></label><button onClick={()=>setPanel(\"ai\")} className=\"mobile\">✦</button><button onClick={()=>exportRaster(\"png\")} className=\"mobile\">⇩</button></div>\n  <style>{\".tool{height:34px;min-width:34px;border-radius:9px;background:rgba(255,255,255,.08);font-weight:800}.tool.wide{padding:0 10px}.side{flex:1;padding:12px 8px;font-size:12px;font-weight:900;color:#94a3b8;border-bottom:2px solid transparent}.side.active{background:white;color:#111827;border-color:#111827}.mini{border:1px solid rgba(15,23,42,.1);background:white;border-radius:9px;padding:7px 9px;font-size:11px;font-weight:800}.field{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:900;color:#94a3b8}.field input,.field textarea,.field select{width:100%;border:1px solid #e2e8f0;border-radius:9px;padding:8px;color:#0f172a;background:white;font-size:12px;font-weight:600}.field input[type=color]{height:36px;padding:3px}.mobile{width:42px;height:42px;border-radius:12px;background:#111;color:white;font-weight:900}\"}</style>\n </div>\n}\n\nexport default App;","deleted",false,"label",[47,48,24],"frontend","components","387bc42b-0cd4-488e-85f7-b7c587303640",["D",1789425736088],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","BEARVERSE Studio OSO production hub","imageUrl","userId","b162e777-26d5-4b57-b5d4-824de1b425e2","pinnedFileId","01a0a215-d9fe-72e9-a2b6-a62a318746cc","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a087a7-039d-766a-a2cb-d9a1a861d44b","tursoName","387bc42b0cd4488e85f7b7c587303640","tursoHostname","387bc42b0cd4488e85f7b7c587303640-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789522252250],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_109":105},"org",{"_9":10,"_102":103,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":32,"_11":93,"_22":30,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Agent Ia","avatar","https://lh3.googleusercontent.com/a/ACg8ocJFdiW2REahwLO-JAErcTTOgHyYDVN6VBKDk9RmathkK-sumQ=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":67,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":93,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>