chore: update docs

Author: eye-wave

README.md

@@ -26,87 +26,100 @@ npm install svelte-knobs
 #### Basic Knob
 
 ```svelte
-<script lang="ts">
-	import { createFloatParam, Knob } from 'svelte-knobs';
+<script>
+	import { SvgKnob } from 'svelte-knobs';
 
-	const basicParam = createFloatParam('lin', 0, 100);
-	let basicValue = 0;
+	let value = $state(0.0);
 </script>
 
-<Knob param={basicParam} bind:value={basicValue} label="Volume" unit="%" />
+<SvgKnob bind:value />
+<span>{value.toFixed(2)}</span>
 ```
 
-A basic knob control with linear scaling.
-
-#### Logarithmic Knob
-
+A basic knob control with parameter scaling.
 ```svelte
 <script lang="ts">
-	import { createFloatParam } from 'svelte-knobs';
-
-	const logParam = createFloatParam('log', 20, 20_000);
-	let logValue = 20;
-</script>
+	import { LinearParam, LogParam } from 'svelte-knobs/params';
+	import { SvgKnob } from 'svelte-knobs';
 
-<Knob param={logParam} bind:value={logValue} label="Frequency" unit="Hz" />
-```
-
-Knob with logarithmic scaling (default base is 10).
+	let value = $state(0.0);
 
-#### Smoothness Control
+	const freqParam = new LogParam(20, 20_000, 10);
+	const linParam = new LinearParam(0, 100);
+</script>
 
-Control the knob's smoothness by adjusting the `stiffness` property.
+<SvgKnob bind:value />
+<span>{freqParam.denormalize(value) | 0}hz</span>
 
-```svelte
-<Knob param={smoothParam} bind:value={smoothValue} label="Amount" unit="%" stiffness={0.1} />
-<Knob param={smoothParam} bind:value={smoothValue} label="Amount" unit="%" stiffness={1} />
+<SvgKnob bind:value />
+<span>{linParam.denormalize(value) | 0}%</span>
 ```
 
 #### Snap Points
 
 Set specific snap points and adjust snapping sensitivity using `snapThreshold`.
 
-```typescript
-import { createFloatParam, createRange } from 'svelte-knobs';
+```svelte
+<script>
+	import { SvgKnob } from 'svelte-knobs';
 
-const snapParam = createFloatParam('lin', 0, 2000);
-const snapPoints = [0, 500, 1000, 1500, 2000];
+	let value = $state(0.0);
+</script>
 
-let snapValue = 0;
-```
+<div>
+	<SvgKnob bind:value snapPoints={[0.5]} />
+	<span>{value.toFixed(2)}</span>
+</div>
 
-```svelte
-<Knob
-	param={snapParam}
-	bind:value={snapValue}
-	snapValues={snapPoints}
-	snapThreshold={0.1}
-	label="Release"
-	unit="ms"
-/>
 ```
 
 #### Enum Parameter
 
 Example usage of `EnumParam` for working with enumerated options.
 
 ```typescript
-import { createEnumParam, type Variant } from 'svelte-knobs';
-
-const fruitParam = createEnumParam(['🍍', '🍉', '🍌', '🍋'] as const);
-let fruitValue: Variant<typeof fruitParam> = '🍉';
+import { BoolParam, EnumParam } from 'svelte-knobs/params';
+import { SvgKnob } from 'svelte-knobs';
+
+let value = $state(0);
+
+const fruitParam = new EnumParam(['🍍', '🍉', '🍌', '🍋', '🍇'] as const);
+const filterTypeParam = new EnumParam([
+  'Low pass',
+  'High pass',
+  'Low shelf',
+  'High shelf',
+  'Bell',
+  'Notch',
+  'Allpass'
+] as const);
+
+const booleanParam = new BoolParam();
 ```
 
 ```svelte
-<Knob param={fruitParam} bind:value={fruitValue} label="Fruit" />
+<SvgKnob
+	bind:value
+	snapPoints={fruitParam.snapPoints}
+	snapThreshold={fruitParam.snapThreshold}
+/>
+<p>{fruitParam.denormalize(value)}</p>
+
+<SvgKnob bind:value {...filterTypeParam.knobProps} />
+<p>{filterTypeParam.denormalize(value)}</p>
+
+<SvgKnob bind:value {...booleanParam.knobProps} />
+<p>{booleanParam.denormalize(value)}</p>
 ```
 
 #### Disabled Knob
 
 Disable knob interactivity
 
 ```svelte
-<Knob param={basicParam} value={58} disabled />
+<SvgKnob disabled />
+<ImageKnob disabled />
+<Draggable disabled />
 ```
 
 ## License

src/routes/examples/EnumParam.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { BoolParam, EnumParam } from '$lib/params';
-	import SvgKnob from '$lib/SvgKnob.svelte';
+	import { SvgKnob } from '$lib';
 
 	let value = $state(0);
 
@@ -22,7 +22,6 @@
 	bind:value
 	snapPoints={fruitParam.snapPoints}
 	snapThreshold={fruitParam.snapThreshold}
-	step={fruitParam.step}
 />
 <p>{fruitParam.denormalize(value)}</p>
 

src/routes/examples/ParamKnob.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { LinearParam, LogParam } from '$lib/params';
-	import SvgKnob from '$lib/SvgKnob.svelte';
+	import { SvgKnob } from '$lib';
 
 	let value = $state(0.0);