Add a @webgamekit/music package (Strudel) with a Music panel and RhythmGame song

[cnotv]

Summary

Add in-browser, generative music using Strudel (the JavaScript port of TidalCycles). The Strudel wrapper and music logic live in a new @webgamekit/music package, consumed by a new Music panel and by the existing RhythmGame (which gains a complex Strudel song as a playable track).

Motivation

• A reusable, framework-agnostic music engine the whole app can use (panels, games, visual sync).
• A live, generative "Music" panel for experimenting with patterns.
• A richer RhythmGame: drive a chart from a complex Strudel song instead of only MIDI files.

Scope

1. New package @webgamekit/music (packages/music)

• Wrap @strudel/web (verify maintenance/license before adding): musicInit, musicPlay(pattern), musicStop, musicSetTempo, and an event hook (musicOnTrigger) so consumers can react to each note/hap with its time.
• Framework-agnostic (no Vue/React). Exported functions use the music* prefix. Types in a dedicated types.ts.
• A library of named example patterns, including at least one complex song for the RhythmGame.
• Pure helpers (pattern building, hap→note-event mapping) unit-tested; audio init guarded so tests run without an AudioContext.

2. Music panel

• Add 'music' to PanelType + the right-panel order in src/stores/panels.ts.
• src/components/panels/MusicPanel.vue + src/composables/useStrudel.ts (lifecycle: init once, play/stop, dispose on unmount; no module-level refs).
• Controls: pattern field, play/stop, tempo, preset patterns; reuses existing ui/ components.

3. RhythmGame integration (extend, do not duplicate)

• Add a Strudel track source to RhythmGame alongside MIDI: a complex @webgamekit/music song produces note events (via the audio scheduler) that feed the existing chart, scoring, lobby, summary, and multiplayer.

Acceptance criteria

• @webgamekit/music builds, is published via barrel exports, and has unit tests for its pure helpers.
• Music panel plays/stops a Strudel pattern and switches presets.
• RhythmGame can play a complex Strudel song as a track and score against it.
• Package API doc + journey doc added; pnpm test:unit and pnpm lint pass.

References

• Strudel: https://strudel.cc , @strudel/web
• Existing: packages/audio/ (scheduler), src/views/Games/RhythmGame/, src/stores/panels.ts

[cnotv]

Implementation plan

Files

• packages/music/ — new @webgamekit/music package (mirrors packages/audio scaffolding):
  • src/core.ts — musicInit, musicPlay, musicStop, musicSetTempo, musicOnTrigger (lazy/dynamic @strudel/web import so the browser-only audio code never loads under tests).
  • src/patterns.ts — named example patterns incl. one complex song.
  • src/events.ts — pure pattern→note-event helpers (unit-tested).
  • src/types.ts — exported types only.
  • src/index.ts — barrel.
• src/stores/panels.ts — add 'music' panel type + right-panel order.
• src/composables/useStrudel.ts — Vue lifecycle around the package.
• src/components/panels/MusicPanel.vue — pattern field, play/stop, tempo, presets (reusing ui/ components).
• Root package.json — add @webgamekit/music workspace dep + @strudel/web.

Approach

• Keep all Strudel (browser/AudioContext) code behind a dynamic import in musicInit; pure helpers stay importable in jsdom for tests.
• RhythmGame integration (complex Strudel song as a track via the scheduler) follows once the package + panel are solid.

Verification

• pnpm test:unit (pure helpers), pnpm lint, package build, and a headless check that the panel renders + play triggers init without errors.