\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===\"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\")&&<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 -translate-x-1/2 gap-1 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><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;","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React,{useEffect,useMemo,useRef,useState} from \"https://esm.sh/react@18.2.0\";\n\ntype El={id:string,type:\"text\"|\"rect\"|\"ellipse\"|\"triangle\"|\"star\"|\"line\"|\"image\",name:string,x:number,y:number,w:number,h:number,r?:number,fill?:string,stroke?:string,sw?:number,radius?:number,text?:string,fs?:number,fw?:number,font?:string,italic?:boolean,underline?:boolean,letterSpacing?:number,lineHeight?:number,textAlign?:\"left\"|\"center\"|\"right\",src?:string,fit?:\"cover\"|\"contain\",mask?:\"none\"|\"circle\"|\"round\",cropX?:number,cropY?:number,brightness?:number,contrast?:number,saturate?:number,blur?:number,o:number,hidden?:boolean,locked?:boolean,group?:string};\ntype Pg={id:string,name:string,bg:string,elements:El[]};\ntype Doc={id:string,name:string,width:number,height:number,activePageId:string,pages:Pg[],brand:{name:string,primary:string,secondary:string,accent:string,font:string}};\ntype Project={id:string,title:string};\ntype Asset={id:string,name:string,mime:string,source:string,url:string,createdAt:string};\ntype Version={id:string,name:string,createdAt:string};\n\nconst fonts=[\"Inter\",\"Montserrat\",\"Poppins\",\"DM Sans\",\"Playfair Display\",\"Bebas Neue\",\"Oswald\",\"Raleway\",\"Lora\",\"Roboto\"];\nconst uid=()=>crypto.randomUUID();\nconst copy=<T,>(x:T):T=>JSON.parse(JSON.stringify(x));\nconst empty=(id:string,name:string):Doc=>{const p=uid();return{id,name,width:1080,height:1350,activePageId:p,pages:[{id:p,name:\"Página 1\",bg:\"#ffffff\",elements:[]}],brand:{name:\"\",primary:\"#111827\",secondary:\"#e5e7eb\",accent:\"#ef4444\",font:\"Inter\"}}};\n\nfunction App(){\n const [projects,setProjects]=useState<Project[]>([]);\n const [pid,setPid]=useState(\"\");\n const [doc,setDoc]=useState<Doc>(()=>empty(\"local\",\"Mi diseño\"));\n const [sel,setSel]=useState<string[]>([]);\n const [hist,setHist]=useState<Doc[]>([]);\n const [redo,setRedo]=useState<Doc[]>([]);\n const [zoom,setZoom]=useState(.58);\n const [grid,setGrid]=useState(true);\n const [snap,setSnap]=useState(true);\n const [panel,setPanel]=useState<\"layers\"|\"assets\"|\"brand\"|\"ai\"|\"versions\">(\"layers\");\n const [status,setStatus]=useState(\"Listo\");\n const [ai,setAi]=useState(\"\");\n const [cmds,setCmds]=useState<any[]>([]);\n const [aiProvider,setAiProvider]=useState(\"\");\n const [busy,setBusy]=useState(false);\n const [assets,setAssets]=useState<Asset[]>([]);\n const [versions,setVersions]=useState<Version[]>([]);\n const svg=useRef<SVGSVGElement|null>(null);\n const save=useRef<number|undefined>();\n const clipboard=useRef<El[]>([]);\n const page=useMemo(()=>doc.pages.find(p=>p.id===doc.activePageId)||doc.pages[0],[doc]);\n const selected=useMemo(()=>page.elements.filter(e=>sel.includes(e.id)),[page,sel]);\n const one=selected[0];\n const imagePAR=(e:El)=>{const x=(e.cropX??50)<34?\"xMin\":(e.cropX??50)>66?\"xMax\":\"xMid\",y=(e.cropY??50)<34?\"YMin\":(e.cropY??50)>66?\"YMax\":\"YMid\";return x+y+\" \"+(e.fit===\"contain\"?\"meet\":\"slice\")};\n\n const commit=(n:Doc,label=\"Cambio\")=>{setHist(h=>[...h.slice(-39),copy(doc)]);setRedo([]);setDoc(n);setStatus(label)};\n const change=(fn:(d:Doc)=>void,label=\"Cambio\")=>{const n=copy(doc);fn(n);commit(n,label)};\n const pageChange=(fn:(p:Pg)=>void,label=\"Cambio\")=>change(d=>fn(d.pages.find(p=>p.id===d.activePageId)!),label);\n const patch=(ids:string[],v:Partial<El>)=>pageChange(p=>p.elements.forEach(e=>{if(ids.includes(e.id))Object.assign(e,v)}),\"Propiedades\");\n\n async function loadAssets(){const r=await fetch(\"/api/assets\");const j=await r.json();setAssets(j.assets||[])}\n async function loadVersions(id:string){const r=await fetch(\"/api/documents/\"+id+\"/versions\");const j=await r.json();setVersions(j.versions||[])}\n async function openProject(id:string){setStatus(\"Abriendo\");const r=await fetch(\"/api/documents/\"+id);const j=await r.json();const n=j.document||empty(id,\"Mi diseño\");if(!n.brand)n.brand=empty(id,n.name).brand;setDoc(n);setPid(id);setSel([]);setHist([]);setRedo([]);localStorage.setItem(\"oso.project\",id);await loadVersions(id);setStatus(\"Listo\")}\n async function load(){const [r]=await Promise.all([fetch(\"/api/projects\"),loadAssets()]);const j=await r.json();let list=j.projects||[];setProjects(list);let id=localStorage.getItem(\"oso.project\")||list[0]?.id;if(!id){const q=await fetch(\"/api/projects\",{method:\"POST\",headers:{\"content-type\":\"application/json\"},body:JSON.stringify({title:\"Mi diseño\"})});const z=await q.json();list=[z.project];setProjects(list);id=z.project.id}await openProject(id)}\n useEffect(()=>{load().catch(()=>setStatus(\"Error cargando\"))},[]);\n useEffect(()=>{if(!pid)return;if(save.current)clearTimeout(save.current);save.current=window.setTimeout(async()=>{setStatus(\"Guardando\");const r=await fetch(\"/api/documents/\"+pid,{method:\"PUT\",headers:{\"content-type\":\"application/json\"},body:JSON.stringify(doc)});setStatus(r.ok?\"Guardado\":\"Error al guardar\")},700);return()=>{if(save.current)clearTimeout(save.current)}},[doc,pid]);\n\n const undo=()=>{if(!hist.length)return;setRedo(r=>[copy(doc),...r]);setDoc(hist[hist.length-1]);setHist(h=>h.slice(0,-1));setSel([])};\n const redoNow=()=>{if(!redo.length)return;setHist(h=>[...h,copy(doc)]);setDoc(redo[0]);setRedo(r=>r.slice(1));setSel([])};\n\n async function createProject(){const q=await fetch(\"/api/projects\",{method:\"POST\",headers:{\"content-type\":\"application/json\"},body:JSON.stringify({title:\"Nuevo diseño\"})});const z=await q.json();setProjects(p=>[z.project,...p]);setDoc(z.document);setPid(z.project.id);localStorage.setItem(\"oso.project\",z.project.id)}\n async function renameProject(){const name=prompt(\"Nombre\",doc.name)?.trim();if(!name)return;await fetch(\"/api/projects/\"+pid,{method:\"PATCH\",headers:{\"content-type\":\"application/json\"},body:JSON.stringify({title:name})});setProjects(p=>p.map(x=>x.id===pid?{...x,title:name}:x));change(d=>{d.name=name},\"Renombrado\")}\n async function saveVersion(){if(!pid)return;setStatus(\"Guardando versión\");await fetch(\"/api/documents/\"+pid,{method:\"PUT\",headers:{\"content-type\":\"application/json\"},body:JSON.stringify(doc)});const name=prompt(\"Nombre de la versión\",\"Checkpoint \"+(versions.length+1))?.trim()||\"Checkpoint \"+(versions.length+1);const r=await fetch(\"/api/documents/\"+pid+\"/versions\",{method:\"POST\",headers:{\"content-type\":\"application/json\"},body:JSON.stringify({name})});const j=await r.json();if(r.ok){setVersions(v=>[j.version,...v]);setStatus(\"Versión guardada\")}else setStatus(j.error||\"Error\")}\n async function restoreVersion(v:Version){if(!confirm(\"¿Restaurar \"+v.name+\"? El estado actual seguirá disponible con Undo mientras permanezcas en la sesión.\"))return;const r=await fetch(\"/api/documents/\"+pid+\"/versions/\"+v.id+\"/restore\",{method:\"POST\"});const j=await r.json();if(r.ok){setHist(h=>[...h.slice(-39),copy(doc)]);setDoc(j.document);setRedo([]);setSel([]);setStatus(\"Versión restaurada\")}else setStatus(j.error||\"Error\")}\n function insertAsset(a:Asset){const w=Math.min(doc.width*.6,600),e:El={id:uid(),type:\"image\",name:a.name,x:(doc.width-w)/2,y:(doc.height-w)/2,w,h:w,src:a.url,o:1};pageChange(p=>p.elements.push(e),\"Asset\");setSel([e.id])}\n\n function add(type:El[\"type\"]){const names:Record<string,string>={text:\"Texto\",image:\"Imagen\",ellipse:\"Círculo\",triangle:\"Triángulo\",star:\"Estrella\",line:\"Línea\",rect:\"Rectángulo\"};const e:El={id:uid(),type,name:names[type]||\"Elemento\",x:doc.width*.3,y:doc.height*.3,w:type===\"text\"?420:type===\"line\"?320:280,h:type===\"text\"?120:type===\"line\"?8:220,fill:type===\"text\"?doc.brand.primary:(type===\"ellipse\"||type===\"star\")?doc.brand.accent:doc.brand.secondary,stroke:type===\"line\"?doc.brand.primary:undefined,sw:type===\"line\"?6:0,text:type===\"text\"?\"Escribe aquí\":undefined,fs:64,fw:700,font:doc.brand.font,o:1};pageChange(p=>p.elements.push(e),\"Agregar\");setSel([e.id])}\n function remove(){pageChange(p=>{p.elements=p.elements.filter(e=>!sel.includes(e.id))},\"Eliminar\");setSel([])}\n function duplicate(){const a=selected.map(e=>({...copy(e),id:uid(),x:e.x+24,y:e.y+24,name:e.name+\" copia\"}));pageChange(p=>p.elements.push(...a),\"Duplicar\");setSel(a.map(e=>e.id))}\n function front(back=false){if(!one)return;pageChange(p=>{const i=p.elements.findIndex(e=>e.id===one.id);const a=p.elements.splice(i,1)[0];p.elements.splice(back?0:p.elements.length,0,a)},\"Orden\")}\n function group(){if(sel.length<2)return;const g=uid();pageChange(p=>p.elements.forEach(e=>{if(sel.includes(e.id))e.group=g}),\"Agrupar\")}\n function ungroup(){pageChange(p=>p.elements.forEach(e=>{if(sel.includes(e.id))delete e.group}),\"Desagrupar\")}\n function align(mode:\"left\"|\"center\"|\"right\"|\"top\"|\"middle\"|\"bottom\"){if(selected.length<2)return;pageChange(p=>{const a=p.elements.filter(e=>sel.includes(e.id)),minX=Math.min(...a.map(e=>e.x)),maxX=Math.max(...a.map(e=>e.x+e.w)),minY=Math.min(...a.map(e=>e.y)),maxY=Math.max(...a.map(e=>e.y+e.h));a.forEach(e=>{if(mode===\"left\")e.x=minX;if(mode===\"center\")e.x=(minX+maxX-e.w)/2;if(mode===\"right\")e.x=maxX-e.w;if(mode===\"top\")e.y=minY;if(mode===\"middle\")e.y=(minY+maxY-e.h)/2;if(mode===\"bottom\")e.y=maxY-e.h})},\"Alinear\")}\n\n function toSvg(x:number,y:number){const s=svg.current;if(!s)return{x:0,y:0};const p=s.createSVGPoint();p.x=x;p.y=y;const m=s.getScreenCTM();const q=m?p.matrixTransform(m.inverse()):p;return{x:q.x,y:q.y}}\n function drag(ev:React.PointerEvent,e:El){ev.stopPropagation();if(e.locked)return;const base=e.group?page.elements.filter(x=>x.group===e.group).map(x=>x.id):[e.id];const ids=ev.shiftKey?[...new Set([...sel,...base])]:base;setSel(ids);const start=toSvg(ev.clientX,ev.clientY);const origin=page.elements.filter(x=>ids.includes(x.id)).map(x=>({id:x.id,x:x.x,y:x.y}));const snapDoc=copy(doc);const move=(x:PointerEvent)=>{const p=toSvg(x.clientX,x.clientY);setDoc(cur=>{const n=copy(cur),pg=n.pages.find(q=>q.id===n.activePageId)!;origin.forEach(o=>{const a=pg.elements.find(q=>q.id===o.id);if(a){const nx=o.x+p.x-start.x,ny=o.y+p.y-start.y;a.x=snap?Math.round(nx/10)*10:nx;a.y=snap?Math.round(ny/10)*10:ny}});return n})};const up=()=>{window.removeEventListener(\"pointermove\",move);window.removeEventListener(\"pointerup\",up);setHist(h=>[...h.slice(-39),snapDoc]);setRedo([])};window.addEventListener(\"pointermove\",move);window.addEventListener(\"pointerup\",up)}\n function resize(ev:React.PointerEvent,e:El){ev.stopPropagation();if(e.locked)return;const start=toSvg(ev.clientX,ev.clientY),ow=e.w,oh=e.h,snapshot=copy(doc);const move=(x:PointerEvent)=>{const p=toSvg(x.clientX,x.clientY);setDoc(cur=>{const n=copy(cur),a=n.pages.find(q=>q.id===n.activePageId)!.elements.find(q=>q.id===e.id);if(a){a.w=Math.max(20,ow+p.x-start.x);a.h=Math.max(20,oh+p.y-start.y)}return n})};const up=()=>{window.removeEventListener(\"pointermove\",move);window.removeEventListener(\"pointerup\",up);setHist(h=>[...h.slice(-39),snapshot]);setRedo([])};window.addEventListener(\"pointermove\",move);window.addEventListener(\"pointerup\",up)}\n\n async function upload(file:File){setStatus(\"Procesando imagen\");const im=await new Promise<HTMLImageElement>((ok,no)=>{const i=new Image();i.onload=()=>ok(i);i.onerror=no;i.src=URL.createObjectURL(file)});const sc=Math.min(1,1400/Math.max(im.width,im.height));const c=document.createElement(\"canvas\");c.width=Math.round(im.width*sc);c.height=Math.round(im.height*sc);c.getContext(\"2d\")!.drawImage(im,0,0,c.width,c.height);const b=await new Promise<Blob>(ok=>c.toBlob(x=>ok(x!),\"image/jpeg\",.82));const arr=new Uint8Array(await b.arrayBuffer());let s=\"\";for(let i=0;i<arr.length;i+=32000)s+=String.fromCharCode(...arr.subarray(i,i+32000));const r=await fetch(\"/api/assets\",{method:\"POST\",headers:{\"content-type\":\"application/json\"},body:JSON.stringify({data:btoa(s),mime:\"image/jpeg\",name:file.name})});const j=await r.json();if(!r.ok){setStatus(j.error||\"Error\");return}const w=Math.min(doc.width*.6,700),h=w*c.height/c.width;const e:El={id:uid(),type:\"image\",name:file.name,x:(doc.width-w)/2,y:(doc.height-h)/2,w,h,src:j.url,o:1};pageChange(p=>p.elements.push(e),\"Imagen\");setSel([e.id]);await loadAssets();setStatus(\"Imagen lista\")}\n\n function newPage(dup=false){const p:Pg=dup?{...copy(page),id:uid(),name:\"Página \"+(doc.pages.length+1),elements:page.elements.map(e=>({...copy(e),id:uid()}))}:{id:uid(),name:\"Página \"+(doc.pages.length+1),bg:\"#ffffff\",elements:[]};change(d=>{d.pages.push(p);d.activePageId=p.id},\"Página\");setSel([])}\n function delPage(){if(doc.pages.length<2)return;change(d=>{d.pages=d.pages.filter(p=>p.id!==d.activePageId);d.activePageId=d.pages[0].id},\"Eliminar página\");setSel([])}\n function preset(w:number,h:number){change(d=>{d.width=w;d.height=h},\"Formato\")}\n function template(){pageChange(p=>{p.elements=[];p.elements.push({id:uid(),type:\"text\",name:\"Título\",x:80,y:100,w:doc.width-160,h:160,fill:doc.brand.primary,text:\"TU MENSAJE\",fs:92,fw:900,font:doc.brand.font,o:1},{id:uid(),type:\"rect\",name:\"Bloque\",x:80,y:330,w:doc.width-160,h:520,fill:doc.brand.secondary,o:1},{id:uid(),type:\"text\",name:\"CTA\",x:80,y:920,w:doc.width-160,h:90,fill:doc.brand.accent,text:\"LLAMADO A LA ACCIÓN\",fs:38,fw:800,font:doc.brand.font,o:1})},\"Plantilla\")}\n\n async function exportRaster(kind:\"png\"|\"jpeg\"=\"png\",download=true,pg=page){const out=document.createElementNS(\"http://www.w3.org/2000/svg\",\"svg\");out.setAttribute(\"xmlns\",\"http://www.w3.org/2000/svg\");out.setAttribute(\"width\",String(doc.width));out.setAttribute(\"height\",String(doc.height));out.setAttribute(\"viewBox\",\"0 0 \"+doc.width+\" \"+doc.height);const bg=document.createElementNS(out.namespaceURI,\"rect\");bg.setAttribute(\"width\",\"100%\");bg.setAttribute(\"height\",\"100%\");bg.setAttribute(\"fill\",pg.bg);out.appendChild(bg);for(const e of pg.elements.filter(x=>!x.hidden)){let n:SVGElement;if(e.type===\"text\"){n=document.createElementNS(out.namespaceURI,\"text\");n.textContent=e.text||\"\";n.setAttribute(\"x\",String(e.x));n.setAttribute(\"y\",String(e.y+(e.fs||48)));n.setAttribute(\"font-size\",String(e.fs||48));n.setAttribute(\"font-weight\",String(e.fw||400));n.setAttribute(\"font-family\",e.font||\"Inter\");n.setAttribute(\"fill\",e.fill||\"#111\")}else if(e.type===\"ellipse\"){n=document.createElementNS(out.namespaceURI,\"ellipse\");n.setAttribute(\"cx\",String(e.x+e.w/2));n.setAttribute(\"cy\",String(e.y+e.h/2));n.setAttribute(\"rx\",String(e.w/2));n.setAttribute(\"ry\",String(e.h/2));n.setAttribute(\"fill\",e.fill||\"#ddd\")}else if(e.type===\"image\"){n=document.createElementNS(out.namespaceURI,\"image\");n.setAttribute(\"href\",e.src||\"\");n.setAttribute(\"x\",String(e.x));n.setAttribute(\"y\",String(e.y));n.setAttribute(\"width\",String(e.w));n.setAttribute(\"height\",String(e.h));n.setAttribute(\"preserveAspectRatio\",imagePAR(e));if(e.mask&&e.mask!==\"none\"){const defs=document.createElementNS(out.namespaceURI,\"defs\"),clip=document.createElementNS(out.namespaceURI,\"clipPath\"),cid=\"export-clip-\"+e.id;clip.setAttribute(\"id\",cid);let shape:SVGElement;if(e.mask===\"circle\"){shape=document.createElementNS(out.namespaceURI,\"ellipse\");shape.setAttribute(\"cx\",String(e.x+e.w/2));shape.setAttribute(\"cy\",String(e.y+e.h/2));shape.setAttribute(\"rx\",String(e.w/2));shape.setAttribute(\"ry\",String(e.h/2))}else{shape=document.createElementNS(out.namespaceURI,\"rect\");shape.setAttribute(\"x\",String(e.x));shape.setAttribute(\"y\",String(e.y));shape.setAttribute(\"width\",String(e.w));shape.setAttribute(\"height\",String(e.h));shape.setAttribute(\"rx\",String(Math.min(e.w,e.h)*.12))}clip.appendChild(shape);defs.appendChild(clip);out.appendChild(defs);n.setAttribute(\"clip-path\",\"url(#\"+cid+\")\")}}else{n=document.createElementNS(out.namespaceURI,\"rect\");n.setAttribute(\"x\",String(e.x));n.setAttribute(\"y\",String(e.y));n.setAttribute(\"width\",String(e.w));n.setAttribute(\"height\",String(e.h));n.setAttribute(\"fill\",e.fill||\"#ddd\")}n.setAttribute(\"opacity\",String(e.o));if(e.r)n.setAttribute(\"transform\",\"rotate(\"+e.r+\" \"+(e.x+e.w/2)+\" \"+(e.y+e.h/2)+\")\");if((e.type===\"rect\"||e.type===\"ellipse\")&&e.stroke){n.setAttribute(\"stroke\",e.stroke);n.setAttribute(\"stroke-width\",String(e.sw||0))}if(e.type===\"rect\"&&e.radius)n.setAttribute(\"rx\",String(e.radius));if(e.type===\"image\")n.setAttribute(\"style\",\"filter:brightness(\"+(e.brightness??1)+\") contrast(\"+(e.contrast??1)+\") saturate(\"+(e.saturate??1)+\") blur(\"+(e.blur??0)+\"px)\");if(e.type===\"text\"&&e.textAlign===\"center\"){n.setAttribute(\"x\",String(e.x+e.w/2));n.setAttribute(\"text-anchor\",\"middle\")}if(e.type===\"text\"&&e.textAlign===\"right\"){n.setAttribute(\"x\",String(e.x+e.w));n.setAttribute(\"text-anchor\",\"end\")}out.appendChild(n)}const url=URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(out)],{type:\"image/svg+xml\"}));const im=new Image();im.src=url;await im.decode();const c=document.createElement(\"canvas\");c.width=doc.width;c.height=doc.height;c.getContext(\"2d\")!.drawImage(im,0,0);URL.revokeObjectURL(url);const data=c.toDataURL(kind===\"png\"?\"image/png\":\"image/jpeg\",.94);if(download){const a=document.createElement(\"a\");a.download=doc.name+(kind===\"png\"?\".png\":\".jpg\");a.href=data;a.click()}return data}\n\n async function exportPDF(){setStatus(\"Creando PDF\");const m=await import(\"https://esm.sh/jspdf@2.5.2\");const q=new m.jsPDF({orientation:doc.width>doc.height?\"landscape\":\"portrait\",unit:\"px\",format:[doc.width,doc.height],hotfixes:[\"px_scaling\"]});for(let i=0;i<doc.pages.length;i++){if(i)q.addPage([doc.width,doc.height],doc.width>doc.height?\"landscape\":\"portrait\");const data=await exportRaster(\"png\",false,doc.pages[i]);q.addImage(data,\"PNG\",0,0,doc.width,doc.height)}q.save(doc.name+\".pdf\");setStatus(\"PDF listo\")}\n async function generateAIImage(){const promptText=ai.trim()||prompt(\"Describe la imagen\")?.trim();if(!promptText)return;setBusy(true);setStatus(\"Generando imagen AI\");const r=await fetch(\"/api/ai/image\",{method:\"POST\",headers:{\"content-type\":\"application/json\"},body:JSON.stringify({prompt:promptText})});const j=await r.json();setBusy(false);if(!r.ok){setStatus(j.error||\"Error imagen AI\");return}const w=Math.min(doc.width*.6,600),e:El={id:uid(),type:\"image\",name:\"Imagen AI\",x:(doc.width-w)/2,y:(doc.height-w)/2,w,h:w,src:j.url,o:1};pageChange(p=>p.elements.push(e),\"Imagen AI\");setSel([e.id]);await loadAssets();setStatus(\"Imagen AI lista\")}\n async function askAI(text=ai){if(!text.trim())return;setBusy(true);setStatus(\"AI analizando\");const r=await fetch(\"/api/ai/commands\",{method:\"POST\",headers:{\"content-type\":\"application/json\"},body:JSON.stringify({instruction:text,selection:selected.map(e=>({...e,src:e.src?\"[image]\":undefined})),page:{width:doc.width,height:doc.height,background:page.bg},brand:doc.brand})});const j=await r.json();setBusy(false);if(!r.ok){setStatus(j.error||\"Error AI\");return}setCmds(j.commands||[]);setAiProvider(j.provider||\"AI\");setPanel(\"ai\");setStatus(\"Propuesta lista\")}\n function applyAI(){const n=copy(doc),p=n.pages.find(x=>x.id===n.activePageId)!;for(const c of cmds){if(c.type===\"update\")p.elements.forEach(e=>{if(c.ids?.includes(e.id))Object.assign(e,c.patch||{})});if(c.type===\"delete\")p.elements=p.elements.filter(e=>!c.ids?.includes(e.id));if(c.type===\"duplicate\")p.elements.push(...p.elements.filter(e=>c.ids?.includes(e.id)).map(e=>({...copy(e),id:uid(),x:e.x+24,y:e.y+24})));if(c.type===\"addText\")p.elements.push({id:uid(),type:\"text\",name:\"Texto AI\",x:c.x||100,y:c.y||100,w:500,h:120,fill:c.fill||n.brand.primary,text:c.text||\"Texto\",fs:c.fontSize||54,fw:700,font:n.brand.font,o:1});if(c.type===\"addRect\")p.elements.push({id:uid(),type:\"rect\",name:\"Forma AI\",x:c.x||100,y:c.y||100,w:c.width||300,h:c.height||150,fill:c.fill||n.brand.secondary,o:1});if(c.type===\"canvas\"){n.width=Math.max(100,Math.min(5000,+c.width||n.width));n.height=Math.max(100,Math.min(5000,+c.height||n.height))}}commit(n,\"AI aplicada · \"+aiProvider);setCmds([]);setAi(\"\")}\n\n useEffect(()=>{const k=(e:KeyboardEvent)=>{const t=e.target as HTMLElement,edit=[\"INPUT\",\"TEXTAREA\",\"SELECT\"].includes(t?.tagName),key=e.key.toLowerCase(),mod=e.ctrlKey||e.metaKey;if(mod&&key===\"z\"){e.preventDefault();e.shiftKey?redoNow():undo()}else if(mod&&key===\"y\"){e.preventDefault();redoNow()}else if(!edit&&mod&&key===\"c\"){e.preventDefault();clipboard.current=copy(selected)}else if(!edit&&mod&&key===\"v\"){e.preventDefault();if(!clipboard.current.length)return;const a=clipboard.current.map(x=>({...copy(x),id:uid(),x:x.x+20,y:x.y+20,name:x.name+\" copia\"}));pageChange(p=>p.elements.push(...a),\"Pegar\");setSel(a.map(x=>x.id));clipboard.current=copy(a)}else if(!edit&&(e.key===\"Delete\"||e.key===\"Backspace\")){e.preventDefault();remove()}else if(!edit&&mod&&key===\"d\"){e.preventDefault();duplicate()}else if(!edit&&[\"ArrowLeft\",\"ArrowRight\",\"ArrowUp\",\"ArrowDown\"].includes(e.key)&&sel.length){e.preventDefault();const step=e.shiftKey?10:1;const dx=e.key===\"ArrowLeft\"?-step:e.key===\"ArrowRight\"?step:0,dy=e.key===\"ArrowUp\"?-step:e.key===\"ArrowDown\"?step:0;pageChange(p=>p.elements.forEach(x=>{if(sel.includes(x.id)){x.x+=dx;x.y+=dy}}),\"Mover\")}};window.addEventListener(\"keydown\",k);return()=>window.removeEventListener(\"keydown\",k)},[doc,sel,hist,redo,selected]);\n\n return <div className=\"min-h-screen bg-[#dededb] text-slate-900\">\n  <header className=\"sticky top-0 z-50 flex h-14 items-center gap-2 bg-[#111] px-3 text-white\">\n   <b>OSO <span className=\"text-white/40\">STUDIO</span></b>\n   <select value={pid} onChange={e=>openProject(e.target.value)} className=\"max-w-48 rounded-lg bg-white/10 px-2 py-2 text-sm\"><option value=\"\" className=\"text-black\">Proyecto</option>{projects.map(p=><option key={p.id} value={p.id} className=\"text-black\">{p.title}</option>)}</select>\n   <button onClick={createProject} className=\"tool\">+</button><button onClick={renameProject} className=\"tool\">✎</button><button onClick={undo} className=\"tool\">↶</button><button onClick={redoNow} className=\"tool\">↷</button>\n   <div className=\"hidden md:flex gap-1\"><button onClick={()=>add(\"text\")} className=\"tool wide\">T Texto</button><button onClick={()=>add(\"rect\")} className=\"tool wide\">▭ Forma</button><button onClick={()=>add(\"ellipse\")} className=\"tool wide\">○ Círculo</button><label className=\"tool wide cursor-pointer\">▧ Imagen<input type=\"file\" accept=\"image/*\" className=\"hidden\" onChange={e=>{const f=e.target.files?.[0];if(f)upload(f);e.currentTarget.value=\"\"}}/></label></div>\n   <span className=\"ml-auto hidden text-[11px] text-white/50 sm:block\">{status}</span><button onClick={()=>setPanel(\"ai\")} className=\"rounded-xl bg-white px-3 py-2 text-xs font-black text-black\">✦ AI</button><button onClick={()=>exportRaster(\"png\")} className=\"rounded-xl bg-emerald-500 px-3 py-2 text-xs font-black\">Exportar</button>\n  </header>\n\n  <div className=\"grid min-h-[calc(100vh-56px)] lg:grid-cols-[240px_minmax(0,1fr)_285px]\">\n   <aside className=\"order-2 border-r bg-[#f7f7f5] lg:order-1\">\n    <div className=\"grid grid-cols-5 border-b\"><button onClick={()=>setPanel(\"layers\")} className={\"side \"+(panel===\"layers\"?\"active\":\"\")}>Capas</button><button onClick={()=>setPanel(\"assets\")} className={\"side \"+(panel===\"assets\"?\"active\":\"\")}>Assets</button><button onClick={()=>setPanel(\"brand\")} className={\"side \"+(panel===\"brand\"?\"active\":\"\")}>Marca</button><button onClick={()=>setPanel(\"ai\")} className={\"side \"+(panel===\"ai\"?\"active\":\"\")}>AI</button><button onClick={()=>setPanel(\"versions\")} className={\"side \"+(panel===\"versions\"?\"active\":\"\")}>Hist.</button></div>\n    {panel===\"layers\"&&<div className=\"p-3\"><div className=\"mb-2 flex gap-2\"><button className=\"mini flex-1\" onClick={()=>newPage()}>+ Página</button><button className=\"mini\" onClick={()=>newPage(true)}>Duplicar</button><button className=\"mini\" onClick={delPage}>⌫</button></div><div className=\"mb-3 flex gap-1\">{doc.pages.map((p,i)=><button key={p.id} onClick={()=>{setDoc({...doc,activePageId:p.id});setSel([])}} className={\"mini \"+(p.id===doc.activePageId?\"bg-black text-white\":\"\")}>{i+1}</button>)}</div>{[...page.elements].reverse().map(e=><div key={e.id} onClick={x=>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\")}><button onClick={x=>{x.stopPropagation();patch([e.id],{hidden:!e.hidden})}}>{e.hidden?\"○\":\"●\"}</button><span className=\"min-w-0 flex-1 truncate\">{e.name}</span><button onClick={x=>{x.stopPropagation();patch([e.id],{locked:!e.locked})}}>{e.locked?\"🔒\":\"\"}</button></div>)}</div>}\n    {panel===\"assets\"&&<div className=\"p-3\"><div className=\"mb-3 flex items-center justify-between\"><h3 className=\"font-black\">Assets</h3><label className=\"mini cursor-pointer\">+ Subir<input type=\"file\" accept=\"image/*\" className=\"hidden\" onChange={e=>{const f=e.target.files?.[0];if(f)upload(f);e.currentTarget.value=\"\"}}/></label></div>{assets.length===0?<p className=\"text-xs text-slate-400\">Aún no hay recursos.</p>:<div className=\"grid grid-cols-2 gap-2\">{assets.map(a=><button key={a.id} onClick={()=>insertAsset(a)} className=\"overflow-hidden rounded-xl border bg-white text-left\"><img src={a.url} className=\"aspect-square w-full object-cover\"/><span className=\"block truncate px-2 py-2 text-[10px] font-bold\">{a.name}</span></button>)}</div>}</div>}\n    {panel===\"brand\"&&<div className=\"space-y-3 p-4\"><h3 className=\"font-black\">Brand Kit</h3><label className=\"field\">Marca<input value={doc.brand.name} onChange={e=>change(d=>{d.brand.name=e.target.value},\"Marca\")}/></label><label className=\"field\">Principal<input type=\"color\" value={doc.brand.primary} onChange={e=>change(d=>{d.brand.primary=e.target.value},\"Marca\")}/></label><label className=\"field\">Secundario<input type=\"color\" value={doc.brand.secondary} onChange={e=>change(d=>{d.brand.secondary=e.target.value},\"Marca\")}/></label><label className=\"field\">Acento<input type=\"color\" value={doc.brand.accent} onChange={e=>change(d=>{d.brand.accent=e.target.value},\"Marca\")}/></label><label className=\"field\">Fuente<input value={doc.brand.font} onChange={e=>change(d=>{d.brand.font=e.target.value},\"Marca\")}/></label><button onClick={template} className=\"mini w-full\">Aplicar plantilla</button></div>}\n    {panel===\"ai\"&&<div className=\"space-y-3 p-4\"><h3 className=\"font-black\">Copiloto</h3><p className=\"text-xs text-slate-500\">{sel.length?\"Trabajará sobre la selección.\":\"Trabajará sobre el diseño completo.\"}</p><textarea rows={5} value={ai} onChange={e=>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===\"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\")&&<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 -translate-x-1/2 gap-1 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><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;","createdAt",["D",1789501732163],"branchVersion","branchId","663c383f-0f97-4edf-ae18-8b85fadc66cc","id","387bc42b-0cd4-488e-85f7-b7c587303640","bearverse-oso",["D",1789425736088],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","BEARVERSE Studio OSO production hub","imageUrl","b162e777-26d5-4b57-b5d4-824de1b425e2","pinnedFileId","01a0a215-d9fe-72e9-a2b6-a62a318746cc","pinPreview",true,"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",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",90,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","agentia","handle","displayName","Agent Ia","avatar","https://lh3.googleusercontent.com/a/ACg8ocJFdiW2REahwLO-JAErcTTOgHyYDVN6VBKDk9RmathkK-sumQ=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":241,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":242,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":243,"_85":244,"_87":245,"_89":25},"tree",[177,184,185,186],"files",[177,178,179,180,181,182,183,184,185,186],"counts",{"_167":64,"_168":151,"_169":64,"_170":171,"_172":173},"contents",[132,133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":161,"_32":162,"_30":163,"_138":-5,"_42":43,"_41":151,"_140":60,"_39":164,"_13":64,"_34":165,"_36":-5,"_24":25,"_145":-5,"_27":166},{"_44":155,"_32":156,"_30":157,"_138":-5,"_42":43,"_41":151,"_140":60,"_39":158,"_13":64,"_34":20,"_36":159,"_24":25,"_145":-5,"_27":160},{"_44":148,"_32":149,"_30":150,"_138":-5,"_42":43,"_41":151,"_140":60,"_39":152,"_13":64,"_34":20,"_36":153,"_24":25,"_145":-5,"_27":154},{"_44":136,"_32":137,"_30":58,"_138":-5,"_42":43,"_41":139,"_140":60,"_39":141,"_13":142,"_34":143,"_36":144,"_24":25,"_145":146,"_27":147},"b02c39bd-0ddf-4db0-8747-68d6edacad7e","index.ts","parentId",50,"latest",["D",1789501487279],10,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS oso_projects (\n  id INTEGER PRIMARY KEY AUTOINCREMENT,\n  title TEXT NOT NULL,\n  concept TEXT NOT NULL DEFAULT '',\n  stage TEXT NOT NULL DEFAULT 'Design',\n  created_at TEXT NOT NULL,\n  updated_at TEXT NOT NULL\n)`);\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS oso_assets (\n  id TEXT PRIMARY KEY,\n  name TEXT NOT NULL,\n  mime TEXT NOT NULL,\n  source TEXT NOT NULL DEFAULT 'upload',\n  created_at TEXT NOT NULL\n)`);\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS oso_versions (\n  id TEXT PRIMARY KEY,\n  project_id TEXT NOT NULL,\n  name TEXT NOT NULL,\n  created_at TEXT NOT NULL\n)`);\n\nfunction defaultDocument(id: string, name = \"Mi diseño\") {\n  const pageId = crypto.randomUUID();\n  return {\n    id,\n    name,\n    width: 1080,\n    height: 1350,\n    unit: \"px\",\n    dpi: 72,\n    background: \"#ffffff\",\n    activePageId: pageId,\n    pages: [{ id: pageId, name: \"Página 1\", background: \"#ffffff\", elements: [] }],\n    brand: { name: \"\", primary: \"#111827\", secondary: \"#f3f4f6\", accent: \"#ef4444\", font: \"Inter\" },\n    updatedAt: new Date().toISOString()\n  };\n}\n\nfunction cleanText(value: unknown, max = 5000) {\n  return String(value ?? \"\").trim().slice(0, max);\n}\n\nfunction extractJsonArray(text: string) {\n  const fenced = text.match(/```(?:json)?\\s*([\\s\\S]*?)```/i)?.[1] ?? text;\n  const start = fenced.indexOf(\"[\");\n  const end = fenced.lastIndexOf(\"]\");\n  if (start < 0 || end <= start) return [];\n  try {\n    const parsed = JSON.parse(fenced.slice(start, end + 1));\n    return Array.isArray(parsed) ? parsed : [];\n  } catch {\n    return [];\n  }\n}\n\nasync function runOpenAI(prompt: string) {\n  const key = Deno.env.get(\"OPENAI_API_KEY\");\n  if (!key) throw new Error(\"OPENAI_API_KEY missing\");\n  const response = await fetch(\"https://api.openai.com/v1/responses\", {\n    method: \"POST\",\n    headers: { \"authorization\": `Bearer ${key}`, \"content-type\": \"application/json\" },\n    body: JSON.stringify({ model: \"gpt-5.6-luna\", input: prompt })\n  });\n  if (!response.ok) throw new Error(`OpenAI ${response.status}`);\n  const data = await response.json();\n  const chunks: string[] = [];\n  for (const item of data?.output ?? []) {\n    for (const part of item?.content ?? []) {\n      if (typeof part?.text === \"string\") chunks.push(part.text);\n    }\n  }\n  return chunks.join(\"\\n\").trim();\n}\n\nasync function runPublicAI(prompt: string) {\n  const response = await fetch(\"https://text.pollinations.ai/\" + encodeURIComponent(prompt) + \"?model=openai&seed=42\");\n  if (!response.ok) throw new Error(`Public AI ${response.status}`);\n  return await response.text();\n}\n\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/api/health\", (c) => c.json({ ok: true, app: \"OSO Studio\", editor: true }));\n\napp.get(\"/api/providers\", (c) => c.json({\n  providers: [\n    { id: \"openai\", name: \"GPT\", status: Deno.env.get(\"OPENAI_API_KEY\") ? \"configured\" : \"not-configured\", capabilities: [\"texto\", \"comandos\", \"visión\"], note: \"Copiloto opcional para editar el documento por comandos estructurados.\" },\n    { id: \"public\", name: \"Public AI\", status: \"ready\", capabilities: [\"texto\", \"comandos\", \"imagen\"], note: \"Fallback público para que OSO siga funcionando aunque GPT no esté conectado.\" },\n    { id: \"gemini\", name: \"Gemini\", status: Deno.env.get(\"GEMINI_API_KEY\") ? \"configured\" : \"not-configured\", capabilities: [\"multimodal\", \"video\"], note: \"Proveedor opcional preparado para futuras herramientas multimodales.\" }\n  ],\n  automaticOrder: [\"GPT\", \"Public AI\"]\n}));\n\napp.get(\"/api/projects\", async (c) => {\n  const result = await sqlite.execute(\"SELECT * FROM oso_projects ORDER BY updated_at DESC LIMIT 100\");\n  return c.json({ projects: result.rows.map((row) => ({\n    id: String(row.id),\n    title: String(row.title),\n    concept: String(row.concept),\n    stage: String(row.stage),\n    createdAt: String(row.created_at),\n    updatedAt: String(row.updated_at)\n  })) });\n});\n\napp.post(\"/api/projects\", async (c) => {\n  const body = await c.req.json();\n  const title = cleanText(body?.title, 120) || \"Mi diseño\";\n  const concept = cleanText(body?.concept, 500);\n  const now = new Date().toISOString();\n  const result = await sqlite.execute({\n    sql: \"INSERT INTO oso_projects (title, concept, stage, created_at, updated_at) VALUES (?, ?, ?, ?, ?) RETURNING id\",\n    args: [title, concept, \"Design\", now, now]\n  });\n  const id = String(result.rows[0]?.id || \"\");\n  const doc = defaultDocument(id, title);\n  await blob.setJSON(`doc:${id}`, doc);\n  return c.json({ project: { id, title, concept, stage: \"Design\", createdAt: now, updatedAt: now }, document: doc }, 201);\n});\n\napp.patch(\"/api/projects/:id\", async (c) => {\n  const id = Number(c.req.param(\"id\"));\n  const body = await c.req.json();\n  const title = cleanText(body?.title, 120);\n  if (!Number.isFinite(id) || !title) return c.json({ error: \"Datos inválidos\" }, 400);\n  const now = new Date().toISOString();\n  await sqlite.execute({ sql: \"UPDATE oso_projects SET title = ?, updated_at = ? WHERE id = ?\", args: [title, now, id] });\n  const doc = (await blob.getJSON(`doc:${id}`)) as any;\n  if (doc) await blob.setJSON(`doc:${id}`, { ...doc, name: title, updatedAt: now });\n  return c.json({ ok: true, title, updatedAt: now });\n});\n\napp.delete(\"/api/projects/:id\", async (c) => {\n  const id = Number(c.req.param(\"id\"));\n  if (!Number.isFinite(id)) return c.json({ error: \"ID inválido\" }, 400);\n  await sqlite.execute({ sql: \"DELETE FROM oso_projects WHERE id = ?\", args: [id] });\n  try { await blob.delete(`doc:${id}`); } catch {}\n  return c.json({ ok: true });\n});\n\napp.get(\"/api/documents/:id\", async (c) => {\n  const id = c.req.param(\"id\");\n  let doc = await blob.getJSON(`doc:${id}`) as any;\n  if (!doc) {\n    const row = await sqlite.execute({ sql: \"SELECT title FROM oso_projects WHERE id = ?\", args: [Number(id)] });\n    doc = defaultDocument(id, String(row.rows[0]?.title || \"Mi diseño\"));\n    await blob.setJSON(`doc:${id}`, doc);\n  }\n  return c.json({ document: doc });\n});\n\napp.put(\"/api/documents/:id\", async (c) => {\n  const id = c.req.param(\"id\");\n  const body = await c.req.json();\n  if (!body || !Array.isArray(body.pages)) return c.json({ error: \"Documento inválido\" }, 400);\n  const jsonSize = JSON.stringify(body).length;\n  if (jsonSize > 1_500_000) return c.json({ error: \"Documento demasiado grande; usa assets en vez de imágenes embebidas\" }, 413);\n  const updatedAt = new Date().toISOString();\n  await blob.setJSON(`doc:${id}`, { ...body, id, updatedAt });\n  await sqlite.execute({ sql: \"UPDATE oso_projects SET updated_at = ? WHERE id = ?\", args: [updatedAt, Number(id)] });\n  return c.json({ ok: true, updatedAt });\n});\n\napp.get(\"/api/documents/:id/versions\", async (c) => {\n  const projectId = c.req.param(\"id\");\n  const result = await sqlite.execute({ sql: \"SELECT id, name, created_at FROM oso_versions WHERE project_id = ? ORDER BY created_at DESC LIMIT 30\", args: [projectId] });\n  return c.json({ versions: result.rows.map((row) => ({ id: String(row.id), name: String(row.name), createdAt: String(row.created_at) })) });\n});\n\napp.post(\"/api/documents/:id/versions\", async (c) => {\n  const projectId = c.req.param(\"id\");\n  const current = await blob.getJSON(`doc:${projectId}`) as any;\n  if (!current) return c.json({ error: \"Documento no encontrado\" }, 404);\n  const body = await c.req.json().catch(() => ({}));\n  const versionId = crypto.randomUUID();\n  const name = cleanText(body?.name, 100) || `Versión ${new Date().toLocaleString(\"es\")}`;\n  const createdAt = new Date().toISOString();\n  await blob.setJSON(`version:${projectId}:${versionId}`, current);\n  await sqlite.execute({ sql: \"INSERT INTO oso_versions (id, project_id, name, created_at) VALUES (?, ?, ?, ?)\", args: [versionId, projectId, name, createdAt] });\n  return c.json({ version: { id: versionId, name, createdAt } }, 201);\n});\n\napp.post(\"/api/documents/:id/versions/:versionId/restore\", async (c) => {\n  const projectId = c.req.param(\"id\");\n  const versionId = c.req.param(\"versionId\");\n  const snapshot = await blob.getJSON(`version:${projectId}:${versionId}`) as any;\n  if (!snapshot) return c.json({ error: \"Versión no encontrada\" }, 404);\n  const updatedAt = new Date().toISOString();\n  const restored = { ...snapshot, id: projectId, updatedAt };\n  await blob.setJSON(`doc:${projectId}`, restored);\n  await sqlite.execute({ sql: \"UPDATE oso_projects SET updated_at = ? WHERE id = ?\", args: [updatedAt, Number(projectId)] });\n  return c.json({ document: restored });\n});\n\napp.post(\"/api/assets\", async (c) => {\n  const body = await c.req.json();\n  const data = String(body?.data || \"\");\n  const mime = String(body?.mime || \"image/jpeg\");\n  if (!/^image\\/(png|jpeg|webp|gif)$/.test(mime)) return c.json({ error: \"Formato no soportado\" }, 400);\n  if (!data || data.length > 4_000_000) return c.json({ error: \"Imagen demasiado grande\" }, 413);\n  const bytes = Uint8Array.from(atob(data), (ch) => ch.charCodeAt(0));\n  const id = crypto.randomUUID();\n  const name = cleanText(body?.name, 160) || \"Imagen\";\n  const createdAt = new Date().toISOString();\n  await blob.set(`asset:${id}`, bytes);\n  await blob.setJSON(`assetmeta:${id}`, { mime, name, createdAt });\n  await sqlite.execute({ sql: \"INSERT INTO oso_assets (id, name, mime, source, created_at) VALUES (?, ?, ?, ?, ?)\", args: [id, name, mime, \"upload\", createdAt] });\n  return c.json({ id, name, mime, source: \"upload\", url: `/api/assets/${id}`, createdAt }, 201);\n});\n\napp.get(\"/api/assets\", async (c) => {\n  const result = await sqlite.execute(\"SELECT id, name, mime, source, created_at FROM oso_assets ORDER BY created_at DESC LIMIT 100\");\n  return c.json({ assets: result.rows.map((row) => ({ id: String(row.id), name: String(row.name), mime: String(row.mime), source: String(row.source), createdAt: String(row.created_at), url: `/api/assets/${row.id}` })) });\n});\n\napp.get(\"/api/assets/:id\", async (c) => {\n  const id = c.req.param(\"id\");\n  try {\n    const [response, meta] = await Promise.all([blob.get(`asset:${id}`), blob.getJSON(`assetmeta:${id}`) as Promise<any>]);\n    const bytes = await response.arrayBuffer();\n    return new Response(bytes, {\n      headers: {\n        \"content-type\": String(meta?.mime || \"application/octet-stream\"),\n        \"cache-control\": \"public, max-age=31536000, immutable\"\n      }\n    });\n  } catch {\n    return c.json({ error: \"Asset no encontrado\" }, 404);\n  }\n});\n\napp.post(\"/api/ai/commands\", async (c) => {\n  const body = await c.req.json();\n  const instruction = cleanText(body?.instruction, 1800);\n  const selection = Array.isArray(body?.selection) ? body.selection.slice(0, 30) : [];\n  const page = body?.page ?? {};\n  const brand = body?.brand ?? {};\n  if (!instruction) return c.json({ error: \"Instrucción requerida\" }, 400);\n\n  const prompt = `You are the command engine inside OSO Studio, an editable graphic design app. Return ONLY a JSON array of commands. Never return markdown or explanations.\nAllowed commands:\n{\"type\":\"update\",\"ids\":[\"id\"],\"patch\":{\"x\":0,\"y\":0,\"width\":100,\"height\":100,\"rotation\":0,\"opacity\":1,\"fill\":\"#000000\",\"stroke\":\"#000000\",\"fontSize\":48,\"fontWeight\":700,\"fontFamily\":\"Inter\",\"text\":\"...\",\"textAlign\":\"left\"}}\n{\"type\":\"addText\",\"text\":\"...\",\"x\":100,\"y\":100,\"fontSize\":48,\"fill\":\"#111111\"}\n{\"type\":\"addRect\",\"x\":100,\"y\":100,\"width\":300,\"height\":120,\"fill\":\"#eeeeee\"}\n{\"type\":\"duplicate\",\"ids\":[\"id\"]}\n{\"type\":\"delete\",\"ids\":[\"id\"]}\n{\"type\":\"align\",\"mode\":\"left|center|right|top|middle|bottom|distributeH|distributeV\",\"ids\":[\"id\"]}\n{\"type\":\"canvas\",\"width\":1080,\"height\":1920}\nUse only fields needed. Preserve logos/images unless explicitly asked. Prefer subtle professional edits. Respect brand colors and font when available.\nPAGE: ${JSON.stringify({ width: page.width, height: page.height, background: page.background })}\nBRAND: ${JSON.stringify(brand)}\nSELECTED ELEMENTS: ${JSON.stringify(selection)}\nUSER INSTRUCTION: ${instruction}`;\n\n  let provider = \"Public AI\";\n  let text = \"\";\n  if (Deno.env.get(\"OPENAI_API_KEY\")) {\n    try { text = await runOpenAI(prompt); provider = \"GPT\"; } catch (err) { console.warn(\"GPT fallback\", err); }\n  }\n  if (!text) {\n    try { text = await runPublicAI(prompt); } catch (err) { console.warn(\"Public AI fallback\", err); }\n  }\n  let commands = extractJsonArray(text).slice(0, 25);\n  if (!commands.length) {\n    const lower = instruction.toLowerCase();\n    const ids = selection.map((item: any) => String(item?.id || \"\")).filter(Boolean);\n    const first = selection[0] as any;\n    const local: any[] = [];\n    if (lower.includes(\"9:16\") || lower.includes(\"story\") || lower.includes(\"historia\")) {\n      local.push({ type: \"canvas\", width: 1080, height: 1920 });\n    }\n    if (ids.length && (lower.includes(\"elimina\") || lower.includes(\"borra\"))) {\n      local.push({ type: \"delete\", ids });\n    } else if (ids.length && (lower.includes(\"duplica\") || lower.includes(\"copia\"))) {\n      local.push({ type: \"duplicate\", ids });\n    } else if (ids.length) {\n      const patch: Record<string, unknown> = {};\n      if (lower.includes(\"premium\") || lower.includes(\"mejora\")) {\n        if (first?.type === \"text\") patch.fontWeight = 900;\n        patch.opacity = 1;\n      }\n      if (lower.includes(\"más grande\") || lower.includes(\"agranda\")) {\n        if (first?.type === \"text\") patch.fontSize = Math.round(Number(first?.fs || first?.fontSize || 48) * 1.2);\n        else { patch.width = Math.round(Number(first?.w || first?.width || 200) * 1.2); patch.height = Math.round(Number(first?.h || first?.height || 120) * 1.2); }\n      }\n      if (lower.includes(\"más pequeño\") || lower.includes(\"reduce\")) {\n        if (first?.type === \"text\") patch.fontSize = Math.max(8, Math.round(Number(first?.fs || first?.fontSize || 48) * .82));\n        else { patch.width = Math.max(20, Math.round(Number(first?.w || first?.width || 200) * .82)); patch.height = Math.max(20, Math.round(Number(first?.h || first?.height || 120) * .82)); }\n      }\n      if (lower.includes(\"negro\")) patch.fill = \"#111111\";\n      if (lower.includes(\"blanco\")) patch.fill = \"#ffffff\";\n      if (lower.includes(\"rojo\")) patch.fill = \"#ef4444\";\n      if (lower.includes(\"azul\")) patch.fill = \"#2563eb\";\n      if (lower.includes(\"arriba\")) patch.y = Math.max(0, Number(first?.y || 0) - 100);\n      if (lower.includes(\"abajo\")) patch.y = Number(first?.y || 0) + 100;\n      if (lower.includes(\"izquierda\")) patch.x = Math.max(0, Number(first?.x || 0) - 100);\n      if (lower.includes(\"derecha\")) patch.x = Number(first?.x || 0) + 100;\n      if (Object.keys(patch).length) local.push({ type: \"update\", ids, patch });\n    }\n    if (!local.length && (lower.includes(\"rectángulo\") || lower.includes(\"rectangulo\"))) {\n      local.push({ type: \"addRect\", x: 120, y: Math.round(Number(page?.height || 1350) * .38), width: Math.max(260, Math.round(Number(page?.width || 1080) * .7)), height: 260, fill: lower.includes(\"gris\") ? \"#d1d5db\" : String(brand?.secondary || \"#e5e7eb\") });\n    }\n    if (!local.length || lower.includes(\"título\") || lower.includes(\"titulo\")) {\n      const quoted = instruction.match(/[“\"']([^”\"']{2,80})[”\"']/)?.[1];\n      const afterDiga = instruction.match(/(?:diga|que diga)\\s+([^,.]{2,80})/i)?.[1]?.replace(/\\s+(arriba|abajo).*$/i, \"\").trim();\n      local.unshift({ type: \"addText\", text: quoted || afterDiga || \"Título\", x: 100, y: 90, fontSize: 72, fill: String(brand?.primary || \"#111827\") });\n      if ((lower.includes(\"rectángulo\") || lower.includes(\"rectangulo\")) && !local.some((x) => x.type === \"addRect\")) {\n        local.push({ type: \"addRect\", x: 120, y: 320, width: Math.max(260, Math.round(Number(page?.width || 1080) * .7)), height: 260, fill: lower.includes(\"gris\") ? \"#d1d5db\" : String(brand?.secondary || \"#e5e7eb\") });\n      }\n    }\n    commands = local.slice(0, 25);\n    provider = \"OSO Local\";\n  }\n  return c.json({ commands, provider });\n});\n\napp.post(\"/api/ai/image\", async (c) => {\n  const body = await c.req.json();\n  const prompt = cleanText(body?.prompt, 1800);\n  if (!prompt) return c.json({ error: \"Prompt requerido\" }, 400);\n  const imageUrl = \"https://image.pollinations.ai/prompt/\" + encodeURIComponent(prompt + \", professional graphic design asset, clean composition, no watermark\") + \"?width=1024&height=1024&nologo=true&seed=\" + Math.floor(Math.random() * 100000);\n  const response = await fetch(imageUrl);\n  if (!response.ok) return c.json({ error: \"No se pudo generar la imagen\" }, 502);\n  const bytes = new Uint8Array(await response.arrayBuffer());\n  if (bytes.byteLength > 4_000_000) return c.json({ error: \"Imagen generada demasiado grande\" }, 413);\n  const id = crypto.randomUUID();\n  const mime = response.headers.get(\"content-type\") || \"image/jpeg\";\n  const createdAt = new Date().toISOString();\n  await blob.set(`asset:${id}`, bytes);\n  await blob.setJSON(`assetmeta:${id}`, { mime, name: \"AI image\", createdAt });\n  await sqlite.execute({ sql: \"INSERT INTO oso_assets (id, name, mime, source, created_at) VALUES (?, ?, ?, ?, ?)\", args: [id, \"AI image\", mime, \"ai\", createdAt] });\n  return c.json({ id, name: \"AI image\", mime, source: \"ai\", url: `/api/assets/${id}`, createdAt, provider: \"Public AI\" });\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","label","oso-studio",[137],"66692d4a-a29d-4725-ba12-06de47383037","README.md","01a0a215-d9fe-72e9-a2b6-a2ffb0860dc7",1,["D",1789425736088],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n    Browser -->|\"GET /\"| Hono[\"index.ts<br/>(Hono server)\"]\n    Hono -->|serves| HTML[\"root.tsx\"]\n    HTML -->|loads| Entry[\"index.tsx\"]\n    Entry -->|renders| App[\"App.tsx\"]\n    App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts              ← Hono backend (serves frontend + API routes)\nfrontend/\n  root.tsx            ← HTML shell (stamps immutable asset URLs)\n  index.tsx           ← React entrypoint (mounts <App />)\n  favicon.svg         ← App icon\n  components/\n    App.tsx            ← Root component (layout + view source link)\n    Counter.tsx        ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n   frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n   immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n   alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n   replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n  [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n  a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[149],"61778cd7-d3f5-42ac-9393-bd6856f09cc3","CHANGELOG.md","01a0a215-d9fe-72e9-a2b6-9d6ff5a6540c",["D",1789425736088],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n  shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n  `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n  serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the `<title>`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <title>React Hono Val Town Starter</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"font-sans text-gray-800 p-6\">\n          <main>\n            <div id=\"root\" />\n          </main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n```\n\n2. In your Hono entrypoint, import `Root` and `serveImmutableFile`, and replace\n   your `/` and frontend file routes with:\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n```\n\n3. Delete `frontend/index.html` (and any now-unused `serveFile` import).\n",[156],"a3948efc-7bd8-440c-87fe-e1a3413fd0f3","frontend","01a0a215-d9fe-72e9-a2b6-9ab876ec702c",["D",1789425736088],"directory",[162],"pulls","branches","forks","envVars",{"_174":64,"_176":64},"connections",{"_174":64,"_175":64},"count","unfilledCount","emptyCount",{"_44":161,"_32":162,"_30":163,"_138":-5,"_42":43,"_41":151,"_140":60,"_39":238,"_13":64,"_34":165,"_36":-5,"_24":25,"_145":-5,"_188":239,"_27":240},{"_44":234,"_32":228,"_30":223,"_138":163,"_42":43,"_41":151,"_140":60,"_39":235,"_13":64,"_34":165,"_36":-5,"_24":25,"_145":-5,"_188":236,"_27":237},{"_44":229,"_32":33,"_30":31,"_138":223,"_42":43,"_41":14,"_140":25,"_39":230,"_13":231,"_34":35,"_36":38,"_24":25,"_145":-5,"_188":232,"_27":233},{"_44":220,"_32":221,"_30":222,"_138":223,"_42":43,"_41":151,"_140":60,"_39":224,"_13":64,"_34":35,"_36":225,"_24":25,"_145":-5,"_188":226,"_27":227},{"_44":213,"_32":214,"_30":215,"_138":163,"_42":43,"_41":151,"_140":60,"_39":216,"_13":64,"_34":20,"_36":217,"_24":25,"_145":-5,"_188":218,"_27":219},{"_44":206,"_32":207,"_30":208,"_138":163,"_42":43,"_41":151,"_140":60,"_39":209,"_13":64,"_34":35,"_36":210,"_24":25,"_145":-5,"_188":211,"_27":212},{"_44":197,"_32":198,"_30":199,"_138":163,"_42":43,"_41":200,"_140":60,"_39":201,"_13":202,"_34":35,"_36":203,"_24":25,"_145":-5,"_188":204,"_27":205},{"_44":155,"_32":156,"_30":157,"_138":-5,"_42":43,"_41":151,"_140":60,"_39":194,"_13":64,"_34":20,"_36":159,"_24":25,"_145":-5,"_188":195,"_27":196},{"_44":148,"_32":149,"_30":150,"_138":-5,"_42":43,"_41":151,"_140":60,"_39":191,"_13":64,"_34":20,"_36":153,"_24":25,"_145":-5,"_188":192,"_27":193},{"_44":136,"_32":137,"_30":58,"_138":-5,"_42":43,"_41":139,"_140":60,"_39":187,"_13":142,"_34":143,"_36":144,"_24":25,"_145":146,"_188":189,"_27":190},["D",1789501487279],"children",[],[137],["D",1789425736088],[],[149],["D",1789425736088],[],[156],"92fc67ce-31e2-4c5c-b7a3-46efd6a42c8c","root.tsx","01a0a215-d9fe-72e9-a2b6-95eacd2f6534",66,["D",1789501691682],3,"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"es\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <meta name=\"theme-color\" content=\"#f4f4f1\" />\n          <title>OSO Studio</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n          <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"\" />\n          <link href=\"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;700&family=Inter:wght@400;500;600;700;900&family=Lora:wght@400;700&family=Montserrat:wght@400;600;700;900&family=Oswald:wght@400;600;700&family=Playfair+Display:wght@400;700;900&family=Poppins:wght@400;600;700;900&family=Raleway:wght@400;600;700;900&family=Roboto:wght@400;500;700;900&display=swap\" rel=\"stylesheet\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body>\n          <main><div id=\"root\" /></main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}",[],[162,198],"1102c0ce-8cdc-463e-97d8-1927d057711c","index.tsx","01a0a215-d9fe-72e9-a2b6-90960cfdf405",["D",1789425736088],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(<App />);",[],[162,207],"74f4f811-9c9c-408e-b494-b63a5caefb42","favicon.svg","01a0a215-d9fe-72e9-a2b6-8f7cd2ed8acb",["D",1789425736088],"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"6\" fill=\"#4a90e2\" />\n  <circle cx=\"16\" cy=\"16\" r=\"8\" fill=\"#ffffff\" opacity=\"0.3\" />\n</svg>",[],[162,214],"8bd21073-fd2b-4190-b856-b88d884292f3","Counter.tsx","01a0a215-d9fe-72e9-a2b6-86ce7bb9717a","01a0a215-d9fe-72e9-a2b6-881e24a29237",["D",1789425736088],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n  const [count, setCount] = useState(0);\n  return (\n    <div class=\"flex items-center gap-3\">\n      <span class=\"text-lg\">Clicked</span>\n      <button\n        onClick={() => setCount((c) => c + 1)}\n        class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n      >\n        {count}\n      </button>\n      <span class=\"text-lg\">times</span>\n    </div>\n  );\n}\n",[],[162,228,221],"components","bae74fc5-9d8f-4150-ac1b-f93e5eff2f9f",["D",1789501732163],58,[],[162,228,33],"7fbe207f-9458-4ab8-be7a-76bbe21f481e",["D",1789425736088],[179,180],[162,228],["D",1789425736088],[178,181,182,183],[162],["D",1789425736088],["D",1789522252250],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"ctx",{"_83":-5,"_129":279,"_280":281,"_282":283,"_284":25,"_285":25,"_286":25,"_287":60,"_288":-5,"_289":-7,"_290":-7,"_291":64,"_292":25,"_293":25,"_294":-5,"_295":25,"_296":25,"_297":25,"_298":-5},"ENV",{"_250":251,"_252":253,"_254":91,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278},"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",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Diff · v72