refactor help (more)

src/components/HelpPopup.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useStore } from '@nanostores/react';
 import { uiState, hideHelp } from '../stores/ui';
 
 export function HelpPopup() {
   const ui = useStore(uiState);
+  const [valueModeExpanded, setValueModeExpanded] = useState(false);
 
   const handleBackdropClick = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget) {
@@ -303,6 +304,104 @@ export function HelpPopup() {
 
       </div>
 
+      <div
+        className="help-section"
+        style={{
+          gridColumn: '1 / -1',
+          marginTop: '10px',
+        }}
+      >
+        <h4
+          style={{
+            cursor: 'pointer',
+            userSelect: 'none',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+          }}
+          onClick={() => setValueModeExpanded(!valueModeExpanded)}
+        >
+          Value Modes
+          <span style={{ fontSize: '0.8em' }}>
+            {valueModeExpanded ? '▼' : '▶'}
+          </span>
+        </h4>
+        {valueModeExpanded && (
+          <div
+            style={{
+              backgroundColor: '#000000',
+              padding: '15px',
+              marginTop: '10px',
+              borderRadius: '0',
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr',
+              gap: '10px',
+            }}
+          >
+            <p>
+              <strong>Integer:</strong> Traditional 0-255 mode with modulo wrapping
+            </p>
+            <p>
+              <strong>Spiral:</strong> Logarithmic spirals with value-controlled tightness
+            </p>
+            <p>
+              <strong>Float:</strong> Bitfield shader mode, clamps to 0-1, inverts, scales to 0-255
+            </p>
+            <p>
+              <strong>Turbulence:</strong> Multi-octave turbulence with chaos control
+            </p>
+            <p>
+              <strong>Polar:</strong> Spiral patterns combining angle and radius rotation
+            </p>
+            <p>
+              <strong>Crystal:</strong> Crystalline lattice patterns on grid structure
+            </p>
+            <p>
+              <strong>Distance:</strong> Concentric wave rings with variable frequency
+            </p>
+            <p>
+              <strong>Marble:</strong> Marble-like veining with turbulent noise
+            </p>
+            <p>
+              <strong>Wave:</strong> Multi-source interference with amplitude falloff
+            </p>
+            <p>
+              <strong>Quantum:</strong> Quantum uncertainty probability distributions
+            </p>
+            <p>
+              <strong>Fractal:</strong> Recursive patterns using multiple octaves of noise
+            </p>
+            <p>
+              <strong>Logarithmic:</strong> Simple logarithmic scaling transformation
+            </p>
+            <p>
+              <strong>Cellular:</strong> Cellular automata-inspired neighbor calculations
+            </p>
+            <p>
+              <strong>Mirror:</strong> Kaleidoscope effects with symmetrical patterns
+            </p>
+            <p>
+              <strong>Noise:</strong> Perlin-like noise using layered sine waves
+            </p>
+            <p>
+              <strong>Rings:</strong> Concentric rings with controlled spacing
+            </p>
+            <p>
+              <strong>Warp:</strong> Space deformation with barrel/lens distortion
+            </p>
+            <p>
+              <strong>Mesh:</strong> Grid patterns with density and rotation control
+            </p>
+            <p>
+              <strong>Flow:</strong> Fluid dynamics with flow sources and vortices
+            </p>
+            <p>
+              <strong>Glitch:</strong> Digital corruption effects with bit manipulation
+            </p>
+          </div>
+        )}
+      </div>
+
       <div
         className="help-section"
         style={{