Archived Web development reference. This describes the Vue player, not WinUI XAML. The component tree changes over time; use the checked-out source as the API authority. See Native architecture for Windows internals.
Component conventions
Data flows down through props and up through emitted events. Business rules belong in composables, stores, and services; components render state and forward user intent. Use semantic elements and accessible labels for controls, and keep keyboard and focus behavior in mind.
Pages
| Page | Route | Role |
|---|---|---|
ProductPage.vue |
/ |
Product homepage and live preview |
PlayerPage.vue |
/app |
Web player, panels, and immersive view |
DownloadPage.vue |
/download |
Current download choices and preview status |
PrivacyPage.vue |
/privacy |
Privacy content |
DocsPage.vue |
/docs/:slug? |
Documentation reader |
TutorialsPage.vue |
/tutorials/:slug? |
Tutorial index and reader |
Player UI
PlayerPanel.vue presents the track list, filters, playback actions, and track details. It receives the current library, collections, tracks, playback state, and UI preferences from the parent, then emits actions such as track selection, seek, volume change, playlist membership, and favorite toggling. Check its current defineProps and defineEmits for the exact contract before extending it.
LibraryPanel.vue handles source, library, playlist, and smart-view navigation. A playlist belongs to one library; Recent, Favorites, and Queue are views rather than peer libraries. SettingsModal.vue groups preferences and data controls. DialogModal.vue supplies a reusable confirmation shell, and MenuDropdown.vue provides contextual actions.
AlbumBrowserPanel.vue groups tagged tracks by album or artist. LyricsPanel.vue, ImmersivePlayerView.vue, and LyricsPlayerView.vue render lyric and full-screen listening experiences. OnboardingGuide.vue helps first-time users. Monetization components such as UpgradeDialog.vue and FeatureGateNotice.vue must describe preview and planned entitlements accurately; displaying a plan is not proof that checkout or activation is live.
Adding a component
Keep the public interface small. Pass reactive state as props, emit an intent, and have the owning page or app perform the mutation. Add a focus label for icon-only buttons. Reuse the --of-* semantic tokens for colors so the component follows active themes. Verify both desktop and narrow layouts and test an interaction that exercises the component’s real parent-child contract.