Initial release: dreamknob library + showcase

React + TypeScript knob/fader library with a headless interaction core
(rotary, relative-drag and track modes, wheel, keyboard, a11y), SVG
primitives, nine prebuilt skins, seven-segment display engine, and a
Vite showcase with gallery, live playground and API docs.

packages/dreamknob/src/skins/RubberKnob.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { Knob } from '../components/Knob';
+import { Arc } from '../primitives/Arc';
+import { GlowFilter } from '../primitives/GlowFilter';
+import { Pointer } from '../primitives/Pointer';
+import { KnobLabel, KnobValue } from '../primitives/Text';
+import { MONO_FONT, UI_FONT, type SkinProps } from './shared';
+
+export interface RubberKnobProps extends SkinProps {
+  /** Glow/accent color. */
+  color?: string;
+  trackColor?: string;
+  textColor?: string;
+  labelColor?: string;
+  arcFrom?: 'min' | 'center';
+}
+
+/** Soft-touch rubber knob with a glowing halo — modern synth hardware. */
+export const RubberKnob: React.FC<RubberKnobProps> = ({
+  size = 90,
+  color = '#ff9640',
+  trackColor = 'rgba(255,255,255,0.08)',
+  textColor = 'rgba(255,255,255,0.92)',
+  labelColor = 'rgba(255,255,255,0.45)',
+  arcFrom = 'min',
+  label,
+  showValue = false,
+  unit,
+  format,
+  className,
+  style,
+  ...core
+}) => {
+  const id = React.useId();
+  const bodyId = `${id}-body`;
+  const glowId = `${id}-glow`;
+  const c = size / 2;
+  const bodyR = size / 2 - size * 0.17;
+
+  return (
+    <Knob size={size} className={className} style={style} {...core}>
+      <defs>
+        <radialGradient id={bodyId} cx="0.38" cy="0.3" r="1">
+          <stop offset="0" stopColor="#3a3b41" />
+          <stop offset="0.55" stopColor="#232428" />
+          <stop offset="1" stopColor="#0e0f12" />
+        </radialGradient>
+        <GlowFilter id={glowId} blur={size * 0.02} />
+      </defs>
+
+      <Arc
+        radius={size / 2 - size * 0.05}
+        thickness={Math.max(3, size * 0.045)}
+        color={color}
+        trackColor={trackColor}
+        from={arcFrom}
+        arcProps={{ filter: `url(#${glowId})` }}
+      />
+
+      <circle cx={c} cy={c} r={bodyR} fill={`url(#${bodyId})`} stroke="#000" strokeWidth="1" />
+      {/* rubber grip */}
+      <circle
+        cx={c}
+        cy={c}
+        r={bodyR - size * 0.03}
+        fill="none"
+        stroke="rgba(0,0,0,0.5)"
+        strokeWidth={size * 0.035}
+        strokeDasharray={`${size * 0.02} ${size * 0.03}`}
+      />
+      {/* top sheen */}
+      <ellipse
+        cx={c}
+        cy={c - bodyR * 0.45}
+        rx={bodyR * 0.6}
+        ry={bodyR * 0.28}
+        fill="rgba(255,255,255,0.07)"
+      />
+
+      <Pointer
+        radius={bodyR - size * 0.045}
+        length={bodyR * 0.5}
+        width={Math.max(2.5, size * 0.04)}
+        color={color}
+        shapeProps={{ filter: `url(#${glowId})` }}
+      />
+      {showValue && (
+        <KnobValue
+          color={textColor}
+          unit={unit}
+          format={format}
+          fontSize={size * 0.15}
+          fontFamily={MONO_FONT}
+          dy={size * 0.02}
+        />
+      )}
+      {label && (
+        <KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.44} fontSize={size * 0.1}>
+          {label}
+        </KnobLabel>
+      )}
+    </Knob>
+  );
+};