From fcf004b834740379edffb6e3b0593c679ec8f6d6 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Tue, 4 Aug 2026 10:41:51 -0700
Subject: [PATCH] [eric] theme: the grain squiggle dial is gone from the pad,
 onboarding and settings both

---
 .../src/app/components/OnboardingV3/beats/BeatTheme.tsx  | 4 ++--
 frontend/src/app/components/theme/AccentColorPad.tsx     | 9 +++------
 .../pages/Settings/sections/general/GeneralInterface.tsx | 4 ++--
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
index 62ad72b0..3cf99eff 100644
--- a/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
+++ b/frontend/src/app/components/OnboardingV3/beats/BeatTheme.tsx
@@ -14,7 +14,7 @@ const BeatTheme: React.FC<{
 }> = ({ c, onNext, onBack }) => {
   const { accent, setAccent, gradient, setGradient } = useThemeAccent();
   const { mode, setMode } = useThemeMode();
-  const { washOpacity, grain, setWashOpacity, setGrain } = useThemeWash();
+  const { washOpacity, setWashOpacity } = useThemeWash();
   const stops = gradient ?? (accent ? [accent] : []);
   const onStops = (next: string[] | null) => {
     setAccent(next?.[0] ?? null);
@@ -87,7 +87,7 @@ const BeatTheme: React.FC<{
           stops={stops}
           onChange={onStops}
           height={210}
-          wash={{ opacity: washOpacity, grain, onOpacity: setWashOpacity, onGrain: setGrain }}
+          wash={{ opacity: washOpacity, onOpacity: setWashOpacity }}
         />
       </motion.div>
     </BeatShell>
diff --git a/frontend/src/app/components/theme/AccentColorPad.tsx b/frontend/src/app/components/theme/AccentColorPad.tsx
index 5fb36201..7ba4a24d 100644
--- a/frontend/src/app/components/theme/AccentColorPad.tsx
+++ b/frontend/src/app/components/theme/AccentColorPad.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import { ChevronLeft, ChevronRight, Minus, Plus } from 'lucide-react';
 import { hexToHsl, hslToHex } from '@/shared/styles/claudeTokens';
 import type { ClaudeTokens } from '@/shared/styles/claudeTokens';
-import { Knob, SquiggleSlider } from './WashDials';
+import { Knob } from './WashDials';
 
 export const ACCENT_PRESETS = [
   '#ae5630', '#b0453c', '#8e5cb8', '#3a6fc4', '#2e8f6f', '#b08b2e', '#c2588f', '#5c6470',
@@ -19,9 +19,7 @@ function stopToXY(hex: string): { x: number; y: number } | null {
 
 export interface WashControls {
   opacity: number;
-  grain: number;
   onOpacity: (v: number) => void;
-  onGrain: (v: number) => void;
 }
 
 // Arc/Zen gradient engine, one control with two homes: 1-3 draggable stops on a hue/lightness field, + adds a color-theory-harmonized stop (analogous, then triadic), - removes the newest. The first stop is the accent the tokens derive from; 2+ stops become the canvas gradient wash, whose intensity + grain the optional sliders tune. The pad reports stops and never knows who is listening.
@@ -201,10 +199,9 @@ const AccentColorPad: React.FC<{
           Reset
         </button>
       </div>
-      {/* Arc's dials row: wavy line = grain, round knob = intensity. */}
+      {/* Intensity knob only; the grain squiggle is gone on purpose (Eric's call, one dial fewer). */}
       {wash && (
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, color: c.text.tertiary }}>
-          <SquiggleSlider value={wash.grain} onChange={wash.onGrain} width={190} />
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 14, color: c.text.tertiary }}>
           <Knob value={wash.opacity} onChange={wash.onOpacity} />
         </div>
       )}
diff --git a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
index c2499975..547f021d 100644
--- a/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
+++ b/frontend/src/app/pages/Settings/sections/general/GeneralInterface.tsx
@@ -23,7 +23,7 @@ const GeneralInterface: React.FC<{
   styles: SettingsStyles;
 }> = ({ form, setForm, styles }) => {
   const c = useClaudeTokens();
-  const { washOpacity, grain, setWashOpacity, setGrain } = useThemeWash();
+  const { washOpacity, setWashOpacity } = useThemeWash();
   const { fieldSx, sectionSx, rowSx, rowLastSx, inlineRowSx, inlineRowLastSx, labelSx, descSx, toggleGroupSx, switchSx } = styles;
 
   return (
@@ -131,7 +131,7 @@ const GeneralInterface: React.FC<{
           stops={form.accent_gradient ?? (form.accent_color ? [form.accent_color] : [])}
           onChange={(next) => setForm({ ...form, accent_color: next?.[0] ?? null, accent_gradient: next && next.length > 1 ? next : null })}
           height={120}
-          wash={{ opacity: washOpacity, grain, onOpacity: setWashOpacity, onGrain: setGrain }}
+          wash={{ opacity: washOpacity, onOpacity: setWashOpacity }}
         />
       </Box>