add spectrum to graphic eq mode

src/components/SpectrumCurve.tsx

@@ -15,6 +15,8 @@ interface SpectrumCurveProps {
   source?: 'pre' | 'post';
   /** Number of log-frequency render points. */
   pointCount?: number;
+  /** Optional frequencies pinned to evenly spaced horizontal centers. */
+  frequencyAnchors?: number[];
   /** Active render cadence. 0 means display-sync; 32 keeps the mini-player battery-friendly. */
   frameMs?: number;
   /** Native analysis cadence. Defaults to frameMs. */
@@ -52,6 +54,7 @@ export function SpectrumCurve({
   active = false,
   source = 'pre',
   pointCount,
+  frequencyAnchors,
   frameMs = MINI_FRAME_MS,
   analysisFrameMs,
   smoothing = DEFAULT_SMOOTHING,
@@ -89,6 +92,7 @@ export function SpectrumCurve({
       analysisFrameMs={analysisFrameMs ?? frameMs}
       smoothing={smoothing}
       pointCount={resolvedPointCount}
+      frequencyAnchors={frequencyAnchors}
       dbMin={dbMin}
       dbMax={dbMax}
       tiltDbPerOctave={tiltDbPerOctave}

src/components/eq/GraphicEQPanel.tsx

@@ -15,6 +15,7 @@ import {
 interface GraphicEQPanelProps {
   gains: number[];
   enabled: boolean;
+  spectrumActive: boolean;
   onChangeGain: (index: number, gainDb: number) => void;
 }
 
@@ -25,7 +26,12 @@ interface GraphicEQPanelProps {
  * curve's scale. All cells are gap-less flex:1 so column centers match the
  * curve's evenly spaced band positions.
  */
-export function GraphicEQPanel({ gains, enabled, onChangeGain }: GraphicEQPanelProps) {
+export function GraphicEQPanel({
+  gains,
+  enabled,
+  spectrumActive,
+  onChangeGain,
+}: GraphicEQPanelProps) {
   const styles = useStyles();
   const colors = useColors();
   return (
@@ -44,7 +50,11 @@ export function GraphicEQPanel({ gains, enabled, onChangeGain }: GraphicEQPanelP
 
       <View style={styles.trackRow}>
         <View style={StyleSheet.absoluteFill}>
-          <GraphicResponseCurve gains={gains} enabled={enabled} />
+          <GraphicResponseCurve
+            gains={gains}
+            enabled={enabled}
+            spectrumActive={spectrumActive}
+          />
         </View>
         {GRAPHIC_BANDS.map((def, i) => (
           <VerticalEQSlider

src/components/eq/GraphicResponseCurve.tsx

@@ -12,6 +12,7 @@ import {
   Skia,
   type SkPath
 } from '@shopify/react-native-skia';
+import { SpectrumCurve } from '@/components/SpectrumCurve';
 import { useColors } from '@/theme/themed';
 import type { EQBand } from '@/types/audio';
 import {
@@ -24,10 +25,12 @@ import { GRAPHIC_BANDS, buildGraphicBands } from '@/audio/graphicEq';
 import { GRAPH_SAMPLE_RATE, buildResponseFill } from './eqGraphMath';
 
 const SAMPLES = 96;
+const GRAPHIC_SPECTRUM_ANCHORS = GRAPHIC_BANDS.map((band) => band.frequency);
 
 interface GraphicResponseCurveProps {
   gains: number[];
   enabled: boolean;
+  spectrumActive: boolean;
 }
 
 /**
@@ -38,7 +41,11 @@ interface GraphicResponseCurveProps {
  * Rendered behind the sliders; transparent background (the editor card owns
  * the chrome).
  */
-export function GraphicResponseCurve({ gains, enabled }: GraphicResponseCurveProps) {
+export function GraphicResponseCurve({
+  gains,
+  enabled,
+  spectrumActive,
+}: GraphicResponseCurveProps) {
   const colors = useColors();
   const [size, setSize] = useState({ width: 0, height: 0 });
   const width = size.width;
@@ -61,36 +68,53 @@ export function GraphicResponseCurve({ gains, enabled }: GraphicResponseCurvePro
   return (
     <View style={styles.container} onLayout={onLayout} pointerEvents="none">
       {width > 0 && height > 0 ? (
-        <Canvas style={StyleSheet.absoluteFill}>
-          {/* Grid: ±6 dB lines + dashed 0 dB midline (track coordinates). */}
-          <Group>
-            <Path
-              path={hLine(gainToTrackY(6, height), width)}
-              color={colors.glassBorder}
-              style="stroke"
-              strokeWidth={1}
+        <>
+          <View style={StyleSheet.absoluteFill}>
+            <SpectrumCurve
+              source="post"
+              active={spectrumActive}
+              width={width}
+              height={height}
+              frameMs={16}
+              frequencyAnchors={GRAPHIC_SPECTRUM_ANCHORS}
+              color={colors.accent}
+              lineOpacity={0.22}
+              fillOpacity={0.5}
+              glow={false}
             />
-            <Path
-              path={hLine(gainToTrackY(-6, height), width)}
-              color={colors.glassBorder}
-              style="stroke"
-              strokeWidth={1}
-            />
-            <Path path={hLine(height / 2, width)} color={colors.glassBorder} style="stroke" strokeWidth={1}>
-              <DashPathEffect intervals={[3, 5]} />
-            </Path>
-          </Group>
+          </View>
 
-          <Path path={fillPath} color={withAlpha(curveColor, 0.1)} style="fill" />
-          <Path
-            path={linePath}
-            color={curveColor}
-            style="stroke"
-            strokeWidth={2}
-            strokeJoin="round"
-            strokeCap="round"
-          />
-        </Canvas>
+          <Canvas style={StyleSheet.absoluteFill}>
+            {/* Grid: ±6 dB lines + dashed 0 dB midline (track coordinates). */}
+            <Group>
+              <Path
+                path={hLine(gainToTrackY(6, height), width)}
+                color={colors.glassBorder}
+                style="stroke"
+                strokeWidth={1}
+              />
+              <Path
+                path={hLine(gainToTrackY(-6, height), width)}
+                color={colors.glassBorder}
+                style="stroke"
+                strokeWidth={1}
+              />
+              <Path path={hLine(height / 2, width)} color={colors.glassBorder} style="stroke" strokeWidth={1}>
+                <DashPathEffect intervals={[3, 5]} />
+              </Path>
+            </Group>
+
+            <Path path={fillPath} color={withAlpha(curveColor, 0.1)} style="fill" />
+            <Path
+              path={linePath}
+              color={curveColor}
+              style="stroke"
+              strokeWidth={2}
+              strokeJoin="round"
+              strokeCap="round"
+            />
+          </Canvas>
+        </>
       ) : null}
     </View>
   );