OSO STUDIO PRO 2Multi-select · filtros · componentes · smart resize

\n \n \n

\n Documentoset({...s,title:e.target.value})}/>set({...s,subtitle:e.target.value})}/>\n \n

Fondoset({...s,background:e.target.value})}/>set({...s,backgroundGradient:e.target.checked})}/> Gradient{s.backgroundGradient&&<>set({...s,background2:e.target.value})}/>set({...s,backgroundAngle:+e.target.value})}/>}

\n Insertar

+ Imagene.target.files?.[0]&&addImage(e.target.files[0])}/>\n Templates

\n Brand Kitset({...s,brand:{...s.brand,name:e.target.value}})}/>

{[\"primary\",\"secondary\",\"accent\"].map(k=>set({...s,brand:{...s.brand,[k]:e.target.value}})}/>)}

Quality75?\"text-emerald-400\":\"text-amber-300\"}>{quality.score}/100

{quality.issues.length?quality.issues.map(x=>• {x}):✓ Composición limpia}

\n Componentes

setComponentName(e.target.value)} placeholder=\"Nombre\"/>

{s.components.map((c:ComponentDef)=>)}

Zoom {zoom}%setZoom(+e.target.value)}/>{localStatus}{selected.length>1&&{selected.length} seleccionados}

Capas{selected.length>1&&{selected.length}}

\n {selected.length>1&&

}\n

{[...s.objects].reverse().map((o:Obj)=>

toggleSelect(o.id,e.shiftKey)} onDoubleClick={()=>selectGroup(o.id)}>

)}

\n {primaryObj&&selected.length===1&&

Inspector{primaryObj.type}

\n {primaryObj.type===\"text\"&&<>

patch(primaryObj.id,{text:e.target.value})}/><select className={input} value={primaryObj.fontFamily||s.brand.headingFont} onChange={e=>{snapshot();patch(primaryObj.id,{fontFamily:e.target.value})}}>{FONTS.map(f=><option>{f}</option>)}</select><div className=\"grid grid-cols-2 gap-2\"><input className={input} type=\"number\" min=\"10\" max=\"240\" value={primaryObj.size||48} onFocus={focusSnap} onChange={e=>patch(primaryObj.id,{size:+e.target.value})}/><select className={input} value={primaryObj.fontWeight||700} onChange={e=>{snapshot();patch(primaryObj.id,{fontWeight:+e.target.value})}}>{[300,400,500,600,700,800,900].map(w=><option value={w}>{w}</option>)}</select></div><div className=\"grid grid-cols-2 gap-2\"><input className={input} type=\"number\" step=\".1\" value={primaryObj.letterSpacing||0} onChange={e=>patch(primaryObj.id,{letterSpacing:+e.target.value})} placeholder=\"Tracking\"/><input className={input} type=\"number\" min=\".7\" max=\"3\" step=\".05\" value={primaryObj.lineHeight||1.18} onChange={e=>patch(primaryObj.id,{lineHeight:+e.target.value})}/></div><div className=\"grid grid-cols-2 gap-2\"><select className={input} value={primaryObj.align||\"left\"} onChange={e=>patch(primaryObj.id,{align:e.target.value})}><option value=\"left\">Izquierda</option><option value=\"center\">Centro</option><option value=\"right\">Derecha</option></select><select className={input} value={primaryObj.fontStyle||\"normal\"} onChange={e=>patch(primaryObj.id,{fontStyle:e.target.value})}><option value=\"normal\">Normal</option><option value=\"italic\">Italic</option></select></div></>}\n     {primaryObj.type!==\"image\"&&<><div className=\"grid grid-cols-2 gap-2\"><label className=\"text-xs text-slate-500\">Color<input className=\"block w-full h-9\" type=\"color\" value={primaryObj.fill} onChange={e=>patch(primaryObj.id,{fill:e.target.value})}/></label><label className=\"text-xs text-slate-500\">Color 2<input className=\"block w-full h-9\" type=\"color\" value={primaryObj.fill2||primaryObj.fill} onChange={e=>patch(primaryObj.id,{fill2:e.target.value})}/></label></div><label className=\"flex gap-2 text-xs\"><input type=\"checkbox\" checked={primaryObj.gradient||false} onChange={e=>patch(primaryObj.id,{gradient:e.target.checked})}/> Gradient</label>{primaryObj.gradient&&<input className={input} type=\"number\" min=\"0\" max=\"360\" value={primaryObj.gradientAngle||0} onChange={e=>patch(primaryObj.id,{gradientAngle:+e.target.value})}/>}</>}\n     {primaryObj.type===\"image\"&&<><select className={input} value={primaryObj.fit||\"cover\"} onChange={e=>patch(primaryObj.id,{fit:e.target.value})}><option value=\"cover\">Cover</option><option value=\"contain\">Contain</option><option value=\"stretch\">Stretch</option></select><div className=\"grid grid-cols-2 gap-2\"><label className=\"text-xs text-slate-500\">Crop X<input className={input} type=\"number\" value={primaryObj.cropX||0} onChange={e=>patch(primaryObj.id,{cropX:+e.target.value})}/></label><label className=\"text-xs text-slate-500\">Crop Y<input className={input} type=\"number\" value={primaryObj.cropY||0} onChange={e=>patch(primaryObj.id,{cropY:+e.target.value})}/></label></div><label className=\"text-xs text-slate-500\">Zoom crop<input className=\"w-full\" type=\"range\" min=\".5\" max=\"3\" step=\".05\" value={primaryObj.cropZoom||1} onChange={e=>patch(primaryObj.id,{cropZoom:+e.target.value})}/></label><b className=\"block pt-2\">Filtros</b>{[[\"brightness\",0,200],[\"contrast\",0,200],[\"saturation\",0,250],[\"grayscale\",0,100],[\"sepia\",0,100],[\"blur\",0,20]].map(([k,min,max]:any)=><label className=\"text-xs text-slate-500\">{k}<input className=\"w-full\" type=\"range\" min={min} max={max} step=\"1\" value={(primaryObj as any)[k]} onChange={e=>patch(primaryObj.id,{[k]:+e.target.value})}/></label>)}</>}\n     <div className=\"grid grid-cols-2 gap-2\">{[\"x\",\"y\",\"w\",\"h\"].map(k=><label className=\"text-xs text-slate-500\">{k.toUpperCase()}<input className={input} disabled={primaryObj.locked} type=\"number\" value={Math.round((primaryObj as any)[k])} onFocus={focusSnap} onChange={e=>patch(primaryObj.id,{[k]:Math.max(k===\"x\"||k===\"y\"?0:20,+e.target.value)})}/></label>)}</div>\n     <label className=\"text-xs text-slate-500\">Rotación<input className={input} disabled={primaryObj.locked} type=\"number\" min=\"-180\" max=\"180\" value={primaryObj.rotation||0} onFocus={focusSnap} onChange={e=>patch(primaryObj.id,{rotation:+e.target.value})}/></label>{primaryObj.type===\"rect\"&&<label className=\"text-xs text-slate-500\">Radio<input className={input} type=\"number\" min=\"0\" max=\"240\" value={primaryObj.radius||0} onChange={e=>patch(primaryObj.id,{radius:+e.target.value})}/></label>}\n     <label className=\"text-xs text-slate-500\">Opacidad<input className=\"w-full\" type=\"range\" min=\".1\" max=\"1\" step=\".05\" value={primaryObj.opacity} onChange={e=>patch(primaryObj.id,{opacity:+e.target.value})}/></label>\n     <b className=\"block pt-2\">Sombra</b><div className=\"grid grid-cols-2 gap-2\"><input className=\"w-full h-9\" type=\"color\" value={primaryObj.shadowColor||\"#000000\"} onChange={e=>patch(primaryObj.id,{shadowColor:e.target.value})}/><input className={input} type=\"number\" min=\"0\" max=\"100\" value={primaryObj.shadowBlur||0} onChange={e=>patch(primaryObj.id,{shadowBlur:+e.target.value})}/><input className={input} type=\"number\" value={primaryObj.shadowX||0} onChange={e=>patch(primaryObj.id,{shadowX:+e.target.value})}/><input className={input} type=\"number\" value={primaryObj.shadowY||0} onChange={e=>patch(primaryObj.id,{shadowY:+e.target.value})}/></div>\n     <b className=\"block pt-2\">Alinear</b><div className=\"grid grid-cols-3 gap-1\">{[[\"left\",\"←\"],[\"center\",\"↔\"],[\"right\",\"→\"],[\"top\",\"↑\"],[\"middle\",\"↕\"],[\"bottom\",\"↓\"]].map(([k,l])=><button className={btn} onClick={()=>align(k)}>{l}</button>)}</div>\n     <div className=\"grid grid-cols-2 gap-2\"><button className={btn} onClick={duplicateSelected}>Duplicar</button><button className={btn} onClick={()=>reorder(primaryObj.id,1)}>Subir capa</button><button className={btn} onClick={()=>reorder(primaryObj.id,-1)}>Bajar capa</button><button className={btn+\" text-red-300\"} onClick={delSelected}>Eliminar</button></div>\n    </div>}\n   </aside>\n  </div>\n  <div className={shell+\" p-3 text-xs text-slate-500\"}><b className=\"text-slate-300\">Atajos:</b> Shift+click multiselección · Ctrl/Cmd+D duplicar · Ctrl/Cmd+Z undo · Ctrl/Cmd+Shift+Z redo · Delete eliminar · flechas mover · Shift+flechas mover 10px.</div>\n </div>\n}","createdAt",["D",1789212279901],"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",1789564254151],"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":274,"_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":275,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":276,"_83":277,"_85":278,"_87":24},"tree",[174,185,186,187],"files",[174,175,176,177,178,179,180,181,182,183,184,185,186,187],"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},"1cfa6284-d8bd-4ce7-9179-fde165603ee8","index.ts","parentId",23,"latest",["D",1789151333671],9,"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.get(\"/api/assets/: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\"),\"cache-control\":\"private, max-age=3600\",\"content-disposition\":\"inline\"}})});\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":271,"_13":62,"_33":162,"_35":-5,"_23":24,"_143":-5,"_189":272,"_26":273},{"_42":267,"_31":230,"_29":224,"_136":160,"_40":41,"_39":148,"_138":58,"_37":268,"_13":62,"_33":162,"_35":-5,"_23":24,"_143":-5,"_189":269,"_26":270},{"_42":258,"_31":259,"_29":260,"_136":224,"_40":41,"_39":261,"_138":24,"_37":262,"_13":263,"_33":34,"_35":264,"_23":24,"_143":-5,"_189":265,"_26":266},{"_42":250,"_31":251,"_29":252,"_136":224,"_40":41,"_39":253,"_138":58,"_37":254,"_13":62,"_33":34,"_35":255,"_23":24,"_143":-5,"_189":256,"_26":257},{"_42":243,"_31":244,"_29":245,"_136":224,"_40":41,"_39":148,"_138":58,"_37":246,"_13":62,"_33":34,"_35":247,"_23":24,"_143":-5,"_189":248,"_26":249},{"_42":235,"_31":236,"_29":237,"_136":224,"_40":41,"_39":238,"_138":58,"_37":239,"_13":62,"_33":34,"_35":240,"_23":24,"_143":-5,"_189":241,"_26":242},{"_42":231,"_31":32,"_29":30,"_136":224,"_40":41,"_39":14,"_138":24,"_37":232,"_13":62,"_33":34,"_35":36,"_23":24,"_143":-5,"_189":233,"_26":234},{"_42":221,"_31":222,"_29":223,"_136":224,"_40":41,"_39":225,"_138":58,"_37":226,"_13":62,"_33":34,"_35":227,"_23":24,"_143":-5,"_189":228,"_26":229},{"_42":214,"_31":215,"_29":216,"_136":160,"_40":41,"_39":148,"_138":58,"_37":217,"_13":62,"_33":20,"_35":218,"_23":24,"_143":-5,"_189":219,"_26":220},{"_42":207,"_31":208,"_29":209,"_136":160,"_40":41,"_39":148,"_138":58,"_37":210,"_13":62,"_33":34,"_35":211,"_23":24,"_143":-5,"_189":212,"_26":213},{"_42":198,"_31":199,"_29":200,"_136":160,"_40":41,"_39":201,"_138":58,"_37":202,"_13":203,"_33":34,"_35":204,"_23":24,"_143":-5,"_189":205,"_26":206},{"_42":152,"_31":153,"_29":154,"_136":-5,"_40":41,"_39":148,"_138":58,"_37":195,"_13":62,"_33":20,"_35":156,"_23":24,"_143":-5,"_189":196,"_26":197},{"_42":145,"_31":146,"_29":147,"_136":-5,"_40":41,"_39":148,"_138":58,"_37":192,"_13":62,"_33":20,"_35":150,"_23":24,"_143":-5,"_189":193,"_26":194},{"_42":134,"_31":135,"_29":56,"_136":-5,"_40":41,"_39":137,"_138":24,"_37":188,"_13":140,"_33":141,"_35":142,"_23":24,"_143":-5,"_189":190,"_26":191},["D",1789151333671],"children",[],[135],["D",1789126972111],[],[146],["D",1789126972111],[],[153],"9c30281c-736e-457c-9341-b4f7e95ffe8e","root.tsx","01a09047-131c-7786-a391-3295fcc3256f",20,["D",1789151314513],2,"/** @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>OSO</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,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 />);",[],[159,208],"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,215],"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>}",[],[159,230,222],"components","8c38684a-321d-474c-8fc6-5727179739e9",["D",1789212279901],[],[159,230,32],"028d2361-2e0e-40ea-993b-03ee19302f4c","StudioPro.tsx","cdd40922-ae0e-11f1-b38d-1607ee4eb77e",24,["D",1789151403083],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React,{useEffect,useMemo,useRef,useState} from \"https://esm.sh/react@18.2.0\";\n\ntype Obj={\n id:string; type:\"text\"|\"rect\"|\"circle\"|\"image\"; x:number;y:number;w:number;h:number;\n text?:string;fill:string;size?:number;opacity:number;rotation?:number;fontFamily?:string;\n fontWeight?:number;align?:\"left\"|\"center\"|\"right\";hidden?:boolean;locked?:boolean;radius?:number;\n fileId?:string;name?:string\n};\nconst device=localStorage.getItem(\"aion-evo-device\")||\"\";\nconst PRESETS:any={\n square:{name:\"Post 1:1\",w:1080,h:1080},\n story:{name:\"Story 9:16\",w:1080,h:1920},\n landscape:{name:\"Video 16:9\",w:1920,h:1080},\n letter:{name:\"Carta\",w:1275,h:1650},\n a4:{name:\"A4\",w:1240,h:1754}\n};\nconst FONTS=[\"Inter\",\"Arial\",\"Georgia\",\"Verdana\",\"Trebuchet MS\",\"Times New Roman\",\"Courier New\"];\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 disabled:opacity-40\";\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\";\nconst clone=(v:any)=>JSON.parse(JSON.stringify(v));\nconst uid=()=>crypto.randomUUID();\n\nfunction normalize(v:any){\n return {\n  preset:v.preset||\"story\",title:v.title||\"OSO\",subtitle:v.subtitle||\"Diseña sin fricción\",\n  background:v.background||v.brand?.secondary||\"#0b1020\",\n  brand:{name:v.brand?.name||\"OSO\",primary:v.brand?.primary||\"#7c8cff\",secondary:v.brand?.secondary||\"#0b1020\",accent:v.brand?.accent||\"#4ee2c1\",headingFont:v.brand?.headingFont||\"Inter\",bodyFont:v.brand?.bodyFont||\"Inter\"},\n  grid:v.grid??true,safe:v.safe??true,snap:v.snap??true,\n  objects:(v.objects||[]).map((o:any)=>({...o,rotation:o.rotation||0,fontFamily:o.fontFamily||\"Inter\",fontWeight:o.fontWeight||700,align:o.align||\"left\",hidden:o.hidden||false,locked:o.locked||false,radius:o.radius||0}))\n };\n}\n\nexport function StudioPro({value,setValue,save}:{value:any,setValue:(v:any)=>void,save:()=>void}){\n const s=normalize(value),canvas=useRef<HTMLCanvasElement>(null),drag=useRef<any>(null),imgCache=useRef<Map<string,HTMLImageElement>>(new Map());\n const [selected,setSelected]=useState<string|null>(null),[history,setHistory]=useState<any[]>([]),[future,setFuture]=useState<any[]>([]);\n const [zoom,setZoom]=useState(55),[exportScale,setExportScale]=useState(2),[localStatus,setLocalStatus]=useState(\"Studio listo\");\n const p=PRESETS[s.preset]||PRESETS.story, selectedObj=(s.objects as Obj[]).find(o=>o.id===selected);\n\n function set(next:any){setValue(normalize(next))}\n function snapshot(){setHistory(h=>[...h.slice(-39),clone(s)]);setFuture([])}\n function commit(next:any){snapshot();set(next)}\n function undo(){if(!history.length)return;const prev=history[history.length-1];setFuture(f=>[clone(s),...f].slice(0,40));setHistory(h=>h.slice(0,-1));set(prev);setSelected(null)}\n function redo(){if(!future.length)return;const next=future[0];setHistory(h=>[...h,clone(s)].slice(-40));setFuture(f=>f.slice(1));set(next);setSelected(null)}\n\n async function loadImg(id:string){if(imgCache.current.has(id))return imgCache.current.get(id)!;const im=new Image();im.crossOrigin=\"anonymous\";im.src=\"/api/assets/\"+id+\"?device=\"+device;await new Promise((res,rej)=>{im.onload=res;im.onerror=rej});imgCache.current.set(id,im);return im}\n function roundRect(x:CanvasRenderingContext2D,w:number,h:number,r:number){r=Math.max(0,Math.min(r,Math.min(w,h)/2));x.beginPath();x.moveTo(r,0);x.lineTo(w-r,0);x.quadraticCurveTo(w,0,w,r);x.lineTo(w,h-r);x.quadraticCurveTo(w,h,w-r,h);x.lineTo(r,h);x.quadraticCurveTo(0,h,0,h-r);x.lineTo(0,r);x.quadraticCurveTo(0,0,r,0);x.closePath()}\n function wrap(x:CanvasRenderingContext2D,text:string,w:number,size:number){const words=text.split(/\\s+/),lines:string[]=[];let line=\"\";for(const word of words){const t=line?line+\" \"+word:word;if(x.measureText(t).width>w&&line){lines.push(line);line=word}else line=t}if(line)lines.push(line);return lines.slice(0,10)}\n async function render(target:HTMLCanvasElement,editing=true,scale=1){\n  target.width=p.w*scale;target.height=p.h*scale;const x=target.getContext(\"2d\")!;x.setTransform(scale,0,0,scale,0,0);\n  x.fillStyle=s.background;x.fillRect(0,0,p.w,p.h);\n  for(const o of s.objects as Obj[]){if(o.hidden)continue;x.save();x.globalAlpha=o.opacity??1;x.translate(o.x+o.w/2,o.y+o.h/2);x.rotate((o.rotation||0)*Math.PI/180);x.translate(-o.w/2,-o.h/2);\n   if(o.type===\"image\"&&o.fileId){try{const im=await loadImg(o.fileId);x.drawImage(im,0,0,o.w,o.h)}catch{}}\n   else if(o.type===\"rect\"){x.fillStyle=o.fill;roundRect(x,o.w,o.h,o.radius||0);x.fill()}\n   else if(o.type===\"circle\"){x.fillStyle=o.fill;x.beginPath();x.ellipse(o.w/2,o.h/2,o.w/2,o.h/2,0,0,Math.PI*2);x.fill()}\n   else{x.fillStyle=o.fill;x.font=(o.fontWeight||700)+\" \"+(o.size||48)+\"px \"+(o.fontFamily||s.brand.headingFont)+\", sans-serif\";x.textBaseline=\"top\";x.textAlign=o.align||\"left\";const ax=o.align===\"center\"?o.w/2:o.align===\"right\"?o.w:0;wrap(x,o.text||\"Texto\",o.w,o.size||48).forEach((ln,i)=>x.fillText(ln,ax,i*(o.size||48)*1.18))}\n   x.restore();\n  }\n  if(editing){\n   if(s.grid){x.strokeStyle=\"rgba(150,170,220,.14)\";x.lineWidth=1;const step=100;for(let a=step;a<p.w;a+=step){x.beginPath();x.moveTo(a,0);x.lineTo(a,p.h);x.stroke()}for(let a=step;a<p.h;a+=step){x.beginPath();x.moveTo(0,a);x.lineTo(p.w,a);x.stroke()}}\n   if(s.safe){const m=Math.min(p.w,p.h)*.06;x.strokeStyle=\"rgba(88,219,168,.6)\";x.lineWidth=2;x.setLineDash([12,9]);x.strokeRect(m,m,p.w-2*m,p.h-2*m);x.setLineDash([]);x.strokeStyle=\"rgba(150,175,255,.3)\";x.beginPath();x.moveTo(p.w/2,0);x.lineTo(p.w/2,p.h);x.moveTo(0,p.h/2);x.lineTo(p.w,p.h/2);x.stroke()}\n   if(selectedObj&&!selectedObj.hidden){const o=selectedObj;x.save();x.strokeStyle=\"#b8c6ff\";x.lineWidth=3;x.setLineDash([8,6]);x.strokeRect(o.x,o.y,o.w,o.h);x.setLineDash([]);x.fillStyle=\"#dfe6ff\";x.fillRect(o.x+o.w-12,o.y+o.h-12,24,24);x.restore()}\n  }\n }\n useEffect(()=>{if(canvas.current)render(canvas.current,true,1)},[value,selected]);\n\n function add(type:Obj[\"type\"]){const base:Obj={id:uid(),type,x:100,y:260+(s.objects.length%6)*45,w:type===\"text\"?480:240,h:type===\"text\"?140:240,text:type===\"text\"?\"Texto OSO\":\"\",fill:type===\"text\"?\"#ffffff\":s.brand.primary,size:56,opacity:1,rotation:0,fontFamily:s.brand.headingFont,fontWeight:700,align:\"left\",hidden:false,locked:false,radius:type===\"rect\"?24:0};commit({...s,objects:[...s.objects,base]});setSelected(base.id)}\n async function addImage(file:File){if(!file.type.startsWith(\"image/\"))return;setLocalStatus(\"Subiendo imagen...\");const fd=new FormData();fd.append(\"file\",file);const r=await fetch(\"/api/files?device=\"+device,{method:\"POST\",body:fd});if(!r.ok){setLocalStatus(\"No pude subir la imagen\");return}const d=await r.json();const o:Obj={id:uid(),type:\"image\",x:100,y:300,w:Math.min(620,p.w*.65),h:420,fill:\"#fff\",opacity:1,rotation:0,fileId:d.id,name:file.name,hidden:false,locked:false};commit({...s,objects:[...s.objects,o]});setSelected(o.id);setLocalStatus(\"Imagen añadida\")}\n function patch(id:string,p:any){set({...s,objects:s.objects.map((o:Obj)=>o.id===id?{...o,...p}:o)})}\n function del(id:string){commit({...s,objects:s.objects.filter((o:Obj)=>o.id!==id)});if(selected===id)setSelected(null)}\n function duplicate(id:string){const o=s.objects.find((x:Obj)=>x.id===id);if(!o)return;const n={...clone(o),id:uid(),x:o.x+30,y:o.y+30};commit({...s,objects:[...s.objects,n]});setSelected(n.id)}\n function reorder(id:string,d:number){const a=[...s.objects],i=a.findIndex((o:Obj)=>o.id===id),j=i+d;if(i<0||j<0||j>=a.length)return;[a[i],a[j]]=[a[j],a[i]];commit({...s,objects:a})}\n function align(kind:string){if(!selectedObj||selectedObj.locked)return;const o=selectedObj;const m=Math.min(p.w,p.h)*.06;const next:any={};if(kind===\"left\")next.x=m;if(kind===\"center\")next.x=(p.w-o.w)/2;if(kind===\"right\")next.x=p.w-m-o.w;if(kind===\"top\")next.y=m;if(kind===\"middle\")next.y=(p.h-o.h)/2;if(kind===\"bottom\")next.y=p.h-m-o.h;snapshot();patch(o.id,next)}\n\n function point(e:any){const r=canvas.current!.getBoundingClientRect();return{x:(e.clientX-r.left)*p.w/r.width,y:(e.clientY-r.top)*p.h/r.height}}\n function down(e:any){const q=point(e);const hit=[...s.objects].reverse().find((o:Obj)=>!o.hidden&&q.x>=o.x&&q.x<=o.x+o.w&&q.y>=o.y&&q.y<=o.y+o.h);if(!hit){setSelected(null);return}setSelected(hit.id);if(hit.locked)return;snapshot();const resize=Math.abs(q.x-(hit.x+hit.w))<32&&Math.abs(q.y-(hit.y+hit.h))<32;drag.current={id:hit.id,mode:resize?\"resize\":\"move\",sx:q.x,sy:q.y,ox:hit.x,oy:hit.y,ow:hit.w,oh:hit.h};canvas.current!.setPointerCapture(e.pointerId)}\n function move(e:any){if(!drag.current)return;const q=point(e),d=drag.current,o=s.objects.find((x:Obj)=>x.id===d.id);if(!o)return;if(d.mode===\"resize\"){const nw=Math.max(40,d.ow+q.x-d.sx),nh=Math.max(40,d.oh+q.y-d.sy);patch(o.id,{w:Math.min(p.w-o.x,nw),h:Math.min(p.h-o.y,nh)});return}let x=Math.max(0,Math.min(p.w-o.w,d.ox+q.x-d.sx)),y=Math.max(0,Math.min(p.h-o.h,d.oy+q.y-d.sy));if(s.snap){const m=Math.min(p.w,p.h)*.06;[0,m,(p.w-o.w)/2,p.w-m-o.w,p.w-o.w].forEach(t=>{if(Math.abs(x-t)<18)x=t});[0,m,(p.h-o.h)/2,p.h-m-o.h,p.h-o.h].forEach(t=>{if(Math.abs(y-t)<18)y=t})}patch(o.id,{x,y})}\n function up(){drag.current=null}\n function template(kind:string){const m=Math.min(p.w,p.h)*.07,b=s.brand,u=uid;let objs:Obj[]=[];if(kind===\"minimal\")objs=[{id:u(),type:\"rect\",x:m,y:m,w:p.w-2*m,h:p.h*.16,fill:b.primary,opacity:1,radius:32},{id:u(),type:\"text\",x:m*1.2,y:p.h*.34,w:p.w-2.4*m,h:200,text:b.name,fill:\"#fff\",size:p.w*.075,opacity:1,fontFamily:b.headingFont,fontWeight:900,align:\"left\"},{id:u(),type:\"text\",x:m*1.2,y:p.h*.49,w:p.w-2.4*m,h:160,text:\"Diseño claro, fuerte y memorable.\",fill:b.accent,size:p.w*.032,opacity:1,fontFamily:b.bodyFont,fontWeight:400,align:\"left\"}];if(kind===\"promo\")objs=[{id:u(),type:\"circle\",x:p.w*.64,y:p.h*.08,w:p.w*.28,h:p.w*.28,fill:b.accent,opacity:.9},{id:u(),type:\"text\",x:m,y:p.h*.22,w:p.w*.72,h:260,text:\"OFERTA ESPECIAL\",fill:\"#fff\",size:p.w*.085,opacity:1,fontFamily:b.headingFont,fontWeight:900,align:\"left\"},{id:u(),type:\"text\",x:m,y:p.h*.48,w:p.w*.68,h:180,text:\"Un beneficio fuerte explicado en una sola frase.\",fill:\"#dce4ef\",size:p.w*.034,opacity:1,fontFamily:b.bodyFont,fontWeight:500,align:\"left\"},{id:u(),type:\"rect\",x:m,y:p.h*.72,w:p.w*.38,h:96,fill:b.primary,opacity:1,radius:48},{id:u(),type:\"text\",x:m+30,y:p.h*.735,w:p.w*.31,h:70,text:\"VER MÁS\",fill:\"#fff\",size:p.w*.027,opacity:1,fontFamily:b.headingFont,fontWeight:800,align:\"center\"}];if(kind===\"editorial\")objs=[{id:u(),type:\"rect\",x:0,y:0,w:p.w*.32,h:p.h,fill:b.secondary,opacity:1},{id:u(),type:\"text\",x:p.w*.4,y:p.h*.16,w:p.w*.5,h:260,text:\"EDITORIAL\\nDESIGN\",fill:b.primary,size:p.w*.07,opacity:1,fontFamily:b.headingFont,fontWeight:900,align:\"left\"},{id:u(),type:\"text\",x:p.w*.4,y:p.h*.47,w:p.w*.47,h:220,text:\"Espacio, jerarquía y una narrativa visual precisa.\",fill:\"#fff\",size:p.w*.03,opacity:1,fontFamily:b.bodyFont,fontWeight:400,align:\"left\"},{id:u(),type:\"circle\",x:p.w*.13,y:p.h*.72,w:p.w*.12,h:p.w*.12,fill:b.accent,opacity:1}];commit({...s,objects:objs});setSelected(null)}\n\n const quality=useMemo(()=>{const issues:string[]=[];const vis=s.objects.filter((o:Obj)=>!o.hidden),texts=vis.filter((o:Obj)=>o.type===\"text\"),words=texts.map((o:Obj)=>o.text||\"\").join(\" \").trim().split(/\\s+/).filter(Boolean).length;if(words>80)issues.push(\"Reduce texto\");if(vis.length>18)issues.push(\"Demasiadas capas\");const m=Math.min(p.w,p.h)*.035;if(vis.some((o:Obj)=>o.x<m||o.y<m||o.x+o.w>p.w-m||o.y+o.h>p.h-m))issues.push(\"Revisa márgenes\");if(!texts.length)issues.push(\"Falta jerarquía tipográfica\");if(!vis.some((o:Obj)=>o.type===\"rect\"&&o.radius))issues.push(\"Considera un CTA/contenedor\");return{score:Math.max(40,100-issues.length*11),issues}},[value]);\n async function exportImg(type:\"png\"|\"jpeg\"|\"webp\"){const temp=document.createElement(\"canvas\");await render(temp,false,exportScale);const a=document.createElement(\"a\");const ext=type===\"jpeg\"?\"jpg\":type;a.download=(s.title||\"oso-design\")+\"-\"+exportScale+\"x.\"+ext;a.href=temp.toDataURL(\"image/\"+type,.95);a.click()}\n function focusSnap(e:any){snapshot()}\n\n return <div className=\"space-y-3\">\n  <div className={shell+\" p-3 flex flex-wrap gap-2 items-center\"}>\n   <div className=\"mr-auto\"><b>OSO STUDIO PRO</b><small className=\"block text-slate-500\">Editor visual · capas · imágenes · nube</small></div>\n   <button className={btn} disabled={!history.length} onClick={undo}>↶ Undo</button><button className={btn} disabled={!future.length} onClick={redo}>↷ Redo</button>\n   <button className={s.grid?primary:btn} onClick={()=>set({...s,grid:!s.grid})}>Grid</button><button className={s.safe?primary:btn} onClick={()=>set({...s,safe:!s.safe})}>Safe</button><button className={s.snap?primary:btn} onClick={()=>set({...s,snap:!s.snap})}>Snap</button>\n   <button className={primary} onClick={save}>Guardar nube</button>\n  </div>\n  <div className=\"grid xl:grid-cols-[245px_1fr_285px] gap-3\">\n   <aside className={shell+\" p-3 space-y-3\"}>\n    <b>Documento</b><input className={input} value={s.title} onFocus={focusSnap} onChange={e=>set({...s,title:e.target.value})}/><input className={input} value={s.subtitle} onFocus={focusSnap} onChange={e=>set({...s,subtitle:e.target.value})}/>\n    <select className={input} value={s.preset} onChange={e=>commit({...s,preset:e.target.value})}>{Object.entries(PRESETS).map(([k,v]:any)=><option value={k}>{v.name} · {v.w}×{v.h}</option>)}</select>\n    <label className=\"text-xs text-slate-500\">Fondo<input className=\"block mt-1 w-full h-10\" type=\"color\" value={s.background} onChange={e=>set({...s,background:e.target.value})}/></label>\n    <b>Insertar</b><div className=\"grid grid-cols-3 gap-2\"><button className={btn} onClick={()=>add(\"text\")}>Texto</button><button className={btn} onClick={()=>add(\"rect\")}>Rect</button><button className={btn} onClick={()=>add(\"circle\")}>Círculo</button></div>\n    <label className={primary+\" text-center block\"}>+ Imagen<input type=\"file\" accept=\"image/*\" hidden onChange={e=>e.target.files?.[0]&&addImage(e.target.files[0])}/></label>\n    <b>Templates</b><div className=\"grid gap-2\"><button className={btn+\" text-left\"} onClick={()=>template(\"minimal\")}>Minimal Brand</button><button className={btn+\" text-left\"} onClick={()=>template(\"promo\")}>Premium Promo</button><button className={btn+\" text-left\"} onClick={()=>template(\"editorial\")}>Editorial</button></div>\n    <b>Brand Kit</b><input className={input} value={s.brand.name} onFocus={focusSnap} onChange={e=>set({...s,brand:{...s.brand,name:e.target.value}})}/><div className=\"grid grid-cols-3 gap-2\">{[\"primary\",\"secondary\",\"accent\"].map(k=><input className=\"w-full h-10\" type=\"color\" value={s.brand[k]} onChange={e=>set({...s,brand:{...s.brand,[k]:e.target.value}})}/>)}</div>\n    <select className={input} value={s.brand.headingFont} onChange={e=>set({...s,brand:{...s.brand,headingFont:e.target.value}})}>{FONTS.map(f=><option>{f}</option>)}</select>\n    <select className={input} value={s.brand.bodyFont} onChange={e=>set({...s,brand:{...s.brand,bodyFont:e.target.value}})}>{FONTS.map(f=><option>{f}</option>)}</select>\n    <div className=\"border border-slate-800 rounded-xl p-3\"><div className=\"flex justify-between\"><b>Quality</b><strong className={quality.score>75?\"text-emerald-400\":\"text-amber-300\"}>{quality.score}/100</strong></div>{quality.issues.length?quality.issues.map(x=><small className=\"block text-slate-500 mt-1\">• {x}</small>):<small className=\"block text-emerald-400 mt-1\">✓ Composición limpia</small>}</div>\n   </aside>\n   <section className={shell+\" p-3 overflow-auto\"}>\n    <div className=\"flex flex-wrap gap-2 items-center justify-center mb-3\"><span className=\"text-xs text-slate-500\">Zoom {zoom}%</span><input type=\"range\" min=\"25\" max=\"100\" value={zoom} onChange={e=>setZoom(+e.target.value)} /><span className=\"text-xs text-slate-600\">{localStatus}</span></div>\n    <div className=\"min-h-[520px] grid place-items-center bg-black/40 rounded-xl p-3 overflow-auto\"><canvas ref={canvas} onPointerDown={down} onPointerMove={move} onPointerUp={up} onPointerCancel={up} style={{width:(p.w*zoom/100)+\"px\",height:(p.h*zoom/100)+\"px\",maxWidth:\"none\",touchAction:\"none\"}} className=\"shadow-2xl\"/></div>\n    <div className=\"flex flex-wrap gap-2 justify-center mt-3\"><select className={btn} value={exportScale} onChange={e=>setExportScale(+e.target.value)}><option value=\"1\">1×</option><option value=\"2\">2× HD</option><option value=\"3\">3× PRO</option></select><button className={btn} onClick={()=>exportImg(\"png\")}>PNG</button><button className={btn} onClick={()=>exportImg(\"jpeg\")}>JPG</button><button className={btn} onClick={()=>exportImg(\"webp\")}>WEBP</button></div>\n   </section>\n   <aside className={shell+\" p-3\"}>\n    <b>Capas</b><div className=\"space-y-1 mt-2 max-h-72 overflow-auto\">{[...s.objects].reverse().map((o:Obj,i:number)=><div className={(selected===o.id?\"border-indigo-400 \":\"\")+\"border border-slate-800 rounded-xl p-2 grid grid-cols-[1fr_auto_auto] gap-1 items-center\"} onClick={()=>setSelected(o.id)}><button className=\"text-left truncate\"><b>{o.name||o.text||o.type}</b><small className=\"block text-slate-500\">{o.type}{o.hidden?\" · oculto\":\"\"}{o.locked?\" · 🔒\":\"\"}</small></button><button onClick={e=>{e.stopPropagation();patch(o.id,{hidden:!o.hidden})}}>◉</button><button onClick={e=>{e.stopPropagation();patch(o.id,{locked:!o.locked})}}>🔒</button></div>)}</div>\n    {selectedObj&&<div className=\"mt-4 pt-4 border-t border-slate-800 space-y-2\"><div className=\"flex justify-between\"><b>Inspector</b><span className=\"text-xs text-slate-500\">{selectedObj.type}</span></div>\n     {selectedObj.type===\"text\"&&<><textarea className={input} value={selectedObj.text||\"\"} onFocus={focusSnap} onChange={e=>patch(selectedObj.id,{text:e.target.value})}/><select className={input} value={selectedObj.fontFamily||s.brand.headingFont} onChange={e=>{snapshot();patch(selectedObj.id,{fontFamily:e.target.value})}}>{FONTS.map(f=><option>{f}</option>)}</select><div className=\"grid grid-cols-2 gap-2\"><input className={input} type=\"number\" min=\"10\" max=\"240\" value={selectedObj.size||48} onFocus={focusSnap} onChange={e=>patch(selectedObj.id,{size:+e.target.value})}/><select className={input} value={selectedObj.fontWeight||700} onChange={e=>{snapshot();patch(selectedObj.id,{fontWeight:+e.target.value})}}>{[300,400,500,600,700,800,900].map(w=><option value={w}>{w}</option>)}</select></div><select className={input} value={selectedObj.align||\"left\"} onChange={e=>{snapshot();patch(selectedObj.id,{align:e.target.value})}}><option value=\"left\">Izquierda</option><option value=\"center\">Centro</option><option value=\"right\">Derecha</option></select></>}\n     {selectedObj.type!==\"image\"&&<label className=\"text-xs text-slate-500\">Color<input className=\"block w-full h-9 mt-1\" type=\"color\" value={selectedObj.fill} onChange={e=>patch(selectedObj.id,{fill:e.target.value})}/></label>}\n     <div className=\"grid grid-cols-2 gap-2\">{[\"x\",\"y\",\"w\",\"h\"].map(k=><label className=\"text-xs text-slate-500\">{k.toUpperCase()}<input className={input} disabled={selectedObj.locked} type=\"number\" value={Math.round((selectedObj as any)[k])} onFocus={focusSnap} onChange={e=>patch(selectedObj.id,{[k]:Math.max(k===\"x\"||k===\"y\"?0:20,+e.target.value)})}/></label>)}</div>\n     <label className=\"text-xs text-slate-500\">Rotación<input className={input} disabled={selectedObj.locked} type=\"number\" min=\"-180\" max=\"180\" value={selectedObj.rotation||0} onFocus={focusSnap} onChange={e=>patch(selectedObj.id,{rotation:+e.target.value})}/></label>\n     {selectedObj.type===\"rect\"&&<label className=\"text-xs text-slate-500\">Radio<input className={input} type=\"number\" min=\"0\" max=\"240\" value={selectedObj.radius||0} onChange={e=>patch(selectedObj.id,{radius:+e.target.value})}/></label>}\n     <label className=\"text-xs text-slate-500\">Opacidad<input className=\"w-full\" type=\"range\" min=\".1\" max=\"1\" step=\".05\" value={selectedObj.opacity} onChange={e=>patch(selectedObj.id,{opacity:+e.target.value})}/></label>\n     <b className=\"block pt-2\">Alinear</b><div className=\"grid grid-cols-3 gap-1\">{[[\"left\",\"←\"],[\"center\",\"↔\"],[\"right\",\"→\"],[\"top\",\"↑\"],[\"middle\",\"↕\"],[\"bottom\",\"↓\"]].map(([k,l])=><button className={btn} onClick={()=>align(k)}>{l}</button>)}</div>\n     <div className=\"grid grid-cols-2 gap-2\"><button className={btn} onClick={()=>duplicate(selectedObj.id)}>Duplicar</button><button className={btn} onClick={()=>reorder(selectedObj.id,1)}>Subir capa</button><button className={btn} onClick={()=>reorder(selectedObj.id,-1)}>Bajar capa</button><button className={btn+\" text-red-300\"} onClick={()=>del(selectedObj.id)}>Eliminar</button></div>\n    </div>}\n   </aside>\n  </div>\n </div>\n}",[],[159,230,236],"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,230,244],"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,230,251],"440eb1d5-f3e6-4163-8c9d-208aae1f7719","App.tsx","01a09047-131b-7256-b1f6-cc84e0eb1e97",27,["D",1789151474714],12,"/** @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\";\nimport { StudioPro } from \"./StudioPro.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 OSO...\");\n const [studio,setStudio]=useState<any>({preset:\"story\",title:\"OSO\",subtitle:\"Diseño sin fricción\",brand:{name:\"OSO\",primary:\"#7c8cff\",secondary:\"#0b1020\",accent:\"#4ee2c1\",headingFont:\"Inter\",bodyFont:\"Inter\"},objects:[],grid:true,safe:true,snap:true,background:\"#0b1020\"});\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\"],[\"view\",\"📺\",\"View\"],[\"sound\",\"🎧\",\"Sound\"],[\"web\",\"🌐\",\"Web\"],[\"learn\",\"🎓\",\"Learn\"],[\"atlas\",\"🗺️\",\"Atlas\"],[\"play\",\"🎮\",\"Play\"],[\"store\",\"🧩\",\"Store\"],[\"tasks\",\"✅\",\"Tasks\"]];\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-[.28em]\">OSO</b><small className=\"block text-slate-500\">Creative Operating System · 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\"?<StudioPro 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}/>:[\"talk\",\"flow\",\"mail\",\"meet\"].includes(app)?<Comms kind={app} setStatus={setStatus}/>:<Utilities 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,230,259],"772681df-69f1-4352-a2a1-d348274c9b0d",["D",1789126972111],[176,177,178,179,180,181],[159,230],["D",1789126972111],[175,182,183,184],[159],["D",1789126972111],["D",1789564254151],{"_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":312,"_313":314,"_315":316,"_317":24,"_318":24,"_319":24,"_320":58,"_321":-5,"_322":-7,"_323":-7,"_324":62,"_325":24,"_326":24,"_327":-5,"_328":24,"_329":24,"_330":24,"_331":-5},"ENV",{"_283":284,"_285":286,"_287":89,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","9e167d8120a57de5d747867e0b686da51bcc19a4","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 · v28