\n \n \n \n\n",[],[209,287],"34f6bc1e-5cc8-11f1-aad0-1607ee4eb77e","device.ts","0fc5dbd6-5cc4-11f1-b9e7-1607ee4eb77e",16,["D",1780215037675],"// The device envelope. Every UI component reads from here, so the web\n// prototype can never accidentally exceed what the ePaper + ESP32 will do.\n// When real hardware specs land, change them HERE and the whole sim follows.\n\nexport const DEVICE = {\n // ePaper panel, portrait. Logical px ~= device px at 1x.\n screen: { w: 296, h: 416 },\n\n // Monochrome only. No colour is reachable on the panel — the sim renders\n // strictly in these two inks so we never design something we can't ship.\n ink: \"#111111\",\n paper: \"#f4f4ee\",\n\n // Capacitive touch on the eInk panel — tap is a real device gesture, not a\n // sim-only convenience. So tapping the card to reveal is faithful.\n touch: true,\n // Three physical buttons, which map exactly to the grade taxonomy.\n // (Touch also unlocks the deferred selection ops — recognise/contrast — later.)\n buttons: 3,\n\n // ePaper is slow. Simulated refresh delays make the rhythm honest:\n // full refresh flashes and is slow; partial refresh (the card flip) is quicker.\n refresh: { full: 700, partial: 200 },\n} as const;\n\n// The three buttons, in fixed order. Doubles as the grade vocabulary.\nexport const GRADES = [\n { key: \"miss\", label: \"Didn't know\" },\n { key: \"almost\", label: \"Almost\" },\n { key: \"got\", label: \"Got it\" },\n] as const;\n\nexport type GradeKey = (typeof GRADES)[number][\"key\"];\n\n// Bearer token. In the sim it's the dev token; on device it's provisioned to\n// firmware. Never entered through this UI — it models a device credential.\nexport const DEVICE_TOKEN = \"dev-token\";\n",[],[209,295],"ea6b3bd2-5d41-11f1-985b-1607ee4eb77e","api.ts","154c8988-5cc4-11f1-a41f-1607ee4eb77e",41,["D",1780267311199],"import { DEVICE_TOKEN, type GradeKey } from \"./device.ts\";\n\n// Models the device's entire network surface: two calls per session.\n// Fetch one batch, post the buffered grades. No per-card round trips.\n\nexport type Card = { id: number; op: string; q: string; a: string };\nexport type Profile = { id: number; label: string };\nexport type Branch = { id: number; label: string };\n\nconst auth = { Authorization: `Bearer ${DEVICE_TOKEN}` };\n\nasync function get(path: string): Promise {\n const r = await fetch(path, { headers: auth });\n if (!r.ok) throw new Error(`${path} → ${r.status}`);\n return r.json();\n}\n\nexport async function fetchProfiles(): Promise {\n return (await get<{ profiles: Profile[] }>(\"/api/profiles\")).profiles;\n}\n\nexport async function fetchBranches(): Promise {\n return (await get<{ branches: Branch[] }>(\"/api/branches\")).branches;\n}\n\nexport type Quadrant = {\n id: number;\n label: string;\n ord: number;\n branch: boolean; // has sub-quadrants (descend) vs leaf (review)\n total: number;\n due: number;\n mastered: number;\n};\n\n// The quadrants at one level: children of `parent`, or the top four for \"root\".\nexport async function fetchQuadrants(profile: number, parent: number | \"root\"): Promise {\n return (await get<{ quadrants: Quadrant[] }>(`/api/quadrants/${profile}/${parent}`)).quadrants;\n}\n\n// One fetch at session start: the windowed due batch for this profile + branch.\nexport async function fetchSession(profile: number, branch: number): Promise {\n return (await get<{ cards: Card[] }>(`/api/session/${profile}/${branch}`)).cards;\n}\n\n// One post at session end: all buffered grades together.\nexport async function postGrades(\n profile: number,\n grades: { id: number; grade: GradeKey }[],\n): Promise {\n const r = await fetch(\"/api/grades\", {\n method: \"POST\",\n headers: { ...auth, \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ profile, grades }),\n });\n if (!r.ok) throw new Error(`/api/grades → ${r.status}`);\n return (await r.json()).applied;\n}\n",[],[209,303],"3a61eae0-5d43-11f1-ad23-1607ee4eb77e",["D",1780267874874],[],[209,32],"3831e5fe-5d43-11f1-83b5-1607ee4eb77e","admin.html","3831e6da-5d43-11f1-83b5-1607ee4eb77e",47,["D",1780267871207],"\n\n \n \n \n primer — admin\n \n \n \n

\n \n \n \n\n",[],[209,315],"3051c3c4-5cc4-11f1-9010-1607ee4eb77e","ZoneEntry.tsx","3051c48c-5cc4-11f1-9010-1607ee4eb77e","9e07f141-773d-42a7-8481-8834afece6d2",11,["D",1780213311908],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { DEVICE } from \"../device.ts\";\nimport type { Branch, Profile } from \"../api.ts\";\nimport { ButtonBar } from \"./ButtonBar.tsx\";\n\n// Entering the primer zone in Mochi's world: pick who's playing (device is\n// shared, profile chosen per session), then which branch — self-directed,\n// free choice across branches. Both are list picks driven by the 3 buttons:\n// Down / Select / (back). Models in-world navigation, not a rich menu.\nexport function ZoneEntry({\n title,\n items,\n cursor,\n onButton,\n}: {\n title: string;\n items: (Profile | Branch)[];\n cursor: number;\n onButton: (i: number) => void;\n}) {\n return (\n

\n {title}\n

\n {items.map((it, i) => (\n \n {i === cursor ? \"▶\" : \"\"}\n {it.label}\n

\n ))}\n

\n \n \n );\n}\n",[],[209,331,323],"components","e1cbdd10-5d41-11f1-938a-1607ee4eb77e","TileGrid.tsx","e1cbde00-5d41-11f1-938a-1607ee4eb77e",39,["D",1780267296707],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { DEVICE } from \"../device.ts\";\n\n// A 2×2 grid of up to four tappable tiles — the capacitive primitive. The grid\n// shape IS the four-way branching factor. Fewer than four → faint empty slots.\n// Reused for both profile selection and the knowledge map.\nexport type Tile = { key: string | number; title: string; sub?: string; corner?: string };\n\nexport function TileGrid({ tiles, onTap }: { tiles: Tile[]; onTap: (index: number) => void }) {\n const slots: (Tile | null)[] = [0, 1, 2, 3].map((i) => tiles[i] ?? null);\n return (\n

\n {slots.map((tile, i) => (\n tile && onTap(i)}\n className=\"relative flex flex-col items-center justify-center text-center p-2 disabled:opacity-20\"\n style={{\n background: DEVICE.paper,\n color: DEVICE.ink,\n borderRight: i % 2 === 0 ? `1px solid ${DEVICE.ink}` : \"none\",\n borderBottom: i < 2 ? `1px solid ${DEVICE.ink}` : \"none\",\n }}\n >\n {tile && (\n <>\n

{tile.title}

\n {tile.sub &&

{tile.sub}

}\n {tile.corner && (\n

{tile.corner}

\n )}\n \n )}\n \n ))}\n

\n );\n}\n",[],[209,331,333],"359ffe90-5cc4-11f1-8d9c-1607ee4eb77e","SessionEnd.tsx","359fff76-5cc4-11f1-8d9c-1607ee4eb77e",12,["D",1780213320815],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { DEVICE } from \"../device.ts\";\nimport { ButtonBar } from \"./ButtonBar.tsx\";\n\n// End of the session batch. Grades have been posted in one request; the server\n// will consolidate (boxes, generation, next window) between now and next time —\n// so there's nothing adaptive to show here, by design. Just a tally + exit.\nexport function SessionEnd({\n counts,\n syncing,\n onDone,\n}: {\n counts: { got: number; almost: number; miss: number };\n syncing: boolean;\n onDone: () => void;\n}) {\n const total = counts.got + counts.almost + counts.miss;\n return (\n

\n SESSION DONE\n

{total}

cards reviewed

✓ got it — {counts.got}

~ almost — {counts.almost}

· didn't know — {counts.miss}

\n {syncing ? \"syncing…\" : \"synced\"}\n

\n \n

\n );\n}\n",[],[209,331,341],"1a721234-5cc4-11f1-ae05-1607ee4eb77e","Screen.tsx","1a721310-5cc4-11f1-ae05-1607ee4eb77e",8,["D",1780213275215],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { DEVICE } from \"../device.ts\";\n\n// The bezel. Constrains every child to the panel's exact pixel envelope and\n// two inks, so nothing inside can render at a size or colour the device can't.\nexport function Screen({ children }: { children: React.ReactNode }) {\n return (\n

\n \n \n {children}\n

\n \n

\n {DEVICE.screen.w}×{DEVICE.screen.h} · monochrome · {DEVICE.buttons} buttons\n

\n \n );\n}\n",[],[209,331,349],"e708a4ca-5d41-11f1-b081-1607ee4eb77e","QuadrantMap.tsx","e708a5a6-5d41-11f1-b081-1607ee4eb77e",40,["D",1780267305545],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { DEVICE } from \"../device.ts\";\nimport type { Quadrant } from \"../api.ts\";\nimport { TileGrid, type Tile } from \"./TileGrid.tsx\";\nimport { ButtonBar } from \"./ButtonBar.tsx\";\n\n// The knowledge map at one level. Tap a quadrant: branch → descend, leaf →\n// review. Back (left button) ascends. The path you tap into IS the interest\n// window. Presentational — App owns the path and the data.\nexport function QuadrantMap({\n path,\n quadrants,\n onTap,\n onBack,\n}: {\n path: { id: number; label: string }[];\n quadrants: Quadrant[];\n onTap: (q: Quadrant) => void;\n onBack: () => void;\n}) {\n const crumb = [\"Knowledge\", ...path.map((p) => p.label)].join(\" › \");\n const tiles: Tile[] = quadrants.map((q) => ({\n key: q.id,\n title: q.label,\n sub: q.branch ? undefined : (q.due ? `${q.due} due` : (q.total ? \"✓ done\" : \"—\")),\n corner: q.branch ? \"▦\" : (q.total && q.mastered === q.total ? \"★\" : undefined),\n }));\n return (\n

\n \n {crumb}\n

\n onTap(quadrants[i])} />\n i === 0 && onBack()} />\n \n );\n}\n",[],[209,331,357],"7fd0ca3c-5cd1-11f1-ac52-1607ee4eb77e","CardView.tsx","2a6c19be-5cc4-11f1-9e7b-1607ee4eb77e",17,["D",1780219028733],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DEVICE, GRADES } from \"../device.ts\";\nimport type { Card } from \"../api.ts\";\nimport { ButtonBar } from \"./ButtonBar.tsx\";\n\n// The procedural UI interpreter — the firmware's job, in the sim.\n// Input: a card's `op` tag + pre-rendered q/a strings. The device owns a fixed\n// layout per operation (the low-n op set IS the layout vocabulary); the server\n// sends no layout. Add a new op → add a case here and reflash. That coupling is\n// the deliberate \"lean\" choice from the spec.\n\nconst OP_TAG: Record = {\n \"name\": \"RECALL\",\n \"recall-instance\": \"RECALL\",\n \"compose\": \"SAY\",\n};\n\nexport function CardView({\n card,\n index,\n total,\n onGrade,\n}: {\n card: Card;\n index: number;\n total: number;\n onGrade: (grade: string) => void;\n}) {\n const [revealed, setRevealed] = useState(false);\n const [flashing, setFlashing] = useState(false);\n\n // Reset to the front whenever a new card arrives. Models a full refresh.\n useEffect(() => {\n setRevealed(false);\n setFlashing(true);\n const t = setTimeout(() => setFlashing(false), DEVICE.refresh.full);\n return () => clearTimeout(t);\n }, [card.id]);\n\n const tag = OP_TAG[card.op] ?? card.op.toUpperCase();\n\n function reveal() {\n if (revealed || flashing) return;\n setFlashing(true); // partial refresh of the reveal region\n setRevealed(true);\n setTimeout(() => setFlashing(false), DEVICE.refresh.partial);\n }\n\n // Pre-commit: question first, answer only after a deliberate reveal.\n // Tapping the card is the primary reveal (capacitive panel); the centre\n // button is the secondary affordance / hint to the same single action.\n function handleButton(i: number) {\n if (!revealed) {\n if (i === 1) reveal();\n return;\n }\n onGrade(GRADES[i].key);\n }\n\n return (\n

\n {/* Tappable face — primary reveal affordance */}\n \n

\n {tag}\n {index + 1} / {total}\n

\n\n

{card.q}

\n\n

\n {revealed\n ? (\n <>\n

ANSWER

{card.a}

\n \n )\n :

tap to reveal

}\n

\n\n {/* Buttons: REVEAL (centre, secondary) before; grade triad after */}\n {revealed\n ? g.label)} onPress={handleButton} disabled={flashing} />\n : }\n \n );\n}\n",[],[209,331,365],"1fa23432-5cc4-11f1-8c4d-1607ee4eb77e","ButtonBar.tsx","1fa234fa-5cc4-11f1-8c4d-1607ee4eb77e",["D",1780213283917],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { DEVICE } from \"../device.ts\";\n\n// The three physical buttons along the bottom edge. This is the ENTIRE input\n// surface — every screen must express its choices as ≤3 of these. Pass exactly\n// DEVICE.buttons labels; a null label is a dead (unlabelled) key on that screen.\nexport function ButtonBar({\n labels,\n onPress,\n disabled,\n}: {\n labels: (string | null)[];\n onPress: (index: number) => void;\n disabled?: boolean;\n}) {\n const slots = Array.from({ length: DEVICE.buttons }, (_, i) => labels[i] ?? null);\n return (\n \n {slots.map((label, i) => (\n onPress(i)}\n className=\"py-3 text-[13px] font-bold uppercase tracking-wide disabled:opacity-25\"\n style={{\n background: DEVICE.paper,\n color: DEVICE.ink,\n borderLeft: i === 0 ? \"none\" : `1px solid ${DEVICE.ink}`,\n }}\n >\n {label ?? \"·\"}\n \n ))}\n \n );\n}\n",[],[209,331,373],"f928a718-5d41-11f1-8efa-1607ee4eb77e","App.tsx","40e87eda-5cc4-11f1-9010-1607ee4eb77e",42,["D",1780267335950],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n type Card,\n fetchProfiles,\n fetchQuadrants,\n fetchSession,\n postGrades,\n type Profile,\n type Quadrant,\n} from \"../api.ts\";\nimport type { GradeKey } from \"../device.ts\";\nimport { Screen } from \"./Screen.tsx\";\nimport { TileGrid, type Tile } from \"./TileGrid.tsx\";\nimport { QuadrantMap } from \"./QuadrantMap.tsx\";\nimport { CardView } from \"./CardView.tsx\";\nimport { SessionEnd } from \"./SessionEnd.tsx\";\n\n// The device session state machine. Profile → navigate the quadrant map →\n// tap a leaf → review one batch (graded offline) → post once → back to the\n// level you left. Only what the firmware will do.\n\ntype Phase = \"loading\" | \"profile\" | \"map\" | \"review\" | \"empty\" | \"end\";\ntype Crumb = { id: number; label: string };\n\nexport function App() {\n const [phase, setPhase] = useState(\"loading\");\n const [profiles, setProfiles] = useState([]);\n const [profile, setProfile] = useState(null);\n\n const [path, setPath] = useState([]); // branches descended into (not the leaf)\n const [quadrants, setQuadrants] = useState([]);\n\n const [cards, setCards] = useState([]);\n const [pos, setPos] = useState(0);\n const [buffer, setBuffer] = useState<{ id: number; grade: GradeKey }[]>([]);\n const [syncing, setSyncing] = useState(false);\n\n useEffect(() => {\n fetchProfiles().then((p) => { setProfiles(p); setPhase(\"profile\"); }).catch(() => setPhase(\"empty\"));\n }, []);\n\n function loadLevel(pid: number, p: Crumb[]) {\n const parent = p.length ? p[p.length - 1].id : \"root\";\n fetchQuadrants(pid, parent).then((q) => { setQuadrants(q); setPath(p); setPhase(\"map\"); });\n }\n\n function pickProfile(i: number) {\n const p = profiles[i];\n setProfile(p);\n loadLevel(p.id, []);\n }\n\n function tapQuadrant(q: Quadrant) {\n if (!profile) return;\n if (q.branch) {\n loadLevel(profile.id, [...path, { id: q.id, label: q.label }]);\n } else {\n fetchSession(profile.id, q.id).then((batch) => {\n setCards(batch);\n setPos(0);\n setBuffer([]);\n setPhase(batch.length ? \"review\" : \"empty\");\n });\n }\n }\n\n function back() {\n if (profile && path.length) loadLevel(profile.id, path.slice(0, -1));\n }\n\n function grade(g: string) {\n const next = [...buffer, { id: cards[pos].id, grade: g as GradeKey }];\n setBuffer(next);\n if (pos + 1 < cards.length) {\n setPos(pos + 1);\n } else {\n setSyncing(true);\n setPhase(\"end\");\n postGrades(profile!.id, next).finally(() => setSyncing(false));\n }\n }\n\n // Return to the level we were on; counts refresh from the server.\n function afterSession() {\n if (profile) loadLevel(profile.id, path);\n else setPhase(\"profile\");\n }\n\n const counts = {\n got: buffer.filter((b) => b.grade === \"got\").length,\n almost: buffer.filter((b) => b.grade === \"almost\").length,\n miss: buffer.filter((b) => b.grade === \"miss\").length,\n };\n\n const profileTiles: Tile[] = profiles.map((p) => ({ key: p.id, title: p.label }));\n\n return (\n

P R I M E R

\n \n {phase === \"loading\" && …}\n {phase === \"profile\" && (\n

\n WHO'S PLAYING?\n

\n \n

\n )}\n {phase === \"map\" && (\n \n )}\n {phase === \"review\" && cards[pos] && (\n \n )}\n {phase === \"empty\" && (\n \n )}\n {phase === \"end\" && }\n \n view source\n

\n );\n}\n\nfunction Centered({ children }: { children: React.ReactNode }) {\n return

{children}

;\n}\n",[],[209,331,380],"1a725302-5cc4-11f1-ae05-1607ee4eb77e",["D",1780213275215],[227,228,229,230,231,232,233,234],[209,331],["D",1780213257290],[226,235,236,237,238,239,240],[209],["D",1780184756415],["D",1789510270483],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":54,"_103":104,"_105":24},{"_13":88,"_31":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"ctx",{"_81":-5,"_126":432,"_433":434,"_435":436,"_437":24,"_438":24,"_439":24,"_440":58,"_441":-5,"_442":-7,"_443":-7,"_444":146,"_445":24,"_446":24,"_447":-5,"_448":24,"_449":24,"_450":24,"_451":-5},"ENV",{"_403":404,"_405":406,"_407":89,"_408":409,"_410":411,"_412":413,"_414":415,"_416":417,"_418":419,"_420":421,"_422":423,"_424":425,"_426":427,"_428":429,"_430":431},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v48