`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

Target

{([{ axis: \"passive_aggressive\", low: 65, high: 85 }, { axis: \"conviction\", low: 70, high: 90 }, { axis: \"formality\", low: 50, high: 70 }] as const).map(target => )}

</div><div className=\"play-controls\"><span className=\"word-count\">0 words</span><div className=\"play-actions\"><button className=\"skip-button\">Skip</button><button className=\"submit-button\">↵</button></div></div></main>\n    <footer className=\"game-footer\"><button className=\"other-toggle\">Other classifications <span>⌄</span></button><a className=\"remix-link\" href=\"https://www.val.town/x/dcm31/jevhero\">Remix on Val Town ↗</a></footer>\n    <CameraPanel videoRef={video} zoom={zoom} onZoom={setZoom} onClose={() => setZoom(1)} />\n  </div>;\n}\ncreateRoot(document.getElementById(\"root\")!).render(<CameraLayout />);\n",[],[316,350],"c61e00cd-bd3b-42b1-b5f6-02b5fad0a410","camera.html","4ff6112e-b207-11f1-bd63-1607ee4eb77e",48,["D",1789588087017],"<!doctype html><html><head><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><title>Camera layout fixture</title><style>\n*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden}body{position:fixed;inset:0;background:#10111b;color:#f2eef9;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #c4a0ff;outline-offset:3px}button,a{transition:background .15s,opacity .15s}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}::selection{background:#c4a0ff44}.app-shell{width:min(640px,100%);height:var(--app-height,100dvh);margin:auto;padding:calc(20px + env(safe-area-inset-top,0px)) 26px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;height:38px;flex-shrink:0}.app-header h1{font-size:20px;font-weight:700;letter-spacing:-.7px}.app-header h1>span{color:#b5a0ec;font-size:20px;margin-left:4px}.header-right{display:flex;align-items:center;gap:17px}.score{font-variant-numeric:tabular-nums;color:#c7bddb;font-size:17px;font-weight:550}.menu-button{background:none;border:0;padding:4px 0 4px 8px;font-size:24px;letter-spacing:1px;line-height:1;color:#91879e}.game-stage{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:24px;position:relative}.target-caption{display:flex;align-items:center;justify-content:space-between;color:#837a91;font-size:12px}.target-caption h2{font-size:12px;font-weight:500}.target-caption>span{font-variant-numeric:tabular-nums}.meters{display:flex;flex-direction:column;gap:23px}.meter-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.meter-label>div{display:flex;align-items:baseline;gap:13px;min-width:0}.meter-label h3{font-size:23px;font-weight:550;letter-spacing:-.6px}.meter-label>div>span{font-size:14px;color:#9a90a9;white-space:nowrap;font-variant-numeric:tabular-nums}.meter-label strong{font-size:24px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}.meter-label strong i{font-size:14px;font-style:normal;margin-left:5px}.meter-track{position:relative;height:54px;border-radius:28px;background:#292734;overflow:hidden;isolation:isolate}.meter-fill{position:absolute;inset:0 auto 0 0;transition:width .16s ease-out,background .16s;min-width:0}.target-zone{position:absolute;top:0;bottom:0;border-left:2px solid #e7e2efa8;border-right:2px solid #e7e2efa8;background:#ffffff10}.meter-compact .meter-track{height:34px}.meter-compact .meter-label{margin-bottom:8px}.meter-compact .meter-label h3{font-size:19px}.meter-compact .meter-label strong{font-size:21px}.writing-area{border-bottom:1px solid #413a4e;padding:0 0 8px;transition:border-color .2s}.writing-hit{border-color:#a6f4bb}.writing-area textarea{display:block;width:100%;height:110px;min-height:0;border:0;padding:8px 0;background:transparent;outline:none;resize:none;color:#f6f0fd;font-size:28px;line-height:1.4;letter-spacing:-.6px;caret-color:#bbaaed}.writing-area textarea::placeholder{color:#625b73}.writing-area textarea:disabled{opacity:.6}.play-controls{display:flex;align-items:center;justify-content:space-between;margin-top:-12px}.word-count{font-size:12px;color:#8b8199}.play-actions{display:flex;align-items:center;gap:20px}.skip-button{border:0;background:none;color:#877e96;padding:9px 0;font-size:12px}.submit-button{height:46px;width:70px;border:0;border-radius:24px;background:#2a2636;color:#8c819d;font-size:25px;line-height:1}.submit-button.ready{color:#15341f;background:#a6f4bb}.submit-button:active{transform:scale(.96)}.feedback{position:absolute;bottom:6px;left:0;right:0;height:22px;pointer-events:none;text-align:center;font-size:12px;color:#a295b5}.feedback.success{font-size:20px;font-weight:600;color:#a6f4bb;animation:score-in .2s ease-out}.retry-button{pointer-events:auto;background:none;border:0;color:#ffbfae;font-size:12px}.other-toggle{flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:10px;width:100%;height:38px;background:none;border:0;color:#8f849f;font-size:12px}.other-toggle span{font-size:18px}.modal-backdrop{position:fixed;inset:0;z-index:20;height:var(--app-height,100dvh);display:flex;align-items:center;justify-content:center;background:#090811b8;backdrop-filter:blur(12px);padding:20px;overflow:hidden}.modal-card{width:min(460px,100%);max-height:calc(var(--app-height,100dvh) - 40px);overflow:hidden;padding:24px;background:#1d1928;border:1px solid #393044;border-radius:24px;box-shadow:0 24px 80px #0005;display:flex;flex-direction:column;gap:12px}.modal-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;flex-shrink:0}.modal-title h2{font-size:18px;font-weight:600;letter-spacing:-.4px}.modal-title button{border:0;background:none;font-size:27px;line-height:1;padding:0 0 0 10px;color:#a99ab7}.setting-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;border:0;background:none;text-align:left;font-size:14px}.setting-row>span:last-child{color:#a597b5}.setting-row input{accent-color:#b9a6ec;width:18px;height:18px}.source-link{color:#aa99bc;font-size:12px}.cost-summary{border-top:1px solid #393044;border-bottom:1px solid #393044;padding:13px 0;margin-top:3px;display:flex;flex-direction:column;gap:8px}.cost-summary>div{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#a99bb8}.cost-summary strong{font-weight:500;color:#ddd3e9;font-variant-numeric:tabular-nums}.cost-summary p{font-size:10px;color:#83748e;margin-top:4px}.readings-card{width:min(570px,100%)}.readings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;min-height:0}.reading{min-width:0}.reading>div:first-child{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#a89ab7}.reading strong{color:#c6b9d4;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reading-track{margin-top:6px;background:#332b3e;height:3px;border-radius:2px;overflow:hidden}.reading-track i{display:block;height:100%;background:#78668d;transition:width .2s}.plain-note{font-size:12px;line-height:1.5;color:#a395b1}.face-camera{position:fixed;z-index:15;right:14px;top:calc(var(--app-height,100dvh) - 112px - env(safe-area-inset-bottom,0px));width:96px;height:96px;background:#1d1928;border:1px solid #b69bc655;border-radius:20px;box-shadow:0 8px 30px #0006;overflow:hidden}.face-camera video{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#181322}.camera-close{position:absolute;top:4px;right:4px;border:0;border-radius:50%;width:24px;height:24px;background:#0007;color:white;font-size:20px;line-height:1}.camera-error{position:fixed;bottom:20px;left:20px;right:20px;z-index:30;background:#492936;padding:14px;border-radius:12px;font-size:12px;display:flex;justify-content:space-between;gap:12px}.camera-error button{background:none;border:0;color:white}@keyframes score-in{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}\n@media(min-width:700px){.game-stage{gap:32px}.app-shell{padding-top:30px;padding-bottom:25px}.writing-area textarea{height:130px}}\n@media(max-width:450px){.app-shell{padding-left:23px;padding-right:23px}.meter-label h3{font-size:21px}.meter-label>div{gap:10px}.meter-label strong{font-size:22px}.meter-label>div>span{font-size:12px}.meter-compact .meter-label h3{font-size:17px}.meter-compact .meter-label strong{font-size:19px}.meter-compact .meter-label>div{gap:8px}.writing-area textarea{font-size:26px;height:100px}.modal-card{padding:20px}.readings-grid{gap:16px 20px}}\nhtml[data-compact=\"true\"] .app-shell{padding-top:12px;padding-bottom:8px;gap:4px}html[data-compact=\"true\"] .app-header{height:30px}html[data-compact=\"true\"] .app-header h1{font-size:17px}html[data-compact=\"true\"] .game-stage{gap:16px}html[data-compact=\"true\"] .meters{gap:15px}html[data-compact=\"true\"] .meter-track{height:36px}html[data-compact=\"true\"] .meter-compact .meter-track{height:24px}html[data-compact=\"true\"] .meter-label{margin-bottom:7px}html[data-compact=\"true\"] .meter-compact .meter-label h3{font-size:15px}html[data-compact=\"true\"] .meter-compact .meter-label strong{font-size:17px}html[data-compact=\"true\"] .writing-area textarea{height:64px;font-size:22px}html[data-compact=\"true\"] .submit-button{height:38px;width:60px}html[data-compact=\"true\"] .feedback{bottom:0;height:17px;font-size:13px}html[data-compact=\"true\"] .other-toggle{height:28px;font-size:11px}html[data-compact=\"true\"] .modal-card{padding:16px;gap:8px}html[data-compact=\"true\"] .setting-row{min-height:30px;font-size:13px}html[data-compact=\"true\"] .cost-summary{gap:5px;padding:9px 0}html[data-compact=\"true\"] .readings-grid{gap:9px 16px}html[data-compact=\"true\"] .reading>div:first-child{font-size:10px;gap:2px}html[data-compact=\"true\"] .reading strong{font-size:11px}\nhtml[data-compact=\"true\"] .camera-on .play-controls{padding-right:64px}\nhtml[data-tiny=\"true\"] .app-shell{padding-top:7px;padding-bottom:4px}html[data-tiny=\"true\"] .game-stage{gap:11px}html[data-tiny=\"true\"] .target-caption{font-size:10px}html[data-tiny=\"true\"] .target-caption h2{font-size:10px}html[data-tiny=\"true\"] .meters{gap:10px}html[data-tiny=\"true\"] .meter-compact .meter-track{height:18px}html[data-tiny=\"true\"] .meter-compact .meter-label{margin-bottom:4px}html[data-tiny=\"true\"] .writing-area textarea{height:42px;font-size:18px}html[data-tiny=\"true\"] .submit-button{height:32px;width:54px}html[data-tiny=\"true\"] .play-controls{margin-top:-5px}html[data-tiny=\"true\"] .other-toggle{height:24px}html[data-tiny=\"true\"] .feedback{display:none}html[data-tiny=\"true\"] .readings-grid{gap:7px 14px}html[data-tiny=\"true\"] .reading>div:first-child{flex-direction:row;align-items:baseline;font-size:9px}html[data-tiny=\"true\"] .reading strong{font-size:9px}html[data-tiny=\"true\"] .reading-track{margin-top:4px;height:2px}\nhtml[data-tiny=\"true\"] .settings-card{padding:12px;gap:4px}html[data-tiny=\"true\"] .settings-card .modal-title{margin-bottom:2px}html[data-tiny=\"true\"] .settings-card .setting-row{min-height:24px;font-size:12px}html[data-tiny=\"true\"] .settings-card .cost-summary{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:8px 0}html[data-tiny=\"true\"] .settings-card .cost-summary>div{flex-direction:column;gap:3px;font-size:10px}html[data-tiny=\"true\"] .settings-card .cost-summary p{grid-column:1/-1;margin-top:0}\n\n.app-shell.camera-on{--camera-height:min(calc(var(--app-height,100dvh) / 2),max(90px,calc(var(--app-height,100dvh) - 280px)));padding-top:12px;padding-bottom:calc(var(--camera-height) + 8px);gap:4px}\n.camera-on .app-header{height:30px}.camera-on .game-stage{gap:12px}.camera-on .meters{gap:12px}.camera-on .meter-label{margin-bottom:6px}.camera-on .meter-label h3{font-size:17px}.camera-on .meter-label strong{font-size:19px}.camera-on .meter-label>div>span{font-size:12px}.camera-on .meter-track{height:32px}.camera-on .meter-compact .meter-track{height:20px}.camera-on .writing-area{padding-bottom:3px}.camera-on .writing-area textarea{height:52px;font-size:22px;padding:4px 0}.camera-on .play-controls{margin-top:-6px;padding-right:0!important}.camera-on .submit-button{height:34px;width:60px}.camera-on .other-toggle{height:24px}.camera-on .feedback{display:none}\n.camera-on .face-camera{left:50%;right:auto;top:calc(var(--app-height,100dvh) - var(--camera-height));width:min(640px,100%);height:var(--camera-height);transform:translateX(-50%);border:0;border-top:1px solid #393044;border-radius:0;box-shadow:none;overflow:hidden}\n.camera-crop{width:100%;height:100%;overflow:hidden}.camera-crop video{transform-origin:center;transition:transform .08s ease-out}.camera-controls{position:absolute;bottom:max(8px,env(safe-area-inset-bottom,0px));left:12px;right:12px;display:flex;align-items:center;gap:12px;padding:5px 8px 5px 12px;background:#10111bbd;border:1px solid #ffffff1a;border-radius:24px;backdrop-filter:blur(12px)}.camera-controls output{min-width:35px;font-size:12px;font-variant-numeric:tabular-nums;color:#eee7f8}.camera-controls input{flex:1;min-width:0;width:100%;height:28px;margin:0;accent-color:#c4a0ff;touch-action:none}.camera-controls .camera-close{position:static;flex-shrink:0;width:28px;height:28px;background:none}\nhtml[data-camera-compact=\"true\"] .app-shell.camera-on{padding-top:6px;padding-bottom:calc(var(--camera-height) + 4px);gap:3px}html[data-camera-compact=\"true\"] .camera-on .app-header{height:24px}html[data-camera-compact=\"true\"] .camera-on .app-header h1{font-size:16px}html[data-camera-compact=\"true\"] .camera-on .game-stage{gap:6px}html[data-camera-compact=\"true\"] .camera-on .target-caption,html[data-camera-compact=\"true\"] .camera-on .target-caption h2{font-size:10px}html[data-camera-compact=\"true\"] .camera-on .meters{gap:4px}html[data-camera-compact=\"true\"] .camera-on .meter-label{margin-bottom:2px}html[data-camera-compact=\"true\"] .camera-on .meter-label h3{font-size:13px}html[data-camera-compact=\"true\"] .camera-on .meter-label strong{font-size:15px}html[data-camera-compact=\"true\"] .camera-on .meter-label>div>span{font-size:10px}html[data-camera-compact=\"true\"] .camera-on .meter-track{height:16px}html[data-camera-compact=\"true\"] .camera-on .meter-compact .meter-track{height:10px}html[data-camera-compact=\"true\"] .camera-on .writing-area{padding-bottom:2px}html[data-camera-compact=\"true\"] .camera-on .writing-area textarea{height:32px;padding:2px 0;font-size:18px;line-height:1.4}html[data-camera-compact=\"true\"] .camera-on .play-controls{margin-top:0}html[data-camera-compact=\"true\"] .camera-on .submit-button{height:28px;width:54px}html[data-camera-compact=\"true\"] .camera-on .skip-button{padding:5px 0}html[data-camera-compact=\"true\"] .camera-on .other-toggle{height:20px;font-size:10px}html[data-camera-compact=\"true\"] .camera-controls{bottom:5px}\n\n.game-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.game-footer .other-toggle{width:auto;gap:5px}.remix-link{color:#cbb9f5;font-size:12px;font-weight:600;white-space:nowrap;padding:8px 0}.camera-on .remix-link{padding:3px 0}html[data-tiny=\"true\"] .remix-link,html[data-camera-compact=\"true\"] .camera-on .remix-link{font-size:10px;padding:3px 0}\n@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}\n</style></head><body><div id=\"root\"></div><script type=\"module\" src=\"./camera.tsx\"></script></body></html>",[],[316,358],"fbc225a9-d964-4b4f-8cc5-62adc84f986f","01a0ab8b-4b52-710b-af46-f091d5d043f7",["D",1789584427747],"/**\n * Checks the budget guard without spending anything. The only mutation it\n * attempts is a reservation for more than the whole budget, which must be\n * refused — so this is safe to run against the live ledger any time.\n *\n * Run it with `run_file` after touching budget.ts.\n */\nimport {\n  BUDGET_USD,\n  estimateInputTokens,\n  getBudget,\n  reserve,\n  USD_PER_INPUT_TOKEN,\n} from \"../budget.ts\";\nimport { QUESTIONS } from \"../questions.ts\";\n\nconst state = await getBudget();\nconsole.log(\n  `budget $${BUDGET_USD.toFixed(2)} · spent $${state.spentUsd.toFixed(4)} over ${state.calls} calls · ${state.inputTokens} input tokens`,\n);\n\n// A reservation for more than the entire budget has to be refused. If this\n// ever printed false it would charge the ledger $2*2, so it must be true.\nconst huge = await reserve(Math.ceil((BUDGET_USD * 2) / USD_PER_INPUT_TOKEN));\nconsole.log(\"over-budget reservation refused:\", !huge.ok);\n\n// The estimate only has to be in the right ballpark — reconcile() corrects the\n// ledger with the real usage right after each call. But if it's low by a lot,\n// concurrent requests get more slack than they should, so keep it close.\nconst questionsJson = JSON.stringify(QUESTIONS).length;\nconsole.log(`questions payload: ${questionsJson} chars`);\nfor (const chars of [0, 500, 4000]) {\n  const est = estimateInputTokens(chars, QUESTIONS);\n  console.log(\n    `  state ${String(chars).padStart(4)} chars → estimate ${String(est).padStart(4)} tokens ($${(est * USD_PER_INPUT_TOKEN).toFixed(6)})`,\n  );\n}\n\nconst full = estimateInputTokens(4000, QUESTIONS);\nconsole.log(\n  `a full budget is ~${Math.floor(BUDGET_USD / (full * USD_PER_INPUT_TOKEN)).toLocaleString()} max-size calls`,\n);",[],[316,268],"a7c02973-bce2-4d97-b493-a1b532d7b098",["D",1789584427747],"directory",[217,218,219,220,221,222,223,224],[316],"e3293c5a-05b9-4870-89ac-94b56f46099d","test-analytics.ts","2bf9640c-b238-11f1-93b6-1607ee4eb77e","b6bf0608-603a-43c0-92ea-804b3f09f8a7",79,["D",1789608975073],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { saveBatch, analyticsReport, validBatch } from \"../analytics.ts\";\nconst id = 'test_' + crypto.randomUUID();\nconst player = { id, test: true, legacyClears: 100, legacySkips: 10 };\nconst e = { id: id+'_1_live', mode:'live',revision:1,round:1,stage:0,status:'open',started:true,hard:false,mixed:false,activeMs:50,edits:1,submits:0,requests:1,failures:0,tokens:0,words:2,points:0,version:'test',targets:[{axis:'tone',low:60,high:80}] };\nfunction assert(v: unknown, s: string) { if (!v) throw new Error(s); }\ntry {\n  assert(!validBatch({player,levels:[{...e, targets:[null]}]}), 'reject null target');\n  await saveBatch({player,levels:[e]});\n  await saveBatch({player,levels:[{...e,revision:2,status:'cleared',points:300}]});\n  await saveBatch({player,levels:[{...e,revision:2,status:'cleared',points:300}]});\n  await saveBatch({player,levels:[{...e,revision:3,tokens:900}]});\n  await saveBatch({player,levels:[e]});\n  const r = await sqlite.execute({sql:'SELECT * FROM analytics_levels WHERE player_id=?',args:[id]});\n  assert(r.rows.length===1,'deduplication');\n  assert(r.rows[0].status==='cleared' && r.rows[0].input_tokens===900 && r.rows[0].points===300,'terminal status and late usage');\n  const p=await sqlite.execute({sql:'SELECT * FROM analytics_players WHERE id=?',args:[id]});\n  assert(p.rows[0].legacy_clears===0,'test history excluded');\n  const report=await analyticsReport();\n  console.log('PASS: validation, duplicate delivery, out-of-order delivery, terminal status, late token attribution, test exclusion');\n} finally {\n  await sqlite.batch([{sql:'DELETE FROM analytics_levels WHERE player_id=?',args:[id]},{sql:'DELETE FROM analytics_players WHERE id=?',args:[id]}]);\n}\n",[],[385,377],"scripts","24a9cd8c-0beb-4b06-bc4b-a27c6935f64f","stats.ts","0e9ca266-b238-11f1-ac54-1607ee4eb77e",72,["D",1789608925810],"// Owner-only execution through Val Town; there is no public stats endpoint.\nimport { analyticsReport } from \"../analytics.ts\";\nconsole.log(JSON.stringify(await analyticsReport(), null, 2));\n",[],[385,387],"ff544410-067d-4964-92d8-be68b279e1c4",["D",1789608925810],[214,215],[385],"67ff8304-73bd-4cc8-87c9-529639c46594","root.tsx","01a0ab8b-4b52-710b-af46-ea90e556bd17",99,["D",1789609780506],12,"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\nconst CSS = `\n*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;overflow:hidden}body{position:fixed;inset:0;background:#10111b;color:#f2eef9;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #c4a0ff;outline-offset:3px}button,a{transition:background .15s,opacity .15s}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}::selection{background:#c4a0ff44}.app-shell{width:min(640px,100%);height:var(--app-height,100dvh);margin:auto;padding:calc(20px + env(safe-area-inset-top,0px)) 26px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;height:38px;flex-shrink:0}.app-header h1{font-size:20px;font-weight:700;letter-spacing:-.7px}.app-header h1>span{color:#b5a0ec;font-size:20px;margin-left:4px}.header-right{display:flex;align-items:center;gap:17px}.score{font-variant-numeric:tabular-nums;color:#c7bddb;font-size:17px;font-weight:550}.menu-button{background:none;border:0;padding:4px 0 4px 8px;font-size:24px;letter-spacing:1px;line-height:1;color:#91879e}.game-stage{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:24px;position:relative}.target-caption{display:flex;align-items:center;justify-content:space-between;color:#837a91;font-size:12px}.target-caption h2{font-size:12px;font-weight:500}.target-caption>span{font-variant-numeric:tabular-nums}.meters{display:flex;flex-direction:column;gap:23px}.meter-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.meter-label>div{display:flex;align-items:baseline;gap:13px;min-width:0}.meter-label h3{font-size:23px;font-weight:550;letter-spacing:-.6px}.meter-label>div>span{font-size:14px;color:#9a90a9;white-space:nowrap;font-variant-numeric:tabular-nums}.meter-label strong{font-size:24px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}.meter-label strong i{font-size:14px;font-style:normal;margin-left:5px}.meter-track{position:relative;height:54px;border-radius:28px;background:#292734;overflow:hidden;isolation:isolate}.meter-fill{position:absolute;inset:0 auto 0 0;transition:width .16s ease-out,background .16s;min-width:0}.target-zone{position:absolute;top:0;bottom:0;border-left:2px solid #e7e2efa8;border-right:2px solid #e7e2efa8;background:#ffffff10}.meter-compact .meter-track{height:34px}.meter-compact .meter-label{margin-bottom:8px}.meter-compact .meter-label h3{font-size:19px}.meter-compact .meter-label strong{font-size:21px}.writing-area{border-bottom:1px solid #413a4e;padding:0 0 8px;transition:border-color .2s}.writing-hit{border-color:#a6f4bb}.writing-area textarea{display:block;width:100%;height:110px;min-height:0;border:0;padding:8px 0;background:transparent;outline:none;resize:none;color:#f6f0fd;font-size:28px;line-height:1.4;letter-spacing:-.6px;caret-color:#bbaaed}.writing-area textarea::placeholder{color:#625b73}.writing-area textarea:disabled{opacity:.6}.play-controls{display:flex;align-items:center;justify-content:space-between;margin-top:-12px}.word-count{font-size:12px;color:#8b8199}.play-actions{display:flex;align-items:center;gap:20px}.skip-button{border:0;background:none;color:#877e96;padding:9px 0;font-size:12px}.submit-button{height:46px;width:70px;border:0;border-radius:24px;background:#2a2636;color:#8c819d;font-size:25px;line-height:1}.submit-button.ready{color:#15341f;background:#a6f4bb}.submit-button:active{transform:scale(.96)}.feedback{position:absolute;bottom:6px;left:0;right:0;height:22px;pointer-events:none;text-align:center;font-size:12px;color:#a295b5}.feedback.success{font-size:20px;font-weight:600;color:#a6f4bb;animation:score-in .2s ease-out}.retry-button{pointer-events:auto;background:none;border:0;color:#ffbfae;font-size:12px}.other-toggle{flex-shrink:0;display:flex;justify-content:center;align-items:center;gap:10px;width:100%;height:38px;background:none;border:0;color:#8f849f;font-size:12px}.other-toggle span{font-size:18px}.modal-backdrop{position:fixed;inset:0;z-index:20;height:var(--app-height,100dvh);display:flex;align-items:center;justify-content:center;background:#090811b8;backdrop-filter:blur(12px);padding:20px;overflow:hidden}.modal-card{width:min(460px,100%);max-height:calc(var(--app-height,100dvh) - 40px);overflow:hidden;padding:24px;background:#1d1928;border:1px solid #393044;border-radius:24px;box-shadow:0 24px 80px #0005;display:flex;flex-direction:column;gap:12px}.modal-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;flex-shrink:0}.modal-title h2{font-size:18px;font-weight:600;letter-spacing:-.4px}.modal-title button{border:0;background:none;font-size:27px;line-height:1;padding:0 0 0 10px;color:#a99ab7}.setting-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:38px;border:0;background:none;text-align:left;font-size:14px}.setting-row>span:last-child{color:#a597b5}.setting-row input{accent-color:#b9a6ec;width:18px;height:18px}.source-link{color:#aa99bc;font-size:12px}.cost-summary{border-top:1px solid #393044;border-bottom:1px solid #393044;padding:13px 0;margin-top:3px;display:flex;flex-direction:column;gap:8px}.cost-summary>div{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#a99bb8}.cost-summary strong{font-weight:500;color:#ddd3e9;font-variant-numeric:tabular-nums}.cost-summary p{font-size:10px;color:#83748e;margin-top:4px}.readings-card{width:min(570px,100%)}.readings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px;min-height:0}.reading{min-width:0}.reading>div:first-child{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#a89ab7}.reading strong{color:#c6b9d4;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reading-track{margin-top:6px;background:#332b3e;height:3px;border-radius:2px;overflow:hidden}.reading-track i{display:block;height:100%;background:#78668d;transition:width .2s}.plain-note{font-size:12px;line-height:1.5;color:#a395b1}.face-camera{position:fixed;z-index:15;right:14px;top:calc(var(--app-height,100dvh) - 112px - env(safe-area-inset-bottom,0px));width:96px;height:96px;background:#1d1928;border:1px solid #b69bc655;border-radius:20px;box-shadow:0 8px 30px #0006;overflow:hidden}.face-camera video{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#181322}.camera-close{position:absolute;top:4px;right:4px;border:0;border-radius:50%;width:24px;height:24px;background:#0007;color:white;font-size:20px;line-height:1}.camera-error{position:fixed;bottom:20px;left:20px;right:20px;z-index:30;background:#492936;padding:14px;border-radius:12px;font-size:12px;display:flex;justify-content:space-between;gap:12px}.camera-error button{background:none;border:0;color:white}@keyframes score-in{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}\n@media(min-width:700px){.game-stage{gap:32px}.app-shell{padding-top:30px;padding-bottom:25px}.writing-area textarea{height:130px}}\n@media(max-width:450px){.app-shell{padding-left:23px;padding-right:23px}.meter-label h3{font-size:21px}.meter-label>div{gap:10px}.meter-label strong{font-size:22px}.meter-label>div>span{font-size:12px}.meter-compact .meter-label h3{font-size:17px}.meter-compact .meter-label strong{font-size:19px}.meter-compact .meter-label>div{gap:8px}.writing-area textarea{font-size:26px;height:100px}.modal-card{padding:20px}.readings-grid{gap:16px 20px}}\nhtml[data-compact=\"true\"] .app-shell{padding-top:12px;padding-bottom:8px;gap:4px}html[data-compact=\"true\"] .app-header{height:30px}html[data-compact=\"true\"] .app-header h1{font-size:17px}html[data-compact=\"true\"] .game-stage{gap:16px}html[data-compact=\"true\"] .meters{gap:15px}html[data-compact=\"true\"] .meter-track{height:36px}html[data-compact=\"true\"] .meter-compact .meter-track{height:24px}html[data-compact=\"true\"] .meter-label{margin-bottom:7px}html[data-compact=\"true\"] .meter-compact .meter-label h3{font-size:15px}html[data-compact=\"true\"] .meter-compact .meter-label strong{font-size:17px}html[data-compact=\"true\"] .writing-area textarea{height:64px;font-size:22px}html[data-compact=\"true\"] .submit-button{height:38px;width:60px}html[data-compact=\"true\"] .feedback{bottom:0;height:17px;font-size:13px}html[data-compact=\"true\"] .other-toggle{height:28px;font-size:11px}html[data-compact=\"true\"] .modal-card{padding:16px;gap:8px}html[data-compact=\"true\"] .setting-row{min-height:30px;font-size:13px}html[data-compact=\"true\"] .cost-summary{gap:5px;padding:9px 0}html[data-compact=\"true\"] .readings-grid{gap:9px 16px}html[data-compact=\"true\"] .reading>div:first-child{font-size:10px;gap:2px}html[data-compact=\"true\"] .reading strong{font-size:11px}\nhtml[data-compact=\"true\"] .camera-on .play-controls{padding-right:64px}\nhtml[data-tiny=\"true\"] .app-shell{padding-top:7px;padding-bottom:4px}html[data-tiny=\"true\"] .game-stage{gap:11px}html[data-tiny=\"true\"] .target-caption{font-size:10px}html[data-tiny=\"true\"] .target-caption h2{font-size:10px}html[data-tiny=\"true\"] .meters{gap:10px}html[data-tiny=\"true\"] .meter-compact .meter-track{height:18px}html[data-tiny=\"true\"] .meter-compact .meter-label{margin-bottom:4px}html[data-tiny=\"true\"] .writing-area textarea{height:42px;font-size:18px}html[data-tiny=\"true\"] .submit-button{height:32px;width:54px}html[data-tiny=\"true\"] .play-controls{margin-top:-5px}html[data-tiny=\"true\"] .other-toggle{height:24px}html[data-tiny=\"true\"] .feedback{display:none}html[data-tiny=\"true\"] .readings-grid{gap:7px 14px}html[data-tiny=\"true\"] .reading>div:first-child{flex-direction:row;align-items:baseline;font-size:9px}html[data-tiny=\"true\"] .reading strong{font-size:9px}html[data-tiny=\"true\"] .reading-track{margin-top:4px;height:2px}\nhtml[data-tiny=\"true\"] .settings-card{padding:10px;gap:2px}html[data-tiny=\"true\"] .settings-card .modal-title{margin-bottom:2px}html[data-tiny=\"true\"] .settings-card .setting-row{min-height:24px;font-size:12px}html[data-tiny=\"true\"] .settings-card .cost-summary{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:8px 0}html[data-tiny=\"true\"] .settings-card .cost-summary>div{flex-direction:column;gap:3px;font-size:10px}html[data-tiny=\"true\"] .settings-card .cost-summary p{grid-column:1/-1;margin-top:0}\n\n.app-shell.camera-on{--camera-height:min(calc(var(--app-height,100dvh) / 2),max(90px,calc(var(--app-height,100dvh) - 280px)));padding-top:12px;padding-bottom:calc(var(--camera-height) + 8px);gap:4px}\n.camera-on .app-header{height:30px}.camera-on .game-stage{gap:12px}.camera-on .meters{gap:12px}.camera-on .meter-label{margin-bottom:6px}.camera-on .meter-label h3{font-size:17px}.camera-on .meter-label strong{font-size:19px}.camera-on .meter-label>div>span{font-size:12px}.camera-on .meter-track{height:32px}.camera-on .meter-compact .meter-track{height:20px}.camera-on .writing-area{padding-bottom:3px}.camera-on .writing-area textarea{height:52px;font-size:22px;padding:4px 0}.camera-on .play-controls{margin-top:-6px;padding-right:0!important}.camera-on .submit-button{height:34px;width:60px}.camera-on .other-toggle{height:24px}.camera-on .feedback{display:none}\n.camera-on .face-camera{left:50%;right:auto;top:calc(var(--app-height,100dvh) - var(--camera-height));width:min(640px,100%);height:var(--camera-height);transform:translateX(-50%);border:0;border-top:1px solid #393044;border-radius:0;box-shadow:none;overflow:hidden}\n.camera-crop{width:100%;height:100%;overflow:hidden}.camera-crop video{transform-origin:center;transition:transform .08s ease-out}.camera-controls{position:absolute;bottom:max(8px,env(safe-area-inset-bottom,0px));left:12px;right:12px;display:flex;align-items:center;gap:12px;padding:5px 8px 5px 12px;background:#10111bbd;border:1px solid #ffffff1a;border-radius:24px;backdrop-filter:blur(12px)}.camera-controls output{min-width:35px;font-size:12px;font-variant-numeric:tabular-nums;color:#eee7f8}.camera-controls input{flex:1;min-width:0;width:100%;height:28px;margin:0;accent-color:#c4a0ff;touch-action:none}.camera-controls .camera-close{position:static;flex-shrink:0;width:28px;height:28px;background:none}\nhtml[data-camera-compact=\"true\"] .app-shell.camera-on{padding-top:6px;padding-bottom:calc(var(--camera-height) + 4px);gap:3px}html[data-camera-compact=\"true\"] .camera-on .app-header{height:24px}html[data-camera-compact=\"true\"] .camera-on .app-header h1{font-size:16px}html[data-camera-compact=\"true\"] .camera-on .game-stage{gap:6px}html[data-camera-compact=\"true\"] .camera-on .target-caption,html[data-camera-compact=\"true\"] .camera-on .target-caption h2{font-size:10px}html[data-camera-compact=\"true\"] .camera-on .meters{gap:4px}html[data-camera-compact=\"true\"] .camera-on .meter-label{margin-bottom:2px}html[data-camera-compact=\"true\"] .camera-on .meter-label h3{font-size:13px}html[data-camera-compact=\"true\"] .camera-on .meter-label strong{font-size:15px}html[data-camera-compact=\"true\"] .camera-on .meter-label>div>span{font-size:10px}html[data-camera-compact=\"true\"] .camera-on .meter-track{height:16px}html[data-camera-compact=\"true\"] .camera-on .meter-compact .meter-track{height:10px}html[data-camera-compact=\"true\"] .camera-on .writing-area{padding-bottom:2px}html[data-camera-compact=\"true\"] .camera-on .writing-area textarea{height:32px;padding:2px 0;font-size:18px;line-height:1.4}html[data-camera-compact=\"true\"] .camera-on .play-controls{margin-top:0}html[data-camera-compact=\"true\"] .camera-on .submit-button{height:28px;width:54px}html[data-camera-compact=\"true\"] .camera-on .skip-button{padding:5px 0}html[data-camera-compact=\"true\"] .camera-on .other-toggle{height:20px;font-size:10px}html[data-camera-compact=\"true\"] .camera-controls{bottom:5px}\n.game-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.game-footer .other-toggle{width:auto;gap:5px}.remix-link{color:#cbb9f5;font-size:12px;font-weight:600;white-space:nowrap;padding:8px 0}.camera-on .remix-link{padding:3px 0}html[data-tiny=\"true\"] .remix-link,html[data-camera-compact=\"true\"] .camera-on .remix-link{font-size:10px;padding:3px 0}\n\n.entry-area{display:contents}.simulation-label{font-size:10px;color:#b9a6ec}\nhtml[data-keyboard=\"true\"] .app-shell{padding:6px 18px;gap:4px}\nhtml[data-keyboard=\"true\"] .app-shell.camera-on{padding-bottom:calc(var(--camera-height) + 6px)}\nhtml[data-keyboard=\"true\"] .app-header{height:24px}\nhtml[data-keyboard=\"true\"] .app-header h1{font-size:16px}\nhtml[data-keyboard=\"true\"] .score{font-size:14px}\nhtml[data-keyboard=\"true\"] .target-caption,html[data-keyboard=\"true\"] .game-footer{display:none}\nhtml[data-keyboard=\"true\"] .game-stage{gap:14px;justify-content:flex-start}\nhtml[data-keyboard=\"true\"] .meters{flex:1;min-height:0;justify-content:center;gap:18px}\nhtml[data-keyboard=\"true\"] .meter-label{margin-bottom:8px}\nhtml[data-keyboard=\"true\"] .meter-label h3{font-size:18px}\nhtml[data-keyboard=\"true\"] .meter-label strong{font-size:20px}\nhtml[data-keyboard=\"true\"] .meter-label>div>span{font-size:12px}\nhtml[data-keyboard=\"true\"] .meter-track{height:44px}\nhtml[data-keyboard=\"true\"] .meter-compact .meter-track{height:24px}\nhtml[data-keyboard=\"true\"] .meter-compact .meter-label h3{font-size:16px}\nhtml[data-keyboard=\"true\"] .meter-compact .meter-label strong{font-size:18px}\nhtml[data-keyboard=\"true\"] .entry-area{display:grid;grid-template-columns:minmax(0,1fr) 48px;grid-template-rows:44px auto;gap:4px 12px;flex-shrink:0}\nhtml[data-keyboard=\"true\"] .writing-area{grid-column:1;grid-row:1;padding:0}\nhtml[data-keyboard=\"true\"] .writing-area textarea{height:43px;padding:7px 0;line-height:28px;font-size:22px;letter-spacing:-.3px;overflow:auto;scrollbar-width:none}\nhtml[data-keyboard=\"true\"] .writing-area textarea::-webkit-scrollbar{display:none}\nhtml[data-keyboard=\"true\"] .play-controls,html[data-keyboard=\"true\"] .play-actions{display:contents}\nhtml[data-keyboard=\"true\"] .submit-button{grid-column:2;grid-row:1;width:48px;height:44px;border-radius:16px}\nhtml[data-keyboard=\"true\"] .word-count{grid-column:1;grid-row:2;align-self:center;font-size:11px}\nhtml[data-keyboard=\"true\"] .skip-button{grid-column:2;grid-row:2;height:24px;padding:0;font-size:11px}\nhtml[data-keyboard=\"true\"] .feedback{position:static;display:block;grid-column:1/-1;font-size:11px;height:auto;min-height:0}\nhtml[data-keyboard=\"true\"] .feedback:empty{display:none}\nhtml[data-keyboard=\"true\"] .camera-on .game-stage{gap:8px}\nhtml[data-keyboard=\"true\"] .camera-on .meters{gap:6px}\nhtml[data-keyboard=\"true\"] .camera-on .meter-label{margin-bottom:3px}\nhtml[data-keyboard=\"true\"] .camera-on .meter-label h3{font-size:13px}\nhtml[data-keyboard=\"true\"] .camera-on .meter-label strong{font-size:15px}\nhtml[data-keyboard=\"true\"] .camera-on .meter-label>div>span{font-size:10px}\nhtml[data-keyboard=\"true\"] .camera-on .meter-track{height:24px}\nhtml[data-keyboard=\"true\"] .camera-on .meter-compact .meter-track{height:12px}\n.meter-label>div{flex:1;flex-wrap:wrap;row-gap:2px}.meter-label h3{overflow-wrap:anywhere}\n.game-stage[data-targets=\"4\"] .meters{gap:12px}\n.game-stage[data-targets=\"4\"] .meter-track{height:25px}\n.game-stage[data-targets=\"4\"] .meter-label h3{font-size:16px}\nhtml[data-keyboard=\"true\"] .game-stage[data-targets=\"4\"] .meters{gap:6px}\nhtml[data-keyboard=\"true\"] .game-stage[data-targets=\"4\"] .meter-label{margin-bottom:3px}\nhtml[data-keyboard=\"true\"] .game-stage[data-targets=\"4\"] .meter-label h3{font-size:13px}\nhtml[data-keyboard=\"true\"] .game-stage[data-targets=\"4\"] .meter-label strong{font-size:15px}\nhtml[data-keyboard=\"true\"] .game-stage[data-targets=\"4\"] .meter-track{height:14px}\nhtml[data-tiny=\"true\"] .game-stage[data-targets=\"4\"] .meters{gap:4px}\nhtml[data-tiny=\"true\"] .game-stage[data-targets=\"4\"] .meter-label>div>span{font-size:10px}\nhtml[data-camera-compact=\"true\"] .camera-on .game-stage[data-targets=\"4\"] .meter-label h3{font-size:11px}\nhtml[data-camera-compact=\"true\"] .camera-on .game-stage[data-targets=\"4\"] .meter-track{height:8px}\n@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}\n`;\nexport function Root() {\n  return <>{raw(\"<!DOCTYPE html>\")}<html lang=\"en\"><head><meta charSet=\"UTF-8\" /><meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content\" /><meta name=\"theme-color\" content=\"#10111b\" /><title>JevHero</title><meta name=\"description\" content=\"Text classification game powered by Jev.\" /><meta name=\"robots\" content=\"noindex,nofollow\" /><meta property=\"og:title\" content=\"JevHero\" /><meta property=\"og:description\" content=\"Text classification game powered by Jev.\" /><style>{raw(CSS)}</style><link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" /></head><body><div id=\"root\" /><noscript>JavaScript required.</noscript><script src=\"https://esm.town/v/std/catch\" /><script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" /></body></html></>;\n}\n",[],[182,399],"eb44063a-c0e7-4ee8-bdaf-fa3c72fe3980","index.tsx","01a0ab8b-4b52-710b-af46-e7195c1577b7",["D",1789584427747],"/** @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(<App />);",[],[182,408],["D",1789585321456],[],[182,70],"49866687-54dd-40ba-959f-3494cca4a798","useLevelAnalytics.ts","0f05cafc-b238-11f1-9ce0-1607ee4eb77e","01a0ab8b-4b52-710b-af46-dc00e3b90d77",97,["D",1789609779608],3,"import { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { GAME_VERSION, wordCount } from \"./game.ts\";\n\nconst VERSION = GAME_VERSION;\nfunction read(key: string, fallback: any) { try { return JSON.parse(localStorage.getItem(key) || \"null\") ?? fallback; } catch { return fallback; } }\nfunction write(key: string, value: any) { try { localStorage.setItem(key, JSON.stringify(value)); } catch {} }\nfunction createTracker(legacy: any) {\n  const test = new URLSearchParams(location.search).get(\"analytics\") === \"test\";\n  const key = `jevhero-analytics-v1${test ? \"-test\" : \"\"}`;\n  const saved = read(key, null);\n  const player = saved?.player ?? { id: crypto.randomUUID(), test, legacyClears: test ? 0 : legacy.cleared, legacySkips: test ? 0 : legacy.skipped };\n  let queue: Record<string, any> = saved?.queue ?? {};\n  let current: any = saved?.current ?? null;\n  let visible = !document.hidden;\n  let clock = performance.now(), lastCheckpoint = 0, sending = false;\n  const persist = () => write(key, { player, queue, current });\n  const tick = () => {\n    const now = performance.now();\n    if (current?.started && current.status === \"open\" && visible) current.activeMs += Math.round(Math.min(now - clock, 60_000));\n    clock = now;\n  };\n  const enqueue = (e: any) => { e.revision = Math.max(Date.now(), e.revision + 1); queue[e.id] = { ...e }; persist(); };\n  async function flush() {\n    if (sending || !navigator.onLine || !Object.keys(queue).length) return;\n    sending = true;\n    const levels = Object.values(queue).slice(0, 20);\n    try {\n      const response = await fetch(\"/api/events\", { method: \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ player, levels }), keepalive: true });\n      if (!response.ok) return;\n      for (const e of levels) if (queue[e.id]?.revision === e.revision) delete queue[e.id];\n      persist();\n    } catch { return; } finally { sending = false; }\n    if (Object.keys(queue).length) void flush();\n  }\n  const checkpoint = (force = false) => {\n    tick();\n    if (current) { enqueue(current); if (force || Date.now() - lastCheckpoint > 15_000) { lastCheckpoint = Date.now(); void flush(); } }\n  };\n  return {\n    begin(run: any, mode: string | null, hard: boolean, challenge: any) {\n      if (!mode) return;\n      const id = `${player.id}_${VERSION}_${run.seed}_${run.round}_${mode}`;\n      if (current?.id !== id) {\n        if (current) checkpoint(true);\n        current = queue[id] ?? { id, mode, round: run.round, stage: challenge.stage, targets: challenge.targets.map(({ axis, low, high }: any) => ({ axis, low, high })), revision: 0, status: \"open\", started: !!run.text.trim(), hard, mixed: false, activeMs: 0, edits: 0, submits: 0, requests: 0, failures: 0, tokens: 0, words: wordCount(run.text), points: 0, version: VERSION };\n        clock = performance.now(); checkpoint(true);\n      } else if (current.hard !== hard) { current.mixed = true; current.hard = hard; checkpoint(true); }\n    },\n    edit(text: string) { if (!current || current.status !== \"open\") return; tick(); const first = !current.started && !!text.trim(); current.started ||= !!text.trim(); current.edits++; current.words = wordCount(text); checkpoint(first); },\n    submit() { if (current) { current.submits++; checkpoint(); } },\n    finish(status: string, points = 0) { if (!current || current.status !== \"open\") return; tick(); current.status = status; current.points = points; checkpoint(true); },\n    request() {\n      const e = current;\n      if (!e || e.mode !== \"live\") return () => {};\n      e.requests++; checkpoint();\n      return (tokens = 0, failed = false) => { e.tokens += tokens; e.failures += Number(failed); enqueue(e); if (e.status !== \"open\" || Date.now() - lastCheckpoint > 15_000) { lastCheckpoint = Date.now(); void flush(); } };\n    },\n    mount() {\n      const visibility = () => { checkpoint(true); visible = !document.hidden; clock = performance.now(); };\n      const hide = () => { checkpoint(); const levels = Object.values(queue).slice(0, 20); if (levels.length) navigator.sendBeacon(\"/api/events\", new Blob([JSON.stringify({ player, levels })], { type: \"application/json\" })); };\n      document.addEventListener(\"visibilitychange\", visibility); window.addEventListener(\"pagehide\", hide); window.addEventListener(\"online\", flush); void flush();\n      return () => { hide(); document.removeEventListener(\"visibilitychange\", visibility); window.removeEventListener(\"pagehide\", hide); window.removeEventListener(\"online\", flush); };\n    },\n  };\n}\nexport function useLevelAnalytics(run: any, mode: string | null, hard: boolean, challenge: any, legacy: any) {\n  const tracker = useRef<ReturnType<typeof createTracker> | null>(null);\n  if (!tracker.current) tracker.current = createTracker(legacy);\n  useEffect(() => tracker.current!.mount(), []);\n  useEffect(() => { tracker.current!.begin(run, mode, hard, challenge); }, [run.seed, run.round, mode, hard]);\n  return tracker.current;\n}\n",[],[182,427,418],"lib","48513601-9552-4c06-a08b-84c67bd5dc58","useJudge.ts","01a0ab8b-4b52-710b-af46-dbd55ad9ebcd",["D",1789584427747],"import { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { JudgeResponse, JudgeState } from \"./types.ts\";\n\n/**\n * Long enough to coalesce a burst of keystrokes, short enough to feel live.\n * Kept low because the server adds ~300ms: at 180ms the round trip read as\n * laggy, and the abort below already handles the extra requests.\n */\nconst DEBOUNCE_MS = 120;\n\nconst IDLE: JudgeState = {\n  data: null,\n  ms: null,\n  asking: false,\n  error: null,\n  budget: null,\n};\n\n/**\n * Re-ask every question whenever the text changes. Each change cancels the\n * pending debounce and aborts any request still in flight, so a fast typist\n * never queues up stale work — and the panel keeps showing the last answer\n * while the next one is on the wire.\n *\n * Once the demo's budget is spent the hook stops asking on its own and holds\n * the last answers on screen: further requests could only come back 429, and\n * the server's ledger is the only thing that knows.\n */\nexport function useJudge(text: string): JudgeState {\n  const [state, setState] = useState<JudgeState>(IDLE);\n  const exhausted = state.budget?.exhausted ?? false;\n\n  useEffect(() => {\n    if (!text.trim()) {\n      // Keep the budget — it outlives any one piece of text. Returning IDLE\n      // itself, rather than a copy, lets React skip the re-render.\n      setState((s) => (s.budget === null ? IDLE : { ...IDLE, budget: s.budget }));\n      return;\n    }\n\n    if (exhausted) {\n      setState((s) => (s.asking ? { ...s, asking: false } : s));\n      return;\n    }\n\n    const ctrl = new AbortController();\n    const timer = setTimeout(async () => {\n      setState((s) => ({ ...s, asking: true, error: null }));\n      const started = performance.now();\n      try {\n        const res = await fetch(\"/api/judge\", {\n          method: \"POST\",\n          headers: { \"Content-Type\": \"application/json\" },\n          body: JSON.stringify({ text }),\n          signal: ctrl.signal,\n        });\n        const data = await res.json();\n        if (ctrl.signal.aborted) return;\n        if (!res.ok) {\n          // A refusal still carries the ledger, which is how we find out the\n          // budget ran out mid-session rather than at page load.\n          setState((s) => ({\n            ...s,\n            asking: false,\n            error: data?.error ?? `HTTP ${res.status}`,\n            budget: data?.budget ?? s.budget,\n          }));\n          return;\n        }\n        setState({\n          data: data as JudgeResponse,\n          ms: Math.round(performance.now() - started),\n          asking: false,\n          error: null,\n          budget: (data as JudgeResponse).budget ?? null,\n        });\n      } catch (err) {\n        if ((err as Error)?.name === \"AbortError\") return;\n        setState((s) => ({ ...s, asking: false, error: String(err) }));\n      }\n    }, DEBOUNCE_MS);\n\n    return () => {\n      clearTimeout(timer);\n      ctrl.abort();\n    };\n  }, [text, exhausted]);\n\n  return state;\n}",[],[182,427,429],"39e997e6-9e64-441c-921d-02ffddcf941a","useHeroJudge.ts","13b54d7a-b201-11f1-b88f-1607ee4eb77e",95,["D",1789609778653],"import { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { AXES, GAME_VERSION, simulate, type Levels, type Mode } from \"./game.ts\";\nimport type { Answer } from \"./types.ts\";\n\ntype Result = { text: string; levels: Levels; answers: Record<string, Answer> | null; ms: number; mode: Mode };\ntype State = { result: Result | null; error: string | null; blocked: boolean; busy: boolean };\n\nexport function useHeroJudge(text: string, mode: Mode | null, onUsage: (tokens: number) => void, onRequest?: () => (tokens?: number, failed?: boolean) => void) {\n  const normalized = text.trim();\n  const desired = useRef({ text: normalized, mode });\n  desired.current = { text: normalized, mode };\n  const [state, setState] = useState<State>({ result: null, error: null, blocked: false, busy: false });\n  const [wake, setWake] = useState(0);\n  const busy = useRef(false);\n  const mounted = useRef(true);\n  const lastStart = useRef(0);\n  const cache = useRef(new Map<string, Result>());\n  const controller = useRef<AbortController | null>(null);\n  const usageCallback = useRef(onUsage);\n  usageCallback.current = onUsage;\n  const requestCallback = useRef(onRequest);\n  requestCallback.current = onRequest;\n\n  useEffect(() => {\n    mounted.current = true;\n    return () => { mounted.current = false; controller.current?.abort(); };\n  }, []);\n\n  useEffect(() => {\n    setState({ result: null, error: null, blocked: false, busy: false });\n  }, [mode]);\n\n  useEffect(() => {\n    if (!normalized || !mode || state.blocked) return;\n    const delay = Math.min(130, Math.max(0, 450 - (performance.now() - lastStart.current)));\n    const timer = setTimeout(async () => {\n      if (busy.current || !mounted.current) return;\n      const key = `${mode}:${normalized}`;\n      const cached = cache.current.get(key);\n      if (cached) { setState({ result: cached, error: null, blocked: false, busy: false }); return; }\n      busy.current = true;\n      lastStart.current = performance.now();\n      setState(s => ({ ...s, busy: true, error: null }));\n      const ctrl = new AbortController();\n      controller.current = ctrl;\n      const timeout = setTimeout(() => ctrl.abort(), 14_000);\n      const report = mode === \"live\" ? requestCallback.current?.() : undefined;\n      let usedTokens = 0, failed = false;\n      try {\n        let levels: Levels;\n        let answers: Record<string, Answer> | null = null;\n        if (mode === \"soundcheck\") {\n          levels = simulate(normalized);\n        } else {\n          const response = await fetch(\"/api/judge\", {\n            method: \"POST\", headers: { \"Content-Type\": \"application/json\" },\n            body: JSON.stringify({ text: normalized, gameVersion: GAME_VERSION }), signal: ctrl.signal,\n          });\n          const data = await response.json();\n          if (!response.ok) throw new Error(data.error || \"The judge could not hear you. Try again.\");\n          if (Number.isInteger(data.usage?.input_tokens) && data.usage.input_tokens >= 0) { usedTokens = data.usage.input_tokens; usageCallback.current(usedTokens); }\n          levels = data.levels;\n          answers = data.answers;\n          if (!levels || Object.keys(AXES).some(id => typeof levels[id] !== \"number\" || !Number.isFinite(levels[id]))) {\n            throw new Error(\"The judge sent an incomplete result. Try again.\");\n          }\n        }\n        const result = { text: normalized, levels, answers, mode, ms: Math.round(performance.now() - lastStart.current) };\n        cache.current.set(key, result);\n        if (cache.current.size > 80) cache.current.delete(cache.current.keys().next().value!);\n        if (mounted.current && desired.current.text === normalized && desired.current.mode === mode) {\n          setState({ result, error: null, blocked: false, busy: false });\n        }\n      } catch (err) {\n        failed = true;\n        if (mounted.current && desired.current.mode === mode) {\n          const error = ctrl.signal.aborted ? \"The judge took too long. Try again when you’re ready.\" : (err as Error).message;\n          console.warn(\"[JevHero] analysis paused\", { error });\n          setState(s => ({ ...s, error, blocked: true, busy: false }));\n        }\n      } finally {\n        report?.(usedTokens, failed);\n        clearTimeout(timeout);\n        busy.current = false;\n        if (mounted.current) {\n          setState(s => ({ ...s, busy: false }));\n          if (desired.current.text !== normalized || desired.current.mode !== mode) setWake(n => n + 1);\n        }\n      }\n    }, delay);\n    return () => clearTimeout(timer);\n  }, [normalized, mode, wake, state.blocked]);\n\n  const fresh = !!normalized && !!mode && !state.blocked && state.result?.text === normalized && state.result?.mode === mode;\n  return {\n    ...state, fresh,\n    levels: normalized && state.result?.mode === mode ? state.result.levels : null,\n    pending: !!normalized && !!mode && !fresh && !state.blocked,\n    retry: () => { setState(s => ({ ...s, blocked: false, error: null })); setWake(n => n + 1); },\n  };\n}\n",[],[182,427,436],"85ae19e7-7aad-4dd7-be7e-04324c85361b","useChanges.ts","01a0ab8b-4b52-710b-af46-d7a9df7c1eea",["D",1789584427747],"import { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { deltaText, isMeaningful } from \"./display.ts\";\nimport type { Answer, QuestionMeta } from \"./types.ts\";\n\n/** How long a row stays lit after a meaningful change. */\nconst HOLD_MS = 1800;\n\nexport type Changes = {\n  changed: Record<string, boolean>;\n  delta: Record<string, string>;\n};\n\nconst NONE: Changes = { changed: {}, delta: {} };\n\n/**\n * Watch the answers and light up the rows whose judgment actually moved. This\n * is the whole demo: without it, 16 bars twitch at once and the eye has nothing\n * to follow. Rows stay lit for HOLD_MS, so a change is visible even at typing\n * speed.\n */\nexport function useChanges(\n  answers: Record<string, Answer> | undefined,\n  meta: QuestionMeta[],\n): Changes {\n  const prev = useRef<Record<string, Answer>>({});\n  const timers = useRef<Record<string, ReturnType<typeof setTimeout>>>({});\n  const [state, setState] = useState<Changes>(NONE);\n\n  useEffect(() => {\n    if (!answers) return;\n\n    const changed: string[] = [];\n    const delta: Record<string, string> = {};\n    for (const m of meta) {\n      const before = prev.current[m.id];\n      const after = answers[m.id];\n      if (!isMeaningful(before, after)) continue;\n      changed.push(m.id);\n      const text = deltaText(m, before!, after!);\n      if (text) delta[m.id] = text;\n    }\n    prev.current = { ...answers };\n    if (!changed.length) return;\n\n    setState((s) => ({\n      changed: { ...s.changed, ...Object.fromEntries(changed.map((id) => [id, true])) },\n      delta: { ...s.delta, ...delta },\n    }));\n\n    // Deliberately not cleaned up on re-run: a row lit at t=0 must still be lit\n    // at t=200ms, when the next answer arrives and this effect runs again.\n    for (const id of changed) {\n      clearTimeout(timers.current[id]);\n      timers.current[id] = setTimeout(() => {\n        setState((s) => {\n          const next = { ...s.changed };\n          delete next[id];\n          return { ...s, changed: next };\n        });\n      }, HOLD_MS);\n    }\n  }, [answers, meta]);\n\n  return state;\n}",[],[182,427,444],"ae5055ae-3f8a-42d6-8614-d3c42863ba56","types.ts","01a0ab8b-4b52-710b-af46-d28de3673d68",["D",1789584427747],"/**\n * Client-side mirror of the shapes /api/questions and /api/judge return.\n * Kept separate from the server's typesafe.ts so each side stands alone.\n */\n\nexport type GroupId = \"what\" | \"lands\" | \"who\";\n\nexport type Group = {\n  id: GroupId;\n  title: string;\n  blurb: string;\n};\n\nexport type QuestionMeta = {\n  id: string;\n  label: string;\n  group: GroupId;\n  type: \"noul\" | \"choice\" | \"score\";\n  criteria: string[] | Record<string, string | null> | null;\n};\n\nexport type NoulAnswer = { type: \"noul\"; noul: number };\n\nexport type ChoiceAnswer = {\n  type: \"choice\";\n  choice: string;\n  probabilities: Record<string, number>;\n  confidence: number;\n};\n\nexport type ScoreAnswer = {\n  type: \"score\";\n  score: number;\n  legend: Record<string, string>;\n  probabilities: Record<string, number>;\n  confidence: number;\n};\n\nexport type Answer = NoulAnswer | ChoiceAnswer | ScoreAnswer;\n\n/** The server's spend ledger. See budget.ts — the demo has a hard dollar cap. */\nexport type Budget = {\n  budgetUsd: number;\n  spentUsd: number;\n  remainingUsd: number;\n  inputTokens: number;\n  calls: number;\n  exhausted: boolean;\n};\n\nexport type JudgeResponse = {\n  answers: Record<string, Answer>;\n  usage: { input_tokens: number; output_tokens: number };\n  model: string;\n  budget: Budget;\n  serverMs: number;\n};\n\n/** The last answer we got, plus whether a newer one is in flight. */\nexport type JudgeState = {\n  data: JudgeResponse | null;\n  /** Round trip, measured in the browser. */\n  ms: number | null;\n  asking: boolean;\n  error: string | null;\n  /**\n   * Latest spend ledger. Outlives any one answer, and arrives on refusals too\n   * (a 429 for budget carries it), which is how the UI learns to stop asking.\n   */\n  budget: Budget | null;\n};",[],[182,427,451],"21c23d7a-4534-4f8a-be1d-332ee322b5dc","presets.ts","01a0ab8b-4b52-710b-af46-cc95191d33f1",["D",1789584427747],"/** Sample texts. Each one lights up a different part of the panel. */\nexport const PRESETS: { label: string; text: string }[] = [\n  {\n    label: \"Passive-aggressive\",\n    text:\n      \"Per my last email, I just want to make sure we're aligned on the deliverables. \" +\n      \"Happy to hop on a call if that's easier for you!\",\n  },\n  {\n    label: \"AI-written\",\n    text:\n      \"I hope this message finds you well! I wanted to circle back on our previous \" +\n      \"conversation regarding the proposed timeline. Please don't hesitate to reach out \" +\n      \"if you have any questions.\",\n  },\n  {\n    label: \"Legal clause\",\n    text:\n      \"The Company may, at its sole discretion, amend these Terms at any time without \" +\n      \"prior notice. Continued use of the Service constitutes acceptance of the revised Terms.\",\n  },\n  {\n    label: \"Hot take\",\n    text:\n      \"Honestly, if your agent needs 12 tools to book a flight, it isn't an agent — \" +\n      \"it's a Rube Goldberg machine with an API key.\",\n  },\n  {\n    label: \"Angry customer\",\n    text:\n      \"I've been charged twice for order A-104 and nobody has replied in three days. \" +\n      \"This is unacceptable and I want a refund today.\",\n  },\n];",[],[182,427,458],"0ce83b24-eaf5-48fb-8b3d-1d4dbcd1d886","131a6b16-b201-11f1-b084-1607ee4eb77e",93,["D",1789609777724],"export type AxisId = \"asks_question\" | \"asks_for_action\" | \"makes_promise\" | \"states_opinion\" | \"checkable_claim\" | \"names_specifics\" | \"expresses_emotion\" | \"starts_argument\" | \"gets_a_reply\" | \"tone\" | \"urgency\" | \"conviction\" | \"formality\" | \"passive_aggressive\";\nexport type Mode = \"live\" | \"soundcheck\";\nexport type Levels = Record<AxisId, number>;\nexport type Target = { axis: AxisId; low: number; high: number };\nexport type Challenge = { id: string; title: string; targets: Target[]; rating: number; stage: number };\n\nexport const AXES: Record<AxisId, { label: string; low: string; high: string; color: string; hint: string; kind: string }> = {\n  asks_question: { label: \"Asks a question\", low: \"No\", high: \"Yes\", color: \"#a7baff\", hint: \"\", kind: \"likelihood\" },\n  asks_for_action: { label: \"Asks for action\", low: \"No\", high: \"Yes\", color: \"#a7baff\", hint: \"\", kind: \"likelihood\" },\n  makes_promise: { label: \"Makes a promise\", low: \"No\", high: \"Yes\", color: \"#a7baff\", hint: \"\", kind: \"likelihood\" },\n  states_opinion: { label: \"States an opinion\", low: \"No\", high: \"Yes\", color: \"#a7baff\", hint: \"\", kind: \"likelihood\" },\n  checkable_claim: { label: \"Checkable claim\", low: \"No\", high: \"Yes\", color: \"#a7baff\", hint: \"\", kind: \"likelihood\" },\n  names_specifics: { label: \"Names specifics\", low: \"No\", high: \"Yes\", color: \"#a7baff\", hint: \"\", kind: \"likelihood\" },\n  expresses_emotion: { label: \"Expresses emotion\", low: \"No\", high: \"Yes\", color: \"#a7baff\", hint: \"\", kind: \"likelihood\" },\n  starts_argument: { label: \"Would start an argument\", low: \"No\", high: \"Yes\", color: \"#a7baff\", hint: \"\", kind: \"likelihood\" },\n  gets_a_reply: { label: \"Would get a reply\", low: \"No\", high: \"Yes\", color: \"#a7baff\", hint: \"\", kind: \"likelihood\" },\n  tone: { label: \"Warmth\", low: \"Ice cold\", high: \"Heart eyes\", color: \"#ff9275\", hint: \"Gratitude and affection raise warmth. A flat statement cools it down.\", kind: \"scale\" },\n  urgency: { label: \"Urgency\", low: \"Whenever\", high: \"RIGHT NOW\", color: \"#c4a0ff\", hint: \"A deadline raises urgency. ‘Whenever you have time’ lowers it.\", kind: \"scale\" },\n  conviction: { label: \"Conviction\", low: \"Maybe…\", high: \"No doubt\", color: \"#79d8ff\", hint: \"‘Definitely’ commits. ‘Maybe’, ‘might’ and ‘I think’ hedge.\", kind: \"scale\" },\n  formality: { label: \"Formality\", low: \"Group chat\", high: \"Legal counsel\", color: \"#ffc969\", hint: \"Slang lowers formality. Complete, courteous sentences raise it.\", kind: \"scale\" },\n  passive_aggressive: { label: \"Passive-aggressive\", low: \"Straightforward\", high: \"Sure. Whatever.\", color: \"#ff8cce\", hint: \"Try polite words with an irritated subtext. Direct requests lower this meter.\", kind: \"likelihood\" },\n};\n\nexport const DIFFICULTY: Record<AxisId, number> = {\"tone\":1,\"urgency\":1,\"conviction\":1,\"formality\":1,\"passive_aggressive\":1,\"asks_question\":1,\"asks_for_action\":2,\"makes_promise\":2,\"states_opinion\":2,\"checkable_claim\":2,\"names_specifics\":2,\"expresses_emotion\":2,\"starts_argument\":2,\"gets_a_reply\":2};\nexport const SKIPPED_CLASSIFIERS = [\"reads_ai_written\", \"audience\"];\nexport const GAME_VERSION = \"weighted-v2\";\nexport const STAGES = [\n  { name: \"Warm-up\", subtitle: \"One meter. Find your range.\", start: 0, end: 2, axes: 1, width: 30, rating: 800 },\n  { name: \"Opening act\", subtitle: \"Same instrument. A smaller sweet spot.\", start: 2, end: 3, axes: 1, width: 20, rating: 1050 },\n  { name: \"Duet\", subtitle: \"Two feelings. One sentence.\", start: 3, end: 5, axes: 2, width: 24, rating: 1300 },\n  { name: \"Headliner\", subtitle: \"Get all three meters in harmony.\", start: 5, end: 8, axes: 3, width: 20, rating: 1550 },\n  { name: \"Endless encore\", subtitle: \"Three targets. Ten-point windows. No finale.\", start: 8, end: 11, axes: 3, width: 10, rating: 1750 },\n  { name: \"Four slots\", subtitle: \"\", start: 11, end: Infinity, axes: 4, width: 16, rating: 1950 },\n];\n\nexport function stageFor(cleared: number): number {\n  return STAGES.findIndex(s => cleared >= s.start && cleared < s.end);\n}\n\nconst SOLOS: [AxisId, number, string][] = [\n  [\"urgency\", 85, \"Make it yesterday\"], [\"tone\", 80, \"A little love\"],\n  [\"conviction\", 85, \"Say it with your chest\"], [\"formality\", 20, \"The group chat\"],\n  [\"urgency\", 20, \"Absolutely no rush\"], [\"tone\", 50, \"Room temperature\"],\n  [\"conviction\", 25, \"Maybe, possibly, perhaps\"], [\"formality\", 75, \"Put on a blazer\"],\n];\nconst CHORDS: { title: string; values: Partial<Levels> }[] = [\n  { title: \"A very polite emergency\", values: { tone: 65, urgency: 76, formality: 65 } },\n  { title: \"Confidently unbothered\", values: { conviction: 88, urgency: 5, formality: 33 } },\n  { title: \"Warm, with reservations\", values: { tone: 69, conviction: 28, formality: 59 } },\n  { title: \"The diplomatic nudge\", values: { formality: 71, urgency: 50, passive_aggressive: 68 } },\n  { title: \"Ice-cold certainty\", values: { tone: 21, conviction: 94, formality: 56 } },\n  { title: \"Effortlessly chill\", values: { tone: 75, urgency: 22, formality: 38 } },\n  { title: \"Bless your heart\", values: { passive_aggressive: 79, formality: 69, conviction: 98 } },\n  { title: \"Respectfully, hurry up\", values: { urgency: 75, formality: 69, passive_aggressive: 29 } },\n];\n\nfunction random(seed: number) {\n  let x = seed | 0;\n  return () => { x += 0x6D2B79F5; let n = Math.imul(x ^ x >>> 15, 1 | x); n ^= n + Math.imul(n ^ n >>> 7, 61 | n); return ((n ^ n >>> 14) >>> 0) / 4294967296; };\n}\n\nfunction shuffled<T>(items: T[], rng: () => number): T[] {\n  const result = [...items];\n  for (let i = result.length - 1; i > 0; i--) {\n    const j = Math.floor(rng() * (i + 1));\n    [result[i], result[j]] = [result[j], result[i]];\n  }\n  return result;\n}\n\n// Each run gets a different shuffle, not a rotation through one fixed sequence.\nfunction choose<T>(items: T[], round: number, seed: number, stage: number): T {\n  const cycle = Math.floor((round - 1) / items.length);\n  const rng = random(seed ^ Math.imul(stage + 1, 7919) ^ Math.imul(cycle + 1, 104729));\n  return shuffled(items, rng)[(round - 1) % items.length];\n}\n\n\nconst PROFILES: Partial<Levels>[] = [\n  ...CHORDS.map(c => ({conviction: 85, ...c.values})),\n  { asks_question: 100, asks_for_action: 100, gets_a_reply: 100, tone: 75, urgency: 70, formality: 65, conviction: 65 },\n  { makes_promise: 100, conviction: 90, urgency: 55, tone: 70, formality: 55, asks_question: 0, names_specifics: 100 },\n  { states_opinion: 100, starts_argument: 100, tone: 20, conviction: 90, formality: 40, asks_question: 0, passive_aggressive: 0 },\n  { checkable_claim: 100, names_specifics: 100, conviction: 85, tone: 50, formality: 65, urgency: 0, asks_question: 0 },\n  { expresses_emotion: 100, states_opinion: 100, tone: 85, conviction: 85, urgency: 0, formality: 30, asks_question: 0 },\n  { asks_for_action: 0, makes_promise: 0, expresses_emotion: 0, tone: 50, conviction: 85, urgency: 0, formality: 60, asks_question: 0 },\n  { starts_argument: 0, gets_a_reply: 0, names_specifics: 0, tone: 50, urgency: 0, formality: 45, conviction: 55, asks_question: 0 },\n  { states_opinion: 0, checkable_claim: 0, tone: 80, formality: 35, urgency: 0, asks_question: 100 },\n];\nconst POOLS = new Map<number, [AxisId, number][][]>();\nexport function weightedSubsets(values: [AxisId, number][], budget: number, weights: Record<string, number> = DIFFICULTY) {\n  const results: [AxisId, number][][] = [];\n  function visit(index: number, remaining: number, selected: [AxisId, number][]) {\n    if (!remaining) { results.push(selected); return; }\n    for (let i = index; i < values.length; i++) {\n      const cost = weights[values[i][0]];\n      if (cost > 0 && cost <= remaining) visit(i + 1, remaining - cost, [...selected, values[i]]);\n    }\n  }\n  visit(0, budget, []);\n  return results;\n}\nfunction pool(budget: number) {\n  if (!POOLS.has(budget)) {\n    const profiles = [...PROFILES, ...SOLOS.map(([axis, center]) => ({[axis]:center}))];\n    const candidates = profiles.flatMap(p => weightedSubsets(Object.entries(p) as [AxisId, number][], budget));\n    const unique = new Map(candidates.map(v => [JSON.stringify([...v].sort()), v]));\n    POOLS.set(budget, [...unique.values()]);\n  }\n  return POOLS.get(budget)!;\n}\nexport function makeChallenge(cleared: number, round: number, seed: number): Challenge {\n  const stage = stageFor(cleared);\n  const spec = STAGES[stage];\n  const rng = random(seed + round * 1009 + stage * 7919);\n  const candidates = pool(spec.axes);\n  // Balance the possible slot combinations instead of letting the largest pool dominate.\n  const shapes = [...new Set(candidates.map(v => v.map(([axis]) => DIFFICULTY[axis]).sort().join(\"+\")))];\n  const shape = choose(shapes, round, seed, stage);\n  const matching = candidates.filter(v => v.map(([axis]) => DIFFICULTY[axis]).sort().join(\"+\") === shape);\n  const values = shuffled(choose(matching, round, seed ^ 19391, stage), rng);\n  const targets = values.map(([axis, center]) => {\n    const width = spec.width;\n    // Binary classifiers start at clear high/low targets; do not jitter away from 0 or 100.\n    const jitter = center === 0 || center === 100 ? 0 : Math.round((rng() - .5) * 6);\n    const low = Math.max(0, Math.min(100 - width, Math.round(center + jitter - width / 2)));\n    return {axis, low, high: low + width};\n  });\n  return {id: `${GAME_VERSION}-${seed}-${round}`, title: \"\", targets, rating: spec.rating, stage};\n}\n\nexport function inRange(value: number | undefined, target: Target): boolean {\n  return typeof value === \"number\" && Number.isFinite(value) && value >= target.low && value <= target.high;\n}\n\nexport function isHit(levels: Partial<Levels> | null, targets: Target[]): boolean {\n  return !!levels && targets.length > 0 && targets.every(t => inRange(levels[t.axis], t));\n}\n\nexport function wordCount(text: string): number {\n  return (text.match(/[\\p{L}\\p{N}]+(?:['’\\-][\\p{L}\\p{N}]+)*/gu) ?? []).length;\n}\n\nexport function award(text: string, targets: Target[], streak: number) {\n  const words = wordCount(text);\n  const base = 100 * targets.reduce((sum, t) => sum + DIFFICULTY[t.axis], 0);\n  const brevity = Math.max(0, 300 - 15 * words);\n  const multiplier = Math.min(4, 1 + Math.floor(streak / 3));\n  return { words, base, brevity, multiplier, total: (base + brevity) * multiplier };\n}\n\nexport function updateRating(player: number, challenge: number, won: boolean): number {\n  const expected = 1 / (1 + Math.pow(10, (challenge - player) / 400));\n  return Math.round(player + 24 * ((won ? 1 : 0) - expected));\n}\n\n// Deliberately simple local signals: soundcheck verifies the game, not Jev's judgments.\nexport function simulate(text: string): Levels {\n  const t = text.toLowerCase();\n  const score = (base: number, signals: [RegExp, number][]) => {\n    let n = base;\n    for (const [pattern, delta] of signals) n += (t.match(pattern)?.length ?? 0) * delta;\n    return Math.round(Math.max(0, Math.min(100, n)) * 10) / 10;\n  };\n  return {\n    asks_question: /\\?/.test(t) ? 100 : 0,\n    asks_for_action: /please|could you|can you/.test(t) ? 100 : 0,\n    makes_promise: /i will|i promise|i'll/.test(t) ? 100 : 0,\n    states_opinion: /i think|best|worst|in my opinion/.test(t) ? 100 : 0,\n    checkable_claim: /is|was|has|born/.test(t) ? 100 : 0,\n    names_specifics: /[0-9]|monday|london|brazil/.test(t) ? 100 : 0,\n    expresses_emotion: /love|hate|feel|happy|sad|excited/.test(t) ? 100 : 0,\n    starts_argument: /wrong|idiot|stupid|hate/.test(t) ? 100 : 0,\n    gets_a_reply: /\\?/.test(t) ? 100 : 0,\n    tone: score(50, [[/\\b(thank\\w*|love|lovely|wonderful|appreciate|delighted|glad)\\b/g, 18], [/\\b(please|happy|great|dear|kindly)\\b/g, 10], [/\\b(hate|idiot|stupid|terrible|disappointed)\\b/g, -22], [/\\b(fine|whatever|unacceptable)\\b/g, -12]]),\n    urgency: score(15, [[/\\b(now|immediately|urgent|asap|emergency)\\b/g, 65], [/\\b(today|tonight|deadline)\\b/g, 48], [/\\b(soon|tomorrow|quickly)\\b/g, 25], [/\\b(whenever|eventually|relax)\\b|no rush/g, -10]]),\n    conviction: score(55, [[/\\b(definitely|certainly|absolutely|guarantee|must)\\b|no doubt/g, 30], [/\\b(will|know|sure)\\b/g, 16], [/\\b(maybe|perhaps|possibly|might)\\b/g, -25], [/\\b(think|could|probably|seems)\\b/g, -12]]),\n    formality: score(45, [[/\\b(dear|regards|sincerely|pursuant|hereby)\\b/g, 22], [/\\b(please|request|kindly|regarding|appreciate)\\b/g, 12], [/\\b(hey|yo|lol|gonna|wanna|dude|yeah|nah)\\b/g, -20]]),\n    passive_aggressive: score(5, [[/per my last|as i (already|previously)|as previously/g, 65], [/\\b(obviously|again|apparently|finally)\\b/g, 28], [/just a (friendly|gentle) reminder|if you could|must be nice|no worries/g, 30], [/\\b(fine|whatever)\\b/g, 22]]),\n  };\n}\n",[],[182,427,342],"5856a88e-5a30-4a6a-a5a0-63c88dc967c1","display.ts","01a0ab8b-4b52-710b-af46-cb870cfec0a3",["D",1789584427747],"/**\n * How an answer becomes text. Pure, shared by the rows and the change tracker,\n * so a \"meaningful change\" is judged on exactly what the eye sees.\n */\nimport type { Answer, QuestionMeta } from \"./types.ts\";\n\nexport function pct(p: number): string {\n  return `${Math.round(p * 100)}%`;\n}\n\n/** The levels of a score question, in order. */\nexport function levelsOf(meta: QuestionMeta): string[] {\n  return meta.type === \"score\" ? ((meta.criteria as string[]) ?? []) : [];\n}\n\n/** The label for a choice option. */\nfunction choiceLabel(meta: QuestionMeta, key: string): string {\n  const criteria = (meta.criteria as Record<string, string | null>) ?? {};\n  return criteria[key] ?? key;\n}\n\n/** The level a score landed closest to, so the number reads as a judgment. */\nfunction nearestLevel(levels: string[], score: number): string {\n  const i = Math.max(0, Math.min(levels.length - 1, Math.round(score)));\n  return levels[i];\n}\n\n/** The answer, in one word. */\nexport function headline(meta: QuestionMeta, answer?: Answer): string {\n  if (!answer) return \"—\";\n  if (answer.type === \"noul\") return answer.noul >= 0.5 ? \"Yes\" : \"No\";\n  if (answer.type === \"choice\") return choiceLabel(meta, answer.choice);\n  const levels = levelsOf(meta);\n  return levels.length ? nearestLevel(levels, answer.score) : answer.score.toFixed(2);\n}\n\n/** The number beside it, when there is one. Only noul has one. */\nexport function detail(answer?: Answer): string {\n  return answer?.type === \"noul\" ? pct(answer.noul) : \"\";\n}\n\n/**\n * Did this answer change enough to be worth the reader's attention? Thresholds\n * are deliberately coarse: a bar that twitches on every keystroke teaches\n * nothing, so we only flag flips and real moves.\n */\nexport function isMeaningful(\n  prev: Answer | undefined,\n  next: Answer | undefined,\n): boolean {\n  if (!prev || !next || prev.type !== next.type) return false;\n  if (prev.type === \"noul\" && next.type === \"noul\") {\n    return (prev.noul >= 0.5) !== (next.noul >= 0.5) ||\n      Math.abs(prev.noul - next.noul) >= 0.15;\n  }\n  if (prev.type === \"score\" && next.type === \"score\") {\n    return Math.abs(prev.score - next.score) >= 0.75;\n  }\n  if (prev.type === \"choice\" && next.type === \"choice\") {\n    return prev.choice !== next.choice;\n  }\n  return false;\n}\n\n/** \"45% → 73%\" — the receipt for a flash. Empty when there's nothing to show. */\nexport function deltaText(\n  meta: QuestionMeta,\n  prev: Answer,\n  next: Answer,\n): string {\n  if (prev.type === \"noul\" && next.type === \"noul\") {\n    return `${pct(prev.noul)} → ${pct(next.noul)}`;\n  }\n  if (prev.type === \"score\" && next.type === \"score\") {\n    const levels = levelsOf(meta);\n    if (!levels.length) return \"\";\n    const from = nearestLevel(levels, prev.score);\n    const to = nearestLevel(levels, next.score);\n    return from === to ? \"\" : `${from} → ${to}`;\n  }\n  return \"\";\n}",[],[182,427,472],"aaba08ac-8bf0-4a6e-8174-4bc0d4c741af",["D",1789584427747],[202,203,204,205,206,207,208,209],[182,427],"03dfcd41-088c-4a98-bcd3-12a11e024923","OtherReadings.tsx","157bdc5a-b201-11f1-831c-1607ee4eb77e","01a0ab8b-4b52-710b-af46-c6834829dbae",24,["D",1789586909944],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { PUBLIC_QUESTIONS } from \"../../questions.ts\";\nimport { headline } from \"../lib/display.ts\";\nimport type { Answer, QuestionMeta } from \"../lib/types.ts\";\nimport type { AxisId, Mode } from \"../lib/game.ts\";\nexport function OtherReadings({ answers, active, mode, fresh, open, onToggle }: { answers: Record<string, Answer> | null; active: AxisId[]; mode: Mode | null; fresh: boolean; open: boolean; onToggle: (open: boolean) => void }) {\n  const others = PUBLIC_QUESTIONS.filter(q => !active.includes(q.id as AxisId));\n  return <><button className=\"other-toggle\" onClick={() => onToggle(true)} aria-expanded={open}>Other classifications <span>⌄</span></button>\n    {open && <div className=\"modal-backdrop\" onClick={() => onToggle(false)}><section className=\"modal-card readings-card\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Other classifications\" onClick={e => e.stopPropagation()}><div className=\"modal-title\"><h2>Other classifications</h2><button onClick={() => onToggle(false)} aria-label=\"Close classifications\">×</button></div><div className=\"readings-grid\" style={{ opacity: answers && !fresh ? .5 : 1 }}>{others.map(q => {\n      const answer = answers?.[q.id]; const amount = answer?.type === \"noul\" ? answer.noul : answer?.type === \"score\" ? answer.score / (((q.criteria as string[])?.length || 5) - 1) : answer?.type === \"choice\" ? answer.confidence : 0;\n      const value = answer?.type === \"noul\" ? `${Math.round(answer.noul * 100)}%` : answer ? headline(q as QuestionMeta, answer) : \"—\";\n      return <div className=\"reading\" key={q.id}><div><span>{q.label}</span><strong>{value}</strong></div><div className=\"reading-track\"><i style={{ width: `${Math.max(0, Math.min(100, amount * 100))}%` }} /></div></div>;\n    })}</div>{mode === \"soundcheck\" && <p className=\"plain-note\">Live Jev results unavailable</p>}</section></div>}\n  </>;\n}\n",[],[182,491,483],"components","d93e4b0a-af3b-4998-ab8f-27fa19a87a33","Meter.tsx","01a0ab8b-4b52-710b-af46-c0bc08ffb7fb",["D",1789584427747],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Answer, QuestionMeta } from \"../lib/types.ts\";\nimport { detail, headline, levelsOf } from \"../lib/display.ts\";\n\n/**\n * One bar, used by every question. Black fill on a light track, nothing else —\n * no ticks, no dots, no chips, no color scale. If a row needs to say more, it\n * says it in words.\n */\nfunction Bar({ value }: { value: number }) {\n  const width = Math.max(0, Math.min(1, value)) * 100;\n  return (\n    <div className=\"h-2 w-full rounded-full bg-neutral-200\">\n      <div\n        className=\"h-full rounded-full bg-black\"\n        style={{ width: `${width}%`, transition: \"width 300ms\" }}\n      />\n    </div>\n  );\n}\n\n/**\n * How full the bar is. Each question type has one natural \"how much\": for a\n * yes/no it's the probability of yes, for a scale it's how far up the scale,\n * for a choice it's how much the winner won by.\n */\nfunction fill(meta: QuestionMeta, answer?: Answer): number {\n  if (!answer) return 0;\n  if (answer.type === \"noul\") return answer.noul;\n  if (answer.type === \"choice\") return answer.probabilities[answer.choice] ?? 0;\n  const levels = levelsOf(meta);\n  return levels.length > 1 ? answer.score / (levels.length - 1) : 0.5;\n}\n\n/**\n * One question, one row: label, bar, answer. The columns line up down the page\n * so 16 judgments read as a single scan.\n *\n * A row whose answer is \"No\" fades its bar. At a glance you see what the text\n * *is* — the dark bars — rather than 16 equally loud rows.\n */\nexport function Meter(\n  { meta, answer, changed, delta }: {\n    meta: QuestionMeta;\n    answer?: Answer;\n    changed?: boolean;\n    delta?: string;\n  },\n) {\n  const quiet = meta.type === \"noul\" && answer?.type === \"noul\" &&\n    answer.noul < 0.5;\n\n  return (\n    <div\n      data-q={meta.id}\n      data-type={meta.type}\n      data-changed={changed ? \"1\" : undefined}\n      className={`grid grid-cols-[1fr_auto] items-center gap-x-3 gap-y-1 rounded px-2 py-1.5 sm:grid-cols-[10rem_1fr_9rem] ${\n        changed ? \"row-flash\" : \"\"\n      }`}\n    >\n      <span className=\"truncate text-sm text-neutral-500 sm:order-1\">\n        {meta.label}\n      </span>\n\n      <span\n        className=\"flex items-baseline justify-end gap-2 sm:order-3\"\n        data-value\n      >\n        {changed && delta\n          ? <span className=\"truncate text-xs text-neutral-500\">{delta}</span>\n          : <span className=\"text-xs text-neutral-400\">{detail(answer)}</span>}\n        <span\n          className={`truncate text-sm font-semibold ${\n            quiet ? \"text-neutral-400\" : \"text-black\"\n          }`}\n        >\n          {headline(meta, answer)}\n        </span>\n      </span>\n\n      <div\n        data-track\n        className=\"col-span-2 sm:order-2 sm:col-span-1\"\n        style={quiet ? { opacity: 0.35 } : undefined}\n      >\n        <Bar value={fill(meta, answer)} />\n      </div>\n    </div>\n  );\n}",[],[182,491,493],"e0e3dfad-01bf-4791-9522-378da6287007","HeroMeter.tsx","144a10b8-b201-11f1-89f3-1607ee4eb77e",23,["D",1789586908745],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { AXES, inRange, type Target } from \"../lib/game.ts\";\nexport function HeroMeter({ target, value, fresh, compact }: { target: Target; value?: number; fresh: boolean; compact: boolean }) {\n  const axis = AXES[target.axis]; const hit = fresh && inRange(value, target); const color = hit ? \"#a6f4bb\" : axis.color;\n  return <section data-axis={target.axis} data-hit={hit} className={`meter ${compact ? \"meter-compact\" : \"\"}`}>\n    <div className=\"meter-label\"><div><h3>{axis.label}</h3><span>{target.low}–{target.high}%</span></div><strong data-value={value ?? \"\"} style={{ color, opacity: fresh || value === undefined ? 1 : .5 }}>{value === undefined ? \"—\" : `${value.toFixed(1).replace(/\\.0$/, \"\")}%`}{hit && <i>✓</i>}</strong></div>\n    <div className=\"meter-track\" role=\"meter\" aria-label={`${axis.label}, target ${target.low} to ${target.high} percent`} aria-valuemin={0} aria-valuemax={100} aria-valuenow={value} aria-valuetext={value === undefined ? \"No result\" : `${value}%${hit ? \", in range\" : \"\"}`}>\n      <div className=\"meter-fill\" style={{ width: `${value ?? 0}%`, background: color, opacity: fresh ? .85 : .4 }} />\n      <div className=\"target-zone\" style={{ left: `${target.low}%`, width: `${target.high - target.low}%` }} />\n    </div>\n  </section>;\n}\n",[],[182,491,500],"761d7f4f-9d5c-40a3-ba54-b0e2e44b4a31","GameInput.tsx","590b6c66-b20a-11f1-8fd2-1607ee4eb77e",61,["D",1789589293843],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function GameInput({ inputRef, value, onValue, onSubmit, disabled, singleLine, locked }: {\n  inputRef: { readonly current: HTMLTextAreaElement | null };\n  value: string;\n  onValue: (value: string) => void;\n  onSubmit: () => void;\n  disabled: boolean;\n  singleLine: boolean;\n  locked: boolean;\n}) {\n  const committed = useRef(value); committed.current = value;\n  const composing = useRef(false);\n  const [draft, setDraft] = useState<string | null>(null);\n\n  function restore(element: HTMLTextAreaElement) {\n    element.value = committed.current;\n    element.setSelectionRange(element.value.length, element.value.length);\n  }\n  function accept(candidate: string, element: HTMLTextAreaElement) {\n    if ((locked && !candidate.startsWith(committed.current)) || candidate.length > 800) { restore(element); return; }\n    committed.current = candidate;\n    onValue(candidate);\n  }\n  useEffect(() => {\n    const element = inputRef.current;\n    if (!element) return;\n    // Native beforeinput covers touch keyboards and edits that have no keydown.\n    const beforeInput = (event: InputEvent) => {\n      if (!locked || composing.current || event.isComposing) return;\n      if (event.inputType.startsWith(\"delete\") || event.inputType.startsWith(\"history\")) event.preventDefault();\n    };\n    element.addEventListener(\"beforeinput\", beforeInput);\n    return () => element.removeEventListener(\"beforeinput\", beforeInput);\n  }, [inputRef, locked]);\n\n  return <textarea ref={inputRef} id=\"hero-text\" aria-label=\"Your text\" title={locked ? \"Hard mode: no backspacing\" : undefined} disabled={disabled} autoFocus\n    value={draft ?? value} maxLength={800} spellCheck={false} autoComplete=\"off\" autoCorrect={locked ? \"off\" : \"on\"} autoCapitalize=\"sentences\" enterKeyHint=\"go\" rows={1} wrap={singleLine ? \"off\" : \"soft\"}\n    placeholder={disabled ? \"Loading…\" : \"Type…\"}\n    onChange={e => {\n      if (composing.current) {\n        if (!locked || e.target.value.startsWith(committed.current)) setDraft(e.target.value);\n        else { restore(e.target); setDraft(committed.current); }\n      } else accept(e.target.value, e.target);\n    }}\n    onCompositionStart={e => { composing.current = true; if (locked) e.currentTarget.setSelectionRange(value.length, value.length); setDraft(value); }}\n    onCompositionEnd={e => { composing.current = false; accept(e.currentTarget.value, e.currentTarget); setDraft(null); }}\n    onCut={e => { if (locked) e.preventDefault(); }} onDrop={e => { if (locked) e.preventDefault(); }}\n    onPaste={e => {\n      if (!locked) return;\n      e.preventDefault();\n      const text = e.clipboardData.getData(\"text/plain\").replace(/[\\r\\n]+/g, \" \");\n      const candidate = (committed.current + text).slice(0, 800);\n      accept(candidate, e.currentTarget);\n      e.currentTarget.value = candidate;\n      e.currentTarget.setSelectionRange(candidate.length, candidate.length);\n    }}\n    onKeyDown={e => {\n      if (composing.current || e.nativeEvent.isComposing || e.keyCode === 229) return;\n      if (locked && (e.key === \"Backspace\" || e.key === \"Delete\" || ((e.ctrlKey || e.metaKey) && [\"z\", \"y\"].includes(e.key.toLowerCase())))) { e.preventDefault(); return; }\n      if (e.key === \"Enter\" && !e.shiftKey) { e.preventDefault(); if (!e.repeat) onSubmit(); }\n    }} />;\n}\n",[],[182,491,508],"adbfd5bf-4f3b-4f43-8562-aaa832912d9b","CameraPreview.tsx","ca378588-b204-11f1-8c8f-1607ee4eb77e",42,["D",1789587986994],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function CameraPreview({ enabled, onClose }: { enabled: boolean; onClose: () => void }) {\n  const video = useRef<HTMLVideoElement>(null);\n  const close = useRef(onClose); close.current = onClose;\n  const [error, setError] = useState(\"\");\n  const [zoom, setZoom] = useState(() => {\n    try { const saved = Number(localStorage.getItem(\"jevhero-camera-zoom\")); if (Number.isFinite(saved) && saved >= 1 && saved <= 3) return saved; } catch {}\n    return 1;\n  });\n  useEffect(() => { try { localStorage.setItem(\"jevhero-camera-zoom\", String(zoom)); } catch {} }, [zoom]);\n\n  useEffect(() => {\n    if (!enabled) return;\n    let cancelled = false;\n    let stream: MediaStream | null = null;\n    const element = video.current;\n    setError(\"\");\n    async function start() {\n      try {\n        if (!navigator.mediaDevices?.getUserMedia) throw new Error(\"Camera unavailable\");\n        const incoming = await navigator.mediaDevices.getUserMedia({ video: { facingMode: \"user\", width: { ideal: 480 }, height: { ideal: 480 } }, audio: false });\n        if (cancelled) { incoming.getTracks().forEach(track => track.stop()); return; }\n        stream = incoming;\n        if (element) { element.srcObject = incoming; await element.play(); }\n        incoming.getVideoTracks()[0]?.addEventListener(\"ended\", () => { if (!cancelled) close.current(); });\n      } catch (err) {\n        if (cancelled) return;\n        stream?.getTracks().forEach(track => track.stop());\n        setError((err as Error).name === \"NotAllowedError\" ? \"Camera permission denied\" : \"Camera unavailable\");\n        close.current();\n      }\n    }\n    start();\n    return () => { cancelled = true; stream?.getTracks().forEach(track => track.stop()); if (element) element.srcObject = null; };\n  }, [enabled]);\n\n  return <>\n    {enabled && <CameraPanel videoRef={video} zoom={zoom} onZoom={setZoom} onClose={onClose} />}\n    {error && <div className=\"camera-error\" role=\"alert\">{error}<button onClick={() => setError(\"\")} aria-label=\"Dismiss camera error\">×</button></div>}\n  </>;\n}\n\nexport function CameraPanel({ videoRef, zoom, onZoom, onClose }: { videoRef: { readonly current: HTMLVideoElement | null }; zoom: number; onZoom: (zoom: number) => void; onClose: () => void }) {\n  return <aside className=\"face-camera\" aria-label=\"Front camera\">\n      <div className=\"camera-crop\"><video ref={videoRef} autoPlay muted playsInline style={{ transform: `scale(${zoom}) scaleX(-1)` }} /></div>\n      <div className=\"camera-controls\">\n        <output htmlFor=\"camera-zoom\">{zoom.toFixed(1)}×</output>\n        <input id=\"camera-zoom\" type=\"range\" min=\"1\" max=\"3\" step=\"0.1\" value={zoom} aria-label=\"Camera zoom\" aria-valuetext={`${zoom.toFixed(1)} times`} onChange={e => onZoom(Number(e.target.value))} />\n        <button className=\"camera-close\" onMouseDown={e => e.preventDefault()} onClick={onClose} aria-label=\"Close camera\">×</button>\n      </div>\n    </aside>;\n}\n",[],[182,491,516],"36d627f6-37ea-442a-bc73-070b9f8ac49c","App.tsx","01a0ab8b-4b52-710b-af46-be48830e10f8",98,["D",1789609780024],19,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { STAGES, award, isHit, makeChallenge, updateRating, wordCount, type Mode } from \"../lib/game.ts\";\nimport { useLevelAnalytics } from \"../lib/useLevelAnalytics.ts\";\nimport { useHeroJudge } from \"../lib/useHeroJudge.ts\";\nimport { HeroMeter } from \"./HeroMeter.tsx\";\nimport { OtherReadings } from \"./OtherReadings.tsx\";\nimport { CameraPreview } from \"./CameraPreview.tsx\";\nimport { GameInput } from \"./GameInput.tsx\";\n\ntype Costs = { tokens: number; calls: number; cleared: number; skipped: number };\nfunction readCosts(): Costs {\n  try { const data = JSON.parse(localStorage.getItem(\"jevhero-costs-v1\") || \"null\"); if (data && [\"tokens\", \"calls\", \"cleared\", \"skipped\"].every(k => Number.isFinite(data[k]) && data[k] >= 0)) return data; } catch {}\n  return { tokens: 0, calls: 0, cleared: 0, skipped: 0 };\n}\n\ntype Run = { round: number; cleared: number; score: number; streak: number; best: number; seed: number; rating: number; text: string };\nconst newRun = (best = 0): Run => ({ round: 1, cleared: 0, score: 0, streak: 0, best, seed: crypto.getRandomValues(new Uint32Array(1))[0], rating: 900, text: \"\" });\nconst storageKey = (mode: Mode) => `jevhero-v1:${mode}`;\nfunction readRun(mode: Mode): Run {\n  try {\n    const data = JSON.parse(localStorage.getItem(storageKey(mode)) || \"null\");\n    if (data && [\"round\", \"cleared\", \"score\", \"streak\", \"best\", \"seed\", \"rating\"].every(k => Number.isFinite(data[k])) && data.round >= 1 && data.cleared >= 0 && typeof data.text === \"string\") return data;\n  } catch (err) { console.warn(\"[JevHero] progress restore unavailable\", err); }\n  return newRun();\n}\n\nexport function App() {\n  const [mode, setMode] = useState<Mode | null>(null);\n  const [run, setRun] = useState<Run>(() => newRun());\n  const [connecting, setConnecting] = useState(true);\n  const [help, setHelp] = useState(false);\n  const [feedback, setFeedback] = useState(\"\");\n  const [flash, setFlash] = useState(0);\n  const [sound, setSound] = useState(() => { try { return localStorage.getItem(\"jevhero-sound\") !== \"off\"; } catch { return true; } });\n  const [otherOpen, setOtherOpen] = useState(false);\n  const [cameraEnabled, setCameraEnabled] = useState(false);\n  const [keyboardOpen, setKeyboardOpen] = useState(false);\n  const [hardMode, setHardMode] = useState(() => { try { return localStorage.getItem(\"jevhero-hard-mode\") === \"on\"; } catch { return false; } });\n  const [costs, setCosts] = useState<Costs>(readCosts);\n  const input = useRef<HTMLTextAreaElement>(null);\n  const audio = useRef<AudioContext | null>(null);\n  const submitLock = useRef(false);\n  const roundStarted = useRef(Date.now());\n  const challenge = makeChallenge(run.cleared, run.round, run.seed);\n  const analytics = useLevelAnalytics(run, mode, hardMode, challenge, costs);\n  const judge = useHeroJudge(run.text, mode, tokens => setCosts(c => ({ ...c, tokens: c.tokens + tokens, calls: c.calls + 1 })), () => analytics.request());\n  const stage = STAGES[challenge.stage];\n  const allHit = judge.fresh && isHit(judge.levels, challenge.targets);\n  const words = wordCount(run.text);\n\n  const focus = () => input.current?.focus({ preventScroll: true });\n\n  function switchMode(next: Mode) {\n    setRun(readRun(next)); setMode(next); setFeedback(\"\");\n    roundStarted.current = Date.now();\n    console.info(\"[JevHero] mode\", { mode: next });\n  }\n\n  async function checkConnection(initial = false) {\n    setConnecting(true);\n    try {\n      const response = await fetch(\"/api/config\", { cache: \"no-store\" });\n      if (!response.ok) throw new Error(\"Couldn’t check the live judge.\");\n      const config = await response.json();\n      if (initial) switchMode(config.ready ? \"live\" : \"soundcheck\");\n      else if (config.ready) { switchMode(\"live\"); setFeedback(\"\"); }\n      else setFeedback(\"API key missing\");\n    } catch (err) {\n      console.warn(\"[JevHero] connection unavailable\", { type: (err as Error).name });\n      if (initial) switchMode(\"soundcheck\");\n    } finally { setConnecting(false); }\n  }\n\n  useEffect(() => { checkConnection(true); }, []);\n  useEffect(() => { try { localStorage.setItem(\"jevhero-hard-mode\", hardMode ? \"on\" : \"off\"); } catch {} }, [hardMode]);\n  useEffect(() => { try { localStorage.setItem(\"jevhero-sound\", sound ? \"on\" : \"off\"); } catch {} }, [sound]);\n  useEffect(() => { if (!feedback) return; const timer = setTimeout(() => setFeedback(\"\"), 2300); return () => clearTimeout(timer); }, [feedback]);\n  useEffect(() => {\n    const viewport = window.visualViewport;\n    let baselineHeight = window.innerHeight;\n    let baselineWidth = window.innerWidth;\n    const update = () => {\n      const height = viewport?.height ?? window.innerHeight;\n      const width = viewport?.width ?? window.innerWidth;\n      const focused = document.activeElement === input.current;\n      if (Math.abs(window.innerWidth - baselineWidth) > 100) {\n        baselineWidth = window.innerWidth; baselineHeight = window.innerHeight;\n      }\n      if (!focused) baselineHeight = Math.max(baselineHeight, height);\n      const reduced = baselineHeight - height > 120 || window.innerHeight - height > 120;\n      const typing = focused && (reduced || (height < 560 && width < 900));\n      document.documentElement.style.setProperty(\"--app-height\", `${Math.round(height)}px`);\n      document.documentElement.dataset.compact = String(height < 620);\n      document.documentElement.dataset.tiny = String(height < 430);\n      document.documentElement.dataset.cameraCompact = String(height < 760);\n      document.documentElement.dataset.keyboard = String(typing);\n      setKeyboardOpen(typing);\n    };\n    update();\n    viewport?.addEventListener(\"resize\", update); viewport?.addEventListener(\"scroll\", update);\n    window.addEventListener(\"resize\", update);\n    document.addEventListener(\"focusin\", update); document.addEventListener(\"focusout\", update);\n    return () => {\n      viewport?.removeEventListener(\"resize\", update); viewport?.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n      document.removeEventListener(\"focusin\", update); document.removeEventListener(\"focusout\", update);\n    };\n  }, []);\n  useEffect(() => { try { localStorage.setItem(\"jevhero-costs-v1\", JSON.stringify(costs)); } catch {} }, [costs]);\n  useEffect(() => {\n    if (!mode) return;\n    const timer = setTimeout(() => {\n      try { localStorage.setItem(storageKey(mode), JSON.stringify(run)); }\n      catch (err) { console.warn(\"[JevHero] progress save unavailable\", err); }\n    }, 180);\n    return () => clearTimeout(timer);\n  }, [run, mode]);\n  useEffect(() => {\n    const handle = (e: KeyboardEvent) => { if (e.key === \"Escape\") { setHelp(false); setOtherOpen(false); focus(); } };\n    document.addEventListener(\"keydown\", handle);\n    return () => document.removeEventListener(\"keydown\", handle);\n  }, []);\n\n  function chime() {\n    if (!sound) return;\n    try {\n      const context = audio.current ?? new AudioContext(); audio.current = context;\n      context.resume();\n      [261.63, 329.63, 392, 523.25].forEach((frequency, i) => {\n        const oscillator = context.createOscillator(); const gain = context.createGain();\n        const start = context.currentTime + i * 0.045;\n        oscillator.type = \"sine\"; oscillator.frequency.value = frequency;\n        gain.gain.setValueAtTime(0, start); gain.gain.linearRampToValueAtTime(0.045, start + 0.012); gain.gain.exponentialRampToValueAtTime(0.001, start + 0.3);\n        oscillator.connect(gain); gain.connect(context.destination); oscillator.start(start); oscillator.stop(start + 0.32);\n      });\n    } catch (err) { console.warn(\"[JevHero] sound unavailable\", err); }\n  }\n\n  function submit() {\n    if (submitLock.current || !mode) return;\n    analytics.submit();\n    if (!allHit || !words) {\n      setFeedback(judge.pending ? \"Scoring…\" : !run.text.trim() ? \"Enter text\" : \"Outside target\");\n      focus(); return;\n    }\n    submitLock.current = true;\n    setTimeout(() => { submitLock.current = false; }, 160);\n    const result = award(run.text, challenge.targets, run.streak);\n    analytics.finish(\"cleared\", result.total);\n    if (mode === \"live\") setCosts(c => ({ ...c, cleared: c.cleared + 1 }));\n    setFeedback(`+${result.total.toLocaleString()}`);\n    console.info(\"[JevHero] round cleared\", { mode, round: run.round, stage: stage.name, axes: challenge.targets.length, words: result.words, points: result.total, seconds: Math.round((Date.now() - roundStarted.current) / 1000) });\n    setRun(previous => ({ ...previous, round: previous.round + 1, cleared: previous.cleared + 1, score: previous.score + result.total, best: Math.max(previous.best, previous.score + result.total), streak: previous.streak + 1, rating: updateRating(previous.rating, challenge.rating, true), text: \"\" }));\n    roundStarted.current = Date.now(); setFlash(n => n + 1); chime(); focus();\n  }\n\n  function skip() {\n    analytics.finish(\"skipped\");\n    if (mode === \"live\") setCosts(c => ({ ...c, skipped: c.skipped + 1 }));\n    setRun(previous => ({ ...previous, round: previous.round + 1, streak: 0, rating: updateRating(previous.rating, challenge.rating, false), text: \"\" }));\n    setFeedback(\"\"); roundStarted.current = Date.now(); focus();\n    console.info(\"[JevHero] round skipped\", { mode, round: run.round, stage: stage.name });\n  }\n\n  const extraAnswers = run.text.trim() && judge.result?.mode === mode ? judge.result.answers : null;\n  const activeAxes = challenge.targets.map(t => t.axis);\n\n\n  return <div className={`app-shell ${cameraEnabled ? \"camera-on\" : \"\"}`}>\n    <header className=\"app-header\">\n      <h1>JevHero<span>•</span></h1>{keyboardOpen && mode === \"soundcheck\" && <span className=\"simulation-label\">Simulated</span>}\n      <div className=\"header-right\"><span className=\"score\" aria-label={`${run.score} points`}>{run.score.toLocaleString()}</span><button className=\"menu-button\" aria-label=\"Settings\" onClick={() => { setHelp(true); input.current?.blur(); }}>···</button></div>\n    </header>\n    <main data-targets={challenge.targets.length} className={`game-stage ${challenge.targets.length > 1 ? \"multiple\" : \"\"}`}>\n      <div className=\"target-caption\"><h2>Target</h2><span>{mode === \"soundcheck\" ? \"Simulated · \" : \"\"}{run.round}</span></div>\n      <div className=\"meters\">{challenge.targets.map(target => <HeroMeter key={target.axis} target={target} value={judge.levels?.[target.axis]} fresh={judge.fresh} compact={challenge.targets.length > 1} />)}</div>\n      <div className=\"entry-area\"><div className={`writing-area ${allHit ? \"writing-hit\" : \"\"}`}>\n        <GameInput inputRef={input} value={run.text} onValue={text => { analytics.edit(text); setRun(previous => ({ ...previous, text })); }} onSubmit={submit} disabled={!mode} singleLine={keyboardOpen} locked={hardMode} />\n      </div>\n      <div className=\"play-controls\"><span className=\"word-count\">{words} {words === 1 ? \"word\" : \"words\"}{hardMode ? \" · Hard\" : \"\"}</span><div className=\"play-actions\"><button className=\"skip-button\" aria-label=\"Skip target\" onMouseDown={e => e.preventDefault()} onClick={skip}>Skip</button><button type=\"button\" className={`submit-button ${allHit ? \"ready\" : \"\"}`} aria-label=\"Submit\" aria-disabled={!allHit || !words} onMouseDown={e => e.preventDefault()} onClick={submit}>{judge.pending ? \"…\" : allHit ? \"✓\" : \"↵\"}</button></div></div>\n      <div className={`feedback ${feedback.startsWith(\"+\") ? \"success\" : \"\"}`} role=\"status\" aria-live=\"polite\" key={`feedback-${flash}`}>{judge.error ? <button className=\"retry-button\" onClick={judge.retry}>Scoring unavailable · Retry</button> : feedback}</div></div>\n    </main>\n    <footer className=\"game-footer\"><OtherReadings active={activeAxes} answers={extraAnswers} fresh={judge.fresh} mode={mode} open={otherOpen} onToggle={value => { setOtherOpen(value); if (value) input.current?.blur(); }} /><a className=\"remix-link\" href=\"https://www.val.town/x/dcm31/jevhero\" target=\"_blank\" rel=\"noreferrer\">Remix on Val Town <span aria-hidden=\"true\">↗</span></a></footer>\n\n    {help && <div className=\"modal-backdrop\" onClick={() => setHelp(false)}><section className=\"modal-card settings-card\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Settings\" onClick={e => e.stopPropagation()}>\n      <div className=\"modal-title\"><h2>Settings</h2><button onClick={() => setHelp(false)} aria-label=\"Close settings\">×</button></div>\n      <label className=\"setting-row\" title=\"No backspacing\">Hard mode<input type=\"checkbox\" checked={hardMode} onChange={e => setHardMode(e.target.checked)} /></label>\n      <label className=\"setting-row\">Success sound<input type=\"checkbox\" checked={sound} onChange={e => setSound(e.target.checked)} /></label>\n      <label className=\"setting-row\">Front camera<input type=\"checkbox\" checked={cameraEnabled} onChange={e => { setCameraEnabled(e.target.checked); if (e.target.checked) setHelp(false); }} /></label>\n      <button className=\"setting-row\" onClick={() => { analytics.finish(\"restarted\"); setRun(newRun(run.best)); setHelp(false); setFeedback(\"\"); }}>Restart<span>↺</span></button>\n      <button className=\"setting-row\" onClick={() => { setHelp(false); setOtherOpen(true); }}>Other classifications<span>↗</span></button>\n      {mode !== \"live\" && <button className=\"setting-row\" onClick={() => checkConnection()} disabled={connecting}>Check connection<span>{connecting ? \"…\" : \"↗\"}</span></button>}\n      <div className=\"cost-summary\"><div><span>Jev cost</span><strong>${(costs.tokens * .042 / 1e6).toFixed(5)}</strong></div><div><span>Updates</span><strong>{costs.calls.toLocaleString()}</strong></div><div><span>Completed levels</span><strong>{costs.cleared}</strong></div><div><span>Projected levels / $5</span><strong>{costs.tokens > 0 && costs.cleared > 0 ? Math.floor(5 / (costs.tokens * .042 / 1e6 / costs.cleared)).toLocaleString() : \"—\"}</strong></div><p>Local sample · Jev tokens only</p></div>\n      <a className=\"setting-row source-link\" href=\"/source\" target=\"_blank\" rel=\"noreferrer\">Source<span>↗</span></a>\n    </section></div>}\n    <CameraPreview enabled={cameraEnabled} onClose={() => setCameraEnabled(false)} />\n  </div>;\n}\n",[],[182,491,524],"0b00a5b2-64d5-4cd7-9cfd-fa981da2d9ae",["D",1789584427747],[195,196,197,198,199,200],[182,491],"71ee9f36-e75d-4ca5-9e63-265fbd08d70b",["D",1789584427747],[194,201,210,211,212],[182],["D",1789584427747],["D",1789585320332],{"_11":12,"_140":75},{"_11":12,"_135":136,"_74":75,"_30":73,"_137":138,"_139":24},{"_39":123,"_13":16,"_33":36,"_124":85,"_125":65,"_126":127,"_128":89,"_129":130,"_131":132,"_133":14,"_134":12},"ctx",{"_54":-5,"_161":578,"_579":580,"_581":582,"_583":24,"_584":24,"_585":24,"_586":97,"_587":-5,"_588":-7,"_589":-7,"_590":26,"_591":24,"_592":24,"_593":-5,"_594":24,"_595":24,"_596":24,"_597":-5},"ENV",{"_549":550,"_551":552,"_553":16,"_554":555,"_556":557,"_558":559,"_560":561,"_562":563,"_564":565,"_566":567,"_568":569,"_570":571,"_572":573,"_574":575,"_576":577},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","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"]
</article></body></html>

History · favicon.svg