[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_314":315,"_316":317},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_233":-5,"_20":234,"_22":235,"_236":237,"_238":239,"_26":240,"_24":241,"_242":-5,"_243":-5,"_244":58,"_245":246,"_247":49,"_248":-5,"_249":-5,"_250":251},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","stevekrouse","name","beyond-text","branchName","main","version","path","frontend","project",{"_37":176,"_13":14,"_50":177,"_178":-5,"_179":58,"_180":181,"_182":181,"_183":184,"_185":-5,"_186":187,"_188":89,"_189":49,"_190":-5,"_191":-5,"_192":52,"_193":194,"_195":196,"_197":198,"_199":200,"_201":-5,"_202":203,"_204":203,"_205":206,"_207":206,"_208":206,"_209":203,"_210":203,"_211":212,"_213":214,"_215":216,"_217":58},"tree",[84,85,86],"file",{"_37":81,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":47,"_48":49,"_50":82,"_17":52,"_53":79,"_55":-5,"_57":58,"_59":-5,"_18":83},"contents",[33,34,35,36],"upstream","pull","ahead","behind","envVars",{"_37":75,"_13":76,"_40":77,"_42":43,"_44":45,"_46":47,"_48":49,"_50":78,"_17":52,"_53":79,"_55":-5,"_57":58,"_59":-5,"_18":80},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":47,"_48":49,"_50":72,"_17":52,"_53":24,"_55":73,"_57":58,"_59":-5,"_18":74},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":65,"_17":66,"_53":24,"_55":67,"_57":58,"_59":-5,"_18":68},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_18":60},"id","329407ac-39e0-11f1-87ca-42b51c65c3df","index.tsx","fileId","019d9852-b70f-72eb-9942-68e3f8f1aed1","parentId","019d9852-b70f-72eb-9942-6caafeaef6b4","branchId","328e7dfa-39e0-11f1-87ca-42b51c65c3df","branchVersion",1,"latest",true,"createdAt",["D",1776377050794],0,"fileType","script","content","/** @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();","deleted",false,"label",[19,39],"968bc5b2-3a5b-11f1-be97-42b51c65c3df","index.html","019d9852-b70f-72eb-9942-67d9eb60bfa2",13,["D",1776430046716],3,"\n\n \n \n \n Beyond Text — Chat\n \n \n \n \n

\n \n \n \n\n",[19,62],"3293df3e-39e0-11f1-87ca-42b51c65c3df","favicon.svg","019d9852-b70f-72eb-9942-63256cc8b9aa",["D",1776377050794],"\n",[19,70],"3293ddd6-39e0-11f1-87ca-42b51c65c3df","components","019d9852-b70f-72eb-9942-5c52eec41efc",["D",1776377050794],"directory",[19,76],"32940c0c-39e0-11f1-87ca-42b51c65c3df",["D",1776377050794],[19],{"_37":81,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":47,"_48":49,"_50":106,"_17":52,"_53":79,"_55":-5,"_57":58,"_59":-5,"_95":107,"_18":108},{"_37":98,"_13":99,"_40":100,"_42":-5,"_44":45,"_46":101,"_48":49,"_50":102,"_17":47,"_53":24,"_55":103,"_57":58,"_59":-5,"_95":104,"_18":105},{"_37":87,"_13":88,"_40":89,"_42":-5,"_44":45,"_46":90,"_48":49,"_50":91,"_17":92,"_53":93,"_55":94,"_57":58,"_59":-5,"_95":96,"_18":97},"7d85635a-39e5-11f1-9d36-42b51c65c3df","index.ts","019d9852-b70f-72eb-9942-74f04958f416",9,["D",1776379324108],2,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// --- DB setup ---\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n text TEXT NOT NULL,\n created_at INTEGER NOT NULL\n )\n`);\n\n// Idempotently add image columns (for existing deployments)\nfor (const stmt of [\n \"ALTER TABLE messages ADD COLUMN image_blob_key INTEGER\",\n \"ALTER TABLE messages ADD COLUMN image_content_type TEXT\",\n]) {\n try {\n await sqlite.execute(stmt);\n } catch (_err) {\n // Column already exists — safe to ignore\n }\n}\n\nconst BLOB_PREFIX = \"beyond-text:image:\";\n\n// --- Static files ---\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// --- API ---\n\n// Upload an image. Returns { key, contentType } — caller then includes `imageBlobKey` in POST /api/messages.\napp.post(\"/api/upload\", async (c) => {\n const contentType = c.req.header(\"content-type\") ?? \"\";\n if (!contentType.startsWith(\"image/\")) {\n return c.json({ error: \"Content-Type must be image/*\" }, 400);\n }\n const bytes = new Uint8Array(await c.req.arrayBuffer());\n if (bytes.byteLength === 0) {\n return c.json({ error: \"Empty upload\" }, 400);\n }\n if (bytes.byteLength > 8 * 1024 * 1024) {\n return c.json({ error: \"Image too large (max 8MB)\" }, 413);\n }\n\n // Generate a random integer key and store under a namespaced blob path.\n // We persist the raw integer in SQLite; the blob key is `${BLOB_PREFIX}${int}`.\n const key = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);\n await blob.set(`${BLOB_PREFIX}${key}`, bytes);\n\n return c.json({ key, contentType });\n});\n\n// Serve a stored image by its integer key.\napp.get(\"/api/image/:key\", async (c) => {\n const keyParam = c.req.param(\"key\");\n if (!/^\\d+$/.test(keyParam)) {\n return c.text(\"Invalid key\", 400);\n }\n\n // Look up content-type from the most recent message referencing this key.\n const result = await sqlite.execute({\n sql:\n \"SELECT image_content_type FROM messages WHERE image_blob_key = ? ORDER BY id DESC LIMIT 1\",\n args: [Number(keyParam)],\n });\n const row = result.rows[0] as { image_content_type: string | null } | undefined;\n const contentType = row?.image_content_type ?? \"application/octet-stream\";\n\n try {\n const response = await blob.get(`${BLOB_PREFIX}${keyParam}`);\n return new Response(response.body, {\n headers: {\n \"Content-Type\": contentType,\n \"Cache-Control\": \"public, max-age=31536000, immutable\",\n },\n });\n } catch (_err) {\n return c.text(\"Not found\", 404);\n }\n});\n\n// Post a new message (optionally with an image reference).\napp.post(\"/api/messages\", async (c) => {\n const body = await c.req.json<{\n username: string;\n text: string;\n imageBlobKey?: number | null;\n imageContentType?: string | null;\n }>();\n const cleanUsername = (body.username ?? \"\").toString().trim().slice(0, 40);\n const cleanText = (body.text ?? \"\").toString().trim().slice(0, 2000);\n\n const hasImage = typeof body.imageBlobKey === \"number\" && Number.isFinite(body.imageBlobKey);\n\n if (!cleanUsername) {\n return c.json({ error: \"username required\" }, 400);\n }\n if (!cleanText && !hasImage) {\n return c.json({ error: \"text or image required\" }, 400);\n }\n\n const result = await sqlite.execute({\n sql:\n \"INSERT INTO messages (username, text, created_at, image_blob_key, image_content_type) VALUES (?, ?, ?, ?, ?)\",\n args: [\n cleanUsername,\n cleanText,\n Date.now(),\n hasImage ? body.imageBlobKey! : null,\n hasImage ? (body.imageContentType ?? \"application/octet-stream\") : null,\n ],\n });\n return c.json({ ok: true, id: Number(result.lastInsertRowid) });\n});\n\n// Get messages with id > sinceId (catch-up on connect).\napp.get(\"/api/messages\", async (c) => {\n const sinceId = Number(c.req.query(\"sinceId\") ?? 0);\n const result = await sqlite.execute({\n sql:\n \"SELECT id, username, text, created_at, image_blob_key FROM messages WHERE id > ? ORDER BY id ASC LIMIT 500\",\n args: [sinceId],\n });\n return c.json({ messages: result.rows });\n});\n\n// Server-Sent Events stream of new messages.\napp.get(\"/api/stream\", (c) => {\n const sinceIdParam = Number(c.req.query(\"sinceId\") ?? 0);\n\n const stream = new ReadableStream({\n async start(controller) {\n const encoder = new TextEncoder();\n let lastId = sinceIdParam;\n let closed = false;\n\n const send = (event: string, data: unknown) => {\n if (closed) return;\n try {\n controller.enqueue(\n encoder.encode(`event: ${event}\\ndata: ${JSON.stringify(data)}\\n\\n`),\n );\n } catch {\n closed = true;\n }\n };\n\n send(\"hello\", { lastId });\n\n const poll = async () => {\n while (!closed) {\n try {\n const result = await sqlite.execute({\n sql:\n \"SELECT id, username, text, created_at, image_blob_key FROM messages WHERE id > ? ORDER BY id ASC LIMIT 100\",\n args: [lastId],\n });\n const rows = result.rows as Array<{\n id: number;\n username: string;\n text: string;\n created_at: number;\n image_blob_key: number | null;\n }>;\n if (rows.length > 0) {\n for (const row of rows) {\n send(\"message\", row);\n lastId = Number(row.id);\n }\n } else {\n send(\"ping\", { t: Date.now() });\n }\n } catch (err) {\n send(\"error\", { message: String(err) });\n }\n await new Promise((r) => setTimeout(r, 1500));\n }\n };\n\n poll();\n\n c.req.raw.signal.addEventListener(\"abort\", () => {\n closed = true;\n try {\n controller.close();\n } catch {}\n });\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/event-stream\",\n \"Cache-Control\": \"no-cache, no-transform\",\n \"Connection\": \"keep-alive\",\n \"X-Accel-Buffering\": \"no\",\n },\n });\n});\n\n// Unwrap and rethrow Hono errors as the original error.\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[88],"49a789c8-39e5-11f1-9eb4-42b51c65c3df","README.md","019d9852-b70f-72eb-9942-702ae94f100e",8,["D",1776379237090],"# Beyond Text — Chat\n\nA minimal realtime chat app built on Val Town. Messages are stored in Val Town\nSQLite and streamed to every client over Server-Sent Events. A QR code of the\napp's own URL is shown in the sidebar so people can scan to join.\n\n## Features\n\n- 💬 Realtime chat via Server-Sent Events (no WebSockets needed)\n- 🗄️ Messages stored in Val Town SQLite\n- 📱 QR code of the site URL for easy joining\n- 👤 Username saved to `localStorage` (prompted on first visit)\n- 🧘 No auto-scroll, no auto-focus on the input\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|GET /| Hono[index.ts
Hono server]\n Hono -->|serves| HTML[frontend/index.html + React]\n Browser -->|SSE /api/stream| Hono\n Browser -->|POST /api/messages| Hono\n Hono -->|read/write| SQLite[(messages table)]\n Hono -->|stream new rows| Browser\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend: static + /api routes + SSE stream\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 ← Username gating (localStorage)\n UsernamePrompt.tsx ← First-visit username form\n Chat.tsx ← Messages list, input, sidebar\n QRCode.tsx ← Renders a QR of the site URL\n```\n\n## API\n\n- `GET /` — serves the React app\n- `POST /api/messages` — `{ username, text }` → stores a message in SQLite\n- `GET /api/messages?sinceId=N` — fetch messages newer than `N`\n- `GET /api/stream?sinceId=N` — SSE stream of new messages (polls SQLite every\n 1.5s; emits `hello`, `message`, and `ping` events)\n\n## Notes on design choices\n\n- **SSE instead of WebSockets**: Val Town doesn't accept incoming WebSocket\n connections, so the server polls SQLite on a 1.5s loop and pushes new rows\n to each subscribed client as SSE events.\n- **No auto-scroll / auto-focus**: The messages pane scrolls only when the\n user scrolls, and the input is never programmatically focused.\n- **Username in `localStorage`**: A first-visit prompt stores the chosen name\n under the key `beyond-text:username`. A \"change\" button in the header\n clears it.\n",[],[99],["D",1776377050794],[109,110,111,112],[19],{"_37":75,"_13":76,"_40":77,"_42":43,"_44":45,"_46":47,"_48":49,"_50":122,"_17":52,"_53":79,"_55":-5,"_57":58,"_59":-5,"_95":123,"_18":124},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":47,"_48":49,"_50":119,"_17":52,"_53":24,"_55":73,"_57":58,"_59":-5,"_95":120,"_18":121},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":116,"_17":66,"_53":24,"_55":67,"_57":58,"_59":-5,"_95":117,"_18":118},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":113,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_95":114,"_18":115},["D",1776377050794],[],[19,39],["D",1776430046716],[],[19,62],["D",1776377050794],[],[19,70],["D",1776377050794],[125,126,127,128,129,130],[19,76],{"_37":168,"_13":169,"_40":170,"_42":77,"_44":45,"_46":171,"_48":49,"_50":172,"_17":47,"_53":54,"_55":173,"_57":58,"_59":-5,"_95":174,"_18":175},{"_37":161,"_13":162,"_40":163,"_42":77,"_44":45,"_46":134,"_48":49,"_50":164,"_17":92,"_53":54,"_55":165,"_57":58,"_59":-5,"_95":166,"_18":167},{"_37":154,"_13":155,"_40":156,"_42":77,"_44":45,"_46":47,"_48":49,"_50":157,"_17":52,"_53":54,"_55":158,"_57":58,"_59":-5,"_95":159,"_18":160},{"_37":147,"_13":148,"_40":149,"_42":77,"_44":45,"_46":134,"_48":49,"_50":150,"_17":47,"_53":54,"_55":151,"_57":58,"_59":-5,"_95":152,"_18":153},{"_37":139,"_13":140,"_40":141,"_42":77,"_44":45,"_46":142,"_48":49,"_50":143,"_17":52,"_53":54,"_55":144,"_57":58,"_59":-5,"_95":145,"_18":146},{"_37":131,"_13":132,"_40":133,"_42":77,"_44":45,"_46":134,"_48":49,"_50":135,"_17":52,"_53":54,"_55":136,"_57":58,"_59":-5,"_95":137,"_18":138},"c5780a50-39e5-11f1-9614-42b51c65c3df","useLoadingWord.ts","c5780af0-39e5-11f1-9614-42b51c65c3df",11,["D",1776379444820],"import { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\n// A grab-bag of fancy gerunds to show during loading states. They're\n// intentionally silly — things like \"articulating\" and \"gesticulating\" —\n// to give a little personality to otherwise anonymous spinners.\nexport const LOADING_WORDS = [\n \"articulating\",\n \"gesticulating\",\n \"ruminating\",\n \"cogitating\",\n \"percolating\",\n \"marinating\",\n \"deliberating\",\n \"effervescing\",\n \"elucidating\",\n \"extemporizing\",\n \"expounding\",\n \"pontificating\",\n \"philosophizing\",\n \"noodling\",\n \"finagling\",\n \"confabulating\",\n \"harmonizing\",\n \"synthesizing\",\n \"orchestrating\",\n \"choreographing\",\n \"calibrating\",\n \"triangulating\",\n \"enumerating\",\n \"disambiguating\",\n \"decoding\",\n \"untangling\",\n \"bedazzling\",\n \"flabbergasting\",\n \"vociferating\",\n \"soliloquizing\",\n \"waxing poetic\",\n \"brainstorming\",\n \"scheming\",\n \"conjuring\",\n \"divining\",\n \"fermenting\",\n \"simmering\",\n \"percolating\",\n \"crystallizing\",\n \"galvanizing\",\n \"pontooning\",\n \"bamboozling\",\n \"hullabalooing\",\n \"shenaniganing\",\n];\n\n/** Pick a random loading word. */\nexport function randomLoadingWord(): string {\n return LOADING_WORDS[Math.floor(Math.random() * LOADING_WORDS.length)];\n}\n\n/**\n * A hook that returns a loading word which rotates every `intervalMs`\n * milliseconds while `active` is true. When `active` flips back to false\n * a fresh word is chosen, so the next loading cycle doesn't start on the\n * same word.\n */\nexport function useLoadingWord(active: boolean, intervalMs = 1200): string {\n const [word, setWord] = useState(() => randomLoadingWord());\n\n useEffect(() => {\n if (!active) {\n // Pre-seed a new word for next time.\n setWord(randomLoadingWord());\n return;\n }\n setWord(randomLoadingWord());\n const id = setInterval(() => setWord(randomLoadingWord()), intervalMs);\n return () => clearInterval(id);\n }, [active, intervalMs]);\n\n return word;\n}\n",[],[19,76,132],"2969f416-39e5-11f1-a012-42b51c65c3df","UsernamePrompt.tsx","2969f5ec-39e5-11f1-a012-42b51c65c3df",5,["D",1776379183016],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function UsernamePrompt({ onSubmit }: { onSubmit: (name: string) => void }) {\n const [name, setName] = useState(\"\");\n const [error, setError] = useState(null);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n const trimmed = name.trim();\n if (!trimmed) {\n setError(\"Please enter a username.\");\n return;\n }\n if (trimmed.length > 40) {\n setError(\"Username must be 40 characters or fewer.\");\n return;\n }\n onSubmit(trimmed);\n };\n\n return (\n

\n \n

Join the chat

\n Pick a username — it'll be saved on this device.\n

\n setName((e.target as HTMLInputElement).value)}\n placeholder=\"Username\"\n maxLength={40}\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n {error &&

{error}

}\n \n Join\n \n

\n view source\n

\n \n

\n );\n}\n",[],[19,76,140],"c5785686-39e5-11f1-9614-42b51c65c3df","QRCode.tsx","2c4642ca-39e5-11f1-a012-42b51c65c3df",["D",1776379444820],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport QRCode from \"https://esm.sh/qrcode@1.5.3\";\nimport { useLoadingWord } from \"./useLoadingWord.ts\";\n\nexport function QRCodeView({ url }: { url: string }) {\n const [dataUrl, setDataUrl] = useState(null);\n const loadingWord = useLoadingWord(dataUrl === null);\n\n useEffect(() => {\n let cancelled = false;\n QRCode.toDataURL(url, { margin: 1, width: 240 })\n .then((result: string) => {\n if (!cancelled) setDataUrl(result);\n })\n .catch((err: unknown) => console.error(\"QR generation failed\", err));\n return () => {\n cancelled = true;\n };\n }, [url]);\n\n return (\n

\n {dataUrl\n ? $\"Join$ \n : (\n

\n {loadingWord}…\n

\n )}\n

\n Scan to join\n

\n {url}\n

\n );\n}\n",[],[19,76,148],"3293d82c-39e0-11f1-87ca-42b51c65c3df","Counter.tsx","019d9852-b70f-72eb-9942-581c19be40c2",["D",1776377050794],"/** @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",[],[19,76,155],"c578227e-39e5-11f1-9614-42b51c65c3df","Chat.tsx","3a55926c-39e5-11f1-b4f8-42b51c65c3df",["D",1776379444820],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { QRCodeView } from \"./QRCode.tsx\";\nimport { useLoadingWord } from \"./useLoadingWord.ts\";\n\ntype Message = {\n id: number;\n username: string;\n text: string;\n created_at: number;\n image_blob_key: number | null;\n};\n\nexport function Chat({ username, onLogout }: { username: string; onLogout: () => void }) {\n const [messages, setMessages] = useState([]);\n const [draft, setDraft] = useState(\"\");\n const [sending, setSending] = useState(false);\n const [connected, setConnected] = useState(false);\n const [pageUrl, setPageUrl] = useState(\"\");\n const [uploading, setUploading] = useState(false);\n const [uploadError, setUploadError] = useState(null);\n const fileInputRef = useRef(null);\n\n // Rotating \"loading word\" per in-flight loading state. The hook returns a\n // fresh gerund (e.g. \"articulating\", \"gesticulating\") every ~1.2s while the\n // corresponding boolean is true.\n const connectingWord = useLoadingWord(!connected);\n const uploadingWord = useLoadingWord(uploading);\n const sendingWord = useLoadingWord(sending);\n\n useEffect(() => {\n setPageUrl(window.location.origin + window.location.pathname);\n }, []);\n\n useEffect(() => {\n const es = new EventSource(\"/api/stream?sinceId=0\");\n\n es.addEventListener(\"hello\", () => setConnected(true));\n\n es.addEventListener(\"message\", (event: MessageEvent) => {\n try {\n const msg = JSON.parse(event.data) as Message;\n setMessages((prev) => {\n if (prev.some((m) => m.id === msg.id)) return prev;\n return [...prev, msg];\n });\n } catch (err) {\n console.error(\"Failed to parse message event\", err);\n }\n });\n\n es.addEventListener(\"ping\", () => {});\n\n es.onerror = () => setConnected(false);\n\n return () => es.close();\n }, []);\n\n const sendMessage = async (\n text: string,\n image?: { key: number; contentType: string } | null,\n ) => {\n const body = {\n username,\n text,\n imageBlobKey: image?.key ?? null,\n imageContentType: image?.contentType ?? null,\n };\n const res = await fetch(\"/api/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(body),\n });\n if (!res.ok) {\n const b = await res.json().catch(() => ({}));\n throw new Error(b.error ?? `Send failed (${res.status})`);\n }\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n const text = draft.trim();\n if (!text || sending) return;\n setSending(true);\n try {\n await sendMessage(text);\n setDraft(\"\");\n } catch (err) {\n console.error(\"Send error\", err);\n } finally {\n setSending(false);\n }\n };\n\n const handlePhotoSelected = async (file: File) => {\n setUploadError(null);\n setUploading(true);\n try {\n // Upload raw bytes with the correct content-type header.\n const res = await fetch(\"/api/upload\", {\n method: \"POST\",\n headers: { \"Content-Type\": file.type || \"image/jpeg\" },\n body: file,\n });\n if (!res.ok) {\n const b = await res.json().catch(() => ({}));\n throw new Error(b.error ?? `Upload failed (${res.status})`);\n }\n const { key, contentType } = await res.json() as {\n key: number;\n contentType: string;\n };\n // Send a message with the image reference. Text is optional — use draft if present.\n const text = draft.trim();\n await sendMessage(text, { key, contentType });\n setDraft(\"\");\n } catch (err) {\n console.error(\"Photo upload error\", err);\n setUploadError((err as Error).message ?? \"Upload failed\");\n } finally {\n setUploading(false);\n // Reset input so selecting the same photo twice still triggers onChange.\n if (fileInputRef.current) fileInputRef.current.value = \"\";\n }\n };\n\n return (\n

\n {/* Header */}\n

Beyond Text

\n \n \n {connected ? \"live\" : `${connectingWord}…`}\n \n

\n \n signed in as {username}\n \n \n change\n \n

\n\n {/* Main content */}\n

\n {/* Messages + input */}\n

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

\n No messages yet. Say hi!\n

\n )\n : (\n messages.map((m) => (\n \n ))\n )}\n

\n\n {uploadError && (\n

\n {uploadError}\n

\n )}\n\n \n {/* Hidden file input — `capture=\"environment\"` opens the rear camera on mobile */}\n {\n const file = (e.target as HTMLInputElement).files?.[0];\n if (file) handlePhotoSelected(file);\n }}\n />\n fileInputRef.current?.click()}\n disabled={uploading}\n aria-label=\"Take or upload a photo\"\n title=\"Take or upload a photo\"\n class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center rounded-lg bg-white border border-gray-300 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed text-xl\"\n >\n {uploading ? ⋯ : \"📷\"}\n \n setDraft((e.target as HTMLInputElement).value)}\n placeholder={uploading ? `${uploadingWord} your photo…` : \"Type a message…\"}\n maxLength={2000}\n class=\"flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white\"\n />\n \n {sending ? `${sendingWord}…` : \"Send\"}\n \n \n

\n\n {/* Sidebar: QR + info */}\n \n

\n );\n}\n\nfunction MessageRow({ message, isSelf }: { message: Message; isSelf: boolean }) {\n const time = new Date(message.created_at).toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n return (\n

\n \n

\n \n {message.username}\n \n \n {time}\n \n

\n {message.image_blob_key != null && (\n \n \n \n )}\n {message.text && (\n

{message.text}

\n )}\n

\n \n );\n}\n",[],[19,76,162],"23b529a0-39e5-11f1-a99b-42b51c65c3df","App.tsx","019d9852-b70f-72eb-9942-567aa455815b",4,["D",1776379173439],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { UsernamePrompt } from \"./UsernamePrompt.tsx\";\nimport { Chat } from \"./Chat.tsx\";\n\nconst STORAGE_KEY = \"beyond-text:username\";\n\nexport function App() {\n const [username, setUsername] = useState(null);\n const [ready, setReady] = useState(false);\n\n // Load username from localStorage on mount\n useEffect(() => {\n try {\n const stored = localStorage.getItem(STORAGE_KEY);\n if (stored) setUsername(stored);\n } catch {\n // ignore\n }\n setReady(true);\n }, []);\n\n const handleSetUsername = (name: string) => {\n try {\n localStorage.setItem(STORAGE_KEY, name);\n } catch {\n // ignore\n }\n setUsername(name);\n };\n\n const handleLogout = () => {\n try {\n localStorage.removeItem(STORAGE_KEY);\n } catch {\n // ignore\n }\n setUsername(null);\n };\n\n if (!ready) return null;\n\n if (!username) {\n return ;\n }\n\n return ;\n}\n",[],[19,76,169],"32897a44-39e0-11f1-87ca-42b51c65c3df",["D",1776377050794],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","32897a4439e011f187ca42b51c65c3df","tursoHostname","32897a4439e011f187ca42b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789518064818],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_232":228},"org",{"_11":12,"_226":-5,"_227":228,"_186":187,"_229":230,"_231":58},"branch",{"_17":64,"_13":16,"_37":45,"_218":176,"_219":-5,"_220":-5,"_221":-5,"_222":-5,"_223":-5,"_224":14,"_225":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_37":176,"_13":14,"_50":309,"_178":-5,"_179":58,"_180":181,"_182":181,"_183":184,"_185":-5,"_186":187,"_188":89,"_189":49,"_190":-5,"_191":-5,"_192":52,"_193":194,"_195":196,"_197":198,"_199":310,"_201":-5,"_202":203,"_204":203,"_205":206,"_207":206,"_208":206,"_209":203,"_210":203,"_211":311,"_213":312,"_215":313,"_217":58},[270,281,282],"files",[270,271,272,273,274,275,276,277,278,279,280,281,282],"counts",{"_261":52,"_262":92,"_263":52,"_32":264,"_265":266},[253,254,255,256],{"_37":81,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":47,"_48":49,"_50":82,"_17":52,"_53":79,"_55":-5,"_57":58,"_59":-5,"_18":252},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_37":75,"_13":76,"_40":77,"_42":43,"_44":45,"_46":47,"_48":49,"_50":78,"_17":52,"_53":79,"_55":-5,"_57":58,"_59":-5,"_18":260},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":47,"_48":49,"_50":72,"_17":52,"_53":24,"_55":73,"_57":58,"_59":-5,"_18":259},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":65,"_17":66,"_53":24,"_55":67,"_57":58,"_59":-5,"_18":258},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_18":257},[19,39],[19,62],[19,70],[19,76],"pulls","branches","forks",{"_267":52,"_269":52},"connections",{"_267":52,"_268":52},"count","unfilledCount","emptyCount",{"_37":81,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":47,"_48":49,"_50":106,"_17":52,"_53":79,"_55":-5,"_57":58,"_59":-5,"_95":307,"_18":308},{"_37":75,"_13":76,"_40":77,"_42":43,"_44":45,"_46":47,"_48":49,"_50":122,"_17":52,"_53":79,"_55":-5,"_57":58,"_59":-5,"_95":305,"_18":306},{"_37":168,"_13":169,"_40":170,"_42":77,"_44":45,"_46":171,"_48":49,"_50":172,"_17":47,"_53":54,"_55":173,"_57":58,"_59":-5,"_95":303,"_18":304},{"_37":161,"_13":162,"_40":163,"_42":77,"_44":45,"_46":134,"_48":49,"_50":164,"_17":92,"_53":54,"_55":165,"_57":58,"_59":-5,"_95":301,"_18":302},{"_37":154,"_13":155,"_40":156,"_42":77,"_44":45,"_46":47,"_48":49,"_50":157,"_17":52,"_53":54,"_55":158,"_57":58,"_59":-5,"_95":299,"_18":300},{"_37":147,"_13":148,"_40":149,"_42":77,"_44":45,"_46":134,"_48":49,"_50":150,"_17":47,"_53":54,"_55":151,"_57":58,"_59":-5,"_95":297,"_18":298},{"_37":139,"_13":140,"_40":141,"_42":77,"_44":45,"_46":142,"_48":49,"_50":143,"_17":52,"_53":54,"_55":144,"_57":58,"_59":-5,"_95":295,"_18":296},{"_37":131,"_13":132,"_40":133,"_42":77,"_44":45,"_46":134,"_48":49,"_50":135,"_17":52,"_53":54,"_55":136,"_57":58,"_59":-5,"_95":293,"_18":294},{"_37":69,"_13":70,"_40":71,"_42":43,"_44":45,"_46":47,"_48":49,"_50":119,"_17":52,"_53":24,"_55":73,"_57":58,"_59":-5,"_95":291,"_18":292},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":64,"_48":49,"_50":116,"_17":66,"_53":24,"_55":67,"_57":58,"_59":-5,"_95":289,"_18":290},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":113,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_95":287,"_18":288},{"_37":98,"_13":99,"_40":100,"_42":-5,"_44":45,"_46":101,"_48":49,"_50":102,"_17":47,"_53":24,"_55":103,"_57":58,"_59":-5,"_95":285,"_18":286},{"_37":87,"_13":88,"_40":89,"_42":-5,"_44":45,"_46":90,"_48":49,"_50":91,"_17":92,"_53":93,"_55":94,"_57":58,"_59":-5,"_95":283,"_18":284},[],[88],[],[99],[],[19,39],[],[19,62],[],[19,70],[],[19,76,132],[],[19,76,140],[],[19,76,148],[],[19,76,155],[],[19,76,162],[],[19,76,169],[272,273,274,275,276,277],[19,76],[271,278,279,280],[19],["D",1776377050794],["D",1789518064818],{"_11":12,"_232":228},{"_11":12,"_226":-5,"_227":228,"_186":187,"_229":230,"_231":58},{"_17":64,"_13":16,"_37":45,"_218":176,"_219":-5,"_220":-5,"_221":-5,"_222":-5,"_223":-5,"_224":14,"_225":12},"ctx",{"_211":-5,"_249":347,"_348":349,"_350":351,"_352":58,"_353":58,"_354":58,"_355":49,"_356":-5,"_357":-7,"_358":-7,"_359":52,"_360":58,"_361":58,"_362":-5,"_363":58,"_364":58,"_365":58,"_366":-5},"ENV",{"_318":319,"_320":321,"_322":16,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346},"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"]