\n \n \n \n\n",[],[87,118],"a38aa6dc-39e5-11f1-97bb-42b51c65c3df","favicon.svg","019d9876-6007-72da-bff0-3f500d34c9bd",["D",1776379387912],"\n",[],[87,125],"a38aa57e-39e5-11f1-97bb-42b51c65c3df","components","019d9876-6007-72da-bff0-39b8b7a26592",["D",1776379387912],[137,138,139,140,141,142],[87,132],{"_35":181,"_13":182,"_63":183,"_65":133,"_66":67,"_68":69,"_70":71,"_37":184,"_17":31,"_73":113,"_75":185,"_77":51,"_78":-5,"_96":186,"_18":187},{"_35":172,"_13":173,"_63":174,"_65":133,"_66":67,"_68":175,"_70":71,"_37":176,"_17":177,"_73":113,"_75":178,"_77":51,"_78":-5,"_96":179,"_18":180},{"_35":165,"_13":166,"_63":167,"_65":133,"_66":67,"_68":69,"_70":71,"_37":168,"_17":31,"_73":113,"_75":169,"_77":51,"_78":-5,"_96":170,"_18":171},{"_35":157,"_13":158,"_63":159,"_65":133,"_66":67,"_68":160,"_70":71,"_37":161,"_17":69,"_73":113,"_75":162,"_77":51,"_78":-5,"_96":163,"_18":164},{"_35":150,"_13":151,"_63":152,"_65":133,"_66":67,"_68":69,"_70":71,"_37":153,"_17":31,"_73":113,"_75":154,"_77":51,"_78":-5,"_96":155,"_18":156},{"_35":143,"_13":144,"_63":145,"_65":133,"_66":67,"_68":33,"_70":71,"_37":146,"_17":31,"_73":113,"_75":147,"_77":51,"_78":-5,"_96":148,"_18":149},"aaf29a10-39e5-11f1-8939-42b51c65c3df","useLoadingWord.ts","aaf29aba-39e5-11f1-8939-42b51c65c3df",["D",1776379400344],"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",[],[87,132,144],"a38a9912-39e5-11f1-97bb-42b51c65c3df","UsernamePrompt.tsx","019d9876-6007-72da-bff0-360dde284e0e",["D",1776379387912],"/** @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",[],[87,132,151],"bd6f102e-39e5-11f1-9ab1-42b51c65c3df","QRCode.tsx","019d9876-6007-72da-bff0-304be8343650",9,["D",1776379431354],"/** @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",[],[87,132,158],"a38a8d00-39e5-11f1-97bb-42b51c65c3df","Counter.tsx","019d9876-6007-72da-bff0-2d73fd6a229d",["D",1776379387912],"/** @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",[],[87,132,166],"b716fba6-39e5-11f1-9d36-42b51c65c3df","Chat.tsx","019d9876-6007-72da-bff0-297df7e75c46",8,["D",1776379420710],6,"/** @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",[],[87,132,173],"a38a475a-39e5-11f1-97bb-42b51c65c3df","App.tsx","019d9876-6006-737a-8108-549f7a686c2b",["D",1776379387912],"/** @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",[],[87,132,182],["D",1776377050794],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019d9852-b70f-72eb-9942-74f04958f416","pinPreview","pinMigrated","screenshotVersion","likeCount","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,"_234":230},"org",{"_11":12,"_228":-5,"_229":230,"_194":195,"_231":232,"_233":51},"branch",{"_17":160,"_13":16,"_35":67,"_42":43,"_45":36,"_46":224,"_225":53,"_226":43,"_227":56,"_57":14,"_54":12},11,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":43,"_13":14,"_37":310,"_49":-5,"_189":51,"_52":53,"_190":53,"_191":192,"_193":-5,"_194":195,"_196":197,"_198":71,"_199":-5,"_200":-5,"_201":31,"_55":56,"_202":203,"_204":205,"_206":311,"_208":-5,"_209":210,"_211":210,"_212":213,"_214":213,"_215":213,"_216":210,"_217":210,"_218":312,"_220":313,"_222":314,"_50":51},[271,282,283],"files",[271,272,273,274,275,276,277,278,279,280,281,282,283],"counts",{"_262":31,"_263":33,"_264":31,"_34":265,"_266":267},[256,257,258],"upstreamProject","upstreamBranch",{"_35":36,"_37":254,"_39":255,"_13":41,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":12,"_55":56,"_57":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1776377050794],["D",1776430046716],{"_35":86,"_13":87,"_63":88,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":89,"_17":31,"_73":90,"_75":-5,"_77":51,"_78":-5,"_18":261},{"_35":80,"_13":81,"_63":82,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":83,"_17":31,"_73":24,"_75":84,"_77":51,"_78":-5,"_18":260},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":72,"_17":31,"_73":74,"_75":76,"_77":51,"_78":-5,"_18":259},[62],[81],[87],"pulls","branches","forks",{"_268":31,"_270":31},"connections",{"_268":31,"_269":31},"count","unfilledCount","emptyCount",{"_35":86,"_13":87,"_63":88,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":102,"_17":31,"_73":90,"_75":-5,"_77":51,"_78":-5,"_96":308,"_18":309},{"_35":131,"_13":132,"_63":133,"_65":88,"_66":67,"_68":69,"_70":71,"_37":134,"_17":31,"_73":90,"_75":-5,"_77":51,"_78":-5,"_96":306,"_18":307},{"_35":181,"_13":182,"_63":183,"_65":133,"_66":67,"_68":69,"_70":71,"_37":184,"_17":31,"_73":113,"_75":185,"_77":51,"_78":-5,"_96":304,"_18":305},{"_35":172,"_13":173,"_63":174,"_65":133,"_66":67,"_68":175,"_70":71,"_37":176,"_17":177,"_73":113,"_75":178,"_77":51,"_78":-5,"_96":302,"_18":303},{"_35":165,"_13":166,"_63":167,"_65":133,"_66":67,"_68":69,"_70":71,"_37":168,"_17":31,"_73":113,"_75":169,"_77":51,"_78":-5,"_96":300,"_18":301},{"_35":157,"_13":158,"_63":159,"_65":133,"_66":67,"_68":160,"_70":71,"_37":161,"_17":69,"_73":113,"_75":162,"_77":51,"_78":-5,"_96":298,"_18":299},{"_35":150,"_13":151,"_63":152,"_65":133,"_66":67,"_68":69,"_70":71,"_37":153,"_17":31,"_73":113,"_75":154,"_77":51,"_78":-5,"_96":296,"_18":297},{"_35":143,"_13":144,"_63":145,"_65":133,"_66":67,"_68":33,"_70":71,"_37":146,"_17":31,"_73":113,"_75":147,"_77":51,"_78":-5,"_96":294,"_18":295},{"_35":124,"_13":125,"_63":126,"_65":88,"_66":67,"_68":69,"_70":71,"_37":127,"_17":31,"_73":24,"_75":128,"_77":51,"_78":-5,"_96":292,"_18":293},{"_35":117,"_13":118,"_63":119,"_65":88,"_66":67,"_68":69,"_70":71,"_37":120,"_17":31,"_73":24,"_75":121,"_77":51,"_78":-5,"_96":290,"_18":291},{"_35":109,"_13":110,"_63":111,"_65":88,"_66":67,"_68":69,"_70":71,"_37":112,"_17":31,"_73":113,"_75":114,"_77":51,"_78":-5,"_96":288,"_18":289},{"_35":80,"_13":81,"_63":82,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":99,"_17":31,"_73":24,"_75":84,"_77":51,"_78":-5,"_96":286,"_18":287},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":95,"_17":31,"_73":74,"_75":76,"_77":51,"_78":-5,"_96":284,"_18":285},[],[62],[],[81],[],[87,110],[],[87,118],[],[87,125],[],[87,132,144],[],[87,132,151],[],[87,132,158],[],[87,132,166],[],[87,132,173],[],[87,132,182],[273,274,275,276,277,278],[87,132],[272,279,280,281],[87],["D",1776377050794],["D",1789518064818],{"_11":12,"_234":230},{"_11":12,"_228":-5,"_229":230,"_194":195,"_231":232,"_233":51},{"_17":160,"_13":16,"_35":67,"_42":43,"_45":36,"_46":224,"_225":53,"_226":43,"_227":56,"_57":14,"_54":12},"ctx",{"_218":-5,"_251":348,"_349":350,"_351":352,"_353":51,"_354":51,"_355":51,"_356":71,"_357":-5,"_358":-7,"_359":-7,"_360":31,"_361":51,"_362":51,"_363":-5,"_364":51,"_365":51,"_366":51,"_367":-5},"ENV",{"_319":320,"_321":322,"_323":41,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]