Access denied

Only @val.town Google accounts can access this app.

\n Try a different account →\n `,\n { status: 403, headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n\n const sessionId = crypto.randomUUID();\n await sqlite.execute({\n sql: \"INSERT INTO sessions (id, email) VALUES (?, ?)\",\n args: [sessionId, user.email],\n });\n\n return new Response(null, {\n status: 302,\n headers: {\n Location: \"/\",\n \"Set-Cookie\": `session=${sessionId}; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=2592000`,\n },\n });\n});\n\napp.post(\"/auth/logout\", async (c) => {\n const sessionId = getCookie(c, \"session\");\n if (sessionId) {\n await sqlite.execute({ sql: \"DELETE FROM sessions WHERE id = ?\", args: [sessionId] });\n }\n return new Response(null, {\n status: 302,\n headers: {\n Location: \"/\",\n \"Set-Cookie\": \"session=; Path=/; HttpOnly; Max-Age=0\",\n },\n });\n});\n\napp.get(\"/api/me\", async (c) => {\n const session = await getSession(c);\n if (!session) return c.json({ error: \"Unauthorized\" }, 401);\n return c.json({ email: session.email });\n});\n\n// --- Forms (protected) ---\n\napp.get(\"/api/forms\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const result = await sqlite.execute(`\n SELECT f.*, COUNT(r.id) as response_count\n FROM forms f\n LEFT JOIN responses r ON r.form_id = f.id\n GROUP BY f.id\n ORDER BY f.created_at DESC\n `);\n return c.json(result.rows);\n});\n\napp.post(\"/api/forms\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const { title, description } = await c.req.json();\n const id = crypto.randomUUID();\n await sqlite.execute({\n sql: \"INSERT INTO forms (id, title, description) VALUES (?, ?, ?)\",\n args: [id, title, description || \"\"],\n });\n const result = await sqlite.execute({ sql: \"SELECT * FROM forms WHERE id = ?\", args: [id] });\n return c.json(result.rows[0], 201);\n});\n\n// Public: used by form filler\napp.get(\"/api/forms/:id\", async (c) => {\n const id = c.req.param(\"id\");\n const formResult = await sqlite.execute({ sql: \"SELECT * FROM forms WHERE id = ?\", args: [id] });\n if (!formResult.rows.length) return c.json({ error: \"Not found\" }, 404);\n const questionsResult = await sqlite.execute({\n sql: \"SELECT * FROM questions WHERE form_id = ? ORDER BY order_num ASC\",\n args: [id],\n });\n return c.json({\n ...formResult.rows[0],\n questions: questionsResult.rows.map((q) => ({\n ...q,\n options: JSON.parse((q.options as string) || \"[]\"),\n })),\n });\n});\n\napp.put(\"/api/forms/:id\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const id = c.req.param(\"id\");\n const { title, description } = await c.req.json();\n await sqlite.execute({\n sql: \"UPDATE forms SET title = ?, description = ? WHERE id = ?\",\n args: [title, description || \"\", id],\n });\n const result = await sqlite.execute({ sql: \"SELECT * FROM forms WHERE id = ?\", args: [id] });\n return c.json(result.rows[0]);\n});\n\napp.delete(\"/api/forms/:id\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const id = c.req.param(\"id\");\n await sqlite.batch([\n {\n sql: \"DELETE FROM answers WHERE response_id IN (SELECT id FROM responses WHERE form_id = ?)\",\n args: [id],\n },\n { sql: \"DELETE FROM responses WHERE form_id = ?\", args: [id] },\n { sql: \"DELETE FROM questions WHERE form_id = ?\", args: [id] },\n { sql: \"DELETE FROM forms WHERE id = ?\", args: [id] },\n ]);\n return c.json({ ok: true });\n});\n\n// --- Questions (protected) ---\n\napp.post(\"/api/forms/:id/questions\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const formId = c.req.param(\"id\");\n const { type, text, options, required } = await c.req.json();\n const countResult = await sqlite.execute({\n sql: \"SELECT COUNT(*) as count FROM questions WHERE form_id = ?\",\n args: [formId],\n });\n const orderNum = (countResult.rows[0].count as number) + 1;\n const id = crypto.randomUUID();\n await sqlite.execute({\n sql: \"INSERT INTO questions (id, form_id, type, text, options, order_num, required) VALUES (?, ?, ?, ?, ?, ?, ?)\",\n args: [id, formId, type, text, JSON.stringify(options || []), orderNum, required !== false ? 1 : 0],\n });\n const result = await sqlite.execute({ sql: \"SELECT * FROM questions WHERE id = ?\", args: [id] });\n const q = result.rows[0];\n return c.json({ ...q, options: JSON.parse((q.options as string) || \"[]\") }, 201);\n});\n\napp.put(\"/api/questions/:id\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const id = c.req.param(\"id\");\n const { type, text, options, required, order_num } = await c.req.json();\n await sqlite.execute({\n sql: \"UPDATE questions SET type = ?, text = ?, options = ?, required = ?, order_num = ? WHERE id = ?\",\n args: [type, text, JSON.stringify(options || []), required !== false ? 1 : 0, order_num, id],\n });\n const result = await sqlite.execute({ sql: \"SELECT * FROM questions WHERE id = ?\", args: [id] });\n const q = result.rows[0];\n return c.json({ ...q, options: JSON.parse((q.options as string) || \"[]\") });\n});\n\napp.delete(\"/api/questions/:id\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const id = c.req.param(\"id\");\n await sqlite.execute({ sql: \"DELETE FROM questions WHERE id = ?\", args: [id] });\n return c.json({ ok: true });\n});\n\n// --- Responses ---\n\n// Public: end users submit responses\napp.post(\"/api/forms/:id/responses\", async (c) => {\n const formId = c.req.param(\"id\");\n const { answers } = await c.req.json();\n const responseId = crypto.randomUUID();\n await sqlite.execute({\n sql: \"INSERT INTO responses (id, form_id) VALUES (?, ?)\",\n args: [responseId, formId],\n });\n if (answers?.length > 0) {\n await sqlite.batch(\n answers.map((a: { question_id: string; value: string }) => ({\n sql: \"INSERT INTO answers (id, response_id, question_id, value) VALUES (?, ?, ?, ?)\",\n args: [crypto.randomUUID(), responseId, a.question_id, a.value],\n })),\n );\n }\n return c.json({ id: responseId }, 201);\n});\n\n// Protected: only creators see responses\napp.get(\"/api/forms/:id/responses\", async (c) => {\n if (!await getSession(c)) return c.json({ error: \"Unauthorized\" }, 401);\n const formId = c.req.param(\"id\");\n const responsesResult = await sqlite.execute({\n sql: \"SELECT * FROM responses WHERE form_id = ? ORDER BY submitted_at DESC\",\n args: [formId],\n });\n const responses = await Promise.all(\n responsesResult.rows.map(async (r) => {\n const answersResult = await sqlite.execute({\n sql: `SELECT a.*, q.text as question_text, q.type as question_type\n FROM answers a JOIN questions q ON a.question_id = q.id\n WHERE a.response_id = ? ORDER BY q.order_num ASC`,\n args: [r.id],\n });\n return { ...r, answers: answersResult.rows };\n }),\n );\n return c.json(responses);\n});\n\n// SPA catch-all\napp.get(\"*\", () => serveFile(\"/frontend/index.html\"));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label","children",[75],"contentHash","bd5379b4b6f7f8c99456c94afaa01c442c254ba4d1e17a4d3d9a4011b09b2471","5edba328-3996-11f1-bbdd-42b51c65c3df","a9b2b20a-f528-11ef-9e98-569c3dd06744",76,["D",1776345342438],15,"import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n",[75],"9be69b2abae3e8948e1fd732628dddd372fcaab9141c0726b75f429830bde151","frontend/index.tsx",{"_32":122,"_13":111,"_81":123,"_83":124,"_84":33,"_85":125,"_87":26,"_34":126,"_40":89,"_90":117,"_92":127,"_66":48,"_94":-5,"_95":-7,"_74":128,"_97":129},{"_32":110,"_13":111,"_81":112,"_83":113,"_84":58,"_85":114,"_87":26,"_34":115,"_40":116,"_90":117,"_92":118,"_66":48,"_94":-5,"_95":-7,"_74":119,"_97":120},"808d6186-5eae-11f1-a975-1607ee4eb77e","index.tsx","019e896d-4ac3-7359-b783-627f97b44cf4","019e896d-4ac3-7359-b783-647c5d9dac0c",4,["D",1780423899914],1,"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element\");\ncreateRoot(root).render();\n",[121,111],"6cc6a6c58046378971782d7eecd476d89bfc21b92a60fd7bb75295f5f9188d84","frontend","37ad4e0c-f53e-11ef-940f-569c3dd06744","5b1c65b6-f52b-11ef-bc72-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",24,["D",1740683304259],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[121,111],"427c45f5341ba32dd31e98a21e648a32637bfca120ebc165e98f9be62706370c","frontend/index.html",{"_32":141,"_13":134,"_81":142,"_83":124,"_84":33,"_85":143,"_87":48,"_34":144,"_40":145,"_90":137,"_92":146,"_66":48,"_94":-5,"_95":-7,"_74":147,"_97":148},{"_32":133,"_13":134,"_81":135,"_83":113,"_84":58,"_85":89,"_87":26,"_34":136,"_40":116,"_90":137,"_92":138,"_66":48,"_94":-5,"_95":-7,"_74":139,"_97":140},"7e688b10-5eae-11f1-86ad-1607ee4eb77e","index.html","019e896d-4ac3-7359-b783-5d2f2bd9eff0",["D",1780423896306],"file","\n\n \n \n \n Forms\n \n \n \n \n

\n \n \n \n\n",[121,134],"7c0e6b6909dc823f9818ab058100ba9b691b28a9946162cc3e987832c4190af3","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744",74,["D",1776345337676],8,"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[121,134],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/components/App.tsx",{"_32":161,"_13":153,"_81":162,"_83":163,"_84":33,"_85":164,"_87":26,"_34":165,"_40":166,"_90":117,"_92":167,"_66":48,"_94":-5,"_95":-7,"_74":168,"_97":169},{"_32":152,"_13":153,"_81":154,"_83":155,"_84":58,"_85":103,"_87":26,"_34":156,"_40":22,"_90":117,"_92":157,"_66":48,"_94":-5,"_95":-7,"_74":158,"_97":159},"7439118e-5eb1-11f1-aeaa-1607ee4eb77e","App.tsx","019e896d-4ac3-7359-b783-4edf0bb8c00d","019e896d-4ac3-7359-b783-547ad2ab7d68",["D",1780425167707],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { FormBuilder } from \"./FormBuilder.tsx\";\nimport { FormFiller } from \"./FormFiller.tsx\";\nimport { ResponsesView } from \"./ResponsesView.tsx\";\n\ntype Route =\n | { view: \"dashboard\" }\n | { view: \"new-form\" }\n | { view: \"edit-form\"; formId: string }\n | { view: \"fill-form\"; formId: string }\n | { view: \"responses\"; formId: string };\n\nfunction parseRoute(hash: string): Route {\n const path = hash.replace(/^#/, \"\") || \"/\";\n if (path === \"/\" || path === \"\") return { view: \"dashboard\" };\n const editForm = path.match(/^\\/forms\\/([^/]+)\\/edit$/);\n if (editForm) return { view: \"edit-form\", formId: editForm[1] };\n const fillForm = path.match(/^\\/forms\\/([^/]+)\\/fill$/);\n if (fillForm) return { view: \"fill-form\", formId: fillForm[1] };\n const responses = path.match(/^\\/forms\\/([^/]+)\\/responses$/);\n if (responses) return { view: \"responses\", formId: responses[1] };\n if (path.match(/^\\/forms\\/new$/)) return { view: \"new-form\" };\n return { view: \"dashboard\" };\n}\n\nfunction GoogleIcon() {\n return (\n \n );\n}\n\nfunction LoginScreen() {\n return (\n

📋

Forms

\n \n \n Sign in with Google\n \n

\n );\n}\n\nexport function App() {\n const [route, setRoute] = useState(() => parseRoute(window.location.hash));\n const [authState, setAuthState] = useState<\"loading\" | \"authed\" | \"unauthed\">(\"loading\");\n const [user, setUser] = useState<{ email: string } | null>(null);\n\n useEffect(() => {\n const onHash = () => setRoute(parseRoute(window.location.hash));\n window.addEventListener(\"hashchange\", onHash);\n return () => window.removeEventListener(\"hashchange\", onHash);\n }, []);\n\n useEffect(() => {\n fetch(\"/api/me\")\n .then((r) => r.ok ? r.json() : Promise.reject())\n .then((data) => { setUser(data); setAuthState(\"authed\"); })\n .catch(() => setAuthState(\"unauthed\"));\n }, []);\n\n const navigate = (path: string) => { window.location.hash = path; };\n\n // Fill route is always public — render immediately regardless of auth\n if (route.view === \"fill-form\") return ;\n\n if (authState === \"loading\") {\n return (\n

\n Loading...\n

\n );\n }\n\n if (authState === \"unauthed\") return ;\n\n if (route.view === \"dashboard\") return ;\n if (route.view === \"new-form\") return ;\n if (route.view === \"edit-form\") return ;\n if (route.view === \"responses\") return ;\n return ;\n}\n",[121,160,153],"53c13eac71edc34b553e82e0c2c901a8efbadc2dda9f6817ceddaa39ff3dce02","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[121,160,153],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7",{"_74":204,"_76":-7,"_78":205},{"_74":194,"_76":-7,"_78":195},{"_74":185,"_76":-7,"_78":186},{"_74":174,"_76":-7,"_78":175},"frontend/components/ResponsesView.tsx",{"_32":176,"_13":177,"_81":178,"_83":155,"_84":58,"_85":179,"_87":26,"_34":180,"_40":181,"_90":117,"_92":182,"_66":48,"_94":-5,"_95":-7,"_74":183,"_97":184},"d791c918-5eae-11f1-93a6-1607ee4eb77e","ResponsesView.tsx","d791c9d6-5eae-11f1-93a6-1607ee4eb77e",9,["D",1780424045906],0,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface Answer {\n question_id: string;\n question_text: string;\n question_type: string;\n value: string;\n}\n\ninterface Response {\n id: string;\n form_id: string;\n submitted_at: number;\n answers: Answer[];\n}\n\ninterface Form {\n id: string;\n title: string;\n}\n\ninterface Props {\n formId: string;\n navigate: (path: string) => void;\n}\n\nexport function ResponsesView({ formId, navigate }: Props) {\n const [form, setForm] = useState

(null);\n const [responses, setResponses] = useState([]);\n const [loading, setLoading] = useState(true);\n const [copied, setCopied] = useState(false);\n\n useEffect(() => {\n Promise.all([\n fetch(`/api/forms/${formId}`).then((r) => r.json()),\n fetch(`/api/forms/${formId}/responses`).then((r) => r.json()),\n ]).then(([formData, responsesData]) => {\n setForm(formData);\n setResponses(responsesData);\n setLoading(false);\n });\n }, [formId]);\n\n const formatValue = (answer: Answer) => {\n if (answer.question_type === \"multi_select\") {\n try {\n const arr = JSON.parse(answer.value);\n return Array.isArray(arr) ? arr.join(\", \") : answer.value;\n } catch {\n return answer.value;\n }\n }\n return answer.value;\n };\n\n const copyShareLink = () => {\n navigator.clipboard.writeText(`${window.location.origin}/fill/${formId}`);\n setCopied(true);\n setTimeout(() => setCopied(false), 1500);\n };\n\n if (loading) {\n return (\n

\n Loading...\n

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

\n \n\n

{form?.title}

\n {responses.length} response{responses.length !== 1 ? \"s\" : \"\"}\n

\n \n {copied ? \"Copied!\" : \"Copy Share Link\"}\n \n

\n\n {responses.length === 0 ? (\n

📭

No responses yet

Share the form link to start collecting responses

\n \n {copied ? \"Copied!\" : \"Copy Share Link\"}\n \n

\n ) : (\n

\n {responses.map((response, idx) => (\n \n

\n \n Response #{responses.length - idx}\n \n \n {new Date(response.submitted_at * 1000).toLocaleString()}\n \n

\n {response.answers.length === 0 ? (\n

No answers recorded

\n ) : (\n response.answers.map((answer) => (\n

\n {answer.question_text}\n

{formatValue(answer)}

\n ))\n )}\n

\n ))}\n

\n )}\n

\n \n );\n}\n",[121,160,177],"e4efa2e0afd75068cae67c9a24d8dfd896ff9b51c21e4faa2ba5e3c865e1bb34","frontend/components/FormFiller.tsx",{"_32":187,"_13":188,"_81":189,"_83":155,"_84":58,"_85":145,"_87":26,"_34":190,"_40":181,"_90":117,"_92":191,"_66":48,"_94":-5,"_95":-7,"_74":192,"_97":193},"cbb34c3e-5eae-11f1-bf6a-1607ee4eb77e","FormFiller.tsx","cbb34ce8-5eae-11f1-bf6a-1607ee4eb77e",["D",1780424025995],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface Question {\n id: string;\n type: \"short_answer\" | \"long_answer\" | \"single_select\" | \"multi_select\";\n text: string;\n options: string[];\n required: boolean;\n}\n\ninterface Form {\n id: string;\n title: string;\n description: string;\n questions: Question[];\n}\n\ninterface Props {\n formId: string;\n navigate: (path: string) => void;\n}\n\nexport function FormFiller({ formId }: Props) {\n const [form, setForm] = useState(null);\n const [loading, setLoading] = useState(true);\n const [step, setStep] = useState<\"welcome\" | number | \"done\">(\"welcome\");\n const [answers, setAnswers] = useState>({});\n const [submitting, setSubmitting] = useState(false);\n const [error, setError] = useState(\"\");\n\n useEffect(() => {\n fetch(`/api/forms/${formId}`)\n .then((r) => r.json())\n .then((data) => { setForm(data); setLoading(false); });\n }, [formId]);\n\n if (loading) {\n return (\n

\n Loading...\n

\n );\n }\n\n if (!form || !form.questions) {\n return (\n

\n Form not found.\n

\n );\n }\n\n if (step === \"done\") {\n return (\n

🎉

Thanks!

Your response has been recorded.

\n );\n }\n\n if (step === \"welcome\") {\n return (\n

{form.title}

\n {form.description && (\n

{form.description}

\n )}\n

{form.questions.length} question{form.questions.length !== 1 ? \"s\" : \"\"}

\n setStep(0)}\n className=\"bg-white text-purple-600 font-bold px-10 py-3 rounded-full text-lg hover:bg-purple-50 transition-colors shadow-lg\"\n >\n Start →\n \n

\n );\n }\n\n const idx = step as number;\n const q = form.questions[idx];\n const progress = ((idx + 1) / form.questions.length) * 100;\n const answer = answers[q.id] ?? (q.type === \"multi_select\" ? [] : \"\");\n\n const setAnswer = (val: string | string[]) => {\n setAnswers((a) => ({ ...a, [q.id]: val }));\n setError(\"\");\n };\n\n const canAdvance = () => {\n if (!q.required) return true;\n if (Array.isArray(answer)) return answer.length > 0;\n return (answer as string).trim().length > 0;\n };\n\n const advance = async () => {\n if (!canAdvance()) { setError(\"Please answer this question to continue.\"); return; }\n setError(\"\");\n if (idx < form.questions.length - 1) {\n setStep(idx + 1);\n } else {\n setSubmitting(true);\n const answerList = Object.entries(answers).map(([question_id, value]) => ({\n question_id,\n value: Array.isArray(value) ? JSON.stringify(value) : value,\n }));\n await fetch(`/api/forms/${formId}/responses`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ answers: answerList }),\n });\n setSubmitting(false);\n setStep(\"done\");\n }\n };\n\n const isLast = idx === form.questions.length - 1;\n\n return (\n

\n {/* Progress bar */}\n

\n \n

\n\n

\n {idx + 1} / {form.questions.length}\n

\n\n

\n {q.text}\n {q.required && *}\n

\n\n {error &&

{error}

}\n\n

\n {q.type === \"short_answer\" && (\n setAnswer(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && advance()}\n placeholder=\"Type your answer...\"\n className=\"w-full bg-transparent border-b-2 border-white border-opacity-40 focus:border-opacity-100 outline-none text-white text-xl py-2 placeholder-white placeholder-opacity-30 transition-all\"\n />\n )}\n\n {q.type === \"long_answer\" && (\n setAnswer(e.target.value)}\n placeholder=\"Type your answer...\"\n rows={4}\n className=\"w-full bg-white bg-opacity-10 border border-white border-opacity-30 focus:border-opacity-70 rounded-xl text-white text-lg p-4 placeholder-white placeholder-opacity-30 outline-none resize-none transition-all\"\n />\n )}\n\n {q.type === \"single_select\" && (\n

\n {q.options.map((opt, i) => (\n setAnswer(opt)}\n className={`w-full text-left px-5 py-3 rounded-xl border text-white font-medium transition-all flex items-center gap-3 ${\n answer === opt\n ? \"bg-white bg-opacity-20 border-white\"\n : \"bg-white bg-opacity-5 border-white border-opacity-25 hover:bg-opacity-10\"\n }`}\n >\n \n {String.fromCharCode(65 + i)}\n \n {opt}\n \n ))}\n

\n )}\n\n {q.type === \"multi_select\" && (\n

Select all that apply

\n {q.options.map((opt, i) => {\n const selected = (answer as string[]).includes(opt);\n return (\n {\n const cur = answer as string[];\n setAnswer(selected ? cur.filter((v) => v !== opt) : [...cur, opt]);\n }}\n className={`w-full text-left px-5 py-3 rounded-xl border text-white font-medium transition-all flex items-center gap-3 ${\n selected\n ? \"bg-white bg-opacity-20 border-white\"\n : \"bg-white bg-opacity-5 border-white border-opacity-25 hover:bg-opacity-10\"\n }`}\n >\n \n {selected ? \"✓\" : \"\"}\n \n {opt}\n \n );\n })}\n

\n )}\n

\n\n

\n { setError(\"\"); setStep(idx - 1); }}\n disabled={idx === 0}\n className=\"text-white opacity-50 hover:opacity-100 text-sm transition-opacity disabled:pointer-events-none\"\n >\n ← Back\n \n \n {submitting ? \"Submitting...\" : isLast ? \"Submit\" : \"Next →\"}\n \n

\n\n

\n Press Enter ↵ to continue\n

\n );\n}\n",[121,160,188],"0f65e68816e8825b274adccc8188eba601fd845b0145f0bc6e3228a74bb4cb71","frontend/components/FormBuilder.tsx",{"_32":196,"_13":197,"_81":198,"_83":155,"_84":58,"_85":199,"_87":26,"_34":200,"_40":181,"_90":117,"_92":201,"_66":48,"_94":-5,"_95":-7,"_74":202,"_97":203},"b6a4abd0-5eae-11f1-a89d-1607ee4eb77e","FormBuilder.tsx","b6a4ac84-5eae-11f1-a89d-1607ee4eb77e",7,["D",1780423990661],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ntype QuestionType = \"short_answer\" | \"long_answer\" | \"single_select\" | \"multi_select\";\n\ninterface Question {\n id?: string;\n type: QuestionType;\n text: string;\n options: string[];\n required: boolean;\n order_num?: number;\n}\n\ninterface Props {\n navigate: (path: string) => void;\n formId?: string;\n}\n\nconst QUESTION_TYPES: { value: QuestionType; label: string; icon: string }[] = [\n { value: \"short_answer\", label: \"Short Answer\", icon: \"—\" },\n { value: \"long_answer\", label: \"Long Answer\", icon: \"≡\" },\n { value: \"single_select\", label: \"Single Select\", icon: \"◉\" },\n { value: \"multi_select\", label: \"Multi Select\", icon: \"☑\" },\n];\n\nconst blank = (): Question => ({ type: \"short_answer\", text: \"\", options: [], required: true });\n\nexport function FormBuilder({ navigate, formId }: Props) {\n const isEditing = !!formId;\n const [title, setTitle] = useState(\"\");\n const [description, setDescription] = useState(\"\");\n const [questions, setQuestions] = useState([]);\n const [saving, setSaving] = useState(false);\n const [loading, setLoading] = useState(isEditing);\n const [addingQuestion, setAddingQuestion] = useState(false);\n const [newQ, setNewQ] = useState(blank());\n const [optionInput, setOptionInput] = useState(\"\");\n\n useEffect(() => {\n if (!isEditing) return;\n fetch(`/api/forms/${formId}`)\n .then((r) => r.json())\n .then((data) => {\n setTitle(data.title);\n setDescription(data.description || \"\");\n setQuestions(data.questions || []);\n setLoading(false);\n });\n }, [formId]);\n\n const saveForm = async () => {\n if (!title.trim()) return;\n setSaving(true);\n if (isEditing) {\n await fetch(`/api/forms/${formId}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ title, description }),\n });\n } else {\n const res = await fetch(\"/api/forms\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ title, description }),\n });\n const form = await res.json();\n for (const q of questions) {\n await fetch(`/api/forms/${form.id}/questions`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(q),\n });\n }\n }\n setSaving(false);\n navigate(\"/\");\n };\n\n const addQuestion = async () => {\n if (!newQ.text.trim()) return;\n if (isEditing) {\n const res = await fetch(`/api/forms/${formId}/questions`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(newQ),\n });\n const q = await res.json();\n setQuestions((qs) => [...qs, q]);\n } else {\n setQuestions((qs) => [...qs, { ...newQ, order_num: qs.length + 1 }]);\n }\n setNewQ(blank());\n setOptionInput(\"\");\n setAddingQuestion(false);\n };\n\n const deleteQuestion = async (idx: number, qId?: string) => {\n if (isEditing && qId) {\n await fetch(`/api/questions/${qId}`, { method: \"DELETE\" });\n }\n setQuestions((qs) => qs.filter((_, i) => i !== idx));\n };\n\n const addOption = () => {\n if (!optionInput.trim()) return;\n setNewQ((q) => ({ ...q, options: [...q.options, optionInput.trim()] }));\n setOptionInput(\"\");\n };\n\n const needsOptions = newQ.type === \"single_select\" || newQ.type === \"multi_select\";\n\n if (loading) {\n return (\n

\n Loading...\n

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

\n \n

\n {isEditing ? \"Edit Form\" : \"New Form\"}\n

\n\n {/* Form metadata */}\n

\n Form Title *\n setTitle(e.target.value)}\n placeholder=\"e.g. Customer Feedback\"\n className=\"w-full border border-gray-200 rounded-lg px-3 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-300\"\n />\n

\n \n Description (optional)\n \n setDescription(e.target.value)}\n placeholder=\"Brief description of the form\"\n className=\"w-full border border-gray-200 rounded-lg px-3 py-2 text-gray-900 focus:outline-none focus:ring-2 focus:ring-purple-300\"\n />\n

\n\n {/* Questions list */}\n {questions.length > 0 && (\n

\n {questions.map((q, i) => (\n \n

\n \n {QUESTION_TYPES.find((t) => t.value === q.type)?.label}\n \n {q.required && Required}\n

{q.text}

\n {q.options.length > 0 && (\n

{q.options.join(\" · \")}

\n )}\n

\n deleteQuestion(i, q.id)}\n className=\"ml-3 text-gray-300 hover:text-red-400 text-lg leading-none\"\n >\n ✕\n \n

\n ))}\n

\n )}\n\n {/* Add question panel */}\n {addingQuestion ? (\n

New Question

\n\n

\n Type\n

\n {QUESTION_TYPES.map((t) => (\n setNewQ((q) => ({ ...q, type: t.value, options: [] }))}\n className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${\n newQ.type === t.value\n ? \"border-purple-500 bg-purple-50 text-purple-700\"\n : \"border-gray-200 text-gray-600 hover:bg-gray-50\"\n }`}\n >\n {t.icon} {t.label}\n \n ))}\n

\n\n

\n \n Question Text *\n \n setNewQ((q) => ({ ...q, text: e.target.value }))}\n placeholder=\"e.g. What is your name?\"\n className=\"w-full border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-300\"\n />\n

\n\n {needsOptions && (\n

\n Options\n

\n {newQ.options.map((opt, i) => (\n

\n •\n {opt}\n \n setNewQ((q) => ({ ...q, options: q.options.filter((_, j) => j !== i) }))\n }\n className=\"text-gray-400 hover:text-red-400\"\n >\n ✕\n \n

\n ))}\n

\n setOptionInput(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && addOption()}\n placeholder=\"Add option...\"\n className=\"flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-300\"\n />\n \n Add\n \n

\n )}\n\n

\n \n setNewQ((q) => ({ ...q, required: e.target.checked }))}\n />\n Required\n \n

\n {\n setAddingQuestion(false);\n setNewQ(blank());\n setOptionInput(\"\");\n }}\n className=\"px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg\"\n >\n Cancel\n \n \n Add Question\n \n

\n ) : (\n setAddingQuestion(true)}\n className=\"w-full py-3 border-2 border-dashed border-gray-200 rounded-xl text-gray-400 hover:border-purple-300 hover:text-purple-400 transition-colors mb-4 text-sm font-medium\"\n >\n + Add Question\n \n )}\n\n

\n navigate(\"/\")}\n className=\"px-5 py-2.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50\"\n >\n Cancel\n \n \n {saving ? \"Saving...\" : isEditing ? \"Save Changes\" : \"Create Form\"}\n \n

\n \n );\n}\n",[121,160,197],"2bb44b143737c08a7ec3548419dba26c50c62982847831cbe7d1092670be2b22","frontend/components/Dashboard.tsx",{"_32":206,"_13":207,"_81":208,"_83":155,"_84":58,"_85":57,"_87":26,"_34":209,"_40":210,"_90":117,"_92":211,"_66":48,"_94":-5,"_95":-7,"_74":212,"_97":213},"121ea058-5eb2-11f1-8add-1607ee4eb77e","Dashboard.tsx","9d2f3102-5eae-11f1-8f47-1607ee4eb77e",["D",1780425432626],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface Form {\n id: string;\n title: string;\n description: string;\n created_at: number;\n response_count: number;\n}\n\ninterface Props {\n navigate: (path: string) => void;\n user: { email: string };\n}\n\nexport function Dashboard({ navigate, user }: Props) {\n const [forms, setForms] = useState([]);\n const [loading, setLoading] = useState(true);\n const [copied, setCopied] = useState(null);\n\n useEffect(() => {\n const load = () =>\n fetch(\"/api/forms\")\n .then((r) => {\n if (r.status === 401) { window.location.reload(); return null; }\n return r.json();\n })\n .then((data) => {\n if (Array.isArray(data)) { setForms(data); setLoading(false); }\n });\n load();\n const interval = setInterval(load, 10_000);\n return () => clearInterval(interval);\n }, []);\n\n const deleteForm = async (id: string) => {\n if (!confirm(\"Delete this form and all its responses?\")) return;\n await fetch(`/api/forms/${id}`, { method: \"DELETE\" });\n setForms((f) => f.filter((x) => x.id !== id));\n };\n\n const copyLink = (id: string) => {\n const url = `${window.location.origin}/fill/${id}`;\n navigator.clipboard.writeText(url);\n setCopied(id);\n setTimeout(() => setCopied(null), 1500);\n };\n\n return (\n

\n {user.email}\n \n \n Log out\n \n \n

My Forms

Create and manage your forms

\n navigate(\"/forms/new\")}\n className=\"bg-purple-600 text-white px-5 py-2.5 rounded-lg font-medium hover:bg-purple-700 transition-colors\"\n >\n + New Form\n \n

\n\n {loading ? (\n

\n ) : forms.length === 0 ? (\n

📋

No forms yet

Create your first form to get started

\n navigate(\"/forms/new\")}\n className=\"bg-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-purple-700 transition-colors\"\n >\n Create a form\n \n

\n ) : (\n

\n {forms.map((form) => (\n \n

{form.title}

\n {form.description && (\n

{form.description}

\n )}\n

\n Created {new Date(form.created_at * 1000).toLocaleDateString()}\n {\" · \"}\n \n {form.response_count} response{form.response_count !== 1 ? \"s\" : \"\"}\n \n

\n copyLink(form.id)}\n className=\"text-sm px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors\"\n >\n {copied === form.id ? \"Copied!\" : \"Share\"}\n \n navigate(`/forms/${form.id}/responses`)}\n className=\"text-sm px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition-colors\"\n >\n Responses\n \n navigate(`/forms/${form.id}/edit`)}\n className=\"text-sm px-3 py-1.5 rounded-lg border border-purple-200 text-purple-600 hover:bg-purple-50 transition-colors\"\n >\n Edit\n \n deleteForm(form.id)}\n className=\"text-sm px-3 py-1.5 rounded-lg border border-red-100 text-red-500 hover:bg-red-50 transition-colors\"\n >\n Delete\n \n

\n ))}\n

\n )}\n\n

\n View source\n

\n \n );\n}\n",[121,160,207],"bd5600581a4f8092efc3aba3fa8c8af365006574f6233d9f8a8d86fb82811138",["D",1780422101593],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789549199&sig=78a5bc27f03474c98a49b09a954e18cc6dd63f22ba19ce3e096717a88d3522b5","userId","4672fa32-1c6f-4907-899e-57b7e45b1dcb","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019e83d1-d41f-725b-9693-b632d430a029","tursoName","50ab128c5eaa11f1ba3e1607ee4eb77e","tursoHostname","50ab128c5eaa11f1ba3e1607ee4eb77e-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789500119686],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_257":253},"org",{"_11":12,"_250":251,"_252":253,"_221":222,"_254":255,"_256":48},"branch","displayName","Potluck Mittal","avatar","https://lh3.googleusercontent.com/a/ACg8ocJYeiSQ8_eyVYtUAg9f5qRwEXzS1AreFm572a1csvZx7c6b_S8=s96-c","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":363,"_46":-5,"_215":48,"_49":50,"_216":50,"_217":218,"_219":220,"_221":222,"_223":82,"_224":26,"_225":-5,"_226":-5,"_227":181,"_53":228,"_229":230,"_231":232,"_233":364,"_235":-5,"_236":237,"_238":237,"_239":240,"_241":240,"_242":240,"_243":237,"_244":237,"_245":365,"_247":366,"_249":367,"_47":48},"tree",[310,321,322],"files",[310,311,312,313,314,315,316,317,318,319,320,321,322],"counts",{"_300":181,"_301":116,"_302":181,"_303":304,"_305":306},"contents",[285,286,287],"upstreamProject",{"_32":39,"_13":56,"_217":218,"_219":220,"_49":50,"_245":283},"upstreamBranch",{"_32":33,"_34":281,"_36":282,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],{"_11":52,"_257":284},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789549199&sig=85ec03bbe2ae9af315fa5e89fceebe840b59020b3ec43df39e2ab37ef0d215ad",{"_32":296,"_13":121,"_81":113,"_83":-5,"_84":58,"_85":116,"_87":26,"_34":297,"_40":181,"_90":298,"_92":-5,"_66":48,"_94":-5,"_74":299},{"_32":290,"_13":291,"_81":292,"_83":-5,"_84":58,"_85":116,"_87":26,"_34":293,"_40":181,"_90":137,"_92":294,"_66":48,"_94":-5,"_74":295},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":86,"_87":26,"_34":288,"_40":89,"_90":91,"_92":93,"_66":48,"_94":-5,"_74":289},["D",1780425138983],[75],"50bd62a2-5eaa-11f1-ba3e-1607ee4eb77e","README.md","019e896d-4ac3-7359-b783-6a56abe996da",["D",1780422101593],"# 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[\"index.html\"]\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 index.html ← HTML shell (loads Twind + React)\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/index.html`** loads Twind and the 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",[291],"50bd613a-5eaa-11f1-ba3e-1607ee4eb77e",["D",1780422101593],"directory",[121],"pulls","branches","forks","envVars",{"_307":181,"_309":181},"connections",{"_307":116,"_308":181},"count","unfilledCount","emptyCount",{"_32":296,"_13":121,"_81":113,"_83":-5,"_84":58,"_85":116,"_87":26,"_34":360,"_40":181,"_90":298,"_92":-5,"_66":48,"_94":-5,"_95":361,"_74":362},{"_32":356,"_13":160,"_81":155,"_83":113,"_84":58,"_85":116,"_87":26,"_34":357,"_40":181,"_90":298,"_92":-5,"_66":48,"_94":-5,"_95":358,"_74":359},{"_32":152,"_13":153,"_81":154,"_83":155,"_84":58,"_85":103,"_87":26,"_34":156,"_40":22,"_90":117,"_92":157,"_66":48,"_94":-5,"_95":354,"_74":355},{"_32":347,"_13":348,"_81":349,"_83":155,"_84":58,"_85":116,"_87":26,"_34":350,"_40":181,"_90":117,"_92":351,"_66":48,"_94":-5,"_95":352,"_74":353},{"_32":206,"_13":207,"_81":208,"_83":155,"_84":58,"_85":57,"_87":26,"_34":209,"_40":210,"_90":117,"_92":211,"_66":48,"_94":-5,"_95":345,"_74":346},{"_32":196,"_13":197,"_81":198,"_83":155,"_84":58,"_85":199,"_87":26,"_34":200,"_40":181,"_90":117,"_92":201,"_66":48,"_94":-5,"_95":343,"_74":344},{"_32":187,"_13":188,"_81":189,"_83":155,"_84":58,"_85":145,"_87":26,"_34":190,"_40":181,"_90":117,"_92":191,"_66":48,"_94":-5,"_95":341,"_74":342},{"_32":176,"_13":177,"_81":178,"_83":155,"_84":58,"_85":179,"_87":26,"_34":180,"_40":181,"_90":117,"_92":182,"_66":48,"_94":-5,"_95":339,"_74":340},{"_32":332,"_13":333,"_81":334,"_83":113,"_84":58,"_85":116,"_87":26,"_34":335,"_40":181,"_90":137,"_92":336,"_66":48,"_94":-5,"_95":337,"_74":338},{"_32":133,"_13":134,"_81":135,"_83":113,"_84":58,"_85":89,"_87":26,"_34":136,"_40":116,"_90":137,"_92":138,"_66":48,"_94":-5,"_95":330,"_74":331},{"_32":110,"_13":111,"_81":112,"_83":113,"_84":58,"_85":114,"_87":26,"_34":115,"_40":116,"_90":117,"_92":118,"_66":48,"_94":-5,"_95":328,"_74":329},{"_32":290,"_13":291,"_81":292,"_83":-5,"_84":58,"_85":116,"_87":26,"_34":325,"_40":181,"_90":137,"_92":294,"_66":48,"_94":-5,"_95":326,"_74":327},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":86,"_87":26,"_34":88,"_40":89,"_90":91,"_92":93,"_66":48,"_94":-5,"_95":323,"_74":324},[],[75],["D",1780422101593],[],[291],[],[121,111],[],[121,134],"50bd2e86-5eaa-11f1-ba3e-1607ee4eb77e","favicon.svg","019e896d-4ac3-7359-b783-592ef1adaed0",["D",1780422101593],"\n",[],[121,333],[],[121,160,177],[],[121,160,188],[],[121,160,197],[],[121,160,207],"50bd21e8-5eaa-11f1-ba3e-1607ee4eb77e","Counter.tsx","019e896d-4ac3-7359-b783-53af31902fce",["D",1780422101593],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[121,160,348],[],[121,160,153],"50bd2cf6-5eaa-11f1-ba3e-1607ee4eb77e",["D",1780422101593],[312,313,314,315,316,317],[121,160],["D",1780422101593],[311,318,319,320],[121],["D",1780422101593],["D",1789500119686],{"_11":12,"_257":253},{"_11":12,"_250":251,"_252":253,"_221":222,"_254":255,"_256":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_245":-5,"_278":401,"_402":403,"_404":405,"_406":48,"_407":48,"_408":48,"_409":26,"_410":-5,"_411":-7,"_412":-7,"_413":181,"_414":48,"_415":48,"_416":-5,"_417":48,"_418":48,"_419":48,"_420":-5},"ENV",{"_372":373,"_374":375,"_376":16,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386,"_387":388,"_389":390,"_391":392,"_393":394,"_395":396,"_397":398,"_399":400},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Compare

Mergepotluck/mainintotemplates/main

frontend/components/App.tsx+90-8

frontend/index.html+4-6

frontend/index.tsx+2-5

Hindex.ts+332-11

frontend/components/Dashboard.tsx+148-0

frontend/components/FormBuilder.tsx+321-0

frontend/components/FormFiller.tsx+252-0

frontend/components/ResponsesView.tsx+141-0