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>}","01a09047-131c-7786-a391-24ab1624c76f",["D",1789127239909],"branchVersion","label",[156,157,65],"frontend","components","pulls","branches",1,"forks","envVars",{"_166":26,"_168":26},"connections",{"_166":26,"_167":26},"count","unfilledCount","emptyCount",{"_32":308,"_13":156,"_63":214,"_42":-5,"_34":35,"_153":160,"_189":86,"_36":309,"_38":26,"_66":248,"_149":-5,"_68":24,"_154":-5,"_194":310,"_17":311},{"_32":304,"_13":157,"_63":151,"_42":214,"_34":35,"_153":160,"_189":86,"_36":305,"_38":26,"_66":248,"_149":-5,"_68":24,"_154":-5,"_194":306,"_17":307},{"_32":295,"_13":296,"_63":297,"_42":151,"_34":35,"_153":298,"_189":86,"_36":299,"_38":300,"_66":67,"_149":301,"_68":24,"_154":-5,"_194":302,"_17":303},{"_32":287,"_13":288,"_63":289,"_42":151,"_34":35,"_153":290,"_189":86,"_36":291,"_38":26,"_66":67,"_149":292,"_68":24,"_154":-5,"_194":293,"_17":294},{"_32":280,"_13":281,"_63":282,"_42":151,"_34":35,"_153":160,"_189":86,"_36":283,"_38":26,"_66":67,"_149":284,"_68":24,"_154":-5,"_194":285,"_17":286},{"_32":271,"_13":272,"_63":273,"_42":151,"_34":35,"_153":274,"_189":86,"_36":275,"_38":276,"_66":67,"_149":277,"_68":24,"_154":-5,"_194":278,"_17":279},{"_32":263,"_13":264,"_63":265,"_42":151,"_34":35,"_153":266,"_189":86,"_36":267,"_38":26,"_66":67,"_149":268,"_68":24,"_154":-5,"_194":269,"_17":270},{"_32":254,"_13":255,"_63":256,"_42":151,"_34":35,"_153":257,"_189":86,"_36":258,"_38":259,"_66":67,"_149":260,"_68":24,"_154":-5,"_194":261,"_17":262},{"_32":148,"_13":65,"_63":64,"_42":151,"_34":35,"_153":39,"_189":86,"_36":251,"_38":26,"_66":67,"_149":150,"_68":24,"_154":-5,"_194":252,"_17":253},{"_32":245,"_13":244,"_63":238,"_42":214,"_34":35,"_153":246,"_189":86,"_36":247,"_38":26,"_66":248,"_149":-5,"_68":24,"_154":-5,"_194":249,"_17":250},{"_32":235,"_13":236,"_63":237,"_42":238,"_34":35,"_153":112,"_189":86,"_36":239,"_38":240,"_66":67,"_149":241,"_68":24,"_154":-5,"_194":242,"_17":243},{"_32":228,"_13":229,"_63":230,"_42":214,"_34":35,"_153":160,"_189":86,"_36":231,"_38":26,"_66":21,"_149":232,"_68":24,"_154":-5,"_194":233,"_17":234},{"_32":221,"_13":222,"_63":223,"_42":214,"_34":35,"_153":160,"_189":86,"_36":224,"_38":26,"_66":67,"_149":225,"_68":24,"_154":-5,"_194":226,"_17":227},{"_32":211,"_13":212,"_63":213,"_42":214,"_34":35,"_153":215,"_189":86,"_36":216,"_38":217,"_66":67,"_149":218,"_68":24,"_154":-5,"_194":219,"_17":220},{"_32":204,"_13":205,"_63":206,"_42":-5,"_34":35,"_153":160,"_189":86,"_36":207,"_38":26,"_66":21,"_149":208,"_68":24,"_154":-5,"_194":209,"_17":210},{"_32":197,"_13":198,"_63":199,"_42":-5,"_34":35,"_153":160,"_189":86,"_36":200,"_38":26,"_66":21,"_149":201,"_68":24,"_154":-5,"_194":202,"_17":203},{"_32":186,"_13":187,"_63":84,"_42":-5,"_34":35,"_153":188,"_189":86,"_36":190,"_38":191,"_66":192,"_149":193,"_68":24,"_154":-5,"_194":195,"_17":196},"2fc2a397-fe8c-4046-8ea8-948ae0187cf5","index.ts",63,"latest",["D",1789383926573],12,"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.post(\"/api/studio-ai\",async c=>{const d=device(c);if(!d)return c.json({error:\"invalid_device\"},400);const body=await c.req.json() as any;const kind=String(body.kind||\"route\"),prompt=String(body.prompt||\"\").trim().slice(0,3000),text=String(body.text||\"\").slice(0,5000);if(!prompt)return c.json({error:\"prompt_required\"},400);const session=(\"oso-\"+d.replace(/[^A-Za-z0-9-]/g,\"\").slice(0,40)).padEnd(12,\"0\");let instruction=\"\";if(kind===\"route\")instruction=`Clasifica la orden del usuario para un editor gráfico. Devuelve SOLO uno de estos tokens exactos: premium, minimal, brand, story, square, landscape, banner, enhance, product_crop, portrait_crop, shorten_text, cta, headline, qa_fix, center, remove_background, extract_subject. Orden: ${prompt}`;else instruction=`Actúa como editor de copy dentro de OSO Studio. ${prompt}. Devuelve SOLO el texto final, sin comillas, explicación ni markdown. Texto original: ${text}`;try{const r=await fetch(\"https://aion-cloud-os-wj15xf.v2.appdeploy.ai/api/assist\",{method:\"POST\",headers:{\"content-type\":\"application/json\"},body:JSON.stringify({session,mode:\"studio\",prompt:instruction})});if(!r.ok){const raw=await r.text();return c.json({ok:false,error:\"ai_upstream\",upstreamStatus:r.status,detail:raw.slice(0,500)})}const data=await r.json() as any;return c.json({ok:true,text:String(data.text||\"\").trim()})}catch(e){return c.json({ok:false,error:\"ai_unavailable\",detail:String(e).slice(0,300)})}});\napp.get(\"/api/studio-ai/health\",async c=>{try{const r=await fetch(\"https://aion-cloud-os-wj15xf.v2.appdeploy.ai/api/_healthcheck\");return c.json({ok:r.ok,upstream:r.status})}catch{return c.json({ok:false},503)}});\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\"],studioIntelligence:\"local-tools\",imageAI:\"browser-local\",remoteTextAI:\"fallback-only\",runtime:\"Val Town\"}));\napp.onError(err=>Promise.reject(err));\nexport default app.fetch;","children",[],[187],"bdfa25dc-c360-4e99-ba59-550e011b968a","README.md","01a09047-131c-7786-a391-3c9e634e5a4c",["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",[],[198],"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",[],[205],"9c30281c-736e-457c-9341-b4f7e95ffe8e","root.tsx","01a09047-131c-7786-a391-3295fcc3256f","01a09047-131c-7786-a391-37f957c9d9ea",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></>}",[],[156,212],"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 />);",[],[156,222],"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>",[],[156,229],"f445233f-5e36-4e11-8a82-772d237d7f68","packages.ts","c86ee9a8-b033-11f1-a5b0-1607ee4eb77e","bce0a54e-ae73-4898-809a-12992a5d76cc",["D",1789387464232],3,"// OSO Studio package layer — light core + lazy heavy tools\nimport { z } from \"https://esm.sh/zod@3.23.8\";\nimport { nanoid } from \"https://esm.sh/nanoid@5.0.7\";\nimport tinycolor from \"https://esm.sh/tinycolor2@1.6.0\";\nimport { getStroke } from \"https://esm.sh/perfect-freehand@1.2.2\";\n\nexport { z, nanoid, tinycolor, getStroke };\n\nexport async function loadPDFLib(){return await import(\"https://esm.sh/pdf-lib@1.17.1\")}\nexport async function loadZustand(){return await import(\"https://esm.sh/zustand@4.5.5?deps=react@18.2.0\")}\nexport async function loadImmer(){return await import(\"https://esm.sh/immer@10.1.1\")}\nexport async function loadUseGesture(){return await import(\"https://esm.sh/@use-gesture/react@10.3.1?deps=react@18.2.0\")}\nexport async function loadHotkeys(){return await import(\"https://esm.sh/react-hotkeys-hook@4.5.0?deps=react@18.2.0\")}\nexport async function loadDexie(){return await import(\"https://esm.sh/dexie@4.0.10\")}\nexport async function loadIDBKeyval(){return await import(\"https://esm.sh/idb-keyval@6.2.1\")}\nexport async function loadCulori(){return await import(\"https://esm.sh/culori@4.0.1\")}\nexport async function loadFileSaver(){return await import(\"https://esm.sh/file-saver@2.0.5\")}\nexport async function loadPica(){\n  const mod:any=await import(\"https://esm.sh/pica@9.0.1\");\n  const factory=mod.default||mod;\n  return factory();\n}\nexport async function loadExifReader(){\n  return await import(\"https://esm.sh/exifreader@4.23.3\");\n}\nexport async function loadSmartCrop(){\n  return await import(\"https://esm.sh/smartcrop@2.0.5\");\n}\nexport async function loadCompromise(){\n  return await import(\"https://esm.sh/compromise@14.14.3\");\n}\nexport async function loadBackgroundRemoval(){\n  return await import(\"https://esm.sh/@imgly/background-removal@1.7.0?bundle\");\n}\nexport async function loadOnnxRuntime(){\n  return await import(\"https://esm.sh/onnxruntime-web@1.18.0\");\n}\nexport async function loadTransformers(){\n  return await import(\"https://esm.sh/@xenova/transformers@2.17.2\");\n}\nexport async function loadKonva(){\n  return await import(\"https://esm.sh/konva@9.3.18\");\n}\nexport async function loadReactKonva(){\n  return await import(\"https://esm.sh/react-konva@18.2.10?deps=react@18.2.0,react-dom@18.2.0,konva@9.3.18\");\n}\nexport async function loadUseImage(){\n  return await import(\"https://esm.sh/use-image@1.1.1?deps=react@18.2.0\");\n}\n\nexport const StudioProjectSchema=z.object({\n  preset:z.string(),\n  title:z.string().default(\"OSO\"),\n  subtitle:z.string().default(\"\"),\n  background:z.string(),\n  brand:z.object({\n    name:z.string(),\n    primary:z.string(),\n    secondary:z.string(),\n    accent:z.string(),\n    headingFont:z.string(),\n    bodyFont:z.string()\n  }),\n  objects:z.array(z.any()),\n  components:z.array(z.any()).default([]),\n  grid:z.boolean().default(true),\n  safe:z.boolean().default(true),\n  snap:z.boolean().default(true)\n}).passthrough();\n\nexport function normalizeProject(input:any){\n  const result=StudioProjectSchema.safeParse(input);\n  return result.success?result.data:input;\n}\nexport function contrastScore(a:string,b:string){\n  return tinycolor.readability(a,b);\n}\nexport function bestTextColor(bg:string){\n  return tinycolor.isReadable(bg,\"#ffffff\",{level:\"AA\",size:\"small\"})?\"#ffffff\":\"#111111\";\n}\nexport async function localCopyIntent(text:string){\n  const mod:any=await loadCompromise();\n  const nlp=mod.default||mod;\n  const doc=nlp(text||\"\");\n  return {\n    words:doc.wordCount(),\n    questions:doc.questions().out(\"array\"),\n    verbs:doc.verbs().toInfinitive().out(\"array\").slice(0,8),\n    nouns:doc.nouns().toSingular().out(\"array\").slice(0,12)\n  };\n}\n",[],[156,244,236],"studio","5d8a0582-5a4f-4cbd-ab43-814f50d5c646",64,["D",1789387187760],"directory",[179],[156,244],["D",1789127239909],[],[156,157,65],"f1d93b7e-e7d2-4be1-88db-afd028b74b13","StudioProV2.tsx","8b3acc0c-ae9c-11f1-b22a-1607ee4eb77e",71,["D",1789387323143],28,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React,{useEffect,useMemo,useRef,useState} from \"https://esm.sh/react@18.2.0\";\nimport { StudioAGI } from \"./StudioAGI.tsx\";\nimport { nanoid, contrastScore, loadPDFLib, normalizeProject } from \"../studio/packages.ts\";\n\ntype Obj={\n id:string;type:\"text\"|\"rect\"|\"circle\"|\"image\";x:number;y:number;w:number;h:number;text?:string;\n fill:string;fill2?:string;gradient?:boolean;gradientAngle?:number;size?:number;opacity:number;rotation?:number;\n fontFamily?:string;fontWeight?:number;fontStyle?:string;align?:\"left\"|\"center\"|\"right\";hidden?:boolean;locked?:boolean;\n radius?:number;fileId?:string;name?:string;groupId?:string;letterSpacing?:number;lineHeight?:number;\n shadowColor?:string;shadowBlur?:number;shadowX?:number;shadowY?:number;\n brightness?:number;contrast?:number;saturation?:number;blur?:number;grayscale?:number;sepia?:number;\n fit?: \"cover\"|\"contain\"|\"stretch\";cropX?:number;cropY?:number;cropZoom?:number\n};\ntype ComponentDef={id:string;name:string;objects:Obj[]};\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 banner:{name:\"Banner\",w:1920,h:640}\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 uid=()=>nanoid(14);\nconst clone=(v:any)=>JSON.parse(JSON.stringify(v));\n\nfunction objectDefaults(o:any){\n return {...o,rotation:o.rotation||0,fontFamily:o.fontFamily||\"Inter\",fontWeight:o.fontWeight||700,fontStyle:o.fontStyle||\"normal\",\n  align:o.align||\"left\",hidden:o.hidden||false,locked:o.locked||false,radius:o.radius||0,letterSpacing:o.letterSpacing||0,\n  lineHeight:o.lineHeight||1.18,shadowColor:o.shadowColor||\"#000000\",shadowBlur:o.shadowBlur||0,shadowX:o.shadowX||0,shadowY:o.shadowY||0,\n  brightness:o.brightness??100,contrast:o.contrast??100,saturation:o.saturation??100,blur:o.blur||0,grayscale:o.grayscale||0,sepia:o.sepia||0,\n  fit:o.fit||\"cover\",cropX:o.cropX||0,cropY:o.cropY||0,cropZoom:o.cropZoom||1,gradient:o.gradient||false,fill2:o.fill2||o.fill||\"#ffffff\",\n  gradientAngle:o.gradientAngle||0};\n}\nfunction normalize(v:any){\n return normalizeProject({\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\",background2:v.background2||v.background||v.brand?.secondary||\"#0b1020\",\n  backgroundGradient:v.backgroundGradient||false,backgroundAngle:v.backgroundAngle||0,\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(objectDefaults),components:(v.components||[]) as ComponentDef[]\n });\n}\nfunction gradient(ctx:CanvasRenderingContext2D,w:number,h:number,a:string,b:string,angle=0){\n const rad=angle*Math.PI/180,dx=Math.cos(rad),dy=Math.sin(rad),cx=w/2,cy=h/2,len=Math.abs(w*dx)+Math.abs(h*dy);\n const g=ctx.createLinearGradient(cx-dx*len/2,cy-dy*len/2,cx+dx*len/2,cy+dy*len/2);g.addColorStop(0,a);g.addColorStop(1,b);return g;\n}\nfunction bounds(objects:Obj[]){if(!objects.length)return null;const minX=Math.min(...objects.map(o=>o.x)),minY=Math.min(...objects.map(o=>o.y)),maxX=Math.max(...objects.map(o=>o.x+o.w)),maxY=Math.max(...objects.map(o=>o.y+o.h));return{x:minX,y:minY,w:maxX-minX,h:maxY-minY}}\nfunction srt(n:number){return Math.round(n*100)/100}\n\nexport function StudioProV2({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[]>([]),[history,setHistory]=useState<any[]>([]),[future,setFuture]=useState<any[]>([]);\n const [zoom,setZoom]=useState(52),[exportScale,setExportScale]=useState(2),[localStatus,setLocalStatus]=useState(\"Studio listo\"),[componentName,setComponentName]=useState(\"\");\n const p=PRESETS[s.preset]||PRESETS.story,selectedObjects=(s.objects as Obj[]).filter(o=>selected.includes(o.id)),primaryObj=selectedObjects[selectedObjects.length-1];\n const selectionBounds=bounds(selectedObjects);\n\n function set(next:any){setValue(normalize(next))}\n function snapshot(){setHistory(h=>[...h.slice(-59),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,60));setHistory(h=>h.slice(0,-1));set(prev);setSelected([])}\n function redo(){if(!future.length)return;const next=future[0];setHistory(h=>[...h,clone(s)].slice(-60));setFuture(f=>f.slice(1));set(next);setSelected([])}\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(ctx:CanvasRenderingContext2D,text:string,w:number,size:number,letter=0){const words=text.split(/\\s+/),lines:string[]=[];let line=\"\";const measure=(z:string)=>ctx.measureText(z).width+Math.max(0,z.length-1)*letter;for(const word of words){const t=line?line+\" \"+word:word;if(measure(t)>w&&line){lines.push(line);line=word}else line=t}if(line)lines.push(line);return lines.slice(0,12)}\n function drawSpaced(ctx:CanvasRenderingContext2D,text:string,x:number,y:number,spacing:number,align:string,width:number){\n  if(!spacing){ctx.fillText(text,x,y);return}const chars=[...text],widths=chars.map(c=>ctx.measureText(c).width),total=widths.reduce((a,b)=>a+b,0)+spacing*Math.max(0,chars.length-1);\n  let px=align===\"center\"?width/2-total/2:align===\"right\"?width-total:0;for(let i=0;i<chars.length;i++){ctx.fillText(chars[i],px,y);px+=widths[i]+spacing}\n }\n function drawImageFit(ctx:CanvasRenderingContext2D,im:HTMLImageElement,o:Obj){\n  if(o.fit===\"stretch\"){ctx.drawImage(im,0,0,o.w,o.h);return}\n  const zoom=Math.max(.2,o.cropZoom||1),scale=(o.fit===\"contain\"?Math.min(o.w/im.width,o.h/im.height):Math.max(o.w/im.width,o.h/im.height))*zoom;\n  const dw=im.width*scale,dh=im.height*scale,dx=(o.w-dw)/2+(o.cropX||0),dy=(o.h-dh)/2+(o.cropY||0);\n  ctx.save();ctx.beginPath();ctx.rect(0,0,o.w,o.h);ctx.clip();ctx.drawImage(im,dx,dy,dw,dh);ctx.restore()\n }\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.backgroundGradient?gradient(x,p.w,p.h,s.background,s.background2,s.backgroundAngle):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   x.shadowColor=o.shadowColor||\"#000000\";x.shadowBlur=o.shadowBlur||0;x.shadowOffsetX=o.shadowX||0;x.shadowOffsetY=o.shadowY||0;\n   if(o.type===\"image\"&&o.fileId){try{const im=await loadImg(o.fileId);x.filter=`brightness(${o.brightness||100}%) contrast(${o.contrast||100}%) saturate(${o.saturation||100}%) blur(${o.blur||0}px) grayscale(${o.grayscale||0}%) sepia(${o.sepia||0}%)`;drawImageFit(x,im,o);x.filter=\"none\"}catch{}}\n   else if(o.type===\"rect\"){x.fillStyle=o.gradient?gradient(x,o.w,o.h,o.fill,o.fill2||o.fill,o.gradientAngle||0):o.fill;roundRect(x,o.w,o.h,o.radius||0);x.fill()}\n   else if(o.type===\"circle\"){x.fillStyle=o.gradient?gradient(x,o.w,o.h,o.fill,o.fill2||o.fill,o.gradientAngle||0):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.gradient?gradient(x,o.w,o.h,o.fill,o.fill2||o.fill,o.gradientAngle||0):o.fill;x.font=`${o.fontStyle||\"normal\"} ${o.fontWeight||700} ${o.size||48}px ${o.fontFamily||s.brand.headingFont}, sans-serif`;x.textBaseline=\"top\";x.textAlign=\"left\";const lh=(o.size||48)*(o.lineHeight||1.18);wrap(x,o.text||\"Texto\",o.w,o.size||48,o.letterSpacing||0).forEach((ln,i)=>drawSpaced(x,ln,0,i*lh,o.letterSpacing||0,o.align||\"left\",o.w))}\n   x.restore();\n  }\n  if(editing){\n   if(s.grid){x.strokeStyle=\"rgba(150,170,220,.14)\";x.lineWidth=1;for(let a=100;a<p.w;a+=100){x.beginPath();x.moveTo(a,0);x.lineTo(a,p.h);x.stroke()}for(let a=100;a<p.h;a+=100){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   for(const o of selectedObjects){if(o.hidden)continue;x.save();x.strokeStyle=o.id===primaryObj?.id?\"#dfe6ff\":\"#7c8cff\";x.lineWidth=o.id===primaryObj?.id?3:2;x.setLineDash([8,6]);x.strokeRect(o.x,o.y,o.w,o.h);x.setLineDash([]);x.restore()}\n   if(selectionBounds&&selectedObjects.length>1){x.save();x.strokeStyle=\"#4ee2c1\";x.lineWidth=2;x.setLineDash([12,7]);x.strokeRect(selectionBounds.x-8,selectionBounds.y-8,selectionBounds.w+16,selectionBounds.h+16);x.restore()}\n   if(primaryObj&&!primaryObj.hidden&&selectedObjects.length===1){x.fillStyle=\"#dfe6ff\";x.fillRect(primaryObj.x+primaryObj.w-12,primaryObj.y+primaryObj.h-12,24,24)}\n  }\n }\n useEffect(()=>{if(canvas.current)render(canvas.current,true,1)},[value,selected]);\n\n function add(type:Obj[\"type\"]){const o=objectDefaults({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,fill2:s.brand.accent,size:56,opacity:1,fontFamily:s.brand.headingFont,fontWeight:700,align:\"left\",radius:type===\"rect\"?24:0});commit({...s,objects:[...s.objects,o]});setSelected([o.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=objectDefaults({id:uid(),type:\"image\",x:100,y:300,w:Math.min(620,p.w*.65),h:420,fill:\"#fff\",opacity:1,fileId:d.id,name:file.name});commit({...s,objects:[...s.objects,o]});setSelected([o.id]);setLocalStatus(\"Imagen añadida\")}\n function patchIds(ids:string[],patch:any){set({...s,objects:s.objects.map((o:Obj)=>ids.includes(o.id)?{...o,...patch}:o)})}\n function patch(id:string,p:any){patchIds([id],p)}\n function delSelected(){if(!selected.length)return;commit({...s,objects:s.objects.filter((o:Obj)=>!selected.includes(o.id))});setSelected([])}\n function duplicateSelected(){if(!selected.length)return;const idMap=new Map<string,string>(),groupMap=new Map<string,string>();selected.forEach(id=>idMap.set(id,uid()));const copies=s.objects.filter((o:Obj)=>selected.includes(o.id)).map((o:Obj)=>{if(o.groupId&&!groupMap.has(o.groupId))groupMap.set(o.groupId,uid());return{...clone(o),id:idMap.get(o.id)!,x:o.x+28,y:o.y+28,groupId:o.groupId?groupMap.get(o.groupId):undefined}});commit({...s,objects:[...s.objects,...copies]});setSelected(copies.map(o=>o.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 toggleSelect(id:string,multi=false){if(!multi){setSelected([id]);return}setSelected(v=>v.includes(id)?v.filter(x=>x!==id):[...v,id])}\n function groupSelected(){if(selected.length<2)return;const gid=uid();snapshot();patchIds(selected,{groupId:gid});setLocalStatus(\"Grupo creado\")}\n function ungroupSelected(){if(!selected.length)return;snapshot();patchIds(selected,{groupId:undefined});setLocalStatus(\"Grupo liberado\")}\n function selectGroup(id:string){const o=s.objects.find((x:Obj)=>x.id===id);if(!o?.groupId){setSelected([id]);return}setSelected(s.objects.filter((x:Obj)=>x.groupId===o.groupId).map((x:Obj)=>x.id))}\n function align(kind:string){\n  if(!selectedObjects.length)return;snapshot();\n  if(selectedObjects.length===1){const o=selectedObjects[0],m=Math.min(p.w,p.h)*.06,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;patchIds([o.id],next);return}\n  const b=bounds(selectedObjects)!;set({...s,objects:s.objects.map((o:Obj)=>{if(!selected.includes(o.id)||o.locked)return o;const n={...o};if(kind===\"left\")n.x=b.x;if(kind===\"center\")n.x=b.x+b.w/2-o.w/2;if(kind===\"right\")n.x=b.x+b.w-o.w;if(kind===\"top\")n.y=b.y;if(kind===\"middle\")n.y=b.y+b.h/2-o.h/2;if(kind===\"bottom\")n.y=b.y+b.h-o.h;return n})})\n }\n function distribute(axis:\"x\"|\"y\"){if(selectedObjects.length<3)return;snapshot();const sorted=[...selectedObjects].sort((a,b)=>axis===\"x\"?a.x-b.x:a.y-b.y);const first=sorted[0],last=sorted[sorted.length-1],space=axis===\"x\"?((last.x+last.w)-(first.x))/(sorted.length-1):((last.y+last.h)-(first.y))/(sorted.length-1);const pos=new Map<string,number>();sorted.forEach((o,i)=>pos.set(o.id,(axis===\"x\"?first.x:first.y)+space*i-(i===0?0:axis===\"x\"?o.w/2:o.h/2)));set({...s,objects:s.objects.map((o:Obj)=>pos.has(o.id)?{...o,[axis]:pos.get(o.id)!}:o)})}\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){if(!e.shiftKey)setSelected([]);return}\n  let ids:string[];if(e.shiftKey){toggleSelect(hit.id,true);ids=selected.includes(hit.id)?selected.filter(x=>x!==hit.id):[...selected,hit.id]}else if(hit.groupId){ids=s.objects.filter((x:Obj)=>x.groupId===hit.groupId).map((x:Obj)=>x.id);setSelected(ids)}else{ids=[hit.id];setSelected(ids)}\n  if(hit.locked)return;snapshot();const resize=ids.length===1&&Math.abs(q.x-(hit.x+hit.w))<32&&Math.abs(q.y-(hit.y+hit.h))<32;const origins=new Map<string,{x:number,y:number,w:number,h:number}>();s.objects.filter((o:Obj)=>ids.includes(o.id)).forEach((o:Obj)=>origins.set(o.id,{x:o.x,y:o.y,w:o.w,h:o.h}));drag.current={ids,anchor:hit.id,mode:resize?\"resize\":\"move\",sx:q.x,sy:q.y,origins};canvas.current!.setPointerCapture(e.pointerId)}\n function move(e:any){if(!drag.current)return;const q=point(e),d=drag.current,anchor=s.objects.find((x:Obj)=>x.id===d.anchor);if(!anchor)return;const origin=d.origins.get(anchor.id);if(d.mode===\"resize\"){const nw=Math.max(40,origin.w+q.x-d.sx),nh=Math.max(40,origin.h+q.y-d.sy);patch(anchor.id,{w:Math.min(p.w-anchor.x,nw),h:Math.min(p.h-anchor.y,nh)});return}\n  let dx=q.x-d.sx,dy=q.y-d.sy;if(d.ids.length===1&&s.snap){let nx=Math.max(0,Math.min(p.w-anchor.w,origin.x+dx)),ny=Math.max(0,Math.min(p.h-anchor.h,origin.y+dy)),m=Math.min(p.w,p.h)*.06;[0,m,(p.w-anchor.w)/2,p.w-m-anchor.w,p.w-anchor.w].forEach(t=>{if(Math.abs(nx-t)<18)nx=t});[0,m,(p.h-anchor.h)/2,p.h-m-anchor.h,p.h-anchor.h].forEach(t=>{if(Math.abs(ny-t)<18)ny=t});dx=nx-origin.x;dy=ny-origin.y}\n  set({...s,objects:s.objects.map((o:Obj)=>{const a=d.origins.get(o.id);if(!a||o.locked)return o;return{...o,x:Math.max(0,Math.min(p.w-o.w,a.x+dx)),y:Math.max(0,Math.min(p.h-o.h,a.y+dy))}})})\n }\n function up(){drag.current=null}\n function smartResize(nextPreset:string){if(nextPreset===s.preset)return;const np=PRESETS[nextPreset],sx=np.w/p.w,sy=np.h/p.h,fontScale=Math.sqrt(sx*sy);commit({...s,preset:nextPreset,objects:s.objects.map((o:Obj)=>({...o,x:o.x*sx,y:o.y*sy,w:o.w*sx,h:o.h*sy,size:o.size?Math.max(10,o.size*fontScale):o.size,shadowX:(o.shadowX||0)*sx,shadowY:(o.shadowY||0)*sy,shadowBlur:(o.shadowBlur||0)*fontScale}))});setLocalStatus(\"Smart Resize aplicado\")}\n function saveComponent(){if(!selected.length)return;const name=componentName.trim()||\"Componente \"+(s.components.length+1),b=bounds(selectedObjects)!;const objs=selectedObjects.map((o:Obj)=>({...clone(o),id:uid(),x:o.x-b.x,y:o.y-b.y,groupId:undefined}));commit({...s,components:[...s.components,{id:uid(),name,objects:objs}]});setComponentName(\"\");setLocalStatus(\"Componente guardado\")}\n function insertComponent(c:ComponentDef){const gid=uid(),ids:string[]=[];const objs=c.objects.map(o=>{const n={...clone(o),id:uid(),x:o.x+80,y:o.y+120,groupId:gid};ids.push(n.id);return n});commit({...s,objects:[...s.objects,...objs]});setSelected(ids)}\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=[objectDefaults({id:u(),type:\"rect\",x:m,y:m,w:p.w-2*m,h:p.h*.16,fill:b.primary,opacity:1,radius:32}),objectDefaults({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\"}),objectDefaults({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=[objectDefaults({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}),objectDefaults({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}),objectDefaults({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}),objectDefaults({id:u(),type:\"rect\",x:m,y:p.h*.72,w:p.w*.38,h:96,fill:b.primary,opacity:1,radius:48}),objectDefaults({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=[objectDefaults({id:u(),type:\"rect\",x:0,y:0,w:p.w*.32,h:p.h,fill:b.secondary,opacity:1}),objectDefaults({id:u(),type:\"text\",x:p.w*.4,y:p.h*.16,w:p.w*.5,h:260,text:\"EDITORIAL DESIGN\",fill:b.primary,size:p.w*.07,opacity:1,fontFamily:b.headingFont,fontWeight:900}),objectDefaults({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}),objectDefaults({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([])}\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>22)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(texts.length>1&&new Set(texts.map((o:Obj)=>o.size)).size===1)issues.push(\"Jerarquía tipográfica plana\");if(texts.some((o:Obj)=>contrastScore(o.fill||\"#ffffff\",s.background)<3))issues.push(\"Contraste de texto bajo\");if(!vis.some((o:Obj)=>o.type===\"rect\"&&o.radius))issues.push(\"Considera CTA/contenedor\");return{score:Math.max(35,100-issues.length*10),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\"),ext=type===\"jpeg\"?\"jpg\":type;a.download=(s.title||\"oso-design\")+\"-\"+exportScale+\"x.\"+ext;a.href=temp.toDataURL(\"image/\"+type,.95);a.click()}\n async function exportPDF(){setLocalStatus(\"Generando PDF…\");const temp=document.createElement(\"canvas\");await render(temp,false,1);const {PDFDocument}=await loadPDFLib();const pdf=await PDFDocument.create();const page=pdf.addPage([p.w,p.h]);const img=await pdf.embedPng(temp.toDataURL(\"image/png\"));page.drawImage(img,{x:0,y:0,width:p.w,height:p.h});const bytes=await pdf.save();const url=URL.createObjectURL(new Blob([bytes],{type:\"application/pdf\"}));const a=document.createElement(\"a\");a.href=url;a.download=(s.title||\"oso-design\")+\".pdf\";a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);setLocalStatus(\"PDF listo\")}\n useEffect(()=>{const onKey=(e:KeyboardEvent)=>{const tag=(e.target as HTMLElement)?.tagName;if(tag===\"INPUT\"||tag===\"TEXTAREA\"||tag===\"SELECT\")return;if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()===\"z\"){e.preventDefault();e.shiftKey?redo():undo()}else if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()===\"y\"){e.preventDefault();redo()}else if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()===\"d\"){e.preventDefault();duplicateSelected()}else if(e.key===\"Delete\"||e.key===\"Backspace\"){delSelected()}else if([\"ArrowLeft\",\"ArrowRight\",\"ArrowUp\",\"ArrowDown\"].includes(e.key)&&selected.length){e.preventDefault();const step=e.shiftKey?10:1;snapshot();set({...s,objects:s.objects.map((o:Obj)=>selected.includes(o.id)&&!o.locked?{...o,x:Math.max(0,Math.min(p.w-o.w,o.x+(e.key===\"ArrowLeft\"?-step:e.key===\"ArrowRight\"?step:0))),y:Math.max(0,Math.min(p.h-o.h,o.y+(e.key===\"ArrowUp\"?-step:e.key===\"ArrowDown\"?step:0)))}:o)})}};window.addEventListener(\"keydown\",onKey);return()=>window.removeEventListener(\"keydown\",onKey)},[value,selected,history,future]);\n function focusSnap(){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 2</b><small className=\"block text-slate-500\">Multi-select · filtros · componentes · smart resize</small></div>\n   <button className={btn} disabled={!history.length} onClick={undo}>↶</button><button className={btn} disabled={!future.length} onClick={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><button className={primary} onClick={save}>Guardar nube</button>\n  </div>\n  <StudioAGI state={s} page={p} selected={selected} setSelected={setSelected} commit={commit} setStatus={setLocalStatus} smartResize={smartResize}/>\n  <div className=\"grid xl:grid-cols-[250px_1fr_300px] 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=>smartResize(e.target.value)}>{Object.entries(PRESETS).map(([k,v]:any)=><option value={k}>{v.name} · {v.w}×{v.h}</option>)}</select>\n    <div className=\"border border-slate-800 rounded-xl p-3 space-y-2\"><label className=\"text-xs text-slate-500\">Fondo<input className=\"block w-full h-9\" type=\"color\" value={s.background} onChange={e=>set({...s,background:e.target.value})}/></label><label className=\"flex gap-2 text-xs\"><input type=\"checkbox\" checked={s.backgroundGradient} onChange={e=>set({...s,backgroundGradient:e.target.checked})}/> Gradient</label>{s.backgroundGradient&&<><input className=\"w-full h-9\" type=\"color\" value={s.background2} onChange={e=>set({...s,background2:e.target.value})}/><input className={input} type=\"number\" min=\"0\" max=\"360\" value={s.backgroundAngle} onChange={e=>set({...s,backgroundAngle:+e.target.value})}/></>}</div>\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><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-9\" type=\"color\" value={s.brand[k]} onChange={e=>set({...s,brand:{...s.brand,[k]:e.target.value}})}/>)}</div>\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    <b>Componentes</b><div className=\"flex gap-2\"><input className={input} value={componentName} onChange={e=>setComponentName(e.target.value)} placeholder=\"Nombre\"/><button className={btn} disabled={!selected.length} onClick={saveComponent}>Guardar</button></div><div className=\"grid gap-1\">{s.components.map((c:ComponentDef)=><button className={btn+\" text-left\"} onClick={()=>insertComponent(c)}>⊞ {c.name}</button>)}</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>{selected.length>1&&<span className=\"text-xs text-emerald-300\">{selected.length} seleccionados</span>}</div>\n    <div className=\"min-h-[540px] 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><button className={btn} onClick={exportPDF}>PDF</button></div>\n   </section>\n   <aside className={shell+\" p-3\"}>\n    <div className=\"flex justify-between items-center\"><b>Capas</b>{selected.length>1&&<small className=\"text-emerald-300\">{selected.length}</small>}</div>\n    {selected.length>1&&<div className=\"grid grid-cols-2 gap-2 mt-2\"><button className={btn} onClick={groupSelected}>Agrupar</button><button className={btn} onClick={ungroupSelected}>Desagrupar</button><button className={btn} onClick={()=>align(\"left\")}>Alinear izq.</button><button className={btn} onClick={()=>align(\"top\")}>Alinear arriba</button><button className={btn} onClick={()=>distribute(\"x\")}>Distribuir H</button><button className={btn} onClick={()=>distribute(\"y\")}>Distribuir V</button></div>}\n    <div className=\"space-y-1 mt-2 max-h-64 overflow-auto\">{[...s.objects].reverse().map((o:Obj)=><div className={(selected.includes(o.id)?\"border-indigo-400 \":\"\")+\"border border-slate-800 rounded-xl p-2 grid grid-cols-[1fr_auto_auto] gap-1 items-center\"} onClick={e=>toggleSelect(o.id,e.shiftKey)} onDoubleClick={()=>selectGroup(o.id)}><button className=\"text-left truncate\"><b>{o.name||o.text||o.type}</b><small className=\"block text-slate-500\">{o.type}{o.groupId?\" · grupo\":\"\"}{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    {primaryObj&&selected.length===1&&<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\">{primaryObj.type}</span></div>\n     {primaryObj.type===\"text\"&&<><textarea className={input} value={primaryObj.text||\"\"} onFocus={focusSnap} onChange={e=>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}",[],[156,157,255],"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}",[],[156,157,264],"f784d1ca-6712-4a97-81e5-ef3297062747","StudioAGI.tsx","f4254aaa-b02a-11f1-9ac3-1607ee4eb77e",76,["D",1789387407399],11,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React,{useState} from \"https://esm.sh/react@18.2.0\";\nimport { loadBackgroundRemoval, loadSmartCrop } from \"../studio/packages.ts\";\n\nconst device=localStorage.getItem(\"aion-evo-device\")||\"\";\nconst panel=\"border border-slate-800 bg-slate-950/80 rounded-2xl p-3\";\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\nexport function StudioAGI(props:any){\n const {state:s,page:p,selected,setSelected,commit,setStatus,smartResize}=props;\n const [prompt,setPrompt]=useState(\"\"),[busy,setBusy]=useState(false);\n const objects=s.objects||[], sel=objects.filter((o:any)=>selected.includes(o.id)), primaryObj=sel[sel.length-1];\n\n function commitObjects(next:any[],msg:string){commit({...s,objects:next});setStatus(msg)}\n function selectSemantic(kind:string){\n  let ids:string[]=[];\n  if(kind===\"text\")ids=objects.filter((o:any)=>o.type===\"text\"&&!o.hidden).map((o:any)=>o.id);\n  if(kind===\"image\")ids=objects.filter((o:any)=>o.type===\"image\"&&!o.hidden).map((o:any)=>o.id);\n  if(kind===\"headline\"){const texts=objects.filter((o:any)=>o.type===\"text\"&&!o.hidden);const max=Math.max(0,...texts.map((o:any)=>o.size||0));ids=texts.filter((o:any)=>(o.size||0)>=max*.85).map((o:any)=>o.id)}\n  if(kind===\"background\"){const area=p.w*p.h;ids=objects.filter((o:any)=>!o.hidden&&(o.w*o.h)>area*.45).map((o:any)=>o.id)}\n  if(kind===\"logo\")ids=objects.filter((o:any)=>!o.hidden&&((o.name||\"\").toLowerCase().includes(\"logo\")||(o.type===\"image\"&&o.w*o.h<p.w*p.h*.08&&o.y<p.h*.35))).map((o:any)=>o.id);\n  if(kind===\"cta\")ids=objects.filter((o:any)=>o.type===\"text\"&&/(ver|compra|cotiza|agenda|contáct|contact|más|info|califica|reserva|shop|buy|learn)/i.test(o.text||\"\")).map((o:any)=>o.id);\n  setSelected(ids);setStatus(ids.length?ids.length+\" capa(s) seleccionada(s)\":\"No encontré capas de ese tipo\");\n }\n function textAction(action:string){\n  const ids=selected.length?selected:objects.filter((o:any)=>o.type===\"text\").map((o:any)=>o.id);\n  const next=objects.map((o:any)=>{\n   if(!ids.includes(o.id)||o.type!==\"text\")return o;let text=(o.text||\"\").trim();\n   if(action===\"shorten\"){const words=text.split(/\\s+/);text=words.length>10?words.slice(0,10).join(\" \")+\"…\":text}\n   if(action===\"headline\")text=text.replace(/[.!?]+$/,\"\").toUpperCase();\n   if(action===\"cta\"){text=text.split(/\\s+/).slice(0,4).join(\" \").toUpperCase();return{...o,text,fontWeight:900,size:Math.max(o.size||40,42),letterSpacing:.5}}\n   if(action===\"titlecase\")text=text.toLowerCase().replace(/(^|\\s)\\S/g,(m:string)=>m.toUpperCase());\n   return{...o,text};\n  });commitObjects(next,\"Texto actualizado por OSO\");\n }\n function brandConform(){\n  const texts=objects.filter((o:any)=>o.type===\"text\"),max=Math.max(1,...texts.map((o:any)=>o.size||1));\n  const next=objects.map((o:any)=>{\n   if(o.type===\"text\"){const headline=(o.size||0)>=max*.78;return{...o,fontFamily:headline?s.brand.headingFont:s.brand.bodyFont,fill:headline?s.brand.primary:\"#ffffff\",fontWeight:headline?900:500}}\n   if(o.type===\"rect\"||o.type===\"circle\")return{...o,fill:o.y>p.h*.62?s.brand.primary:s.brand.accent,fill2:s.brand.primary};\n   return o;\n  });commit({...s,background:s.brand.secondary,objects:next});setStatus(\"Brand Conform aplicado\");\n }\n function reflow(style:string){\n  const margin=Math.min(p.w,p.h)*.07,texts=objects.filter((o:any)=>o.type===\"text\"&&!o.hidden),images=objects.filter((o:any)=>o.type===\"image\"&&!o.hidden);\n  const max=Math.max(1,...texts.map((o:any)=>o.size||1));let ty=margin*1.4;\n  const next=objects.map((o:any)=>{\n   if(o.locked)return o;\n   if(o.type===\"text\"){\n    const isHead=(o.size||0)>=max*.8;\n    if(style===\"center\"){const n={...o,x:margin,w:p.w-margin*2,align:\"center\",y:ty};ty+=Math.max(o.h,(o.size||48)*2);return n}\n    const width=style===\"premium\"?p.w*.48:p.w-margin*2;const n={...o,x:margin,w:width,align:\"left\",y:ty};ty+=Math.max((o.size||48)*1.7,isHead?150:100);return n;\n   }\n   if(o.type===\"image\"&&images[0]?.id===o.id){\n    if(style===\"premium\")return{...o,x:p.w*.55,y:margin,w:p.w*.38,h:p.h-margin*2,fit:\"cover\",cropZoom:1};\n    return{...o,x:margin,y:p.h*.48,w:p.w-margin*2,h:p.h*.42,fit:\"cover\",cropZoom:1};\n   }\n   return o;\n  });commitObjects(next,style===\"premium\"?\"Reflow Premium aplicado\":\"Reflow aplicado\");\n }\n function premiumize(){\n  const texts=objects.filter((o:any)=>o.type===\"text\"),max=Math.max(1,...texts.map((o:any)=>o.size||1)),margin=Math.min(p.w,p.h)*.07;let ty=p.h*.13;\n  const next=objects.map((o:any)=>{\n   if(o.locked)return o;\n   if(o.type===\"text\"){const head=(o.size||0)>=max*.78,n={...o,fontFamily:head?s.brand.headingFont:s.brand.bodyFont,fill:head?\"#ffffff\":s.brand.accent,fontWeight:head?900:500,x:margin,w:p.w*.44,y:ty,align:\"left\"};ty+=head?Math.max(170,(o.size||50)*2):Math.max(105,(o.size||40)*1.65);return n}\n   if(o.type===\"image\")return{...o,x:p.w*.55,y:p.h*.08,w:p.w*.39,h:p.h*.84,fit:\"cover\",cropZoom:1,brightness:103,contrast:108,saturation:96};\n   if(o.type===\"rect\"||o.type===\"circle\")return{...o,fill:s.brand.primary,fill2:s.brand.accent};\n   return o;\n  });commit({...s,background:s.brand.secondary,objects:next});setStatus(\"OSO Premium aplicado\");\n }\n function intentCrop(mode:string){\n  if(!primaryObj||primaryObj.type!==\"image\"){setStatus(\"Selecciona una imagen\");return}\n  const patch:any={fit:\"cover\",cropX:0,cropY:0};\n  if(mode===\"portrait\")Object.assign(patch,{cropZoom:1.18,cropY:-20});\n  if(mode===\"product\")Object.assign(patch,{fit:\"contain\",cropZoom:.92});\n  if(mode===\"story\")Object.assign(patch,{cropZoom:1.24,cropY:-10});\n  if(mode===\"thumb\")Object.assign(patch,{cropZoom:1.12,cropX:10});\n  const next=objects.map((o:any)=>o.id===primaryObj.id?{...o,...patch}:o);commitObjects(next,\"Intent Crop · \"+mode);\n }\n async function smartCropVision(){if(!primaryObj||primaryObj.type!==\"image\"||!primaryObj.fileId){setStatus(\"Selecciona una imagen\");return}setBusy(true);setStatus(\"Analizando encuadre…\");try{const res=await fetch(\"/api/assets/\"+primaryObj.fileId+\"?device=\"+device),blob=await res.blob(),url=URL.createObjectURL(blob),im=new Image();await new Promise((ok,bad)=>{im.onload=ok;im.onerror=bad;im.src=url});const mod:any=await loadSmartCrop(),cropper=mod.default||mod,result=await cropper.crop(im,{width:Math.round(primaryObj.w),height:Math.round(primaryObj.h)}),c=result.topCrop,base=Math.max(primaryObj.w/im.width,primaryObj.h/im.height),zoom=Math.max(.5,Math.min(3,primaryObj.w/(c.width*base))),scale=base*zoom,baseDx=(primaryObj.w-im.width*scale)/2,baseDy=(primaryObj.h-im.height*scale)/2,cropX=primaryObj.w/2-(c.x+c.width/2)*scale-baseDx,cropY=primaryObj.h/2-(c.y+c.height/2)*scale-baseDy;URL.revokeObjectURL(url);commitObjects(objects.map((o:any)=>o.id===primaryObj.id?{...o,fit:\"cover\",cropZoom:zoom,cropX,cropY}:o),\"SmartCrop aplicado\")}catch{setStatus(\"SmartCrop no pudo analizar esta imagen\")}finally{setBusy(false)}}\n function enhance(preset:string){\n  const ids=selected.length?selected:objects.filter((o:any)=>o.type===\"image\").map((o:any)=>o.id);\n  const presets:any={auto:{brightness:104,contrast:108,saturation:108,grayscale:0,sepia:0,blur:0},product:{brightness:108,contrast:112,saturation:102,grayscale:0,sepia:0,blur:0},portrait:{brightness:105,contrast:102,saturation:104,grayscale:0,sepia:0,blur:0},editorial:{brightness:100,contrast:115,saturation:82,grayscale:0,sepia:4,blur:0}};\n  const next=objects.map((o:any)=>ids.includes(o.id)&&o.type===\"image\"?{...o,...presets[preset]}:o);commitObjects(next,\"Visual Enhance · \"+preset);\n }\n function qaFix(){\n  const margin=Math.min(p.w,p.h)*.05,texts=objects.filter((o:any)=>o.type===\"text\"&&!o.hidden),max=Math.max(1,...texts.map((o:any)=>o.size||1));\n  const next=objects.map((o:any)=>{\n   let n={...o};n.x=Math.max(margin,Math.min(p.w-margin-n.w,n.x));n.y=Math.max(margin,Math.min(p.h-margin-n.h,n.y));\n   if(n.type===\"text\"){const head=(n.size||0)>=max*.8;n.fontWeight=head?900:Math.max(400,n.fontWeight||400);n.size=Math.min(n.size||48,p.w*.11);n.lineHeight=Math.max(1,Math.min(1.45,n.lineHeight||1.18))}\n   return n;\n  });commitObjects(next,\"Visual QA corrigió márgenes y jerarquía\");\n }\n function centerSelected(){if(!sel.length)return;const next=objects.map((o:any)=>selected.includes(o.id)?{...o,x:(p.w-o.w)/2}:o);commitObjects(next,\"Selección centrada\")}\n async function uploadImage(file:File){const fd=new FormData();fd.append(\"file\",file);const up=await fetch(\"/api/files?device=\"+device,{method:\"POST\",body:fd});if(!up.ok)throw new Error(\"upload\");return await up.json()}\n async function smartReplace(file:File){if(!primaryObj||primaryObj.type!==\"image\"){setStatus(\"Selecciona una imagen\");return}setBusy(true);setStatus(\"Reemplazando imagen…\");try{const data=await uploadImage(file);commitObjects(objects.map((o:any)=>o.id===primaryObj.id?{...o,fileId:data.id,name:file.name}:o),\"Smart Replace listo · marco y ajustes conservados\")}catch{setStatus(\"No pude reemplazar la imagen\")}finally{setBusy(false)}}\n async function replaceBackground(file:File){setBusy(true);setStatus(\"Añadiendo fondo…\");try{const data=await uploadImage(file);const bg={id:uid(),type:\"image\",x:0,y:0,w:p.w,h:p.h,fill:\"#fff\",opacity:1,rotation:0,fileId:data.id,name:file.name+\" · fondo\",fit:\"cover\",cropX:0,cropY:0,cropZoom:1,brightness:100,contrast:100,saturation:100,blur:0,grayscale:0,sepia:0,hidden:false,locked:false};commitObjects([bg,...objects],\"Fondo reemplazado como capa editable\");setSelected([bg.id])}catch{setStatus(\"No pude añadir el fondo\")}finally{setBusy(false)}}\n async function backgroundRemove(mode:\"replace\"|\"extract\"){\n  if(!primaryObj||primaryObj.type!==\"image\"||!primaryObj.fileId){setStatus(\"Selecciona una imagen\");return}\n  setBusy(true);setStatus(\"Cargando IA local de recorte…\");\n  try{\n   const src=await fetch(\"/api/assets/\"+primaryObj.fileId+\"?device=\"+device);if(!src.ok)throw new Error(\"asset\");const blob=await src.blob();\n   const mod:any=await loadBackgroundRemoval();\n   const removeBackground=mod.default||mod.removeBackground;const out:Blob=await removeBackground(blob,{model:\"small\",progress:(k:string,c:number,t:number)=>{if(t)setStatus(\"IA local \"+Math.round(c/t*100)+\"%\")}});\n   const fd=new FormData();fd.append(\"file\",new File([out],(primaryObj.name||\"subject\")+\".png\",{type:\"image/png\"}));\n   const up=await fetch(\"/api/files?device=\"+device,{method:\"POST\",body:fd});if(!up.ok)throw new Error(\"upload\");const data=await up.json();\n   if(mode===\"replace\"){commitObjects(objects.map((o:any)=>o.id===primaryObj.id?{...o,fileId:data.id,name:(o.name||\"imagen\")+\" · sin fondo\",fit:\"contain\"}:o),\"Fondo eliminado con IA local\")}\n   else {const copy={...clone(primaryObj),id:uid(),fileId:data.id,name:(primaryObj.name||\"imagen\")+\" · sujeto\",x:Math.min(p.w-primaryObj.w,primaryObj.x+30),y:Math.min(p.h-primaryObj.h,primaryObj.y+30),fit:\"contain\"};commitObjects([...objects,copy],\"Sujeto extraído como nueva capa\");setSelected([copy.id])}\n  }catch(e){setStatus(\"La IA local no pudo procesar esta imagen en este dispositivo\")}\n  finally{setBusy(false)}\n }\n async function callAI(kind:\"route\"|\"rewrite\",promptText:string,text=\"\"){const r=await fetch(\"/api/studio-ai?device=\"+device,{method:\"POST\",headers:{\"content-type\":\"application/json\"},body:JSON.stringify({kind,prompt:promptText,text})});if(!r.ok)throw new Error(\"ai\");return await r.json()}\n async function aiRewrite(instruction:string){const target=primaryObj?.type===\"text\"?primaryObj:objects.filter((o:any)=>o.type===\"text\"&&!o.hidden).sort((a:any,b:any)=>(b.size||0)-(a.size||0))[0];if(!target){setStatus(\"Selecciona una capa de texto\");return}setBusy(true);setStatus(\"OSO Intelligence procesando…\");try{const data=await callAI(\"rewrite\",instruction,target.text||\"\");if(!data.text)throw new Error(\"empty\");commitObjects(objects.map((o:any)=>o.id===target.id?{...o,text:String(data.text).slice(0,1200)}:o),\"Text Intelligence aplicado\")}catch{if(/cta/i.test(instruction))textAction(\"cta\");else if(/titular/i.test(instruction))textAction(\"headline\");else if(/reduce/i.test(instruction))textAction(\"shorten\");else{textAction(\"shorten\");setStatus(\"Text Intelligence local aplicado\")}}finally{setBusy(false)}}\n async function dispatchToken(token:string){const t=token.trim().toLowerCase().replace(/[^a-z_]/g,\"\");if(t===\"premium\")return premiumize();if(t===\"minimal\")return reflow(\"balanced\");if(t===\"brand\")return brandConform();if(t===\"story\")return smartResize(\"story\");if(t===\"square\")return smartResize(\"square\");if(t===\"landscape\")return smartResize(\"landscape\");if(t===\"banner\")return smartResize(\"banner\");if(t===\"enhance\")return enhance(\"auto\");if(t===\"product_crop\")return intentCrop(\"product\");if(t===\"portrait_crop\")return intentCrop(\"portrait\");if(t===\"shorten_text\")return aiRewrite(\"Reduce el texto manteniendo el mensaje principal y haciéndolo más claro\");if(t===\"cta\")return aiRewrite(\"Convierte el texto en un CTA breve, directo y persuasivo\");if(t===\"headline\")return aiRewrite(\"Convierte el texto en un titular corto, fuerte y elegante\");if(t===\"qa_fix\")return qaFix();if(t===\"center\")return sel.length?centerSelected():reflow(\"center\");if(t===\"remove_background\")return backgroundRemove(\"replace\");if(t===\"extract_subject\")return backgroundRemove(\"extract\");setStatus(\"OSO AI no encontró una acción segura\")}\n async function execute(){\n  const q=prompt.trim().toLowerCase();if(!q)return;\n  if(/quitar fondo|remove background|sin fondo/.test(q))return backgroundRemove(\"replace\");\n  if(/extrae.*sujeto|separa.*sujeto|extract subject/.test(q))return backgroundRemove(\"extract\");\n  if(/premium|elegante|lujo/.test(q))return premiumize();\n  if(/minimal|limpio|más aire/.test(q))return reflow(\"balanced\");\n  if(/centrad/.test(q))return sel.length?centerSelected():reflow(\"center\");\n  if(/marca|brand/.test(q))return brandConform();\n  if(/story|historia|9:16/.test(q))return smartResize(\"story\");\n  if(/feed|post|cuadrad|1:1/.test(q))return smartResize(\"square\");\n  if(/banner/.test(q))return smartResize(\"banner\");\n  if(/horizontal|16:9|landscape/.test(q))return smartResize(\"landscape\");\n  if(/producto/.test(q))return primaryObj?.type===\"image\"?intentCrop(\"product\"):enhance(\"product\");\n  if(/retrato|portrait/.test(q))return primaryObj?.type===\"image\"?intentCrop(\"portrait\"):enhance(\"portrait\");\n  if(/mejora.*foto|enhance|mejorar imagen/.test(q))return enhance(\"auto\");\n  if(/reduce.*texto|texto.*corto|resum/.test(q))return textAction(\"shorten\");\n  if(/cta|llamad.*acción/.test(q))return textAction(\"cta\");\n  if(/titular|headline/.test(q))return textAction(\"headline\");\n  if(/corrige|audita|qa|márgen|margen/.test(q))return qaFix();\n  setBusy(true);setStatus(\"OSO AI entendiendo la orden…\");try{const data=await callAI(\"route\",prompt);await dispatchToken(String(data.text||\"\"))}catch{setStatus(\"No pude consultar OSO AI; usa una acción directa\")}finally{setBusy(false)}\n }\n\n return <section className={panel+\" space-y-3\"}>\n  <div className=\"flex items-center justify-between\"><div><b>OSO Intelligence Tools</b><small className=\"block text-slate-500\">IA local + comandos sobre capas editables</small></div><span className=\"text-xs text-slate-500\">{busy?\"procesando…\":\"listo\"}</span></div>\n  <div className=\"flex gap-2\"><input className={input} value={prompt} onChange={e=>setPrompt(e.target.value)} onKeyDown={e=>e.key===\"Enter\"&&execute()} placeholder='Ej: \"hazlo premium\", \"quita fondo\", \"adapta a story\"'/><button className={primary} disabled={busy} onClick={execute}>Ejecutar</button></div>\n  <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-2\">\n   <button className={btn} onClick={()=>selectSemantic(\"headline\")}>Smart Headline</button><button className={btn} onClick={()=>selectSemantic(\"image\")}>Smart Images</button><button className={btn} onClick={()=>selectSemantic(\"logo\")}>Smart Logo</button><button className={btn} onClick={()=>selectSemantic(\"cta\")}>Smart CTA</button>\n  </div>\n  <div className=\"grid sm:grid-cols-3 gap-2\">\n   <button className={btn} onClick={()=>reflow(\"premium\")}>Layout Reflow</button><button className={btn} onClick={brandConform}>Brand Conform</button><button className={btn} onClick={qaFix}>QA Auto-Fix</button>\n  </div>\n  <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-2\">\n   <button className={btn} disabled={primaryObj?.type!==\"image\"||busy} onClick={()=>backgroundRemove(\"replace\")}>Quitar fondo IA</button><button className={btn} disabled={primaryObj?.type!==\"image\"||busy} onClick={()=>backgroundRemove(\"extract\")}>Extraer sujeto</button><button className={btn} onClick={()=>enhance(\"auto\")}>Enhance Auto</button><button className={btn} onClick={()=>enhance(\"product\")}>Enhance Product</button>\n  </div>\n  <div className=\"grid grid-cols-2 gap-2\">\n   <label className={btn+\" text-center cursor-pointer\"}>Smart Replace<input type=\"file\" accept=\"image/*\" hidden disabled={primaryObj?.type!==\"image\"||busy} onChange={e=>e.target.files?.[0]&&smartReplace(e.target.files[0])}/></label>\n   <label className={btn+\" text-center cursor-pointer\"}>Replace Background<input type=\"file\" accept=\"image/*\" hidden disabled={busy} onChange={e=>e.target.files?.[0]&&replaceBackground(e.target.files[0])}/></label>\n  </div>\n  <div className=\"grid grid-cols-2 sm:grid-cols-5 gap-2\">\n   <button className={btn} disabled={busy||primaryObj?.type!==\"image\"} onClick={smartCropVision}>SmartCrop</button><button className={btn} onClick={()=>intentCrop(\"portrait\")}>Crop Retrato</button><button className={btn} onClick={()=>intentCrop(\"product\")}>Crop Producto</button><button className={btn} onClick={()=>intentCrop(\"story\")}>Crop Story</button><button className={btn} onClick={()=>intentCrop(\"thumb\")}>Crop Thumbnail</button>\n  </div>\n  <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-2\">\n   <button className={btn} disabled={busy} onClick={()=>aiRewrite(\"Mejora este copy para que sea más claro, natural y visualmente breve\")}>IA Mejorar copy</button><button className={btn} disabled={busy} onClick={()=>aiRewrite(\"Reduce el texto manteniendo la idea principal y eliminando palabras innecesarias\")}>IA Reducir</button><button className={btn} disabled={busy} onClick={()=>aiRewrite(\"Convierte este texto en un titular corto, fuerte y elegante\")}>IA Titular</button><button className={btn} disabled={busy} onClick={()=>aiRewrite(\"Convierte este texto en un CTA breve, directo y persuasivo\")}>IA CTA</button>\n  </div>\n  <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-2\">\n   <button className={btn} onClick={()=>textAction(\"shorten\")}>Reducir local</button><button className={btn} onClick={()=>textAction(\"headline\")}>Titular local</button><button className={btn} onClick={()=>textAction(\"cta\")}>CTA local</button><button className={btn} onClick={()=>textAction(\"titlecase\")}>Title Case</button>\n  </div>\n  <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-2\">\n   <button className={btn} onClick={()=>smartResize(\"story\")}>Adaptar Story</button><button className={btn} onClick={()=>smartResize(\"square\")}>Adaptar Post</button><button className={btn} onClick={()=>smartResize(\"landscape\")}>Adaptar 16:9</button><button className={btn} onClick={()=>smartResize(\"banner\")}>Adaptar Banner</button>\n  </div>\n </section>\n}",[],[156,157,272],"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",[],[156,157,281],"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",[],[156,157,288],"7d2cc78d-a3ed-4e6f-9084-ffb85d52c2b0","App.tsx","01a09047-131b-7256-b1f6-cc84e0eb1e97",30,["D",1789212289736],14,"/** @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 { StudioProV2 } from \"./StudioProV2.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\"?<StudioProV2 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",[],[156,157,296],"772681df-69f1-4352-a2a1-d348274c9b0d",["D",1789126972111],[171,172,173,174,175,176,177],[156,157],"525a0dce-36b1-4935-8970-35f3e14015e4",["D",1789126972111],[170,178,180,181,182],[156],["D",1789126972111],["D",1789477238750],{"_11":12,"_126":71},{"_11":12,"_121":122,"_70":71,"_30":69,"_123":124,"_125":24},{"_38":112,"_13":16,"_32":35,"_113":73,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":14,"_120":12},"ctx",{"_53":-5,"_145":350,"_351":352,"_353":354,"_355":24,"_356":24,"_357":24,"_358":86,"_359":-5,"_360":-7,"_361":-7,"_362":26,"_363":24,"_364":24,"_365":-5,"_366":24,"_367":24,"_368":24,"_369":-5},"ENV",{"_321":322,"_323":324,"_325":16,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347,"_348":349},"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>

History · Utilities.tsx