[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_321":322,"_323":324},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_109":91,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":-5,"_122":-5,"_123":25,"_124":125,"_126":60,"_127":-5,"_128":-5,"_129":130},"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",198,"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","01a02acc-a95e-76ab-8b59-54f16f6a4315","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { posterBySlug } from \"../posters.ts\";\n\ntype Workshop = {\n slug: string;\n title: string;\n dateLabel: string;\n timeLabel: string;\n price: number | null;\n capacity: number;\n deposit: number;\n free: boolean;\n accent: string;\n remaining: number;\n};\n\ntype Participant = { fullName: string; phone: string; age: string };\n\nconst accents: Record = {\n rose: \"bg-rose-100 border-rose-200\",\n amber: \"bg-amber-100 border-amber-200\",\n emerald: \"bg-emerald-100 border-emerald-200\",\n violet: \"bg-violet-100 border-violet-200\",\n orange: \"bg-orange-100 border-orange-200\",\n};\n\nfunction money(value: number) {\n return new Intl.NumberFormat(\"pt-BR\", { style: \"currency\", currency: \"BRL\", minimumFractionDigits: 0 }).format(value);\n}\n\nfunction trackAnalytics(eventType: \"site_visit\" | \"workshop_open\" | \"reservation_click\", workshopSlug?: string) {\n fetch(\"/api/analytics\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ eventType, workshopSlug }),\n keepalive: true,\n }).catch(() => {});\n}\n\nfunction blankParticipant(): Participant {\n return { fullName: \"\", phone: \"\", age: \"\" };\n}\n\nconst workshopContent: Record = {\n \"massas-escola-chefs\": {\n short: \"Uma oficina especial com a Escola Chefs para colocar a mão na massa e aprender fazendo.\",\n detail: \"Uma experiência prática com a Escola Chefs para aprender técnicas de preparo de massas em um encontro leve e gostoso no Orla. Você acompanha o processo, coloca a mão na massa e aproveita a oficina em boa companhia.\",\n },\n \"cinema-no-orla\": {\n highlight: \"Filme do mês: A Viagem de Chihiro\",\n short: \"Uma noite de cinema para desacelerar, pegar algo gostoso no Orla e assistir A Viagem de Chihiro com a gente.\",\n detail: \"Nosso Cinema no Orla é um encontro gratuito para curtir um filminho em boa companhia. Nesta edição, vamos assistir A Viagem de Chihiro, com luz baixa, comidinhas e bebidas do Orla disponíveis durante a sessão e aquele clima gostoso de todo mundo compartilhando a mesma história.\",\n },\n \"ceramica-fria\": {\n short: \"Uma tarde mão na massa para criar com cerâmica fria, brincar com formas e texturas e sair com uma peça feita por você.\",\n detail: \"Vamos explorar a cerâmica fria de um jeito leve e criativo: modelar, dar forma, criar detalhes e descobrir acabamentos para transformar a massa em uma peça com a sua cara. Não precisa ter experiência. A graça é experimentar, conversar, criar juntas e levar para casa algo que nasceu das suas mãos.\",\n },\n \"kokedama\": {\n short: \"Uma manhã verde para aprender a montar sua própria kokedama e levar uma planta suspensa feita por você para casa.\",\n detail: \"Vamos aprender o passo a passo da kokedama, preparando a planta, formando a esfera e fazendo a amarração até chegar à peça final. Uma oficina prática, tranquila e perfeita para quem gosta de plantas e de criar com as mãos.\",\n audienceNote: \"Esta experiência foi pensada para maiores de 18 anos. Não será possível receber crianças durante a atividade, mesmo acompanhadas por um responsável.\",\n },\n \"velas-aromaticas\": {\n short: \"Você vai criar sua própria vela aromática, conhecer o processo e montar uma peça cheirosa para levar para casa.\",\n detail: \"Uma oficina cheirosa do começo ao fim. Vamos passar pelo processo de montar uma vela aromática, da preparação do recipiente e do pavio à fragrância e à finalização. É uma atividade tranquila para criar sem pressa, conversar e sair com uma vela feita por você.\",\n },\n \"termina-aquela-coisa\": {\n highlight: \"Você só paga os materiais que usar\",\n short: \"Um encontro para retomar aquela peça ou projeto que ficou pela metade e finalmente terminar a coisa.\",\n detail: \"Sabe aquela peça ou projeto que começou, ficou pela metade e está só esperando um empurrãozinho para existir de verdade? Esse encontro é para retomar, continuar e finalmente terminar a coisa, com tempo e espaço para criar no Orla. A participação é gratuita: você só paga os materiais que usar durante o encontro.\",\n },\n \"paint-and-sip-aperol-spritz\": {\n short: \"Uma tarde de pintura sem pressão, com Aperol Spritz, conversa boa e espaço para criar do seu jeito.\",\n detail: \"O Paint & Sip é para pintar, brindar e se divertir, sem pressão e sem precisar saber desenhar. Vamos criar juntas em um clima leve, com orientação ao longo da atividade, Aperol Spritz e bastante liberdade para cada pintura ficar com personalidade própria. Dá para vir com amigas ou aparecer sozinha e conhecer gente nova.\",\n },\n};\n\nfunction contentFor(workshop: Workshop) {\n return workshopContent[workshop.slug] || { short: \"Uma experiência criativa para fazer com calma, aprender algo novo e aproveitar um momento gostoso no Orla.\", detail: \"Uma experiência criativa pensada para aprender fazendo, experimentar sem pressão e aproveitar um momento gostoso no Orla.\" };\n}\n\nfunction AudienceNotice({ text, compact = false }: { text: string; compact?: boolean }) {\n return (\n

\n 18+\n

Oficina exclusiva para adultos

{text}

\n );\n}\n\nfunction Header({ compact = false }: { compact?: boolean }) {\n return (\n

\n \n

orla

café & ateliê criativo

\n \n inscrições online\n

\n );\n}\n\nfunction ConfirmationPage() {\n const params = new URLSearchParams(window.location.search);\n const rid = params.get(\"rid\") || \"\";\n const retorno = params.get(\"retorno\") || \"\";\n const [data, setData] = useState(null);\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n if (!rid) return;\n let stopped = false;\n const load = async () => {\n try {\n const res = await fetch(`/api/registrations/${encodeURIComponent(rid)}`);\n const json = await res.json();\n if (!res.ok) throw new Error(json.error || \"Inscrição não encontrada\");\n if (!stopped) setData(json);\n } catch (e: any) {\n if (!stopped) setError(e.message || \"Não conseguimos consultar sua inscrição\");\n }\n };\n load();\n const timer = setInterval(load, 3500);\n return () => { stopped = true; clearInterval(timer); };\n }, [rid]);\n\n const status = data?.registration?.status;\n const confirmed = status === \"confirmed\";\n const cancelled = status === \"cancelled\" || retorno === \"failure\";\n\n return (\n

\n {error ? (\n <>\n

inscrição

Não conseguimos localizar sua reserva.

{error}

\n \n ) : !data ? (\n <>\n

só um instante

Consultando sua inscrição…

Estamos confirmando os dados com o sistema.

\n \n ) : confirmed ? (\n <>\n

confirmado

Sua vaga está garantida.

{data.workshop?.title} · {data.workshop?.dateLabel} às {data.workshop?.timeLabel}

{data.registration.quantity} {Number(data.registration.quantity) === 1 ? \"vaga confirmada\" : \"vagas confirmadas\"}.

\n {!data.workshop?.free &&

Sinal recebido: {money(Number(data.registration.deposit_total))}.

}\n

onde vai ser

Rua Pereira Passos 488 - Araçatuba

qualquer dúvida, estamos no WhatsApp

\n (18) 99808-8748\n

\n \n ) : cancelled ? (\n <>\n

não concluído

O pagamento não foi concluído.

Você pode voltar à lista de oficinas e tentar novamente enquanto ainda houver vagas.

\n \n ) : (\n <>\n

aguardando pagamento

Sua reserva está em processamento.

Assim que o Mercado Pago confirmar o pagamento, esta página muda automaticamente para confirmado.

{data.workshop?.title} · {data.workshop?.dateLabel} às {data.workshop?.timeLabel}

\n \n )}\n voltar ao menu de oficinas\n

\n );\n}\n\nfunction AdminPage() {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(\"\");\n const [message, setMessage] = useState(\"\");\n const [cancellingId, setCancellingId] = useState(\"\");\n\n const load = async () => {\n setLoading(true);\n setError(\"\");\n try {\n const res = await fetch(\"/api/admin/registrations\");\n if (res.status === 401) {\n window.location.href = \"/auth/login\";\n return;\n }\n const json = await res.json();\n if (!res.ok) throw new Error(json.error || \"Não conseguimos abrir o painel\");\n setData(json);\n } catch (e: any) {\n setData(null);\n setError(e.message || \"Não conseguimos abrir o painel\");\n } finally {\n setLoading(false);\n }\n };\n\n useEffect(() => {\n load();\n }, []);\n\n const cancelRegistration = async (registration: any) => {\n const names = registration.participants.map((p: any) => p.fullName).join(\", \");\n const paidNote = registration.hasPayment ? \"\\n\\nEssa inscrição tem pagamento registrado. Liberar a vaga NÃO fará estorno no Mercado Pago.\" : \"\";\n if (!window.confirm(`Cancelar a inscrição de ${names} e liberar ${registration.quantity} ${registration.quantity === 1 ? \"vaga\" : \"vagas\"}?${paidNote}`)) return;\n\n setCancellingId(registration.id);\n setError(\"\");\n setMessage(\"\");\n try {\n const res = await fetch(`/api/admin/registrations/${encodeURIComponent(registration.id)}/cancel`, {\n method: \"POST\",\n });\n const json = await res.json();\n if (!res.ok) throw new Error(json.error || \"Não conseguimos cancelar a inscrição\");\n setMessage(json.notionWarning || `Inscrição cancelada. ${registration.quantity === 1 ? \"A vaga voltou\" : \"As vagas voltaram\"} a ficar disponível no site.`);\n await load();\n } catch (e: any) {\n setError(e.message || \"Não conseguimos cancelar a inscrição\");\n } finally {\n setCancellingId(\"\");\n }\n };\n\n const statusLabel: Record = {\n confirmed: \"confirmada\",\n held: \"aguardando pagamento\",\n cancelled: \"cancelada\",\n };\n\n if (!data) {\n return (\n

área administrativa

Inscrições do Orla

{loading ? \"Carregando o painel…\" : \"Não conseguimos abrir o painel.\"}

\n {error &&

{error}

}\n {!loading && }\n Voltar ao site\n

\n );\n }\n\n return (\n

área administrativa

Inscrições & vagas

\n \n

\n\n {message &&

{message}

}\n {error &&

{error}

}\n\n

visitas

{data.analytics?.siteVisits || 0}

oficinas abertas

{data.analytics?.totalWorkshopOpens || 0}

cliques em reservar

{data.analytics?.totalReservationClicks || 0}

\n\n

\n {data.workshops.map((workshop: any) => {\n const registrations = data.registrations.filter((r: any) => r.workshopSlug === workshop.slug);\n const active = registrations.filter((r: any) => r.status !== \"cancelled\");\n const cancelled = registrations.filter((r: any) => r.status === \"cancelled\");\n const waiting = (data.waitlist || []).filter((r: any) => r.workshopSlug === workshop.slug);\n const metrics = data.analytics?.workshops?.[workshop.slug] || { opens: 0, reservationClicks: 0 };\n const interestRate = metrics.opens > 0 ? Math.min(100, Math.round((metrics.reservationClicks / metrics.opens) * 100)) : 0;\n return (\n

{workshop.title}

{workshop.dateLabel} · {workshop.timeLabel}

\n {metrics.opens} aberturas\n {metrics.reservationClicks} cliques em reservar\n {metrics.opens > 0 && {interestRate}% avançaram}\n

vagas

{workshop.remaining} livres · {workshop.used}/{workshop.capacity} ocupadas

\n\n

\n {!active.length ?

Nenhuma inscrição ativa ainda.

: (\n

\n {active.map((registration: any) => (\n

\n {statusLabel[registration.status] || registration.status}\n {registration.quantity} {registration.quantity === 1 ? \"vaga\" : \"vagas\"}\n

\n {registration.participants.map((person: any) => (\n

{person.fullName}

\n {person.phone}\n {person.age} anos\n

\n ))}\n

\n {registration.hasPayment &&

Pagamento registrado. Cancelar aqui libera a vaga, mas não faz estorno.

}\n \n

\n ))}\n

\n )}\n\n {cancelled.length > 0 && (\n

Ver {cancelled.length} {cancelled.length === 1 ? \"inscrição cancelada\" : \"inscrições canceladas\"}

\n {cancelled.map((registration: any) =>

{registration.participants.map((p: any) => p.fullName).join(\", \")} · {registration.quantity} {registration.quantity === 1 ? \"vaga\" : \"vagas\"}

)}\n

\n )}\n\n {waiting.length > 0 && (\n

Lista de espera · {waiting.length}

\n {waiting.map((person: any, index: number) => (\n \n {index + 1}º da lista\n {person.phone}\n \n ))}\n

\n )}\n

\n );\n })}\n

\n\n

Ao cancelar, a vaga volta imediatamente para o site e a pessoa é removida do campo Alunas daquela oficina no Notion. O cadastro dela continua na Lista de Clientes.

\n Voltar ao site público\n

\n );\n}\n\nfunction WaitlistForm({ workshop, compact = false }: { workshop: Workshop; compact?: boolean }) {\n const [phone, setPhone] = useState(\"\");\n const [sending, setSending] = useState(false);\n const [message, setMessage] = useState(\"\");\n const [error, setError] = useState(\"\");\n\n const submit = async (event: React.FormEvent) => {\n event.preventDefault();\n setSending(true);\n setMessage(\"\");\n setError(\"\");\n try {\n const res = await fetch(\"/api/waitlist\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ workshopSlug: workshop.slug, phone }),\n });\n const json = await res.json();\n if (!res.ok) throw new Error(json.error || \"Não conseguimos adicionar à lista de espera\");\n setMessage(json.message || \"Pronto! Você entrou na lista de espera.\");\n } catch (e: any) {\n setError(e.message || \"Não conseguimos adicionar à lista de espera\");\n } finally {\n setSending(false);\n }\n };\n\n return (\n \n );\n}\n\ntype WorkshopPalette = { shell: string; pill: string; button: string; stripe: string };\ntype PreviewOrigin = { top: number; left: number; width: number; height: number };\n\nconst fallbackPalette: Record = {\n rose: { shell: \"bg-pink-50 border-pink-200\", pill: \"bg-pink-200 text-pink-900\", button: \"bg-pink-600 hover:bg-pink-500\", stripe: \"bg-pink-400\" },\n amber: { shell: \"bg-yellow-50 border-yellow-200\", pill: \"bg-yellow-200 text-amber-900\", button: \"bg-amber-600 hover:bg-amber-500\", stripe: \"bg-yellow-400\" },\n emerald: { shell: \"bg-lime-50 border-lime-200\", pill: \"bg-lime-200 text-emerald-900\", button: \"bg-emerald-600 hover:bg-emerald-500\", stripe: \"bg-lime-400\" },\n violet: { shell: \"bg-fuchsia-50 border-fuchsia-200\", pill: \"bg-fuchsia-200 text-violet-900\", button: \"bg-violet-600 hover:bg-violet-500\", stripe: \"bg-fuchsia-400\" },\n orange: { shell: \"bg-orange-50 border-orange-200\", pill: \"bg-orange-200 text-orange-900\", button: \"bg-orange-600 hover:bg-orange-500\", stripe: \"bg-orange-400\" },\n};\n\nconst posterPalette: Record = {\n \"massas-escola-chefs\": { shell: \"bg-[#f7faff] border-[#2f67d8]\", pill: \"bg-[#e1ebff] text-[#174ea6]\", button: \"bg-[#1f5fd1] hover:bg-[#174ea6]\", stripe: \"bg-[#ec4899]\" },\n \"ceramica-fria\": { shell: \"bg-[#fff4e8] border-[#e9741a]\", pill: \"bg-[#f7d7bb] text-[#a94809]\", button: \"bg-[#dc6815] hover:bg-[#bd5410]\", stripe: \"bg-[#e9741a]\" },\n \"cinema-no-orla\": { shell: \"bg-[#fff2d2] border-[#a71222]\", pill: \"bg-[#b41426] text-white\", button: \"bg-[#1c1715] hover:bg-black\", stripe: \"bg-[#e8a31a]\" },\n \"kokedama\": { shell: \"bg-[#f6f0df] border-[#4e6b3f]\", pill: \"bg-[#dce6cf] text-[#38522f]\", button: \"bg-[#4f6b40] hover:bg-[#3e5732]\", stripe: \"bg-[#7aa665]\" },\n \"velas-aromaticas\": { shell: \"bg-[#fbf5ef] border-[#8a6c5f]\", pill: \"bg-[#eadfd7] text-[#6f5146]\", button: \"bg-[#806257] hover:bg-[#684e45]\", stripe: \"bg-[#c8ad86]\" },\n \"termina-aquela-coisa\": { shell: \"bg-[#fbf3ec] border-[#ff6654]\", pill: \"bg-[#e9e3f1] text-[#71658c]\", button: \"bg-[#ff5f4d] hover:bg-[#e64d3e]\", stripe: \"bg-[#8f84a8]\" },\n \"paint-and-sip-aperol-spritz\": { shell: \"bg-[#ffe453] border-[#241d1b]\", pill: \"bg-[#ff9b2f] text-[#241d1b]\", button: \"bg-[#241d1b] hover:bg-black\", stripe: \"bg-[#ff922b]\" },\n};\n\nfunction paletteForWorkshop(workshop: Workshop) {\n return posterPalette[workshop.slug] || fallbackPalette[workshop.accent] || fallbackPalette.rose;\n}\n\nfunction availabilityLabel(workshop: Workshop) {\n if (workshop.remaining <= 0) return \"Esgotado\";\n if (workshop.remaining <= 3) return `Últimas ${workshop.remaining} ${workshop.remaining === 1 ? \"vaga\" : \"vagas\"}`;\n if (workshop.remaining <= 6) return `Só ${workshop.remaining} vagas restantes`;\n\n const reserved = Math.max(0, workshop.capacity - workshop.remaining);\n if (reserved > 0) {\n return `${reserved} ${reserved === 1 ? \"pessoa já reservou\" : \"pessoas já reservaram\"} · ${workshop.remaining} restantes`;\n }\n return `Turma limitada a ${workshop.capacity} pessoas`;\n}\n\nfunction WorkshopCard({ workshop, onOpen, expanded, onToggle }: { workshop: Workshop; onOpen: () => void; expanded: boolean; onToggle: () => void }) {\n const soldOut = workshop.remaining <= 0;\n const content = contentFor(workshop);\n const poster = posterBySlug[workshop.slug];\n const p = paletteForWorkshop(workshop);\n const articleRef = useRef(null);\n const mobilePosterRef = useRef(null);\n const previousPosterRect = useRef<{ top: number; left: number; width: number; height: number } | null>(null);\n\n useLayoutEffect(() => {\n const posterButton = mobilePosterRef.current;\n const previous = previousPosterRect.current;\n if (!posterButton || !previous) return;\n\n const next = posterButton.getBoundingClientRect();\n const translateX = previous.left - next.left;\n const translateY = previous.top - next.top;\n const scaleX = previous.width / next.width;\n const scaleY = previous.height / next.height;\n\n posterButton.style.transition = \"none\";\n posterButton.style.transformOrigin = \"top left\";\n posterButton.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;\n posterButton.style.willChange = \"transform\";\n\n const firstFrame = requestAnimationFrame(() => {\n const secondFrame = requestAnimationFrame(() => {\n posterButton.style.transition = \"transform 480ms cubic-bezier(0.22, 1, 0.36, 1)\";\n posterButton.style.transform = \"translate(0, 0) scale(1, 1)\";\n });\n return () => cancelAnimationFrame(secondFrame);\n });\n\n const cleanup = window.setTimeout(() => {\n posterButton.style.transition = \"\";\n posterButton.style.transform = \"\";\n posterButton.style.transformOrigin = \"\";\n posterButton.style.willChange = \"\";\n previousPosterRect.current = null;\n }, 540);\n\n return () => {\n cancelAnimationFrame(firstFrame);\n window.clearTimeout(cleanup);\n };\n }, [expanded]);\n\n useEffect(() => {\n if (!expanded || window.innerWidth >= 640) return;\n\n const alignToTop = (behavior: ScrollBehavior) => {\n const article = articleRef.current;\n if (!article) return;\n const top = window.scrollY + article.getBoundingClientRect().top - 6;\n window.scrollTo({ top, behavior });\n };\n\n const firstFrame = requestAnimationFrame(() => {\n alignToTop(\"smooth\");\n });\n const finalAlign = window.setTimeout(() => alignToTop(\"auto\"), 520);\n\n return () => {\n cancelAnimationFrame(firstFrame);\n window.clearTimeout(finalAlign);\n };\n }, [expanded]);\n\n const toggleExpanded = () => {\n const rect = mobilePosterRef.current?.getBoundingClientRect();\n if (rect) previousPosterRect.current = { top: rect.top, left: rect.left, width: rect.width, height: rect.height };\n onToggle();\n };\n\n return (\n

\n {poster ? (\n <>\n \n \n \n {expanded ? \"Fechar ↑\" : \"Mais infos ↓\"}\n \n \n { if (!soldOut) onOpen(); }}\n disabled={soldOut}\n className={`group relative hidden w-full overflow-hidden bg-white text-left sm:block ${soldOut ? \"cursor-default\" : \"cursor-pointer\"}`}\n aria-label={soldOut ? `Cartaz de ${workshop.title}` : `Abrir detalhes de ${workshop.title}`}\n >\n \n \n \n ) : (\n

\n )}\n \n

\n {workshop.dateLabel}\n {workshop.timeLabel}\n

{workshop.title}

\n {content.highlight &&

{content.highlight}

}\n \n {content.audienceNote && }\n

{workshop.free ? (workshop.slug === \"termina-aquela-coisa\" ? \"Evento gratuito · você só paga os materiais que usar\" : \"Encontro gratuito\") : workshop.price != null ? `${money(workshop.price)} por pessoa` : `Sinal de ${money(workshop.deposit)} por pessoa`}

sinal

{workshop.free ? \"grátis\" : money(workshop.deposit)}

vagas

{availabilityLabel(workshop)}

\n {soldOut ? (\n

Esgotado

\n \n

\n ) : (\n \n )}\n

\n );\n}\n\nfunction MobileWorkshopModal({ workshop, origin, onClose, onDetails }: { workshop: Workshop; origin: PreviewOrigin; onClose: () => void; onDetails: () => void }) {\n const soldOut = workshop.remaining <= 0;\n const content = contentFor(workshop);\n const poster = posterBySlug[workshop.slug];\n const p = paletteForWorkshop(workshop);\n const cardRef = useRef(null);\n const imageFrameRef = useRef(null);\n const movingImageRef = useRef(null);\n const detailsRef = useRef(null);\n const overlayRef = useRef(null);\n\n const compactHeight = window.innerHeight < 720;\n const showDescription = !compactHeight && !soldOut;\n const posterRatio = 1240 / 1748;\n const detailReserve = soldOut ? 300 : compactHeight ? 225 : 270;\n const maxWidthFromHeight = Math.max(205, (window.innerHeight - detailReserve - 18) * posterRatio);\n const modalWidth = Math.min(window.innerWidth - 24, 350, maxWidthFromHeight);\n\n useLayoutEffect(() => {\n const card = cardRef.current;\n const frame = imageFrameRef.current;\n const mover = movingImageRef.current;\n const details = detailsRef.current;\n const overlay = overlayRef.current;\n if (!card || !frame || !mover || !poster) return;\n\n const maxHeight = window.innerHeight - 16;\n for (let attempt = 0; attempt < 3; attempt += 1) {\n const rect = card.getBoundingClientRect();\n if (rect.height <= maxHeight) break;\n const nextWidth = Math.max(190, rect.width - (rect.height - maxHeight) * posterRatio * 1.15);\n card.style.width = `${nextWidth}px`;\n }\n\n const target = frame.getBoundingClientRect();\n card.style.opacity = \"0\";\n frame.style.opacity = \"0\";\n if (details) {\n details.style.opacity = \"0\";\n details.style.transform = \"translateY(7px)\";\n }\n if (overlay) overlay.style.opacity = \"0\";\n\n mover.style.left = `${origin.left}px`;\n mover.style.top = `${origin.top}px`;\n mover.style.width = `${origin.width}px`;\n mover.style.height = `${origin.height}px`;\n mover.style.borderRadius = \"22px\";\n mover.style.opacity = \"1\";\n\n const first = requestAnimationFrame(() => {\n const second = requestAnimationFrame(() => {\n if (overlay) {\n overlay.style.transition = \"opacity 220ms ease\";\n overlay.style.opacity = \"1\";\n }\n\n mover.style.transition = \"left 460ms cubic-bezier(0.22,1,0.36,1), top 460ms cubic-bezier(0.22,1,0.36,1), width 460ms cubic-bezier(0.22,1,0.36,1), height 460ms cubic-bezier(0.22,1,0.36,1), border-radius 460ms cubic-bezier(0.22,1,0.36,1), opacity 120ms ease 360ms\";\n mover.style.left = `${target.left}px`;\n mover.style.top = `${target.top}px`;\n mover.style.width = `${target.width}px`;\n mover.style.height = `${target.height}px`;\n mover.style.borderRadius = \"0px\";\n mover.style.opacity = \"0\";\n\n card.style.transition = \"opacity 180ms ease 250ms\";\n card.style.opacity = \"1\";\n frame.style.transition = \"opacity 150ms ease 340ms\";\n frame.style.opacity = \"1\";\n if (details) {\n details.style.transition = \"opacity 220ms ease 285ms, transform 300ms cubic-bezier(0.22,1,0.36,1) 270ms\";\n details.style.opacity = \"1\";\n details.style.transform = \"translateY(0)\";\n }\n });\n return () => cancelAnimationFrame(second);\n });\n return () => cancelAnimationFrame(first);\n }, [origin, poster, workshop.slug]);\n\n useEffect(() => {\n const previousOverflow = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n const closeOnEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") onClose();\n };\n window.addEventListener(\"keydown\", closeOnEscape);\n return () => {\n document.body.style.overflow = previousOverflow;\n window.removeEventListener(\"keydown\", closeOnEscape);\n };\n }, [onClose]);\n\n return (\n

\n {poster && (\n

\n $\"\"$ \n

\n )}\n\n event.stopPropagation()}\n style={{ width: `${modalWidth}px` }}\n className={`relative flex flex-col overflow-hidden rounded-[28px] border ${p.shell} shadow-[0_24px_80px_rgba(0,0,0,0.32)]`}\n >\n \n ×\n \n\n {poster && (\n

\n )}\n\n

\n {workshop.dateLabel}\n {workshop.timeLabel}\n

\n\n

{workshop.title}

\n {content.highlight &&

{content.highlight}

}\n {showDescription &&

{content.short}

}\n {content.audienceNote && }\n

\n\n

sinal

{workshop.free ? \"grátis\" : money(workshop.deposit)}

vagas

{availabilityLabel(workshop)}

\n\n {soldOut ? (\n

Esgotado

\n \n

\n ) : (\n \n )}\n

\n \n

\n );\n}\n\nfunction WorkshopDetail({ workshop, onBack }: { workshop: Workshop; onBack: () => void }) {\n const content = contentFor(workshop);\n const soldOut = workshop.remaining <= 0;\n const [quantity, setQuantity] = useState(1);\n const [participants, setParticipants] = useState([blankParticipant()]);\n const [sending, setSending] = useState(false);\n const [error, setError] = useState(\"\");\n const submitLock = useRef(false);\n const idempotencyKeyRef = useRef(null);\n\n const remainingBalance = workshop.price == null ? null : Math.max(0, (workshop.price - workshop.deposit) * quantity);\n const depositTotal = workshop.deposit * quantity;\n\n const resetIdempotencyKey = () => {\n if (!submitLock.current) idempotencyKeyRef.current = null;\n };\n\n const changeQuantity = (next: number) => {\n resetIdempotencyKey();\n setQuantity(next);\n setParticipants((current) => {\n const copy = current.slice(0, next);\n while (copy.length < next) copy.push(blankParticipant());\n return copy;\n });\n };\n\n const updateParticipant = (index: number, key: keyof Participant, value: string) => {\n resetIdempotencyKey();\n setParticipants((current) => current.map((p, i) => i === index ? { ...p, [key]: value } : p));\n };\n\n const submit = async (event: React.FormEvent) => {\n event.preventDefault();\n if (submitLock.current) return;\n\n submitLock.current = true;\n const idempotencyKey = idempotencyKeyRef.current || crypto.randomUUID();\n idempotencyKeyRef.current = idempotencyKey;\n\n trackAnalytics(\"reservation_click\", workshop.slug);\n setError(\"\");\n setSending(true);\n try {\n const res = await fetch(\"/api/register\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Idempotency-Key\": idempotencyKey,\n },\n body: JSON.stringify({ workshopSlug: workshop.slug, participants }),\n });\n const json = await res.json();\n if (!res.ok) throw new Error(json.error || \"Não conseguimos fazer a inscrição\");\n if (json.free) window.location.href = json.confirmationUrl;\n else window.location.href = json.checkoutUrl;\n } catch (e: any) {\n submitLock.current = false;\n setError(e.message || \"Não conseguimos fazer a inscrição\");\n setSending(false);\n }\n };\n\n return (\n

\n \n\n

{workshop.dateLabel} · {workshop.timeLabel}

{workshop.title}

\n {content.highlight &&

{content.highlight}

}\n

{content.detail}

\n {content.audienceNote && }\n

\n {workshop.free ? (workshop.slug === \"termina-aquela-coisa\" ? \"Gratuito · você só paga os materiais que usar\" : \"Gratuito\") : workshop.price != null ? `${money(workshop.price)} por pessoa` : `Sinal de ${money(workshop.deposit)} por pessoa`}\n {availabilityLabel(workshop)}\n

\n\n

\n {soldOut ? (\n

Esgotado

Entrar para a lista de espera

Deixe seu WhatsApp com DDD e a gente entra em contato se surgir uma vaga.

\n \n

\n ) : (\n <>\n

Faça sua inscrição

\n {workshop.free ? (\n

{workshop.slug === \"termina-aquela-coisa\" ? \"A participação é gratuita. Você só paga os materiais que usar durante o encontro. Preencha os dados abaixo e a inscrição é confirmada na hora.\" : \"A participação é gratuita. Preencha os dados abaixo e a inscrição é confirmada na hora.\"}

\n ) : (\n

Para garantir a vaga, cobramos um sinal de {money(workshop.deposit)} por pessoa. O pagamento é feito com segurança pelo Mercado Pago.

\n )}\n

\n\n

\n \n Quantas vagas você quer?\n \n \n\n

\n {participants.map((participant, index) => (\n

\n Pessoa {index + 1}\n

\n \n Nome completo\n updateParticipant(index, \"fullName\", e.target.value)} className=\"w-full rounded-xl border border-stone-300 bg-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-stone-700\" placeholder=\"Nome e sobrenome\" />\n \n \n WhatsApp com DDD\n updateParticipant(index, \"phone\", e.target.value)} className=\"w-full rounded-xl border border-stone-300 bg-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-stone-700\" placeholder=\"(18) 99999-9999\" />\n \n \n Idade\n updateParticipant(index, \"age\", e.target.value)} className=\"w-full rounded-xl border border-stone-300 bg-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-stone-700\" placeholder=\"Idade\" />\n \n

\n ))}\n

\n\n {!workshop.free && (\n

\n {workshop.price != null &&

Valor da atividade{money(workshop.price * quantity)}

}\n

Sinal agora{money(depositTotal)}

\n {remainingBalance != null && remainingBalance > 0 &&

Restante no dia do evento{money(remainingBalance)}

Você paga o restante no dia do evento, lá mesmo.

Em caso de desistência com menos de 48 horas de antecedência ou não comparecimento, o valor do sinal não poderá ser devolvido.

}\n {remainingBalance === 0 &&

Esse pagamento já quita o valor integral da atividade.

}\n

\n )}\n\n {error &&

{error}

}\n\n

\n \n {!workshop.free &&

A vaga fica reservada durante o processo de pagamento. Pix e cartão são processados pelo Mercado Pago.

}\n

\n \n )}\n

\n );\n}\n\nexport function App() {\n const [workshops, setWorkshops] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n const [selectedSlug, setSelectedSlug] = useState(null);\n const [expandedSlug, setExpandedSlug] = useState(null);\n const [previewState, setPreviewState] = useState<{ slug: string; origin: PreviewOrigin } | null>(null);\n\n useEffect(() => {\n if ([\"/confirmacao\", \"/admin\"].includes(window.location.pathname)) return;\n try {\n if (sessionStorage.getItem(\"orla-site-visit-counted\") === \"1\") return;\n sessionStorage.setItem(\"orla-site-visit-counted\", \"1\");\n } catch {\n // Se o navegador bloquear o armazenamento, ainda contamos a visita.\n }\n trackAnalytics(\"site_visit\");\n }, []);\n\n useEffect(() => {\n if ([\"/confirmacao\", \"/admin\"].includes(window.location.pathname)) return;\n\n const loadWorkshops = () =>\n fetch(`/api/workshops?fresh=${Date.now()}`, { cache: \"no-store\" })\n .then(async (r) => {\n const j = await r.json();\n if (!r.ok) throw new Error(j.error || \"Erro ao carregar oficinas\");\n setWorkshops(j.workshops || []);\n setError(\"\");\n })\n .catch((e) => setError(e.message || \"Erro ao carregar oficinas\"))\n .finally(() => setLoading(false));\n\n loadWorkshops();\n window.addEventListener(\"focus\", loadWorkshops);\n const refreshTimer = window.setInterval(loadWorkshops, 60_000);\n\n return () => {\n window.removeEventListener(\"focus\", loadWorkshops);\n window.clearInterval(refreshTimer);\n };\n }, []);\n\n useEffect(() => {\n if ([\"/confirmacao\", \"/admin\"].includes(window.location.pathname)) return;\n\n const syncFromUrl = () => {\n const slug = new URLSearchParams(window.location.search).get(\"oficina\");\n setSelectedSlug(slug);\n window.scrollTo(0, 0);\n };\n\n syncFromUrl();\n window.addEventListener(\"popstate\", syncFromUrl);\n return () => window.removeEventListener(\"popstate\", syncFromUrl);\n }, []);\n\n const openWorkshop = (slug: string, countOpen = true) => {\n if (countOpen) trackAnalytics(\"workshop_open\", slug);\n window.history.pushState({ orlaWorkshop: true }, \"\", `/?oficina=${encodeURIComponent(slug)}`);\n setSelectedSlug(slug);\n window.scrollTo(0, 0);\n };\n\n const backToMenu = () => {\n if (window.history.state?.orlaWorkshop) {\n window.history.back();\n return;\n }\n window.history.replaceState({}, \"\", \"/\");\n setSelectedSlug(null);\n window.scrollTo(0, 0);\n };\n\n const selected = useMemo(() => workshops.find((w) => w.slug === selectedSlug) || null, [workshops, selectedSlug]);\n const preview = useMemo(() => workshops.find((w) => w.slug === previewState?.slug) || null, [workshops, previewState?.slug]);\n\n if (window.location.pathname === \"/confirmacao\") return ;\n if (window.location.pathname === \"/admin\") return ;\n if (selected) return ;\n\n return (\n

\n setembro 2026\n

Oficinas & encontros

\n\n

como funciona

1. Escolha a oficina.
2. Selecione quantas vagas quer reservar.
3. Preencha os dados e confirme.

\n\n

\n\n {loading ?

Carregando atividades…

: error ?

{error}

: (\n

\n {workshops.map((workshop, index) => {\n const isLastOdd = workshops.length % 2 === 1 && index === workshops.length - 1;\n const isExpanded = expandedSlug === workshop.slug;\n return (\n

\n openWorkshop(workshop.slug, !isExpanded)}\n expanded={isExpanded}\n onToggle={() => setExpandedSlug((current) => {\n const willOpen = current !== workshop.slug;\n if (willOpen) trackAnalytics(\"workshop_open\", workshop.slug);\n return willOpen ? workshop.slug : null;\n })}\n />\n

\n );\n })}\n

\n )}\n\n {preview && previewState && (\n setPreviewState(null)}\n onDetails={() => {\n const slug = preview.slug;\n setPreviewState(null);\n openWorkshop(slug);\n }}\n />\n )}\n\n \n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { posterBySlug } from \"../posters.ts\";\n\ntype Workshop = {\n slug: string;\n title: string;\n dateLabel: string;\n timeLabel: string;\n price: number | null;\n capacity: number;\n deposit: number;\n free: boolean;\n accent: string;\n remaining: number;\n};\n\ntype Participant = { fullName: string; phone: string; age: string };\n\nconst accents: Record = {\n rose: \"bg-rose-100 border-rose-200\",\n amber: \"bg-amber-100 border-amber-200\",\n emerald: \"bg-emerald-100 border-emerald-200\",\n violet: \"bg-violet-100 border-violet-200\",\n orange: \"bg-orange-100 border-orange-200\",\n};\n\nfunction money(value: number) {\n return new Intl.NumberFormat(\"pt-BR\", { style: \"currency\", currency: \"BRL\", minimumFractionDigits: 0 }).format(value);\n}\n\nfunction trackAnalytics(eventType: \"site_visit\" | \"workshop_open\" | \"reservation_click\", workshopSlug?: string) {\n fetch(\"/api/analytics\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ eventType, workshopSlug }),\n keepalive: true,\n }).catch(() => {});\n}\n\nfunction blankParticipant(): Participant {\n return { fullName: \"\", phone: \"\", age: \"\" };\n}\n\nconst workshopContent: Record = {\n \"massas-escola-chefs\": {\n short: \"Uma oficina especial com a Escola Chefs para colocar a mão na massa e aprender fazendo.\",\n detail: \"Uma experiência prática com a Escola Chefs para aprender técnicas de preparo de massas em um encontro leve e gostoso no Orla. Você acompanha o processo, coloca a mão na massa e aproveita a oficina em boa companhia.\",\n },\n \"cinema-no-orla\": {\n highlight: \"Filme do mês: A Viagem de Chihiro\",\n short: \"Uma noite de cinema para desacelerar, pegar algo gostoso no Orla e assistir A Viagem de Chihiro com a gente.\",\n detail: \"Nosso Cinema no Orla é um encontro gratuito para curtir um filminho em boa companhia. Nesta edição, vamos assistir A Viagem de Chihiro, com luz baixa, comidinhas e bebidas do Orla disponíveis durante a sessão e aquele clima gostoso de todo mundo compartilhando a mesma história.\",\n },\n \"ceramica-fria\": {\n short: \"Uma tarde mão na massa para criar com cerâmica fria, brincar com formas e texturas e sair com uma peça feita por você.\",\n detail: \"Vamos explorar a cerâmica fria de um jeito leve e criativo: modelar, dar forma, criar detalhes e descobrir acabamentos para transformar a massa em uma peça com a sua cara. Não precisa ter experiência. A graça é experimentar, conversar, criar juntas e levar para casa algo que nasceu das suas mãos.\",\n },\n \"kokedama\": {\n short: \"Uma manhã verde para aprender a montar sua própria kokedama e levar uma planta suspensa feita por você para casa.\",\n detail: \"Vamos aprender o passo a passo da kokedama, preparando a planta, formando a esfera e fazendo a amarração até chegar à peça final. Uma oficina prática, tranquila e perfeita para quem gosta de plantas e de criar com as mãos.\",\n audienceNote: \"Esta experiência foi pensada para maiores de 18 anos. Não será possível receber crianças durante a atividade, mesmo acompanhadas por um responsável.\",\n },\n \"velas-aromaticas\": {\n short: \"Você vai criar sua própria vela aromática, conhecer o processo e montar uma peça cheirosa para levar para casa.\",\n detail: \"Uma oficina cheirosa do começo ao fim. Vamos passar pelo processo de montar uma vela aromática, da preparação do recipiente e do pavio à fragrância e à finalização. É uma atividade tranquila para criar sem pressa, conversar e sair com uma vela feita por você.\",\n },\n \"termina-aquela-coisa\": {\n highlight: \"Você só paga os materiais que usar\",\n short: \"Um encontro para retomar aquela peça ou projeto que ficou pela metade e finalmente terminar a coisa.\",\n detail: \"Sabe aquela peça ou projeto que começou, ficou pela metade e está só esperando um empurrãozinho para existir de verdade? Esse encontro é para retomar, continuar e finalmente terminar a coisa, com tempo e espaço para criar no Orla. A participação é gratuita: você só paga os materiais que usar durante o encontro.\",\n },\n \"paint-and-sip-aperol-spritz\": {\n short: \"Uma tarde de pintura sem pressão, com Aperol Spritz, conversa boa e espaço para criar do seu jeito.\",\n detail: \"O Paint & Sip é para pintar, brindar e se divertir, sem pressão e sem precisar saber desenhar. Vamos criar juntas em um clima leve, com orientação ao longo da atividade, Aperol Spritz e bastante liberdade para cada pintura ficar com personalidade própria. Dá para vir com amigas ou aparecer sozinha e conhecer gente nova.\",\n },\n};\n\nfunction contentFor(workshop: Workshop) {\n return workshopContent[workshop.slug] || { short: \"Uma experiência criativa para fazer com calma, aprender algo novo e aproveitar um momento gostoso no Orla.\", detail: \"Uma experiência criativa pensada para aprender fazendo, experimentar sem pressão e aproveitar um momento gostoso no Orla.\" };\n}\n\nfunction AudienceNotice({ text, compact = false }: { text: string; compact?: boolean }) {\n return (\n

\n 18+\n

Oficina exclusiva para adultos

{text}

\n );\n}\n\nfunction Header({ compact = false }: { compact?: boolean }) {\n return (\n

\n \n

orla

café & ateliê criativo

\n \n inscrições online\n

\n {error ? (\n <>\n

inscrição

Não conseguimos localizar sua reserva.

{error}

\n \n ) : !data ? (\n <>\n

só um instante

Consultando sua inscrição…

Estamos confirmando os dados com o sistema.

\n \n ) : confirmed ? (\n <>\n

confirmado

Sua vaga está garantida.

{data.workshop?.title} · {data.workshop?.dateLabel} às {data.workshop?.timeLabel}

{data.registration.quantity} {Number(data.registration.quantity) === 1 ? \"vaga confirmada\" : \"vagas confirmadas\"}.

\n {!data.workshop?.free &&

Sinal recebido: {money(Number(data.registration.deposit_total))}.

}\n

onde vai ser

Rua Pereira Passos 488 - Araçatuba

qualquer dúvida, estamos no WhatsApp

\n (18) 99808-8748\n

\n \n ) : cancelled ? (\n <>\n

não concluído

O pagamento não foi concluído.

Você pode voltar à lista de oficinas e tentar novamente enquanto ainda houver vagas.

\n \n ) : (\n <>\n

aguardando pagamento

Sua reserva está em processamento.

Assim que o Mercado Pago confirmar o pagamento, esta página muda automaticamente para confirmado.

{data.workshop?.title} · {data.workshop?.dateLabel} às {data.workshop?.timeLabel}

\n \n )}\n voltar ao menu de oficinas\n

área administrativa

Inscrições do Orla

{loading ? \"Carregando o painel…\" : \"Não conseguimos abrir o painel.\"}

\n {error &&

{error}

}\n {!loading && }\n Voltar ao site\n

\n );\n }\n\n return (\n

área administrativa

Inscrições & vagas

\n \n

\n\n {message &&

{message}

}\n {error &&

{error}

}\n\n

visitas

{data.analytics?.siteVisits || 0}

oficinas abertas

{data.analytics?.totalWorkshopOpens || 0}

cliques em reservar

{data.analytics?.totalReservationClicks || 0}

\n\n

\n {data.workshops.map((workshop: any) => {\n const registrations = data.registrations.filter((r: any) => r.workshopSlug === workshop.slug);\n const active = registrations.filter((r: any) => r.status !== \"cancelled\");\n const cancelled = registrations.filter((r: any) => r.status === \"cancelled\");\n const waiting = (data.waitlist || []).filter((r: any) => r.workshopSlug === workshop.slug);\n const metrics = data.analytics?.workshops?.[workshop.slug] || { opens: 0, reservationClicks: 0 };\n const activePeople = active.reduce((total: number, registration: any) => total + registration.participants.length, 0);\n\n return (\n

{workshop.title}

{workshop.dateLabel} · {workshop.timeLabel}

\n {activePeople} inscritos\n {workshop.remaining} livres\n {workshop.used}/{workshop.capacity} ocupadas\n {waiting.length > 0 && {waiting.length} na espera}\n {metrics.opens} aberturas · {metrics.reservationClicks} cliques\n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n {!active.length ? (\n \n \n \n ) : active.map((registration: any) => (\n registration.participants.map((person: any, personIndex: number) => (\n \n \n \n \n {personIndex === 0 && (\n <>\n \n \n \n \n )}\n \n ))\n ))}\n \n

Nome	WhatsApp	Idade	Status	Vagas	Ação
Nenhuma inscrição ativa.
{person.fullName}	\n {person.phone}\n	{person.age}	\n {statusLabel[registration.status] \|\| registration.status}\n {registration.hasPayment && pagamento registrado }\n	{registration.quantity}	\n \n

\n\n {waiting.length > 0 && (\n

Lista de espera

\n {waiting.map((person: any, index: number) => (\n {index + 1}.{person.phone}\n ))}\n

\n )}\n\n {cancelled.length > 0 && (\n

{cancelled.length} {cancelled.length === 1 ? \"inscrição cancelada\" : \"inscrições canceladas\"}

\n {cancelled.map((registration: any) => (\n

{registration.participants.map((p: any) => p.fullName).join(\", \")} · {registration.quantity} {registration.quantity === 1 ? \"vaga\" : \"vagas\"}

\n ))}\n

\n )}\n

\n );\n })}\n

\n\n

Ao cancelar, a vaga volta imediatamente para o site e a pessoa é removida do campo Alunas daquela oficina no Notion. O cadastro dela continua na Lista de Clientes.

\n Voltar ao site público\n

\n )}\n \n

\n {workshop.dateLabel}\n {workshop.timeLabel}\n

{workshop.title}

\n {content.highlight &&

{content.highlight}

}\n \n {content.audienceNote && }\n

sinal

{workshop.free ? \"grátis\" : money(workshop.deposit)}

vagas

{availabilityLabel(workshop)}

\n {soldOut ? (\n

Esgotado

\n \n

\n ) : (\n \n )}\n

\n {poster && (\n

\n $\"\"$ \n

\n )}\n\n

\n {workshop.dateLabel}\n {workshop.timeLabel}\n

\n\n

{workshop.title}

\n {content.highlight &&

{content.highlight}

}\n {showDescription &&

{content.short}

}\n {content.audienceNote && }\n

\n\n

sinal

{workshop.free ? \"grátis\" : money(workshop.deposit)}

vagas

{availabilityLabel(workshop)}

\n\n {soldOut ? (\n

Esgotado

\n \n

\n ) : (\n \n )}\n

\n \n

\n \n\n

{workshop.dateLabel} · {workshop.timeLabel}

{workshop.title}

\n {content.highlight &&

{content.highlight}

}\n

{content.detail}

\n {content.audienceNote && }\n

\n\n

\n {soldOut ? (\n

Esgotado

Entrar para a lista de espera

Deixe seu WhatsApp com DDD e a gente entra em contato se surgir uma vaga.

\n \n

\n ) : (\n <>\n

Faça sua inscrição

\n {workshop.free ? (\n

\n ) : (\n

Para garantir a vaga, cobramos um sinal de {money(workshop.deposit)} por pessoa. O pagamento é feito com segurança pelo Mercado Pago.

\n )}\n

\n\n

\n \n Quantas vagas você quer?\n \n \n\n

\n {participants.map((participant, index) => (\n

\n Pessoa {index + 1}\n

\n ))}\n

\n\n {!workshop.free && (\n

\n {workshop.price != null &&

Valor da atividade{money(workshop.price * quantity)}

}\n

Sinal agora{money(depositTotal)}

\n {remainingBalance != null && remainingBalance > 0 &&

Restante no dia do evento{money(remainingBalance)}

Você paga o restante no dia do evento, lá mesmo.

Em caso de desistência com menos de 48 horas de antecedência ou não comparecimento, o valor do sinal não poderá ser devolvido.

}\n {remainingBalance === 0 &&

Esse pagamento já quita o valor integral da atividade.

}\n

\n )}\n\n {error &&

{error}

}\n\n

\n \n {!workshop.free &&

A vaga fica reservada durante o processo de pagamento. Pix e cartão são processados pelo Mercado Pago.

}\n

\n \n )}\n

\n setembro 2026\n

Oficinas & encontros

\n\n

como funciona

1. Escolha a oficina.
2. Selecione quantas vagas quer reservar.
3. Preencha os dados e confirme.

\n\n

\n\n {loading ?

Carregando atividades…

: error ?

{error}

: (\n

\n {workshops.map((workshop, index) => {\n const isLastOdd = workshops.length % 2 === 1 && index === workshops.length - 1;\n const isExpanded = expandedSlug === workshop.slug;\n return (\n

\n );\n })}\n

\n )}\n\n {preview && previewState && (\n setPreviewState(null)}\n onDetails={() => {\n const slug = preview.slug;\n setPreviewState(null);\n openWorkshop(slug);\n }}\n />\n )}\n\n \n

\n );\n}\n","createdAt",["D",1788914096784],"branchVersion","branchId","05e71e58-1395-42b1-8fcf-00672a61eb8d","id","d6106505-7e1d-478f-9216-7e0c65b1fc67","orla-oficinas",["D",1787424450826],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Inscrições, vagas e pagamentos das oficinas do Orla","imageUrl","71b54de0-4546-11f0-a91c-91c3b3e067f4","pinnedFileId","01a02acc-a95e-76ab-8b59-79d86333e254","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","9707df8e-feca-440e-9e78-9ea218562f2b","tursoName","d61065057e1d478f92167e0c65b1fc67","tursoHostname","d61065057e1d478f92167e0c65b1fc67-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789521640046],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":56,"_105":106,"_107":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",223,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","nathaliageneroso","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ5SEU0dmJLbGdLdzJUYTlDdTluYmk3ODFCaiJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":316,"_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":317,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":318,"_85":319,"_87":320,"_89":25},"tree",[198,206,207,212,213,214,215],"files",[198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215],"counts",{"_187":64,"_188":152,"_189":64,"_190":191,"_192":193},"contents",[131,132,133,134,135,136,137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":182,"_32":183,"_30":184,"_140":-5,"_42":43,"_41":152,"_142":60,"_39":185,"_13":64,"_34":174,"_36":-5,"_24":25,"_147":-5,"_27":186},{"_44":176,"_32":177,"_30":178,"_140":-5,"_42":43,"_41":179,"_142":60,"_39":180,"_13":64,"_34":174,"_36":-5,"_24":25,"_147":-5,"_27":181},{"_44":170,"_32":171,"_30":172,"_140":-5,"_42":43,"_41":161,"_142":60,"_39":173,"_13":64,"_34":174,"_36":-5,"_24":25,"_147":-5,"_27":175},{"_44":164,"_32":165,"_30":166,"_140":-5,"_42":43,"_41":152,"_142":60,"_39":167,"_13":64,"_34":20,"_36":168,"_24":25,"_147":-5,"_27":169},{"_44":156,"_32":157,"_30":158,"_140":-5,"_42":43,"_41":159,"_142":60,"_39":160,"_13":161,"_34":20,"_36":162,"_24":25,"_147":-5,"_27":163},{"_44":149,"_32":150,"_30":151,"_140":-5,"_42":43,"_41":152,"_142":60,"_39":153,"_13":64,"_34":20,"_36":154,"_24":25,"_147":-5,"_27":155},{"_44":138,"_32":139,"_30":58,"_140":-5,"_42":43,"_41":141,"_142":25,"_39":143,"_13":144,"_34":145,"_36":146,"_24":25,"_147":46,"_27":148},"b96a8b38-e32a-44e5-a5c2-701b0d44227b","index.ts","parentId",196,"latest",["D",1788913611352],49,"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 { getOAuthUserData, oauthMiddleware } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\nconst PUBLIC_ORIGIN = \"https://orla-oficinas.val.run\";\nconst ADMIN_USER_ID = \"71b54de0-4546-11f0-a91c-91c3b3e067f4\";\nconst HOLD_MINUTES = 45;\n\ntype Workshop = {\n slug: string;\n title: string;\n date: string;\n dateLabel: string;\n timeLabel: string;\n price: number | null;\n capacity: number;\n deposit: number;\n free: boolean;\n notionPageId: string;\n accent: string;\n};\n\nconst WORKSHOPS: Workshop[] = [\n {\n slug: \"massas-escola-chefs\",\n title: \"Massas com a Escola Chefs\",\n date: \"2026-09-11T18:30:00-03:00\",\n dateLabel: \"11 de setembro\",\n timeLabel: \"18h30\",\n price: 250,\n capacity: 12,\n deposit: 60,\n free: false,\n notionPageId: \"3c7a8360-c2ba-80e1-af17-e0782e8ac5dc\",\n accent: \"rose\",\n },\n {\n slug: \"ceramica-fria\",\n title: \"Cerâmica Fria\",\n date: \"2026-09-12T14:00:00-03:00\",\n dateLabel: \"12 de setembro\",\n timeLabel: \"14h\",\n price: 180,\n capacity: 12,\n deposit: 60,\n free: false,\n notionPageId: \"3c4a8360-c2ba-8029-92d1-e9bdb5861d05\",\n accent: \"amber\",\n },\n {\n slug: \"cinema-no-orla\",\n title: \"Cinema no Orla\",\n date: \"2026-09-18T18:30:00-03:00\",\n dateLabel: \"18 de setembro\",\n timeLabel: \"18h30\",\n price: 0,\n capacity: 17,\n deposit: 0,\n free: true,\n notionPageId: \"3c4a8360-c2ba-809e-b6d4-da34374ed686\",\n accent: \"rose\",\n },\n {\n slug: \"kokedama\",\n title: \"Kokedama\",\n date: \"2026-09-19T09:30:00-03:00\",\n dateLabel: \"19 de setembro\",\n timeLabel: \"9h30\",\n price: 210,\n capacity: 12,\n deposit: 60,\n free: false,\n notionPageId: \"3c7a8360-c2ba-803e-8e3e-e04501ac2069\",\n accent: \"emerald\",\n },\n {\n slug: \"velas-aromaticas\",\n title: \"Velas Aromáticas\",\n date: \"2026-09-19T15:00:00-03:00\",\n dateLabel: \"19 de setembro\",\n timeLabel: \"15h\",\n price: 210,\n capacity: 12,\n deposit: 60,\n free: false,\n notionPageId: \"3c4a8360-c2ba-807e-bcf4-e2a461ce1d56\",\n accent: \"violet\",\n },\n {\n slug: \"termina-aquela-coisa\",\n title: \"Termina aquela coisa!\",\n date: \"2026-09-23T15:00:00-03:00\",\n dateLabel: \"23 de setembro\",\n timeLabel: \"15h às 17h\",\n price: 0,\n capacity: 12,\n deposit: 0,\n free: true,\n notionPageId: \"3cba8360-c2ba-805a-b19e-e935f295671f\",\n accent: \"amber\",\n },\n {\n slug: \"paint-and-sip-aperol-spritz\",\n title: \"Paint & Sip — Aperol Spritz\",\n date: \"2026-09-26T15:00:00-03:00\",\n dateLabel: \"26 de setembro\",\n timeLabel: \"15h\",\n price: 230,\n capacity: 20,\n deposit: 60,\n free: false,\n notionPageId: \"3c4a8360-c2ba-802a-8c3f-e830b490c67a\",\n accent: \"orange\",\n },\n];\n\nasync function ensureSchema() {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS registrations (\n id TEXT PRIMARY KEY,\n workshop_slug TEXT NOT NULL,\n quantity INTEGER NOT NULL,\n status TEXT NOT NULL,\n created_at TEXT NOT NULL,\n expires_at TEXT,\n deposit_total REAL NOT NULL DEFAULT 0,\n mp_preference_id TEXT,\n mp_payment_id TEXT,\n notion_synced INTEGER NOT NULL DEFAULT 0\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS participants (\n id TEXT PRIMARY KEY,\n registration_id TEXT NOT NULL,\n full_name TEXT NOT NULL,\n phone TEXT NOT NULL,\n age INTEGER NOT NULL,\n created_at TEXT NOT NULL\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS notion_participant_links (\n participant_id TEXT PRIMARY KEY,\n notion_page_id TEXT NOT NULL,\n created_at TEXT NOT NULL\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS registration_checkout_urls (\n registration_id TEXT PRIMARY KEY,\n checkout_url TEXT NOT NULL,\n created_at TEXT NOT NULL\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS waitlist (\n id TEXT PRIMARY KEY,\n workshop_slug TEXT NOT NULL,\n phone TEXT NOT NULL,\n created_at TEXT NOT NULL\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS analytics_counters (\n event_type TEXT NOT NULL,\n workshop_slug TEXT NOT NULL DEFAULT '',\n count INTEGER NOT NULL DEFAULT 0,\n updated_at TEXT NOT NULL,\n PRIMARY KEY (event_type, workshop_slug)\n )`,\n },\n { sql: \"CREATE INDEX IF NOT EXISTS idx_reg_workshop ON registrations(workshop_slug, status, expires_at)\" },\n { sql: \"CREATE INDEX IF NOT EXISTS idx_participants_reg ON participants(registration_id)\" },\n { sql: \"CREATE UNIQUE INDEX IF NOT EXISTS idx_waitlist_workshop_phone ON waitlist(workshop_slug, phone)\" },\n ]);\n}\n\nfunction workshopBySlug(slug: string) {\n return WORKSHOPS.find((w) => w.slug === slug);\n}\n\nasync function usedSeats(slug: string) {\n const now = new Date().toISOString();\n const result = await sqlite.execute({\n sql: `SELECT COALESCE(SUM(quantity), 0) AS used\n FROM registrations\n WHERE workshop_slug = ?\n AND (status = 'confirmed' OR (status = 'held' AND expires_at > ?))`,\n args: [slug, now],\n });\n return Number(result.rows[0]?.used ?? 0);\n}\n\nfunction publicWorkshop(w: Workshop, used: number) {\n return {\n ...w,\n remaining: Math.max(0, w.capacity - used),\n notionPageId: undefined,\n };\n}\n\nfunction normalizePhone(value: unknown) {\n return String(value ?? \"\").replace(/\\D/g, \"\");\n}\n\nasync function notifyNewRegistration(workshop: Workshop, quantity: number) {\n const topic = Deno.env.get(\"NTFY_TOPIC\");\n if (!topic) return;\n try {\n await fetch(\"https://ntfy.sh\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n topic,\n title: \"Nova inscrição no Orla\",\n message: `${workshop.title} · ${quantity} ${quantity === 1 ? \"vaga confirmada\" : \"vagas confirmadas\"}`,\n priority: 4,\n click: `${PUBLIC_ORIGIN}/admin`,\n }),\n });\n } catch (error) {\n console.error(\"Notification error\", error);\n }\n}\n\nconst NOTION_VERSION = \"2026-03-11\";\nconst NOTION_CLIENTS_DATA_SOURCE_ID = \"306a8360-c2ba-8054-8f11-000b8c438310\";\n\nasync function notionRequest(path: string, init: RequestInit = {}) {\n const token = Deno.env.get(\"NOTION_API_KEY\");\n if (!token) throw new Error(\"Notion não configurado\");\n const response = await fetch(`https://api.notion.com${path}`, {\n ...init,\n headers: {\n Authorization: `Bearer ${token}`,\n \"Notion-Version\": NOTION_VERSION,\n \"Content-Type\": \"application/json\",\n ...(init.headers || {}),\n },\n });\n const data = await response.json();\n if (!response.ok) {\n console.error(\"Notion API error\", response.status, JSON.stringify(data));\n throw new Error(data?.message || `Notion respondeu ${response.status}`);\n }\n return data;\n}\n\nasync function syncRegistrationToNotion(registrationId: string) {\n const token = Deno.env.get(\"NOTION_API_KEY\");\n if (!token) return false;\n\n const regResult = await sqlite.execute({\n sql: \"SELECT id, workshop_slug, status, notion_synced FROM registrations WHERE id = ?\",\n args: [registrationId],\n });\n if (!regResult.rows.length) return false;\n const reg = regResult.rows[0] as Record;\n if (String(reg.status) !== \"confirmed\") return false;\n if (Number(reg.notion_synced) === 1) return true;\n\n const workshop = workshopBySlug(String(reg.workshop_slug));\n if (!workshop) throw new Error(\"Oficina não encontrada para sincronizar com o Notion\");\n\n const participantsResult = await sqlite.execute({\n sql: \"SELECT id, full_name, phone, age FROM participants WHERE registration_id = ? ORDER BY created_at ASC\",\n args: [registrationId],\n });\n\n const notionParticipantIds: string[] = [];\n for (const row of participantsResult.rows as Record[]) {\n const participantId = String(row.id);\n const existingLink = await sqlite.execute({\n sql: \"SELECT notion_page_id FROM notion_participant_links WHERE participant_id = ?\",\n args: [participantId],\n });\n\n let notionPageId = existingLink.rows.length ? String(existingLink.rows[0]?.notion_page_id) : \"\";\n if (!notionPageId) {\n const created = await notionRequest(\"/v1/pages\", {\n method: \"POST\",\n body: JSON.stringify({\n parent: { type: \"data_source_id\", data_source_id: NOTION_CLIENTS_DATA_SOURCE_ID },\n properties: {\n Name: {\n title: [{ type: \"text\", text: { content: String(row.full_name) } }],\n },\n Text: {\n rich_text: [{\n type: \"text\",\n text: { content: `WhatsApp: ${String(row.phone)} · Idade: ${String(row.age)}` },\n }],\n },\n },\n }),\n });\n notionPageId = String(created.id);\n await sqlite.execute({\n sql: \"INSERT OR REPLACE INTO notion_participant_links (participant_id, notion_page_id, created_at) VALUES (?, ?, ?)\",\n args: [participantId, notionPageId, new Date().toISOString()],\n });\n }\n notionParticipantIds.push(notionPageId);\n }\n\n const eventPage = await notionRequest(`/v1/pages/${workshop.notionPageId}`);\n const currentRelation = Array.isArray(eventPage?.properties?.Alunas?.relation)\n ? eventPage.properties.Alunas.relation.map((item: any) => String(item.id))\n : [];\n const mergedIds = Array.from(new Set([...currentRelation, ...notionParticipantIds]));\n\n await notionRequest(`/v1/pages/${workshop.notionPageId}`, {\n method: \"PATCH\",\n body: JSON.stringify({\n properties: {\n Alunas: {\n relation: mergedIds.map((id) => ({ id })),\n },\n },\n }),\n });\n\n await sqlite.execute({\n sql: \"UPDATE registrations SET notion_synced = 1 WHERE id = ?\",\n args: [registrationId],\n });\n return true;\n}\n\nasync function adminAuthorized(c: any) {\n const session = await getOAuthUserData(c.req.raw);\n return session?.user?.id === ADMIN_USER_ID;\n}\n\nasync function removeRegistrationFromNotion(registrationId: string) {\n const regResult = await sqlite.execute({\n sql: \"SELECT workshop_slug FROM registrations WHERE id = ?\",\n args: [registrationId],\n });\n if (!regResult.rows.length) return;\n const workshop = workshopBySlug(String(regResult.rows[0]?.workshop_slug));\n if (!workshop || !Deno.env.get(\"NOTION_API_KEY\")) return;\n\n const linked = await sqlite.execute({\n sql: `SELECT l.notion_page_id\n FROM participants p\n JOIN notion_participant_links l ON l.participant_id = p.id\n WHERE p.registration_id = ?`,\n args: [registrationId],\n });\n const removeIds = new Set(linked.rows.map((row: any) => String(row.notion_page_id)));\n if (!removeIds.size) return;\n\n const eventPage = await notionRequest(`/v1/pages/${workshop.notionPageId}`);\n const currentRelation = Array.isArray(eventPage?.properties?.Alunas?.relation)\n ? eventPage.properties.Alunas.relation.map((item: any) => String(item.id))\n : [];\n const remainingIds = currentRelation.filter((id: string) => !removeIds.has(id));\n\n await notionRequest(`/v1/pages/${workshop.notionPageId}`, {\n method: \"PATCH\",\n body: JSON.stringify({\n properties: {\n Alunas: { relation: remainingIds.map((id: string) => ({ id })) },\n },\n }),\n });\n}\n\nasync function mercadoPagoPreference(\n registrationId: string,\n workshop: Workshop,\n quantity: number,\n participants: Array<{ fullName: string; phone: string; age: number }>,\n) {\n const token = Deno.env.get(\"MERCADOPAGO_ACCESS_TOKEN\");\n if (!token) throw new Error(\"Mercado Pago não configurado\");\n\n const participantNames = participants.map((person) => person.fullName);\n const participantLabel = participantNames.join(\" + \");\n const itemTitle = `${participantLabel} — ${workshop.title}`.slice(0, 256);\n const itemDescription =\n `${quantity} ${quantity === 1 ? \"vaga\" : \"vagas\"} · Participantes: ${participantNames.join(\" | \")}`.slice(0, 256);\n const paymentExpires = new Date(Date.now() + 30 * 60 * 1000).toISOString();\n const response = await fetch(\"https://api.mercadopago.com/checkout/preferences\", {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${token}`,\n \"Content-Type\": \"application/json\",\n \"X-Idempotency-Key\": registrationId,\n },\n body: JSON.stringify({\n items: [\n {\n id: workshop.slug,\n title: itemTitle,\n description: itemDescription,\n currency_id: \"BRL\",\n quantity,\n unit_price: workshop.deposit,\n },\n ],\n external_reference: registrationId,\n notification_url: `${PUBLIC_ORIGIN}/api/mercadopago/webhook`,\n back_urls: {\n success: `${PUBLIC_ORIGIN}/confirmacao?rid=${registrationId}&retorno=success`,\n pending: `${PUBLIC_ORIGIN}/confirmacao?rid=${registrationId}&retorno=pending`,\n failure: `${PUBLIC_ORIGIN}/confirmacao?rid=${registrationId}&retorno=failure`,\n },\n auto_return: \"approved\",\n expires: true,\n expiration_date_to: paymentExpires,\n metadata: {\n registration_id: registrationId,\n workshop_slug: workshop.slug,\n participant_names: participantNames.join(\" | \"),\n participant_count: quantity,\n },\n }),\n });\n\n const data = await response.json();\n if (!response.ok || !data?.init_point) {\n console.error(\"Mercado Pago preference error\", response.status, JSON.stringify(data));\n throw new Error(\"Não foi possível iniciar o pagamento\");\n }\n return { preferenceId: String(data.id), checkoutUrl: String(data.init_point) };\n}\n\nasync function fetchPayment(paymentId: string) {\n const token = Deno.env.get(\"MERCADOPAGO_ACCESS_TOKEN\");\n if (!token) throw new Error(\"Mercado Pago não configurado\");\n const response = await fetch(`https://api.mercadopago.com/v1/payments/${encodeURIComponent(paymentId)}`, {\n headers: { Authorization: `Bearer ${token}` },\n });\n if (!response.ok) throw new Error(`Pagamento ${paymentId} não encontrado`);\n return await response.json();\n}\n\nfunction participantSignatures(participants: Array<{ fullName: string; phone: string; age: number }>) {\n return participants\n .map((person) => `${person.fullName}\\u0000${person.phone}\\u0000${person.age}`)\n .sort();\n}\n\nasync function replayExistingRegistration(\n c: any,\n registrationId: string,\n workshop: Workshop,\n cleanParticipants: Array<{ fullName: string; phone: string; age: number }>,\n) {\n let row: Record | null = null;\n let existingParticipants: Array<{ fullName: string; phone: string; age: number }> = [];\n let checkoutUrl = \"\";\n\n for (let attempt = 0; attempt < 40; attempt += 1) {\n const regResult = await sqlite.execute({\n sql: \"SELECT id, workshop_slug, quantity, status, expires_at FROM registrations WHERE id = ?\",\n args: [registrationId],\n });\n if (!regResult.rows.length) return null;\n row = regResult.rows[0] as Record;\n\n const participantResult = await sqlite.execute({\n sql: \"SELECT full_name, phone, age FROM participants WHERE registration_id = ?\",\n args: [registrationId],\n });\n existingParticipants = (participantResult.rows as Record[]).map((person) => ({\n fullName: String(person.full_name),\n phone: String(person.phone),\n age: Number(person.age),\n }));\n\n if (!workshop.free) {\n const checkoutResult = await sqlite.execute({\n sql: \"SELECT checkout_url FROM registration_checkout_urls WHERE registration_id = ?\",\n args: [registrationId],\n });\n checkoutUrl = checkoutResult.rows.length ? String(checkoutResult.rows[0]?.checkout_url || \"\") : \"\";\n }\n\n const participantsReady = existingParticipants.length === Number(row.quantity);\n const responseReady = workshop.free || Boolean(checkoutUrl) || String(row.status) === \"cancelled\";\n if (participantsReady && responseReady) break;\n await new Promise((resolve) => setTimeout(resolve, 100));\n }\n\n if (!row) return null;\n if (String(row.workshop_slug) !== workshop.slug || Number(row.quantity) !== cleanParticipants.length) {\n return c.json({ error: \"Esta chave de envio já foi usada para outra inscrição.\" }, 409);\n }\n\n const originalPeople = participantSignatures(existingParticipants);\n const requestedPeople = participantSignatures(cleanParticipants);\n if (originalPeople.length !== requestedPeople.length || originalPeople.some((value, index) => value !== requestedPeople[index])) {\n return c.json({ error: \"Esta chave de envio já foi usada com dados diferentes.\" }, 409);\n }\n\n c.header(\"X-Idempotent-Replay\", \"true\");\n\n if (String(row.status) === \"cancelled\") {\n return c.json({ error: \"Esta tentativa de inscrição já foi cancelada. Atualize a página e tente novamente.\" }, 409);\n }\n\n if (workshop.free) {\n return c.json({\n ok: true,\n free: true,\n registrationId,\n confirmationUrl: `${PUBLIC_ORIGIN}/confirmacao?rid=${registrationId}&retorno=free`,\n replayed: true,\n });\n }\n\n if (!checkoutUrl) {\n return c.json({ error: \"Sua inscrição já está sendo processada. Tente novamente em alguns segundos.\" }, 409);\n }\n\n return c.json({\n ok: true,\n free: false,\n registrationId,\n checkoutUrl,\n expiresAt: row.expires_at ? String(row.expires_at) : null,\n replayed: true,\n });\n}\n\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/confirmacao\", (c) => c.html(Root()));\napp.get(\"/admin\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.redirect(\"/auth/login\");\n if (session.user.id !== ADMIN_USER_ID) return c.text(\"Acesso restrito à conta administrativa do Orla.\", 403);\n return c.html(Root());\n});\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.post(\"/api/analytics\", async (c) => {\n await ensureSchema();\n const body = await c.req.json().catch(() => ({}));\n const eventType = String(body?.eventType || \"\");\n const allowedEvents = new Set([\"site_visit\", \"workshop_open\", \"reservation_click\"]);\n if (!allowedEvents.has(eventType)) return c.json({ error: \"Evento inválido\" }, 400);\n\n const workshopSlug = eventType === \"site_visit\" ? \"\" : String(body?.workshopSlug || \"\");\n if (eventType !== \"site_visit\" && !workshopBySlug(workshopSlug)) {\n return c.json({ error: \"Oficina inválida\" }, 400);\n }\n\n await sqlite.execute({\n sql: `INSERT INTO analytics_counters (event_type, workshop_slug, count, updated_at)\n VALUES (?, ?, 1, ?)\n ON CONFLICT(event_type, workshop_slug)\n DO UPDATE SET count = count + 1, updated_at = excluded.updated_at`,\n args: [eventType, workshopSlug, new Date().toISOString()],\n });\n return c.body(null, 204);\n});\n\napp.get(\"/api/admin/registrations\", async (c) => {\n if (!(await adminAuthorized(c))) return c.json({ error: \"Acesso administrativo não autorizado\" }, 401);\n await ensureSchema();\n\n const regs = await sqlite.execute({\n sql: `SELECT id, workshop_slug, quantity, status, created_at, expires_at,\n deposit_total, mp_payment_id, notion_synced\n FROM registrations\n ORDER BY created_at DESC`,\n });\n const participants = await sqlite.execute({\n sql: `SELECT id, registration_id, full_name, phone, age, created_at\n FROM participants\n ORDER BY created_at ASC`,\n });\n const waitlist = await sqlite.execute({\n sql: `SELECT id, workshop_slug, phone, created_at\n FROM waitlist\n ORDER BY created_at ASC`,\n });\n const analyticsRows = await sqlite.execute({\n sql: `SELECT event_type, workshop_slug, count\n FROM analytics_counters`,\n });\n const analyticsCounters = new Map(\n (analyticsRows.rows as Record[]).map((row) => [\n `${String(row.event_type)}:${String(row.workshop_slug)}`,\n Number(row.count || 0),\n ]),\n );\n const analyticsCount = (eventType: string, workshopSlug = \"\") =>\n analyticsCounters.get(`${eventType}:${workshopSlug}`) || 0;\n const workshopAnalytics = Object.fromEntries(WORKSHOPS.map((workshop) => [\n workshop.slug,\n {\n opens: analyticsCount(\"workshop_open\", workshop.slug),\n reservationClicks: analyticsCount(\"reservation_click\", workshop.slug),\n },\n ]));\n\n const peopleByRegistration = new Map();\n for (const person of participants.rows as Record[]) {\n const registrationId = String(person.registration_id);\n const list = peopleByRegistration.get(registrationId) || [];\n list.push({\n id: String(person.id),\n fullName: String(person.full_name),\n phone: String(person.phone),\n age: Number(person.age),\n });\n peopleByRegistration.set(registrationId, list);\n }\n\n const workshopSummaries = await Promise.all(WORKSHOPS.map(async (workshop) => {\n const used = await usedSeats(workshop.slug);\n return {\n slug: workshop.slug,\n title: workshop.title,\n dateLabel: workshop.dateLabel,\n timeLabel: workshop.timeLabel,\n capacity: workshop.capacity,\n used,\n remaining: Math.max(0, workshop.capacity - used),\n free: workshop.free,\n };\n }));\n\n return c.json({\n analytics: {\n siteVisits: analyticsCount(\"site_visit\"),\n totalWorkshopOpens: WORKSHOPS.reduce((total, workshop) => total + analyticsCount(\"workshop_open\", workshop.slug), 0),\n totalReservationClicks: WORKSHOPS.reduce((total, workshop) => total + analyticsCount(\"reservation_click\", workshop.slug), 0),\n workshops: workshopAnalytics,\n },\n workshops: workshopSummaries,\n registrations: (regs.rows as Record[]).map((row) => ({\n id: String(row.id),\n workshopSlug: String(row.workshop_slug),\n quantity: Number(row.quantity),\n status: String(row.status),\n createdAt: String(row.created_at),\n expiresAt: row.expires_at ? String(row.expires_at) : null,\n depositTotal: Number(row.deposit_total || 0),\n hasPayment: Boolean(row.mp_payment_id),\n notionSynced: Number(row.notion_synced) === 1,\n participants: peopleByRegistration.get(String(row.id)) || [],\n })),\n waitlist: (waitlist.rows as Record[]).map((row) => ({\n id: String(row.id),\n workshopSlug: String(row.workshop_slug),\n phone: String(row.phone),\n createdAt: String(row.created_at),\n })),\n });\n});\n\napp.post(\"/api/admin/registrations/:id/cancel\", async (c) => {\n if (!(await adminAuthorized(c))) return c.json({ error: \"Acesso administrativo não autorizado\" }, 401);\n await ensureSchema();\n const id = c.req.param(\"id\");\n\n const reg = await sqlite.execute({\n sql: \"SELECT id, workshop_slug, status, mp_payment_id FROM registrations WHERE id = ?\",\n args: [id],\n });\n if (!reg.rows.length) return c.json({ error: \"Inscrição não encontrada\" }, 404);\n\n const row = reg.rows[0] as Record;\n const previousStatus = String(row.status);\n if (previousStatus !== \"cancelled\") {\n await sqlite.execute({\n sql: \"UPDATE registrations SET status = 'cancelled', expires_at = NULL WHERE id = ?\",\n args: [id],\n });\n }\n\n let notionWarning = \"\";\n try {\n await removeRegistrationFromNotion(id);\n } catch (error) {\n console.error(\"Notion admin cancellation sync error\", error);\n notionWarning = \"A vaga foi liberada no site, mas não conseguimos remover a pessoa do Notion automaticamente.\";\n }\n\n const workshopSlug = String(row.workshop_slug);\n const workshop = workshopBySlug(workshopSlug);\n const remaining = workshop ? Math.max(0, workshop.capacity - await usedSeats(workshopSlug)) : null;\n\n return c.json({\n ok: true,\n previousStatus,\n status: \"cancelled\",\n remaining,\n hadPayment: Boolean(row.mp_payment_id),\n notionWarning,\n refundPerformed: false,\n });\n});\n\napp.get(\"/api/workshops\", async (c) => {\n await ensureSchema();\n c.header(\"Cache-Control\", \"no-store, no-cache, must-revalidate\");\n const items = await Promise.all(WORKSHOPS.map(async (w) => publicWorkshop(w, await usedSeats(w.slug))));\n return c.json({ month: \"Setembro 2026\", workshops: items });\n});\n\napp.get(\"/api/registrations/:id\", async (c) => {\n await ensureSchema();\n const id = c.req.param(\"id\");\n const reg = await sqlite.execute({\n sql: \"SELECT id, workshop_slug, quantity, status, created_at, expires_at, deposit_total, notion_synced FROM registrations WHERE id = ?\",\n args: [id],\n });\n if (!reg.rows.length) return c.json({ error: \"Inscrição não encontrada\" }, 404);\n const row = reg.rows[0] as Record;\n if (String(row.status) === \"confirmed\" && Number(row.notion_synced) !== 1) {\n try {\n await syncRegistrationToNotion(id);\n row.notion_synced = 1;\n } catch (error) {\n console.error(\"Notion sync retry error\", error);\n }\n }\n const workshop = workshopBySlug(String(row.workshop_slug));\n return c.json({\n registration: row,\n workshop: workshop ? { title: workshop.title, dateLabel: workshop.dateLabel, timeLabel: workshop.timeLabel, price: workshop.price, free: workshop.free } : null,\n });\n});\n\napp.post(\"/api/waitlist\", async (c) => {\n await ensureSchema();\n let body: any;\n try {\n body = await c.req.json();\n } catch {\n return c.json({ error: \"Dados inválidos\" }, 400);\n }\n\n const workshop = workshopBySlug(String(body?.workshopSlug ?? \"\"));\n if (!workshop) return c.json({ error: \"Oficina não encontrada\" }, 404);\n\n const phone = normalizePhone(body?.phone);\n if (phone.length < 10 || phone.length > 13) {\n return c.json({ error: \"Preencha um WhatsApp válido com DDD\" }, 400);\n }\n\n const remaining = Math.max(0, workshop.capacity - await usedSeats(workshop.slug));\n if (remaining > 0) {\n return c.json({ error: \"Ainda há vagas disponíveis para essa oficina\", remaining }, 409);\n }\n\n try {\n await sqlite.execute({\n sql: \"INSERT INTO waitlist (id, workshop_slug, phone, created_at) VALUES (?, ?, ?, ?)\",\n args: [crypto.randomUUID(), workshop.slug, phone, new Date().toISOString()],\n });\n } catch (error) {\n const message = String((error as any)?.message || error);\n if (message.includes(\"UNIQUE\") || message.includes(\"constraint\")) {\n return c.json({ ok: true, alreadyThere: true, message: \"Esse WhatsApp já está na lista de espera.\" });\n }\n throw error;\n }\n\n return c.json({ ok: true, message: \"Pronto! Seu WhatsApp entrou na lista de espera.\" });\n});\n\napp.post(\"/api/register\", async (c) => {\n await ensureSchema();\n let body: any;\n try {\n body = await c.req.json();\n } catch {\n return c.json({ error: \"Dados inválidos\" }, 400);\n }\n\n const workshop = workshopBySlug(String(body?.workshopSlug ?? \"\"));\n if (!workshop) return c.json({ error: \"Oficina não encontrada\" }, 404);\n\n const participants = Array.isArray(body?.participants) ? body.participants : [];\n const quantity = participants.length;\n if (quantity < 1 || quantity > workshop.capacity) return c.json({ error: \"Quantidade de vagas inválida\" }, 400);\n\n const cleanParticipants = participants.map((p: any) => ({\n fullName: String(p?.fullName ?? \"\").trim(),\n phone: normalizePhone(p?.phone),\n age: Number(p?.age),\n }));\n\n for (const p of cleanParticipants) {\n if (p.fullName.length < 3) return c.json({ error: \"Preencha o nome completo de todas as pessoas\" }, 400);\n if (p.phone.length < 10 || p.phone.length > 13) return c.json({ error: \"Preencha um WhatsApp válido com DDD para todas as pessoas\" }, 400);\n if (!Number.isInteger(p.age) || p.age < 1 || p.age > 120) return c.json({ error: \"Preencha uma idade válida para todas as pessoas\" }, 400);\n }\n\n const idempotencyKey = String(c.req.header(\"Idempotency-Key\") || \"\").trim();\n if (!/^[A-Za-z0-9._:-]{8,200}$/.test(idempotencyKey)) {\n return c.json({ error: \"Chave de envio inválida. Atualize a página e tente novamente.\" }, 400);\n }\n\n const registrationId = idempotencyKey;\n const existingReplay = await replayExistingRegistration(c, registrationId, workshop, cleanParticipants);\n if (existingReplay) return existingReplay;\n\n const now = new Date().toISOString();\n const expiresAt = workshop.free ? null : new Date(Date.now() + HOLD_MINUTES * 60 * 1000).toISOString();\n const status = workshop.free ? \"confirmed\" : \"held\";\n const depositTotal = workshop.deposit * quantity;\n\n let inserted;\n try {\n inserted = await sqlite.execute({\n sql: `INSERT INTO registrations (id, workshop_slug, quantity, status, created_at, expires_at, deposit_total)\n SELECT ?, ?, ?, ?, ?, ?, ?\n WHERE (\n SELECT COALESCE(SUM(quantity), 0)\n FROM registrations\n WHERE workshop_slug = ?\n AND (status = 'confirmed' OR (status = 'held' AND expires_at > ?))\n ) + ? <= ?`,\n args: [\n registrationId,\n workshop.slug,\n quantity,\n status,\n now,\n expiresAt,\n depositTotal,\n workshop.slug,\n now,\n quantity,\n workshop.capacity,\n ],\n });\n } catch (error) {\n const message = String((error as any)?.message || error);\n if (message.includes(\"UNIQUE\") || message.includes(\"PRIMARY KEY\") || message.includes(\"constraint\")) {\n const replay = await replayExistingRegistration(c, registrationId, workshop, cleanParticipants);\n if (replay) return replay;\n }\n throw error;\n }\n\n if (!inserted.rowsAffected) {\n const remaining = Math.max(0, workshop.capacity - await usedSeats(workshop.slug));\n return c.json({ error: remaining ? `Restam apenas ${remaining} vagas` : \"Essa atividade acabou de esgotar\", remaining }, 409);\n }\n\n await sqlite.batch(cleanParticipants.map((p) => ({\n sql: \"INSERT INTO participants (id, registration_id, full_name, phone, age, created_at) VALUES (?, ?, ?, ?, ?, ?)\",\n args: [crypto.randomUUID(), registrationId, p.fullName, p.phone, p.age, now],\n })));\n\n if (workshop.free) {\n try {\n await syncRegistrationToNotion(registrationId);\n } catch (error) {\n console.error(\"Notion sync error (free registration)\", error);\n }\n await notifyNewRegistration(workshop, quantity);\n return c.json({\n ok: true,\n free: true,\n registrationId,\n confirmationUrl: `${PUBLIC_ORIGIN}/confirmacao?rid=${registrationId}&retorno=free`,\n });\n }\n\n try {\n const payment = await mercadoPagoPreference(registrationId, workshop, quantity, cleanParticipants);\n await sqlite.batch([\n {\n sql: \"UPDATE registrations SET mp_preference_id = ? WHERE id = ?\",\n args: [payment.preferenceId, registrationId],\n },\n {\n sql: \"INSERT OR REPLACE INTO registration_checkout_urls (registration_id, checkout_url, created_at) VALUES (?, ?, ?)\",\n args: [registrationId, payment.checkoutUrl, new Date().toISOString()],\n },\n ]);\n return c.json({\n ok: true,\n free: false,\n registrationId,\n checkoutUrl: payment.checkoutUrl,\n expiresAt,\n });\n } catch (error) {\n await sqlite.execute({ sql: \"UPDATE registrations SET status = 'cancelled' WHERE id = ?\", args: [registrationId] });\n console.error(error);\n return c.json({ error: \"Não conseguimos abrir o pagamento agora. Tente novamente em instantes.\" }, 502);\n }\n});\n\napp.post(\"/api/mercadopago/webhook\", async (c) => {\n await ensureSchema();\n const url = new URL(c.req.url);\n let body: any = {};\n try {\n const text = await c.req.text();\n body = text ? JSON.parse(text) : {};\n } catch {\n body = {};\n }\n\n const paymentId = String(body?.data?.id ?? url.searchParams.get(\"data.id\") ?? url.searchParams.get(\"id\") ?? \"\");\n const type = String(body?.type ?? url.searchParams.get(\"type\") ?? url.searchParams.get(\"topic\") ?? \"\");\n if (!paymentId || (type && type !== \"payment\")) return c.json({ ok: true });\n\n try {\n const payment = await fetchPayment(paymentId);\n const registrationId = String(payment?.external_reference ?? payment?.metadata?.registration_id ?? \"\");\n if (!registrationId) return c.json({ ok: true });\n\n const reg = await sqlite.execute({\n sql: \"SELECT id, workshop_slug, quantity, status, deposit_total FROM registrations WHERE id = ?\",\n args: [registrationId],\n });\n if (!reg.rows.length) return c.json({ ok: true });\n\n const row = reg.rows[0] as Record;\n const expected = Number(row.deposit_total ?? 0);\n const paid = Number(payment?.transaction_amount ?? 0);\n const paymentStatus = String(payment?.status ?? \"\");\n const previousStatus = String(row.status ?? \"\");\n\n if (paymentStatus === \"approved\" && paid + 0.001 >= expected) {\n await sqlite.execute({\n sql: \"UPDATE registrations SET status = 'confirmed', mp_payment_id = ? WHERE id = ?\",\n args: [paymentId, registrationId],\n });\n try {\n await syncRegistrationToNotion(registrationId);\n } catch (error) {\n console.error(\"Notion sync error (paid registration)\", error);\n }\n if (previousStatus !== \"confirmed\") {\n const workshop = workshopBySlug(String(row.workshop_slug));\n if (workshop) await notifyNewRegistration(workshop, Number(row.quantity || 1));\n }\n } else if ([\"rejected\", \"cancelled\", \"refunded\", \"charged_back\"].includes(paymentStatus)) {\n await sqlite.execute({\n sql: \"UPDATE registrations SET status = 'cancelled', mp_payment_id = ? WHERE id = ?\",\n args: [paymentId, registrationId],\n });\n }\n } catch (error) {\n console.error(\"Mercado Pago webhook error\", error);\n }\n return c.json({ ok: true });\n});\n\napp.onError((err) => Promise.reject(err));\nexport default oauthMiddleware(app.fetch);\n","label",[139],"9d5bbfa2-85a7-4fa8-bc70-a3dfb4e2e6e8","README.md","01a02acc-a95e-76ab-8b59-762812ade588",1,["D",1787424450826],"# 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",[150],"95c96cf8-94da-4c64-8df1-447944042a4e","Images.md","d029011c-a028-11f1-972f-1607ee4eb77e",75,["D",1788214176194],2,"![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/71fc09ea-3c0b-43af-1988-67e3ca7d0100/public)\n\n![termina aquela coisa.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/cff9ca1f-98a4-47ef-d949-66978c266600/public)\n\n![1.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5a1052c5-a766-46e0-422f-6d5a61be9300/public)\n\n![2.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8fe86df6-4397-4f40-6e21-50c5e263d600/public)\n\n![3.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a5b8d9de-70dd-48d1-c806-062de39cc900/public)\n\n![4.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a8c169c3-109a-4b9f-83de-8151db1a9500/public)\n\n![5.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6838b57e-c73b-4eb3-95da-ab029a793900/public)\n\n![6.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/f367e951-9a10-4cb8-f1df-251251ab0000/public)",[157],"649f0183-4bf2-4fc1-8eac-3a6419eab101","CHANGELOG.md","01a02acc-a95e-76ab-8b59-70355aa0da37",["D",1787424450826],"# 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

Diff · v198