[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_242":243,"_244":245},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":60,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",4,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","01a09f7d-4745-7404-b411-27b15172eb4f","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\ntype Program={code:string;category:string;name:string;status:string};\ntype Episode={code:string;category:string;program_name:string;chapter:number;title:string;premise:string;status:string;scene1:string;scene2:string;scene3:string;scene4:string;scene5:string;scene6:string};\n\nexport function App(){\n const [programs,setPrograms]=useState([]);\n const [episodes,setEpisodes]=useState([]);\n const [tab,setTab]=useState(\"control\");\n const [q,setQ]=useState(\"\");\n const [cat,setCat]=useState(\"TODAS\");\n const [draft,setDraft]=useState(null);\n const load=async()=>{const r=await fetch(\"/api/state\");const d=await r.json();setPrograms(d.programs||[]);setEpisodes(d.episodes||[])};\n useEffect(()=>{load()},[]);\n const cats=useMemo(()=>[\"TODAS\",...Array.from(new Set(programs.map(p=>p.category)))],[programs]);\n const filtered=episodes.filter(e=>(cat===\"TODAS\"||e.category===cat)&&(e.code+\" \"+e.title+\" \"+e.program_name).toLowerCase().includes(q.toLowerCase()));\n const scene=(e:Episode,n:number)=>(e as any)[\"scene\"+n]||\"\";\n const card=(e:Episode)=>;\n const save=async()=>{if(!draft)return;const r=await fetch(\"/api/episode/\"+draft.code,{method:\"POST\",headers:{\"Content-Type\":\"application/json\"},body:JSON.stringify(draft)});const j=await r.json();if(!r.ok)return alert(j.error||\"Error\");setDraft(null);await load()};\n const content=()=>{\n if(tab===\"programas\")return <>

UNIVERSO

{programs.length} programas

{programs.map(p=>

{p.category}

{p.name}

Estado: {p.status} · regla fija: siempre inicia con IMPACTO.

)}

;\n if(tab===\"episodios\")return <>

setQ(e.target.value)}/>

{filtered.map(card)}

;\n return <>

CANAL8.TV · CONTROL

Programación viva,
8 segundos a la vez.

Programas, capítulos y seis escenas por episodio. Todo lo que sigamos construyendo se actualiza desde aquí.

{programs.length}PROGRAMAS

{episodes.length}EPISODIOS

{episodes.length*6}ESCENAS 8S

48sPOR CAPÍTULO

INICIO

Primeros episodios

{episodes.slice(0,6).map(card)}

;\n };\n return

CANAL8.TV

SIEMPRE INICIA IMPACTO

1 CLIP = 8S6 ESCENAS = 48SREAL + CARTOON + MÚSICA + CULTURA

{content()}

{draft&&

{if(e.target===e.currentTarget)setDraft(null)}}>

{draft.code}

{draft.title}

TÍTULOsetDraft({...draft,title:e.target.value})}/>ESTADOPREMISA

setDraft({...draft,premise:e.target.value})}/></label></div><div className=\"lock\">REGLA FIJA: ESCENA 1 = IMPACTO · 6 ESCENAS × 8 SEGUNDOS</div><div className=\"scenes\">{[1,2,3,4,5,6].map(n=><article className=\"scene\" key={n}><div className=\"sn\"><b>{n}</b><small>8S</small></div><textarea value={scene(draft,n)} onChange={e=>setDraft({...draft,[(\"scene\"+n)]:e.target.value} as Episode)} placeholder={n===1?\"IMPACTO: …\":\"Acción de escena \"+n}/></article>)}</div><div className=\"foot\"><button className=\"ghost\" onClick={()=>setDraft(null)}>CANCELAR</button><button className=\"btn\" onClick={save}>GUARDAR CAMBIOS</button></div></section></div>}</div>;\n}","createdAt",["D",1789382334026],"branchVersion","branchId","6115b29c-16d6-4e5c-adb4-8b5ae0947091","id","6356f220-ba45-4970-82b1-c17504400284","canal8-control",["D",1789382182597],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","CANAL8.TV production control","imageUrl","b162e777-26d5-4b57-b5d4-824de1b425e2","pinnedFileId","01a09f7d-4745-7404-b411-4a5159266c10","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a087a7-039d-766a-a2cb-d9a1a861d44b","tursoName","6356f220ba45497082b1c17504400284","tursoHostname","6356f220ba45497082b1c17504400284-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789476033740],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",19,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","agentia","handle","displayName","Agent Ia","avatar","https://lh3.googleusercontent.com/a/ACg8ocJFdiW2REahwLO-JAErcTTOgHyYDVN6VBKDk9RmathkK-sumQ=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":237,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":238,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":239,"_85":240,"_87":241,"_89":25},"tree",[175,182,183,184],"files",[175,176,177,178,179,180,181,182,183,184],"counts",{"_165":64,"_166":142,"_167":64,"_168":169,"_170":171},"contents",[132,133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":159,"_32":160,"_30":161,"_138":-5,"_42":43,"_41":142,"_140":60,"_39":162,"_13":64,"_34":163,"_36":-5,"_24":25,"_145":-5,"_27":164},{"_44":153,"_32":154,"_30":155,"_138":-5,"_42":43,"_41":142,"_140":60,"_39":156,"_13":64,"_34":20,"_36":157,"_24":25,"_145":-5,"_27":158},{"_44":147,"_32":148,"_30":149,"_138":-5,"_42":43,"_41":142,"_140":60,"_39":150,"_13":64,"_34":20,"_36":151,"_24":25,"_145":-5,"_27":152},{"_44":136,"_32":137,"_30":58,"_138":-5,"_42":43,"_41":139,"_140":25,"_39":141,"_13":142,"_34":143,"_36":144,"_24":25,"_145":46,"_27":146},"02353dcd-cd38-4317-b8a2-2ae114a07412","index.ts","parentId",2,"latest",["D",1789382330444],1,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\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) => {\n  const programs = await sqlite.execute(\"SELECT * FROM programs ORDER BY code\");\n  const episodes = await sqlite.execute(\"SELECT * FROM episodes ORDER BY code\");\n  return c.json({ programs: programs.rows, episodes: episodes.rows });\n});\n\napp.post(\"/api/episode/:code\", async (c) => {\n  const code = c.req.param(\"code\");\n  const body = await c.req.json();\n  const fields = [\"title\",\"premise\",\"status\",\"scene1\",\"scene2\",\"scene3\",\"scene4\",\"scene5\",\"scene6\"];\n  const vals = fields.map((k) => String(body[k] ?? \"\"));\n  if (!vals[0].trim()) return c.json({ error: \"El título es requerido\" }, 400);\n  if (!vals[3].toUpperCase().startsWith(\"IMPACTO\")) return c.json({ error: \"La escena 1 debe iniciar con IMPACTO\" }, 400);\n  await sqlite.execute({\n    sql: \"UPDATE episodes SET title=?, premise=?, status=?, scene1=?, scene2=?, scene3=?, scene4=?, scene5=?, scene6=?, updated_at=CURRENT_TIMESTAMP WHERE code=?\",\n    args: [...vals, code],\n  });\n  return c.json({ ok: true });\n});\n\napp.post(\"/api/episode\", async (c) => {\n  const b = await c.req.json();\n  if (!b.code || !b.title || !b.program_name) return c.json({ error: \"Faltan datos\" }, 400);\n  await sqlite.execute({\n    sql: \"INSERT OR REPLACE INTO episodes(code,category,program_name,chapter,title,premise,status,scene1,scene2,scene3,scene4,scene5,scene6,updated_at) VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,CURRENT_TIMESTAMP)\",\n    args: [b.code,b.category||\"SERIES\",b.program_name,Number(b.chapter)||1,b.title,b.premise||\"\",b.status||\"IDEA\",b.scene1||\"IMPACTO: pendiente\",b.scene2||\"\",b.scene3||\"\",b.scene4||\"\",b.scene5||\"\",b.scene6||\"\"],\n  });\n  return c.json({ ok: true });\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;","label",[137],"ae125ce8-d829-4628-9c06-80591501231a","README.md","01a09f7d-4745-7404-b411-44001c7df98e",["D",1789382182597],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n    Browser -->|\"GET /\"| Hono[\"index.ts<br/>(Hono server)\"]\n    Hono -->|serves| HTML[\"root.tsx\"]\n    HTML -->|loads| Entry[\"index.tsx\"]\n    Entry -->|renders| App[\"App.tsx\"]\n    App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts              ← Hono backend (serves frontend + API routes)\nfrontend/\n  root.tsx            ← HTML shell (stamps immutable asset URLs)\n  index.tsx           ← React entrypoint (mounts <App />)\n  favicon.svg         ← App icon\n  components/\n    App.tsx            ← Root component (layout + view source link)\n    Counter.tsx        ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n   frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n   immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n   alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n   replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n  [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n  a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[148],"40d17095-896c-40f4-b476-a964e0a00978","CHANGELOG.md","01a09f7d-4745-7404-b411-42f16a1eb76e",["D",1789382182597],"# 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",[154],"ec51f32b-246e-43f2-8c44-e77480c374f5","frontend","01a09f7d-4745-7404-b411-3dc9d932a3a3",["D",1789382182597],"directory",[160],"pulls","branches","forks","envVars",{"_172":64,"_174":64},"connections",{"_172":64,"_173":64},"count","unfilledCount","emptyCount",{"_44":159,"_32":160,"_30":161,"_138":-5,"_42":43,"_41":142,"_140":60,"_39":234,"_13":64,"_34":163,"_36":-5,"_24":25,"_145":-5,"_186":235,"_27":236},{"_44":230,"_32":225,"_30":220,"_138":161,"_42":43,"_41":142,"_140":60,"_39":231,"_13":64,"_34":163,"_36":-5,"_24":25,"_145":-5,"_186":232,"_27":233},{"_44":226,"_32":33,"_30":31,"_138":220,"_42":43,"_41":14,"_140":60,"_39":227,"_13":142,"_34":35,"_36":38,"_24":25,"_145":-5,"_186":228,"_27":229},{"_44":217,"_32":218,"_30":219,"_138":220,"_42":43,"_41":142,"_140":60,"_39":221,"_13":64,"_34":35,"_36":222,"_24":25,"_145":-5,"_186":223,"_27":224},{"_44":210,"_32":211,"_30":212,"_138":161,"_42":43,"_41":142,"_140":60,"_39":213,"_13":64,"_34":20,"_36":214,"_24":25,"_145":-5,"_186":215,"_27":216},{"_44":203,"_32":204,"_30":205,"_138":161,"_42":43,"_41":142,"_140":60,"_39":206,"_13":64,"_34":35,"_36":207,"_24":25,"_145":-5,"_186":208,"_27":209},{"_44":195,"_32":196,"_30":197,"_138":161,"_42":43,"_41":198,"_140":60,"_39":199,"_13":142,"_34":35,"_36":200,"_24":25,"_145":-5,"_186":201,"_27":202},{"_44":153,"_32":154,"_30":155,"_138":-5,"_42":43,"_41":142,"_140":60,"_39":192,"_13":64,"_34":20,"_36":157,"_24":25,"_145":-5,"_186":193,"_27":194},{"_44":147,"_32":148,"_30":149,"_138":-5,"_42":43,"_41":142,"_140":60,"_39":189,"_13":64,"_34":20,"_36":151,"_24":25,"_145":-5,"_186":190,"_27":191},{"_44":136,"_32":137,"_30":58,"_138":-5,"_42":43,"_41":139,"_140":25,"_39":185,"_13":142,"_34":143,"_36":144,"_24":25,"_145":46,"_186":187,"_27":188},["D",1789382330444],"children",[],[137],["D",1789382182597],[],[148],["D",1789382182597],[],[154],"62111cb4-ad60-43fb-a5fc-d1d318888dd1","root.tsx","01a09f7d-4745-7404-b411-395b2478f590",3,["D",1789382332275],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"es\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <meta name=\"theme-color\" content=\"#09090b\" />\n          <title>CANAL8.TV Control</title>\n          <style>{raw(`\n            @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Manrope:wght@500;600;700;800&display=swap');\n            :root{--bg:#09090b;--panel:#121216;--line:#2c2c33;--acid:#dcff00;--pink:#ff2aa1;--text:#f5f4ef;--muted:#8b8b95}\n            *{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 15% 0,rgba(0,220,255,.08),transparent 28rem),radial-gradient(circle at 90% 10%,rgba(255,42,161,.08),transparent 30rem),var(--bg);color:var(--text);font-family:Manrope,sans-serif}\n            button,input,select,textarea{font:inherit}.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 18px;background:rgba(9,9,11,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}\n            .logo{font-family:'Archivo Black';font-size:24px;letter-spacing:-2px}.logo b{color:var(--acid);font-size:32px}.logo i{color:var(--pink);font-style:normal}.tag{margin:auto;color:#888;font-size:10px;font-weight:900}.tag b{color:#fff}\n            .btn{background:var(--acid);color:#090909;border:0;border-radius:10px;padding:10px 12px;font-size:10px;font-weight:900;box-shadow:3px 3px 0 var(--pink)}\n            .rule{display:flex;justify-content:center;gap:22px;overflow:auto;white-space:nowrap;padding:8px 12px;background:var(--acid);color:#090909;font-size:9px;font-weight:900}\n            .tabs{display:flex;gap:6px;padding:9px 16px;border-bottom:1px solid var(--line);background:#0c0c0f;position:sticky;top:58px;z-index:15}.tabs button{background:transparent;color:#7f7f89;border:1px solid transparent;border-radius:8px;padding:8px 10px;font-size:9px;font-weight:900}.tabs button.active{background:#19191e;border-color:#34343b;color:#fff}\n            main{max-width:1400px;margin:auto;padding:20px 18px 70px}.hero{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;border:1px solid var(--line);border-radius:20px;padding:28px;background:linear-gradient(135deg,#15151a,#09090b 70%);overflow:hidden}.hero h1{font-family:'Archivo Black';font-size:clamp(34px,6vw,70px);line-height:.95;letter-spacing:-.05em;margin:8px 0}.hero em{font-style:normal;color:var(--pink)}.hero p{color:#9696a0;max-width:680px;font-size:12px}.eight{width:150px;height:150px;border:4px solid var(--acid);border-radius:50%;display:grid;place-items:center;font:100px 'Archivo Black';color:var(--acid)}\n            .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 24px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:14px}.stat b{display:block;font:28px 'Archivo Black'}.stat span{font-size:8px;color:#777;font-weight:900}\n            .head{display:flex;justify-content:space-between;align-items:end;margin:22px 0 10px}.head h2{font:23px 'Archivo Black';margin:0}.head small{color:var(--pink);font-size:8px;font-weight:900;letter-spacing:.1em}\n            .filters{display:grid;grid-template-columns:1fr 190px;gap:8px;margin-bottom:12px}.filters input,.filters select{background:#121216;border:1px solid #33333a;color:#fff;border-radius:9px;padding:10px}\n            .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:left;color:#fff}.card:hover{border-color:#51515d}.code{color:var(--acid);font:900 9px monospace}.pill{float:right;border:1px solid #38383f;border-radius:999px;padding:4px 7px;font-size:7px}.card h3{font:18px 'Archivo Black';margin:10px 0 6px}.card p{color:#92929d;font-size:10px;line-height:1.45;min-height:30px}.impact{background:#1a141a;border-left:3px solid var(--pink);padding:8px;border-radius:0 7px 7px 0;font-size:9px}.impact b{display:block;color:var(--pink);font-size:7px;margin-bottom:3px}\n            .programs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.program{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:15px}.program span{background:var(--acid);color:#090909;border-radius:5px;padding:4px 7px;font-size:7px;font-weight:900}.program h3{font:20px 'Archivo Black';margin:11px 0 4px}.program p{color:#8d8d97;font-size:10px}\n            .modalWrap{position:fixed;inset:0;background:rgba(0,0,0,.76);display:grid;place-items:start center;z-index:50;padding:18px;overflow:auto}.modal{width:min(900px,100%);background:#0f0f13;border:1px solid #3b3b43;border-radius:18px;padding:16px;margin:auto}.modal header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:10px}.modal h2{font:22px 'Archivo Black';margin:0}.x{background:#1a1a1f;color:#fff;border:1px solid #34343a;border-radius:8px;width:36px;height:36px}.form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.field{display:grid;gap:5px;font-size:8px;color:#777;font-weight:900}.field.wide{grid-column:1/-1}.field input,.field textarea,.field select{background:#15151a;border:1px solid #33333b;color:#fff;border-radius:8px;padding:9px}.field textarea{min-height:70px;resize:vertical}.lock{margin:12px 0 8px;background:var(--acid);color:#090909;border-radius:8px;padding:8px 10px;font-size:8px;font-weight:900}.scenes{display:grid;gap:6px}.scene{display:grid;grid-template-columns:52px 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#121216}.scene:first-child{border-color:var(--pink)}.sn{display:grid;place-items:center;background:#0b0b0e}.sn b{font:22px 'Archivo Black'}.sn small{color:var(--acid);font-size:7px}.scene textarea{width:100%;min-height:60px;border:0;background:transparent;color:#fff;padding:9px;resize:vertical}.foot{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.ghost{background:#19191f;border:1px solid #36363d;color:#fff;border-radius:8px;padding:9px 11px;font-size:9px;font-weight:900}.empty{padding:30px;text-align:center;border:1px dashed #34343b;border-radius:12px;color:#777}\n            @media(max-width:850px){.grid,.programs{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.tag{display:none}.top{padding:10px}.logo{font-size:19px}.logo b{font-size:25px}.tabs{top:51px;padding:6px 8px;overflow:auto}.rule{justify-content:flex-start}.hero{padding:18px;min-height:210px}.eight{position:absolute;right:-20px;width:110px;height:110px;font-size:72px;opacity:.6}.grid,.programs{grid-template-columns:1fr}.filters{grid-template-columns:1fr}.form{grid-template-columns:1fr}.field.wide{grid-column:auto}.modalWrap{padding:0}.modal{min-height:100vh;border-radius:0;border:0}}\n          `)}</style>\n        </head>\n        <body>\n          <div id=\"root\" />\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}",[],[160,196],"e42b8d81-3f96-4790-8222-12240fd8b2a4","index.tsx","01a09f7d-4745-7404-b411-3452da3e4397",["D",1789382182597],"/** @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 />);",[],[160,204],"deba6247-b0b0-45c3-beb5-6fe4e5ec3b66","favicon.svg","01a09f7d-4745-7404-b411-3262a114a84e",["D",1789382182597],"<?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>",[],[160,211],"a95cdda3-2f4e-42df-9353-a569d04131cd","Counter.tsx","01a09f7d-4745-7404-b411-29184c8a3fae","01a09f7d-4745-7404-b411-2c7e1550b735",["D",1789382182597],"/** @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",[],[160,225,218],"components","743a13fb-1dfa-4ac8-b2b1-85c05a66af2d",["D",1789382334026],[],[160,225,33],"19722790-fa73-4749-9619-60c5928c498c",["D",1789382182597],[177,178],[160,225],["D",1789382182597],[176,179,180,181],[160],["D",1789382182597],["D",1789476033740],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"ctx",{"_83":-5,"_129":275,"_276":277,"_278":279,"_280":25,"_281":25,"_282":25,"_283":60,"_284":-5,"_285":-7,"_286":-7,"_287":64,"_288":25,"_289":25,"_290":-5,"_291":25,"_292":25,"_293":25,"_294":-5},"ENV",{"_246":247,"_248":249,"_250":91,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274},"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>

React + Hono Starter

{e.title}

{programs.length} programas

{p.name}

Programación viva,8 segundos a la vez.

Primeros episodios

Programación viva,
8 segundos a la vez.

Diff · v4