\n Clicked\n 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 \n times\n

\n );\n}\n",[182,98,77],"743a13fb-1dfa-4ac8-b2b1-85c05a66af2d",["D",1789382334026],"/** @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}",[182,98,88],"pulls","branches","forks","envVars",{"_84":26,"_201":26},"connections",{"_84":26,"_200":26},"unfilledCount","emptyCount",{"_34":266,"_13":182,"_75":175,"_44":-5,"_36":37,"_176":41,"_177":24,"_38":267,"_40":26,"_78":99,"_179":-5,"_80":30,"_180":-5,"_218":268,"_17":269},{"_34":174,"_13":98,"_75":97,"_44":175,"_36":37,"_176":41,"_177":24,"_38":263,"_40":26,"_78":99,"_179":-5,"_80":30,"_180":-5,"_218":264,"_17":265},{"_34":189,"_13":88,"_75":87,"_44":97,"_36":37,"_176":91,"_177":24,"_38":260,"_40":41,"_78":79,"_179":191,"_80":30,"_180":-5,"_218":261,"_17":262},{"_34":185,"_13":77,"_75":76,"_44":97,"_36":37,"_176":41,"_177":24,"_38":257,"_40":26,"_78":79,"_179":187,"_80":30,"_180":-5,"_218":258,"_17":259},{"_34":250,"_13":251,"_75":252,"_44":175,"_36":37,"_176":41,"_177":24,"_38":253,"_40":26,"_78":21,"_179":254,"_80":30,"_180":-5,"_218":255,"_17":256},{"_34":243,"_13":244,"_75":245,"_44":175,"_36":37,"_176":41,"_177":24,"_38":246,"_40":26,"_78":79,"_179":247,"_80":30,"_180":-5,"_218":248,"_17":249},{"_34":235,"_13":236,"_75":237,"_44":175,"_36":37,"_176":238,"_177":24,"_38":239,"_40":41,"_78":79,"_179":240,"_80":30,"_180":-5,"_218":241,"_17":242},{"_34":228,"_13":229,"_75":230,"_44":-5,"_36":37,"_176":41,"_177":24,"_38":231,"_40":26,"_78":21,"_179":232,"_80":30,"_180":-5,"_218":233,"_17":234},{"_34":221,"_13":222,"_75":223,"_44":-5,"_36":37,"_176":41,"_177":24,"_38":224,"_40":26,"_78":21,"_179":225,"_80":30,"_180":-5,"_218":226,"_17":227},{"_34":212,"_13":213,"_75":111,"_44":-5,"_36":37,"_176":138,"_177":24,"_38":214,"_40":215,"_78":216,"_179":217,"_80":30,"_180":14,"_218":219,"_17":220},"d3dce034-92aa-4555-b686-0dd2a797b45d","index.ts",["D",1789386535414],16,"http","import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n\nconst app = new Hono();\nconst ROLES = [\"IMPACTO\",\"DESCUBRIMIENTO\",\"GIRO\",\"EXPANSIÓN\",\"SUSPENSO\",\"CIERRE/AVANCE\"];\nconst STATUSES = new Set([\"IDEA\",\"GUION\",\"DISEÑO\",\"VIDEO\",\"AUDIO\",\"LISTO\",\"PUBLICADO\"]);\nconst CLIENT_JS = \"\\n(function(){\\n\\\"use strict\\\";\\nvar S={programs:[],episodes:[],admin:[],inbox:[],activity:[],view:\\\"control\\\",q:\\\"\\\",cat:\\\"TODAS\\\",status:\\\"TODOS\\\",draft:null,adminDraft:null,loading:false};\\nvar roles=[\\\"IMPACTO\\\",\\\"DESCUBRIMIENTO\\\",\\\"GIRO\\\",\\\"EXPANSIÓN\\\",\\\"SUSPENSO\\\",\\\"CIERRE/AVANCE\\\"];\\nvar statuses=[\\\"IDEA\\\",\\\"GUION\\\",\\\"DISEÑO\\\",\\\"VIDEO\\\",\\\"AUDIO\\\",\\\"LISTO\\\",\\\"PUBLICADO\\\"];\\nvar searchTimer=null;\\n\\nfunction el(id){return document.getElementById(id)}\\nfunction esc(v){return String(v==null?\\\"\\\":v).replace(/&/g,\\\"&\\\").replace(/</g,\\\"<\\\").replace(/>/g,\\\">\\\").replace(/\\\"/g,\\\""\\\").replace(/'/g,\\\"'\\\")}\\nfunction fmtDate(v){if(!v)return\\\"—\\\";return String(v).slice(0,10)}\\nfunction toast(msg,type){var old=document.querySelector(\\\".toast\\\");if(old)old.remove();var t=document.createElement(\\\"button\\\");t.className=\\\"toast \\\"+(type||\\\"\\\");t.textContent=msg+\\\" ×\\\";t.onclick=function(){t.remove()};document.body.appendChild(t);setTimeout(function(){if(t.parentNode)t.remove()},3600)}\\nfunction busy(button,on,label){if(!button)return;button.disabled=on;if(on){button.dataset.old=button.textContent;button.textContent=label||\\\"GUARDANDO…\\\"}else{button.textContent=button.dataset.old||button.textContent}}\\nasync function api(url,options){\\n  var controller=new AbortController();var timer=setTimeout(function(){controller.abort()},15000);\\n  try{\\n    var opts=Object.assign({cache:\\\"no-store\\\",signal:controller.signal},options||{});\\n    var r=await fetch(url,opts);var j={};try{j=await r.json()}catch(e){}\\n    if(!r.ok)throw new Error(j.error||(\\\"Error \\\"+r.status));return j;\\n  }catch(e){if(e.name===\\\"AbortError\\\")throw new Error(\\\"La operación tardó demasiado. Intenta de nuevo.\\\");throw e}\\n  finally{clearTimeout(timer)}\\n}\\nasync function load(silent){\\n  if(!silent&&el(\\\"main\\\"))el(\\\"main\\\").innerHTML='<div class=\\\"loading\\\"><b>ENCENDIENDO SEÑAL</b><span>Cargando programación…</span></div>';\\n  try{\\n    var d=await api(\\\"/api/state?ts=\\\"+Date.now());\\n    S.programs=d.programs||[];S.episodes=d.episodes||[];S.admin=d.admin||[];S.inbox=d.c8_inbox||[];S.activity=d.activity||[];\\n    render();\\n  }catch(e){\\n    if(el(\\\"main\\\"))el(\\\"main\\\").innerHTML='<div class=\\\"errorbox\\\"><b>No se pudo cargar CANAL8.TV</b><span>'+esc(e.message)+'</span><button data-action=\\\"retry\\\">REINTENTAR</button></div>';\\n  }\\n}\\nfunction setView(v){S.view=v;S.q=\\\"\\\";S.cat=\\\"TODAS\\\";S.status=\\\"TODOS\\\";document.querySelectorAll(\\\"[data-view]\\\").forEach(function(b){b.classList.toggle(\\\"active\\\",b.dataset.view===v)});render()}\\nfunction count(st){return S.admin.filter(function(r){return r.status===st}).length}\\nfunction pendingC8(){return S.inbox.filter(function(x){return x.status!==\\\"PROCESADO\\\"}).length}\\nfunction adminHealthy(){return S.admin.length===S.episodes.length*6}\\nfunction episodeCard(e){\\n  var rows=S.admin.filter(function(r){return r.episode_code===e.code});\\n  var done=rows.filter(function(r){return r.status===\\\"LISTO\\\"||r.status===\\\"PUBLICADO\\\"}).length;\\n  return '<button class=\\\"episodeCard\\\" data-code=\\\"'+esc(e.code)+'\\\"><div class=\\\"row\\\"><span class=\\\"code\\\">'+esc(e.code)+(e.is_protected?'<i>CANON</i>':'')+'</span><span class=\\\"pill\\\">'+esc(e.status)+'</span></div><small>'+esc(e.category)+' · '+esc(e.program_name)+' · CAP '+esc(e.chapter)+'</small><h3>'+esc(e.title)+'</h3><p>'+esc(e.premise)+'</p><div class=\\\"impact\\\"><b>IMPACTO</b>'+esc(e.scene1||\\\"Pendiente\\\")+'</div><div class=\\\"cardFoot\\\"><span>'+done+'/6 listas</span><span>'+fmtDate(e.planned_date)+'</span></div></button>';\\n}\\nfunction dashboard(){\\n  return '<section class=\\\"hero\\\"><div><em>CANAL8.TV CONTROL · v4</em><h1>Programación viva,<br><span>8 segundos a la vez.</span></h1><p>Sistema revisado: producción, planilla Admin, calendario, archivos y entradas /c8 en un solo flujo.</p></div><div class=\\\"eight\\\">8</div></section>'+\\n  '<section class=\\\"health '+(adminHealthy()?\\\"good\\\":\\\"warn\\\")+'\\\"><b>'+(adminHealthy()?\\\"SISTEMA SINCRONIZADO\\\":\\\"REVISAR SINCRONIZACIÓN\\\")+'</b><span>'+S.episodes.length+' episodios · '+S.admin.length+' piezas Admin · '+pendingC8()+' entradas /c8 pendientes</span></section>'+\\n  '<section class=\\\"stats\\\"><article><b>'+S.programs.length+'</b><small>PROGRAMAS</small></article><article><b>'+S.episodes.length+'</b><small>EPISODIOS</small></article><article><b>'+S.admin.length+'</b><small>PIEZAS 8S</small></article><article><b>'+count(\\\"LISTO\\\")+'</b><small>LISTAS</small></article><article><b>'+count(\\\"PUBLICADO\\\")+'</b><small>PUBLICADAS</small></article></section>'+\\n  '<div class=\\\"head\\\"><div><small>FLUJO</small><h2>De idea a publicación</h2></div></div><section class=\\\"flow\\\">'+statuses.map(function(st){return '<article><b>'+count(st)+'</b><span>'+st+'</span></article>'}).join(\\\"\\\")+'</section>'+\\n  '<section class=\\\"quick\\\"><button data-view=\\\"cargar\\\"><b>＋ Cargar episodio</b><span>Ficha + 6 escenas + distribución + Admin automático.</span></button><button data-view=\\\"admin\\\"><b>▦ Planilla Admin</b><span>Control interno completo de cada pieza de 8 segundos.</span></button><button data-view=\\\"c8\\\"><b>/c8 Entradas</b><span>'+pendingC8()+' pendientes desde el chat o integraciones.</span></button><button data-view=\\\"calendario\\\"><b>◫ Calendario</b><span>Contenido organizado por fecha planificada.</span></button></section>'+\\n  '<div class=\\\"dashCols\\\"><section><div class=\\\"head\\\"><div><small>INICIO</small><h2>Producción inicial</h2></div></div><div class=\\\"cards\\\">'+S.episodes.slice(0,6).map(episodeCard).join(\\\"\\\")+'</div></section><section><div class=\\\"head\\\"><div><small>HISTORIAL</small><h2>Actividad reciente</h2></div></div><div class=\\\"activity\\\">'+(S.activity.length?S.activity.slice(0,10).map(function(a){return '<article><b>'+esc(a.action)+'</b><span>'+esc(a.ref_code||\\\"\\\")+'</span><p>'+esc(a.detail||\\\"\\\")+'</p><small>'+esc(a.created_at||\\\"\\\")+'</small></article>'}).join(\\\"\\\"):'<div class=\\\"empty small\\\">Sin actividad registrada todavía.</div>')+'</div></section></div>';\\n}\\nfunction programs(){\\n  return '<div class=\\\"head\\\"><div><small>UNIVERSO</small><h2>'+S.programs.length+' programas activos</h2></div></div><div class=\\\"programGrid\\\">'+S.programs.map(function(p){var eps=S.episodes.filter(function(e){return e.program_name===p.name});return '<article class=\\\"program\\\"><span>'+esc(p.category)+'</span><h3>'+esc(p.name)+'</h3><p>'+eps.length+' capítulos · 6 × 8s · IMPACTO obligatorio.</p><footer><b>'+eps.filter(function(e){return e.status===\\\"PUBLICADO\\\"}).length+'</b> publicados</footer></article>'}).join(\\\"\\\")+'</div>';\\n}\\nfunction episodes(){\\n  var cats=[\\\"TODAS\\\"].concat(Array.from(new Set(S.programs.map(function(p){return p.category}))));\\n  var list=S.episodes.filter(function(e){return (S.cat===\\\"TODAS\\\"||e.category===S.cat)&&((e.code+\\\" \\\"+e.title+\\\" \\\"+e.program_name).toLowerCase().indexOf(S.q.toLowerCase())>=0)});\\n  return '<div class=\\\"head\\\"><div><small>BIBLIOTECA</small><h2>Episodios · '+list.length+'</h2></div><button class=\\\"hot\\\" data-view=\\\"cargar\\\">＋ CARGAR</button></div><div class=\\\"filters\\\"><input id=\\\"search\\\" placeholder=\\\"Buscar episodio…\\\" value=\\\"'+esc(S.q)+'\\\"><select id=\\\"category\\\">'+cats.map(function(c){return '<option '+(c===S.cat?\\\"selected\\\":\\\"\\\")+'>'+esc(c)+'</option>'}).join(\\\"\\\")+'</select><span class=\\\"resultCount\\\">'+list.length+' resultados</span></div><div class=\\\"cards\\\">'+list.map(episodeCard).join(\\\"\\\")+'</div>';\\n}\\nfunction loadForm(){\\n  return '<div class=\\\"head\\\"><div><small>ENTRADA</small><h2>Cargar episodio completo</h2></div></div><section class=\\\"loadLayout\\\"><aside><b>FLUJO CANAL8.TV</b><ol><li>Ficha del episodio</li><li>6 escenas de 8 segundos</li><li>Distribución</li><li>6 filas Admin automáticas</li></ol><p>La escena 1 debe comenzar con <strong>IMPACTO:</strong>.</p></aside><div class=\\\"loadMain\\\">'+\\n  '<section class=\\\"block\\\"><h3>1 · Ficha</h3><div class=\\\"formGrid\\\"><label>PROGRAMA<select id=\\\"l-program\\\">'+S.programs.map(function(p){return '<option value=\\\"'+esc(p.name)+'\\\">'+esc(p.name)+'</option>'}).join(\\\"\\\")+'</select></label><label>CAPÍTULO<input id=\\\"l-chapter\\\" type=\\\"number\\\" min=\\\"1\\\" value=\\\"1\\\"></label><label>TÍTULO<input id=\\\"l-title\\\" placeholder=\\\"Título\\\"></label><label>ESTADO<select id=\\\"l-status\\\">'+statuses.map(function(s){return '<option>'+s+'</option>'}).join(\\\"\\\")+'</select></label><label class=\\\"wide\\\">PREMISA<textarea id=\\\"l-premise\\\">

'+\\n '

2 · Seis escenas

'+[1,2,3,4,5,6].map(function(n){return '

'+n+'8S

'+roles[n-1]+'

'}).join(\\\"\\\")+'

'+\\n '

3 · Distribución

FECHAPLATAFORMASFORMATORESPONSABLECAPTIONHASHTAGSNOTAS

';\\n}\\nfunction admin(){\\n var cats=[\\\"TODAS\\\"].concat(Array.from(new Set(S.programs.map(function(p){return p.category}))));\\n var list=S.admin.filter(function(r){var hay=(r.episode_code+\\\" \\\"+r.episode_title+\\\" \\\"+r.program_name+\\\" \\\"+r.piece_title+\\\" \\\"+(r.caption||\\\"\\\")).toLowerCase();return (S.cat===\\\"TODAS\\\"||r.category===S.cat)&&(S.status===\\\"TODOS\\\"||r.status===S.status)&&hay.indexOf(S.q.toLowerCase())>=0});\\n return '

PLANILLA INTERNA

Admin · '+list.length+' piezas

'+list.map(function(r){return ''}).join(\\\"\\\")+'

CÓDIGO	ESC	CATEGORÍA	PROGRAMA	CAP	EPISODIO	ROL	PIEZA	ESTADO	FECHA	PLATAFORMA	RESP.	FUENTE
'+esc(r.episode_code)+'	'+r.scene_no+'	'+esc(r.category)+'	'+esc(r.program_name)+'	'+r.chapter+'	'+esc(r.episode_title)+'	'+esc(r.role)+'	'+esc(r.piece_title)+'	'+esc(r.status)+'	'+esc(r.planned_date\|\|\\\"—\\\")+'	'+esc(r.platform\|\|\\\"—\\\")+'	'+esc(r.owner\|\|\\\"—\\\")+'	'+esc(r.source\|\|\\\"APP\\\")+'

';\\n}\\nfunction calendar(){\\n var list=S.admin.filter(function(r){return r.planned_date}).sort(function(a,b){return String(a.planned_date).localeCompare(String(b.planned_date))});\\n return '

PROGRAMACIÓN

Calendario · '+list.length+' piezas

'+(list.length?list.map(function(r){return ''}).join(\\\"\\\"):'

No hay fechas planificadas todavía.

')+'

';\\n}\\nfunction c8Inbox(){\\n return '

ENTRADAS DEL CHAT

/c8 · '+pendingC8()+' pendientes

Cómo funcionaCuando usamos /c8 desde el chat, la entrada queda registrada aquí y luego se refleja en episodio/planilla Admin según corresponda.

'+(S.inbox.length?S.inbox.map(function(x){return '

C8-'+x.id+''+esc(x.status)+'

'+esc(x.raw_text)+'

'+esc(x.action_type)+' · '+esc(x.target_code||\\\"SIN DESTINO\\\")+' · '+esc(x.created_at)+'

'+(x.status!==\\\"PROCESADO\\\"?'':'')+'

'}).join(\\\"\\\"):'

No hay entradas /c8 todavía.

')+'

';\\n}\\nfunction render(){\\n var html=S.view===\\\"programas\\\"?programs():S.view===\\\"episodios\\\"?episodes():S.view===\\\"cargar\\\"?loadForm():S.view===\\\"admin\\\"?admin():S.view===\\\"calendario\\\"?calendar():S.view===\\\"c8\\\"?c8Inbox():dashboard();\\n if(el(\\\"main\\\"))el(\\\"main\\\").innerHTML=html;\\n document.querySelectorAll(\\\"[data-view]\\\").forEach(function(b){b.classList.toggle(\\\"active\\\",b.dataset.view===S.view)});\\n}\\nfunction closeModal(){el(\\\"modal\\\").innerHTML=\\\"\\\";S.draft=null;S.adminDraft=null}\\nfunction openEpisode(code){\\n var e=S.episodes.find(function(x){return x.code===code});if(!e)return toast(\\\"Episodio no encontrado\\\");\\n S.draft=Object.assign({},e);var d=S.draft;var lock=d.is_protected?'

CANON PROTEGIDO: título, programa y capítulo no se pueden cambiar.

':'';\\n el(\\\"modal\\\").innerHTML='

';\\n}\\nasync function saveEpisode(btn){\\n var d=S.draft;if(!d)return;var program=el(\\\"e-program\\\").value;var p=S.programs.find(function(x){return x.name===program});\\n d.program_name=program;d.category=p?p.category:d.category;d.status=el(\\\"e-status\\\").value;d.title=el(\\\"e-title\\\").value.trim();d.chapter=Number(el(\\\"e-chapter\\\").value)||1;d.planned_date=el(\\\"e-date\\\").value;d.platforms=el(\\\"e-platforms\\\").value;d.premise=el(\\\"e-premise\\\").value;d.owner=el(\\\"e-owner\\\").value;d.content_format=el(\\\"e-format\\\").value;d.caption=el(\\\"e-caption\\\").value;d.hashtags=el(\\\"e-hashtags\\\").value;d.notes=el(\\\"e-notes\\\").value;for(var n=1;n<=6;n++)d[\\\"scene\\\"+n]=el(\\\"e-s\\\"+n).value;\\n if(!d.title)return toast(\\\"Falta el título\\\",\\\"error\\\");if(String(d.scene1).toUpperCase().indexOf(\\\"IMPACTO\\\")!==0)return toast(\\\"La escena 1 debe iniciar con IMPACTO\\\",\\\"error\\\");\\n busy(btn,true);try{await api(\\\"/api/episode/\\\"+encodeURIComponent(d.code),{method:\\\"POST\\\",headers:{\\\"Content-Type\\\":\\\"application/json\\\"},body:JSON.stringify(d)});closeModal();toast(\\\"Episodio actualizado\\\");await load(true)}catch(e){toast(e.message,\\\"error\\\")}finally{busy(btn,false)}\\n}\\nasync function createEpisode(btn){\\n var program=el(\\\"l-program\\\").value;var p=S.programs.find(function(x){return x.name===program});var d={category:p?p.category:\\\"SERIES\\\",program_name:program,chapter:Number(el(\\\"l-chapter\\\").value)||1,title:el(\\\"l-title\\\").value.trim(),premise:el(\\\"l-premise\\\").value,status:el(\\\"l-status\\\").value,planned_date:el(\\\"l-date\\\").value,platforms:el(\\\"l-platforms\\\").value,content_format:el(\\\"l-format\\\").value,owner:el(\\\"l-owner\\\").value,caption:el(\\\"l-caption\\\").value,hashtags:el(\\\"l-hashtags\\\").value,notes:el(\\\"l-notes\\\").value};for(var n=1;n<=6;n++)d[\\\"scene\\\"+n]=el(\\\"l-s\\\"+n).value.trim();\\n if(!d.title)return toast(\\\"Falta el título\\\",\\\"error\\\");if(String(d.scene1).toUpperCase().indexOf(\\\"IMPACTO\\\")!==0)return toast(\\\"La escena 1 debe iniciar con IMPACTO\\\",\\\"error\\\");\\n busy(btn,true,\\\"CREANDO…\\\");try{var j=await api(\\\"/api/episode\\\",{method:\\\"POST\\\",headers:{\\\"Content-Type\\\":\\\"application/json\\\"},body:JSON.stringify(d)});toast(j.code+\\\" creado con 6 filas Admin\\\");await load(true);setView(\\\"admin\\\")}catch(e){toast(e.message,\\\"error\\\")}finally{busy(btn,false)}\\n}\\nfunction openAdmin(id){\\n var r=S.admin.find(function(x){return Number(x.id)===Number(id)});if(!r)return toast(\\\"Fila Admin no encontrada\\\",\\\"error\\\");S.adminDraft=Object.assign({},r);\\n el(\\\"modal\\\").innerHTML='

';\\n}\\nasync function uploadFile(file){if(!file)return;var fd=new FormData();fd.append(\\\"file\\\",file);try{toast(\\\"Subiendo archivo…\\\");var r=await fetch(\\\"/api/upload\\\",{method:\\\"POST\\\",body:fd});var j=await r.json();if(!r.ok)throw new Error(j.error||\\\"No se pudo subir\\\");el(\\\"a-url\\\").value=j.url;toast(\\\"Archivo enlazado\\\")}catch(e){toast(e.message,\\\"error\\\")}}\\nasync function saveAdmin(btn){var r=S.adminDraft;if(!r)return;var b={piece_title:el(\\\"a-piece\\\").value,status:el(\\\"a-status\\\").value,planned_date:el(\\\"a-date\\\").value,published_date:el(\\\"a-pubdate\\\").value,platform:el(\\\"a-platform\\\").value,owner:el(\\\"a-owner\\\").value,caption:el(\\\"a-caption\\\").value,hashtags:el(\\\"a-hashtags\\\").value,asset_url:el(\\\"a-url\\\").value,notes:el(\\\"a-notes\\\").value};busy(btn,true);try{await api(\\\"/api/admin/\\\"+r.id,{method:\\\"POST\\\",headers:{\\\"Content-Type\\\":\\\"application/json\\\"},body:JSON.stringify(b)});closeModal();toast(\\\"Fila Admin guardada\\\");await load(true)}catch(e){toast(e.message,\\\"error\\\")}finally{busy(btn,false)}}\\nasync function markC8(id,btn){busy(btn,true,\\\"PROCESANDO…\\\");try{await api(\\\"/api/c8/\\\"+id+\\\"/status\\\",{method:\\\"POST\\\",headers:{\\\"Content-Type\\\":\\\"application/json\\\"},body:JSON.stringify({status:\\\"PROCESADO\\\"})});toast(\\\"Entrada /c8 procesada\\\");await load(true)}catch(e){toast(e.message,\\\"error\\\")}finally{busy(btn,false)}}\\nfunction exportCsv(){var rows=[[\\\"Código\\\",\\\"Escena\\\",\\\"Categoría\\\",\\\"Programa\\\",\\\"Capítulo\\\",\\\"Episodio\\\",\\\"Rol\\\",\\\"Pieza\\\",\\\"Estado\\\",\\\"Plataforma\\\",\\\"Fecha planificada\\\",\\\"Fecha publicada\\\",\\\"Caption\\\",\\\"Hashtags\\\",\\\"Responsable\\\",\\\"URL\\\",\\\"Notas\\\",\\\"Fuente\\\"]];S.admin.forEach(function(r){rows.push([r.episode_code,r.scene_no,r.category,r.program_name,r.chapter,r.episode_title,r.role,r.piece_title,r.status,r.platform,r.planned_date,r.published_date,r.caption,r.hashtags,r.owner,r.asset_url,r.notes,r.source])});var csv=rows.map(function(row){return row.map(function(v){return '\\\"'+String(v==null?\\\"\\\":v).replace(/\\\"/g,'\\\"\\\"')+'\\\"'}).join(\\\",\\\")}).join(\\\"\\\\n\\\");var blob=new Blob([csv],{type:\\\"text/csv;charset=utf-8\\\"});var a=document.createElement(\\\"a\\\");a.href=URL.createObjectURL(blob);a.download=\\\"CANAL8TV_Admin.csv\\\";document.body.appendChild(a);a.click();a.remove();setTimeout(function(){URL.revokeObjectURL(a.href)},500);toast(\\\"CSV exportado\\\")}\\n\\ndocument.addEventListener(\\\"click\\\",function(e){var t=e.target.closest(\\\"[data-view],[data-code],[data-admin],[data-action],[data-c8-process]\\\");if(!t)return;if(t.dataset.view){setView(t.dataset.view);return}if(t.dataset.code){openEpisode(t.dataset.code);return}if(t.dataset.admin){openAdmin(t.dataset.admin);return}if(t.dataset.c8Process){markC8(t.dataset.c8Process,t);return}var a=t.dataset.action;if(a===\\\"retry\\\"){load();return}if(a===\\\"close\\\"){closeModal();return}if(a===\\\"backdrop\\\"&&e.target===t){closeModal();return}if(a===\\\"save-episode\\\"){saveEpisode(t);return}if(a===\\\"create-episode\\\"){createEpisode(t);return}if(a===\\\"save-admin\\\"){saveAdmin(t);return}if(a===\\\"export\\\"){exportCsv();return}});\\ndocument.addEventListener(\\\"input\\\",function(e){if(e.target.id===\\\"search\\\"){S.q=e.target.value;clearTimeout(searchTimer);searchTimer=setTimeout(function(){var pos=S.q.length;render();var s=el(\\\"search\\\");if(s){s.focus();try{s.setSelectionRange(pos,pos)}catch(_){}}},220)}});\\ndocument.addEventListener(\\\"change\\\",function(e){if(e.target.id===\\\"category\\\"){S.cat=e.target.value;render();return}if(e.target.id===\\\"statusFilter\\\"){S.status=e.target.value;render();return}if(e.target.id===\\\"a-file\\\"){uploadFile(e.target.files&&e.target.files[0]);return}});\\nwindow.addEventListener(\\\"error\\\",function(e){console.error(\\\"CANAL8 client:\\\",e.message)});\\nwindow.addEventListener(\\\"unhandledrejection\\\",function(e){console.error(\\\"CANAL8 promise:\\\",e.reason)});\\nload();\\n})();\";\n\nconst clean=(v:any)=>String(v??\"\").trim();\nconst goodStatus=(v:any)=>STATUSES.has(clean(v))?clean(v):\"IDEA\";\nasync function log(action:string,ref:string,detail:string){\n await sqlite.execute({sql:\"INSERT INTO activity_log(action,ref_code,detail) VALUES(?,?,?)\",args:[action,ref,detail]});\n}\nasync function repairAdminRows(){\n const counts=await sqlite.execute(\"SELECT (SELECT COUNT(*) FROM episodes) AS e,(SELECT COUNT(*) FROM content_admin) AS a\");\n const e=Number(counts.rows[0]?.e||0),a=Number(counts.rows[0]?.a||0);\n if(a===e*6)return;\n for(let i=0;ic.body(null,204));\napp.get(\"/app.js\",(c)=>{c.header(\"Content-Type\",\"application/javascript; charset=utf-8\");c.header(\"Cache-Control\",\"no-store, max-age=0\");return c.body(CLIENT_JS)});\n\napp.get(\"/api/health\",async(c)=>{\n await repairAdminRows();\n const q=await sqlite.execute(\"SELECT (SELECT COUNT(*) FROM programs) AS programs,(SELECT COUNT(*) FROM episodes) AS episodes,(SELECT COUNT(*) FROM content_admin) AS admin_rows,(SELECT COUNT(*) FROM c8_inbox WHERE status!='PROCESADO') AS c8_pending\");\n const row=q.rows[0]||{};return c.json({...row,admin_ok:Number(row.admin_rows||0)===Number(row.episodes||0)*6});\n});\n\napp.get(\"/api/state\",async(c)=>{\n c.header(\"Cache-Control\",\"no-store, max-age=0\");await repairAdminRows();\n const [programs,episodes,admin,inbox,activity]=await Promise.all([\n sqlite.execute(\"SELECT * FROM programs ORDER BY code\"),\n sqlite.execute(\"SELECT * FROM episodes ORDER BY code\"),\n sqlite.execute(\"SELECT * FROM content_admin ORDER BY episode_code,scene_no\"),\n sqlite.execute(\"SELECT * FROM c8_inbox ORDER BY id DESC LIMIT 100\"),\n sqlite.execute(\"SELECT * FROM activity_log ORDER BY id DESC LIMIT 30\")\n ]);\n return c.json({programs:programs.rows,episodes:episodes.rows,admin:admin.rows,c8_inbox:inbox.rows,activity:activity.rows});\n});\n\napp.post(\"/api/episode/:code\",async(c)=>{\n const code=c.req.param(\"code\"),b=await c.req.json();\n const existing=await sqlite.execute({sql:\"SELECT * FROM episodes WHERE code=?\",args:[code]});\n const current=existing.rows[0];if(!current)return c.json({error:\"Episodio no encontrado\"},404);\n const scenes=[1,2,3,4,5,6].map(n=>String(b[\"scene\"+n]??\"\"));\n if(!clean(b.title))return c.json({error:\"El título es requerido\"},400);\n if(!scenes[0].toUpperCase().startsWith(\"IMPACTO\"))return c.json({error:\"La escena 1 debe iniciar con IMPACTO\"},400);\n const protectedCanon=Number(current.is_protected||0)===1;\n const category=protectedCanon?current.category:clean(b.category);\n const program=protectedCanon?current.program_name:clean(b.program_name);\n const chapter=protectedCanon?current.chapter:(Number(b.chapter)||1);\n const title=protectedCanon?current.title:clean(b.title);\n await sqlite.execute({sql:\"UPDATE episodes SET category=?,program_name=?,chapter=?,title=?,premise=?,status=?,scene1=?,scene2=?,scene3=?,scene4=?,scene5=?,scene6=?,planned_date=?,platforms=?,content_format=?,caption=?,hashtags=?,owner=?,notes=?,updated_at=CURRENT_TIMESTAMP WHERE code=?\",args:[category,program,chapter,title,String(b.premise||\"\"),goodStatus(b.status),...scenes,clean(b.planned_date),clean(b.platforms)||\"TikTok, YouTube Shorts\",clean(b.content_format)||\"Vertical 9:16\",String(b.caption||\"\"),String(b.hashtags||\"\"),String(b.owner||\"\"),String(b.notes||\"\"),code]});\n await syncAdmin({...b,category,program_name:program,chapter,title},code);\n await log(\"EPISODE_UPDATE\",code,\"Episodio actualizado.\");\n return c.json({ok:true,protected:protectedCanon});\n});\n\napp.post(\"/api/episode\",async(c)=>{\n const b=await c.req.json(),program=clean(b.program_name),title=clean(b.title),chapter=Number(b.chapter)||1;\n const scenes=[1,2,3,4,5,6].map(n=>String(b[\"scene\"+n]??\"\"));\n if(!title||!program)return c.json({error:\"Título y programa son requeridos\"},400);\n if(!scenes[0].toUpperCase().startsWith(\"IMPACTO\"))return c.json({error:\"La escena 1 debe iniciar con IMPACTO\"},400);\n const dupe=await sqlite.execute({sql:\"SELECT code FROM episodes WHERE program_name=? AND chapter=? LIMIT 1\",args:[program,chapter]});\n if(dupe.rows.length)return c.json({error:\"Ese programa ya tiene el capítulo \"+chapter+\" (\"+dupe.rows[0].code+\").\"},409);\n const q=await sqlite.execute(\"SELECT COALESCE(MAX(CAST(SUBSTR(code,2) AS INTEGER)),0) AS m FROM episodes\");\n const code=\"E\"+String(Number(q.rows[0]?.m||0)+1).padStart(3,\"0\");\n await sqlite.execute({sql:\"INSERT INTO episodes(code,category,program_name,chapter,title,premise,status,scene1,scene2,scene3,scene4,scene5,scene6,planned_date,platforms,content_format,caption,hashtags,owner,notes,is_protected,updated_at) VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,0,CURRENT_TIMESTAMP)\",args:[code,clean(b.category)||\"SERIES\",program,chapter,title,String(b.premise||\"\"),goodStatus(b.status),...scenes,clean(b.planned_date),clean(b.platforms)||\"TikTok, YouTube Shorts\",clean(b.content_format)||\"Vertical 9:16\",String(b.caption||\"\"),String(b.hashtags||\"\"),String(b.owner||\"\"),String(b.notes||\"\")]});\n for(let n=1;n<=6;n++)await sqlite.execute({sql:\"INSERT INTO content_admin(episode_code,scene_no,category,program_name,chapter,episode_title,role,piece_title,status,platform,planned_date,caption,hashtags,owner,notes,source) VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)\",args:[code,n,clean(b.category)||\"SERIES\",program,chapter,title,ROLES[n-1],code+\"-S\"+n,goodStatus(b.status),clean(b.platforms)||\"TikTok, YouTube Shorts\",clean(b.planned_date),String(b.caption||\"\"),String(b.hashtags||\"\"),String(b.owner||\"\"),String(b.notes||\"\"),\"APP\"]});\n await log(\"EPISODE_CREATE\",code,title);\n return c.json({ok:true,code});\n});\n\napp.post(\"/api/admin/:id\",async(c)=>{\n const id=Number(c.req.param(\"id\")),b=await c.req.json();if(!id)return c.json({error:\"Fila inválida\"},400);\n const row=await sqlite.execute({sql:\"SELECT episode_code,scene_no FROM content_admin WHERE id=?\",args:[id]});if(!row.rows.length)return c.json({error:\"Fila no encontrada\"},404);\n await sqlite.execute({sql:\"UPDATE content_admin SET piece_title=?,status=?,platform=?,planned_date=?,published_date=?,caption=?,hashtags=?,asset_url=?,owner=?,notes=?,updated_at=CURRENT_TIMESTAMP WHERE id=?\",args:[String(b.piece_title||\"\"),goodStatus(b.status),String(b.platform||\"\"),clean(b.planned_date),clean(b.published_date),String(b.caption||\"\"),String(b.hashtags||\"\"),String(b.asset_url||\"\"),String(b.owner||\"\"),String(b.notes||\"\"),id]});\n await log(\"ADMIN_UPDATE\",String(row.rows[0].episode_code),\"Escena \"+row.rows[0].scene_no+\" actualizada.\");\n return c.json({ok:true});\n});\n\napp.post(\"/api/c8\",async(c)=>{\n const b=await c.req.json(),raw=clean(b.raw_text);if(!raw)return c.json({error:\"Información requerida\"},400);\n const status=clean(b.status)||\"PENDIENTE\";\n const q=await sqlite.execute({sql:\"INSERT INTO c8_inbox(raw_text,action_type,target_code,status,result_note,processed_at) VALUES(?,?,?,?,?,?) RETURNING *\",args:[raw,clean(b.action_type)||\"AUTO\",clean(b.target_code),status,String(b.result_note||\"\"),status===\"PROCESADO\"?new Date().toISOString():\"\"]});\n await log(\"C8_INBOX\",clean(b.target_code)||\"C8\",\"Entrada /c8 registrada.\");\n return c.json({ok:true,item:q.rows[0]});\n});\napp.post(\"/api/c8/:id/status\",async(c)=>{\n const id=Number(c.req.param(\"id\")),b=await c.req.json();if(!id)return c.json({error:\"Entrada inválida\"},400);\n const status=clean(b.status)||\"PROCESADO\";\n await sqlite.execute({sql:\"UPDATE c8_inbox SET status=?,processed_at=? WHERE id=?\",args:[status,status===\"PROCESADO\"?new Date().toISOString():\"\",id]});\n await log(\"C8_STATUS\",\"C8-\"+id,status);return c.json({ok:true});\n});\n\napp.post(\"/api/upload\",async(c)=>{\n const body=await c.req.parseBody(),file=body.file;if(!(file instanceof File))return c.json({error:\"Archivo requerido\"},400);\n if(file.size>4*1024*1024)return c.json({error:\"Máximo 4 MB\"},413);\n const safe=file.name.replace(/[^a-zA-Z0-9._-]+/g,\"-\").slice(-80),key=\"canal8-\"+Date.now()+\"-\"+safe;\n await blob.set(key,file);await log(\"FILE_UPLOAD\",safe,\"Archivo de \"+file.size+\" bytes\");\n return c.json({ok:true,url:\"/asset/\"+encodeURIComponent(key),name:file.name});\n});\napp.get(\"/asset/:key\",async(c)=>{try{const res=await blob.get(decodeURIComponent(c.req.param(\"key\")));return new Response(res.body,{headers:{\"content-type\":res.headers.get(\"content-type\")||\"application/octet-stream\",\"cache-control\":\"public,max-age=31536000\"}})}catch{return c.text(\"Archivo no encontrado\",404)}});\n\napp.get(\"/\",(c)=>{\n const host=c.req.header(\"host\")||\"\";if(host&&host!==\"canal8-control.val.run\")return c.redirect(\"https://canal8-control.val.run/\");\n c.header(\"Cache-Control\",\"no-store, max-age=0\");\n return c.html(`CANAL8.TV Control

CANAL8.TV

SIEMPRE INICIA IMPACTO

1 CLIP = 8S6 ESCENAS = 48SPLANILLA ADMIN INTERNA/c8 ACTIVO

ENCENDIENDO SEÑALPreparando sistema…

`);\n});\n\napp.onError((err)=>{console.error(err);return new Response(JSON.stringify({error:\"Error interno de CANAL8.TV\"}),{status:500,headers:{\"content-type\":\"application/json\"}})});\nexport default app.fetch;","children",[],[213],"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
(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 )\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",[],[222],"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 ``, 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\n

{e.title}