chore: update demo page and docs

README.md

@@ -1,58 +1,118 @@
-# create-svelte
+# svelte-knobs
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+![Version](https://img.shields.io/npm/v/svelte-knobs)
+![License](https://img.shields.io/badge/license-MIT-lightgrey)
 
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+`svelte-knobs` is a Svelte component library for building customizable knob controls.
 
-## Creating a project
+Inspired by:
 
-If you're seeing this, you've probably already done this step. Congrats!
+- [solid-knobs](https://github.com/tahti-studio/solid-knobs)
+- [nih-plug](https://github.com/robbert-vdh/nih-plug)
+
+[Web demo](https://eye-wave.github.io/svelte-knobs)
+
+## Installation
+
+Add the library to your project:
 
 ```bash
-# create a new project in the current directory
-npm create svelte@latest
+npm install svelte-knobs
+```
+
+## Usage
+
+Import the `Knob` component and use it in your Svelte application:
+
+```svelte
+<script>
+	import { Knob } from 'svelte-knobs';
+	let volume = 50;
+</script>
 
-# create a new project in my-app
-npm create svelte@latest my-app
+<Knob bind:value={volume} label="Volume" unit="%" />
 ```
 
-## Developing
+### Examples
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+#### Basic Knob
 
-```bash
-npm run dev
+```typescript
+import { createFloatParam, createRange } from 'svelte-knobs';
+
+const basicParam = createFloatParam(createRange('lin', 0, 100));
+let basicValue = 0;
+```
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+```svelte
+<Knob param={basicParam} bind:value={basicValue} label="Volume" unit="%" />
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+A basic knob control with linear scaling.
 
-## Building
+#### Logarithmic Knob
 
-To build your library:
+```typescript
+import { createFloatParam, createRange } from 'svelte-knobs';
 
-```bash
-npm run package
+const logParam = createFloatParam(createRange('log', 20, 20_000));
+let logValue = 20;
 ```
 
-To create a production version of your showcase app:
+```svelte
+<Knob param={logParam} bind:value={logValue} label="Frequency" unit="Hz" />
+```
 
-```bash
-npm run build
+Knob with logarithmic scaling (default base is 10).
+
+#### Smoothness Control
+
+Control the knob's smoothness by adjusting the `stiffness` property.
+
+```svelte
+<Knob param={smoothParam} bind:value={smoothValue} label="Amount" unit="%" stiffness={0.1} />
+<Knob param={smoothParam} bind:value={smoothValue} label="Amount" unit="%" stiffness={1} />
 ```
 
-You can preview the production build with `npm run preview`.
+#### Snap Points
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+Set specific snap points and adjust snapping sensitivity using `snapThreshold`.
 
-## Publishing
+```typescript
+import { createFloatParam, createRange } from 'svelte-knobs';
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+const snapParam = createFloatParam(createRange('lin', 0, 2000));
+const snapPoints = Array.from({ length: 5 }, (_, i) => i * 500);
 
-To publish your library to [npm](https://www.npmjs.com):
+let snapValue = 0;
+```
 
-```bash
-npm publish
+```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> = '🍉';
+```
+
+```svelte
+<Knob param={fruitParam} bind:value={fruitValue} label="Fruit" />
+```
+
+## License
+
+MIT License

src/routes/+page.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	// remove next
-	import './style.css';
 	// remove next
 	import CopyPaste from './CopyPaste.svelte';
 	import {
@@ -37,26 +35,38 @@
 		<h2>Basic</h2>
 		<Knob param={basicParam} bind:value={basicValue} label="Volume" unit="%" />
 
-		<p>Basic knob with linear param.</p>
+		<p>A basic knob with a linear parameter.</p>
 	</div>
 
 	<div class="example">
 		<h2>Logarithmic</h2>
 		<Knob param={logParam} bind:value={logValue} label="Frequency" unit="hz" />
+
+		<p>A knob with logarithmic scaling (default base is 10).</p>
 	</div>
 
 	<div class="example">
 		<h2>Smoothness</h2>
 
 		<h3>Smooth</h3>
-		<Knob param={smoothParam} bind:value={smoothValue} label="Ammount" unit="%" stiffness={0.1} />
+		<Knob param={smoothParam} bind:value={smoothValue} label="Amount" unit="%" stiffness={0.1} />
 
 		<h3>Stiff</h3>
-		<Knob param={smoothParam} bind:value={smoothValue} label="Ammount" unit="%" stiffness={1} />
+		<Knob param={smoothParam} bind:value={smoothValue} label="Amount" unit="%" stiffness={1} />
+
+		<p>
+			Knobs use <code>spring</code> function from <code>svelte/motion</code> under the hood,
+			allowing you to adjust smoothness by modifying the <code>stiffness</code> property on the
+			<code>{'<Knob />'}</code> component.
+		</p>
+		<p>
+			Additionally, due to how Svelte's binding works, you can use the same parameter and value for
+			multiple knobs simultaneously.
+		</p>
 	</div>
 
 	<div class="example">
-		<h2>Snap points</h2>
+		<h2>Snap Points</h2>
 		<Knob
 			param={snapParam}
 			bind:value={snapValue}
@@ -65,13 +75,30 @@
 			label="Release"
 			unit="ms"
 		/>
+
+		<p>
+			You can define specific points where the knob should snap and control the snapping strength by
+			adjusting the <code>snapThreshold</code> property.
+		</p>
+		<p><i>Note: This works only with </i><code>FloatParam</code><i> values.</i></p>
 	</div>
 
 	<div class="example">
-		<h2>Enum param</h2>
+		<h2>Enum Parameter</h2>
 		<Knob param={enumParam} bind:value={enumValue} label="Fruit" />
-		<Knob param={filterParam} bind:value={filterValue} label="Filter type" />
-		<Knob param={oscParam} bind:value={oscValue} label="Oscillator type" />
+		<Knob param={filterParam} bind:value={filterValue} label="Filter Type" />
+		<Knob param={oscParam} bind:value={oscValue} label="Oscillator Type" />
+
+		<p>
+			An example of how <code>EnumParam</code> works. Due to the way TypeScript functions, we need
+			to use <code>readonly string[]</code> instead of <code>Enum</code>s.
+		</p>
+		<p>
+			Remember to add <code>as const</code> when creating an <code>EnumParam</code> to improve editor
+			IntelliSense support.
+		</p>
+		<p>For instance:</p>
+		<code>const fruitParam = createEnumParam(['🍍', '🍉', '🍌', '🥝', '🍋'] as const);</code>
 	</div>
 </div>
 
@@ -81,6 +108,15 @@
 </div>
 
 <style>
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		min-height: 100vh;
+		background: #222;
+		color: #fff;
+		font-family: sans;
+	}
+
 	.grid {
 		padding: 2rem;
 		display: flex;
@@ -101,6 +137,10 @@
 		border-bottom: solid 2px #333;
 	}
 
+	.example > p {
+		text-align: center;
+	}
+
 	.example > h2 {
 		user-select: none;
 	}

svelte.config.js

@@ -2,7 +2,7 @@ import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { createHighlighter } from 'shiki';
 
-const theme = 'catppuccin-macchiato';
+const theme = 'poimandres';
 
 const highlighter = await createHighlighter({
 	langs: ['svelte'],