AION EVOLUTIONVal Town · cloud state

\n {status}\n

{nav.map(n=>)}

\n {!ready?

Inicializando...

:app===\"studio\"?saveSection(\"studio\",studio)}/>:app===\"cut\"?saveSection(\"cut\",cut)}/>:app===\"work\"?saveSection(\"work\",work)}/>:app===\"files\"?:}\n

\n \n

\n}\n\nfunction Studio({value:s,setValue:set,save}:any){\n const ref=useRef(null),[selected,setSelected]=useState(null);const [w,h]=presets[s.preset]||presets.story;\n useEffect(()=>{const c=ref.current;if(!c)return;c.width=w;c.height=h;const x=c.getContext(\"2d\")!;x.fillStyle=s.brand.secondary;x.fillRect(0,0,w,h);x.globalAlpha=.12;x.fillStyle=s.brand.primary;x.beginPath();x.arc(w*.8,h*.14,Math.min(w,h)*.26,0,Math.PI*2);x.fill();x.globalAlpha=1;x.fillStyle=\"#fff\";x.font=\"900 \"+Math.round(w*.075)+\"px Arial\";x.fillText(s.title||\"AION\",w*.07,h*.18);x.font=\"400 \"+Math.round(w*.03)+\"px Arial\";x.fillStyle=\"#b9c3d4\";x.fillText((s.subtitle||\"\").slice(0,48),w*.07,h*.23);for(const o of s.objects||[]){x.globalAlpha=o.opacity??1;x.fillStyle=o.fill;if(o.type===\"rect\")x.fillRect(o.x,o.y,o.w,o.h);else if(o.type===\"circle\"){x.beginPath();x.arc(o.x+o.w/2,o.y+o.h/2,Math.min(o.w,o.h)/2,0,Math.PI*2);x.fill()}else{x.font=\"700 \"+(o.size||48)+\"px Arial\";x.fillText(o.text||\"Texto\",o.x,o.y+(o.size||48))}x.globalAlpha=1}if(s.grid){x.strokeStyle=\"rgba(140,160,220,.16)\";for(let a=100;ax.id===selected);\n function patch(p:any){set({...s,objects:s.objects.map((x:Obj)=>x.id===selected?{...x,...p}:x)})}\n function exportImg(type=\"png\"){const c=ref.current!;const a=document.createElement(\"a\");a.download=(s.title||\"aion-design\")+\".\"+type;a.href=c.toDataURL(type===\"jpg\"?\"image/jpeg\":\"image/\"+type,.94);a.click()}\n return

\n \n

\n}\n\nfunction Cut({value:c,setValue:set,save}:any){\n function add(){set({...c,scenes:[...(c.scenes||[]),{id:crypto.randomUUID(),shot:\"Nueva escena\",seconds:4,caption:\"\",transition:\"cut\"}]})}\n function patch(id:string,p:any){set({...c,scenes:c.scenes.map((x:Scene)=>x.id===id?{...x,...p}:x)})}\n function move(i:number,d:number){const a=[...c.scenes],j=i+d;if(j<0||j>=a.length)return;[a[i],a[j]]=[a[j],a[i]];set({...c,scenes:a})}\n function srt(){let t=0,n=0;const z=(v:number)=>{const ms=Math.round(v*1000),h=Math.floor(ms/3600000),m=Math.floor(ms%3600000/60000),s=Math.floor(ms%60000/1000);return [h,m,s].map(x=>String(x).padStart(2,\"0\")).join(\":\")+\",\"+String(ms%1000).padStart(3,\"0\")};const out=c.scenes.flatMap((x:Scene)=>{const a=t;t+=+x.seconds;if(!x.caption)return[];n++;return[n+\"\\n\"+z(a)+\" --> \"+z(t)+\"\\n\"+x.caption]}).join(\"\\n\\n\");download(\"aion-cut.srt\",out,\"text/plain\")}\n return

CUT PRO · {c.scenes.length} clips · {c.scenes.reduce((a:number,b:Scene)=>a+(+b.seconds||0),0)}s

{c.scenes.map((x:Scene,i:number)=>

{i+1}

patch(x.id,{shot:e.target.value})}/>patch(x.id,{caption:e.target.value})}/>

patch(x.id,{seconds:Math.max(1,+e.target.value)})}/>

)}

\n}\n\nfunction Work({value:w,setValue:set,save}:any){\n function cell(r:number,c:number,v:string){const s=w.sheet.map((x:string[])=>[...x]);s[r][c]=v;set({...w,sheet:s})}\n function csv(){download((w.title||\"aion-sheet\")+\".csv\",w.sheet.map((r:string[])=>r.map(v=>'\"'+String(v).replace(/\"/g,'\"\"')+'\"').join(\",\")).join(\"\\n\"),\"text/csv\")}\n return

set({...w,title:e.target.value})} placeholder=\"Título\"/>

{w.mode===\"doc\"?

set({...w,doc:e.target.value})} placeholder=\"Escribe aquí...\"/><div className=\"mt-2 flex gap-2\"><span className=\"text-xs text-slate-500\">{w.doc.trim()?w.doc.trim().split(/\\s+/).length:0} palabras</span><button className={btn} onClick={()=>download((w.title||\"documento\")+\".txt\",w.doc,\"text/plain\")}>TXT</button><button className={btn} onClick={()=>download((w.title||\"documento\")+\".md\",\"# \"+w.title+\"\\n\\n\"+w.doc,\"text/markdown\")}>MD</button></div></section>:<section className={shell+\" p-3 overflow-auto\"}><table className=\"min-w-[720px] w-full border-collapse\"><tbody>{w.sheet.map((r:string[],ri:number)=><tr>{r.map((v:string,ci:number)=><td className=\"border border-slate-800\"><input className=\"w-full bg-slate-950 p-2 outline-none\" value={v} onChange={e=>cell(ri,ci,e.target.value)}/></td>)}</tr>)}</tbody></table><div className=\"flex gap-2 mt-3\"><button className={btn} onClick={()=>set({...w,sheet:[...w.sheet,Array.from({length:w.sheet[0]?.length||5},()=>\"\")]})}>+ Fila</button><button className={btn} onClick={()=>set({...w,sheet:w.sheet.map((r:string[])=>[...r,\"\"])})}>+ Columna</button><button className={btn} onClick={csv}>CSV</button></div></section>}</div>\n}\n\nfunction Files({files,reload,setStatus}:any){\n const [q,setQ]=useState(\"\");\n const shown=files.filter((f:CloudFile)=>f.name.toLowerCase().includes(q.toLowerCase()));\n async function upload(file:File){setStatus(\"Subiendo archivo...\");const fd=new FormData();fd.append(\"file\",file);try{await api(\"/api/files\",{method:\"POST\",body:fd});await reload();setStatus(\"Archivo en nube\")}catch{setStatus(\"Falló la subida\")}}\n async function del(id:string){if(!confirm(\"¿Eliminar archivo?\"))return;await api(\"/api/files/\"+id,{method:\"DELETE\"});await reload()}\n return <div className={shell+\" p-3\"}><div className=\"flex flex-wrap gap-2 mb-3\"><input className={input+\" grow\"} value={q} onChange={e=>setQ(e.target.value)} placeholder=\"Buscar archivos\"/><label className={primary}>Subir archivo<input type=\"file\" hidden onChange={e=>e.target.files?.[0]&&upload(e.target.files[0])}/></label></div><div className=\"space-y-2\">{shown.map((f:CloudFile)=><article className=\"border border-slate-800 rounded-xl p-3 flex items-center gap-3\"><span>📄</span><div className=\"grow min-w-0\"><b className=\"block truncate\">{f.name}</b><small className=\"text-slate-500\">{Math.round(f.size/1024)} KB · {f.type||\"archivo\"}</small></div><a className={btn} href={\"/api/files/\"+f.id+\"?device=\"+device}>Descargar</a><button className={btn+\" text-red-300\"} onClick={()=>del(f.id)}>Eliminar</button></article>)}</div>{!shown.length&&<div className=\"text-slate-500 py-12 text-center\">No hay archivos.</div>}</div>\n}\nfunction download(name:string,text:string,type:string){const a=document.createElement(\"a\");a.href=URL.createObjectURL(new Blob([text],{type}));a.download=name;a.click();setTimeout(()=>URL.revokeObjectURL(a.href),500)}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React,{useEffect,useMemo,useRef,useState} from \"https://esm.sh/react@18.2.0\";\nimport { Comms } from \"./Comms.tsx\";\nimport { Utilities } from \"./Utilities.tsx\";\n\ntype Obj={id:string;type:\"text\"|\"rect\"|\"circle\";x:number;y:number;w:number;h:number;text?:string;fill:string;size?:number;opacity:number};\ntype Scene={id:string;shot:string;seconds:number;caption:string;transition:string};\ntype CloudFile={id:string;name:string;type:string;size:number;created_at:string};\nconst makeDevice=()=>{let d=localStorage.getItem(\"aion-evo-device\");if(!d){d=crypto.randomUUID().replace(/-/g,\"\");localStorage.setItem(\"aion-evo-device\",d)}return d};\nconst device=makeDevice();\nasync function api(path:string,init?:RequestInit){const r=await fetch(path+(path.includes(\"?\")?\"&\":\"?\")+\"device=\"+device,init);if(!r.ok)throw new Error(await r.text());return r.json()}\nconst presets:any={square:[1080,1080],story:[1080,1920],landscape:[1920,1080]};\nconst shell=\"border border-slate-800 bg-slate-950/70 rounded-2xl\";\nconst btn=\"px-3 py-2 rounded-xl border border-slate-700 bg-slate-900 hover:bg-slate-800 text-sm\";\nconst primary=\"px-3 py-2 rounded-xl bg-indigo-200 text-slate-950 font-bold text-sm\";\nconst input=\"w-full px-3 py-2 rounded-xl border border-slate-700 bg-slate-900 text-slate-100 outline-none\";\n\nexport function App(){\n const [app,setApp]=useState(\"studio\"),[ready,setReady]=useState(false),[status,setStatus]=useState(\"Cargando AION...\");\n const [studio,setStudio]=useState<any>({preset:\"story\",title:\"AION\",subtitle:\"Diseño sin fricción\",brand:{primary:\"#7c8cff\",secondary:\"#0b1020\",accent:\"#4ee2c1\"},objects:[],grid:true,safe:true});\n const [cut,setCut]=useState<any>({format:\"vertical\",scenes:[] as Scene[]});\n const [work,setWork]=useState<any>({mode:\"doc\",title:\"\",doc:\"\",sheet:Array.from({length:8},()=>Array.from({length:5},()=>\"\"))});\n const [files,setFiles]=useState<CloudFile[]>([]);\n async function load(){try{const d=await api(\"/api/state\");if(Object.keys(d.studio||{}).length)setStudio(d.studio);if(Object.keys(d.cut||{}).length)setCut(d.cut);if(Object.keys(d.work||{}).length)setWork(d.work);await loadFiles();setStatus(\"Sincronizado\")}catch{setStatus(\"Modo local temporal\")}finally{setReady(true)}}\n async function saveSection(name:string,value:any){setStatus(\"Guardando...\");try{await api(\"/api/state/\"+name,{method:\"PUT\",headers:{\"content-type\":\"application/json\"},body:JSON.stringify(value)});setStatus(\"Guardado en nube\")}catch{setStatus(\"Error de sincronización\")}}\n async function loadFiles(){try{const d=await api(\"/api/files\");setFiles(d.items||[])}catch{}}\n useEffect(()=>{load()},[]);\n const nav=[[\"studio\",\"🎨\",\"Studio\"],[\"cut\",\"🎬\",\"Cut\"],[\"work\",\"📄\",\"Work\"],[\"files\",\"📁\",\"Files\"],[\"talk\",\"💬\",\"Talk\"],[\"flow\",\"📰\",\"Flow\"],[\"mail\",\"✉️\",\"Mail\"],[\"meet\",\"🎥\",\"Meet\"]];\n return <main className=\"min-h-screen bg-[#07090d] text-slate-100\">\n  <header className=\"sticky top-0 z-30 border-b border-slate-800 bg-[#07090dee] backdrop-blur-xl px-3 py-3 flex items-center justify-between\">\n   <div><b className=\"tracking-[.2em]\">AION EVOLUTION</b><small className=\"block text-slate-500\">Val Town · cloud state</small></div>\n   <span className=\"text-xs text-slate-400\">{status}</span>\n  </header>\n  <section className=\"max-w-7xl mx-auto p-3\">\n   <div className=\"grid grid-cols-4 gap-2 mb-3\">{nav.map(n=><button onClick={()=>setApp(n[0])} className={(app===n[0]?\"border-indigo-400 bg-indigo-500/10 \":\"\")+shell+\" p-3 text-left\"}><span className=\"text-xl\">{n[1]}</span><b className=\"block mt-2\">{n[2]}</b></button>)}</div>\n   {!ready?<div className={shell+\" p-8 text-center\"}>Inicializando...</div>:app===\"studio\"?<Studio value={studio} setValue={setStudio} save={()=>saveSection(\"studio\",studio)}/>:app===\"cut\"?<Cut value={cut} setValue={setCut} save={()=>saveSection(\"cut\",cut)}/>:app===\"work\"?<Work value={work} setValue={setWork} save={()=>saveSection(\"work\",work)}/>:app===\"files\"?<Files files={files} reload={loadFiles} setStatus={setStatus}/>:<Comms kind={app} setStatus={setStatus}/>}\n  </section>\n  <footer className=\"max-w-7xl mx-auto px-3 pb-8 text-xs text-slate-600\"><a href=\"/source\" className=\"underline\">view source</a> · dispositivo {device.slice(0,8)}</footer>\n </main>\n}\n\nfunction Studio({value:s,setValue:set,save}:any){\n const ref=useRef<HTMLCanvasElement>(null),[selected,setSelected]=useState<string|null>(null);const [w,h]=presets[s.preset]||presets.story;\n useEffect(()=>{const c=ref.current;if(!c)return;c.width=w;c.height=h;const x=c.getContext(\"2d\")!;x.fillStyle=s.brand.secondary;x.fillRect(0,0,w,h);x.globalAlpha=.12;x.fillStyle=s.brand.primary;x.beginPath();x.arc(w*.8,h*.14,Math.min(w,h)*.26,0,Math.PI*2);x.fill();x.globalAlpha=1;x.fillStyle=\"#fff\";x.font=\"900 \"+Math.round(w*.075)+\"px Arial\";x.fillText(s.title||\"AION\",w*.07,h*.18);x.font=\"400 \"+Math.round(w*.03)+\"px Arial\";x.fillStyle=\"#b9c3d4\";x.fillText((s.subtitle||\"\").slice(0,48),w*.07,h*.23);for(const o of s.objects||[]){x.globalAlpha=o.opacity??1;x.fillStyle=o.fill;if(o.type===\"rect\")x.fillRect(o.x,o.y,o.w,o.h);else if(o.type===\"circle\"){x.beginPath();x.arc(o.x+o.w/2,o.y+o.h/2,Math.min(o.w,o.h)/2,0,Math.PI*2);x.fill()}else{x.font=\"700 \"+(o.size||48)+\"px Arial\";x.fillText(o.text||\"Texto\",o.x,o.y+(o.size||48))}x.globalAlpha=1}if(s.grid){x.strokeStyle=\"rgba(140,160,220,.16)\";for(let a=100;a<w;a+=100){x.beginPath();x.moveTo(a,0);x.lineTo(a,h);x.stroke()}for(let a=100;a<h;a+=100){x.beginPath();x.moveTo(0,a);x.lineTo(w,a);x.stroke()}}if(s.safe){const m=Math.min(w,h)*.06;x.strokeStyle=\"#58dba899\";x.setLineDash([12,9]);x.strokeRect(m,m,w-m*2,h-m*2);x.setLineDash([])}} ,[s]);\n function add(type:Obj[\"type\"]){const o:Obj={id:crypto.randomUUID(),type,x:100,y:300+(s.objects?.length||0)*35,w:type===\"text\"?420:220,h:type===\"text\"?100:220,text:type===\"text\"?\"Texto editable\":\"\",fill:type===\"text\"?\"#ffffff\":s.brand.primary,size:52,opacity:1};set({...s,objects:[...(s.objects||[]),o]});setSelected(o.id)}\n const o=(s.objects||[]).find((x:Obj)=>x.id===selected);\n function patch(p:any){set({...s,objects:s.objects.map((x:Obj)=>x.id===selected?{...x,...p}:x)})}\n function exportImg(type=\"png\"){const c=ref.current!;const a=document.createElement(\"a\");a.download=(s.title||\"aion-design\")+\".\"+type;a.href=c.toDataURL(type===\"jpg\"?\"image/jpeg\":\"image/\"+type,.94);a.click()}\n return <div className=\"grid lg:grid-cols-[240px_1fr_260px] gap-3\">\n  <aside className={shell+\" p-3 space-y-3\"}><b>STUDIO PRO</b><input className={input} value={s.title} onChange={e=>set({...s,title:e.target.value})}/><input className={input} value={s.subtitle} onChange={e=>set({...s,subtitle:e.target.value})}/><select className={input} value={s.preset} onChange={e=>set({...s,preset:e.target.value})}><option value=\"story\">Story 9:16</option><option value=\"square\">Post 1:1</option><option value=\"landscape\">16:9</option></select>\n   <div className=\"grid grid-cols-3 gap-2\"><button className={btn} onClick={()=>add(\"text\")}>Text</button><button className={btn} onClick={()=>add(\"rect\")}>Rect</button><button className={btn} onClick={()=>add(\"circle\")}>Circle</button></div>\n   <div><small className=\"text-slate-500\">Brand Kit</small><div className=\"grid grid-cols-3 gap-2 mt-2\">{[\"primary\",\"secondary\",\"accent\"].map(k=><input type=\"color\" value={s.brand[k]} onChange={e=>set({...s,brand:{...s.brand,[k]:e.target.value}})} />)}</div></div>\n   <label className=\"flex gap-2\"><input type=\"checkbox\" checked={s.grid} onChange={e=>set({...s,grid:e.target.checked})}/> Grid</label><label className=\"flex gap-2\"><input type=\"checkbox\" checked={s.safe} onChange={e=>set({...s,safe:e.target.checked})}/> Safe area</label>\n   <button className={primary+\" w-full\"} onClick={save}>Guardar nube</button>\n  </aside>\n  <section className={shell+\" p-3 flex flex-col items-center overflow-auto\"}><canvas ref={ref} className=\"max-w-full max-h-[72vh] shadow-2xl\"/><div className=\"flex gap-2 mt-3\"><button className={btn} onClick={()=>exportImg(\"png\")}>PNG</button><button className={btn} onClick={()=>exportImg(\"jpg\")}>JPG</button><button className={btn} onClick={()=>exportImg(\"webp\")}>WEBP</button></div></section>\n  <aside className={shell+\" p-3\"}><b>Capas</b><div className=\"space-y-1 mt-2\">{(s.objects||[]).map((x:Obj,i:number)=><button onClick={()=>setSelected(x.id)} className={(selected===x.id?\"border-indigo-400 \":\"\")+btn+\" w-full text-left\"}>{i+1}. {x.type}</button>)}</div>{o&&<div className=\"mt-4 space-y-2\"><b>Inspector</b>{o.type===\"text\"&&<><input className={input} value={o.text} onChange={e=>patch({text:e.target.value})}/><input className={input} type=\"number\" value={o.size} onChange={e=>patch({size:+e.target.value})}/></>}<input type=\"color\" value={o.fill} onChange={e=>patch({fill:e.target.value})}/><div className=\"grid grid-cols-2 gap-2\">{[\"x\",\"y\",\"w\",\"h\"].map(k=><input className={input} type=\"number\" value={(o as any)[k]} onChange={e=>patch({[k]:+e.target.value})}/>)}</div><input className={input} type=\"range\" min=\".1\" max=\"1\" step=\".1\" value={o.opacity} onChange={e=>patch({opacity:+e.target.value})}/><button className={btn+\" w-full text-red-300\"} onClick={()=>{set({...s,objects:s.objects.filter((x:Obj)=>x.id!==o.id)});setSelected(null)}}>Eliminar capa</button></div>}</aside>\n </div>\n}\n\nfunction Cut({value:c,setValue:set,save}:any){\n function add(){set({...c,scenes:[...(c.scenes||[]),{id:crypto.randomUUID(),shot:\"Nueva escena\",seconds:4,caption:\"\",transition:\"cut\"}]})}\n function patch(id:string,p:any){set({...c,scenes:c.scenes.map((x:Scene)=>x.id===id?{...x,...p}:x)})}\n function move(i:number,d:number){const a=[...c.scenes],j=i+d;if(j<0||j>=a.length)return;[a[i],a[j]]=[a[j],a[i]];set({...c,scenes:a})}\n function srt(){let t=0,n=0;const z=(v:number)=>{const ms=Math.round(v*1000),h=Math.floor(ms/3600000),m=Math.floor(ms%3600000/60000),s=Math.floor(ms%60000/1000);return [h,m,s].map(x=>String(x).padStart(2,\"0\")).join(\":\")+\",\"+String(ms%1000).padStart(3,\"0\")};const out=c.scenes.flatMap((x:Scene)=>{const a=t;t+=+x.seconds;if(!x.caption)return[];n++;return[n+\"\\n\"+z(a)+\" --> \"+z(t)+\"\\n\"+x.caption]}).join(\"\\n\\n\");download(\"aion-cut.srt\",out,\"text/plain\")}\n return <div><div className={shell+\" p-3 flex flex-wrap gap-2 mb-3\"}><b className=\"mr-auto\">CUT PRO · {c.scenes.length} clips · {c.scenes.reduce((a:number,b:Scene)=>a+(+b.seconds||0),0)}s</b><button className={btn} onClick={add}>+ Escena</button><button className={btn} onClick={srt}>SRT</button><button className={primary} onClick={save}>Guardar nube</button></div><div className=\"space-y-2\">{c.scenes.map((x:Scene,i:number)=><article className={shell+\" p-3 grid md:grid-cols-[40px_1fr_auto] gap-2\"}><div className=\"text-2xl font-black text-slate-600\">{i+1}</div><div className=\"space-y-2\"><input className={input} value={x.shot} onChange={e=>patch(x.id,{shot:e.target.value})}/><input className={input} value={x.caption} placeholder=\"Caption\" onChange={e=>patch(x.id,{caption:e.target.value})}/><div className=\"flex gap-2\"><input className={input+\" max-w-24\"} type=\"number\" value={x.seconds} onChange={e=>patch(x.id,{seconds:Math.max(1,+e.target.value)})}/><select className={input+\" max-w-32\"} value={x.transition} onChange={e=>patch(x.id,{transition:e.target.value})}><option>cut</option><option>fade</option><option>slide</option><option>zoom</option></select></div></div><div className=\"flex md:flex-col gap-1\"><button className={btn} onClick={()=>move(i,-1)}>↑</button><button className={btn} onClick={()=>move(i,1)}>↓</button><button className={btn+\" text-red-300\"} onClick={()=>set({...c,scenes:c.scenes.filter((s:Scene)=>s.id!==x.id)})}>×</button></div></article>)}</div></div>\n}\n\nfunction Work({value:w,setValue:set,save}:any){\n function cell(r:number,c:number,v:string){const s=w.sheet.map((x:string[])=>[...x]);s[r][c]=v;set({...w,sheet:s})}\n function csv(){download((w.title||\"aion-sheet\")+\".csv\",w.sheet.map((r:string[])=>r.map(v=>'\"'+String(v).replace(/\"/g,'\"\"')+'\"').join(\",\")).join(\"\\n\"),\"text/csv\")}\n return <div><div className={shell+\" p-3 flex flex-wrap gap-2 mb-3\"}><input className={input+\" md:max-w-md\"} value={w.title} onChange={e=>set({...w,title:e.target.value})} placeholder=\"Título\"/><button className={w.mode===\"doc\"?primary:btn} onClick={()=>set({...w,mode:\"doc\"})}>Documento</button><button className={w.mode===\"sheet\"?primary:btn} onClick={()=>set({...w,mode:\"sheet\"})}>Hoja</button><button className={primary+\" ml-auto\"} onClick={save}>Guardar nube</button></div>{w.mode===\"doc\"?<section className={shell+\" p-3\"}><textarea className={input+\" min-h-[55vh]\"} value={w.doc} onChange={e=>set({...w,doc:e.target.value})} placeholder=\"Escribe aquí...\"/><div className=\"mt-2 flex gap-2\"><span className=\"text-xs text-slate-500\">{w.doc.trim()?w.doc.trim().split(/\\s+/).length:0} palabras</span><button className={btn} onClick={()=>download((w.title||\"documento\")+\".txt\",w.doc,\"text/plain\")}>TXT</button><button className={btn} onClick={()=>download((w.title||\"documento\")+\".md\",\"# \"+w.title+\"\\n\\n\"+w.doc,\"text/markdown\")}>MD</button></div></section>:<section className={shell+\" p-3 overflow-auto\"}><table className=\"min-w-[720px] w-full border-collapse\"><tbody>{w.sheet.map((r:string[],ri:number)=><tr>{r.map((v:string,ci:number)=><td className=\"border border-slate-800\"><input className=\"w-full bg-slate-950 p-2 outline-none\" value={v} onChange={e=>cell(ri,ci,e.target.value)}/></td>)}</tr>)}</tbody></table><div className=\"flex gap-2 mt-3\"><button className={btn} onClick={()=>set({...w,sheet:[...w.sheet,Array.from({length:w.sheet[0]?.length||5},()=>\"\")]})}>+ Fila</button><button className={btn} onClick={()=>set({...w,sheet:w.sheet.map((r:string[])=>[...r,\"\"])})}>+ Columna</button><button className={btn} onClick={csv}>CSV</button></div></section>}</div>\n}\n\nfunction Files({files,reload,setStatus}:any){\n const [q,setQ]=useState(\"\");\n const shown=files.filter((f:CloudFile)=>f.name.toLowerCase().includes(q.toLowerCase()));\n async function upload(file:File){setStatus(\"Subiendo archivo...\");const fd=new FormData();fd.append(\"file\",file);try{await api(\"/api/files\",{method:\"POST\",body:fd});await reload();setStatus(\"Archivo en nube\")}catch{setStatus(\"Falló la subida\")}}\n async function del(id:string){if(!confirm(\"¿Eliminar archivo?\"))return;await api(\"/api/files/\"+id,{method:\"DELETE\"});await reload()}\n return <div className={shell+\" p-3\"}><div className=\"flex flex-wrap gap-2 mb-3\"><input className={input+\" grow\"} value={q} onChange={e=>setQ(e.target.value)} placeholder=\"Buscar archivos\"/><label className={primary}>Subir archivo<input type=\"file\" hidden onChange={e=>e.target.files?.[0]&&upload(e.target.files[0])}/></label></div><div className=\"space-y-2\">{shown.map((f:CloudFile)=><article className=\"border border-slate-800 rounded-xl p-3 flex items-center gap-3\"><span>📄</span><div className=\"grow min-w-0\"><b className=\"block truncate\">{f.name}</b><small className=\"text-slate-500\">{Math.round(f.size/1024)} KB · {f.type||\"archivo\"}</small></div><a className={btn} href={\"/api/files/\"+f.id+\"?device=\"+device}>Descargar</a><button className={btn+\" text-red-300\"} onClick={()=>del(f.id)}>Eliminar</button></article>)}</div>{!shown.length&&<div className=\"text-slate-500 py-12 text-center\">No hay archivos.</div>}</div>\n}\nfunction download(name:string,text:string,type:string){const a=document.createElement(\"a\");a.href=URL.createObjectURL(new Blob([text],{type}));a.download=name;a.click();setTimeout(()=>URL.revokeObjectURL(a.href),500)}\n","createdAt",["D",1789127253869],"branchVersion","branchId","37762a14-d77d-4462-8efc-7ba413421494","id","db911d83-d802-4bba-9525-960a09f8fbc9","aion-evolution",["D",1789126972111],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AION Evolution multi-app productivity suite","imageUrl","b162e777-26d5-4b57-b5d4-824de1b425e2","pinnedFileId","01a09047-131c-7786-a391-4376117feaf1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a087a7-039d-766a-a2cb-d9a1a861d44b","tursoName","db911d83d8024bba9525960a09f8fbc9","tursoHostname","db911d83d8024bba9525960a09f8fbc9-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789477238750],"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",77,"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":257,"_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":258,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":259,"_85":260,"_87":261,"_89":25},"tree",[176,185,186,187],"files",[176,177,178,179,180,181,182,183,184,185,186,187],"counts",{"_166":64,"_167":150,"_168":64,"_169":170,"_171":172},"contents",[132,133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":160,"_32":161,"_30":162,"_138":-5,"_42":43,"_41":150,"_140":60,"_39":163,"_13":64,"_34":164,"_36":-5,"_24":25,"_145":-5,"_27":165},{"_44":154,"_32":155,"_30":156,"_138":-5,"_42":43,"_41":150,"_140":60,"_39":157,"_13":64,"_34":20,"_36":158,"_24":25,"_145":-5,"_27":159},{"_44":147,"_32":148,"_30":149,"_138":-5,"_42":43,"_41":150,"_140":60,"_39":151,"_13":64,"_34":20,"_36":152,"_24":25,"_145":-5,"_27":153},{"_44":136,"_32":137,"_30":58,"_138":-5,"_42":43,"_41":139,"_140":25,"_39":141,"_13":142,"_34":143,"_36":144,"_24":25,"_145":-5,"_27":146},"dcc6a12c-8d90-4ed6-becc-fc457ab3bc2f","index.ts","parentId",15,"latest",["D",1789127213704],8,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app=new Hono();\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS aion_state(device TEXT PRIMARY KEY, studio TEXT NOT NULL DEFAULT '{}', cut TEXT NOT NULL DEFAULT '{}', work TEXT NOT NULL DEFAULT '{}', files TEXT NOT NULL DEFAULT '[]', updated_at TEXT NOT NULL)`);\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS aion_files(id TEXT PRIMARY KEY, device TEXT NOT NULL, name TEXT NOT NULL, type TEXT, size INTEGER, blob_key TEXT NOT NULL, created_at TEXT NOT NULL)`);\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS aion_app_state(device TEXT NOT NULL, app TEXT NOT NULL, data TEXT NOT NULL, updated_at TEXT NOT NULL, PRIMARY KEY(device,app))`);\n\nfunction device(c:any){const d=(c.req.query(\"device\")||c.req.header(\"x-aion-device\")||\"\").trim();return /^[A-Za-z0-9_-]{8,80}$/.test(d)?d:null}\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/state\",async c=>{const d=device(c);if(!d)return c.json({error:\"invalid_device\"},400);const r=await sqlite.execute({sql:\"SELECT * FROM aion_state WHERE device=?\",args:[d]});const row=r.rows[0] as any;if(!row)return c.json({studio:{},cut:{},work:{},files:[]});return c.json({studio:JSON.parse(String(row.studio)),cut:JSON.parse(String(row.cut)),work:JSON.parse(String(row.work)),files:JSON.parse(String(row.files))})});\napp.put(\"/api/state/:section\",async c=>{const d=device(c),section=c.req.param(\"section\");if(!d||![\"studio\",\"cut\",\"work\",\"files\"].includes(section))return c.json({error:\"invalid_request\"},400);const body=await c.req.json();const now=new Date().toISOString();await sqlite.execute({sql:\"INSERT OR IGNORE INTO aion_state(device,updated_at) VALUES(?,?)\",args:[d,now]});await sqlite.execute({sql:`UPDATE aion_state SET ${section}=?, updated_at=? WHERE device=?`,args:[JSON.stringify(body),now,d]});return c.json({ok:true,updatedAt:now})});\n\napp.get(\"/api/files\",async c=>{const d=device(c);if(!d)return c.json({error:\"invalid_device\"},400);const r=await sqlite.execute({sql:\"SELECT id,name,type,size,created_at FROM aion_files WHERE device=? ORDER BY created_at DESC\",args:[d]});return c.json({items:r.rows})});\napp.post(\"/api/files\",async c=>{const d=device(c);if(!d)return c.json({error:\"invalid_device\"},400);const f=await c.req.formData();const file=f.get(\"file\");if(!(file instanceof File)||file.size>5_000_000)return c.json({error:\"invalid_file\"},400);const id=crypto.randomUUID(),key=`files/${d}/${id}/${file.name.replace(/[^A-Za-z0-9._-]/g,\"_\")}`;await blob.set(key,await file.arrayBuffer());await sqlite.execute({sql:\"INSERT INTO aion_files(id,device,name,type,size,blob_key,created_at) VALUES(?,?,?,?,?,?,?)\",args:[id,d,file.name,file.type,file.size,key,new Date().toISOString()]});return c.json({ok:true,id})});\napp.get(\"/api/files/:id\",async c=>{const d=device(c);if(!d)return c.json({error:\"invalid_device\"},400);const r=await sqlite.execute({sql:\"SELECT * FROM aion_files WHERE id=? AND device=?\",args:[c.req.param(\"id\"),d]});const row=r.rows[0] as any;if(!row)return c.json({error:\"not_found\"},404);const res=await blob.get(String(row.blob_key));return new Response(res.body,{headers:{\"content-type\":String(row.type||\"application/octet-stream\"),\"content-disposition\":`attachment; filename=\"${String(row.name).replace(/\"/g,\"\")}\"`}})});\napp.delete(\"/api/files/:id\",async c=>{const d=device(c);if(!d)return c.json({error:\"invalid_device\"},400);const r=await sqlite.execute({sql:\"SELECT blob_key FROM aion_files WHERE id=? AND device=?\",args:[c.req.param(\"id\"),d]});const row=r.rows[0] as any;if(!row)return c.json({error:\"not_found\"},404);await blob.delete(String(row.blob_key));await sqlite.execute({sql:\"DELETE FROM aion_files WHERE id=? AND device=?\",args:[c.req.param(\"id\"),d]});return c.json({ok:true})});\n\napp.get(\"/api/apps/:app\",async c=>{const d=device(c),name=c.req.param(\"app\");if(!d||![\"talk\",\"flow\",\"mail\",\"meet\",\"view\",\"sound\",\"web\",\"learn\",\"atlas\",\"play\",\"store\",\"tasks\"].includes(name))return c.json({error:\"invalid_request\"},400);const r=await sqlite.execute({sql:\"SELECT data FROM aion_app_state WHERE device=? AND app=?\",args:[d,name]});return c.json({data:r.rows[0]?JSON.parse(String((r.rows[0] as any).data)):null})});\napp.put(\"/api/apps/:app\",async c=>{const d=device(c),name=c.req.param(\"app\");if(!d||![\"talk\",\"flow\",\"mail\",\"meet\",\"view\",\"sound\",\"web\",\"learn\",\"atlas\",\"play\",\"store\",\"tasks\"].includes(name))return c.json({error:\"invalid_request\"},400);const data=await c.req.json(),now=new Date().toISOString();await sqlite.execute({sql:\"INSERT INTO aion_app_state(device,app,data,updated_at) VALUES(?,?,?,?) ON CONFLICT(device,app) DO UPDATE SET data=excluded.data,updated_at=excluded.updated_at\",args:[d,name,JSON.stringify(data),now]});return c.json({ok:true,updatedAt:now})});\napp.get(\"/api/health\",c=>c.json({ok:true,apps:[\"studio\",\"cut\",\"work\",\"files\",\"talk\",\"flow\",\"mail\",\"meet\",\"view\",\"sound\",\"web\",\"learn\",\"atlas\",\"play\",\"store\",\"tasks\"],runtime:\"Val Town\"}));\napp.onError(err=>Promise.reject(err));\nexport default app.fetch;","label",[137],"bdfa25dc-c360-4e99-ba59-550e011b968a","README.md","01a09047-131c-7786-a391-3c9e634e5a4c",1,["D",1789126972111],"# 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",[148],"2dd9c3d1-03f8-49b4-aa56-18e40e5abb4b","CHANGELOG.md","01a09047-131c-7786-a391-38204a3a8bf0",["D",1789126972111],"# 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",[155],"525a0dce-36b1-4935-8970-35f3e14015e4","frontend","01a09047-131c-7786-a391-37f957c9d9ea",["D",1789126972111],"directory",[161],"pulls","branches","forks","envVars",{"_173":64,"_175":64},"connections",{"_173":64,"_174":64},"count","unfilledCount","emptyCount",{"_44":160,"_32":161,"_30":162,"_138":-5,"_42":43,"_41":150,"_140":60,"_39":254,"_13":64,"_34":164,"_36":-5,"_24":25,"_145":-5,"_189":255,"_27":256},{"_44":250,"_32":229,"_30":223,"_138":162,"_42":43,"_41":150,"_140":60,"_39":251,"_13":64,"_34":164,"_36":-5,"_24":25,"_145":-5,"_189":252,"_27":253},{"_44":245,"_32":33,"_30":31,"_138":223,"_42":43,"_41":14,"_140":25,"_39":246,"_13":247,"_34":35,"_36":38,"_24":25,"_145":-5,"_189":248,"_27":249},{"_44":237,"_32":238,"_30":239,"_138":223,"_42":43,"_41":240,"_140":60,"_39":241,"_13":64,"_34":35,"_36":242,"_24":25,"_145":-5,"_189":243,"_27":244},{"_44":230,"_32":231,"_30":232,"_138":223,"_42":43,"_41":150,"_140":60,"_39":233,"_13":64,"_34":35,"_36":234,"_24":25,"_145":-5,"_189":235,"_27":236},{"_44":220,"_32":221,"_30":222,"_138":223,"_42":43,"_41":224,"_140":60,"_39":225,"_13":64,"_34":35,"_36":226,"_24":25,"_145":-5,"_189":227,"_27":228},{"_44":213,"_32":214,"_30":215,"_138":162,"_42":43,"_41":150,"_140":60,"_39":216,"_13":64,"_34":20,"_36":217,"_24":25,"_145":-5,"_189":218,"_27":219},{"_44":206,"_32":207,"_30":208,"_138":162,"_42":43,"_41":150,"_140":60,"_39":209,"_13":64,"_34":35,"_36":210,"_24":25,"_145":-5,"_189":211,"_27":212},{"_44":198,"_32":199,"_30":200,"_138":162,"_42":43,"_41":201,"_140":25,"_39":202,"_13":150,"_34":35,"_36":203,"_24":25,"_145":-5,"_189":204,"_27":205},{"_44":154,"_32":155,"_30":156,"_138":-5,"_42":43,"_41":150,"_140":60,"_39":195,"_13":64,"_34":20,"_36":158,"_24":25,"_145":-5,"_189":196,"_27":197},{"_44":147,"_32":148,"_30":149,"_138":-5,"_42":43,"_41":150,"_140":60,"_39":192,"_13":64,"_34":20,"_36":152,"_24":25,"_145":-5,"_189":193,"_27":194},{"_44":136,"_32":137,"_30":58,"_138":-5,"_42":43,"_41":139,"_140":25,"_39":188,"_13":142,"_34":143,"_36":144,"_24":25,"_145":-5,"_189":190,"_27":191},["D",1789127213704],"children",[],[137],["D",1789126972111],[],[148],["D",1789126972111],[],[155],"1e0eec97-587d-422e-b92c-eff710680b87","root.tsx","01a09047-131c-7786-a391-3295fcc3256f",3,["D",1789127018813],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\nexport function Root(){return <>{raw(\"<!DOCTYPE html>\")}<html lang=\"es\"><head><meta charSet=\"UTF-8\"/><meta name=\"viewport\" content=\"width=device-width,initial-scale=1,viewport-fit=cover\"/><meta name=\"theme-color\" content=\"#07090d\"/><title>AION Evolution</title><script src=\"https://cdn.twind.style\" crossOrigin=\"\"/><link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\"/></head><body className=\"m-0 bg-[#07090d] text-slate-100\"><div id=\"root\"/><script src=\"https://esm.town/v/std/catch\"/><script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\"/></body></html></>}",[],[161,199],"963ef208-e61c-4357-9ac3-ce8dc36cda5d","index.tsx","01a09047-131c-7786-a391-2feba9c784e3",["D",1789126972111],"/** @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 />);",[],[161,207],"f181a25b-4c49-449d-b659-17c1386bee53","favicon.svg","01a09047-131c-7786-a391-28ed223456dd",["D",1789126972111],"<?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>",[],[161,214],"647e9d09-64a9-40a9-8495-45bb49eb2d83","Utilities.tsx","8b71de3e-add6-11f1-a48a-1607ee4eb77e","01a09047-131c-7786-a391-24ab1624c76f",16,["D",1789127239909],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React,{useEffect,useState} from \"https://esm.sh/react@18.2.0\";\nconst device=localStorage.getItem(\"aion-evo-device\")||\"\";\nconst shell=\"border border-slate-800 bg-slate-950/70 rounded-2xl\",btn=\"px-3 py-2 rounded-xl border border-slate-700 bg-slate-900 text-sm\",primary=\"px-3 py-2 rounded-xl bg-indigo-200 text-slate-950 font-bold text-sm\",input=\"w-full px-3 py-2 rounded-xl border border-slate-700 bg-slate-900 text-slate-100 outline-none\";\nconst defs:any={view:{playlists:[],name:\"\"},sound:{playlists:[],name:\"\"},web:{query:\"\",notes:\"\",bookmarks:[]},learn:{cards:[],i:0,show:false},atlas:{places:[],note:\"\"},play:{score:0,best:0},store:{notes:true,focus:true,board:false,vault:false},tasks:{items:[],draft:\"\"}};\nasync function api(app:string,method=\"GET\",body?:any){const r=await fetch(\"/api/apps/\"+app+\"?device=\"+device,{method,headers:body?{\"content-type\":\"application/json\"}:undefined,body:body?JSON.stringify(body):undefined});if(!r.ok)throw new Error(await r.text());return r.json()}\nexport function Utilities({kind,setStatus}:{kind:string,setStatus:(s:string)=>void}){const [d,setD]=useState<any>(defs[kind]),[ready,setReady]=useState(false);useEffect(()=>{api(kind).then(r=>setD(r.data||defs[kind])).catch(()=>{}).finally(()=>setReady(true))},[kind]);async function save(n=d){setD(n);setStatus(\"Guardando \"+kind+\"...\");try{await api(kind,\"PUT\",n);setStatus(kind+\" guardado\")}catch{setStatus(\"Error en \"+kind)}}if(!ready)return <div className={shell+\" p-10 text-center\"}>Cargando...</div>;if(kind===\"view\"||kind===\"sound\")return <Media kind={kind} d={d} save={save}/>;if(kind===\"web\")return <Web d={d} save={save}/>;if(kind===\"learn\")return <Learn d={d} save={save}/>;if(kind===\"atlas\")return <Atlas d={d} save={save}/>;if(kind===\"play\")return <Play d={d} save={save}/>;if(kind===\"store\")return <Store d={d} save={save}/>;return <Tasks d={d} save={save}/>}\nfunction Media({kind,d,save}:any){const [url,setUrl]=useState(\"\");function pick(f:File){if(url)URL.revokeObjectURL(url);setUrl(URL.createObjectURL(f))}function add(){const n=(d.name||\"\").trim();if(n)save({...d,name:\"\",playlists:[...(d.playlists||[]),n]})}return <div className={shell+\" p-3\"}><div className=\"flex flex-wrap gap-2\"><label className={primary}>Abrir {kind===\"view\"?\"video\":\"audio\"}<input type=\"file\" accept={kind===\"view\"?\"video/*\":\"audio/*\"} hidden onChange={e=>e.target.files?.[0]&&pick(e.target.files[0])}/></label><input className={input+\" max-w-xs\"} value={d.name||\"\"} onChange={e=>save({...d,name:e.target.value})} placeholder=\"Nombre playlist\"/><button className={btn} onClick={add}>Guardar playlist</button></div><div className=\"mt-3 bg-black rounded-xl min-h-72 grid place-items-center overflow-hidden\">{url?(kind===\"view\"?<video src={url} controls className=\"max-w-full max-h-[60vh]\"/>:<audio src={url} controls/>):<span className=\"text-slate-600\">Sin archivo seleccionado</span>}</div><div className=\"mt-3 flex flex-wrap gap-2\">{(d.playlists||[]).map((x:string)=><span className=\"px-3 py-2 border border-slate-800 rounded-full text-sm\">{x}</span>)}</div></div>}\nfunction Web({d,save}:any){function go(){let q=(d.query||\"\").trim();if(!q)return;if(!/^https?:\\/\\//.test(q))q=q.includes(\".\")&&!q.includes(\" \")?\"https://\"+q:\"https://www.google.com/search?q=\"+encodeURIComponent(q);window.open(q,\"_blank\",\"noopener\")}return <div className={shell+\" p-3 space-y-3\"}><div className=\"flex gap-2\"><input className={input} value={d.query||\"\"} onChange={e=>save({...d,query:e.target.value})} placeholder=\"URL o búsqueda\"/><button className={primary} onClick={go}>Abrir</button></div><textarea className={input+\" min-h-64\"} value={d.notes||\"\"} onChange={e=>save({...d,notes:e.target.value})} placeholder=\"Notas de investigación\"/><button className={btn} onClick={()=>save({...d,bookmarks:[...(d.bookmarks||[]),d.query].filter(Boolean)})}>Guardar bookmark</button><div className=\"flex flex-wrap gap-2\">{(d.bookmarks||[]).map((x:string)=><button className={btn} onClick={()=>window.open(/^https?:/.test(x)?x:\"https://\"+x,\"_blank\")}>{x}</button>)}</div></div>}\nfunction Learn({d,save}:any){const c=d.cards?.[d.i];function add(){const q=prompt(\"Pregunta\");if(!q)return;const a=prompt(\"Respuesta\");if(!a)return;save({...d,cards:[...(d.cards||[]),{q,a}],i:d.cards.length,show:false})}return <div className=\"grid md:grid-cols-[1fr_280px] gap-3\"><section className={shell+\" p-6 min-h-80 grid place-items-center text-center\"} onClick={()=>save({...d,show:!d.show})}>{c?<div><small className=\"text-slate-500\">{d.show?\"Respuesta\":\"Pregunta\"}</small><h2 className=\"text-3xl\">{d.show?c.a:c.q}</h2></div>:<span className=\"text-slate-600\">Sin flashcards</span>}</section><aside className={shell+\" p-3 space-y-2\"}><button className={primary+\" w-full\"} onClick={add}>+ Flashcard</button><button className={btn+\" w-full\"} onClick={()=>save({...d,i:Math.max(0,d.i-1),show:false})}>← Anterior</button><button className={btn+\" w-full\"} onClick={()=>save({...d,i:Math.min((d.cards?.length||1)-1,d.i+1),show:false})}>Siguiente →</button><div className=\"text-slate-500 text-sm\">{(d.cards||[]).length} tarjetas</div></aside></div>}\nfunction Atlas({d,save}:any){async function locate(){navigator.geolocation.getCurrentPosition(p=>save({...d,places:[...(d.places||[]),{id:crypto.randomUUID(),lat:p.coords.latitude,lon:p.coords.longitude,note:d.note||\"\",time:new Date().toISOString()}]}),()=>alert(\"Ubicación no disponible\"))}return <div className={shell+\" p-3\"}><div className=\"flex gap-2 mb-3\"><input className={input} value={d.note||\"\"} onChange={e=>save({...d,note:e.target.value})} placeholder=\"Nota del lugar\"/><button className={primary} onClick={locate}>Guardar ubicación</button></div><div className=\"space-y-2\">{(d.places||[]).map((p:any)=><article className=\"border border-slate-800 rounded-xl p-3 flex gap-3\"><div className=\"grow\"><b>{p.note||\"Lugar guardado\"}</b><small className=\"block text-slate-500\">{p.lat.toFixed(5)}, {p.lon.toFixed(5)}</small></div><button className={btn} onClick={()=>window.open(\"https://www.openstreetmap.org/?mlat=\"+p.lat+\"&mlon=\"+p.lon+\"#map=16/\"+p.lat+\"/\"+p.lon,\"_blank\")}>Mapa</button></article>)}</div></div>}\nfunction Play({d,save}:any){return <div className={shell+\" min-h-[480px] grid place-items-center p-6 text-center\"}><div><div className=\"text-slate-500\">Récord {d.best||0}</div><button className=\"w-44 h-44 rounded-full bg-indigo-500/30 border border-indigo-400 text-5xl font-black my-5\" onClick={()=>save({...d,score:(d.score||0)+1,best:Math.max(d.best||0,(d.score||0)+1)})}>{d.score||0}</button><div><button className={btn} onClick={()=>save({...d,score:0})}>Reset</button></div></div></div>}\nfunction Store({d,save}:any){return <div className=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-3\">{Object.keys(d).map(k=><button className={shell+\" p-5 text-left\"} onClick={()=>save({...d,[k]:!d[k]})}><span className=\"text-2xl\">🧩</span><b className=\"block mt-4\">AION {k}</b><small className={d[k]?\"text-emerald-400\":\"text-slate-500\"}>{d[k]?\"Instalado\":\"Instalar\"}</small></button>)}</div>}\nfunction Tasks({d,save}:any){function add(){const t=(d.draft||\"\").trim();if(!t)return;save({...d,draft:\"\",items:[...(d.items||[]),{id:crypto.randomUUID(),text:t,done:false,priority:\"Media\"}]})}return <div className={shell+\" p-3\"}><div className=\"flex gap-2 mb-3\"><input className={input} value={d.draft||\"\"} onChange={e=>save({...d,draft:e.target.value})} placeholder=\"Nueva tarea\"/><button className={primary} onClick={add}>Crear</button></div><div className=\"space-y-2\">{(d.items||[]).map((t:any)=><article className=\"border border-slate-800 rounded-xl p-3 flex gap-2 items-center\"><button className={btn} onClick={()=>save({...d,items:d.items.map((x:any)=>x.id===t.id?{...x,done:!x.done}:x)})}>{t.done?\"✓\":\"○\"}</button><div className={\"grow \"+(t.done?\"line-through text-slate-600\":\"\")}><b>{t.text}</b><small className=\"block text-slate-500\">{t.priority}</small></div><button className={btn+\" text-red-300\"} onClick={()=>save({...d,items:d.items.filter((x:any)=>x.id!==t.id)})}>×</button></article>)}</div></div>}",[],[161,229,221],"components","1ecf60d1-c43a-4384-b737-92be3306f034","Counter.tsx","01a09047-131c-7786-a391-2202399a43e3",["D",1789126972111],"/** @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",[],[161,229,231],"6f0896ab-2c6c-46d7-9f04-52098d29e9f9","Comms.tsx","5de99556-add6-11f1-8618-1607ee4eb77e",10,["D",1789127163525],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React,{useEffect,useRef,useState} from \"https://esm.sh/react@18.2.0\";\nconst device=localStorage.getItem(\"aion-evo-device\")||\"\";\nconst shell=\"border border-slate-800 bg-slate-950/70 rounded-2xl\";\nconst btn=\"px-3 py-2 rounded-xl border border-slate-700 bg-slate-900 hover:bg-slate-800 text-sm\";\nconst primary=\"px-3 py-2 rounded-xl bg-indigo-200 text-slate-950 font-bold text-sm\";\nconst input=\"w-full px-3 py-2 rounded-xl border border-slate-700 bg-slate-900 text-slate-100 outline-none\";\nasync function api(app:string,method=\"GET\",body?:any){const r=await fetch(\"/api/apps/\"+app+\"?device=\"+device,{method,headers:body?{\"content-type\":\"application/json\"}:undefined,body:body?JSON.stringify(body):undefined});if(!r.ok)throw new Error(await r.text());return r.json()}\nexport function Comms({kind,setStatus}:{kind:string,setStatus:(s:string)=>void}){\n const defaults:any={talk:{room:\"general\",messages:[],draft:\"\"},flow:{posts:[],draft:\"\"},mail:{to:\"\",subject:\"\",body:\"\",drafts:[]},meet:{agenda:\"\",notes:\"\",room:\"general\"}};\n const [data,setData]=useState<any>(defaults[kind]),[ready,setReady]=useState(false);\n useEffect(()=>{setReady(false);api(kind).then(r=>setData(r.data||defaults[kind])).catch(()=>{}).finally(()=>setReady(true))},[kind]);\n async function save(next=data){setData(next);setStatus(\"Guardando \"+kind+\"...\");try{await api(kind,\"PUT\",next);setStatus(kind+\" guardado en nube\")}catch{setStatus(\"No se pudo guardar \"+kind)}}\n if(!ready)return <div className={shell+\" p-10 text-center\"}>Cargando {kind}...</div>;\n if(kind===\"talk\")return <Talk d={data} save={save}/>;\n if(kind===\"flow\")return <Flow d={data} save={save}/>;\n if(kind===\"mail\")return <Mail d={data} save={save}/>;\n return <Meet d={data} save={save}/>;\n}\nfunction Talk({d,save}:any){const [q,setQ]=useState(\"\");const rooms=[\"general\",\"diseño\",\"trabajo\",\"ideas\"];const msgs=(d.messages||[]).filter((m:any)=>m.room===d.room&&m.text.toLowerCase().includes(q.toLowerCase()));function send(){const t=(d.draft||\"\").trim();if(!t)return;save({...d,draft:\"\",messages:[...(d.messages||[]),{id:crypto.randomUUID(),room:d.room,text:t,time:new Date().toISOString()}]})}return <div className=\"grid md:grid-cols-[210px_1fr] gap-3\"><aside className={shell+\" p-3\"}><b>Salas</b><div className=\"space-y-2 mt-3\">{rooms.map(r=><button className={(d.room===r?\"border-indigo-400 \":\"\")+btn+\" w-full text-left\"} onClick={()=>save({...d,room:r})}># {r}</button>)}</div></aside><section className={shell+\" p-3\"}><div className=\"flex gap-2 mb-3\"><input className={input} value={q} onChange={e=>setQ(e.target.value)} placeholder=\"Buscar en sala\"/></div><div className=\"min-h-[380px] space-y-2\">{msgs.map((m:any)=><article className=\"border border-slate-800 rounded-xl p-3\"><small className=\"text-slate-500\">{new Date(m.time).toLocaleString()}</small><p className=\"m-0 mt-1\">{m.text}</p></article>)}</div><div className=\"flex gap-2 mt-3\"><input className={input} value={d.draft||\"\"} onChange={e=>save({...d,draft:e.target.value})} onKeyDown={e=>e.key===\"Enter\"&&send()} placeholder=\"Mensaje\"/><button className={primary} onClick={send}>Enviar</button></div></section></div>}\nfunction Flow({d,save}:any){function post(){const t=(d.draft||\"\").trim();if(!t)return;save({...d,draft:\"\",posts:[{id:crypto.randomUUID(),text:t,likes:0,time:new Date().toISOString()},...(d.posts||[])]})}function like(id:string){save({...d,posts:d.posts.map((p:any)=>p.id===id?{...p,likes:p.likes+1}:p)})}return <div><section className={shell+\" p-3 mb-3\"}><textarea className={input+\" min-h-28\"} value={d.draft||\"\"} onChange={e=>save({...d,draft:e.target.value})} placeholder=\"Comparte una actualización...\"/><button className={primary+\" mt-2\"} onClick={post}>Publicar</button></section><div className=\"space-y-2\">{(d.posts||[]).map((p:any)=><article className={shell+\" p-4\"}><small className=\"text-slate-500\">{new Date(p.time).toLocaleString()}</small><p>{p.text}</p><button className={btn} onClick={()=>like(p.id)}>♡ {p.likes}</button></article>)}</div></div>}\nfunction Mail({d,save}:any){function saveDraft(){const x={id:crypto.randomUUID(),to:d.to,subject:d.subject,body:d.body,time:new Date().toISOString()};save({...d,drafts:[x,...(d.drafts||[])]})}function open(x:any){save({...d,to:x.to,subject:x.subject,body:x.body})}return <div className=\"grid md:grid-cols-[1fr_280px] gap-3\"><section className={shell+\" p-3 space-y-2\"}><b>Composer</b><input className={input} value={d.to||\"\"} onChange={e=>save({...d,to:e.target.value})} placeholder=\"Destinatario\"/><input className={input} value={d.subject||\"\"} onChange={e=>save({...d,subject:e.target.value})} placeholder=\"Asunto\"/><textarea className={input+\" min-h-64\"} value={d.body||\"\"} onChange={e=>save({...d,body:e.target.value})} placeholder=\"Mensaje\"/><div className=\"flex gap-2\"><button className={primary} onClick={saveDraft}>Guardar borrador</button><button className={btn} onClick={()=>navigator.clipboard?.writeText((d.subject?d.subject+\"\\n\\n\":\"\")+d.body)}>Copiar</button></div></section><aside className={shell+\" p-3\"}><b>Borradores</b><div className=\"space-y-2 mt-3\">{(d.drafts||[]).map((x:any)=><button className={btn+\" w-full text-left\"} onClick={()=>open(x)}><b className=\"block truncate\">{x.subject||\"Sin asunto\"}</b><small className=\"text-slate-500\">{x.to||\"Sin destinatario\"}</small></button>)}</div></aside></div>}\nfunction Meet({d,save}:any){const video=useRef<HTMLVideoElement>(null),stream=useRef<MediaStream|null>(null),rec=useRef<MediaRecorder|null>(null),chunks=useRef<Blob[]>([]);async function camera(){try{stream.current=await navigator.mediaDevices.getUserMedia({video:true,audio:true});if(video.current)video.current.srcObject=stream.current}catch{alert(\"No fue posible abrir cámara/micrófono\")}}async function share(){try{stream.current?.getTracks().forEach(t=>t.stop());stream.current=await navigator.mediaDevices.getDisplayMedia({video:true,audio:true});if(video.current)video.current.srcObject=stream.current}catch{}}function record(){if(!stream.current)return alert(\"Activa cámara o pantalla\");if(rec.current?.state===\"recording\"){rec.current.stop();return}chunks.current=[];rec.current=new MediaRecorder(stream.current);rec.current.ondataavailable=e=>e.data.size&&chunks.current.push(e.data);rec.current.onstop=()=>{const u=URL.createObjectURL(new Blob(chunks.current,{type:\"video/webm\"}));const a=document.createElement(\"a\");a.href=u;a.download=\"aion-meet.webm\";a.click();setTimeout(()=>URL.revokeObjectURL(u),1000)};rec.current.start()}function stop(){stream.current?.getTracks().forEach(t=>t.stop());stream.current=null;if(video.current)video.current.srcObject=null}return <div className=\"grid lg:grid-cols-[1fr_330px] gap-3\"><section className={shell+\" p-3\"}><div className=\"aspect-video bg-black rounded-xl overflow-hidden\"><video ref={video} autoPlay muted playsInline className=\"w-full h-full object-cover\"/></div><div className=\"flex flex-wrap gap-2 mt-3\"><button className={primary} onClick={camera}>Cámara</button><button className={btn} onClick={share}>Pantalla</button><button className={btn} onClick={record}>REC local</button><button className={btn+\" text-red-300\"} onClick={stop}>Detener</button></div></section><aside className={shell+\" p-3 space-y-3\"}><b>Meeting Workspace</b><input className={input} value={d.room||\"\"} onChange={e=>save({...d,room:e.target.value})} placeholder=\"Sala\"/><textarea className={input+\" min-h-32\"} value={d.agenda||\"\"} onChange={e=>save({...d,agenda:e.target.value})} placeholder=\"Agenda\"/><textarea className={input+\" min-h-40\"} value={d.notes||\"\"} onChange={e=>save({...d,notes:e.target.value})} placeholder=\"Notas y decisiones\"/><button className={primary+\" w-full\"} onClick={()=>save(d)}>Guardar nube</button></aside></div>}\n",[],[161,229,238],"d22c003f-9685-4429-8168-342aff17ea4c",["D",1789127253869],5,[],[161,229,33],"772681df-69f1-4352-a2a1-d348274c9b0d",["D",1789126972111],[178,179,180,181],[161,229],["D",1789126972111],[177,182,183,184],[161],["D",1789126972111],["D",1789477238750],{"_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":295,"_296":297,"_298":299,"_300":25,"_301":25,"_302":25,"_303":60,"_304":-5,"_305":-7,"_306":-7,"_307":64,"_308":25,"_309":25,"_310":-5,"_311":25,"_312":25,"_313":25,"_314":-5},"ENV",{"_266":267,"_268":269,"_270":91,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294},"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 · v17