`, 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

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_320":321,"_322":323},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_241":-5,"_20":242,"_22":243,"_244":245,"_246":247,"_26":248,"_24":249,"_250":-5,"_251":-5,"_252":54,"_253":254,"_255":45,"_256":-5,"_257":-5,"_258":259},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","test_account_001","name","guitar-lab","branchName","main","version","path","frontend/theory.ts","project",{"_33":184,"_13":14,"_46":185,"_186":-5,"_187":54,"_188":189,"_190":189,"_191":192,"_193":-5,"_194":195,"_196":64,"_197":45,"_198":-5,"_199":-5,"_200":48,"_201":202,"_203":204,"_205":206,"_207":208,"_209":-5,"_210":211,"_212":211,"_213":214,"_215":214,"_216":214,"_217":211,"_218":211,"_219":220,"_221":222,"_223":224,"_225":54},"tree",[58,59,60,61],"file",{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"contents",[],"upstream","pull","ahead","behind","envVars","id","4da96468-26fa-41aa-9616-c80f3dcf0db3","theory.ts","fileId","e8b2e9fe-9e53-11f1-9c94-1607ee4eb77e","parentId","01a02aa4-dbb8-719f-bc43-0c8eb512ace5","branchId","fe3da5af-30a0-482c-9cfe-bded055894d0","branchVersion",2,"latest",true,"createdAt",["D",1787421864862],0,"fileType","script","content","// Guitar music theory engine: notes, intervals, scales, fretboard data.\n\nexport const SHARPS = [\"C\", \"C#\", \"D\", \"D#\", \"E\", \"F\", \"F#\", \"G\", \"G#\", \"A\", \"A#\", \"B\"];\n\n/** Perfect-sharp note name for a pitch class (0-11). */\nexport function noteName(semitones: number): string {\n return SHARPS[((semitones % 12) + 12) % 12];\n}\n\n/** Interval (scale degree) label for a semitone offset within the octave. */\nexport const INTERVAL_LABEL: Record = {\n 0: { name: \"Root\", short: \"1\" },\n 1: { name: \"Minor 2nd\", short: \"b2\" },\n 2: { name: \"Major 2nd\", short: \"2\" },\n 3: { name: \"Minor 3rd\", short: \"b3\" },\n 4: { name: \"Major 3rd\", short: \"3\" },\n 5: { name: \"Perfect 4th\", short: \"4\" },\n 6: { name: \"Dim. 5th\", short: \"b5\" },\n 7: { name: \"Perfect 5th\", short: \"5\" },\n 8: { name: \"Minor 6th\", short: \"b6\" },\n 9: { name: \"Major 6th\", short: \"6\" },\n 10: { name: \"Minor 7th\", short: \"b7\" },\n 11: { name: \"Major 7th\", short: \"7\" },\n};\n\nexport interface ScaleDef {\n name: string;\n /** Semitone offsets from the root, in order. */\n pattern: number[];\n /** Human description of the sound. */\n vibe: string;\n}\n\nexport const SCALES: ScaleDef[] = [\n { name: \"Major\", pattern: [0, 2, 4, 5, 7, 9, 11], vibe: \"Bright, resolved, happy.\" },\n { name: \"Natural Minor\", pattern: [0, 2, 3, 5, 7, 8, 10], vibe: \"Dark, sad, the relative to major.\" },\n { name: \"Harmonic Minor\", pattern: [0, 2, 3, 5, 7, 8, 11], vibe: \"Exotic, has the leading-tone raised 7th.\" },\n { name: \"Dorian\", pattern: [0, 2, 3, 5, 7, 9, 10], vibe: \"Moody minor with a lifted 6th — funky, bluesy.\" },\n { name: \"Mixolydian\", pattern: [0, 2, 4, 5, 7, 9, 10], vibe: \"Major with a flattened 7th — rock/blues dominant.\" },\n { name: \"Lydian\", pattern: [0, 2, 4, 6, 7, 9, 11], vibe: \"Dreamy major with a raised 4th.\" },\n { name: \"Phrygian\", pattern: [0, 1, 3, 5, 7, 8, 10], vibe: \"Spanish/tense minor with a flat 2nd.\" },\n { name: \"Locrian\", pattern: [0, 1, 3, 5, 6, 8, 10], vibe: \"Diminished, unstable — the spiciest mode.\" },\n { name: \"Major Pentatonic\", pattern: [0, 2, 4, 7, 9], vibe: \"The happy folk/country 5-note scale.\" },\n { name: \"Minor Pentatonic\", pattern: [0, 3, 5, 7, 10], vibe: \"THE rock/blues scale. Freedom.\" },\n { name: \"Blues\", pattern: [0, 3, 5, 6, 7, 10], vibe: \"Minor pentatonic + the 'blue' b5.\" },\n { name: \"Whole Tone\", pattern: [0, 2, 4, 6, 8, 10], vibe: \"Dreamy, unresolved — all whole steps.\" },\n { name: \"Diminished\", pattern: [0, 2, 3, 5, 6, 8, 9, 11], vibe: \"Dense, symmetrical, cinematic tension.\" },\n];\n\n/** Deterministic color per scale degree index. Root is always red. */\nexport function degreeColor(degree: number): string {\n if (degree === 0) return \"hsl(350, 80%, 50%)\"; // root\n const palette = [\n \"hsl(210, 75%, 52%)\",\n \"hsl(170, 65%, 42%)\",\n \"hsl(100, 60%, 42%)\",\n \"hsl(48, 90%, 42%)\",\n \"hsl(30, 85%, 52%)\",\n \"hsl(280, 60%, 55%)\",\n \"hsl(200, 70%, 45%)\",\n ];\n return palette[(degree - 1) % palette.length];\n}\n\n// Standard tuning, low to high: MIDI number of each string's open note.\n// E2=40, A2=45, D3=50, G3=55, B3=59, E4=64\nexport const STRING_OPEN_MIDI = [40, 45, 50, 55, 59, 64];\nexport const FRETS = 15;\n/** Fret positions of the little inlay dots. */\nexport const MARKER_FRETS = [3, 5, 7, 9, 12, 15];\n\nexport interface FretNote {\n midi: number;\n semitone: number; // pitch class 0-11\n // filled in when mapping a scale:\n inScale?: boolean;\n degreeIndex?: number; // index into the scale's notes\n semitoneInScale?: number; // the interval offset above the root\n}\n\n/**\n * Build a 2-D grid of notes: STRING_OPEN_MIDI (low E at top) x FRETS+1 (fret 0..FRETS).\n * Row 0 = lowest string (fret dots inverted like a real neck viewed from the front).\n */\nexport function buildNeck(): FretNote[][] {\n return STRING_OPEN_MIDI.map((openMidi) =>\n Array.from({ length: FRETS + 1 }, (_, fret) => {\n const midi = openMidi + fret;\n return { midi, semitone: midi % 12 };\n })\n );\n}\n\n/** Map a root pitch class + scale pattern across the neck. */\nexport function mapScale(neck: FretNote[][], root: number, pattern: number[]) {\n for (const row of neck) {\n for (const note of row) {\n const off = ((note.semitone - root) % 12 + 12) % 12;\n const degreeIndex = pattern.indexOf(off);\n if (degreeIndex >= 0) {\n note.inScale = true;\n note.degreeIndex = degreeIndex;\n note.semitoneInScale = off;\n } else {\n note.inScale = false;\n note.degreeIndex = undefined;\n }\n }\n }\n}\n","deleted",false,"label",[57,35],"frontend",{"_33":87,"_13":57,"_36":39,"_38":-5,"_40":41,"_42":65,"_44":45,"_46":88,"_17":48,"_49":89,"_51":-5,"_53":54,"_55":-5,"_69":90,"_18":91},{"_33":80,"_13":81,"_36":82,"_38":-5,"_40":41,"_42":65,"_44":45,"_46":83,"_17":48,"_49":24,"_51":84,"_53":54,"_55":-5,"_69":85,"_18":86},{"_33":72,"_13":73,"_36":74,"_38":-5,"_40":41,"_42":75,"_44":45,"_46":76,"_17":65,"_49":24,"_51":77,"_53":54,"_55":-5,"_69":78,"_18":79},{"_33":62,"_13":63,"_36":64,"_38":-5,"_40":41,"_42":65,"_44":45,"_46":66,"_17":48,"_49":67,"_51":68,"_53":54,"_55":14,"_69":70,"_18":71},"880e574a-09c0-49a4-a75e-cac9fd705d83","index.ts","01a02aa4-dbb8-719f-bc43-19e2bc8208fe",1,["D",1787421842194],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","children",[],[63],"25b11362-17a0-4df7-b216-341ce700c92f","README.md","01a02aa4-dbb8-719f-bc43-17d83a46fa8b",22,["D",1787422030009],"# Guitar Lab 🎸\n\nA personal music theory & scales workbench — visualize any scale on the fretboard,\nwork through a structured curriculum, and drill your ear. Built for an intermediate\nguitarist whose main goal is scales and music theory.\n\n**Live:** https://guitar-lab.val.run\n\n## What's inside\n\n| Tab | What it does |\n| --- | --- |\n| **Lessons** | A 6-part curriculum (fretboard logic → intervals → major scale construction → pentatonics → modes → diatonic harmony), each with embedded live fretboard examples |\n| **Scale Lab** | Pick any root + one of 13 scales, see it color-coded across the whole neck. Toggle note names vs interval degrees (1, ♭3, 5…), and *hear* the scale ascend |\n| **Metronome** | Web-audio clicker, BPM 40–240, 3/4 · 4/4 · 6/4 time with accented beat one |\n| **Interval Trainer** | Ear-training game: hear two notes, name the interval, get instant feedback and a score |\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts (Hono server)\"]\n Hono -->|serves| Root[\"frontend/root.tsx (HTML shell)\"]\n Root -->|loads| Entry[\"frontend/index.tsx\"]\n Entry -->|renders| App[\"App.tsx (nav + layout)\"]\n App --> Lessons[\"Lessons.tsx\"]\n App --> Explorer[\"ScaleExplorer.tsx\"]\n App --> Metronome[\"Metronome.tsx\"]\n App --> Trainer[\"IntervalTrainer.tsx\"]\n Explorer --> Fretboard[\"Fretboard.tsx\"]\n Fretboard --> Theory[\"theory.ts (notes, scales, intervals, neck)\"]\n```\n\n## How it works\n\n- **`theory.ts`** is the engine — note names, interval labels, 13 scale formulas, and a\n fretboard grid builder. `mapScale()` colors every note on the neck by its scale degree.\n- **Client-side React** (no build step). Twind/Tailwind utilities for styling.\n- All audio is generated with the **Web Audio API** (oscillators) — no audio files.\n- Every frontend module is served at versioned URLs via `serveImmutableFile` and cached immutably.\n\n## Ideas for next iteration\n\n- A **chord explorer** (stack thirds off any scale degree to derive chords)\n- **Practice tracker** (habit streaks, saved to the val's SQLite + cron daily reminder)\n- **Note-to-fret finder** tool\n- Microphone pitch detection for real guitar input\n\n## File structure\n\n```\nfrontend/\n theory.ts Music theory + fretboard engine\n root.tsx HTML shell (stamps immutable asset URLs)\n index.tsx React entrypoint\n components/\n App.tsx Nav + layout\n Lessons.tsx 6-lesson curriculum\n ScaleExplorer.tsx Interactive root/scale explorer + audio\n Fretboard.tsx Neck renderer\n Metronome.tsx Web-audio clicker\n IntervalTrainer.tsx Ear-training quiz\n```\n",[],[73],"dbc48714-2533-466b-bc51-6d25e955f35e","CHANGELOG.md","01a02aa4-dbb8-719f-bc43-13e217c72655",["D",1787421842194],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, 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\n