circle of fifths: tool, explorer, reactive playground params

Created by: jedmund

Summary

Adds a new Circle of Fifths tool and explorer to the Playground, and replaces PlaygroundParams's struct + @Binding pattern with @Observable class after it started losing sidebar updates to an attribute-graph cycle. Minor dev-toolbar housekeeping along the way.

Circle of Fifths tool + explorer

• New CircleOfFifthsView (tool) and CircleOfFifthsExplorerView (explorer) under Views/Tools/CircleOfFifths and Views/Tools/CircleOfFifthsExplorer. Wheel has an outer ring of major keys (C G D A E B F♯/G♭ D♭ A♭ E♭ B♭ F) and an inner ring of relative minors. Center shows the selected tonic + its relative pair + the key signature's specific accidentals (F♯ C♯ for D, B♭ for F, no sharps or flats for C).
• Persistent 7-position diatonic arc glow on the outer ring: the contiguous arc property of the circle made permanent, not transient, so the learner sees that the 7 adjacent keys ARE the scale notes. Arc shifts when the tonic changes.
• Thin 4pt orange arc with rounded caps traces the 7 arc positions on the outer perimeter, outside the glass. Rotates only clockwise on key change, matching the fifths cycle. Going from C back to F takes the 330° long way around instead of snapping counterclockwise.
• Third outer ring of Roman numerals (I ii iii IV V vi vii° for majors, i ii° III iv v VI VII for minors) on its own thin glass annulus. Each numeral counter-rotates to stay upright while the ring spins with the arc.
• Glass layering: lighter-frost outer annulus for the major pills, full-frost inner disc for the center content, thinnest-frost narrow annulus for the Roman numeral ring. No keyboard docked under the wheel; audio comes from tapping positions directly.
• Two play modes in the sidebar:
  • Play scale: tapping a pill becomes the new tonic, the scale sweeps, and the arc + numerals rotate to match.
  • Play tonic: tapping plays only that pitch, leaving the selected key anchored. Lets the learner audition I / IV / V / vi pitches against a fixed tonal center. Key changes are done from the sidebar's Initial key picker.
• Minor-ring taps play the natural-minor scale (e.g. tap Em → plays E F♯ G A B C D), reusing the shared 7-position arc via CircleOfFifthsMath.wheelIndex(forMinorScaleDegree:minorIndex:).
• CircleOfFifthsMath holds the rotation math: key ordering, key signatures, scale spellings, scale-degree → wheel-position mappings for major and natural minor, diatonic triad indices. Pure data + pure functions, unit-testable when we get a test target.
• Wired through ToolType.circleOfFifths, ToolViewFactory, PlaygroundCatalog (flipped to .ready), PlaygroundScreen dispatch, and a PlaygroundConfigurator sidebar section (Initial key + On tap menu pickers). docs/tools.md updated with the final config schema.

Playground params reactivity

• PlaygroundParams converted from struct + Equatable to @Observable final class. Every Picker / Button in the configurator that writes a property now propagates through Observation tracking; every view that reads a property (directly, or transitively through currentConfig) is invalidated automatically.
• Got here the hard way. The old pattern paired @State PlaygroundParams (struct) with .onChange(of: params) { configVersion += 1 } to force .id(configVersion) remounts. Once there were multiple observers plus a Bool-tagged Picker in the Circle of Fifths section, SwiftUI detected an attribute-graph cycle and broke it by suppressing downstream invalidation: sidebar writes landed in @State, reads from PlaygroundConfigurator could see the new value, but PlaygroundScreen's body stopped running entirely. @Observable replaces the whole invalidation chain with Observation's per-property tracking, no cycle.
• PlaygroundConfigurator.params switched from @Binding to @Bindable. Everything that used $params.foo keeps working because @Bindable provides the same $-projection for @Observable classes.
• PlaygroundScreen.currentConfig changed from @State rebuilt in onChange to a simple computed property. No more stale-config failures; removes the .onChange(of: params) { ... } blocks from both exerciseBody and playgroundBody.

Dev toolbar + lesson picker

• Dev toolbar (book / gallery / hero media) un-gated from #if DEBUG, so the whole team (and anyone poking at the build) has access to the lesson picker and design system gallery.
• Reset progress button removed from the toolbar and, alongside a new Unlock all lessons button, moved into the DebugLessonPicker sheet with confirmation alerts.
• ProgressStore.unlockAllLessons(in:) walks the curriculum and writes a LessonRecord with a sentinel furthestPage for every lesson so isComplete holds across the board and the sequential gate in lessonStatuses(in:) falls open.

Test plan

• Open Playground → Circle of Fifths. Wheel renders with outer majors, inner minors, persistent orange arc over the 7 diatonic keys, Roman numerals between the pills and the arc.
• Tap each of the 12 outer positions in scale mode. Arc rotates clockwise only (from C → F takes the long way). Selected key's accidentals appear as specific glyphs in the center (F♯ C♯ for D, B♭ E♭ A♭ for E♭, no sharps or flats for C).
• Tap an inner minor position (e.g. Em). Natural minor plays, arc stays on the relative major's 7-position sweep, center switches focus to the minor name.
• Switch On tap to Play tonic in the sidebar. Tap each outer position; only the single tonic plays, arc and numerals do not move. Change keys via sidebar's Initial key picker: arc rotates, numerals follow, selection updates.
• Switch back to Play scale, pick a different initial key, confirm scale sweep starts from new key.
• Landscape and portrait on iPad Pro 13" sim; dark mode on/off: wheel scales, orange reads, glass rings remain distinct.
• Open any other playground tool (Scale Explorer, Mode Explorer, Waveform Generator, Filter Playground) and confirm sidebar changes still update the tool view reactively — the @Observable switch should not have regressed anything.
• Restart button in the playground side panel still forces a clean remount; Reset button repopulates defaults.
• Dev toolbar is visible on the home screen in a Release build as well (no more #if DEBUG).
• Tap the book icon → sheet opens; tap Unlock all lessons → confirm → every track / module / lesson becomes navigable (no lock icons on TrackDetailScreen). Tap Reset progress → confirm → hero flips back to Start, lessons re-lock.