From 7c9f1820f85edd793f682e95330fa178f800dbda Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Fri, 30 Jan 2026 15:53:14 -0600
Subject: [PATCH] feat(immersive): create unified ImmersivePlayer component

New component architecture:
- ImmersivePlayer.svelte: Main container with tab system
- ImmersiveHeader.svelte: Tabs (lyrics/credits/suggestions/visualizer)
- ImmersiveControls.svelte: Bottom bar with all playback controls
- ImmersiveArtwork.svelte: Album art with floating/vinyl variants
- ImmersiveBackground.svelte: Optimized blur background (from Phase 1)

Panel components:
- LyricsPanel: Wrapper for existing LyricsLines
- CreditsPanel: Placeholder (Phase 3)
- SuggestionsPanel: Placeholder (Phase 4)
- VisualizerPanel: Placeholder (Phase 5)

Shared components:
- ProgressBar: Reusable seek bar with keyboard support
- VolumeSlider: Reusable volume control

Features:
- Tab-based navigation (L/C/S/V keyboard shortcuts)
- Auto-hide UI after 4 seconds of inactivity
- Full keyboard control (Space, Arrows, Escape)
- Responsive layout (desktop/tablet/mobile)
- Accessibility: ARIA roles, focus management
---
 .../immersive/ImmersiveArtwork.svelte         | 115 +++++
 .../immersive/ImmersiveControls.svelte        | 408 ++++++++++++++++++
 .../immersive/ImmersiveHeader.svelte          | 185 ++++++++
 .../immersive/ImmersivePlayer.svelte          | 359 +++++++++++++++
 src/lib/components/immersive/index.ts         |  19 +
 .../immersive/panels/CreditsPanel.svelte      |  58 +++
 .../immersive/panels/LyricsPanel.svelte       | 131 ++++++
 .../immersive/panels/SuggestionsPanel.svelte  |  58 +++
 .../immersive/panels/VisualizerPanel.svelte   |  58 +++
 .../immersive/shared/ProgressBar.svelte       | 179 ++++++++
 .../immersive/shared/VolumeSlider.svelte      | 160 +++++++
 11 files changed, 1730 insertions(+)
 create mode 100644 src/lib/components/immersive/ImmersiveArtwork.svelte
 create mode 100644 src/lib/components/immersive/ImmersiveControls.svelte
 create mode 100644 src/lib/components/immersive/ImmersiveHeader.svelte
 create mode 100644 src/lib/components/immersive/ImmersivePlayer.svelte
 create mode 100644 src/lib/components/immersive/index.ts
 create mode 100644 src/lib/components/immersive/panels/CreditsPanel.svelte
 create mode 100644 src/lib/components/immersive/panels/LyricsPanel.svelte
 create mode 100644 src/lib/components/immersive/panels/SuggestionsPanel.svelte
 create mode 100644 src/lib/components/immersive/panels/VisualizerPanel.svelte
 create mode 100644 src/lib/components/immersive/shared/ProgressBar.svelte
 create mode 100644 src/lib/components/immersive/shared/VolumeSlider.svelte

diff --git a/src/lib/components/immersive/ImmersiveArtwork.svelte b/src/lib/components/immersive/ImmersiveArtwork.svelte
new file mode 100644
index 000000000..faaa080fa
--- /dev/null
+++ b/src/lib/components/immersive/ImmersiveArtwork.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+  interface Props {
+    artwork: string;
+    trackTitle: string;
+    variant?: 'floating' | 'vinyl';
+  }
+
+  let { artwork, trackTitle, variant = 'floating' }: Props = $props();
+</script>
+
+<div class="artwork-container" class:vinyl={variant === 'vinyl'}>
+  {#if variant === 'vinyl'}
+    <div class="vinyl-disc">
+      <div class="vinyl-grooves"></div>
+      <div class="vinyl-label">
+        <img src={artwork} alt={trackTitle} />
+      </div>
+    </div>
+  {:else}
+    <div class="artwork-wrapper">
+      <img src={artwork} alt={trackTitle} />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .artwork-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  /* Floating variant (default) */
+  .artwork-wrapper {
+    width: 100%;
+    max-width: 380px;
+    aspect-ratio: 1;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow:
+      0 32px 64px rgba(0, 0, 0, 0.5),
+      0 0 0 1px rgba(255, 255, 255, 0.05);
+  }
+
+  .artwork-wrapper img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* Vinyl variant */
+  .vinyl-disc {
+    position: relative;
+    width: 100%;
+    max-width: 380px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: linear-gradient(
+      135deg,
+      #1a1a1a 0%,
+      #0a0a0a 50%,
+      #1a1a1a 100%
+    );
+    box-shadow:
+      0 32px 64px rgba(0, 0, 0, 0.6),
+      inset 0 2px 4px rgba(255, 255, 255, 0.05);
+  }
+
+  .vinyl-grooves {
+    position: absolute;
+    inset: 5%;
+    border-radius: 50%;
+    background: repeating-radial-gradient(
+      circle at center,
+      transparent 0px,
+      transparent 2px,
+      rgba(255, 255, 255, 0.03) 2px,
+      rgba(255, 255, 255, 0.03) 3px
+    );
+  }
+
+  .vinyl-label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 45%;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  .vinyl-label img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* Responsive */
+  @media (max-width: 1200px) {
+    .artwork-wrapper,
+    .vinyl-disc {
+      max-width: 320px;
+    }
+  }
+
+  @media (max-width: 900px) {
+    .artwork-wrapper,
+    .vinyl-disc {
+      max-width: 280px;
+    }
+  }
+</style>
diff --git a/src/lib/components/immersive/ImmersiveControls.svelte b/src/lib/components/immersive/ImmersiveControls.svelte
new file mode 100644
index 000000000..5f05064c1
--- /dev/null
+++ b/src/lib/components/immersive/ImmersiveControls.svelte
@@ -0,0 +1,408 @@
+<script lang="ts">
+  import { Shuffle, SkipBack, Play, Pause, SkipForward, Repeat, Heart, List } from 'lucide-svelte';
+  import ProgressBar from './shared/ProgressBar.svelte';
+  import VolumeSlider from './shared/VolumeSlider.svelte';
+  import QualityBadge from '../QualityBadge.svelte';
+
+  interface Props {
+    visible?: boolean;
+    // Track info
+    artwork: string;
+    trackTitle: string;
+    artist: string;
+    // Playback state
+    isPlaying: boolean;
+    currentTime: number;
+    duration: number;
+    // Controls
+    isShuffle: boolean;
+    repeatMode: 'off' | 'all' | 'one';
+    isFavorite: boolean;
+    volume: number;
+    // Quality info
+    quality?: string;
+    bitDepth?: number;
+    samplingRate?: number;
+    // Callbacks
+    onTogglePlay: () => void;
+    onSkipBack?: () => void;
+    onSkipForward?: () => void;
+    onSeek: (time: number) => void;
+    onToggleShuffle: () => void;
+    onToggleRepeat: () => void;
+    onToggleFavorite: () => void;
+    onVolumeChange: (volume: number) => void;
+    onOpenQueue?: () => void;
+    // Compact mode (hide some elements)
+    compact?: boolean;
+  }
+
+  let {
+    visible = true,
+    artwork,
+    trackTitle,
+    artist,
+    isPlaying,
+    currentTime,
+    duration,
+    isShuffle,
+    repeatMode,
+    isFavorite,
+    volume,
+    quality,
+    bitDepth,
+    samplingRate,
+    onTogglePlay,
+    onSkipBack,
+    onSkipForward,
+    onSeek,
+    onToggleShuffle,
+    onToggleRepeat,
+    onToggleFavorite,
+    onVolumeChange,
+    onOpenQueue,
+    compact = false
+  }: Props = $props();
+</script>
+
+<div class="immersive-controls" class:visible class:compact>
+  <!-- Left: Track Info -->
+  {#if !compact}
+    <div class="track-info">
+      <img src={artwork} alt="" class="mini-artwork" />
+      <div class="track-meta">
+        <div class="track-title">{trackTitle}</div>
+        <div class="track-artist">{artist}</div>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Center: Playback Controls + Progress -->
+  <div class="playback-section">
+    <div class="controls">
+      <button
+        class="control-btn secondary"
+        class:active={isShuffle}
+        onclick={onToggleShuffle}
+        title="Shuffle"
+      >
+        <Shuffle size={18} />
+      </button>
+
+      <button
+        class="control-btn"
+        onclick={onSkipBack}
+        disabled={!onSkipBack}
+        title="Previous"
+      >
+        <SkipBack size={20} />
+      </button>
+
+      <button
+        class="control-btn play-btn"
+        onclick={onTogglePlay}
+        title={isPlaying ? 'Pause' : 'Play'}
+      >
+        {#if isPlaying}
+          <Pause size={24} />
+        {:else}
+          <Play size={24} class="play-icon" />
+        {/if}
+      </button>
+
+      <button
+        class="control-btn"
+        onclick={onSkipForward}
+        disabled={!onSkipForward}
+        title="Next"
+      >
+        <SkipForward size={20} />
+      </button>
+
+      <button
+        class="control-btn secondary"
+        class:active={repeatMode !== 'off'}
+        onclick={onToggleRepeat}
+        title={repeatMode === 'off' ? 'Repeat' : repeatMode === 'all' ? 'Repeat All' : 'Repeat One'}
+      >
+        <Repeat size={18} />
+        {#if repeatMode === 'one'}
+          <span class="repeat-indicator">1</span>
+        {/if}
+      </button>
+    </div>
+
+    <div class="progress-wrapper">
+      <ProgressBar {currentTime} {duration} {onSeek} />
+    </div>
+  </div>
+
+  <!-- Right: Volume + Actions -->
+  {#if !compact}
+    <div class="right-section">
+      <button
+        class="action-btn"
+        class:active={isFavorite}
+        onclick={onToggleFavorite}
+        title={isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}
+      >
+        <Heart
+          size={18}
+          fill={isFavorite ? 'currentColor' : 'none'}
+        />
+      </button>
+
+      {#if onOpenQueue}
+        <button class="action-btn" onclick={onOpenQueue} title="Queue">
+          <List size={18} />
+        </button>
+      {/if}
+
+      <div class="volume-wrapper">
+        <VolumeSlider {volume} {onVolumeChange} />
+      </div>
+
+      {#if quality}
+        <div class="quality-wrapper">
+          <QualityBadge {quality} {bitDepth} {samplingRate} />
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .immersive-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    padding: 20px 32px 28px;
+    background: linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.85) 0%,
+      rgba(0, 0, 0, 0.5) 50%,
+      transparent 100%
+    );
+    opacity: 0;
+    transform: translateY(8px);
+    transition: opacity 250ms ease, transform 250ms ease;
+    pointer-events: none;
+  }
+
+  .immersive-controls.visible {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  /* Track Info (Left) */
+  .track-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 200px;
+    max-width: 280px;
+  }
+
+  .mini-artwork {
+    width: 48px;
+    height: 48px;
+    border-radius: 6px;
+    object-fit: cover;
+    flex-shrink: 0;
+  }
+
+  .track-meta {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .track-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary, white);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .track-artist {
+    font-size: 12px;
+    color: var(--alpha-60, rgba(255, 255, 255, 0.6));
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-top: 2px;
+  }
+
+  /* Playback Section (Center) */
+  .playback-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    max-width: 600px;
+  }
+
+  .controls {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .control-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: none;
+    border: none;
+    border-radius: 50%;
+    color: var(--alpha-85, rgba(255, 255, 255, 0.85));
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .control-btn:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  .control-btn:not(:disabled):hover {
+    color: var(--text-primary, white);
+    background: var(--alpha-10, rgba(255, 255, 255, 0.1));
+  }
+
+  .control-btn.secondary {
+    width: 36px;
+    height: 36px;
+    color: var(--alpha-60, rgba(255, 255, 255, 0.6));
+  }
+
+  .control-btn.secondary.active {
+    color: var(--accent-primary, #7c3aed);
+  }
+
+  .control-btn.play-btn {
+    width: 52px;
+    height: 52px;
+    background: var(--alpha-15, rgba(255, 255, 255, 0.15));
+    color: var(--text-primary, white);
+  }
+
+  .control-btn.play-btn:hover {
+    background: var(--alpha-25, rgba(255, 255, 255, 0.25));
+    transform: scale(1.05);
+  }
+
+  .control-btn.play-btn :global(.play-icon) {
+    margin-left: 2px;
+  }
+
+  .repeat-indicator {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    font-size: 9px;
+    font-weight: 700;
+  }
+
+  .progress-wrapper {
+    width: 100%;
+  }
+
+  /* Right Section */
+  .right-section {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 200px;
+    justify-content: flex-end;
+  }
+
+  .action-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background: none;
+    border: none;
+    border-radius: 50%;
+    color: var(--alpha-60, rgba(255, 255, 255, 0.6));
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .action-btn:hover {
+    color: var(--text-primary, white);
+    background: var(--alpha-10, rgba(255, 255, 255, 0.1));
+  }
+
+  .action-btn.active {
+    color: var(--accent-primary, #7c3aed);
+  }
+
+  .volume-wrapper {
+    margin-left: 8px;
+  }
+
+  .quality-wrapper {
+    margin-left: 8px;
+  }
+
+  /* Compact mode */
+  .immersive-controls.compact .playback-section {
+    max-width: 100%;
+  }
+
+  /* Responsive */
+  @media (max-width: 900px) {
+    .track-info,
+    .right-section {
+      display: none;
+    }
+
+    .immersive-controls {
+      padding: 16px 24px 24px;
+    }
+
+    .playback-section {
+      max-width: 100%;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .immersive-controls {
+      padding: 12px 16px 20px;
+      gap: 12px;
+    }
+
+    .controls {
+      gap: 12px;
+    }
+
+    .control-btn {
+      width: 36px;
+      height: 36px;
+    }
+
+    .control-btn.play-btn {
+      width: 48px;
+      height: 48px;
+    }
+
+    .control-btn.secondary {
+      width: 32px;
+      height: 32px;
+    }
+  }
+</style>
diff --git a/src/lib/components/immersive/ImmersiveHeader.svelte b/src/lib/components/immersive/ImmersiveHeader.svelte
new file mode 100644
index 000000000..0e76baa3d
--- /dev/null
+++ b/src/lib/components/immersive/ImmersiveHeader.svelte
@@ -0,0 +1,185 @@
+<script lang="ts">
+  import { X, Maximize2, Minimize2, Music2, Info, Radio, BarChart3 } from 'lucide-svelte';
+  import { t } from '$lib/i18n';
+
+  export type ImmersiveTab = 'lyrics' | 'credits' | 'suggestions' | 'visualizer';
+
+  interface Props {
+    activeTab: ImmersiveTab;
+    onTabChange: (tab: ImmersiveTab) => void;
+    onClose: () => void;
+    visible?: boolean;
+    hasLyrics?: boolean;
+    hasCredits?: boolean;
+    hasSuggestions?: boolean;
+    hasVisualizer?: boolean;
+  }
+
+  let {
+    activeTab,
+    onTabChange,
+    onClose,
+    visible = true,
+    hasLyrics = true,
+    hasCredits = true,
+    hasSuggestions = true,
+    hasVisualizer = false
+  }: Props = $props();
+
+  const tabs = $derived([
+    { id: 'lyrics' as const, label: $t('player.lyrics'), icon: Music2, enabled: hasLyrics },
+    { id: 'credits' as const, label: $t('player.credits') || 'Credits', icon: Info, enabled: hasCredits },
+    { id: 'suggestions' as const, label: $t('player.suggestions') || 'Suggestions', icon: Radio, enabled: hasSuggestions },
+    { id: 'visualizer' as const, label: $t('player.visualizer') || 'Visualizer', icon: BarChart3, enabled: hasVisualizer },
+  ].filter(tab => tab.enabled));
+</script>
+
+<header class="immersive-header" class:visible>
+  <!-- Left: Logo/Brand (optional) -->
+  <div class="header-left">
+    <!-- Reserved for future use -->
+  </div>
+
+  <!-- Center/Right: Tabs -->
+  <nav class="tabs">
+    {#each tabs as tab (tab.id)}
+      <button
+        class="tab"
+        class:active={activeTab === tab.id}
+        onclick={() => onTabChange(tab.id)}
+      >
+        <tab.icon size={16} />
+        <span class="tab-label">{tab.label}</span>
+      </button>
+    {/each}
+  </nav>
+
+  <!-- Right: Actions -->
+  <div class="header-actions">
+    <button class="action-btn" onclick={onClose} title={$t('actions.close') + ' (Esc)'}>
+      <X size={20} />
+    </button>
+  </div>
+</header>
+
+<style>
+  .immersive-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px;
+    opacity: 0;
+    transform: translateY(-8px);
+    transition: opacity 250ms ease, transform 250ms ease;
+    pointer-events: none;
+  }
+
+  .immersive-header.visible {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  .header-left {
+    flex: 1;
+    min-width: 100px;
+  }
+
+  .tabs {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--alpha-10, rgba(255, 255, 255, 0.1));
+    border-radius: 12px;
+  }
+
+  .tab {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: none;
+    border: none;
+    border-radius: 8px;
+    color: var(--alpha-60, rgba(255, 255, 255, 0.6));
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .tab:hover {
+    color: var(--alpha-90, rgba(255, 255, 255, 0.9));
+    background: var(--alpha-10, rgba(255, 255, 255, 0.1));
+  }
+
+  .tab.active {
+    color: var(--text-primary, white);
+    background: var(--alpha-15, rgba(255, 255, 255, 0.15));
+  }
+
+
+  .header-actions {
+    flex: 1;
+    min-width: 100px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  .action-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--alpha-10, rgba(255, 255, 255, 0.1));
+    border-radius: 50%;
+    color: var(--alpha-70, rgba(255, 255, 255, 0.7));
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .action-btn:hover {
+    color: var(--text-primary, white);
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  /* Responsive */
+  @media (max-width: 900px) {
+    .tabs {
+      padding: 3px;
+    }
+
+    .tab {
+      padding: 8px 12px;
+    }
+
+    .tab-label {
+      display: none;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .immersive-header {
+      padding: 12px 16px;
+    }
+
+    .header-left {
+      display: none;
+    }
+
+    .action-btn {
+      width: 36px;
+      height: 36px;
+    }
+  }
+</style>
diff --git a/src/lib/components/immersive/ImmersivePlayer.svelte b/src/lib/components/immersive/ImmersivePlayer.svelte
new file mode 100644
index 000000000..b4251a789
--- /dev/null
+++ b/src/lib/components/immersive/ImmersivePlayer.svelte
@@ -0,0 +1,359 @@
+<script lang="ts">
+  import { startActiveLineUpdates } from '$lib/stores/lyricsStore';
+  import ImmersiveBackground from './ImmersiveBackground.svelte';
+  import ImmersiveArtwork from './ImmersiveArtwork.svelte';
+  import ImmersiveHeader, { type ImmersiveTab } from './ImmersiveHeader.svelte';
+  import ImmersiveControls from './ImmersiveControls.svelte';
+  import LyricsPanel from './panels/LyricsPanel.svelte';
+  import CreditsPanel from './panels/CreditsPanel.svelte';
+  import SuggestionsPanel from './panels/SuggestionsPanel.svelte';
+  import VisualizerPanel from './panels/VisualizerPanel.svelte';
+
+  interface LyricsLine {
+    text: string;
+  }
+
+  interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    // Track info
+    artwork: string;
+    trackTitle: string;
+    artist: string;
+    album?: string;
+    trackId?: number;
+    artistId?: number;
+    // Quality
+    quality?: string;
+    bitDepth?: number;
+    samplingRate?: number;
+    // Playback state
+    isPlaying: boolean;
+    currentTime: number;
+    duration: number;
+    volume: number;
+    isShuffle: boolean;
+    repeatMode: 'off' | 'all' | 'one';
+    isFavorite: boolean;
+    // Callbacks
+    onTogglePlay: () => void;
+    onSkipBack?: () => void;
+    onSkipForward?: () => void;
+    onSeek: (time: number) => void;
+    onVolumeChange: (volume: number) => void;
+    onToggleShuffle: () => void;
+    onToggleRepeat: () => void;
+    onToggleFavorite: () => void;
+    onOpenQueue?: () => void;
+    // Lyrics
+    lyricsLines?: LyricsLine[];
+    lyricsActiveIndex?: number;
+    lyricsActiveProgress?: number;
+    lyricsSynced?: boolean;
+    lyricsLoading?: boolean;
+    lyricsError?: string | null;
+    // Feature flags
+    enableCredits?: boolean;
+    enableSuggestions?: boolean;
+    enableVisualizer?: boolean;
+  }
+
+  let {
+    isOpen,
+    onClose,
+    artwork,
+    trackTitle,
+    artist,
+    album,
+    trackId,
+    artistId,
+    quality,
+    bitDepth,
+    samplingRate,
+    isPlaying,
+    currentTime,
+    duration,
+    volume,
+    isShuffle,
+    repeatMode,
+    isFavorite,
+    onTogglePlay,
+    onSkipBack,
+    onSkipForward,
+    onSeek,
+    onVolumeChange,
+    onToggleShuffle,
+    onToggleRepeat,
+    onToggleFavorite,
+    onOpenQueue,
+    lyricsLines = [],
+    lyricsActiveIndex = -1,
+    lyricsActiveProgress = 0,
+    lyricsSynced = false,
+    lyricsLoading = false,
+    lyricsError = null,
+    enableCredits = true,
+    enableSuggestions = true,
+    enableVisualizer = false
+  }: Props = $props();
+
+  // UI State
+  let activeTab: ImmersiveTab = $state('lyrics');
+  let showUI = $state(true);
+  let hideTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const hasLyrics = $derived(lyricsLines.length > 0 || lyricsLoading);
+  const AUTO_HIDE_DELAY = 4000;
+
+  // Auto-hide UI after inactivity
+  function resetHideTimer() {
+    showUI = true;
+    if (hideTimeout) clearTimeout(hideTimeout);
+    hideTimeout = setTimeout(() => {
+      showUI = false;
+    }, AUTO_HIDE_DELAY);
+  }
+
+  function handleMouseMove() {
+    resetHideTimer();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!isOpen) return;
+
+    switch (e.key) {
+      case 'Escape':
+        onClose();
+        break;
+      case ' ':
+        e.preventDefault();
+        onTogglePlay();
+        break;
+      case 'ArrowLeft':
+        if (e.shiftKey && onSkipBack) {
+          onSkipBack();
+        } else {
+          onSeek(Math.max(0, currentTime - 5));
+        }
+        break;
+      case 'ArrowRight':
+        if (e.shiftKey && onSkipForward) {
+          onSkipForward();
+        } else {
+          onSeek(Math.min(duration, currentTime + 5));
+        }
+        break;
+      case 'l':
+      case 'L':
+        activeTab = 'lyrics';
+        break;
+      case 'c':
+      case 'C':
+        if (enableCredits) activeTab = 'credits';
+        break;
+      case 's':
+      case 'S':
+        if (enableSuggestions) activeTab = 'suggestions';
+        break;
+      case 'v':
+      case 'V':
+        if (enableVisualizer) activeTab = 'visualizer';
+        break;
+    }
+    resetHideTimer();
+  }
+
+  // Setup event listeners when open
+  $effect(() => {
+    if (isOpen) {
+      resetHideTimer();
+      document.addEventListener('keydown', handleKeydown);
+
+      return () => {
+        document.removeEventListener('keydown', handleKeydown);
+        if (hideTimeout) clearTimeout(hideTimeout);
+      };
+    }
+  });
+
+  // Start lyrics updates when open and playing synced lyrics
+  $effect(() => {
+    if (isOpen && isPlaying && lyricsSynced) {
+      startActiveLineUpdates();
+    }
+  });
+</script>
+
+{#if isOpen}
+  <div
+    class="immersive-player"
+    onmousemove={handleMouseMove}
+    role="dialog"
+    aria-modal="true"
+    aria-label="Now Playing"
+    tabindex="-1"
+  >
+    <!-- Background -->
+    <ImmersiveBackground {artwork} mode="blur" />
+
+    <!-- Header with tabs -->
+    <ImmersiveHeader
+      {activeTab}
+      onTabChange={(tab) => activeTab = tab}
+      {onClose}
+      visible={showUI}
+      hasLyrics={true}
+      hasCredits={enableCredits}
+      hasSuggestions={enableSuggestions}
+      hasVisualizer={enableVisualizer}
+    />
+
+    <!-- Main Content -->
+    <div class="main-content">
+      <!-- Left: Artwork -->
+      <div class="artwork-section">
+        <ImmersiveArtwork {artwork} {trackTitle} variant="floating" />
+      </div>
+
+      <!-- Right: Active Panel -->
+      <div class="panel-section">
+        {#if activeTab === 'lyrics'}
+          <LyricsPanel
+            lines={lyricsLines}
+            activeIndex={lyricsActiveIndex}
+            activeProgress={lyricsActiveProgress}
+            isSynced={lyricsSynced}
+            isLoading={lyricsLoading}
+            error={lyricsError}
+          />
+        {:else if activeTab === 'credits'}
+          <CreditsPanel {trackId} />
+        {:else if activeTab === 'suggestions'}
+          <SuggestionsPanel {trackId} {artistId} />
+        {:else if activeTab === 'visualizer'}
+          <VisualizerPanel {isPlaying} />
+        {/if}
+      </div>
+    </div>
+
+    <!-- Bottom Controls -->
+    <ImmersiveControls
+      visible={showUI}
+      {artwork}
+      {trackTitle}
+      {artist}
+      {isPlaying}
+      {currentTime}
+      {duration}
+      {isShuffle}
+      {repeatMode}
+      {isFavorite}
+      {volume}
+      {quality}
+      {bitDepth}
+      {samplingRate}
+      {onTogglePlay}
+      {onSkipBack}
+      {onSkipForward}
+      {onSeek}
+      {onToggleShuffle}
+      {onToggleRepeat}
+      {onToggleFavorite}
+      {onVolumeChange}
+      {onOpenQueue}
+    />
+  </div>
+{/if}
+
+<style>
+  .immersive-player {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--bg-primary, #0a0a0b);
+    animation: fadeIn 200ms ease-out;
+    overflow: hidden;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .main-content {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 1400px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 80px 48px 140px;
+    gap: 60px;
+    z-index: 1;
+  }
+
+  .artwork-section {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .panel-section {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    max-width: 560px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Responsive */
+  @media (max-width: 1200px) {
+    .main-content {
+      padding: 70px 32px 130px;
+      gap: 40px;
+    }
+
+    .panel-section {
+      max-width: 480px;
+    }
+  }
+
+  @media (max-width: 900px) {
+    .main-content {
+      flex-direction: column;
+      padding: 70px 24px 140px;
+      gap: 24px;
+      justify-content: flex-start;
+    }
+
+    .artwork-section {
+      flex: 0 0 auto;
+    }
+
+    .panel-section {
+      flex: 1;
+      max-width: 100%;
+      width: 100%;
+    }
+  }
+
+  @media (max-width: 600px) {
+    .main-content {
+      padding: 60px 16px 130px;
+      gap: 20px;
+    }
+  }
+</style>
diff --git a/src/lib/components/immersive/index.ts b/src/lib/components/immersive/index.ts
new file mode 100644
index 000000000..55705436a
--- /dev/null
+++ b/src/lib/components/immersive/index.ts
@@ -0,0 +1,19 @@
+// Immersive Player Components
+export { default as ImmersivePlayer } from './ImmersivePlayer.svelte';
+export { default as ImmersiveBackground } from './ImmersiveBackground.svelte';
+export { default as ImmersiveArtwork } from './ImmersiveArtwork.svelte';
+export { default as ImmersiveHeader } from './ImmersiveHeader.svelte';
+export { default as ImmersiveControls } from './ImmersiveControls.svelte';
+
+// Panels
+export { default as LyricsPanel } from './panels/LyricsPanel.svelte';
+export { default as CreditsPanel } from './panels/CreditsPanel.svelte';
+export { default as SuggestionsPanel } from './panels/SuggestionsPanel.svelte';
+export { default as VisualizerPanel } from './panels/VisualizerPanel.svelte';
+
+// Shared
+export { default as ProgressBar } from './shared/ProgressBar.svelte';
+export { default as VolumeSlider } from './shared/VolumeSlider.svelte';
+
+// Types
+export type { ImmersiveTab } from './ImmersiveHeader.svelte';
diff --git a/src/lib/components/immersive/panels/CreditsPanel.svelte b/src/lib/components/immersive/panels/CreditsPanel.svelte
new file mode 100644
index 000000000..820dff46e
--- /dev/null
+++ b/src/lib/components/immersive/panels/CreditsPanel.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { t } from '$lib/i18n';
+
+  interface Props {
+    trackId?: number;
+  }
+
+  let { trackId }: Props = $props();
+
+  // TODO: Implement credits fetching in Phase 3
+  let isLoading = $state(false);
+  let credits = $state<null>(null);
+</script>
+
+<div class="credits-panel">
+  <div class="placeholder">
+    <span class="placeholder-icon">ℹ️</span>
+    <span class="placeholder-text">{$t('player.creditsComingSoon') || 'Credits coming soon'}</span>
+    <span class="placeholder-hint">Producer, Composer, Musicians...</span>
+  </div>
+</div>
+
+<style>
+  .credits-panel {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    padding: 24px;
+  }
+
+  .placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    height: 100%;
+    min-height: 200px;
+    color: var(--alpha-40, rgba(255, 255, 255, 0.4));
+  }
+
+  .placeholder-icon {
+    font-size: 32px;
+    opacity: 0.5;
+  }
+
+  .placeholder-text {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .placeholder-hint {
+    font-size: 13px;
+    color: var(--alpha-30, rgba(255, 255, 255, 0.3));
+  }
+</style>
diff --git a/src/lib/components/immersive/panels/LyricsPanel.svelte b/src/lib/components/immersive/panels/LyricsPanel.svelte
new file mode 100644
index 000000000..9a8e6ed9f
--- /dev/null
+++ b/src/lib/components/immersive/panels/LyricsPanel.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+  import LyricsLines from '../../lyrics/LyricsLines.svelte';
+  import { t } from '$lib/i18n';
+
+  interface LyricsLine {
+    text: string;
+  }
+
+  interface Props {
+    lines: LyricsLine[];
+    activeIndex?: number;
+    activeProgress?: number;
+    isSynced?: boolean;
+    isLoading?: boolean;
+    error?: string | null;
+  }
+
+  let {
+    lines = [],
+    activeIndex = -1,
+    activeProgress = 0,
+    isSynced = false,
+    isLoading = false,
+    error = null
+  }: Props = $props();
+
+  const hasLyrics = $derived(lines.length > 0);
+</script>
+
+<div class="lyrics-panel">
+  {#if isLoading}
+    <div class="lyrics-state">
+      <div class="spinner"></div>
+      <span>{$t('player.fetchingLyrics')}</span>
+    </div>
+  {:else if error}
+    <div class="lyrics-state">
+      <span class="error-text">{error}</span>
+    </div>
+  {:else if hasLyrics}
+    <div class="lyrics-container">
+      <LyricsLines
+        {lines}
+        {activeIndex}
+        {activeProgress}
+        {isSynced}
+        center={false}
+        compact={false}
+        immersive={true}
+      />
+    </div>
+  {:else}
+    <div class="lyrics-state">
+      <span class="no-lyrics">{$t('player.noLyrics') || 'No lyrics available'}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .lyrics-panel {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .lyrics-container {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      black 8%,
+      black 85%,
+      transparent 100%
+    );
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      black 8%,
+      black 85%,
+      transparent 100%
+    );
+  }
+
+  .lyrics-container :global(.lyrics-lines) {
+    --text-primary: var(--alpha-95, rgba(255, 255, 255, 0.95));
+    --text-secondary: var(--alpha-50, rgba(255, 255, 255, 0.5));
+    --text-muted: var(--alpha-25, rgba(255, 255, 255, 0.25));
+    --bg-tertiary: var(--alpha-8, rgba(255, 255, 255, 0.08));
+    padding: 0;
+    height: 100%;
+  }
+
+  .lyrics-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    height: 100%;
+    min-height: 200px;
+    color: var(--alpha-50, rgba(255, 255, 255, 0.5));
+    font-size: 14px;
+  }
+
+  .error-text {
+    color: var(--alpha-40, rgba(255, 255, 255, 0.4));
+  }
+
+  .no-lyrics {
+    font-style: italic;
+  }
+
+  .spinner {
+    width: 24px;
+    height: 24px;
+    border: 2px solid var(--alpha-20, rgba(255, 255, 255, 0.2));
+    border-top-color: var(--alpha-80, rgba(255, 255, 255, 0.8));
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>
diff --git a/src/lib/components/immersive/panels/SuggestionsPanel.svelte b/src/lib/components/immersive/panels/SuggestionsPanel.svelte
new file mode 100644
index 000000000..dd2e94382
--- /dev/null
+++ b/src/lib/components/immersive/panels/SuggestionsPanel.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { t } from '$lib/i18n';
+
+  interface Props {
+    trackId?: number;
+    artistId?: number;
+  }
+
+  let { trackId, artistId }: Props = $props();
+
+  // TODO: Implement suggestions fetching in Phase 4
+  let isLoading = $state(false);
+</script>
+
+<div class="suggestions-panel">
+  <div class="placeholder">
+    <span class="placeholder-icon">📻</span>
+    <span class="placeholder-text">{$t('player.suggestionsComingSoon') || 'Suggestions coming soon'}</span>
+    <span class="placeholder-hint">Artist Radio, Track Radio, Similar Tracks...</span>
+  </div>
+</div>
+
+<style>
+  .suggestions-panel {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    padding: 24px;
+  }
+
+  .placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    height: 100%;
+    min-height: 200px;
+    color: var(--alpha-40, rgba(255, 255, 255, 0.4));
+  }
+
+  .placeholder-icon {
+    font-size: 32px;
+    opacity: 0.5;
+  }
+
+  .placeholder-text {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .placeholder-hint {
+    font-size: 13px;
+    color: var(--alpha-30, rgba(255, 255, 255, 0.3));
+  }
+</style>
diff --git a/src/lib/components/immersive/panels/VisualizerPanel.svelte b/src/lib/components/immersive/panels/VisualizerPanel.svelte
new file mode 100644
index 000000000..3d1db18c5
--- /dev/null
+++ b/src/lib/components/immersive/panels/VisualizerPanel.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { t } from '$lib/i18n';
+
+  interface Props {
+    isPlaying?: boolean;
+  }
+
+  let { isPlaying = false }: Props = $props();
+
+  // TODO: Implement visualizer in Phase 5
+  // Will use spectrum-analyzer crate in Rust + Canvas rendering
+</script>
+
+<div class="visualizer-panel">
+  <div class="placeholder">
+    <span class="placeholder-icon">📊</span>
+    <span class="placeholder-text">{$t('player.visualizerComingSoon') || 'Visualizer coming soon'}</span>
+    <span class="placeholder-hint">Frequency Bars, Waveform, Circular...</span>
+  </div>
+</div>
+
+<style>
+  .visualizer-panel {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    height: 100%;
+    min-height: 200px;
+    color: var(--alpha-40, rgba(255, 255, 255, 0.4));
+  }
+
+  .placeholder-icon {
+    font-size: 32px;
+    opacity: 0.5;
+  }
+
+  .placeholder-text {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .placeholder-hint {
+    font-size: 13px;
+    color: var(--alpha-30, rgba(255, 255, 255, 0.3));
+  }
+</style>
diff --git a/src/lib/components/immersive/shared/ProgressBar.svelte b/src/lib/components/immersive/shared/ProgressBar.svelte
new file mode 100644
index 000000000..2f2e664bc
--- /dev/null
+++ b/src/lib/components/immersive/shared/ProgressBar.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+  interface Props {
+    currentTime: number;
+    duration: number;
+    onSeek: (time: number) => void;
+    showTime?: boolean;
+    size?: 'small' | 'normal';
+  }
+
+  let {
+    currentTime,
+    duration,
+    onSeek,
+    showTime = true,
+    size = 'normal'
+  }: Props = $props();
+
+  let progressRef: HTMLDivElement | null = $state(null);
+  let isDragging = $state(false);
+
+  const progress = $derived(duration > 0 ? (currentTime / duration) * 100 : 0);
+
+  function formatTime(seconds: number): string {
+    if (!seconds || !isFinite(seconds)) return '0:00';
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  }
+
+  function handleMouseDown(e: MouseEvent) {
+    isDragging = true;
+    updateProgress(e);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }
+
+  function handleMouseMove(e: MouseEvent) {
+    if (isDragging) updateProgress(e);
+  }
+
+  function handleMouseUp() {
+    isDragging = false;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  }
+
+  function updateProgress(e: MouseEvent) {
+    if (!progressRef) return;
+    const rect = progressRef.getBoundingClientRect();
+    const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
+    onSeek(Math.round((percentage / 100) * duration));
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    const step = e.shiftKey ? 10 : 5;
+    if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      onSeek(Math.min(duration, currentTime + step));
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      onSeek(Math.max(0, currentTime - step));
+    }
+  }
+</script>
+
+<div class="progress-container" class:small={size === 'small'}>
+  {#if showTime}
+    <span class="time">{formatTime(currentTime)}</span>
+  {/if}
+
+  <div
+    class="progress-track"
+    bind:this={progressRef}
+    onmousedown={handleMouseDown}
+    onkeydown={handleKeydown}
+    role="slider"
+    tabindex="0"
+    aria-valuenow={currentTime}
+    aria-valuemin={0}
+    aria-valuemax={duration}
+    aria-label="Seek"
+  >
+    <div class="progress-fill" style="width: {progress}%"></div>
+    <div class="progress-thumb" style="left: {progress}%"></div>
+  </div>
+
+  {#if showTime}
+    <span class="time">{formatTime(duration)}</span>
+  {/if}
+</div>
+
+<style>
+  .progress-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+  }
+
+  .progress-container.small {
+    gap: 8px;
+  }
+
+  .time {
+    font-size: 12px;
+    font-family: var(--font-mono);
+    font-variant-numeric: tabular-nums;
+    color: var(--alpha-60, rgba(255, 255, 255, 0.6));
+    min-width: 40px;
+  }
+
+  .time:last-of-type {
+    text-align: right;
+  }
+
+  .progress-track {
+    flex: 1;
+    height: 4px;
+    background: var(--alpha-20, rgba(255, 255, 255, 0.2));
+    border-radius: 2px;
+    position: relative;
+    cursor: pointer;
+    transition: height 150ms ease;
+  }
+
+  .progress-track:hover,
+  .progress-track:focus-visible {
+    height: 6px;
+  }
+
+  .progress-track:focus-visible {
+    outline: 2px solid var(--accent-primary, #7c3aed);
+    outline-offset: 2px;
+  }
+
+  .progress-fill {
+    height: 100%;
+    background: var(--text-primary, white);
+    border-radius: 2px;
+    transition: width 100ms linear;
+  }
+
+  .progress-thumb {
+    position: absolute;
+    top: 50%;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--text-primary, white);
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 150ms ease;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+  }
+
+  .progress-track:hover .progress-thumb,
+  .progress-track:focus-visible .progress-thumb {
+    opacity: 1;
+  }
+
+  /* Small variant */
+  .progress-container.small .time {
+    font-size: 11px;
+    min-width: 36px;
+  }
+
+  .progress-container.small .progress-track {
+    height: 3px;
+  }
+
+  .progress-container.small .progress-track:hover {
+    height: 5px;
+  }
+
+  .progress-container.small .progress-thumb {
+    width: 10px;
+    height: 10px;
+  }
+</style>
diff --git a/src/lib/components/immersive/shared/VolumeSlider.svelte b/src/lib/components/immersive/shared/VolumeSlider.svelte
new file mode 100644
index 000000000..2fcea5199
--- /dev/null
+++ b/src/lib/components/immersive/shared/VolumeSlider.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+  import { Volume2, VolumeX } from 'lucide-svelte';
+
+  interface Props {
+    volume: number;
+    onVolumeChange: (volume: number) => void;
+    showIcon?: boolean;
+  }
+
+  let { volume, onVolumeChange, showIcon = true }: Props = $props();
+
+  let volumeRef: HTMLDivElement | null = $state(null);
+  let isDragging = $state(false);
+  let showValue = $state(false);
+
+  function handleMouseDown(e: MouseEvent) {
+    isDragging = true;
+    showValue = true;
+    updateVolume(e);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }
+
+  function handleMouseMove(e: MouseEvent) {
+    if (isDragging) updateVolume(e);
+  }
+
+  function handleMouseUp() {
+    isDragging = false;
+    setTimeout(() => {
+      if (!isDragging) showValue = false;
+    }, 500);
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  }
+
+  function updateVolume(e: MouseEvent) {
+    if (!volumeRef) return;
+    const rect = volumeRef.getBoundingClientRect();
+    const percentage = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
+    onVolumeChange(Math.round(percentage));
+  }
+
+  function toggleMute() {
+    onVolumeChange(volume > 0 ? 0 : 50);
+  }
+</script>
+
+<div class="volume-container">
+  {#if showIcon}
+    <button class="volume-icon" onclick={toggleMute} title={volume > 0 ? 'Mute' : 'Unmute'}>
+      {#if volume === 0}
+        <VolumeX size={18} />
+      {:else}
+        <Volume2 size={18} />
+      {/if}
+    </button>
+  {/if}
+
+  <div class="volume-slider">
+    <div class="volume-value" class:visible={showValue}>{volume}</div>
+    <div
+      class="volume-track"
+      bind:this={volumeRef}
+      onmousedown={handleMouseDown}
+      role="slider"
+      tabindex="0"
+      aria-valuenow={volume}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label="Volume"
+    >
+      <div class="volume-fill" style="width: {volume}%"></div>
+      <div class="volume-thumb" style="left: {volume}%"></div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .volume-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .volume-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: none;
+    border: none;
+    border-radius: 50%;
+    color: var(--alpha-70, rgba(255, 255, 255, 0.7));
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .volume-icon:hover {
+    color: var(--text-primary, white);
+    background: var(--alpha-10, rgba(255, 255, 255, 0.1));
+  }
+
+  .volume-slider {
+    position: relative;
+    width: 100px;
+  }
+
+  .volume-value {
+    position: absolute;
+    right: 0;
+    top: -28px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    background: rgba(0, 0, 0, 0.7);
+    color: var(--text-primary, white);
+    font-size: 12px;
+    font-weight: 600;
+    opacity: 0;
+    transform: translateY(4px);
+    transition: opacity 150ms ease, transform 150ms ease;
+    pointer-events: none;
+  }
+
+  .volume-value.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .volume-track {
+    height: 4px;
+    background: var(--alpha-20, rgba(255, 255, 255, 0.2));
+    border-radius: 2px;
+    position: relative;
+    cursor: pointer;
+  }
+
+  .volume-fill {
+    height: 100%;
+    background: var(--alpha-70, rgba(255, 255, 255, 0.7));
+    border-radius: 2px;
+  }
+
+  .volume-thumb {
+    position: absolute;
+    top: 50%;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--text-primary, white);
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+
+  .volume-track:hover .volume-thumb {
+    opacity: 1;
+  }
+</style>