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/FlatKnob.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Knob } from '../components/Knob';
+import { Arc } from '../primitives/Arc';
+import { Face } from '../primitives/Face';
+import { Pointer } from '../primitives/Pointer';
+import { KnobLabel, KnobValue } from '../primitives/Text';
+import { MONO_FONT, UI_FONT, type SkinProps } from './shared';
+
+export interface FlatKnobProps extends SkinProps {
+  /** Accent color for the value arc and pointer. */
+  color?: string;
+  trackColor?: string;
+  faceColor?: string;
+  pointerColor?: string;
+  textColor?: string;
+  labelColor?: string;
+  /** Draw the value arc from 'min' or from 'center' (pan-style). */
+  arcFrom?: 'min' | 'center';
+  arcThickness?: number;
+}
+
+/** Clean 2D knob — the modern DAW/plugin look. */
+export const FlatKnob: React.FC<FlatKnobProps> = ({
+  size = 80,
+  color = '#4cc2ff',
+  trackColor = 'rgba(255,255,255,0.12)',
+  faceColor = 'rgba(255,255,255,0.05)',
+  pointerColor,
+  textColor = 'rgba(255,255,255,0.92)',
+  labelColor = 'rgba(255,255,255,0.45)',
+  arcFrom = 'min',
+  arcThickness,
+  label,
+  showValue = true,
+  unit,
+  format,
+  className,
+  style,
+  ...core
+}) => {
+  const t = arcThickness ?? Math.max(3, size * 0.055);
+  return (
+    <Knob size={size} className={className} style={style} {...core}>
+      <Arc thickness={t} color={color} trackColor={trackColor} from={arcFrom} />
+      <Face radius={size / 2 - t - 5} fill={faceColor} />
+      <Pointer
+        type="line"
+        radius={size / 2 - t - 7}
+        length={size * 0.16}
+        width={Math.max(2.5, size * 0.04)}
+        color={pointerColor ?? color}
+      />
+      {showValue && (
+        <KnobValue
+          color={textColor}
+          unit={unit}
+          format={format}
+          fontSize={size * 0.17}
+          fontFamily={MONO_FONT}
+        />
+      )}
+      {label && (
+        <KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.42} fontSize={size * 0.1}>
+          {label}
+        </KnobLabel>
+      )}
+    </Knob>
+  );
+};