Tier 2: drag feel, wheel overhaul, refs/meta/forms, Meter, gradients

- rotaryMode: 'absolute' | 'relative' (angle deltas, no grab jump) |
  'pickup' (MIDI-style: engages when the pointer sweeps past the value)
- dragAcceleration: velocity gain for relative drags (Shift bypasses);
  hideCursorOnDrag hides the cursor mid-gesture
- Wheel: trackpad delta accumulation (flicks can't rocket the value,
  one notch per wheel click), wheelStep override, wheelRequiresFocus
  opt-out of the hover scroll-trap
- onChange/onChangeStart/onChangeEnd now receive { source: 'drag' |
  'wheel' | 'keyboard' | 'reset' | 'api' }
- Every component forwards a ref to its root; name prop renders a
  hidden form input; SVG primitives carry data-part attributes
- Arc gradient: position-anchored color stops rendered as sliced arcs
  (mixColors/sampleGradient exported, unit-tested)
- New read-only Meter: LED level meter with peak hold, zones, readout
- Fader capColor/capLength for custom handle styling
- Docs: Meter/gradient/drag-feel gallery cards, white-cap fader demo,
  API rows, README

packages/dreamknob/src/skins/RubberKnob.tsx

@@ -17,7 +17,7 @@ export interface RubberKnobProps extends SkinProps {
 }
 
 /** Soft-touch rubber knob with a glowing halo — modern synth hardware. */
-export const RubberKnob: React.FC<RubberKnobProps> = ({
+export const RubberKnob = React.forwardRef<HTMLDivElement, RubberKnobProps>(function RubberKnob({
   size = 90,
   color: colorProp,
   trackColor,
@@ -32,7 +32,7 @@ export const RubberKnob: React.FC<RubberKnobProps> = ({
   className,
   style,
   ...core
-}) => {
+}, ref) {
   const theme = useKnobTheme();
   const color = colorProp ?? theme.accent ?? '#ff9640';
   const id = React.useId();
@@ -42,7 +42,7 @@ export const RubberKnob: React.FC<RubberKnobProps> = ({
   const bodyR = size / 2 - size * 0.17;
 
   return (
-    <Knob size={size} className={className} style={style} focusRing={focusRing} {...core}>
+    <Knob ref={ref} size={size} className={className} style={style} focusRing={focusRing} {...core}>
       <defs>
         <radialGradient id={bodyId} cx="0.38" cy="0.3" r="1">
           <stop offset="0" stopColor="#3a3b41" />
@@ -110,4 +110,4 @@ export const RubberKnob: React.FC<RubberKnobProps> = ({
       )}
     </Knob>
   );
-};
+});