normal, sin depender de immutableFileUrl.\napp.get(\"/frontend/logo-wordmark.svg\", () => serveFile(\"/frontend/logo-wordmark.svg\"));\napp.get(\"/frontend/logo-icon.svg\", () => serveFile(\"/frontend/logo-icon.svg\"));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Pantalla de cocina: para dejar abierta en una tablet/celular en la cocina, mostrando los\n// pedidos abiertos en tiempo real (se refresca sola cada 5s). Es HTML+JS plano a propósito\n// (sin React) para que sea ligera y a prueba de fallos en cualquier dispositivo, por viejo que\n// sea, y para que nunca dependa de que la pantalla principal esté abierta en otro lado.\napp.get(\"/cocina\", (c) =>\n c.html(`\n\n\n\n\nSuchi House — Cocina\n\n\n\n

👨‍🍳 Suchi House — Cocina

\n\n\n\n`));\n\n// Manifest de PWA (para \"Agregar a pantalla de inicio\" en el celular). Se genera aquí\n// -no como archivo estático- para que el ícono siempre apunte a la versión actual del val.\napp.get(\"/manifest.json\", (c) =>\n c.json({\n name: \"Suchi House — Pedidos\",\n short_name: \"Suchi House\",\n description: \"Sistema de pedidos e inventario de Suchi House\",\n start_url: \"/\",\n scope: \"/\",\n display: \"standalone\",\n orientation: \"portrait\",\n background_color: \"#0d1f1e\",\n theme_color: \"#0d1f1e\",\n icons: [\n { src: immutableFileUrl(\"/frontend/logo-icon.svg\"), sizes: \"any\", type: \"image/svg+xml\", purpose: \"any maskable\" },\n ],\n }));\n\n/* ---------------- API ---------------- */\n\napp.get(\"/api/menu\", async (c) => {\n try {\n const menu = await getMenu();\n return c.json({ ok: true, menu });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.get(\"/api/insumos/alertas\", async (c) => {\n try {\n const alertas = await getAlertasInsumos();\n return c.json({ ok: true, alertas });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.get(\"/api/insumos/lista\", async (c) => {\n try {\n const insumos = await listarInsumosParaSeleccion();\n return c.json({ ok: true, insumos });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.post(\"/api/insumos/compra\", async (c) => {\n try {\n const { insumo, cantidad } = await c.req.json();\n const n = Number(cantidad);\n if (!insumo) return c.json({ ok: false, error: \"Falta el insumo\" }, 400);\n if (!isFinite(n) || n <= 0) return c.json({ ok: false, error: \"Cantidad inválida\" }, 400);\n const resultado = await registrarCompraInsumo(insumo, n);\n return c.json({ ok: true, ...resultado });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\n// Fija la cantidad exacta contada físicamente (a diferencia de /api/insumos/compra, que suma).\n// Usado por el flujo de captura inicial de inventario (\"de 5 en 5\") y para recuentos.\napp.post(\"/api/insumos/ajustar\", async (c) => {\n try {\n const { insumo, actual } = await c.req.json();\n const n = Number(actual);\n if (!insumo) return c.json({ ok: false, error: \"Falta el insumo\" }, 400);\n if (!isFinite(n) || n < 0) return c.json({ ok: false, error: \"Cantidad inválida\" }, 400);\n const resultado = await ajustarInsumoActual(insumo, n);\n return c.json({ ok: true, ...resultado });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.get(\"/api/pedidos\", async (c) => {\n try {\n const pedidos = await getPedidosAbiertos();\n return c.json({ ok: true, pedidos });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.post(\"/api/pedidos\", async (c) => {\n try {\n const { tipo, identificador } = await c.req.json();\n if (!tipo) return c.json({ ok: false, error: \"Falta tipo\" }, 400);\n const id = await crearPedido(tipo, identificador || \"\");\n return c.json({ ok: true, id });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.post(\"/api/pedidos/:id/items\", async (c) => {\n try {\n const idPedido = c.req.param(\"id\");\n const { categoria, producto, cantidad } = await c.req.json();\n if (!producto) return c.json({ ok: false, error: \"Falta producto\" }, 400);\n const info = await buscarPrecioProducto(producto);\n if (!info) return c.json({ ok: false, error: `Producto no encontrado en el Menú: ${producto}` }, 404);\n const pedidos = await agregarItem(idPedido, categoria || info.categoria, producto, Number(cantidad) || 1, info.precio);\n return c.json({ ok: true, pedidos });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.delete(\"/api/pedidos/items/:rowId\", async (c) => {\n try {\n const rowId = c.req.param(\"rowId\");\n const pedidos = await quitarItem(rowId);\n return c.json({ ok: true, pedidos });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.post(\"/api/pedidos/:id/envio\", async (c) => {\n try {\n const idPedido = c.req.param(\"id\");\n const { monto } = await c.req.json();\n const n = Number(monto);\n if (!isFinite(n) || n < 0) return c.json({ ok: false, error: \"Monto de envío inválido\" }, 400);\n const pedido = await obtenerPedido(idPedido);\n if (!pedido) return c.json({ ok: false, error: \"Pedido no encontrado\" }, 404);\n if (pedido.tipo !== \"Domicilio\") return c.json({ ok: false, error: \"El envío solo aplica a pedidos a Domicilio\" }, 400);\n const pedidos = await setEnvio(idPedido, n);\n return c.json({ ok: true, pedidos });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.post(\"/api/pedidos/:id/nota\", async (c) => {\n try {\n const idPedido = c.req.param(\"id\");\n const { nota } = await c.req.json();\n const pedidos = await setNota(idPedido, String(nota || \"\").slice(0, 300));\n return c.json({ ok: true, pedidos });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\n// Lo usa la pantalla de Cocina (botón de palomita) para marcar un pedido como terminado —\n// deja de mostrarse ahí, y la pantalla principal avisa (sonido + insignia) a quien va a cobrar.\napp.post(\"/api/pedidos/:id/listo\", async (c) => {\n try {\n const idPedido = c.req.param(\"id\");\n const body = await c.req.json().catch(() => ({}));\n const listo = body.listo === false ? false : true;\n const pedidos = await setListo(idPedido, listo);\n return c.json({ ok: true, pedidos });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\n// Lo usa la pantalla de Cocina (palomita por ítem) para marcar solo UNA parte del pedido como\n// hecha mientras el resto sigue pendiente. A propósito NO manda ninguna notificación a nadie —\n// es solo memoria visual local de esa pantalla, distinto del botón \"✅ Listo\" de todo el pedido.\napp.post(\"/api/pedidos/items/:rowId/hecho\", async (c) => {\n try {\n const rowId = c.req.param(\"rowId\");\n const body = await c.req.json().catch(() => ({}));\n const hecho = body.hecho === false ? false : true;\n const pedidos = await setItemHecho(rowId, hecho);\n return c.json({ ok: true, pedidos });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.delete(\"/api/pedidos/:id\", async (c) => {\n try {\n const idPedido = c.req.param(\"id\");\n const pedidos = await cancelarPedido(idPedido);\n return c.json({ ok: true, pedidos });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.post(\"/api/pedidos/:id/cobrar\", async (c) => {\n try {\n const idPedido = c.req.param(\"id\");\n const body = await c.req.json().catch(() => ({}));\n const metodoPago: string = body.metodoPago || \"\";\n const atendioQuien: string = body.atendioQuien || \"\";\n if (!metodoPago) return c.json({ ok: false, error: \"Falta indicar el método de pago.\" }, 400);\n\n const pedido = await obtenerPedido(idPedido);\n if (!pedido) return c.json({ ok: false, error: \"Pedido no encontrado\" }, 404);\n if (pedido.items.length === 0) return c.json({ ok: false, error: \"Este pedido no tiene productos todavía.\" }, 400);\n if (pedido.tipo === \"Domicilio\" && (pedido.envio === null || pedido.envio === undefined)) {\n return c.json({ ok: false, error: \"Falta agregar el envío antes de cobrar este pedido a domicilio.\" }, 400);\n }\n\n const itemsPedido = pedido.items.map((it) => ({\n categoria: it.categoria,\n producto: it.producto,\n cantidad: it.cantidad,\n precioUnitario: it.precioUnitario,\n subtotal: it.subtotal,\n }));\n\n // El envío de domicilio se agrega como una línea más del pedido (sin receta, así que\n // descontarInsumos no le busca insumos) para que fluya solo por el registro en el Sheet,\n // el ticket y el total, sin duplicar lógica.\n if (pedido.tipo === \"Domicilio\" && pedido.envio) {\n itemsPedido.push({\n categoria: \"Envio\",\n producto: \"Envío a domicilio\",\n cantidad: 1,\n precioUnitario: pedido.envio,\n subtotal: pedido.envio,\n });\n }\n\n const total = itemsPedido.reduce((s, it) => s + it.subtotal, 0);\n\n const ahora = new Date();\n const fecha = ahora.toLocaleDateString(\"es-MX\", { timeZone: \"America/Mexico_City\" });\n const hora = ahora.toLocaleTimeString(\"es-MX\", { timeZone: \"America/Mexico_City\", hour: \"2-digit\", minute: \"2-digit\" });\n\n // 1) Registrar en Pedidos (Sheet) — el pedido activo NO se borra localmente\n // hasta que esto tenga éxito, para no perderlo si falla la escritura.\n await registrarPedidoEnSheet(idPedido, pedido.tipo, pedido.identificador, itemsPedido, fecha, hora, metodoPago, atendioQuien);\n\n // 1b) Registrar también en \"Pedidos Resumen\" (una sola fila por pedido, fácil de leer) —\n // si esto falla no debe tumbar el cobro, ya que \"Pedidos\" (arriba) es la fuente de\n // verdad real y ya quedó guardada.\n try {\n await registrarResumenPedidoEnSheet(idPedido, pedido.tipo, pedido.identificador, itemsPedido, fecha, hora, total, metodoPago, atendioQuien);\n } catch (e) {\n console.error(\"No se pudo escribir en Pedidos Resumen (el pedido ya se registró bien en Pedidos):\", e);\n }\n\n // 1c) Refrescar la pestaña \"Ventas y Ganancias\" (Hoy/Semana/Mes) con este pedido ya incluido.\n // Igual que arriba: si falla, nunca debe tumbar el cobro — el pedido ya quedó guardado.\n try {\n await escribirResumenVentasYGanancias();\n } catch (e) {\n console.error(\"No se pudo actualizar la pestaña Ventas y Ganancias (el pedido ya se registró bien):\", e);\n }\n\n // Ya quedó registrado en el Sheet: ahora sí lo quitamos de \"activos\".\n await eliminarPedidoActivo(idPedido);\n\n // 2) Descontar insumos según Recetas y 3) enviar alerta por correo si algo quedó\n // BAJO (solo lo recién cruzado). El pedido YA quedó registrado en el Sheet arriba,\n // así que un problema aquí (Sheet lento, correo, etc.) nunca debe tumbar el cobro\n // ni impedir que aparezca la comanda/cuenta para imprimir.\n // El envío es una línea sin receta y sin empaque propio (no es un producto físico que se\n // sirva en un domo) — se excluye de descontarInsumos para no sumarle Domo/Estiquer de más.\n const itemsParaInsumos = itemsPedido.filter((it) => it.categoria !== \"Envio\");\n\n // El empaque (Domo + Estiquer / vaso-tapa de Ramen) aplica a todo lo que se va para llevar:\n // Domicilio y también \"Para llevar\" (mostrador). En Mesa/Barra se come en el local, sin empaque.\n const esParaLlevar = pedido.tipo === \"Domicilio\" || pedido.tipo === \"Para llevar\";\n\n let alertasNuevas: Awaited> = [];\n try {\n alertasNuevas = await descontarInsumos(itemsParaInsumos, esParaLlevar);\n if (alertasNuevas.length > 0) {\n await enviarAlertaInsumos(alertasNuevas);\n }\n } catch (e) {\n console.error(\"Error descontando insumos / enviando alerta (el pedido ya se registró bien):\", e);\n }\n\n // 4) Armar textos de Comanda y Cuenta\n const encabezado = pedido.tipo ? `${pedido.tipo}: ${pedido.identificador}\\n` : \"\";\n const notaLinea = pedido.nota ? `\\n📝 NOTA: ${pedido.nota}\\n` : \"\";\n const comanda = `COMANDA — Pedido #${idPedido}\\n${encabezado}${fecha} ${hora}${notaLinea}\\n------------------------\\n` +\n itemsPedido.map((it) => `${it.cantidad}x ${it.producto}`).join(\"\\n\");\n\n const cuenta = formatearTicket({ idPedido, pedido, itemsPedido, total, fecha, hora, metodoPago, atendioQuien });\n\n return c.json({ ok: true, comanda, cuenta, total, alertas: alertasNuevas });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\n/* ---------------- Historial, reimpresión de tickets y corte de caja ---------------- */\n\napp.get(\"/api/pedidos/historial\", async (c) => {\n try {\n const limit = Number(c.req.query(\"limit\")) || 50;\n const buscar = c.req.query(\"buscar\") || \"\";\n const pedidos = await listarHistorialPedidos(limit, buscar);\n return c.json({ ok: true, pedidos });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\n// IMPORTANTE: esta ruta va ANTES de \"/api/pedidos/:id/ticket\" — si no, Hono trataría \"ultimo\"\n// como si fuera el :id de la otra ruta y esta nunca se alcanzaría.\napp.get(\"/api/pedidos/ultimo/ticket\", async (c) => {\n try {\n const historial = await listarHistorialPedidos(1);\n if (historial.length === 0) {\n return c.json({ ok: false, error: \"Todavía no hay ningún pedido cobrado.\" }, 404);\n }\n const idPedido = historial[0].idPedido;\n const datos = await reconstruirTicketDesdeSheet(idPedido);\n if (!datos) return c.json({ ok: false, error: \"No se encontró el último pedido.\" }, 404);\n return c.json({ ok: true, ...datos });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.get(\"/api/pedidos/:id/ticket\", async (c) => {\n try {\n const idPedido = c.req.param(\"id\");\n const datos = await reconstruirTicketDesdeSheet(idPedido);\n if (!datos) return c.json({ ok: false, error: `No se encontró el pedido #${idPedido} (¿ya está cobrado?).` }, 404);\n return c.json({ ok: true, ...datos });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.get(\"/api/reportes/top-productos\", async (c) => {\n try {\n const dias = Number(c.req.query(\"dias\")) || 7;\n const reporte = await obtenerReporteProductos(dias);\n return c.json({ ok: true, reporte });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.get(\"/api/caja/fondo\", async (c) => {\n try {\n const fecha = c.req.query(\"fecha\") || fechaHoyMX();\n const monto = await obtenerFondoCaja(fecha);\n return c.json({ ok: true, fecha, monto });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.post(\"/api/caja/fondo\", async (c) => {\n try {\n const { fecha, monto } = await c.req.json();\n const n = Number(monto);\n if (!isFinite(n) || n < 0) return c.json({ ok: false, error: \"Monto de fondo de caja inválido\" }, 400);\n const fechaFinal = fecha || fechaHoyMX();\n await guardarFondoCaja(fechaFinal, n);\n return c.json({ ok: true, fecha: fechaFinal, monto: n });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.get(\"/api/corte\", async (c) => {\n try {\n const fecha = c.req.query(\"fecha\") || fechaHoyMX();\n const resumen = await calcularCorte(fecha);\n const texto = formatearCorte(resumen);\n return c.json({ ok: true, resumen, texto });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\n/* ---------------- Checador (entrada/salida de empleados) ---------------- */\n\napp.get(\"/api/asistencia/estado\", async (c) => {\n try {\n const estado = await obtenerEstadoAsistenciaHoy();\n return c.json({ ok: true, estado });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\napp.post(\"/api/asistencia/entrada\", async (c) => {\n try {\n const { empleado } = await c.req.json();\n if (!empleado) return c.json({ ok: false, error: \"Falta indicar el empleado.\" }, 400);\n await marcarEntrada(empleado);\n const estado = await obtenerEstadoAsistenciaHoy();\n return c.json({ ok: true, estado });\n } catch (e) {\n return c.json({ ok: false, error: String(e instanceof Error ? e.message : e) }, 400);\n }\n});\n\napp.post(\"/api/asistencia/salida\", async (c) => {\n try {\n const { empleado } = await c.req.json();\n if (!empleado) return c.json({ ok: false, error: \"Falta indicar el empleado.\" }, 400);\n await marcarSalida(empleado);\n const estado = await obtenerEstadoAsistenciaHoy();\n return c.json({ ok: true, estado });\n } catch (e) {\n return c.json({ ok: false, error: String(e instanceof Error ? e.message : e) }, 400);\n }\n});\n\n/* ---------------- Nómina (costo de personal, pestaña \"Nómina y Costo Operativo\") ---------------- */\n\n// Pago por hora vigente de cada empleado, tal como está capturado ahora mismo en la pestaña\n// \"Nómina\" del Sheet (Noel la puede editar a mano ahí, esto solo la lee).\napp.get(\"/api/nomina/pagos\", async (c) => {\n try {\n const pagos = await obtenerPagosPorHora();\n return c.json({ ok: true, pagos });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\n// Horas trabajadas y costo de nómina Hoy/Semana/Mes, calculados en el momento (sin escribir\n// nada en el Sheet) — útil para mostrarlo dentro de la app si algún día se quiere.\napp.get(\"/api/nomina/resumen\", async (c) => {\n try {\n const resumen = await calcularNominaPeriodo();\n return c.json({ ok: true, resumen });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\n// Refresca a mano la pestaña \"Nómina y Costo Operativo\" (normalmente se refresca sola al\n// marcar una salida en el Checador, pero este endpoint permite forzarlo, p. ej. después de\n// editar un pago por hora en la pestaña \"Nómina\").\napp.post(\"/api/nomina/refrescar\", async (c) => {\n try {\n await escribirNominaYCostoOperativo();\n const resumen = await calcularNominaPeriodo();\n return c.json({ ok: true, resumen });\n } catch (e) {\n return c.json({ ok: false, error: String(e) }, 500);\n }\n});\n\n/* ---------------- Ticket (para cliente, al cobrar) ---------------- */\n\n/** Reconstruye el ticket de un pedido YA COBRADO leyendo sus líneas directamente de la pestaña\n * Pedidos (no depende de la tabla local de pedidos activos, que ya se borró al cobrar). Se usa\n * para \"Reimprimir ticket\", tanto por ID como para el último cobrado. */\nasync function reconstruirTicketDesdeSheet(idPedido: string) {\n const pedido = await buscarPedidoCobradoEnSheet(idPedido);\n if (!pedido) return null;\n const cuenta = formatearTicket({\n idPedido: pedido.idPedido,\n pedido: { tipo: pedido.tipo, identificador: pedido.identificador },\n itemsPedido: pedido.itemsPedido,\n total: pedido.total,\n fecha: pedido.fecha,\n hora: pedido.hora,\n metodoPago: pedido.metodoPago,\n atendioQuien: pedido.atendioQuien,\n });\n return { idPedido: pedido.idPedido, cuenta, total: pedido.total };\n}\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[443],"abf87f74-f1ea-4d74-adbd-a5c36bf7e192","corte-diario.ts","2a54411e-a6ba-11f1-afb1-1607ee4eb77e",265,["D",1788345392931],"interval","// Corte de caja automático diario: corre solo cada noche a la hora de cierre y le manda a\n// Noel por correo el corte del día, sin que tenga que abrir la app ni darle clic a nada.\n// Hora por defecto: 11:00pm hora CDMX (mañana Noel confirma la hora real de cierre y se\n// ajusta el cron con write_interval_settings — ver el comentario al fondo de este archivo).\nimport { email } from \"https://esm.town/v/std/email\";\nimport { calcularCorte } from \"./backend/negocio.ts\";\nimport { fechaHoyMX, formatearCorte } from \"./backend/ticket.ts\";\n\nexport default async function (interval: Interval) {\n const fecha = fechaHoyMX();\n const resumen = await calcularCorte(fecha);\n const texto = formatearCorte(resumen);\n\n // Si no hubo ningún pedido cobrado hoy, igual mandamos el correo (útil para confirmar que\n // el sistema sigue corriendo, y para detectar rápido si algo se quedó sin registrar).\n const asunto = resumen.numPedidos > 0\n ? `Suchi House — Corte de caja: $${resumen.totalVentas.toFixed(2)} (${resumen.numPedidos} pedidos)`\n : `Suchi House — Corte de caja: sin ventas hoy`;\n\n await email({\n subject: asunto,\n text: texto,\n });\n\n console.log(`Corte diario enviado para ${fecha}: $${resumen.totalVentas.toFixed(2)}, ${resumen.numPedidos} pedidos.`);\n}\n\n// Cron actual: \"0 5 * * *\" (05:00 UTC = 23:00 / 11pm hora CDMX, sin considerar horario de\n// verano — Val Town no lo ajusta solo). Para cambiar la hora, usar write_interval_settings\n// sobre este archivo con el nuevo cron expression en UTC.\n",[],[453],"79f1e00e-3a4b-4bc6-b2af-20c3e74f03d3","README.md","01a058f0-c40d-736f-b689-dd29e61e5e85",["D",1788198568874],"# 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",[],[462],"a81540c7-19be-49b2-bf27-9d4307e3abd0","CHANGELOG.md","01a058f0-c40d-736f-b689-da60c822ec3b",["D",1788198568874],"# 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

History · favicon.svg