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

{h}

{children}

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

{children}

;\n}\n\nfunction Example({ title, root, pattern, labels = [\"note\", \"interval\"] }: {\n title: string; root: number; pattern: number[]; labels?: string[];\n}) {\n return (\n

{title}

\n \n

{labels.join(\" / \")}

\n \n );\n}\n\nconst LESSONS: Lesson[] = [\n {\n id: \"neck\",\n title: \"The Fretboard, laid out as one repeating pattern\",\n tag: \"Foundation\",\n body: () => (\n <>\n

\n There are only 12 notes. The whole fretboard is those 12 notes repeated up\n the neck and across the strings. From open strings E A D G B E (low to high), each\n fret moves up one semitone (half step). The 12th fret is exactly an octave up\n from the open string — same note names, higher pitch.\n

\n On the guitar, moving up one fret = one semitone. Any pattern you learn above any\n note's fret reproduces everywhere you find that note. Learn a scale shape in one\n position and it's the same shape in every other position — you just shift\n it with the root.\n

\n \n

\n Above, only the frets that are a C light up. Notice how the same relationships between\n strings hold (like the 4th-fret/2nd-string trick near octaves). Warm up by \"drinking\"\n through every natural note this way in the Scale Lab.\n

\n \n ),\n },\n {\n id: \"intervals\",\n title: \"Intervals: the names for distances\",\n tag: \"Fundamental\",\n body: () => (\n <>\n

\n Music theory is mostly relative — we care how far apart notes are, called an{\" \"}\n interval. The two primitive distances on a guitar: a whole step (W,\n two frets) and a half step (H, one fret). Every scale is just a recipe of\n whole and half steps.\n

\n From any root: the 2nd, 3rd, 4th, 5th, 6th and\n 7th. Flat (♭) a note and it drops one semitone — so we get ♭3 (minor 3rd),\n ♭7, etc. Scales differ almost entirely by which 3rd, 6th and 7th they use.\n

\n The interval between root and ♭3 is \"the sad distance\" — it's what makes minor feel\n minor. The 3rd vs ♭3rd is the single most important ear-training distinction. Drill\n all of these in the Interval Trainer.\n

\n \n \n ),\n },\n {\n id: \"construction\",\n title: \"How the Major Scale is built\",\n tag: \"The master key\",\n body: () => (\n <>\n

\n The major scale is the reference everything else is named against. Its recipe\n in steps is: W W H W W W H. Starting on C that gives\n C D E F G A B C — all white keys on a piano.\n

\n 1 root · 2 · 3 · 4 · 5 · 6 · 7 (leading tone) · 1. Each degree has a \"job\": the 5th\n is the most stable after the root, the 3rd decides major-vs-minor, the 7th \"wants\" to\n resolve up to the root.\n

\n \n

\n Move the root to any note in the Scale Lab and the same W–W–H–W–W–W–H shapes\n reappear. The pattern is the scale; the root just sets its starting letter.\n

\n \n ),\n },\n {\n id: \"pentatonic\",\n title: \"Pentatonic: the unbeatable 5\",\n tag: \"Practical\",\n body: () => (\n <>\n

\n Drop the two half-step pairs from the major scale and you get the{\" \"}\n major pentatonic (1 2 3 5 6). Its darker twin, built 1 ♭3 4 5 ♭7, is the{\" \"}\n minor pentatonic — the scale behind most rock, blues and lead guitar. Because it\n has no semitones, every note sounds \"safe\", making it perfect for soloing.\n

\n In open position, A minor pentatonic uses frets 0–3 in a famously comfortable box.\n Learn this shape and you can play the blues anywhere by shifting its root.\n

\n \n \n

\n Notice: A minor pentatonic and C major pentatonic share identical notes — the\n same fretboard, different starting letter. This relative relationship runs all through\n theory.\n

\n \n ),\n },\n {\n id: \"modes\",\n title: \"The 7 Modes: the major scale, restarted\",\n tag: \"Color\",\n body: () => (\n <>\n

\n Play C major starting on D (D E F G A B C) and you're playing Dorian — same seven\n notes, new center and flavor. Each mode is the major scale begun on a different degree:\n

Ionian (1) — major
Dorian (2) — minor with a big 6th, funky
Phrygian (3) — minor with ♭2, Spanish
Lydian (4) — major with raised 4th, dreamy
Mixolydian (5) — major with ♭7, bluesy
Aeolian (6) — natural minor
Locrian (7) — the unstable one

\n In practice you usually think of modes as existing scales you can grab rather\n than \"C major restarted\". The Scale Lab lists them all as their own scales.\n

\n \n \n \n ),\n },\n {\n id: \"harmony\",\n title: \"Turning a scale into chords\",\n tag: \"Putting it together\",\n body: () => (\n <>\n

\n Stack every other scale degree and you get chords. Building thirds up the C major scale\n yields: C maj, D min, E min, F maj, G maj, A min, B dim. The chord qualities repeat{\" \"}\n in every major key: I ii iii IV V vi vii°.\n

\n This \"#1–7 formula\" is why the Roman numerals are the language of progressions: a{\" \"}\n I–IV–V–vi is \"happy-capital, happy, happy, sad-lowercase\" and transfers to any key.\n

\n Over a chord that fits the scene's key, every note of that key works. But half of\n soloing taste is landing on the chord's defining guide tones — the 3rd and\n 7th — which the Scale Lab shows you colored by interval in real time.\n

\n \n \n ),\n },\n];\n\nexport function Lessons() {\n const [idx, setIdx] = useState(0);\n const lesson = LESSONS[idx];\n const Body = lesson.body;\n\n return (\n

\n \n\n

\n \n {lesson.tag}\n \n

{lesson.title}

\n \n

\n setIdx(Math.max(0, idx - 1))}\n disabled={idx === 0}\n className=\"px-4 py-2 rounded-lg border border-gray-300 text-sm font-semibold text-gray-600 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer\"\n >\n ← Prev\n \n {idx + 1} / {LESSONS.length}\n setIdx(Math.min(LESSONS.length - 1, idx + 1))}\n disabled={idx === LESSONS.length - 1}\n className=\"px-4 py-2 rounded-lg bg-gray-900 text-white text-sm font-semibold disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer\"\n >\n Next →\n \n

\n );\n}\n","label",[155,156,64],"frontend","components","pulls","branches",1,"forks","envVars",{"_165":26,"_167":26},"connections",{"_165":26,"_166":26},"count","unfilledCount","emptyCount",{"_32":286,"_13":155,"_62":208,"_42":-5,"_34":35,"_148":159,"_149":85,"_36":287,"_38":26,"_65":283,"_151":-5,"_67":24,"_153":-5,"_188":288,"_17":289},{"_32":281,"_13":156,"_62":147,"_42":208,"_34":35,"_148":159,"_149":85,"_36":282,"_38":26,"_65":283,"_151":-5,"_67":24,"_153":-5,"_188":284,"_17":285},{"_32":273,"_13":274,"_62":275,"_42":147,"_34":35,"_148":276,"_149":85,"_36":277,"_38":159,"_65":66,"_151":278,"_67":24,"_153":-5,"_188":279,"_17":280},{"_32":264,"_13":265,"_62":266,"_42":147,"_34":35,"_148":267,"_149":85,"_36":268,"_38":269,"_65":66,"_151":270,"_67":24,"_153":-5,"_188":271,"_17":272},{"_32":256,"_13":257,"_62":258,"_42":147,"_34":35,"_148":259,"_149":85,"_36":260,"_38":241,"_65":66,"_151":261,"_67":24,"_153":-5,"_188":262,"_17":263},{"_32":146,"_13":64,"_62":63,"_42":147,"_34":35,"_148":39,"_149":85,"_36":253,"_38":26,"_65":66,"_151":152,"_67":24,"_153":-5,"_188":254,"_17":255},{"_32":245,"_13":246,"_62":247,"_42":147,"_34":35,"_148":248,"_149":85,"_36":249,"_38":26,"_65":66,"_151":250,"_67":24,"_153":-5,"_188":251,"_17":252},{"_32":236,"_13":237,"_62":238,"_42":147,"_34":35,"_148":239,"_149":85,"_36":240,"_38":241,"_65":66,"_151":242,"_67":24,"_153":-5,"_188":243,"_17":244},{"_32":229,"_13":230,"_62":231,"_42":208,"_34":35,"_148":159,"_149":85,"_36":232,"_38":26,"_65":21,"_151":233,"_67":24,"_153":-5,"_188":234,"_17":235},{"_32":222,"_13":223,"_62":224,"_42":208,"_34":35,"_148":159,"_149":85,"_36":225,"_38":26,"_65":66,"_151":226,"_67":24,"_153":-5,"_188":227,"_17":228},{"_32":214,"_13":215,"_62":216,"_42":208,"_34":35,"_148":217,"_149":85,"_36":218,"_38":159,"_65":66,"_151":219,"_67":24,"_153":-5,"_188":220,"_17":221},{"_32":205,"_13":206,"_62":207,"_42":208,"_34":35,"_148":209,"_149":85,"_36":210,"_38":26,"_65":66,"_151":211,"_67":24,"_153":-5,"_188":212,"_17":213},{"_32":198,"_13":199,"_62":200,"_42":-5,"_34":35,"_148":159,"_149":85,"_36":201,"_38":26,"_65":21,"_151":202,"_67":24,"_153":-5,"_188":203,"_17":204},{"_32":191,"_13":192,"_62":193,"_42":-5,"_34":35,"_148":111,"_149":85,"_36":194,"_38":159,"_65":21,"_151":195,"_67":24,"_153":-5,"_188":196,"_17":197},{"_32":183,"_13":184,"_62":83,"_42":-5,"_34":35,"_148":159,"_149":85,"_36":185,"_38":26,"_65":186,"_151":187,"_67":24,"_153":14,"_188":189,"_17":190},"880e574a-09c0-49a4-a75e-cac9fd705d83","index.ts",["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",[],[184],"25b11362-17a0-4df7-b216-341ce700c92f","README.md","01a02aa4-dbb8-719f-bc43-17d83a46fa8b",["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",[],[192],"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

History · Lessons.tsx