Tier 1: origin anchor, detents, theming, type-in editing, ImageKnob

- origin: bipolar anchor value — Arc from=center, Fader fill and
  LEDFader segments draw from origin instead of min/mid-travel
- detents + detentSize: magnetic snap while dragging (normalized
  space, wheel/keyboard unaffected); applyDetents exported
- DreamknobProvider + KnobTheme: accent/track/face/text/label/ticks/
  focusRing/fonts tokens with dark and light bases; every skin
  resolves defaults from the theme, instance props win
- editable + parseValue: double-click knobs (or click fader readouts)
  to type exact values; Enter/blur commits, Esc cancels, 1.2k parses;
  ValueInput + defaultParseValue exported; setValue added to context
- ImageKnob: film-strip sprite knob (KnobMan-style strips), vertical
  or horizontal, with focus ring, editing, value/label
- Docs: LED gallery cards for film-strip/bipolar/editing/theming,
  playground editable toggle, theming API section, README updates

apps/docs/src/sections/ApiDocs.tsx

@@ -50,6 +50,8 @@ export const ApiDocs: React.FC = () => (
         <Row name="values" type="number[]" desc="Restrict to a discrete list, e.g. [0.25, 0.5, 1, 2, 4]. Overrides step." />
         <Row name="steps" type="number" desc="Number of evenly spaced detents across the travel (selector knobs)." />
         <Row name="taper" type="Taper" def="linearTaper" desc="Travel curve: linearTaper, logTaper (frequencies), powTaper(n) (gain), or your own." />
+        <Row name="origin" type="number" desc="Bipolar anchor: arcs and fader fills draw from this value instead of the minimum (origin={0} for pan/gain)." />
+        <Row name="detents / detentSize" type="number[] / number" def="— / 0.025" desc="Magnetic snap points: drags stick to these values within the capture radius. Wheel/keyboard unaffected." />
         <Row name="interaction" type="InteractionMode" def="'rotary'" desc="'rotary' (grab & turn), 'vertical', 'horizontal', 'both', or absolute 'track-*' modes used by faders." />
         <Row name="dragSensitivity" type="number" def="200" desc="Pixels of relative drag for full travel (vertical/horizontal modes)." />
         <Row name="fineMultiplier" type="number" def="0.1" desc="Speed multiplier while Shift is held during drags and wheel." />
@@ -59,6 +61,8 @@ export const ApiDocs: React.FC = () => (
         <Row name="onChange" type="(v: number) => void" desc="Fires for every distinct snapped value." />
         <Row name="onChangeStart / onChangeEnd" type="(v: number) => void" desc="Gesture boundaries — ideal for undo history or parameter automation." />
         <Row name="disabled / readOnly" type="boolean" def="false" desc="Disable interaction (readOnly stays focusable)." />
+        <Row name="editable / parseValue" type="boolean / fn" def="false" desc="Type-in editing: double-click a knob (or click a fader readout), type a value, Enter commits, Esc cancels. '1.2k' → 1200." />
+        <Row name="focusRing" type="string | false" def="theme" desc="Keyboard focus ring color. Pointer grabs never show it." />
         <Row name="aria-label / getAriaValueText" type="string / fn" desc="Accessibility. Every knob is a proper role='slider' with full keyboard support." />
       </Table>
 
@@ -66,8 +70,10 @@ export const ApiDocs: React.FC = () => (
       <p className="api-note">
         <code>↑/→</code> and <code>↓/←</code> step · <code>Shift</code>+arrows jump 10×
         · <code>PageUp/PageDown</code> move 10% · <code>Home/End</code> jump to min/max ·
-        scroll wheel nudges (Shift = fine) · double-click resets · touch works via pointer
+        <code>Esc</code> cancels a drag and restores the start value · scroll wheel nudges
-        capture.
+        (Shift = fine) · double-click resets (or opens the editor when{' '}
+        <code>editable</code>) · touch works via pointer capture · every control shows a
+        keyboard-only focus ring.
       </p>
 
       <h3 className="api-h">Prebuilt skins</h3>
@@ -81,6 +87,7 @@ export const ApiDocs: React.FC = () => (
         <Row name="<SteppedKnob />" type="selector" desc="Detented switch. positions (named) or steps (numeric), color, faceColor." />
         <Row name="<Fader />" type="linear" desc="Channel fader. orientation, length, breadth, color, tickCount, showFill, unit, format." />
         <Row name="<LEDFader />" type="linear · digital" desc="Segmented LED meter-fader. orientation, length, segments, color or zones ([{upTo, color}]), glow, digits." />
+        <Row name="<ImageKnob />" type="sprite" desc="Film-strip knob (KnobMan-style PNG strips): src, frames, stripOrientation. Photoreal skins with zero drawing code." />
         <Row name="<SegmentDisplay />" type="digital" desc="Standalone seven-segment display. digits, decimals, color, glow, skew, ghostOpacity." />
       </Table>
       <p className="api-note">
@@ -89,6 +96,28 @@ export const ApiDocs: React.FC = () => (
         above.
       </p>
 
+      <h3 className="api-h">Theming</h3>
+      <p className="api-note">
+        Every skin resolves its color and font defaults from the active theme; per-instance
+        props always win. Use <code>base="light"</code> for light backgrounds.
+      </p>
+      <CodeBlock
+        code={`import { DreamknobProvider } from 'dreamknob'
+
+<DreamknobProvider
+  base="dark"                       // or "light"
+  theme={{
+    accent: '#ff4d6b',              // one accent for the whole console
+    track: 'rgba(255,255,255,0.1)',
+    text: '#fff',
+    label: 'rgba(255,255,255,0.5)',
+    fontMono: '"IBM Plex Mono", monospace',
+  }}
+>
+  <FlatKnob ... /> <Fader ... /> <LEDKnob ... />
+</DreamknobProvider>`}
+      />
+
       <h3 className="api-h">Compose your own knob</h3>
       <p className="api-note">
         <code>&lt;Knob&gt;</code> wires up the interaction and provides a render context;

apps/docs/src/sections/Gallery.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import {
   Arc,
+  DreamknobProvider,
   Fader,
   FlatKnob,
+  ImageKnob,
   Knob,
   KnobValue,
   LEDFader,
@@ -18,6 +20,60 @@ import {
   logTaper,
 } from 'dreamknob';
 
+/** Draw a film-strip of a simple hardware knob at runtime (stand-in for a KnobMan PNG). */
+const useGeneratedStrip = (frames = 31, fs = 120): string | null => {
+  const [src, setSrc] = React.useState<string | null>(null);
+  React.useEffect(() => {
+    const canvas = document.createElement('canvas');
+    canvas.width = fs;
+    canvas.height = fs * frames;
+    const g = canvas.getContext('2d');
+    if (!g) return;
+    for (let i = 0; i < frames; i++) {
+      const cx = fs / 2;
+      const cy = i * fs + fs / 2;
+      const angle = ((225 + (i / (frames - 1)) * 270) * Math.PI) / 180;
+      const grad = g.createRadialGradient(cx - fs * 0.15, cy - fs * 0.18, fs * 0.05, cx, cy, fs * 0.45);
+      grad.addColorStop(0, '#5c5f69');
+      grad.addColorStop(0.65, '#26282e');
+      grad.addColorStop(1, '#0e0f12');
+      g.fillStyle = grad;
+      g.beginPath();
+      g.arc(cx, cy, fs * 0.4, 0, Math.PI * 2);
+      g.fill();
+      g.strokeStyle = 'rgba(0,0,0,0.65)';
+      g.lineWidth = fs * 0.025;
+      g.stroke();
+      g.strokeStyle = '#ffd23e';
+      g.lineWidth = fs * 0.05;
+      g.lineCap = 'round';
+      g.beginPath();
+      g.moveTo(cx + Math.sin(angle) * fs * 0.16, cy - Math.cos(angle) * fs * 0.16);
+      g.lineTo(cx + Math.sin(angle) * fs * 0.33, cy - Math.cos(angle) * fs * 0.33);
+      g.stroke();
+    }
+    setSrc(canvas.toDataURL('image/png'));
+  }, [frames, fs]);
+  return src;
+};
+
+const ImageKnobDemo: React.FC = () => {
+  const src = useGeneratedStrip();
+  if (!src) return null;
+  return (
+    <ImageKnob
+      src={src}
+      frames={31}
+      size={92}
+      defaultValue={40}
+      step={1}
+      showValue
+      label="Sprite"
+      aria-label="Film-strip demo"
+    />
+  );
+};
+
 const Card: React.FC<{
   title: string;
   desc: string;
@@ -131,6 +187,88 @@ export const Gallery: React.FC = () => (
           />
         </Card>
 
+        <Card title="Film-strip" desc="Photoreal sprite knobs — any KnobMan-style PNG strip works. This one is drawn at runtime." tag="<ImageKnob />">
+          <ImageKnobDemo />
+        </Card>
+
+        <Card title="Bipolar origin + detent" desc="Fill anchors at value 0 (not mid-travel) and the drag snaps magnetically at 0." tag="origin={0} detents={[0]}">
+          <FlatKnob
+            size={92}
+            min={-60}
+            max={12}
+            step={0.5}
+            defaultValue={0}
+            origin={0}
+            detents={[0]}
+            arcFrom="center"
+            color="#3df2ad"
+            format={v => `${v > 0 ? '+' : ''}${v.toFixed(1)}`}
+            label="Gain"
+            aria-label="Bipolar gain demo"
+          />
+          <Fader
+            length={130}
+            min={-60}
+            max={12}
+            step={0.5}
+            defaultValue={0}
+            origin={0}
+            detents={[0]}
+            color="#3df2ad"
+            format={v => `${v > 0 ? '+' : ''}${v.toFixed(1)} dB`}
+            label="Trim"
+            aria-label="Bipolar fader demo"
+          />
+        </Card>
+
+        <Card title="Type-in editing" desc="Double-click the knob (or click a fader readout) and type the exact value — '1.2k' works too." tag="editable">
+          <FlatKnob
+            size={92}
+            min={20}
+            max={20000}
+            taper={logTaper}
+            decimals={0}
+            defaultValue={440}
+            editable
+            color="#4cc2ff"
+            format={v => (v >= 1000 ? `${(v / 1000).toFixed(1)}k` : `${Math.round(v)}`)}
+            label="Freq"
+            aria-label="Editable demo"
+          />
+          <Fader
+            length={130}
+            min={-60}
+            max={12}
+            step={0.5}
+            defaultValue={-6}
+            editable
+            unit=" dB"
+            label="Out"
+            aria-label="Editable fader demo"
+          />
+        </Card>
+
+        <Card title="Theming" desc="One provider restyles every control — accent, tracks, text, fonts. Light backgrounds too." tag="<DreamknobProvider />">
+          <DreamknobProvider theme={{ accent: '#ff4d6b' }}>
+            <FlatKnob size={70} defaultValue={62} label="A" aria-label="Themed A" />
+            <RubberKnob size={70} defaultValue={35} label="B" aria-label="Themed B" />
+          </DreamknobProvider>
+          <div
+            style={{
+              background: '#eceef2',
+              borderRadius: 10,
+              padding: '12px 16px',
+              display: 'flex',
+              gap: 14,
+              alignItems: 'center',
+            }}
+          >
+            <DreamknobProvider base="light" theme={{ accent: '#0868c8' }}>
+              <FlatKnob size={70} defaultValue={62} label="Light" aria-label="Light themed" />
+            </DreamknobProvider>
+          </div>
+        </Card>
+
         <Card title="Compose your own" desc="Primitives + headless core = any design you want." tag="<Knob> + primitives">
           <Knob size={96} defaultValue={42} aria-label="Composed demo">
             <Ticks count={28} radius={47} length={5} width={1.5} color="rgba(255,255,255,0.12)" activeColor="#ffd23e" />

apps/docs/src/sections/Playground.tsx

@@ -51,6 +51,7 @@ interface Config {
   label: string;
   unit: string;
   showValue: boolean;
+  editable: boolean;
   arcFrom: 'min' | 'center';
 }
 
@@ -67,6 +68,7 @@ const DEFAULTS: Config = {
   label: 'Level',
   unit: '',
   showValue: true,
+  editable: false,
   arcFrom: 'min',
 };
 
@@ -86,6 +88,7 @@ const buildCode = (c: Config, controlled: boolean): string => {
   props.push(`color="${c.color}"`);
   if (c.label) props.push(`label="${c.label}"`);
   if (c.unit) props.push(`unit="${c.unit}"`);
+  if (c.editable) props.push('editable');
   if (c.skin === 'flat' && c.arcFrom !== 'min') props.push(`arcFrom="center"`);
   if (c.skin === 'stepped') props.push(`steps={5}`);
   const name = SKINS[c.skin];
@@ -124,6 +127,7 @@ export const Playground: React.FC = () => {
     label: cfg.label || undefined,
     unit: cfg.unit || undefined,
     showValue: cfg.showValue,
+    editable: cfg.editable,
     'aria-label': cfg.label || 'playground knob',
   };
 
@@ -260,6 +264,16 @@ export const Playground: React.FC = () => {
                 show value readout
               </label>
             </div>
+            <div className="control">
+              <label className="check">
+                <input
+                  type="checkbox"
+                  checked={cfg.editable}
+                  onChange={e => set('editable', e.target.checked)}
+                />
+                type-in editing (dbl-click / click readout)
+              </label>
+            </div>
           </div>
 
           <div className="stage">

packages/dreamknob/README.md

@@ -45,7 +45,8 @@ Every component shares one core:
 | `↑ → / ↓ ←` | ± one step (`Shift` = 10×) |
 | `PageUp/PageDown` | ± 10 % of range |
 | `Home/End` | min / max |
-| Double-click | reset to `defaultValue` |
+| Double-click | reset to `defaultValue` — or open the type-in editor with `editable` |
+| `Escape` | cancel an in-flight drag, restoring the start value |
 | Touch / pen | pointer capture, `touch-action: none` |
 
 All knobs render `role="slider"` with `aria-valuemin/max/now/text`.
@@ -59,6 +60,10 @@ All knobs render `role="slider"` with `aria-valuemin/max/now/text`.
 - `steps={5}` — evenly spaced detents (selector knobs).
 - `taper` — `linearTaper` (default), `logTaper` (frequencies), `powTaper(n)` (gain),
   or your own `{ toNormalized, fromNormalized }`.
+- `origin={0}` — bipolar anchor: arcs/fader fills draw from this value (pan, gain trim).
+- `detents={[0]}` + `detentSize` — magnetic snap points while dragging.
+- `editable` — double-click (knobs) or click the readout (faders) to type an exact
+  value; `parseValue` customizes parsing (`"1.2k"` → 1200 out of the box).
 - `onChange` / `onChangeStart` / `onChangeEnd` — gesture-aware callbacks.
 
 ## Prebuilt skins
@@ -74,10 +79,24 @@ import {
   SteppedKnob,  // detented selector (positions={['LP','BP','HP']})
   Fader,        // linear channel fader, vertical or horizontal
   LEDFader,     // segmented LED meter-fader with color zones
+  ImageKnob,    // film-strip sprite knob (KnobMan-style PNG strips)
   SegmentDisplay, // standalone seven-segment numeric display
 } from 'dreamknob'
 ```
 
+## Theming
+
+```tsx
+import { DreamknobProvider } from 'dreamknob'
+
+<DreamknobProvider base="dark" theme={{ accent: '#ff4d6b' }}>
+  {/* every control below inherits the tokens; instance props still win */}
+</DreamknobProvider>
+```
+
+`base="light"` swaps in light-background defaults. Tokens: `accent`, `track`, `face`,
+`text`, `label`, `ticks`, `focusRing`, `fontMono`, `fontUI`.
+
 Every skin takes the core props plus `size`, `label`, `showValue`, `unit`, `format`,
 and per-part color props (`color`, `trackColor`, `faceColor`, `bodyColor`, …).
 

packages/dreamknob/src/components/Knob.tsx

@@ -1,16 +1,25 @@
 import * as React from 'react';
 import { KnobContextProvider, type KnobRenderContext } from '../core/context';
+import { useKnobTheme } from '../core/theme';
 import type { KnobCoreProps } from '../core/types';
 import { useKnob } from '../hooks/useKnob';
+import { ValueInput, defaultParseValue } from './ValueInput';
 
 export interface KnobProps extends KnobCoreProps {
   /** Square canvas size in px. Default: 80. */
   size?: number;
   /**
    * Color of the keyboard focus ring, or `false` to disable it (only do this
-   * if you render your own focus indicator). Default: a soft blue.
+   * if you render your own focus indicator). Default: the theme's ring.
    */
   focusRing?: string | false;
+  /**
+   * Double-click opens a type-in editor instead of resetting: type an exact
+   * value, Enter/blur commits, Escape cancels. Accepts "1.2k" style input.
+   */
+  editable?: boolean;
+  /** Custom parser for typed input, e.g. to accept "-6 dB" or "A4". */
+  parseValue?: (text: string) => number | null;
   className?: string;
   style?: React.CSSProperties;
   /** SVG children (Arc, Pointer, Ticks, ...) or a render function receiving the live state. */
@@ -26,17 +35,35 @@ export interface KnobProps extends KnobCoreProps {
  */
 export const Knob: React.FC<KnobProps> = ({
   size = 80,
-  focusRing = 'rgba(130,180,255,0.65)',
+  focusRing,
+  editable = false,
+  parseValue,
   className,
   style,
   children,
   overlay,
   ...core
 }) => {
+  const theme = useKnobTheme();
+  const ring = focusRing ?? theme.focusRing;
   const knob = useKnob(core);
+  const [editing, setEditing] = React.useState(false);
+
+  const closeEditor = () => {
+    setEditing(false);
+    knob.ref.current?.focus({ preventScroll: true });
+  };
+  const onDoubleClick = editable
+    ? (e: React.MouseEvent) => {
+        e.stopPropagation();
+        setEditing(true);
+      }
+    : knob.bind.onDoubleClick;
+
   const ctx: KnobRenderContext = {
     value: knob.value,
     normalized: knob.normalized,
+    originNormalized: knob.originNormalized,
     angle: knob.angle,
     isDragging: knob.isDragging,
     min: knob.min,
@@ -46,12 +73,14 @@ export const Knob: React.FC<KnobProps> = ({
     angleRange: knob.angleRange,
     size,
     center: size / 2,
+    setValue: knob.setValue,
   };
 
   return (
     <KnobContextProvider value={ctx}>
       <div
         {...knob.bind}
+        onDoubleClick={onDoubleClick}
         className={className}
         style={{
           display: 'inline-flex',
@@ -59,9 +88,7 @@ export const Knob: React.FC<KnobProps> = ({
           width: size,
           height: size,
           borderRadius: '50%',
-          ...(knob.isFocusVisible && focusRing
+          ...(knob.isFocusVisible && ring ? { boxShadow: `0 0 0 2px ${ring}` } : undefined),
-            ? { boxShadow: `0 0 0 2px ${focusRing}` }
-            : undefined),
           ...knob.bind.style,
           ...style,
         }}
@@ -76,6 +103,17 @@ export const Knob: React.FC<KnobProps> = ({
           {typeof children === 'function' ? children(ctx) : children}
         </svg>
         {typeof overlay === 'function' ? overlay(ctx) : overlay}
+        {editing && (
+          <ValueInput
+            initial={String(knob.value)}
+            onCommit={raw => {
+              const parsed = (parseValue ?? defaultParseValue)(raw);
+              if (parsed !== null && Number.isFinite(parsed)) knob.setValue(parsed);
+              closeEditor();
+            }}
+            onCancel={closeEditor}
+          />
+        )}
       </div>
     </KnobContextProvider>
   );

packages/dreamknob/src/components/ValueInput.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { useKnobTheme } from '../core/theme';
+
+/**
+ * Parse a typed value: accepts "42", "-6.5", ".5", comma decimals ("3,5"),
+ * a k-suffix ("1.2k" -> 1200), and ignores trailing units ("440 Hz").
+ * Returns null when no number can be read.
+ */
+export const defaultParseValue = (s: string): number | null => {
+  const m = s
+    .trim()
+    .replace(',', '.')
+    .match(/^([-+]?(?:\d+\.?\d*|\.\d+))\s*([kK])?/);
+  if (!m) return null;
+  const n = parseFloat(m[1]) * (m[2] ? 1000 : 1);
+  return Number.isFinite(n) ? n : null;
+};
+
+export interface ValueInputProps {
+  initial: string;
+  onCommit: (raw: string) => void;
+  onCancel: () => void;
+  style?: React.CSSProperties;
+}
+
+/**
+ * The type-in editor: commits on Enter or blur, cancels on Escape. Stops
+ * pointer/keyboard events from reaching the knob underneath.
+ */
+export const ValueInput: React.FC<ValueInputProps> = ({
+  initial,
+  onCommit,
+  onCancel,
+  style,
+}) => {
+  const theme = useKnobTheme();
+  const ref = React.useRef<HTMLInputElement>(null);
+  const settled = React.useRef(false);
+
+  React.useEffect(() => {
+    ref.current?.select();
+  }, []);
+
+  const commit = (raw: string) => {
+    if (settled.current) return;
+    settled.current = true;
+    onCommit(raw);
+  };
+
+  return (
+    <input
+      ref={ref}
+      autoFocus
+      defaultValue={initial}
+      aria-label="Enter value"
+      onPointerDown={e => e.stopPropagation()}
+      onDoubleClick={e => e.stopPropagation()}
+      onKeyDown={e => {
+        e.stopPropagation();
+        if (e.key === 'Enter') commit(e.currentTarget.value);
+        else if (e.key === 'Escape') {
+          settled.current = true;
+          onCancel();
+        }
+      }}
+      onBlur={e => commit(e.currentTarget.value)}
+      style={{
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '72%',
+        boxSizing: 'border-box',
+        background: 'rgba(8, 9, 12, 0.92)',
+        color: theme.text,
+        border: `1px solid ${theme.focusRing}`,
+        borderRadius: 6,
+        padding: '3px 6px',
+        fontFamily: theme.fontMono,
+        fontSize: 13,
+        textAlign: 'center',
+        outline: 'none',
+        zIndex: 1,
+        ...style,
+      }}
+    />
+  );
+};

packages/dreamknob/src/core/context.ts

@@ -6,6 +6,8 @@ export interface KnobRenderContext extends KnobState {
   size: number;
   /** Center coordinate (size / 2). */
   center: number;
+  /** Imperatively set the value (snapped + clamped) — for editors and custom UI. */
+  setValue: (value: number) => void;
 }
 
 const Ctx = React.createContext<KnobRenderContext | null>(null);

packages/dreamknob/src/core/math.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 import {
   angleFromNormalized,
   angleFromPoint,
+  applyDetents,
   clamp,
   decimalsFromStep,
   describeArc,
@@ -128,6 +129,22 @@ describe('angles', () => {
   });
 });
 
+describe('applyDetents', () => {
+  it('snaps within the radius and releases outside it', () => {
+    expect(applyDetents(0.51, [0.5], 0.025)).toBe(0.5);
+    expect(applyDetents(0.49, [0.5], 0.025)).toBe(0.5);
+    expect(applyDetents(0.54, [0.5], 0.025)).toBe(0.54);
+    expect(applyDetents(0.2, [0.5], 0.025)).toBe(0.2);
+  });
+  it('picks the nearest of several detents', () => {
+    expect(applyDetents(0.26, [0.25, 0.5, 0.75], 0.05)).toBe(0.25);
+    expect(applyDetents(0.72, [0.25, 0.5, 0.75], 0.05)).toBe(0.75);
+  });
+  it('passes through with no detents', () => {
+    expect(applyDetents(0.42, [], 0.05)).toBe(0.42);
+  });
+});
+
 describe('describeArc', () => {
   it('produces a drawable path', () => {
     const d = describeArc(50, 50, 40, 225, 495);

packages/dreamknob/src/core/math.ts

@@ -51,6 +51,27 @@ export const findClosest = (values: readonly number[], value: number): number =>
   return best;
 };
 
+/**
+ * Magnetic detents: snap `n` to the nearest of `detents` (all in normalized
+ * [0, 1] space) when within `radius` of it; otherwise pass `n` through.
+ */
+export const applyDetents = (
+  n: number,
+  detents: readonly number[],
+  radius: number,
+): number => {
+  let best = n;
+  let bestDelta = radius;
+  for (const d of detents) {
+    const delta = Math.abs(n - d);
+    if (delta <= bestDelta) {
+      best = d;
+      bestDelta = delta;
+    }
+  }
+  return best;
+};
+
 // ---------------------------------------------------------------------------
 // Tapers — map between value space and the normalized [0, 1] travel of the
 // control. Audio parameters are often logarithmic (frequency) or power-law

packages/dreamknob/src/core/theme.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+
+export const MONO_FONT =
+  "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+export const UI_FONT =
+  "'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif";
+
+/**
+ * Shared design tokens. Every prebuilt skin resolves its color/font defaults
+ * from the active theme, so a single provider can restyle a whole console;
+ * per-instance props always win over the theme.
+ */
+export interface KnobTheme {
+  /**
+   * Accent for value arcs, pointers and LEDs. Optional — when unset, each
+   * skin keeps its own signature default color.
+   */
+  accent?: string;
+  /** Background tracks and rails. */
+  track: string;
+  /** Knob face/body fill for flat skins. */
+  face: string;
+  /** Value readouts. */
+  text: string;
+  /** Captions / parameter names. */
+  label: string;
+  /** Inactive tick marks and printed scales. */
+  ticks: string;
+  /** Keyboard focus ring. */
+  focusRing: string;
+  fontMono: string;
+  fontUI: string;
+}
+
+export const darkTheme: KnobTheme = {
+  track: 'rgba(255,255,255,0.12)',
+  face: 'rgba(255,255,255,0.05)',
+  text: 'rgba(255,255,255,0.92)',
+  label: 'rgba(255,255,255,0.45)',
+  ticks: 'rgba(255,255,255,0.18)',
+  focusRing: 'rgba(130,180,255,0.65)',
+  fontMono: MONO_FONT,
+  fontUI: UI_FONT,
+};
+
+export const lightTheme: KnobTheme = {
+  track: 'rgba(0,0,0,0.14)',
+  face: 'rgba(0,0,0,0.06)',
+  text: 'rgba(0,0,0,0.85)',
+  label: 'rgba(0,0,0,0.5)',
+  ticks: 'rgba(0,0,0,0.28)',
+  focusRing: 'rgba(0,110,220,0.55)',
+  fontMono: MONO_FONT,
+  fontUI: UI_FONT,
+};
+
+const ThemeCtx = React.createContext<KnobTheme>(darkTheme);
+
+export interface DreamknobProviderProps {
+  /** Base token set to start from. Default: 'dark'. */
+  base?: 'dark' | 'light';
+  /** Token overrides merged over the base. */
+  theme?: Partial<KnobTheme>;
+  children?: React.ReactNode;
+}
+
+/** Provides shared design tokens to every dreamknob control below it. */
+export const DreamknobProvider: React.FC<DreamknobProviderProps> = ({
+  base = 'dark',
+  theme,
+  children,
+}) => {
+  const value = React.useMemo<KnobTheme>(
+    () => ({ ...(base === 'light' ? lightTheme : darkTheme), ...theme }),
+    [base, theme],
+  );
+  return <ThemeCtx.Provider value={value}>{children}</ThemeCtx.Provider>;
+};
+
+/** The active theme (dark tokens when no provider is present). */
+export const useKnobTheme = (): KnobTheme => React.useContext(ThemeCtx);

packages/dreamknob/src/core/types.ts

@@ -37,6 +37,20 @@ export interface KnobCoreProps {
   steps?: number;
   /** Travel-to-value curve. Defaults to linear. Use `logTaper` / `powTaper(n)` for audio params. */
   taper?: Taper;
+  /**
+   * Anchor value for bipolar controls: arcs and fader fills draw from here
+   * instead of from the minimum (e.g. `origin={0}` on a -60..+12 dB gain or a
+   * -50..50 pan). Exposed to custom skins as `originNormalized`.
+   */
+  origin?: number;
+  /**
+   * Magnetic detent values: while dragging, the control snaps to the nearest
+   * of these when within `detentSize` of it (e.g. `detents={[0]}` for a
+   * center-detented pan). Wheel and keyboard are unaffected.
+   */
+  detents?: readonly number[];
+  /** Detent capture radius as a fraction of travel. Default: 0.025. */
+  detentSize?: number;
   /** Drag behaviour. Default: 'rotary'. */
   interaction?: InteractionMode;
   /** Pixels of relative drag for full travel in vertical/horizontal modes. Default: 200. */
@@ -77,6 +91,8 @@ export interface KnobState {
   value: number;
   /** Normalized travel position in [0, 1] (taper space). */
   normalized: number;
+  /** Normalized position of `origin`, when set — the bipolar fill anchor. */
+  originNormalized?: number;
   /** Display angle in degrees clockwise from 12 o'clock. */
   angle: number;
   isDragging: boolean;

packages/dreamknob/src/hooks/useKnob.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   angleFromNormalized,
   angleFromPoint,
+  applyDetents,
   clamp,
   decimalsFromStep,
   findClosest,
@@ -75,6 +76,9 @@ export function useKnob(props: KnobCoreProps): UseKnobResult {
     interaction = 'rotary',
     dragSensitivity = 200,
     trackInset = 0,
+    origin,
+    detents,
+    detentSize = 0.025,
     fineMultiplier = 0.1,
     angleOffset = 225,
     angleRange = 270,
@@ -153,6 +157,18 @@ export function useKnob(props: KnobCoreProps): UseKnobResult {
     [emit, taper, min, max],
   );
 
+  // Detent positions in normalized space, applied only during pointer drags.
+  const detentsN = React.useMemo(
+    () =>
+      detents?.map(d => clamp(taper.toNormalized(clamp(d, min, max), min, max), 0, 1)),
+    [detents, taper, min, max],
+  );
+  const setFromDrag = React.useCallback(
+    (n: number) =>
+      setFromNormalized(detentsN ? applyDetents(n, detentsN, detentSize) : n),
+    [setFromNormalized, detentsN, detentSize],
+  );
+
   // -------------------------------------------------------------------------
   // Pointer dragging
   // -------------------------------------------------------------------------
@@ -166,19 +182,19 @@ export function useKnob(props: KnobCoreProps): UseKnobResult {
       switch (interaction) {
         case 'rotary': {
           const angle = angleFromPoint(clientX, clientY, s.centerX, s.centerY);
-          setFromNormalized(normalizedFromAngle(angle, angleOffset % 360, angleRange));
+          setFromDrag(normalizedFromAngle(angle, angleOffset % 360, angleRange));
           break;
         }
         case 'track-vertical': {
           const travel = s.rect.height - trackInset * 2;
           if (travel <= 0) break;
-          setFromNormalized((s.rect.bottom - trackInset - clientY) / travel);
+          setFromDrag((s.rect.bottom - trackInset - clientY) / travel);
           break;
         }
         case 'track-horizontal': {
           const travel = s.rect.width - trackInset * 2;
           if (travel <= 0) break;
-          setFromNormalized((clientX - s.rect.left - trackInset) / travel);
+          setFromDrag((clientX - s.rect.left - trackInset) / travel);
           break;
         }
         default: {
@@ -188,14 +204,15 @@ export function useKnob(props: KnobCoreProps): UseKnobResult {
             dn += (s.lastY - clientY) * scale;
           if (interaction === 'horizontal' || interaction === 'both')
             dn += (clientX - s.lastX) * scale;
+          // s.n stays continuous so magnetic detents release cleanly.
           s.n = clamp(s.n + dn, 0, 1);
-          setFromNormalized(s.n);
+          setFromDrag(s.n);
         }
       }
       s.lastX = clientX;
       s.lastY = clientY;
     },
-    [interaction, angleOffset, angleRange, dragSensitivity, trackInset, fineMultiplier, setFromNormalized],
+    [interaction, angleOffset, angleRange, dragSensitivity, trackInset, fineMultiplier, setFromDrag],
   );
 
   const onPointerDown = React.useCallback(
@@ -409,10 +426,15 @@ export function useKnob(props: KnobCoreProps): UseKnobResult {
 
   const normalized = clamp(taper.toNormalized(value, min, max), 0, 1);
   const angle = angleFromNormalized(normalized, angleOffset, angleRange);
+  const originNormalized =
+    origin === undefined
+      ? undefined
+      : clamp(taper.toNormalized(clamp(origin, min, max), min, max), 0, 1);
 
   return {
     value,
     normalized,
+    originNormalized,
     angle,
     isDragging,
     isFocusVisible,

packages/dreamknob/src/index.ts

@@ -2,6 +2,16 @@
 export { useKnob, type UseKnobResult } from './hooks/useKnob';
 export { Knob, type KnobProps } from './components/Knob';
 export { useKnobContext, type KnobRenderContext } from './core/context';
+export {
+  DreamknobProvider,
+  useKnobTheme,
+  darkTheme,
+  lightTheme,
+  MONO_FONT,
+  UI_FONT,
+  type KnobTheme,
+  type DreamknobProviderProps,
+} from './core/theme';
 export type { KnobCoreProps, KnobState, InteractionMode } from './core/types';
 export {
   clamp,
@@ -9,6 +19,7 @@ export {
   snapToStep,
   decimalsFromStep,
   findClosest,
+  applyDetents,
   linearTaper,
   logTaper,
   powTaper,
@@ -31,6 +42,9 @@ export { KnobValue, KnobLabel, type KnobValueProps, type KnobLabelProps } from '
 // Digital
 export { SegmentDisplay, type SegmentDisplayProps } from './digital/SegmentDisplay';
 
+// Value editing
+export { defaultParseValue, ValueInput, type ValueInputProps } from './components/ValueInput';
+
 // Prebuilt skins
 export type { SkinProps } from './skins/shared';
 export { FlatKnob, type FlatKnobProps } from './skins/FlatKnob';
@@ -42,4 +56,5 @@ export { NeonKnob, type NeonKnobProps } from './skins/NeonKnob';
 export { SteppedKnob, type SteppedKnobProps } from './skins/SteppedKnob';
 export { Fader, type FaderProps } from './skins/Fader';
 export { LEDFader, type LEDFaderProps, type LEDFaderZone } from './skins/LEDFader';
+export { ImageKnob, type ImageKnobProps } from './skins/ImageKnob';
 export { GlowFilter, type GlowFilterProps } from './primitives/GlowFilter';

packages/dreamknob/src/primitives/Arc.tsx

@@ -10,7 +10,11 @@ export interface ArcProps {
   color?: string;
   /** Background track color. Omit to skip the track. */
   trackColor?: string;
-  /** Draw the value arc from the minimum ('min') or from the travel center ('center', pan-style). */
+  /**
+   * Draw the value arc from the minimum ('min') or from the anchor ('center',
+   * pan-style). The anchor is the knob's `origin` value when set, otherwise
+   * the travel midpoint.
+   */
   from?: 'min' | 'center';
   cap?: 'butt' | 'round';
   /** Extra SVG props for the value arc path (e.g. filter for glow). */
@@ -29,16 +33,17 @@ export const Arc: React.FC<ArcProps> = ({
   arcProps,
   opacity,
 }) => {
-  const { size, center, normalized, angleOffset, angleRange } = useKnobContext();
+  const { size, center, normalized, originNormalized, angleOffset, angleRange } =
+    useKnobContext();
   const r = radius ?? (size - thickness) / 2;
 
   let start: number;
   let end: number;
   if (from === 'center') {
-    const mid = angleOffset + angleRange / 2;
+    const anchor = angleOffset + (originNormalized ?? 0.5) * angleRange;
     const now = angleOffset + normalized * angleRange;
-    start = Math.min(mid, now);
+    start = Math.min(anchor, now);
-    end = Math.max(mid, now);
+    end = Math.max(anchor, now);
   } else {
     start = angleOffset;
     end = angleOffset + normalized * angleRange;

packages/dreamknob/src/skins/Fader.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { useKnob } from '../hooks/useKnob';
 import type { KnobCoreProps } from '../core/types';
-import { MONO_FONT, UI_FONT } from './shared';
+import { useKnobTheme } from '../core/theme';
+import { ValueInput, defaultParseValue } from '../components/ValueInput';
 
 export interface FaderProps extends Omit<KnobCoreProps, 'interaction'> {
   orientation?: 'vertical' | 'horizontal';
@@ -23,6 +24,10 @@ export interface FaderProps extends Omit<KnobCoreProps, 'interaction'> {
   format?: (value: number) => string;
   textColor?: string;
   labelColor?: string;
+  /** Click the readout to type an exact value. */
+  editable?: boolean;
+  /** Custom parser for typed input. */
+  parseValue?: (text: string) => number | null;
   className?: string;
   style?: React.CSSProperties;
 }
@@ -30,24 +35,32 @@ export interface FaderProps extends Omit<KnobCoreProps, 'interaction'> {
 /** Studio channel fader: absolute-position linear control with a cap handle. */
 export const Fader: React.FC<FaderProps> = ({
   orientation = 'vertical',
-  focusRing = 'rgba(130,180,255,0.65)',
+  focusRing,
   length = 160,
   breadth = 44,
-  color = '#4cc2ff',
+  color: colorProp,
-  trackColor = 'rgba(255,255,255,0.12)',
+  trackColor,
   showFill = true,
   tickCount = 9,
-  tickColor = 'rgba(255,255,255,0.15)',
+  tickColor,
   label,
   showValue = true,
   unit,
   format,
-  textColor = 'rgba(255,255,255,0.92)',
+  textColor,
-  labelColor = 'rgba(255,255,255,0.45)',
+  labelColor,
+  editable = false,
+  parseValue,
   className,
   style,
   ...core
 }) => {
+  const [editing, setEditing] = React.useState(false);
+  const theme = useKnobTheme();
+  const color = colorProp ?? theme.accent ?? '#4cc2ff';
+  const ring = focusRing ?? theme.focusRing;
+  const resolvedTrack = trackColor ?? theme.track;
+  const resolvedTicks = tickColor ?? theme.ticks;
   const vertical = orientation === 'vertical';
   const capMain = 20; // handle size along the travel axis
   const knob = useKnob({
@@ -67,9 +80,13 @@ export const Fader: React.FC<FaderProps> = ({
 
   // Handle center position along the travel axis.
   const travel = length - capMain;
-  const pos = vertical
+  const toPos = (n: number) =>
-    ? length - capMain / 2 - knob.normalized * travel
+    vertical ? length - capMain / 2 - n * travel : capMain / 2 + n * travel;
-    : capMain / 2 + knob.normalized * travel;
+  const pos = toPos(knob.normalized);
+  // Bipolar controls fill from the origin; unipolar from the start of travel.
+  const originPos = toPos(knob.originNormalized ?? 0);
+  const fillStart = Math.min(pos, originPos);
+  const fillLength = Math.abs(pos - originPos);
 
   const fixed = knob.value.toFixed(knob.decimals);
   const trimmed = fixed.includes('.') ? fixed.replace(/0+$/, '').replace(/\.$/, '') : fixed;
@@ -82,13 +99,13 @@ export const Fader: React.FC<FaderProps> = ({
     ticks.push(
       vertical ? (
         <React.Fragment key={i}>
-          <line x1={mid - breadth * 0.36} y1={p} x2={mid - breadth * 0.24} y2={p} stroke={tickColor} strokeWidth="1.4" />
+          <line x1={mid - breadth * 0.36} y1={p} x2={mid - breadth * 0.24} y2={p} stroke={resolvedTicks} strokeWidth="1.4" />
-          <line x1={mid + breadth * 0.24} y1={p} x2={mid + breadth * 0.36} y2={p} stroke={tickColor} strokeWidth="1.4" />
+          <line x1={mid + breadth * 0.24} y1={p} x2={mid + breadth * 0.36} y2={p} stroke={resolvedTicks} strokeWidth="1.4" />
         </React.Fragment>
       ) : (
         <React.Fragment key={i}>
-          <line x1={p} y1={mid - breadth * 0.36} x2={p} y2={mid - breadth * 0.24} stroke={tickColor} strokeWidth="1.4" />
+          <line x1={p} y1={mid - breadth * 0.36} x2={p} y2={mid - breadth * 0.24} stroke={resolvedTicks} strokeWidth="1.4" />
-          <line x1={p} y1={mid + breadth * 0.24} x2={p} y2={mid + breadth * 0.36} stroke={tickColor} strokeWidth="1.4" />
+          <line x1={p} y1={mid + breadth * 0.24} x2={p} y2={mid + breadth * 0.36} stroke={resolvedTicks} strokeWidth="1.4" />
         </React.Fragment>
       ),
     );
@@ -109,19 +126,43 @@ export const Fader: React.FC<FaderProps> = ({
       }}
     >
       {showValue && (
-        <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+        <div
-          <span
           style={{
-              fontFamily: MONO_FONT,
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            position: 'relative',
+            minHeight: '1.4em',
+          }}
+        >
+          {editing ? (
+            <ValueInput
+              initial={String(knob.value)}
+              onCommit={raw => {
+                const parsed = (parseValue ?? defaultParseValue)(raw);
+                if (parsed !== null && Number.isFinite(parsed)) knob.setValue(parsed);
+                setEditing(false);
+              }}
+              onCancel={() => setEditing(false)}
+              style={{ position: 'static', transform: 'none', width: '100%', fontSize: 12 }}
+            />
+          ) : (
+            <span
+              onClick={editable ? () => setEditing(true) : undefined}
+              title={editable ? 'Click to type a value' : undefined}
+              style={{
+                fontFamily: theme.fontMono,
                 fontSize: 12,
-              color: textColor,
+                color: textColor ?? theme.text,
                 minHeight: '1.2em',
                 whiteSpace: 'nowrap',
-              pointerEvents: 'none',
+                pointerEvents: editable ? 'auto' : 'none',
+                cursor: editable ? 'text' : undefined,
               }}
             >
               {text}
             </span>
+          )}
         </div>
       )}
       <div
@@ -132,9 +173,7 @@ export const Fader: React.FC<FaderProps> = ({
           height: h,
           display: 'inline-flex',
           borderRadius: 8,
-          ...(knob.isFocusVisible && focusRing
+          ...(knob.isFocusVisible && ring ? { boxShadow: `0 0 0 2px ${ring}` } : undefined),
-            ? { boxShadow: `0 0 0 2px ${focusRing}` }
-            : undefined),
         }}
       >
         <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }} aria-hidden="true">
@@ -150,9 +189,9 @@ export const Fader: React.FC<FaderProps> = ({
           {ticks}
           {vertical ? (
             <>
-              <rect x={mid - trackW / 2} y={capMain / 2} width={trackW} height={travel} rx={trackW / 2} fill={trackColor} />
+              <rect x={mid - trackW / 2} y={capMain / 2} width={trackW} height={travel} rx={trackW / 2} fill={resolvedTrack} />
-              {showFill && (
+              {showFill && fillLength > 0 && (
-                <rect x={mid - trackW / 2} y={pos} width={trackW} height={length - capMain / 2 - pos} rx={trackW / 2} fill={color} />
+                <rect x={mid - trackW / 2} y={fillStart} width={trackW} height={fillLength} rx={trackW / 2} fill={color} />
               )}
               <g style={{ transition: knob.isDragging ? undefined : 'transform 40ms linear' }}>
                 <rect
@@ -169,9 +208,9 @@ export const Fader: React.FC<FaderProps> = ({
             </>
           ) : (
             <>
-              <rect x={capMain / 2} y={mid - trackW / 2} width={travel} height={trackW} rx={trackW / 2} fill={trackColor} />
+              <rect x={capMain / 2} y={mid - trackW / 2} width={travel} height={trackW} rx={trackW / 2} fill={resolvedTrack} />
-              {showFill && (
+              {showFill && fillLength > 0 && (
-                <rect x={capMain / 2} y={mid - trackW / 2} width={pos - capMain / 2} height={trackW} rx={trackW / 2} fill={color} />
+                <rect x={fillStart} y={mid - trackW / 2} width={fillLength} height={trackW} rx={trackW / 2} fill={color} />
               )}
               <g>
                 <rect
@@ -193,11 +232,11 @@ export const Fader: React.FC<FaderProps> = ({
         <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
           <span
             style={{
-              fontFamily: UI_FONT,
+              fontFamily: theme.fontUI,
               fontSize: 11,
               letterSpacing: '0.08em',
               textTransform: 'uppercase',
-              color: labelColor,
+              color: labelColor ?? theme.label,
               whiteSpace: 'nowrap',
               pointerEvents: 'none',
             }}

packages/dreamknob/src/skins/FlatKnob.tsx

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

packages/dreamknob/src/skins/ImageKnob.tsx

@@ -0,0 +1,164 @@
+import * as React from 'react';
+import { useKnob } from '../hooks/useKnob';
+import { useKnobTheme } from '../core/theme';
+import type { KnobCoreProps } from '../core/types';
+import { ValueInput, defaultParseValue } from '../components/ValueInput';
+
+export interface ImageKnobProps extends KnobCoreProps {
+  /** Film-strip image: every frame is one rotation step, stacked in a strip. */
+  src: string;
+  /** Number of frames in the strip. */
+  frames: number;
+  /** How the frames are stacked in the image. Default: 'vertical'. */
+  stripOrientation?: 'vertical' | 'horizontal';
+  /** Rendered frame size in px (frames are assumed square). Default: 90. */
+  size?: number;
+  label?: string;
+  showValue?: boolean;
+  unit?: string;
+  format?: (value: number) => string;
+  textColor?: string;
+  labelColor?: string;
+  /** Keyboard focus ring color, or false to disable. */
+  focusRing?: string | false;
+  /** Double-click to type an exact value. */
+  editable?: boolean;
+  parseValue?: (text: string) => number | null;
+  /** Extra styles for the image layer (e.g. filter, borderRadius). */
+  imageStyle?: React.CSSProperties;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Film-strip knob: renders one frame of a sprite strip per value position —
+ * the classic KnobMan / JUCE workflow for photoreal hardware knobs.
+ */
+export const ImageKnob: React.FC<ImageKnobProps> = ({
+  src,
+  frames,
+  stripOrientation = 'vertical',
+  size = 90,
+  label,
+  showValue = false,
+  unit,
+  format,
+  textColor,
+  labelColor,
+  focusRing,
+  editable = false,
+  parseValue,
+  imageStyle,
+  className,
+  style,
+  ...core
+}) => {
+  const theme = useKnobTheme();
+  const knob = useKnob(core);
+  const [editing, setEditing] = React.useState(false);
+  const ring = focusRing ?? theme.focusRing;
+
+  const frame = frames > 1 ? Math.round(knob.normalized * (frames - 1)) : 0;
+  const p = frames > 1 ? (frame / (frames - 1)) * 100 : 0;
+  const vertical = stripOrientation === 'vertical';
+
+  const fixed = knob.value.toFixed(knob.decimals);
+  const trimmed = fixed.includes('.') ? fixed.replace(/0+$/, '').replace(/\.$/, '') : fixed;
+  const text = format ? format(knob.value) : `${trimmed}${unit ?? ''}`;
+
+  const closeEditor = () => {
+    setEditing(false);
+    knob.ref.current?.focus({ preventScroll: true });
+  };
+
+  return (
+    <div
+      className={className}
+      style={{
+        display: 'inline-flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 4,
+        width: size,
+        ...style,
+      }}
+    >
+      <div
+        {...knob.bind}
+        onDoubleClick={
+          editable
+            ? e => {
+                e.stopPropagation();
+                setEditing(true);
+              }
+            : knob.bind.onDoubleClick
+        }
+        style={{
+          ...knob.bind.style,
+          position: 'relative',
+          width: size,
+          height: size,
+          borderRadius: '50%',
+          ...(knob.isFocusVisible && ring ? { boxShadow: `0 0 0 2px ${ring}` } : undefined),
+        }}
+      >
+        <div
+          aria-hidden="true"
+          style={{
+            position: 'absolute',
+            inset: 0,
+            backgroundImage: `url(${src})`,
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: vertical ? `100% ${frames * 100}%` : `${frames * 100}% 100%`,
+            backgroundPosition: vertical ? `0% ${p}%` : `${p}% 0%`,
+            pointerEvents: 'none',
+            ...imageStyle,
+          }}
+        />
+        {editing && (
+          <ValueInput
+            initial={String(knob.value)}
+            onCommit={raw => {
+              const parsed = (parseValue ?? defaultParseValue)(raw);
+              if (parsed !== null && Number.isFinite(parsed)) knob.setValue(parsed);
+              closeEditor();
+            }}
+            onCancel={closeEditor}
+          />
+        )}
+      </div>
+      {showValue && (
+        <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+          <span
+            style={{
+              fontFamily: theme.fontMono,
+              fontSize: 12,
+              color: textColor ?? theme.text,
+              whiteSpace: 'nowrap',
+              pointerEvents: 'none',
+            }}
+          >
+            {text}
+          </span>
+        </div>
+      )}
+      {label && (
+        <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
+          <span
+            style={{
+              fontFamily: theme.fontUI,
+              fontSize: 11,
+              letterSpacing: '0.08em',
+              textTransform: 'uppercase',
+              color: labelColor ?? theme.label,
+              whiteSpace: 'nowrap',
+              pointerEvents: 'none',
+            }}
+          >
+            {label}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};

packages/dreamknob/src/skins/LEDFader.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useKnob } from '../hooks/useKnob';
 import type { KnobCoreProps } from '../core/types';
+import { useKnobTheme } from '../core/theme';
 import { SegmentDisplay } from '../digital/SegmentDisplay';
-import { UI_FONT } from './shared';
+import { ValueInput, defaultParseValue } from '../components/ValueInput';
 
 export interface LEDFaderZone {
   /** Upper bound of the zone as a normalized position (0..1]. */
@@ -40,6 +41,10 @@ export interface LEDFaderProps extends Omit<KnobCoreProps, 'interaction'> {
   /** Decimals in the readout (defaults to the control's decimals, capped at 1). */
   displayDecimals?: number;
   labelColor?: string;
+  /** Click the readout to type an exact value. */
+  editable?: boolean;
+  /** Custom parser for typed input. */
+  parseValue?: (text: string) => number | null;
   className?: string;
   style?: React.CSSProperties;
 }
@@ -50,21 +55,27 @@ export const LEDFader: React.FC<LEDFaderProps> = ({
   length = 160,
   breadth = 34,
   segments = 24,
-  color = '#3df2ad',
+  color: colorProp,
   zones,
   offOpacity = 0.13,
   glow = true,
   faceColor = '#0b0d0e',
-  focusRing = 'rgba(130,180,255,0.65)',
+  focusRing,
   label,
   showValue = true,
   digits = 4,
   displayDecimals,
-  labelColor = 'rgba(255,255,255,0.45)',
+  labelColor,
+  editable = false,
+  parseValue,
   className,
   style,
   ...core
 }) => {
+  const [editing, setEditing] = React.useState(false);
+  const theme = useKnobTheme();
+  const color = colorProp ?? theme.accent ?? '#3df2ad';
+  const ring = focusRing ?? theme.focusRing;
   const vertical = orientation === 'vertical';
   const pad = 5;
   const knob = useKnob({
@@ -84,14 +95,17 @@ export const LEDFader: React.FC<LEDFaderProps> = ({
   const zoneFor = (t: number): string =>
     (zoneList.find(z => t <= z.upTo + 1e-9) ?? zoneList[zoneList.length - 1]).color;
 
-  const lit = Math.round(knob.normalized * segments);
+  // Bipolar controls light the segments between the origin and the value.
+  const originN = knob.originNormalized ?? 0;
+  const litFrom = Math.round(Math.min(knob.normalized, originN) * segments);
+  const litTo = Math.round(Math.max(knob.normalized, originN) * segments);
   const slot = (length - pad * 2) / segments;
   const gap = Math.min(3, slot * 0.35);
   const cross = breadth - pad * 2;
 
   const leds: React.ReactNode[] = [];
   for (let i = 0; i < segments; i++) {
-    const on = i < lit;
+    const on = i >= litFrom && i < litTo;
     const c = zoneFor((i + 1) / segments);
     const common = {
       rx: 1.5,
@@ -135,7 +149,32 @@ export const LEDFader: React.FC<LEDFaderProps> = ({
       }}
     >
       {showValue && (
-        <div style={{ width: '100%', display: 'flex', justifyContent: 'center', pointerEvents: 'none' }}>
+        <div
+          style={{
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            position: 'relative',
+            pointerEvents: editable ? 'auto' : 'none',
+            cursor: editable ? 'text' : undefined,
+            minHeight: 24,
+            alignItems: 'center',
+          }}
+          onClick={editable && !editing ? () => setEditing(true) : undefined}
+          title={editable ? 'Click to type a value' : undefined}
+        >
+          {editing ? (
+            <ValueInput
+              initial={String(knob.value)}
+              onCommit={raw => {
+                const parsed = (parseValue ?? defaultParseValue)(raw);
+                if (parsed !== null && Number.isFinite(parsed)) knob.setValue(parsed);
+                setEditing(false);
+              }}
+              onCancel={() => setEditing(false)}
+              style={{ position: 'static', transform: 'none', width: '100%', fontSize: 12 }}
+            />
+          ) : (
             <SegmentDisplay
               value={knob.value}
               digits={digits}
@@ -145,6 +184,7 @@ export const LEDFader: React.FC<LEDFaderProps> = ({
               background="none"
               ghostOpacity={0.07}
             />
+          )}
         </div>
       )}
       <div
@@ -155,9 +195,7 @@ export const LEDFader: React.FC<LEDFaderProps> = ({
           height: h,
           display: 'inline-flex',
           borderRadius: 6,
-          ...(knob.isFocusVisible && focusRing
+          ...(knob.isFocusVisible && ring ? { boxShadow: `0 0 0 2px ${ring}` } : undefined),
-            ? { boxShadow: `0 0 0 2px ${focusRing}` }
-            : undefined),
         }}
       >
         <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }} aria-hidden="true">
@@ -193,11 +231,11 @@ export const LEDFader: React.FC<LEDFaderProps> = ({
         <div style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
           <span
             style={{
-              fontFamily: UI_FONT,
+              fontFamily: theme.fontUI,
               fontSize: 11,
               letterSpacing: '0.08em',
               textTransform: 'uppercase',
-              color: labelColor,
+              color: labelColor ?? theme.label,
               whiteSpace: 'nowrap',
               pointerEvents: 'none',
             }}

packages/dreamknob/src/skins/LEDKnob.tsx

@@ -5,7 +5,8 @@ import { KnobLabel } from '../primitives/Text';
 import { describeArc } from '../core/math';
 import { useKnobContext } from '../core/context';
 import { formatForDisplay, renderSegmentText } from '../digital/segments';
-import { UI_FONT, type SkinProps } from './shared';
+import { useKnobTheme } from '../core/theme';
+import type { SkinProps } from './shared';
 
 export interface LEDKnobProps extends SkinProps {
   /** LED color. */
@@ -83,22 +84,25 @@ const CenterDisplay: React.FC<{
 /** Digital knob: segmented LED ring around a real seven-segment readout. */
 export const LEDKnob: React.FC<LEDKnobProps> = ({
   size = 90,
-  color = '#3df2ad',
+  color: colorProp,
   offColor = 'rgba(255,255,255,0.07)',
   segments = 24,
   digits = 3,
   displayDecimals,
-  labelColor = 'rgba(255,255,255,0.45)',
+  labelColor,
   faceColor = '#0b0d0e',
   label,
+  focusRing,
   className,
   style,
   ...core
 }) => {
+  const theme = useKnobTheme();
+  const color = colorProp ?? theme.accent ?? '#3df2ad';
   const id = React.useId();
   const glowId = `${id}-glow`;
   return (
-    <Knob size={size} className={className} style={style} {...core}>
+    <Knob size={size} className={className} style={style} focusRing={focusRing} {...core}>
       {ctx => (
         <>
           <defs>
@@ -120,7 +124,12 @@ export const LEDKnob: React.FC<LEDKnobProps> = ({
             glowId={glowId}
           />
           {label && (
-            <KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.45} fontSize={size * 0.095}>
+            <KnobLabel
+              color={labelColor ?? theme.label}
+              fontFamily={theme.fontUI}
+              dy={size * 0.45}
+              fontSize={size * 0.095}
+            >
               {label}
             </KnobLabel>
           )}

packages/dreamknob/src/skins/MetalKnob.tsx

@@ -4,7 +4,8 @@ import { Arc } from '../primitives/Arc';
 import { Pointer } from '../primitives/Pointer';
 import { Ticks } from '../primitives/Ticks';
 import { KnobLabel, KnobValue } from '../primitives/Text';
-import { MONO_FONT, UI_FONT, type SkinProps } from './shared';
+import { useKnobTheme } from '../core/theme';
+import type { SkinProps } from './shared';
 
 export interface MetalKnobProps extends SkinProps {
   /** Accent color for the active ticks / value arc. */
@@ -23,10 +24,10 @@ export interface MetalKnobProps extends SkinProps {
 /** 3D brushed-aluminum knob with a knurled rim — classic hi-fi hardware. */
 export const MetalKnob: React.FC<MetalKnobProps> = ({
   size = 90,
-  color = '#4cc2ff',
+  color: colorProp,
   tone = 'silver',
-  tickColor = 'rgba(255,255,255,0.18)',
+  tickColor,
-  labelColor = 'rgba(255,255,255,0.45)',
+  labelColor,
   indicatorColor,
   textColor,
   showArc = true,
@@ -35,10 +36,13 @@ export const MetalKnob: React.FC<MetalKnobProps> = ({
   showValue = false,
   unit,
   format,
+  focusRing,
   className,
   style,
   ...core
 }) => {
+  const theme = useKnobTheme();
+  const color = colorProp ?? theme.accent ?? '#4cc2ff';
   const id = React.useId();
   const rimId = `${id}-rim`;
   const faceId = `${id}-face`;
@@ -57,7 +61,7 @@ export const MetalKnob: React.FC<MetalKnobProps> = ({
   const indicator = indicatorColor ?? (silver ? '#1b1c21' : color);
 
   return (
-    <Knob size={size} className={className} style={style} {...core}>
+    <Knob size={size} className={className} style={style} focusRing={focusRing} {...core}>
       <defs>
         <linearGradient id={rimId} x1="0" y1="0" x2="0.8" y2="1">
           <stop offset="0" stopColor={rimStops[0]} />
@@ -94,7 +98,7 @@ export const MetalKnob: React.FC<MetalKnobProps> = ({
         radius={size / 2 - size * 0.055}
         length={size * 0.05}
         width={Math.max(1, size * 0.015)}
-        color={tickColor}
+        color={tickColor ?? theme.ticks}
         activeColor={color}
       />
 
@@ -124,12 +128,17 @@ export const MetalKnob: React.FC<MetalKnobProps> = ({
           unit={unit}
           format={format}
           fontSize={size * 0.13}
-          fontFamily={MONO_FONT}
+          fontFamily={theme.fontMono}
           dy={size * 0.09}
         />
       )}
       {label && (
-        <KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.44} fontSize={size * 0.1}>
+        <KnobLabel
+          color={labelColor ?? theme.label}
+          fontFamily={theme.fontUI}
+          dy={size * 0.44}
+          fontSize={size * 0.1}
+        >
           {label}
         </KnobLabel>
       )}

packages/dreamknob/src/skins/NeonKnob.tsx

@@ -3,7 +3,8 @@ import { Knob } from '../components/Knob';
 import { Arc } from '../primitives/Arc';
 import { Pointer } from '../primitives/Pointer';
 import { KnobLabel, KnobValue } from '../primitives/Text';
-import { MONO_FONT, UI_FONT, type SkinProps } from './shared';
+import { useKnobTheme } from '../core/theme';
+import type { SkinProps } from './shared';
 
 export interface NeonKnobProps extends SkinProps {
   color?: string;
@@ -16,23 +17,26 @@ export interface NeonKnobProps extends SkinProps {
 /** Minimal glowing arc knob — futuristic / dark-mode DAW style. */
 export const NeonKnob: React.FC<NeonKnobProps> = ({
   size = 84,
-  color = '#e44cff',
+  color: colorProp,
   trackColor = 'rgba(255,255,255,0.06)',
   textColor,
-  labelColor = 'rgba(255,255,255,0.4)',
+  labelColor,
   arcFrom = 'min',
   label,
   showValue = true,
   unit,
   format,
+  focusRing,
   className,
   style,
   ...core
 }) => {
+  const theme = useKnobTheme();
+  const color = colorProp ?? theme.accent ?? '#e44cff';
   const id = React.useId();
   const glowId = `${id}-glow`;
   return (
-    <Knob size={size} className={className} style={style} {...core}>
+    <Knob size={size} className={className} style={style} focusRing={focusRing} {...core}>
       <defs>
         <filter
           id={glowId}
@@ -72,12 +76,17 @@ export const NeonKnob: React.FC<NeonKnobProps> = ({
           unit={unit}
           format={format}
           fontSize={size * 0.17}
-          fontFamily={MONO_FONT}
+          fontFamily={theme.fontMono}
           textProps={{ filter: `url(#${glowId})` }}
         />
       )}
       {label && (
-        <KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.45} fontSize={size * 0.1}>
+        <KnobLabel
+          color={labelColor ?? theme.label}
+          fontFamily={theme.fontUI}
+          dy={size * 0.45}
+          fontSize={size * 0.1}
+        >
           {label}
         </KnobLabel>
       )}

packages/dreamknob/src/skins/RubberKnob.tsx

@@ -4,7 +4,8 @@ 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';
+import { useKnobTheme } from '../core/theme';
+import type { SkinProps } from './shared';
 
 export interface RubberKnobProps extends SkinProps {
   /** Glow/accent color. */
@@ -18,19 +19,22 @@ export interface RubberKnobProps extends SkinProps {
 /** Soft-touch rubber knob with a glowing halo — modern synth hardware. */
 export const RubberKnob: React.FC<RubberKnobProps> = ({
   size = 90,
-  color = '#ff9640',
+  color: colorProp,
-  trackColor = 'rgba(255,255,255,0.08)',
+  trackColor,
-  textColor = 'rgba(255,255,255,0.92)',
+  textColor,
-  labelColor = 'rgba(255,255,255,0.45)',
+  labelColor,
   arcFrom = 'min',
   label,
   showValue = false,
   unit,
   format,
+  focusRing,
   className,
   style,
   ...core
 }) => {
+  const theme = useKnobTheme();
+  const color = colorProp ?? theme.accent ?? '#ff9640';
   const id = React.useId();
   const bodyId = `${id}-body`;
   const glowId = `${id}-glow`;
@@ -38,7 +42,7 @@ export const RubberKnob: React.FC<RubberKnobProps> = ({
   const bodyR = size / 2 - size * 0.17;
 
   return (
-    <Knob size={size} className={className} style={style} {...core}>
+    <Knob 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" />
@@ -52,7 +56,7 @@ export const RubberKnob: React.FC<RubberKnobProps> = ({
         radius={size / 2 - size * 0.05}
         thickness={Math.max(3, size * 0.045)}
         color={color}
-        trackColor={trackColor}
+        trackColor={trackColor ?? theme.track}
         from={arcFrom}
         arcProps={{ filter: `url(#${glowId})` }}
       />
@@ -86,16 +90,21 @@ export const RubberKnob: React.FC<RubberKnobProps> = ({
       />
       {showValue && (
         <KnobValue
-          color={textColor}
+          color={textColor ?? theme.text}
           unit={unit}
           format={format}
           fontSize={size * 0.15}
-          fontFamily={MONO_FONT}
+          fontFamily={theme.fontMono}
           dy={size * 0.02}
         />
       )}
       {label && (
-        <KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.44} fontSize={size * 0.1}>
+        <KnobLabel
+          color={labelColor ?? theme.label}
+          fontFamily={theme.fontUI}
+          dy={size * 0.44}
+          fontSize={size * 0.1}
+        >
           {label}
         </KnobLabel>
       )}

packages/dreamknob/src/skins/SteppedKnob.tsx

@@ -3,7 +3,8 @@ import { Knob } from '../components/Knob';
 import { Pointer } from '../primitives/Pointer';
 import { Ticks } from '../primitives/Ticks';
 import { KnobLabel } from '../primitives/Text';
-import { MONO_FONT, UI_FONT, type SkinProps } from './shared';
+import { useKnobTheme } from '../core/theme';
+import type { SkinProps } from './shared';
 
 export interface SteppedKnobProps extends SkinProps {
   /** Position names, e.g. ['LP','BP','HP']. Sets the number of detents. */
@@ -22,23 +23,35 @@ export const SteppedKnob: React.FC<SteppedKnobProps> = ({
   size = 90,
   positions,
   steps,
-  color = '#ffd23e',
+  color: colorProp,
-  tickColor = 'rgba(255,255,255,0.18)',
+  tickColor,
   faceColor = '#1c1d22',
-  textColor = 'rgba(255,255,255,0.92)',
+  textColor,
-  labelColor = 'rgba(255,255,255,0.45)',
+  labelColor,
   label,
   showValue = true,
+  focusRing,
   className,
   style,
   ...core
 }) => {
+  const theme = useKnobTheme();
+  const color = colorProp ?? theme.accent ?? '#ffd23e';
   const detents = positions ? positions.length : steps ?? 5;
   const min = core.min ?? 0;
   const max = core.max ?? (positions ? positions.length - 1 : 100);
 
   return (
-    <Knob size={size} className={className} style={style} {...core} min={min} max={max} steps={detents}>
+    <Knob
+      size={size}
+      className={className}
+      style={style}
+      focusRing={focusRing}
+      {...core}
+      min={min}
+      max={max}
+      steps={detents}
+    >
       {ctx => {
         const index = Math.round(ctx.normalized * (detents - 1));
         return (
@@ -48,7 +61,7 @@ export const SteppedKnob: React.FC<SteppedKnobProps> = ({
               radius={size / 2 - 1}
               length={size * 0.07}
               width={Math.max(1.5, size * 0.022)}
-              color={tickColor}
+              color={tickColor ?? theme.ticks}
               getTickProps={i => (i === index ? { stroke: color } : undefined)}
             />
             <circle
@@ -73,8 +86,8 @@ export const SteppedKnob: React.FC<SteppedKnobProps> = ({
                 textAnchor="middle"
                 dominantBaseline="central"
                 fontSize={size * (positions ? 0.15 : 0.17)}
-                fill={textColor}
+                fill={textColor ?? theme.text}
-                fontFamily={MONO_FONT}
+                fontFamily={theme.fontMono}
                 fontWeight={600}
                 style={{ pointerEvents: 'none' }}
               >
@@ -82,7 +95,12 @@ export const SteppedKnob: React.FC<SteppedKnobProps> = ({
               </text>
             )}
             {label && (
-              <KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.45} fontSize={size * 0.095}>
+              <KnobLabel
+                color={labelColor ?? theme.label}
+                fontFamily={theme.fontUI}
+                dy={size * 0.45}
+                fontSize={size * 0.095}
+              >
                 {label}
               </KnobLabel>
             )}

packages/dreamknob/src/skins/VintageKnob.tsx

@@ -5,7 +5,8 @@ import { TickLabels } from '../primitives/TickLabels';
 import { KnobLabel } from '../primitives/Text';
 import { polarToCartesian } from '../core/math';
 import { useKnobContext } from '../core/context';
-import { UI_FONT, type SkinProps } from './shared';
+import { useKnobTheme } from '../core/theme';
+import type { SkinProps } from './shared';
 
 /** VintageKnob has no numeric readout, so it doesn't accept readout props. */
 export interface VintageKnobProps extends Omit<SkinProps, 'showValue' | 'unit' | 'format'> {
@@ -96,26 +97,30 @@ const ChickenHead: React.FC<{ bodyColor: string; indicatorColor: string }> = ({
 export const VintageKnob: React.FC<VintageKnobProps> = ({
   size = 96,
   bodyColor = '#efe6d0',
-  scaleColor = 'rgba(255,255,255,0.35)',
+  scaleColor,
   color,
-  labelColor = 'rgba(255,255,255,0.45)',
+  labelColor,
   scaleLabels,
   indicatorColor,
   label,
+  focusRing,
   className,
   style,
   ...core
-}) => (
+}) => {
-  <Knob size={size} className={className} style={style} {...core}>
+  const theme = useKnobTheme();
+  const scale = scaleColor ?? theme.ticks;
+  return (
+    <Knob size={size} className={className} style={style} focusRing={focusRing} {...core}>
       <Ticks
         count={11}
         radius={size / 2 - size * (scaleLabels ? 0.1 : 0.04)}
         length={size * 0.055}
         width={Math.max(1.2, size * 0.016)}
-      color={scaleColor}
+        color={scale}
-      activeColor={color ?? scaleColor}
+        activeColor={color ?? scale}
       />
-    {scaleLabels && <TickLabels labels={scaleLabels} color={scaleColor} fontFamily={UI_FONT} />}
+      {scaleLabels && <TickLabels labels={scaleLabels} color={scale} fontFamily={theme.fontUI} />}
       <ChickenHead
         bodyColor={bodyColor}
         indicatorColor={
@@ -123,9 +128,15 @@ export const VintageKnob: React.FC<VintageKnobProps> = ({
         }
       />
       {label && (
-      <KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.46} fontSize={size * 0.095}>
+        <KnobLabel
+          color={labelColor ?? theme.label}
+          fontFamily={theme.fontUI}
+          dy={size * 0.46}
+          fontSize={size * 0.095}
+        >
           {label}
         </KnobLabel>
       )}
     </Knob>
   );
+};

packages/dreamknob/src/skins/shared.ts

@@ -1,6 +1,8 @@
 import type * as React from 'react';
 import type { KnobCoreProps } from '../core/types';
 
+export { MONO_FONT, UI_FONT } from '../core/theme';
+
 /** Props common to every prebuilt knob skin. */
 export interface SkinProps extends KnobCoreProps {
   /** Square canvas size in px. */
@@ -13,11 +15,15 @@ export interface SkinProps extends KnobCoreProps {
   unit?: string;
   /** Custom readout formatter (takes precedence over unit/decimals). */
   format?: (value: number) => string;
+  /** Keyboard focus ring color, or false to disable. Defaults to the theme's. */
+  focusRing?: string | false;
+  /**
+   * Type-in editing: double-click (knobs) or click the readout (faders) to
+   * enter an exact value. Enter/blur commits, Escape cancels, "1.2k" works.
+   */
+  editable?: boolean;
+  /** Custom parser for typed input when `editable` is set. */
+  parseValue?: (text: string) => number | null;
   className?: string;
   style?: React.CSSProperties;
 }
-
-export const MONO_FONT =
-  "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
-export const UI_FONT =
-  "'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif";