loukai-app 0.3.0

package/src/shared/components/SongInfoBar.jsx

@@ -0,0 +1,81 @@
+/**
+ * SongInfoBar - Displays current song info at the top
+ *
+ * Shows song title, artist, format icon, and optional hamburger menu
+ * Works with both ElectronBridge and WebBridge
+ */
+
+import { getFormatIcon } from '../formatUtils.js';
+import { ThemeToggle } from './ThemeToggle.jsx';
+
+export function SongInfoBar({
+  currentSong,
+  onMenuClick,
+  sidebarCollapsed = false,
+  className = '',
+}) {
+  const formatIcon = currentSong?.format ? getFormatIcon(currentSong.format) : '';
+
+  // Check for loading state
+  const songDisplay = currentSong?.isLoading
+    ? '⏳ Loading...'
+    : currentSong
+      ? `${currentSong.title || 'Unknown'} - ${currentSong.artist || 'Unknown Artist'}`
+      : 'No song loaded';
+
+  return (
+    <div
+      className={`bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-2 flex items-center justify-between ${className}`}
+    >
+      <div className="flex items-center">
+        {onMenuClick && (
+          <button
+            onClick={onMenuClick}
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition flex items-center justify-center"
+            title={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
+            aria-label={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
+          >
+            {sidebarCollapsed ? (
+              <svg
+                className="w-5 h-5 text-gray-700 dark:text-gray-300"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16m-7 6h7"
+                />
+              </svg>
+            ) : (
+              <svg
+                className="w-5 h-5 text-gray-700 dark:text-gray-300"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              </svg>
+            )}
+          </button>
+        )}
+      </div>
+      <div className="flex-1 flex items-center justify-center">
+        <div className="flex items-center gap-2 text-gray-900 dark:text-gray-100">
+          {formatIcon && <span className="text-xl">{formatIcon}</span>}
+          <span className="font-medium truncate max-w-2xl">{songDisplay}</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <ThemeToggle />
+      </div>
+    </div>
+  );
+}

package/src/shared/components/ThemeToggle.jsx

@@ -0,0 +1,106 @@
+/**
+ * ThemeToggle - Dark/Light/System mode toggle button
+ *
+ * Manages theme state and applies dark class to document root
+ * Supports: light, dark, system (follows OS preference)
+ */
+
+import { useState, useEffect } from 'react';
+
+export function ThemeToggle({ className = '' }) {
+  const [theme, setTheme] = useState('dark');
+
+  useEffect(() => {
+    // Check for saved theme or default to dark
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+    setTheme(savedTheme);
+    applyTheme(savedTheme);
+
+    // Listen for system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = () => {
+      if (theme === 'system') {
+        applyTheme('system');
+      }
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme]);
+
+  const applyTheme = (newTheme) => {
+    if (newTheme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else if (newTheme === 'light') {
+      document.documentElement.classList.remove('dark');
+    } else {
+      // system
+      const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (isDark) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    }
+  };
+
+  const cycleTheme = () => {
+    const themes = ['light', 'dark', 'system'];
+    const currentIndex = themes.indexOf(theme);
+    const nextTheme = themes[(currentIndex + 1) % themes.length];
+    setTheme(nextTheme);
+    localStorage.setItem('theme', nextTheme);
+    applyTheme(nextTheme);
+  };
+
+  const getIcon = () => {
+    if (theme === 'light') {
+      return (
+        <svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            fillRule="evenodd"
+            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+            clipRule="evenodd"
+          />
+        </svg>
+      );
+    } else if (theme === 'dark') {
+      return (
+        <svg className="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+        </svg>
+      );
+    } else {
+      // system
+      return (
+        <svg
+          className="w-5 h-5 text-gray-500 dark:text-gray-400"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fillRule="evenodd"
+            d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2h-2.22l.123.489.804.804A1 1 0 0113 18H7a1 1 0 01-.707-1.707l.804-.804L7.22 15H5a2 2 0 01-2-2V5zm5.771 7H5V5h10v7H8.771z"
+            clipRule="evenodd"
+          />
+        </svg>
+      );
+    }
+  };
+
+  const getTitle = () => {
+    if (theme === 'light') return 'Light mode (click for dark)';
+    if (theme === 'dark') return 'Dark mode (click for system)';
+    return 'System mode (click for light)';
+  };
+
+  return (
+    <button
+      onClick={cycleTheme}
+      className={`p-2 rounded-lg transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 ${className}`}
+      title={getTitle()}
+      aria-label={getTitle()}
+    >
+      {getIcon()}
+    </button>
+  );
+}

package/src/shared/components/Toast.jsx

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+export function Toast({ message, type = 'info', onClose, duration = 3000 }) {
+  useEffect(() => {
+    if (duration > 0) {
+      const timer = setTimeout(onClose, duration);
+      return () => clearTimeout(timer);
+    }
+  }, [duration, onClose]);
+
+  const typeStyles = {
+    success: 'bg-green-600 border-green-500',
+    error: 'bg-red-600 border-red-500',
+    info: 'bg-blue-600 border-blue-500',
+  };
+
+  const iconName = type === 'success' ? 'check_circle' : type === 'error' ? 'error' : 'info';
+
+  return (
+    <div
+      className={`fixed top-4 right-4 z-50 ${typeStyles[type]} border-l-4 rounded-lg shadow-lg px-6 py-4 cursor-pointer transition-opacity hover:opacity-90`}
+      onClick={onClose}
+    >
+      <div className="flex items-center gap-3 text-white">
+        <span className="material-icons text-2xl">{iconName}</span>
+        <span className="font-medium">{message}</span>
+      </div>
+    </div>
+  );
+}

package/src/shared/components/VisualizationSettings.jsx

@@ -0,0 +1,243 @@
+/**
+ * VisualizationSettings - Shared waveform and auto-tune settings component
+ *
+ * Used by both renderer and web admin for controlling:
+ * - Waveform visualization options
+ * - Auto-tune settings
+ *
+ * Uses unified defaults from shared/defaults.js
+ */
+
+import React, { useState, useEffect } from 'react';
+import { WAVEFORM_DEFAULTS, AUTOTUNE_DEFAULTS } from '../defaults.js';
+
+export function VisualizationSettings({
+  bridge,
+  waveformSettings: externalWaveform = null,
+  autotuneSettings: externalAutotune = null,
+  onWaveformChange = null,
+  onAutotuneChange = null,
+}) {
+  const [waveformSettings, setWaveformSettings] = useState({ ...WAVEFORM_DEFAULTS });
+
+  const [autotuneSettings, setAutotuneSettings] = useState({
+    ...AUTOTUNE_DEFAULTS,
+    preferVocals: true,
+  });
+
+  // Load preferences on mount
+  useEffect(() => {
+    if (!bridge) return;
+
+    const loadPreferences = async () => {
+      try {
+        const waveform = await bridge.getWaveformPreferences?.();
+        if (waveform) {
+          setWaveformSettings((prev) => ({ ...prev, ...waveform }));
+        }
+
+        const autotune = await bridge.getAutotunePreferences?.();
+        if (autotune) {
+          setAutotuneSettings((prev) => ({ ...prev, ...autotune }));
+        }
+      } catch (error) {
+        console.error('Failed to load preferences:', error);
+      }
+    };
+
+    loadPreferences();
+  }, [bridge]);
+
+  // Sync with external settings (from socket events in web UI)
+  useEffect(() => {
+    if (externalWaveform) {
+      setWaveformSettings((prev) => ({ ...prev, ...externalWaveform }));
+    }
+  }, [externalWaveform]);
+
+  useEffect(() => {
+    if (externalAutotune) {
+      setAutotuneSettings((prev) => ({ ...prev, ...externalAutotune }));
+    }
+  }, [externalAutotune]);
+
+  // Listen for settings changes from external sources (web admin → renderer)
+  useEffect(() => {
+    if (!bridge) return;
+
+    const unsubWaveform = bridge.onSettingsChanged?.('waveform', (settings) => {
+      setWaveformSettings((prev) => ({ ...prev, ...settings }));
+    });
+
+    const unsubAutotune = bridge.onSettingsChanged?.('autotune', (settings) => {
+      setAutotuneSettings((prev) => ({ ...prev, ...settings }));
+    });
+
+    return () => {
+      unsubWaveform?.();
+      unsubAutotune?.();
+    };
+  }, [bridge]);
+
+  // Waveform setting change
+  const handleWaveformChange = async (key, value) => {
+    const newSettings = { ...waveformSettings, [key]: value };
+    setWaveformSettings(newSettings);
+
+    // Notify parent if callback provided (web UI)
+    if (onWaveformChange) {
+      onWaveformChange(newSettings);
+    }
+
+    try {
+      await bridge.saveWaveformPreferences?.(newSettings);
+    } catch (error) {
+      console.error('Failed to save waveform preferences:', error);
+    }
+  };
+
+  // Auto-tune setting change
+  const handleAutotuneChange = async (key, value) => {
+    const newSettings = { ...autotuneSettings, [key]: value };
+    setAutotuneSettings(newSettings);
+
+    // Notify parent if callback provided (web UI)
+    if (onAutotuneChange) {
+      onAutotuneChange(newSettings);
+    }
+
+    try {
+      // saveAutotunePreferences now handles both persistence AND real-time application
+      await bridge.saveAutotunePreferences?.(newSettings);
+    } catch (error) {
+      console.error('Failed to save autotune preferences:', error);
+    }
+  };
+
+  return (
+    <div className="p-4 space-y-6">
+      {/* Waveform Options */}
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-4">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Waveform Options</h3>
+        <div className="space-y-3">
+          <label className="flex items-center gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={waveformSettings.enableWaveforms}
+              onChange={(e) => handleWaveformChange('enableWaveforms', e.target.checked)}
+              className="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+            />
+            <span className="text-gray-900 dark:text-gray-100">Enable Waveforms</span>
+          </label>
+
+          <label className="flex items-center gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={waveformSettings.enableEffects}
+              onChange={(e) => handleWaveformChange('enableEffects', e.target.checked)}
+              className="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+            />
+            <span className="text-gray-900 dark:text-gray-100">Enable Background Effects</span>
+          </label>
+
+          <label className="flex items-center gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={waveformSettings.randomEffectOnSong}
+              onChange={(e) => handleWaveformChange('randomEffectOnSong', e.target.checked)}
+              className="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+            />
+            <span className="text-gray-900 dark:text-gray-100">Random Effect on New Song</span>
+          </label>
+
+          <label className="flex items-center gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={waveformSettings.showUpcomingLyrics}
+              onChange={(e) => handleWaveformChange('showUpcomingLyrics', e.target.checked)}
+              className="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+            />
+            <span className="text-gray-900 dark:text-gray-100">Show Upcoming Lyrics</span>
+          </label>
+
+          <div className="space-y-2">
+            <label className="flex items-center justify-between text-gray-900 dark:text-gray-100">
+              <span>Overlay Opacity:</span>
+              <span className="font-mono text-sm">
+                {waveformSettings.overlayOpacity.toFixed(2)}
+              </span>
+            </label>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.01"
+              value={waveformSettings.overlayOpacity}
+              onChange={(e) => handleWaveformChange('overlayOpacity', parseFloat(e.target.value))}
+              className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Auto-Tune Settings */}
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-4">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Auto-Tune</h3>
+        <div className="space-y-3">
+          <label className="flex items-center gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={autotuneSettings.enabled}
+              onChange={(e) => handleAutotuneChange('enabled', e.target.checked)}
+              className="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500"
+            />
+            <span className="text-gray-900 dark:text-gray-100">Enable Auto-Tune</span>
+          </label>
+
+          <label className="flex items-center gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={autotuneSettings.preferVocals}
+              onChange={(e) => handleAutotuneChange('preferVocals', e.target.checked)}
+              disabled={!autotuneSettings.enabled}
+              className="w-4 h-4 text-blue-600 rounded focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            />
+            <span className="text-gray-900 dark:text-gray-100">
+              Prefer Vocals for Pitch Reference
+            </span>
+          </label>
+
+          <div className="space-y-2">
+            <label className="flex items-center justify-between text-gray-900 dark:text-gray-100">
+              <span>Strength:</span>
+              <span className="font-mono text-sm">{autotuneSettings.strength}%</span>
+            </label>
+            <input
+              type="range"
+              min="0"
+              max="100"
+              value={autotuneSettings.strength}
+              onChange={(e) => handleAutotuneChange('strength', parseInt(e.target.value))}
+              className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="flex items-center justify-between text-gray-900 dark:text-gray-100">
+              <span>Speed:</span>
+              <span className="font-mono text-sm">{autotuneSettings.speed}</span>
+            </label>
+            <input
+              type="range"
+              min="1"
+              max="100"
+              value={autotuneSettings.speed}
+              onChange={(e) => handleAutotuneChange('speed', parseInt(e.target.value))}
+              className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-blue-600"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/shared/constants.js

@@ -0,0 +1,95 @@
+/**
+ * Shared constants - usable in browser, Electron renderer, and Node.js
+ */
+
+// IPC Channel Names
+export const IPC_CHANNELS = {
+  // App
+  APP_GET_VERSION: 'app:getVersion',
+  APP_GET_STATE: 'app:getState',
+
+  // File
+  FILE_OPEN_KAI: 'file:openKai',
+  FILE_LOAD_KAI_FROM_PATH: 'file:loadKaiFromPath',
+
+  // Audio
+  AUDIO_GET_DEVICES: 'audio:getDevices',
+  AUDIO_ENUMERATE_DEVICES: 'audio:enumerateDevices',
+  AUDIO_SET_DEVICE: 'audio:setDevice',
+
+  // Mixer
+  MIXER_SET_MASTER_GAIN: 'mixer:setMasterGain',
+  MIXER_TOGGLE_MASTER_MUTE: 'mixer:toggleMasterMute',
+
+  // Player
+  PLAYER_PLAY: 'player:play',
+  PLAYER_PAUSE: 'player:pause',
+  PLAYER_SEEK: 'player:seek',
+
+  // Editor
+  EDITOR_SAVE_KAI: 'editor:saveKai',
+  EDITOR_RELOAD_KAI: 'editor:reloadKai',
+
+  // Settings
+  SETTINGS_GET: 'settings:get',
+  SETTINGS_SET: 'settings:set',
+  SETTINGS_GET_ALL: 'settings:getAll',
+  SETTINGS_UPDATE_BATCH: 'settings:updateBatch',
+
+  // Library
+  LIBRARY_GET_SONGS_FOLDER: 'library:getSongsFolder',
+  LIBRARY_SET_SONGS_FOLDER: 'library:setSongsFolder',
+  LIBRARY_SCAN_FOLDER: 'library:scanFolder',
+  LIBRARY_SYNC_LIBRARY: 'library:syncLibrary',
+  LIBRARY_GET_CACHED_SONGS: 'library:getCachedSongs',
+  LIBRARY_GET_SONG_INFO: 'library:getSongInfo',
+
+  // Queue
+  QUEUE_ADD_SONG: 'queue:addSong',
+  QUEUE_REMOVE_SONG: 'queue:removeSong',
+  QUEUE_GET: 'queue:get',
+  QUEUE_CLEAR: 'queue:clear',
+
+  // Web Server
+  WEBSERVER_GET_PORT: 'webServer:getPort',
+  WEBSERVER_GET_URL: 'webServer:getUrl',
+  WEBSERVER_GET_SETTINGS: 'webServer:getSettings',
+  WEBSERVER_UPDATE_SETTINGS: 'webServer:updateSettings',
+  WEBSERVER_GET_SONG_REQUESTS: 'webServer:getSongRequests',
+  WEBSERVER_APPROVE_REQUEST: 'webServer:approveRequest',
+  WEBSERVER_REJECT_REQUEST: 'webServer:rejectRequest',
+  WEBSERVER_REFRESH_CACHE: 'webServer:refreshCache',
+};
+
+// Default Values
+export const DEFAULTS = {
+  MIXER: {
+    PA_GAIN: 0,
+    IEM_GAIN: 0,
+    MIC_GAIN: 0,
+  },
+  AUDIO: {
+    SAMPLE_RATE: 48000,
+    BUFFER_SIZE: 256,
+  },
+  WEBSERVER: {
+    PORT: 3000,
+    PASSWORD: '',
+  },
+};
+
+// Stem Names
+export const STEM_NAMES = {
+  VOCALS: 'vocals',
+  MUSIC: 'music',
+  DRUMS: 'drums',
+  BASS: 'bass',
+  OTHER: 'other',
+};
+
+// Bus Types
+export const BUS_TYPES = {
+  PA: 'PA',
+  IEM: 'IEM',
+  MIC: 'mic',
+};

package/src/shared/context/BridgeContext.jsx

@@ -0,0 +1,32 @@
+/**
+ * BridgeContext - Provides Bridge instance to React components
+ *
+ * This allows components to access the bridge without knowing whether
+ * they're running in Electron (ElectronBridge) or Web (WebBridge).
+ *
+ * Usage:
+ *   const bridge = useBridge();
+ *   await bridge.play();
+ */
+
+import React, { createContext, useContext } from 'react';
+
+const BridgeContext = createContext(null);
+
+export function BridgeProvider({ bridge, children }) {
+  if (!bridge) {
+    throw new Error('BridgeProvider requires a bridge instance');
+  }
+
+  return <BridgeContext.Provider value={bridge}>{children}</BridgeContext.Provider>;
+}
+
+export function useBridge() {
+  const bridge = useContext(BridgeContext);
+
+  if (!bridge) {
+    throw new Error('useBridge must be used within a BridgeProvider');
+  }
+
+  return bridge;
+}

package/src/shared/contexts/AudioContext.jsx

@@ -0,0 +1,37 @@
+/**
+ * AudioContext - Audio engine state management
+ *
+ * Manages audio engine instances (kaiPlayer, player controller)
+ */
+
+import { createContext, useContext, useState } from 'react';
+
+const AudioContext = createContext(null);
+
+export function AudioProvider({ children }) {
+  const [kaiPlayer, setKaiPlayer] = useState(null);
+  const [player, setPlayer] = useState(null);
+  const [devices, setDevices] = useState([]);
+
+  const value = {
+    // Audio engines
+    kaiPlayer,
+    player,
+    devices,
+
+    // Actions
+    setKaiPlayer,
+    setPlayer,
+    setDevices,
+  };
+
+  return <AudioContext.Provider value={value}>{children}</AudioContext.Provider>;
+}
+
+export function useAudio() {
+  const context = useContext(AudioContext);
+  if (!context) {
+    throw new Error('useAudio must be used within AudioProvider');
+  }
+  return context;
+}

package/src/shared/contexts/PlayerContext.jsx

@@ -0,0 +1,66 @@
+/**
+ * PlayerContext - Playback state management
+ *
+ * Manages current song, playback state, and position
+ * Syncs with main process via IPC events
+ */
+
+import { createContext, useContext, useState, useEffect } from 'react';
+
+const PlayerContext = createContext(null);
+
+export function PlayerProvider({ children }) {
+  const [currentSong, setCurrentSong] = useState(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentPosition, setCurrentPosition] = useState(0);
+  const [duration, setDuration] = useState(0);
+
+  // Sync state with IPC events from main process
+  useEffect(() => {
+    if (!window.kaiAPI?.player || !window.kaiAPI?.song) return;
+
+    const handlePlaybackState = (event, state) => {
+      setIsPlaying(state.isPlaying);
+      setCurrentPosition(state.position);
+      setDuration(state.duration);
+    };
+
+    const handleSongChanged = (event, song) => {
+      setCurrentSong(song);
+    };
+
+    // Subscribe to events
+    window.kaiAPI.player.onPlaybackState(handlePlaybackState);
+    window.kaiAPI.song.onChanged(handleSongChanged);
+
+    // Cleanup
+    return () => {
+      window.kaiAPI.player.removePlaybackListener(handlePlaybackState);
+      window.kaiAPI.song.removeChangedListener(handleSongChanged);
+    };
+  }, []);
+
+  const value = {
+    // State
+    currentSong,
+    isPlaying,
+    currentPosition,
+    duration,
+
+    // Actions
+    setCurrentSong,
+    setIsPlaying,
+    setCurrentPosition,
+    setDuration,
+  };
+
+  return <PlayerContext.Provider value={value}>{children}</PlayerContext.Provider>;
+}
+
+export function usePlayerState() {
+  const context = useContext(PlayerContext);
+  if (!context) {
+    throw new Error('usePlayerState must be used within PlayerProvider');
+  }
+  return context;
+}