Begin mapper registry

app/src/components/analyzers/fftAnalyzerControls.tsx

@@ -1,16 +1,18 @@
 import { useCallback, useEffect, useRef } from "react";
 import type FFTAnalyzer from "@/lib/analyzers/fft";
-import { useAnalyzerFFT, useAppStateActions, useMappers } from "@/lib/appState";
-import { CoordinateMapper_Data } from "@/lib/mappers/coordinateMappers/data";
+import { useAnalyzerFFT, useMappers } from "@/lib/appState";
+import { COORDINATE_MAPPER_REGISTRY } from "@/lib/mappers/coordinateMappers/registry";
 
 export const FFTAnalyzerControls = ({
   analyzer,
 }: {
   analyzer: FFTAnalyzer;
 }) => {
   const { octaveBandMode, energyMeasure } = useAnalyzerFFT();
-  const { coordinateMapperData, energyTracker } = useMappers();
-  const { setMappers } = useAppStateActions();
+  const { energyTracker } = useMappers();
+  const coordinateMapperData =
+    COORDINATE_MAPPER_REGISTRY.data.hooks.useInstance();
+  const { setParams } = COORDINATE_MAPPER_REGISTRY.data.hooks.useActions();
   const animationRequestRef = useRef<number>(null!);
 
   /**
@@ -21,12 +23,7 @@ export const FFTAnalyzerControls = ({
 
     if (coordinateMapperData.data.length != bars.length) {
       console.log(`Resizing ${bars.length}`);
-      setMappers({
-        coordinateMapperData: new CoordinateMapper_Data({
-          ...coordinateMapperData.params,
-          size: bars.length,
-        }),
-      });
+      setParams({ size: bars.length });
       return;
     }
 
@@ -35,13 +32,7 @@ export const FFTAnalyzerControls = ({
     bars.forEach(({ value }, index) => {
       coordinateMapperData.data[index] = value;
     });
-  }, [
-    coordinateMapperData,
-    analyzer,
-    energyTracker,
-    energyMeasure,
-    setMappers,
-  ]);
+  }, [coordinateMapperData, analyzer, energyTracker, energyMeasure, setParams]);
 
   /**
    * Re-Synchronize the animation loop if the target data destination changes.

app/src/components/controls/dock.tsx

@@ -24,7 +24,7 @@ export const SettingsDockCard = () => {
         <SheetContent
           insertHidden={true}
           side="right"
-          className="no-scrollbar w-full max-w-full space-y-4 overflow-scroll bg-background/70 p-4 pt-16 sm:w-[540px] sm:max-w-[540px]"
+          className="no-scrollbar w-full max-w-full space-y-4 overflow-scroll bg-background/70 p-4 pt-16 sm:w-[430px] sm:max-w-[430px]"
         >
           <ModeSheetContent />
           <VisualSettingsSheetContent />

app/src/components/controls/mode/audio.tsx

@@ -13,16 +13,17 @@ import {
   type EnergyMeasure,
   type OctaveBandMode,
 } from "@/lib/analyzers/fft";
-import { useAnalyzerFFT, useAppStateActions, useMappers } from "@/lib/appState";
+import { useAnalyzerFFT, useAppStateActions } from "@/lib/appState";
+import { COORDINATE_MAPPER_REGISTRY } from "@/lib/mappers/coordinateMappers/registry";
 
 import { ValueLabel } from "../common";
 import { AudioSourceControls, AudioSourceSelect } from "./common";
 
 const FFTAnalyzerControls = () => {
   const { octaveBandMode, energyMeasure } = useAnalyzerFFT();
   const { setAnalyzerFFT } = useAppStateActions();
-  const { coordinateMapperData: mapper } = useMappers();
-  const { setMappers } = useAppStateActions();
+  const mapper = COORDINATE_MAPPER_REGISTRY.data.hooks.useInstance();
+  const { setParams } = COORDINATE_MAPPER_REGISTRY.data.hooks.useActions();
   return (
     <div className="w-full space-y-4">
       <ValueLabel
@@ -35,13 +36,7 @@ const FFTAnalyzerControls = () => {
         min={0.0}
         max={5.0}
         step={0.01}
-        onValueChange={(e) =>
-          setMappers({
-            coordinateMapperData: mapper.clone({
-              amplitude: e[0],
-            }),
-          })
-        }
+        onValueChange={(e) => setParams({ amplitude: e[0] })}
       />
       <div className="flex w-full items-center justify-between">
         <span>Octave Band Mode</span>

app/src/components/controls/modeSheet.tsx

@@ -14,13 +14,11 @@ import {
   type TApplicationMode,
 } from "@/lib/applicationModes";
 import { useAppStateActions, useMode } from "@/lib/appState";
-import { AudioWaveform, Drum, Music, Shell, Waves } from "lucide-react";
+import { COORDINATE_MAPPER_REGISTRY } from "@/lib/mappers/coordinateMappers/registry";
+import { AudioWaveform, Music, Shell, Waves, Wind } from "lucide-react";
 
 import { AudioModeControls } from "./mode/audio";
 import { AudioScopeModeControls } from "./mode/audioScope";
-// import { AudioScopeModeControls } from "./mode/audioScope";
-import { NoiseGeneratorModeControls } from "./mode/noise";
-import { WaveformModeControls } from "./mode/waveform";
 
 const ModeIcon = ({ mode }: { mode: TApplicationMode }) => {
   switch (mode) {
@@ -33,7 +31,7 @@ const ModeIcon = ({ mode }: { mode: TApplicationMode }) => {
     case APPLICATION_MODE.AUDIO_SCOPE:
       return <Shell />;
     case APPLICATION_MODE.PARTICLE_NOISE:
-      return <Drum />;
+      return <Wind />;
     default:
       return mode satisfies never;
   }
@@ -93,8 +91,12 @@ export const ModeSheetContent = () => {
         <ModeSelector />
       </div>
       <Separator />
-      {mode === APPLICATION_MODE.WAVE_FORM && <WaveformModeControls />}
-      {mode === APPLICATION_MODE.NOISE && <NoiseGeneratorModeControls />}
+      {mode === APPLICATION_MODE.WAVE_FORM && (
+        <COORDINATE_MAPPER_REGISTRY.waveform.ControlsComponent />
+      )}
+      {mode === APPLICATION_MODE.NOISE && (
+        <COORDINATE_MAPPER_REGISTRY.noise.ControlsComponent />
+      )}
       {mode === APPLICATION_MODE.AUDIO && <AudioModeControls />}
       {mode === APPLICATION_MODE.AUDIO_SCOPE && <AudioScopeModeControls />}
     </>

app/src/components/controls/visualSettingsSheet.tsx

@@ -26,7 +26,7 @@ const PaletteBand = ({
   const cp = ColorPalette.getPalette(palette);
   return (
     <div
-      className={cn("h-8 w-full rounded-sm", className)}
+      className={cn("h-4 w-full rounded-sm", className)}
       style={{
         background: `linear-gradient(0.25turn, ${cp.colors.join(",")})`,
       }}
@@ -63,7 +63,6 @@ const VisualControlsComponent = () => {
 export const VisualSettingsSheetContent = () => {
   const mode = useMode();
   const { colorBackground, paletteTrackEnergy } = useAppearance();
-  console.log(colorBackground, paletteTrackEnergy);
   const palette = usePalette();
   const { setAppearance } = useAppStateActions();
   const { autoOrbitAfterSleepMs } = useCameraState();
@@ -75,7 +74,7 @@ export const VisualSettingsSheetContent = () => {
         <div className="space-y-2">
           <div className="">Palette</div>
           <PaletteBand palette={palette} />
-          <div className="grid w-full grid-cols-4 justify-items-stretch gap-2 sm:grid-cols-6">
+          <div className="grid w-full grid-cols-6 justify-items-stretch gap-2 sm:grid-cols-8">
             {AVAILABLE_COLOR_PALETTES.map((p) => (
               <PaletteIcon
                 key={p}

app/src/components/visualizers/cube/controls.tsx

@@ -4,12 +4,12 @@ import { Label } from "@/components/ui/label";
 import { Slider } from "@/components/ui/slider";
 import { Switch } from "@/components/ui/switch";
 
-import { useActions, usePresets, useVisualParams } from "./reactive";
+import { useActions, useParams, usePresets } from "./reactive";
 
 export default () => {
-  const { nPerSide, cubeSpacingScalar, volume } = useVisualParams();
+  const { nPerSide, cubeSpacingScalar, volume } = useParams();
   const { active: activePreset, options: presetOptions } = usePresets();
-  const { setVisualParams, setPreset } = useActions();
+  const { setParams, setPreset } = useActions();
 
   return (
     <div className="flex w-full flex-col items-start justify-start gap-4">
@@ -36,7 +36,7 @@ export default () => {
             min={3}
             max={20}
             step={1}
-            onValueChange={(e) => setVisualParams({ nPerSide: e[0] })}
+            onValueChange={(e) => setParams({ nPerSide: e[0] })}
           />
           <ValueLabel
             label="Cube Spacing"
@@ -48,14 +48,14 @@ export default () => {
             min={0}
             max={0.5}
             step={0.1}
-            onValueChange={(e) => setVisualParams({ cubeSpacingScalar: e[0] })}
+            onValueChange={(e) => setParams({ cubeSpacingScalar: e[0] })}
           />
           <div className="flex w-full items-center justify-between">
             <Label>Volume</Label>
             <Switch
               defaultChecked={volume}
               onCheckedChange={(e) => {
-                setVisualParams({ volume: e });
+                setParams({ volume: e });
               }}
             />
           </div>