Refactor Vite configuration for improved chunking strategy and caching. Enhance DeviceContext with new upgradePeqChange method for PEQ updates. Update audio page to support localized labels and dynamic volume control. Introduce new filter types and improve EQPage functionality with enhanced frequency response visualization.

client/src/contexts/DeviceContext.tsx

@@ -4,6 +4,7 @@ import {
   LuxsinAPI,
   MOCK_DEVICE_STATE,
   MOCK_PEQ_STATE,
+  PeqChangePayload,
   PeqFilter,
   PeqState,
 } from "@/lib/luxsinApi";
@@ -25,6 +26,7 @@ interface DeviceContextType {
   api: LuxsinAPI | null;
   updateSetting: (params: Record<string, string | number>) => Promise<void>;
   updatePeq: (filters: PeqFilter[]) => Promise<void>;
+  upgradePeqChange: (payload: PeqChangePayload) => Promise<void>;
   // Optimistic state updaters
   setVolume: (v: number) => void;
   setInput: (v: number) => void;
@@ -149,6 +151,16 @@ export function DeviceProvider({ children }: { children: React.ReactNode }) {
     setPeqState({ filters });
   }, [api, isDemoMode]);
 
+  const upgradePeqChange = useCallback(async (payload: PeqChangePayload) => {
+    if (isDemoMode) {
+      setPeqState((prev) => (prev ? { ...prev, filters: payload.peqChange.filters } : prev));
+      return;
+    }
+    if (!api) return;
+    await api.upgradePeqChange(payload);
+    setPeqState((prev) => (prev ? { ...prev, filters: payload.peqChange.filters } : prev));
+  }, [api, isDemoMode]);
+
   // Optimistic setters
   const setVolume = useCallback((v: number) => {
     setDeviceState(prev => prev ? { ...prev, volume: v } : prev);
@@ -199,7 +211,7 @@ export function DeviceProvider({ children }: { children: React.ReactNode }) {
       isConnected, isConnecting, isDemoMode, setDemoMode,
       deviceState, peqState, lastUpdated, error,
       connect, disconnect, refresh, api,
-      updateSetting, updatePeq,
+      updateSetting, updatePeq, upgradePeqChange,
       setVolume, setInput, setOutput, setBalance,
     }}>
       {children}