[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_260":261,"_262":263},"routes/_app.x.$handle.$name",{"_99":98,"_31":44,"_108":89,"_26":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":24,"_123":124,"_125":58,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":24},"version",16,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/components/Utilities.tsx","latestPath","fileId","8b71de3e-add6-11f1-a48a-1607ee4eb77e","name","Utilities.tsx","fileType","script","content","/** @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(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

Cargando...

;if(kind===\"view\"||kind===\"sound\")return ;if(kind===\"web\")return ;if(kind===\"learn\")return ;if(kind===\"atlas\")return ;if(kind===\"play\")return ;if(kind===\"store\")return ;return }\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

Abrir {kind===\"view\"?\"video\":\"audio\"}e.target.files?.[0]&&pick(e.target.files[0])}/>save({...d,name:e.target.value})} placeholder=\"Nombre playlist\"/>

{url?(kind===\"view\"?

{(d.playlists||[]).map((x:string)=>{x})}

}\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

save({...d,query:e.target.value})} placeholder=\"URL o búsqueda\"/>

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>}","createdAt",["D",1789127239909],"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",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":54,"_104":105,"_106":24},"branch",{"_13":88,"_31":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"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",{"_42":43,"_31":44,"_37":255,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":256,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":257,"_83":258,"_85":259,"_87":24},"tree",[174,183,184,185],"files",[174,175,176,177,178,179,180,181,182,183,184,185],"counts",{"_164":62,"_165":148,"_166":62,"_167":168,"_169":170},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":158,"_31":159,"_29":160,"_136":-5,"_40":41,"_39":148,"_138":58,"_37":161,"_13":62,"_33":162,"_35":-5,"_23":24,"_143":-5,"_26":163},{"_42":152,"_31":153,"_29":154,"_136":-5,"_40":41,"_39":148,"_138":58,"_37":155,"_13":62,"_33":20,"_35":156,"_23":24,"_143":-5,"_26":157},{"_42":145,"_31":146,"_29":147,"_136":-5,"_40":41,"_39":148,"_138":58,"_37":149,"_13":62,"_33":20,"_35":150,"_23":24,"_143":-5,"_26":151},{"_42":134,"_31":135,"_29":56,"_136":-5,"_40":41,"_39":137,"_138":24,"_37":139,"_13":140,"_33":141,"_35":142,"_23":24,"_143":-5,"_26":144},"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",[135],"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",[146],"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",[153],"525a0dce-36b1-4935-8970-35f3e14015e4","frontend","01a09047-131c-7786-a391-37f957c9d9ea",["D",1789126972111],"directory",[159],"pulls","branches","forks","envVars",{"_171":62,"_173":62},"connections",{"_171":62,"_172":62},"count","unfilledCount","emptyCount",{"_42":158,"_31":159,"_29":160,"_136":-5,"_40":41,"_39":148,"_138":58,"_37":252,"_13":62,"_33":162,"_35":-5,"_23":24,"_143":-5,"_187":253,"_26":254},{"_42":248,"_31":223,"_29":219,"_136":160,"_40":41,"_39":148,"_138":58,"_37":249,"_13":62,"_33":162,"_35":-5,"_23":24,"_143":-5,"_187":250,"_26":251},{"_42":239,"_31":240,"_29":241,"_136":219,"_40":41,"_39":242,"_138":24,"_37":243,"_13":244,"_33":34,"_35":245,"_23":24,"_143":-5,"_187":246,"_26":247},{"_42":231,"_31":232,"_29":233,"_136":219,"_40":41,"_39":234,"_138":58,"_37":235,"_13":62,"_33":34,"_35":236,"_23":24,"_143":-5,"_187":237,"_26":238},{"_42":224,"_31":225,"_29":226,"_136":219,"_40":41,"_39":148,"_138":58,"_37":227,"_13":62,"_33":34,"_35":228,"_23":24,"_143":-5,"_187":229,"_26":230},{"_42":218,"_31":32,"_29":30,"_136":219,"_40":41,"_39":14,"_138":58,"_37":220,"_13":62,"_33":34,"_35":36,"_23":24,"_143":-5,"_187":221,"_26":222},{"_42":211,"_31":212,"_29":213,"_136":160,"_40":41,"_39":148,"_138":58,"_37":214,"_13":62,"_33":20,"_35":215,"_23":24,"_143":-5,"_187":216,"_26":217},{"_42":204,"_31":205,"_29":206,"_136":160,"_40":41,"_39":148,"_138":58,"_37":207,"_13":62,"_33":34,"_35":208,"_23":24,"_143":-5,"_187":209,"_26":210},{"_42":196,"_31":197,"_29":198,"_136":160,"_40":41,"_39":199,"_138":24,"_37":200,"_13":148,"_33":34,"_35":201,"_23":24,"_143":-5,"_187":202,"_26":203},{"_42":152,"_31":153,"_29":154,"_136":-5,"_40":41,"_39":148,"_138":58,"_37":193,"_13":62,"_33":20,"_35":156,"_23":24,"_143":-5,"_187":194,"_26":195},{"_42":145,"_31":146,"_29":147,"_136":-5,"_40":41,"_39":148,"_138":58,"_37":190,"_13":62,"_33":20,"_35":150,"_23":24,"_143":-5,"_187":191,"_26":192},{"_42":134,"_31":135,"_29":56,"_136":-5,"_40":41,"_39":137,"_138":24,"_37":186,"_13":140,"_33":141,"_35":142,"_23":24,"_143":-5,"_187":188,"_26":189},["D",1789127213704],"children",[],[135],["D",1789126972111],[],[146],["D",1789126972111],[],[153],"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></>}",[],[159,197],"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 />);",[],[159,205],"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>",[],[159,212],"647e9d09-64a9-40a9-8495-45bb49eb2d83","01a09047-131c-7786-a391-24ab1624c76f",["D",1789127239909],[],[159,223,32],"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",[],[159,223,225],"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",[],[159,223,232],"14b79687-b857-440d-b548-e869067791d4","App.tsx","01a09047-131b-7256-b1f6-cc84e0eb1e97",13,["D",1789127175903],4,"/** @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\";\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",[],[159,223,240],"772681df-69f1-4352-a2a1-d348274c9b0d",["D",1789126972111],[176,177,178,179],[159,223],["D",1789126972111],[175,180,181,182],[159],["D",1789126972111],["D",1789477238750],{"_99":98,"_107":103},{"_99":98,"_100":101,"_102":103,"_18":54,"_104":105,"_106":24},{"_13":88,"_31":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"ctx",{"_81":-5,"_127":293,"_294":295,"_296":297,"_298":24,"_299":24,"_300":24,"_301":58,"_302":-5,"_303":-7,"_304":-7,"_305":62,"_306":24,"_307":24,"_308":-5,"_309":24,"_310":24,"_311":24,"_312":-5},"ENV",{"_264":265,"_266":267,"_268":89,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292},"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 · v16