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","deleted","label",[63],"50bd62a2-5eaa-11f1-ba3e-1607ee4eb77e","README.md","019e896d-4ac3-7359-b783-6a56abe996da",1,["D",1780422101593],0,"# 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",[83],"50bd613a-5eaa-11f1-ba3e-1607ee4eb77e","frontend","019e896d-4ac3-7359-b783-647c5d9dac0c",["D",1780422101593],"directory",[91],{"_35":90,"_13":91,"_64":92,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":106,"_17":87,"_75":94,"_77":-5,"_79":50,"_80":-5,"_100":107,"_18":108},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":103,"_17":87,"_75":24,"_77":88,"_79":50,"_80":-5,"_100":104,"_18":105},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":99,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_100":101,"_18":102},["D",1780425138983],"children",[],[63],["D",1780422101593],[],[83],["D",1780422101593],[109,110,111,112],[91],{"_35":136,"_13":137,"_64":138,"_66":92,"_67":68,"_69":85,"_71":72,"_37":139,"_17":87,"_75":94,"_77":-5,"_79":50,"_80":-5,"_100":140,"_18":141},{"_35":129,"_13":130,"_64":131,"_66":92,"_67":68,"_69":85,"_71":72,"_37":132,"_17":87,"_75":24,"_77":133,"_79":50,"_80":-5,"_100":134,"_18":135},{"_35":122,"_13":123,"_64":124,"_66":92,"_67":68,"_69":74,"_71":72,"_37":125,"_17":85,"_75":24,"_77":126,"_79":50,"_80":-5,"_100":127,"_18":128},{"_35":113,"_13":114,"_64":115,"_66":92,"_67":68,"_69":116,"_71":72,"_37":117,"_17":85,"_75":118,"_77":119,"_79":50,"_80":-5,"_100":120,"_18":121},"808d6186-5eae-11f1-a975-1607ee4eb77e","index.tsx","019e896d-4ac3-7359-b783-627f97b44cf4",4,["D",1780423899914],"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",[],[91,114],"7e688b10-5eae-11f1-86ad-1607ee4eb77e","index.html","019e896d-4ac3-7359-b783-5d2f2bd9eff0",["D",1780423896306],"\n\n \n \n \n Forms\n \n \n \n \n

\n \n \n \n\n",[],[91,123],"50bd2e86-5eaa-11f1-ba3e-1607ee4eb77e","favicon.svg","019e896d-4ac3-7359-b783-592ef1adaed0",["D",1780422101593],"\n",[],[91,130],"50bd2cf6-5eaa-11f1-ba3e-1607ee4eb77e","components","019e896d-4ac3-7359-b783-547ad2ab7d68",["D",1780422101593],[142,143,144,145,146,147],[91,137],{"_35":188,"_13":189,"_64":190,"_66":138,"_67":68,"_69":191,"_71":72,"_37":192,"_17":33,"_75":118,"_77":193,"_79":50,"_80":-5,"_100":194,"_18":195},{"_35":181,"_13":182,"_64":183,"_66":138,"_67":68,"_69":85,"_71":72,"_37":184,"_17":87,"_75":118,"_77":185,"_79":50,"_80":-5,"_100":186,"_18":187},{"_35":172,"_13":173,"_64":174,"_66":138,"_67":68,"_69":175,"_71":72,"_37":176,"_17":177,"_75":118,"_77":178,"_79":50,"_80":-5,"_100":179,"_18":180},{"_35":164,"_13":165,"_64":166,"_66":138,"_67":68,"_69":167,"_71":72,"_37":168,"_17":87,"_75":118,"_77":169,"_79":50,"_80":-5,"_100":170,"_18":171},{"_35":156,"_13":157,"_64":158,"_66":138,"_67":68,"_69":159,"_71":72,"_37":160,"_17":87,"_75":118,"_77":161,"_79":50,"_80":-5,"_100":162,"_18":163},{"_35":148,"_13":149,"_64":150,"_66":138,"_67":68,"_69":151,"_71":72,"_37":152,"_17":87,"_75":118,"_77":153,"_79":50,"_80":-5,"_100":154,"_18":155},"d791c918-5eae-11f1-93a6-1607ee4eb77e","ResponsesView.tsx","d791c9d6-5eae-11f1-93a6-1607ee4eb77e",9,["D",1780424045906],"/** @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",[],[91,137,149],"cbb34c3e-5eae-11f1-bf6a-1607ee4eb77e","FormFiller.tsx","cbb34ce8-5eae-11f1-bf6a-1607ee4eb77e",8,["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",[],[91,137,157],"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",[],[91,137,165],"121ea058-5eb2-11f1-8add-1607ee4eb77e","Dashboard.tsx","9d2f3102-5eae-11f1-8f47-1607ee4eb77e",18,["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",[],[91,137,173],"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",[],[91,137,182],"7439118e-5eb1-11f1-aeaa-1607ee4eb77e","App.tsx","019e896d-4ac3-7359-b783-4edf0bb8c00d",15,["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",[],[91,137,189],"50ab128c-5eaa-11f1-ba3e-1607ee4eb77e",["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=1789545599&sig=91cfcc631bd9f3dd8274549c04838d172adf2572755982193460d49bfd04bd62","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,"_245":241},"org",{"_11":12,"_238":239,"_240":241,"_204":205,"_242":243,"_244":50},"branch",{"_17":175,"_13":16,"_35":68,"_41":196,"_44":36,"_45":234,"_235":52,"_236":42,"_237":56,"_57":14,"_53":12},89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","Potluck Mittal","avatar","https://lh3.googleusercontent.com/a/ACg8ocJYeiSQ8_eyVYtUAg9f5qRwEXzS1AreFm572a1csvZx7c6b_S8=s96-c","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":196,"_13":14,"_37":324,"_48":-5,"_198":50,"_51":52,"_199":52,"_200":201,"_202":203,"_204":205,"_206":65,"_207":72,"_208":-5,"_209":-5,"_210":87,"_55":211,"_212":213,"_214":215,"_216":325,"_218":-5,"_219":220,"_221":220,"_222":223,"_224":223,"_225":223,"_226":220,"_227":220,"_228":326,"_230":327,"_232":328,"_49":50},[285,296,297],"files",[285,286,287,288,289,290,291,292,293,294,295,296,297],"counts",{"_276":87,"_277":85,"_278":87,"_34":279,"_280":281},[270,271,272],"upstreamProject",{"_35":42,"_13":58,"_200":201,"_202":203,"_51":52,"_228":268},"upstreamBranch",{"_35":36,"_37":266,"_39":267,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],{"_11":54,"_245":269},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789545599&sig=2316df07e67031dd48e537f6ce0c4c14b92716fed790ec83ecf27974cc65aa31",{"_35":90,"_13":91,"_64":92,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":93,"_17":87,"_75":94,"_77":-5,"_79":50,"_80":-5,"_18":275},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":86,"_17":87,"_75":24,"_77":88,"_79":50,"_80":-5,"_18":274},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":73,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_18":273},[63],[83],[91],"pulls","branches","forks",{"_282":87,"_284":87},"connections",{"_282":85,"_283":87},"count","unfilledCount","emptyCount",{"_35":90,"_13":91,"_64":92,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":106,"_17":87,"_75":94,"_77":-5,"_79":50,"_80":-5,"_100":322,"_18":323},{"_35":136,"_13":137,"_64":138,"_66":92,"_67":68,"_69":85,"_71":72,"_37":139,"_17":87,"_75":94,"_77":-5,"_79":50,"_80":-5,"_100":320,"_18":321},{"_35":188,"_13":189,"_64":190,"_66":138,"_67":68,"_69":191,"_71":72,"_37":192,"_17":33,"_75":118,"_77":193,"_79":50,"_80":-5,"_100":318,"_18":319},{"_35":181,"_13":182,"_64":183,"_66":138,"_67":68,"_69":85,"_71":72,"_37":184,"_17":87,"_75":118,"_77":185,"_79":50,"_80":-5,"_100":316,"_18":317},{"_35":172,"_13":173,"_64":174,"_66":138,"_67":68,"_69":175,"_71":72,"_37":176,"_17":177,"_75":118,"_77":178,"_79":50,"_80":-5,"_100":314,"_18":315},{"_35":164,"_13":165,"_64":166,"_66":138,"_67":68,"_69":167,"_71":72,"_37":168,"_17":87,"_75":118,"_77":169,"_79":50,"_80":-5,"_100":312,"_18":313},{"_35":156,"_13":157,"_64":158,"_66":138,"_67":68,"_69":159,"_71":72,"_37":160,"_17":87,"_75":118,"_77":161,"_79":50,"_80":-5,"_100":310,"_18":311},{"_35":148,"_13":149,"_64":150,"_66":138,"_67":68,"_69":151,"_71":72,"_37":152,"_17":87,"_75":118,"_77":153,"_79":50,"_80":-5,"_100":308,"_18":309},{"_35":129,"_13":130,"_64":131,"_66":92,"_67":68,"_69":85,"_71":72,"_37":132,"_17":87,"_75":24,"_77":133,"_79":50,"_80":-5,"_100":306,"_18":307},{"_35":122,"_13":123,"_64":124,"_66":92,"_67":68,"_69":74,"_71":72,"_37":125,"_17":85,"_75":24,"_77":126,"_79":50,"_80":-5,"_100":304,"_18":305},{"_35":113,"_13":114,"_64":115,"_66":92,"_67":68,"_69":116,"_71":72,"_37":117,"_17":85,"_75":118,"_77":119,"_79":50,"_80":-5,"_100":302,"_18":303},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":103,"_17":87,"_75":24,"_77":88,"_79":50,"_80":-5,"_100":300,"_18":301},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":99,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_100":298,"_18":299},[],[63],[],[83],[],[91,114],[],[91,123],[],[91,130],[],[91,137,149],[],[91,137,157],[],[91,137,165],[],[91,137,173],[],[91,137,182],[],[91,137,189],[287,288,289,290,291,292],[91,137],[286,293,294,295],[91],["D",1780422101593],["D",1789500119686],{"_11":12,"_245":241},{"_11":12,"_238":239,"_240":241,"_204":205,"_242":243,"_244":50},{"_17":175,"_13":16,"_35":68,"_41":196,"_44":36,"_45":234,"_235":52,"_236":42,"_237":56,"_57":14,"_53":12},"ctx",{"_228":-5,"_263":362,"_363":364,"_365":366,"_367":50,"_368":50,"_369":50,"_370":72,"_371":-5,"_372":-7,"_373":-7,"_374":87,"_375":50,"_376":50,"_377":-5,"_378":50,"_379":50,"_380":50,"_381":-5},"ENV",{"_333":334,"_335":336,"_337":16,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347,"_348":349,"_350":351,"_352":353,"_354":355,"_356":357,"_358":359,"_360":361},"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"]