From e55f4c2fe8a6e1d62a0b005777b46c80e360d37e Mon Sep 17 00:00:00 2001
From: memdmp <memdmp@estrogen.zone>
Date: Thu, 31 Jul 2025 22:48:01 +0200
Subject: feat: initial commit

---
 src/lib/Player/FrameSlider.svelte                  |   67 ++
 src/lib/Player/Keybinds.svelte                     |   47 +
 src/lib/Player/Player.svelte                       |  161 +++
 src/lib/Player/Video.ts                            |   55 ++
 src/lib/Renderer/Renderer.svelte                   |  146 +++
 src/lib/assets/favicon.svg                         |    1 +
 src/lib/index.ts                                   |    1 +
 src/lib/vendor/svelte-range-slider/README          |    1 +
 .../vendor/svelte-range-slider/range-pips.svelte   |  303 ++++++
 .../vendor/svelte-range-slider/range-slider.svelte | 1026 ++++++++++++++++++++
 10 files changed, 1808 insertions(+)
 create mode 100644 src/lib/Player/FrameSlider.svelte
 create mode 100644 src/lib/Player/Keybinds.svelte
 create mode 100644 src/lib/Player/Player.svelte
 create mode 100644 src/lib/Player/Video.ts
 create mode 100644 src/lib/Renderer/Renderer.svelte
 create mode 100644 src/lib/assets/favicon.svg
 create mode 100644 src/lib/index.ts
 create mode 100644 src/lib/vendor/svelte-range-slider/README
 create mode 100644 src/lib/vendor/svelte-range-slider/range-pips.svelte
 create mode 100644 src/lib/vendor/svelte-range-slider/range-slider.svelte

(limited to 'src/lib')

diff --git a/src/lib/Player/FrameSlider.svelte b/src/lib/Player/FrameSlider.svelte
new file mode 100644
index 0000000..a632aa9
--- /dev/null
+++ b/src/lib/Player/FrameSlider.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import RangeSlider from '../vendor/svelte-range-slider/range-slider.svelte';
+	let {
+		frame = $bindable(),
+		frameCount,
+		playing = $bindable(),
+		playbackStarted = $bindable()
+	}: {
+		frame: number;
+		frameCount: number;
+		playing: boolean;
+		playbackStarted: number;
+	} = $props();
+</script>
+
+<div class="w-full flex items-center justify-center pt-2">
+	<div class="p-2 pr-1">
+		<button
+			onclick={() => {
+				playing = !playing;
+			}}
+			aria-label={playing ? 'pause' : 'play'}
+			class="flex items-center justify-center"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="size-6"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d={!playing
+						? 'M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z'
+						: 'M15.75 5.25v13.5m-7.5-13.5v13.5'}
+				/>
+			</svg></button
+		>
+	</div>
+	<div class="flex-1">
+		<RangeSlider bind:value={frame} min={0} max={frameCount} />
+	</div>
+	<div class="label p-2 pl-1">
+		<input
+			type="number"
+			bind:value={frame}
+			class="w-16 appearance-none text-right"
+			style="-moz-appearance:textfield;"
+			max={frameCount}
+			onkeypress={(e) => {
+				e.stopPropagation();
+			}}
+			onkeydown={(e) => {
+				e.stopPropagation();
+			}}
+		/>
+		of {frameCount}
+		<!-- <input
+			type="number"
+			bind:value={frameCount}
+			class="w-8 appearance-none"
+			style="-moz-appearance:textfield;"
+		/> -->
+	</div>
+</div>
diff --git a/src/lib/Player/Keybinds.svelte b/src/lib/Player/Keybinds.svelte
new file mode 100644
index 0000000..756a865
--- /dev/null
+++ b/src/lib/Player/Keybinds.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	let {
+		frame = $bindable(),
+		frameCount,
+		fps,
+		playing = $bindable(),
+		playbackStarted = $bindable()
+	}: {
+		frame: number;
+		frameCount: number;
+		fps: number | undefined;
+		playing: boolean;
+		playbackStarted: number;
+	} = $props();
+</script>
+
+<svelte:window
+	onkeypress={(e) => {
+		switch (e.key) {
+			case ' ':
+				e.preventDefault();
+				playing = !playing;
+				if (playing) playbackStarted = performance.now();
+				break;
+
+			// default:
+			// 	if (dev) console.debug('Keypress:', e.key);
+			// 	break;
+		}
+	}}
+	onkeydown={(e) => {
+		switch (e.key) {
+			case 'ArrowLeft':
+				e.preventDefault();
+				frame = Math.max(frame - (e.ctrlKey ? (fps ?? 60) : 1), 0);
+				break;
+			case 'ArrowRight':
+				e.preventDefault();
+				frame = Math.min(frame + (e.ctrlKey ? (fps ?? 60) : 1), frameCount);
+				break;
+
+			// default:
+			// 	if (dev) console.debug('Keydown:', e.key);
+			// 	break;
+		}
+	}}
+/>
diff --git a/src/lib/Player/Player.svelte b/src/lib/Player/Player.svelte
new file mode 100644
index 0000000..f6df121
--- /dev/null
+++ b/src/lib/Player/Player.svelte
@@ -0,0 +1,161 @@
+<script lang="ts">
+	import FrameSlider from './FrameSlider.svelte';
+	import { type Video, type VideoConstructor } from '$/lib/Player/Video';
+	import Keybinds from './Keybinds.svelte';
+	import { onMount } from 'svelte';
+
+	let frame = $state(0);
+	let canvas = $state(null as HTMLCanvasElement | null);
+	let audio = $state(null as HTMLAudioElement | null);
+	let lastCanvas = null as typeof canvas;
+	let video = $state(undefined as Video | undefined);
+	let frameCount = $state(0);
+	let playing = $state(false);
+	let playbackStarted = $state(0);
+	let playbackFrameOffset = 0;
+	let renderPromise: Promise<void> | void = void 0;
+	let renderId = 0;
+	let audioSource = $state(null as null | string);
+	let {
+		Video: VideoImplementation
+	}: {
+		Video: VideoConstructor;
+	} = $props();
+	const newCanvas = async (canvas: HTMLCanvasElement, videoImplementation: VideoConstructor) => {
+		if (video) video.cleanup();
+		lastCanvas = canvas;
+		video = new VideoImplementation(canvas);
+		const audioSourcePromise = (async () => {
+			if (video?.audioUrl?.[1]) {
+				audioSource = await fetch(video.audioUrl[1])
+					.then(async (v) => {
+						if (v.status.toString().startsWith('2')) return URL.createObjectURL(await v.blob());
+						else throw new Error('non-2xx audio');
+					})
+					.catch((e) => {
+						console.warn('Failed to get audio', e);
+						return video?.audioUrl?.[1] ?? null;
+					});
+			}
+		})();
+		video['_isInit'] = true;
+		renderPromise = video.init();
+		await renderPromise;
+		video['_isInit'] = false;
+		frameCount = video.length;
+		await audioSourcePromise;
+	};
+	const renderPreviewFrame = async (video: Video, frame: number) => {
+		const ourId = ++renderId;
+		if (renderPromise) await renderPromise;
+		if (renderId !== ourId) return;
+		renderPromise =
+			video.renderFrame({
+				frames: frame,
+				milliseconds: (frame / video.fps) * 1000,
+				seconds: frame / video.fps
+			}) ?? Promise.resolve();
+		return renderPromise;
+	};
+	$effect(() => {
+		if (canvas && canvas !== lastCanvas) newCanvas(canvas, VideoImplementation);
+	});
+	$effect(() => {
+		if (video) renderPreviewFrame(video, frame);
+	});
+	let playbackLoopId = 0;
+	const startPlaybackLoop = (id = ++playbackLoopId) => {
+		if (video && id === playbackLoopId) {
+			const ms = performance.now() - playbackStarted;
+			let f = Math.floor((ms / 1000) * video.fps) + playbackFrameOffset;
+
+			if (f > frameCount) {
+				f = frameCount;
+				playing = false;
+			}
+			frame = f;
+			renderPreviewFrame(video, frame).then(() =>
+				requestAnimationFrame(() => (playing ? startPlaybackLoop(id) : void 0))
+			);
+		}
+	};
+	$effect(() => {
+		if (playing) {
+			playbackStarted = performance.now();
+			playbackFrameOffset = frame;
+			startPlaybackLoop();
+		}
+	});
+	let loadedFrameTimestamp = false;
+	onMount(() => {
+		const t = sessionStorage.getItem('timestamp');
+		const tI = t ? parseInt(t, 36) : null;
+		if (tI && !isNaN(tI)) {
+			frame = tI;
+			requestAnimationFrame(() => (frame = tI));
+		}
+		loadedFrameTimestamp = true;
+	});
+	// TODO: implement waitin a few seconds before saving
+	$effect(() => {
+		if (loadedFrameTimestamp)
+			try {
+				sessionStorage.setItem('timestamp', frame.toString(36));
+			} catch (_) {}
+	});
+	$effect(() => {
+		if (audio && video && !playing) {
+			try {
+				const f = frame;
+				audio.currentTime = frame / video.fps;
+				audio.play();
+				(async () => {
+					const targetTime = (frame + 1) / video.fps;
+					while (audio.currentTime <= targetTime) {
+						await new Promise((rs) => requestAnimationFrame(rs));
+						if (playing || frame !== f) return;
+					}
+					audio.pause();
+					audio.currentTime = frame / video.fps;
+				})();
+			} catch (error) {
+				console.warn(error);
+			}
+		}
+	});
+	$effect(() => {
+		if (audio) {
+			if (playing) audio.play();
+			else audio.pause();
+		}
+	});
+</script>
+
+<svelte:window
+	onresize={() => {
+		if (canvas && video) {
+			(async () => {
+				video['_isInit'] = true;
+				renderPromise = await video.init();
+				video['_isInit'] = false;
+				renderPreviewFrame(video, frame);
+			})();
+		}
+	}}
+/>
+
+<Keybinds bind:frame {frameCount} fps={video?.fps} bind:playing bind:playbackStarted />
+
+<div class="p-2 w-screen h-screen relative flex flex-col">
+	<div class="flex-1 relative">
+		<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+			<canvas class="pointer-events-none bg-black" bind:this={canvas}>
+				Your browser doesn't support the canvas API.
+			</canvas>
+			{#if audioSource}
+				<audio src={audioSource} bind:this={audio}></audio>
+			{/if}
+		</div>
+	</div>
+	<FrameSlider bind:frame {frameCount} bind:playing bind:playbackStarted />
+</div>
diff --git a/src/lib/Player/Video.ts b/src/lib/Player/Video.ts
new file mode 100644
index 0000000..78b3b8f
--- /dev/null
+++ b/src/lib/Player/Video.ts
@@ -0,0 +1,55 @@
+export type FrameTime = {
+  milliseconds: number,
+  seconds: number,
+  frames: number
+}
+export abstract class Video {
+  public constructor(public canvas: HTMLCanvasElement) { };
+  public abstract renderFrame(time: FrameTime): Promise<void> | void;
+  /** (re-)Initializes the Video object. Also called on window resizes. */
+  public abstract init(): void | Promise<void>;
+  private _isInit = false;
+  /** The frames per second to render at */
+  public abstract get fps(): number;
+  /** Length in frames */
+  public abstract get length(): number;
+  /** A URL (and matching filename) to an ffmpeg-compatible audio file */
+  public audioUrl?: readonly [filename: string, fileUrl: string];
+  /** Resizes the canvas to a predetermined render resolution - must only be called in init() - do not overwrite */
+  public resize(x: number, y: number) {
+    if (!this._isInit) throw new Error('Must only call resize() in init.')
+    this.canvas.width = x;
+    this.canvas.height = y;
+    const parentW = this.canvas.parentElement!.clientWidth,
+      parentH = this.canvas.parentElement!.clientHeight
+    if (x <= parentW && y <= parentH) {
+      this.canvas.style.width = `${x}px`;
+      this.canvas.style.height = `${y}px`;
+    } else if (x <= parentW && y > parentH) {
+      this.canvas.style.width = `${x / y * parentH}px`;
+      this.canvas.style.height = `${parentH}px`;
+    } else if (y <= parentH && x > parentW) {
+      this.canvas.style.width = `${parentW}px`;
+      this.canvas.style.height = `${y / x * parentW}px`;
+    } else {
+      if ((parentW / x) * y > parentH) {
+        this.canvas.style.width = `${(parentH / y) * x}px`
+        this.canvas.style.height = `${parentH}px`
+      } else {
+        this.canvas.style.width = `${parentW}px`
+        this.canvas.style.height = `${(parentW / x) * y}px`
+      }
+    }
+  }
+  /** The width of the video, in pixels */
+  public get w() {
+    return this.canvas.width;
+  }
+  /** The height of the video, in pixels */
+  public get h() {
+    return this.canvas.height;
+  }
+  /** Use to cleanup any mess you made - do not remove the canvas, it may be reused. */
+  public cleanup() { };
+}
+export type VideoConstructor = new (...params: ConstructorParameters<typeof Video>) => Video
diff --git a/src/lib/Renderer/Renderer.svelte b/src/lib/Renderer/Renderer.svelte
new file mode 100644
index 0000000..72c270b
--- /dev/null
+++ b/src/lib/Renderer/Renderer.svelte
@@ -0,0 +1,146 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import type { VideoConstructor } from '../Player/Video';
+	import { FFmpeg, type LogEvent } from '@ffmpeg/ffmpeg';
+	import { fetchFile, toBlobURL } from '@ffmpeg/util';
+
+	let {
+		Video: VideoImplementation
+	}: {
+		Video: VideoConstructor;
+	} = $props();
+	let canvas = $state(null as null | HTMLCanvasElement);
+
+	let frame = $state(0);
+	let frameCount = $state(0);
+	let active = false;
+
+	let lastAnimationFrame = 0;
+	let startedAt = 0;
+	let message = $state('Waiting');
+	let videoUrl = $state(null as null | string);
+
+	const ffmpegBaseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm';
+
+	const start = async (format = 'mp4') => {
+		active = true;
+		startedAt = performance.now();
+
+		const ffmpeg = new FFmpeg();
+		message = 'Loading ffmpeg-core.js';
+		ffmpeg.on('log', ({ message: msg }: LogEvent) => {
+			message = msg;
+			console.log(message);
+		});
+		await ffmpeg.load({
+			coreURL: await toBlobURL(`${ffmpegBaseURL}/ffmpeg-core.js`, 'text/javascript'),
+			wasmURL: await toBlobURL(`${ffmpegBaseURL}/ffmpeg-core.wasm`, 'application/wasm'),
+			workerURL: await toBlobURL(`${ffmpegBaseURL}/ffmpeg-core.worker.js`, 'text/javascript')
+		});
+
+		message = 'Making directory';
+		await ffmpeg.createDir('frames');
+		message = 'Preparing Canvas';
+		const c = canvas!;
+		const video = new VideoImplementation(c);
+		video['_isInit'] = true;
+		await video.init();
+		video['_isInit'] = false;
+		frameCount = video.length;
+		message = 'Rendering first few frames...';
+		for (frame = 0; frame <= frameCount; frame++) {
+			if (!active) return;
+			await video.renderFrame({
+				frames: frame,
+				milliseconds: (frame / video.fps) * 1000,
+				seconds: frame / video.fps
+			});
+			// TODO: see if we can pipe this into an active ffmpeg instead of writing a file then running a command after
+			const file = await fetchFile(c.toDataURL());
+			await ffmpeg.writeFile('frames/f' + frame.toString().padStart(10, '0') + '.png', file);
+			if (performance.now() > lastAnimationFrame + 33) {
+				await new Promise((rs) => requestAnimationFrame(rs));
+				lastAnimationFrame = performance.now();
+				message = `Rendering to pngs - ${frame}/${frameCount} frames | running for ${(
+					Math.floor(lastAnimationFrame - startedAt) / 1000
+				).toFixed(3)} seconds`;
+			}
+		}
+
+		message = 'Start transcoding';
+		await ffmpeg.exec([
+			'-framerate',
+			video.fps.toString(),
+			'-pattern_type',
+			'sequence',
+			'-start_number',
+			'0',
+			'-pattern_type',
+			'glob',
+			'-i',
+			'frames/f*.png',
+			// 'frames/f%04d.png',
+			'middle.' + format
+		]);
+		message = 'Disposing pngs';
+		for (const i of await ffmpeg.listDir('frames'))
+			if (!i.isDir) await ffmpeg.deleteFile('frames/' + i.name);
+		await ffmpeg.deleteDir('frames/');
+		if (video.audioUrl) {
+			message = 'Fetching Audio';
+			await ffmpeg.writeFile('audio.' + video.audioUrl[0], await fetchFile(video.audioUrl[1]));
+			message = 'Merging Audio';
+			await ffmpeg.exec([
+				'-i',
+				'middle.' + format,
+				'-r',
+				video.fps.toString(),
+				'-i',
+				'audio.' + video.audioUrl[0],
+				'-c:v',
+				'copy',
+				'-map',
+				'0:v:0',
+				'-map',
+				'1:a:0',
+				'-frames:v',
+				video.length.toString(),
+				'output.' + format
+			]);
+			message = 'Removing videoless file';
+			await ffmpeg.deleteFile('middle.' + format);
+		} else await ffmpeg.rename('middle.' + format, 'output.' + format);
+		message = 'Reading File';
+		const data = await ffmpeg.readFile('output.' + format);
+		console.log('done');
+		videoUrl = URL.createObjectURL(
+			// @ts-ignore bufferlike is good enuf
+			new Blob([(data as Uint8Array).buffer], { type: 'video/' + format })
+		);
+		message = 'Disposing ffmpeg state';
+		await ffmpeg.deleteFile('output.' + format);
+		location.href = videoUrl;
+	};
+	$effect(() => {
+		if (canvas && VideoImplementation) start();
+	});
+	onDestroy(() => (active = false));
+</script>
+
+<div class="flex flex-col h-screen w-screen">
+	{#if videoUrl}
+		<!-- svelte-ignore a11y_media_has_caption -->
+		<video src={videoUrl} controls class="max-w-screen max-h-screen flex-1"></video>
+	{:else}
+		<div class="flex-1 relative">
+			<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+				<canvas class="pointer-events-none bg-black" bind:this={canvas}>
+					Your browser doesn't support the canvas API.
+				</canvas>
+			</div>
+		</div>
+	{/if}
+	<p class="p-4">
+		{message}
+	</p>
+</div>
diff --git a/src/lib/assets/favicon.svg b/src/lib/assets/favicon.svg
new file mode 100644
index 0000000..cc5dc66
--- /dev/null
+++ b/src/lib/assets/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/src/lib/index.ts b/src/lib/index.ts
new file mode 100644
index 0000000..856f2b6
--- /dev/null
+++ b/src/lib/index.ts
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
diff --git a/src/lib/vendor/svelte-range-slider/README b/src/lib/vendor/svelte-range-slider/README
new file mode 100644
index 0000000..b17797b
--- /dev/null
+++ b/src/lib/vendor/svelte-range-slider/README
@@ -0,0 +1 @@
+https://github.com/roycrippen4/svelte-range-slider/tree/master
diff --git a/src/lib/vendor/svelte-range-slider/range-pips.svelte b/src/lib/vendor/svelte-range-slider/range-pips.svelte
new file mode 100644
index 0000000..418fc7e
--- /dev/null
+++ b/src/lib/vendor/svelte-range-slider/range-pips.svelte
@@ -0,0 +1,303 @@
+<script lang="ts" module>
+	export interface PipsProps {
+		min?: number;
+		max?: number;
+		step?: number;
+		values?: number[];
+		vertical?: boolean;
+		reversed?: boolean;
+		hoverable?: boolean;
+		disabled?: boolean;
+		pipstep?: number;
+		prefix?: string;
+		suffix?: string;
+		focus?: boolean;
+		range?: undefined | boolean | 'min' | 'max';
+		all?: undefined | boolean | 'pip' | 'label';
+		first?: boolean | 'pip' | 'label';
+		last?: boolean | 'pip' | 'label';
+		rest?: boolean | 'pip' | 'label';
+		percentOf: (v: number) => number;
+		fixFloat: (v: number) => number;
+		orientationStart?: 'top' | 'bottom' | 'left' | 'right';
+		orientationEnd?: 'top' | 'bottom' | 'left' | 'right';
+		formatter?: (v: number, i: number, p: number) => string;
+		moveHandle: undefined | ((index: number | undefined, value: number) => number);
+		normalisedClient: (e: MouseEvent | TouchEvent) => { x: number; y: number };
+	}
+</script>
+
+<script lang="ts">
+	let {
+		range = false,
+		min = 0,
+		max = 100,
+		step = 1,
+		values = [(max + min) / 2],
+		vertical = false,
+		reversed = false,
+		hoverable = true,
+		disabled = false,
+		pipstep,
+		all = true,
+		first,
+		last,
+		rest,
+		prefix = '',
+		suffix = '',
+		focus,
+		orientationStart,
+		// eslint-disable-next-line no-unused-vars
+		formatter = (v, i, p) => v.toString(),
+		percentOf,
+		moveHandle,
+		fixFloat,
+		normalisedClient
+	}: PipsProps = $props();
+
+	let clientStart = $state({ x: 0, y: 0 });
+	let pipStep = $derived(
+		pipstep ||
+			((max - min) / step >= (vertical ? 50 : 100) ? (max - min) / (vertical ? 10 : 20) : 1)
+	);
+	let pipCount = $derived(parseInt(((max - min) / (step * pipStep)).toString(), 10));
+	let pipVal = $derived((val: number) => fixFloat(min + val * step * pipStep));
+	let isSelected = $derived((val: number) => values.some((v) => fixFloat(v) === fixFloat(val)));
+	let inRange = $derived((val: number) => {
+		if (range === 'min') {
+			return values[0] > val;
+		}
+		if (range === 'max') {
+			return values[0] < val;
+		}
+		if (range) {
+			return values[0] < val && values[1] > val;
+		}
+	});
+
+	/**
+	 * function to run when the user clicks on a label
+	 * we store the original client position so we can check if the user has moved the mouse/finger
+	 * @param {MouseEvent} e the event from browser
+	 **/
+	const labelDown = (e: MouseEvent) => {
+		clientStart = { x: e.clientX, y: e.clientY };
+	};
+
+	/**
+	 * function to run when the user releases the mouse/finger
+	 * we check if the user has moved the mouse/finger, if not we "click" the label
+	 * and move the handle it to the label position
+	 * @param {number} val the value of the label
+	 * @param {MouseEvent|TouchEvent} e the event from browser
+	 */
+	function labelUp(val: number, e: MouseEvent | TouchEvent) {
+		if (disabled) {
+			return;
+		}
+
+		const clientPos = normalisedClient(e);
+		const distanceMoved = Math.sqrt(
+			Math.pow(clientStart.x - clientPos.x, 2) + Math.pow(clientStart.y - clientPos.y, 2)
+		);
+
+		if (clientStart && distanceMoved <= 5) {
+			moveHandle?.(undefined, val);
+		}
+	}
+</script>
+
+<div
+	class="rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6"
+	class:disabled
+	class:hoverable
+	class:vertical
+	class:reversed
+	class:focus
+>
+	{#if (all && first !== false) || first}
+		<span
+			class="pip-680f0f01-664b-43b5-9e1c-789449c63c62 first"
+			class:selected={isSelected(min)}
+			class:in-range={inRange(min)}
+			style="{orientationStart}: 0%;"
+			onpointerdown={labelDown}
+			onpointerup={(e) => labelUp(min, e)}
+		>
+			{#if all === 'label' || first === 'label'}
+				<span class="pipVal-c41e7185-de59-40a7-90f2-e3d98b1e844b">
+					{prefix}{formatter(fixFloat(min), 0, 0)}{suffix}
+				</span>
+			{/if}
+		</span>
+	{/if}
+
+	{#if (all && rest !== false) || rest}
+		<!-- eslint-disable-next-line no-unused-vars -->
+		{#each Array(pipCount + 1) as _, i}
+			{#if pipVal(i) !== min && pipVal(i) !== max}
+				<span
+					class="pip-680f0f01-664b-43b5-9e1c-789449c63c62"
+					class:selected={isSelected(pipVal(i))}
+					class:in-range={inRange(pipVal(i))}
+					style="{orientationStart}: {percentOf(pipVal(i))}%;"
+					onpointerdown={labelDown}
+					onpointerup={(e) => labelUp(pipVal(i), e)}
+				>
+					{#if all === 'label' || rest === 'label'}
+						<span class="pipVal-c41e7185-de59-40a7-90f2-e3d98b1e844b">
+							{prefix}{formatter(pipVal(i), i, percentOf(pipVal(i)))}{suffix}
+						</span>
+					{/if}
+				</span>
+			{/if}
+		{/each}
+	{/if}
+
+	{#if (all && last !== false) || last}
+		<span
+			class="pip last"
+			class:selected={isSelected(max)}
+			class:in-range={inRange(max)}
+			style="{orientationStart}: 100%;"
+			onpointerdown={labelDown}
+			onpointerup={(e) => labelUp(max, e)}
+		>
+			{#if all === 'label' || last === 'label'}
+				<span class="pipVal">
+					{prefix}{formatter(fixFloat(max), pipCount, 100)}{suffix}
+				</span>
+			{/if}
+		</span>
+	{/if}
+</div>
+
+<style>
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28) {
+		--pip: var(--range-pip, lightslategray);
+		--pip-text: var(--range-pip-text, var(--pip));
+		--pip-active: var(--range-pip-active, darkslategrey);
+		--pip-active-text: var(--range-pip-active-text, var(--pip-active));
+		--pip-hover: var(--range-pip-hover, darkslategrey);
+		--pip-hover-text: var(--range-pip-hover-text, var(--pip-hover));
+		--pip-in-range: var(--range-pip-in-range, var(--pip-active));
+		--pip-in-range-text: var(--range-pip-in-range-text, var(--pip-active-text));
+	}
+	:global(.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6) {
+		position: absolute;
+		height: 1em;
+		left: 0;
+		right: 0;
+		bottom: -1em;
+	}
+	:global(.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6.vertical) {
+		height: auto;
+		width: 1em;
+		left: 100%;
+		right: auto;
+		top: 0;
+		bottom: 0;
+	}
+	:global(
+		.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6 .pip-680f0f01-664b-43b5-9e1c-789449c63c62
+	) {
+		height: 0.4em;
+		position: absolute;
+		top: 0.25em;
+		width: 1px;
+		white-space: nowrap;
+	}
+	:global(
+		.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6.vertical
+			.pip-680f0f01-664b-43b5-9e1c-789449c63c62
+	) {
+		height: 1px;
+		width: 0.4em;
+		left: 0.25em;
+		top: auto;
+		bottom: auto;
+	}
+	:global(
+		.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6 .pipVal-c41e7185-de59-40a7-90f2-e3d98b1e844b
+	) {
+		position: absolute;
+		top: 0.4em;
+		transform: translate(-50%, 25%);
+	}
+	:global(
+		.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6.vertical
+			.pipVal-c41e7185-de59-40a7-90f2-e3d98b1e844b
+	) {
+		position: absolute;
+		top: 0;
+		left: 0.4em;
+		transform: translate(25%, -50%);
+	}
+	:global(
+		.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6 .pip-680f0f01-664b-43b5-9e1c-789449c63c62
+	) {
+		transition: all 0.15s ease;
+	}
+	:global(
+		.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6 .pipVal-c41e7185-de59-40a7-90f2-e3d98b1e844b
+	) {
+		transition:
+			all 0.15s ease,
+			font-weight 0s linear;
+	}
+	:global(
+		.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6 .pip-680f0f01-664b-43b5-9e1c-789449c63c62
+	) {
+		color: var(--pip-text, lightslategray);
+		background-color: var(--pip, lightslategray);
+	}
+	:global(.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6 .pip.selected) {
+		color: var(--pip-active-text, darkslategrey);
+		background-color: var(--pip-active, darkslategrey);
+	}
+	:global(.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6.hoverable:not(.disabled) .pip:hover) {
+		color: var(--pip-hover-text, darkslategrey);
+		background-color: var(--pip-hover, darkslategrey);
+	}
+	:global(.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6 .pip.in-range) {
+		color: var(--pip-in-range-text, darkslategrey);
+		background-color: var(--pip-in-range, darkslategrey);
+	}
+	:global(.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6 .pip.selected) {
+		height: 0.75em;
+	}
+	:global(.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6.vertical .pip.selected) {
+		height: 1px;
+		width: 0.75em;
+	}
+	:global(
+		.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6
+			.pip.selected
+			.pipVal-c41e7185-de59-40a7-90f2-e3d98b1e844b
+	) {
+		font-weight: bold;
+		top: 0.75em;
+	}
+	:global(
+		.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6.vertical
+			.pip.selected
+			.pipVal-c41e7185-de59-40a7-90f2-e3d98b1e844b
+	) {
+		top: 0;
+		left: 0.75em;
+	}
+	:global(
+		.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6.hoverable:not(.disabled)
+			.pip:not(.selected):hover
+	) {
+		transition: none;
+	}
+	:global(
+		.rangePips-f75c52e3-b799-4c81-8238-035d862cc2e6.hoverable:not(.disabled)
+			.pip:not(.selected):hover
+			.pipVal-c41e7185-de59-40a7-90f2-e3d98b1e844b
+	) {
+		transition: none;
+		font-weight: bold;
+	}
+</style>
diff --git a/src/lib/vendor/svelte-range-slider/range-slider.svelte b/src/lib/vendor/svelte-range-slider/range-slider.svelte
new file mode 100644
index 0000000..7f522e2
--- /dev/null
+++ b/src/lib/vendor/svelte-range-slider/range-slider.svelte
@@ -0,0 +1,1026 @@
+<script lang="ts" module>
+	export type ChangeEvent = {
+		activeHandle: number;
+		startValue: number;
+		previousValue: number;
+		value: number;
+		values: number[];
+	};
+
+	export type StartEvent = { activeHandle: number; value: number; values: number[] };
+
+	export type StopEvent = {
+		activeHandle: number;
+		startValue: number;
+		value: number;
+		values: number[];
+	};
+
+	export interface RangeSliderProps {
+		range?: boolean | 'min' | 'max';
+		onchange?: (event: ChangeEvent) => void;
+		onstart?: (event: StartEvent) => void;
+		onstop?: (event: StopEvent) => void;
+		pushy?: boolean;
+		min?: number;
+		max?: number;
+		ariaLabels?: string[];
+		precision?: number;
+		springOptions?: { stiffness: number; damping: number };
+		id?: string;
+		prefix?: string;
+		suffix?: string;
+		pips?: boolean;
+		pipstep?: number;
+		all?: boolean | 'pip' | 'label';
+		first?: boolean | 'pip' | 'label';
+		last?: boolean | 'pip' | 'label';
+		rest?: boolean | 'pip' | 'label';
+		step?: number;
+		value?: number;
+		values?: number[];
+		vertical?: boolean;
+		float?: boolean;
+		reversed?: boolean;
+		hoverable?: boolean;
+		disabled?: boolean;
+		formatter?: (value: number, index: number, percent: number) => string;
+		handleFormatter?: (value: number, index: number, percent: number) => string;
+	}
+</script>
+
+<script lang="ts">
+	import { spring } from 'svelte/motion';
+	import RangePips from './range-pips.svelte';
+
+	let {
+		range = false,
+		pushy = false,
+		min = 0,
+		max = 100,
+		ariaLabels = [],
+		precision = 2,
+		springOptions = { stiffness: 0.15, damping: 0.4 },
+		id = '',
+		prefix = '',
+		suffix = '',
+		pips = false,
+		pipstep,
+		all,
+		first,
+		last,
+		rest,
+		step = 1,
+		value = $bindable(0),
+		values = $bindable([(max + min) / 2]),
+		vertical = false,
+		float = false,
+		reversed = false,
+		hoverable = true,
+		disabled = false,
+		onchange,
+		onstart,
+		onstop,
+		formatter = (value: { toString: () => string }) => value.toString(),
+		handleFormatter = formatter
+	}: RangeSliderProps = $props();
+
+	if (value) {
+		values = [value];
+	}
+
+	let slider: Element | undefined = $state(undefined);
+	let valueLength = $state(0);
+	let focus = $state(false);
+	let handleActivated = $state(false);
+	let handlePressed = $state(false);
+	let keyboardActive = $state(false);
+	let activeHandle = $state(values.length - 1);
+
+	let startValue: number | undefined = $state();
+
+	let previousValue: number | undefined = $state();
+
+	/**
+	 * make sure the value is coerced to a float value
+	 * @param {number} v the value to fix
+	 * @return {number} a float version of the input
+	 **/
+	const fixFloat = (v: number): number => parseFloat((+v).toFixed(precision));
+
+	$effect(() => {
+		// check that "values" is an array, or set it as array to prevent any errors in springs, or range trimming
+		if (!Array.isArray(values)) {
+			values = [(max + min) / 2];
+			console.error(
+				"'values' prop should be an Array (https://github.com/simeydotme/svelte-range-slider-pips#slider-props)"
+			);
+		}
+
+		// trim the range so it remains as a min/max (only 2 handles)
+		// and also align the handles to the steps
+		const trimmedAlignedValues = trimRange(values.map((v) => alignValueToStep(v)));
+		if (
+			!(values.length === trimmedAlignedValues.length) ||
+			!values.every((element, index) => fixFloat(element) === trimmedAlignedValues[index])
+		) {
+			values = trimmedAlignedValues;
+		}
+
+		// check if the valueLength (length of values[]) has changed,
+		// because if so we need to re-seed the spring function with the new values array.
+		if (valueLength !== values.length) {
+			// set the initial spring values when the slider initialises, or when values array length has changed
+			springPositions = spring(
+				values.map((v) => percentOf(v)),
+				springOptions
+			);
+		} else {
+			// update the value of the spring function for animated handles whenever the values has updated
+			springPositions.set(values.map((v) => percentOf(v)));
+		}
+		// set the valueLength for the next check
+		valueLength = values.length;
+
+		if (values.length > 1 && !Array.isArray(ariaLabels)) {
+			console.warn(
+				`'ariaLabels' prop should be an Array (https://github.com/simeydotme/svelte-range-slider-pips#slider-props)`
+			);
+		}
+	});
+
+	/**
+	 * take in a value, and then calculate that value's percentage
+	 * of the overall range (min-max);
+	 * @param {number} val the value we're getting percent for
+	 * @return {number} the percentage value
+	 **/
+	const percentOf = (/** @type {number} */ val: number): number => {
+		let percent = ((val - min) / (max - min)) * 100;
+
+		if (isNaN(percent) || percent <= 0) {
+			return 0;
+		}
+
+		if (percent >= 100) {
+			return 100;
+		}
+
+		return fixFloat(percent);
+	};
+
+	/**
+	 * clamp a value from the range so that it always
+	 * falls within the min/max values
+	 * @param {number} val the value to clamp
+	 * @return {number} the value after it's been clamped
+	 **/
+	const clampValue = (/** @type {number} */ val: number): number => {
+		// return the min/max if outside of that range
+		return val <= min ? min : val >= max ? max : val;
+	};
+
+	/**
+	 * align the value with the steps so that it
+	 * always sits on the closest (above/below) step
+	 * @param {number} val the value to align
+	 * @return {number} the value after it's been aligned
+	 **/
+	const alignValueToStep = (/** @type {number} */ val: number): number => {
+		// sanity check for performance
+		if (val <= min) {
+			return fixFloat(min);
+		}
+
+		if (val >= max) {
+			return fixFloat(max);
+		}
+
+		val = fixFloat(val);
+
+		// find the middle-point between steps and see if the value is closer to the next step, or previous step
+		let remainder = (val - min) % step;
+		let aligned = val - remainder;
+
+		if (Math.abs(remainder) * 2 >= step) {
+			aligned += remainder > 0 ? step : -step;
+		}
+
+		aligned = clampValue(aligned); // make sure the value is within acceptable limits
+
+		// make sure the returned value is set to the precision desired
+		// this is also because javascript often returns weird floats
+		// when dealing with odd numbers and percentages
+		return fixFloat(aligned);
+	};
+
+	/**
+	 * the orientation of the handles/pips based on the
+	 * input values of vertical and reversed
+	 * @type {"top"|"bottom"|"left"|"right"} orientationStart
+	 **/
+	let orientationStart: 'top' | 'bottom' | 'left' | 'right' = $derived(
+		vertical ? (reversed ? 'top' : 'bottom') : reversed ? 'right' : 'left'
+	);
+	let orientationEnd = $derived(
+		vertical ? (reversed ? 'bottom' : 'top') : reversed ? 'left' : 'right'
+	);
+
+	/**
+	 * helper function to get the index of an element in it's DOM container
+	 * @param {Element|null} el dom object reference we want the index of
+	 * @returns {number} the index of the input element
+	 **/
+	function index(el: Element | null): number {
+		if (!el) {
+			return -1;
+		}
+
+		let i = 0;
+		while ((el = el.previousElementSibling)) {
+			i++;
+		}
+		return i;
+	}
+
+	/**
+	 * normalise a mouse or touch event to return the
+	 * client (x/y) object for that event
+	 * @param {MouseEvent|TouchEvent} e a mouse/touch event to normalise
+	 * @returns {{ x: number, y: number }} normalised event client object (x,y)
+	 **/
+	function normalisedClient(e: MouseEvent | TouchEvent): { x: number; y: number } {
+		if (e.type.includes('touch')) {
+			const touchEvent = e as TouchEvent;
+			const touch = touchEvent.touches[0] || touchEvent.changedTouches[0];
+			return { x: touch.clientX, y: touch.clientY };
+		} else {
+			const mouseEvent = e as MouseEvent;
+			return { x: mouseEvent.clientX, y: mouseEvent.clientY };
+		}
+	}
+
+	/**
+	 * check if an element is a handle on the slider
+	 * @param {Element} el dom object reference we want to check
+	 * @returns {boolean}
+	 **/
+	function targetIsHandle(el: Element): boolean {
+		if (!slider) return false;
+		const handles = [...slider.querySelectorAll('.handle')];
+		const isHandle = handles.includes(el);
+		const isChild = handles.some((handle) => handle.contains(el));
+		return isHandle || isChild;
+	}
+
+	/**
+	 * trim the values array based on whether the property
+	 * for 'range' is 'min', 'max', or truthy. This is because we
+	 * do not want more than one handle for a min/max range, and we do
+	 * not want more than two handles for a true range.
+	 * @param {number[]} values the input values for the rangeSlider
+	 * @return {number[]} the range array for creating a rangeSlider
+	 **/
+	function trimRange(values: number[]): number[] {
+		if (range === 'min' || range === 'max') {
+			return values.slice(0, 1);
+		}
+		if (range) {
+			return values.slice(0, 2);
+		}
+
+		return values;
+	}
+
+	/**
+	 * helper to return the slider dimensions for finding
+	 * the closest handle to user interaction
+	 * @return {DOMRect} the range slider DOM client rect
+	 **/
+	function getSliderDimensions(): DOMRect | undefined {
+		return slider?.getBoundingClientRect();
+	}
+
+	/**
+	 * helper to return closest handle to user interaction
+	 * @param {{ x: number, y: number }} clientPos the client{x,y} positions to check against
+	 * @return {number} the index of the closest handle to clientPos
+	 **/
+	function getClosestHandle(clientPos: { x: number; y: number }): number {
+		// first make sure we have the latest dimensions
+		// of the slider, as it may have changed size
+		const dims = getSliderDimensions();
+		if (!dims) throw new Error('No Slider Dimensions yet.');
+		// calculate the interaction position, percent and value
+		let handlePos = 0;
+		let handlePercent = 0;
+		let handleVal = 0;
+		if (vertical) {
+			handlePos = clientPos.y - dims.top;
+			handlePercent = (handlePos / dims.height) * 100;
+			handlePercent = reversed ? handlePercent : 100 - handlePercent;
+		} else {
+			handlePos = clientPos.x - dims.left;
+			handlePercent = (handlePos / dims.width) * 100;
+			handlePercent = reversed ? 100 - handlePercent : handlePercent;
+		}
+		handleVal = ((max - min) / 100) * handlePercent + min;
+
+		// if we have a range, and the handles are at the same
+		// position, we want a simple check if the interaction
+		// value is greater than return the second handle
+		if (range === true && values[0] === values[1]) {
+			if (handleVal > values[1]) {
+				return 1;
+			}
+
+			return 0;
+
+			// if there are multiple handles, and not a range, then
+			// we sort the handles values, and return the first one closest
+			// to the interaction value
+		}
+
+		return values.indexOf(
+			[...values].sort((a, b) => Math.abs(handleVal - a) - Math.abs(handleVal - b))[0]
+		);
+	}
+
+	/**
+	 * take the interaction position on the slider, convert
+	 * it to a value on the range, and then send that value
+	 * through to the moveHandle() method to set the active
+	 * handle's position
+	 * @param {{ x: number, y: number }} clientPos the client{x,y} of the interaction
+	 **/
+	function handleInteract(clientPos: { x: number; y: number }) {
+		// first make sure we have the latest dimensions
+		// of the slider, as it may have changed size
+		const dims = getSliderDimensions();
+		if (!dims) throw new Error('No Slider Dimensions yet.');
+		// calculate the interaction position, percent and value
+		let handlePos = 0;
+		let handlePercent = 0;
+		let handleVal = 0;
+		if (vertical) {
+			handlePos = clientPos.y - dims.top;
+			handlePercent = (handlePos / dims.height) * 100;
+			handlePercent = reversed ? handlePercent : 100 - handlePercent;
+		} else {
+			handlePos = clientPos.x - dims.left;
+			handlePercent = (handlePos / dims.width) * 100;
+			handlePercent = reversed ? 100 - handlePercent : handlePercent;
+		}
+		handleVal = ((max - min) / 100) * handlePercent + min;
+		// move handle to the value
+		moveHandle(activeHandle, handleVal);
+	}
+
+	let lastSetValue = NaN;
+	/**
+	 * move a handle to a specific value, respecting the clamp/align rules
+	 * @param {number} index the index of the handle we want to move
+	 * @param {number} handleValue the value to move the handle to
+	 * @return {number} the value that was moved to (after alignment/clamping)
+	 **/
+	function moveHandle(index: number | undefined, handleValue: number): number {
+		// align & clamp the value so we're not doing extra
+		// calculation on an out-of-range value down below
+		handleValue = alignValueToStep(handleValue);
+		// use the active handle if handle index is not provided
+		if (typeof index === 'undefined') {
+			index = activeHandle;
+		}
+		// if this is a range slider perform special checks
+		if (range) {
+			// restrict the handles of a range-slider from
+			// going past one-another unless "pushy" is true
+			if (index === 0 && handleValue > values[1]) {
+				if (pushy) {
+					values[1] = handleValue;
+				} else {
+					handleValue = values[1];
+				}
+			} else if (index === 1 && handleValue < values[0]) {
+				if (pushy) {
+					values[0] = handleValue;
+				} else {
+					handleValue = values[0];
+				}
+			}
+		}
+
+		// if the value has changed, update it
+		if (values[index] !== handleValue) {
+			values[index] = handleValue;
+		}
+
+		// fire the change event when the handle moves,
+		// and store the previous value for the next time
+		if (previousValue !== handleValue) {
+			handleOnChange();
+			previousValue = handleValue;
+		}
+		lastSetValue = handleValue;
+		value = handleValue;
+		return handleValue;
+	}
+	$effect(() => {
+		if (value !== lastSetValue) moveHandle(undefined, value);
+	});
+
+	/**
+	 * helper to find the beginning range value for use with css style
+	 * @param {number[]} values the input values for the rangeSlider
+	 * @return {number} the beginning of the range
+	 **/
+	function rangeStart(values: number[]): number {
+		if (range === 'min') {
+			return 0;
+		}
+
+		return values[0];
+	}
+
+	/**
+	 * helper to find the ending range value for use with css style
+	 * @param {array} values the input values for the rangeSlider
+	 * @return {number} the end of the range
+	 **/
+	function rangeEnd(values: Array<any>): number {
+		if (range === 'max') {
+			return 0;
+		}
+
+		if (range === 'min') {
+			return 100 - values[0];
+		}
+
+		return 100 - values[1];
+	}
+
+	/**
+	 * helper to take a string of html and return only the text
+	 * @param {string} possibleHtml the string that may contain html
+	 * @return {string} the text from the input
+	 */
+	function pureText(possibleHtml: string): string {
+		return `${possibleHtml}`.replace(/<[^>]*>/g, '');
+	}
+
+	/**
+	 * when the user has unfocussed (blurred) from the
+	 * slider, deactivate all handles
+	 **/
+	function sliderBlurHandle() {
+		if (!keyboardActive) {
+			return;
+		}
+
+		focus = false;
+		handleActivated = false;
+		handlePressed = false;
+	}
+
+	/**
+	 * when the user focusses the handle of a slider
+	 * set it to be active
+	 * @param {Event} e the event from browser
+	 **/
+	function sliderFocusHandle(e: Event) {
+		if (disabled) {
+			return;
+		}
+
+		const target = e.target as HTMLElement;
+		activeHandle = index(target);
+		focus = true;
+	}
+
+	/**
+	 * handle the keyboard accessible features by checking the
+	 * input type, and modfier key then moving handle by appropriate amount
+	 * @param {KeyboardEvent} e the event from browser
+	 **/
+	function sliderKeydown(e: KeyboardEvent) {
+		if (disabled) {
+			return;
+		}
+
+		const target = e.target as HTMLElement;
+		const handle = index(target);
+		let jump = e.ctrlKey || e.metaKey || e.shiftKey ? step * 10 : step;
+		let prevent = false;
+
+		if (e.key === 'PageDown' || e.key === 'PageUp') {
+			jump *= 10;
+		}
+
+		if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+			moveHandle(handle, values[handle] + jump);
+			prevent = true;
+		}
+
+		if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+			moveHandle(handle, values[handle] - jump);
+			prevent = true;
+		}
+
+		if (e.key === 'Home') {
+			moveHandle(handle, min);
+			prevent = true;
+		}
+
+		if (e.key === 'End') {
+			moveHandle(handle, max);
+			prevent = true;
+		}
+
+		if (prevent) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	}
+
+	/**
+	 * function to run when the user touches the slider element anywhere
+	 * @param {MouseEvent|TouchEvent} e the event from browser
+	 **/
+	function sliderInteractStart(e: MouseEvent | TouchEvent) {
+		if (disabled) {
+			return;
+		}
+
+		const element = e.target as HTMLElement;
+		const clientPos = normalisedClient(e);
+		// set the closest handle as active
+		focus = true;
+		handleActivated = true;
+		handlePressed = true;
+		activeHandle = getClosestHandle(clientPos);
+
+		// fire the start event
+		startValue = previousValue = alignValueToStep(values[activeHandle]);
+		handleOnStart();
+
+		// for touch devices we want the handle to instantly
+		// move to the position touched for more responsive feeling
+		if (e.type === 'touchstart' && !element.matches('.pipVal')) {
+			handleInteract(clientPos);
+		}
+	}
+
+	/**
+	 * function to run when the user stops touching
+	 * down on the slider element anywhere
+	 * @param {Event} e the event from browser
+	 **/
+	function sliderInteractEnd(e: Event) {
+		// fire the stop event for touch devices
+		if (e.type === 'touchend') {
+			handleOnStop();
+		}
+		handlePressed = false;
+	}
+
+	/**
+	 * unfocus the slider if the user clicked off of
+	 * it, somewhere else on the screen
+	 * @param {MouseEvent|TouchEvent} e the event from browser
+	 **/
+	function bodyInteractStart(e: MouseEvent | TouchEvent) {
+		keyboardActive = false;
+		const target = e.target as HTMLElement;
+		if (slider && focus && e.target !== slider && !slider.contains(target)) {
+			focus = false;
+		}
+	}
+
+	/**
+	 * send the clientX through to handle the interaction
+	 * whenever the user moves across screen while active
+	 * @param {MouseEvent|TouchEvent} e the event from browser
+	 **/
+	function bodyInteract(e: MouseEvent | TouchEvent) {
+		if (!disabled) {
+			if (handleActivated) {
+				handleInteract(normalisedClient(e));
+			}
+		}
+	}
+
+	/**
+	 * if user triggers mouseup on the body while
+	 * a handle is active (without moving) then we
+	 * trigger an interact event there
+	 * @param {MouseEvent|TouchEvent} e the event from browser
+	 **/
+	function bodyMouseUp(e: MouseEvent | TouchEvent) {
+		if (!disabled) {
+			const el = e.target as HTMLElement;
+			// this only works if a handle is active, which can
+			// only happen if there was sliderInteractStart triggered
+			// on the slider, already
+			if (handleActivated) {
+				if (slider && (el === slider || slider.contains(el))) {
+					focus = true;
+					// don't trigger interact if the target is a handle (no need) or
+					// if the target is a label (we want to move to that value from rangePips)
+					if (!targetIsHandle(el) && !el.matches('.pipVal')) {
+						handleInteract(normalisedClient(e));
+					}
+				}
+				// fire the stop event for mouse device
+				// when the body is triggered with an active handle
+				handleOnStop();
+			}
+		}
+		handleActivated = false;
+		handlePressed = false;
+	}
+
+	/**
+	 * @param {KeyboardEvent} e
+	 */
+	function bodyKeyDown(e: KeyboardEvent) {
+		if (disabled) {
+			return;
+		}
+
+		const target = e.target as HTMLElement;
+
+		if (slider && (e.target === slider || slider.contains(target))) {
+			keyboardActive = true;
+		}
+	}
+
+	function handleOnStop() {
+		if (disabled || !onstop || typeof onstop !== 'function') {
+			return;
+		}
+
+		onstop({
+			activeHandle,
+			startValue: startValue ?? 0,
+			value: values[activeHandle],
+			values: values.map((v) => alignValueToStep(v))
+		});
+	}
+
+	function handleOnStart() {
+		if (disabled || !onstart || typeof onstart !== 'function') {
+			return;
+		}
+
+		onstart({
+			activeHandle,
+			value: startValue ?? 0,
+			values: values.map((v) => alignValueToStep(v))
+		});
+	}
+
+	function handleOnChange() {
+		if (disabled || !onchange || typeof onchange !== 'function') {
+			return;
+		}
+
+		onchange({
+			activeHandle,
+			startValue: startValue ?? 0,
+			previousValue: typeof previousValue === 'undefined' ? (startValue ?? 0) : previousValue,
+			value: values[activeHandle],
+			values: values.map((v) => alignValueToStep(v))
+		});
+	}
+
+	/** @type {import('svelte/motion').Spring<number[]>} */
+	let springPositions: import('svelte/motion').Spring<number[]> = spring(
+		values.map((v) => percentOf(v)),
+		springOptions
+	);
+</script>
+
+<div
+	{id}
+	bind:this={slider}
+	role="none"
+	class="_rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28"
+	class:range
+	class:disabled
+	class:hoverable
+	class:vertical
+	class:reversed
+	class:focus
+	class:min={range === 'min'}
+	class:max={range === 'max'}
+	class:pips
+	class:pip-labels={all === 'label' || first === 'label' || last === 'label' || rest === 'label'}
+	onmousedown={sliderInteractStart}
+	onmouseup={sliderInteractEnd}
+>
+	{#each values as value, index}
+		<span
+			role="slider"
+			class="rangeHandle"
+			class:active={focus && activeHandle === index}
+			class:press={handlePressed && activeHandle === index}
+			data-handle={index}
+			onblur={sliderBlurHandle}
+			onfocus={sliderFocusHandle}
+			onkeydown={sliderKeydown}
+			style="{orientationStart}: {$springPositions[index]}%; z-index: {activeHandle === index
+				? 3
+				: 2};"
+			aria-label={ariaLabels[index]}
+			aria-valuemin={range === true && index === 1 ? values[0] : min}
+			aria-valuemax={range === true && index === 0 ? values[1] : max}
+			aria-valuenow={value}
+			aria-valuetext="{prefix}{pureText(handleFormatter(value, index, percentOf(value)))}{suffix}"
+			aria-orientation={vertical ? 'vertical' : 'horizontal'}
+			aria-disabled={disabled}
+			tabindex={disabled ? -1 : 0}
+		>
+			<span class="rangeNub"></span>
+			{#if float}
+				<span class="rangeFloat">
+					{prefix}{handleFormatter(value, index, percentOf(value))}{suffix}
+				</span>
+			{/if}
+		</span>
+	{/each}
+
+	{#if range}
+		<span
+			class="rangeBar"
+			style="{orientationStart}: {rangeStart($springPositions)}%; 
+             {orientationEnd}: {rangeEnd($springPositions)}%;"
+		></span>
+	{/if}
+
+	{#if pips}
+		<RangePips
+			{values}
+			{min}
+			{max}
+			{step}
+			{range}
+			{vertical}
+			{reversed}
+			{orientationStart}
+			{hoverable}
+			{disabled}
+			{all}
+			{first}
+			{last}
+			{rest}
+			{pipstep}
+			{prefix}
+			{suffix}
+			{formatter}
+			{focus}
+			{percentOf}
+			{moveHandle}
+			{fixFloat}
+			{normalisedClient}
+		/>
+	{/if}
+</div>
+
+<svelte:window
+	onmousedown={bodyInteractStart}
+	onmousemove={bodyInteract}
+	onmouseup={bodyMouseUp}
+	onkeydown={bodyKeyDown}
+/>
+
+<style>
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28) {
+		--slider: var(--range-slider, #d7dada);
+		--handle-inactive: var(--range-handle-inactive, #99a2a2);
+		--handle: var(--range-handle, #838de7);
+		--handle-focus: var(--range-handle-focus, #4a40d4);
+		--handle-border: var(--range-handle-border, var(--handle));
+		--range-inactive: var(--range-range-inactive, var(--handle-inactive));
+		--range: var(--range-range, var(--handle-focus));
+		--float-inactive: var(--range-float-inactive, var(--handle-inactive));
+		--float: var(--range-float, var(--handle-focus));
+		--float-text: var(--range-float-text, white);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28) {
+		position: relative;
+		border-radius: 100px;
+		height: 0.5em;
+		margin: 1em;
+		transition: opacity 0.2s ease;
+		user-select: none;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28 *) {
+		user-select: none;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.pips) {
+		margin-bottom: 1.8em;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.pip-labels) {
+		margin-bottom: 2.8em;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.vertical) {
+		display: inline-block;
+		border-radius: 100px;
+		width: 0.5em;
+		min-height: 200px;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.vertical.pips) {
+		margin-right: 1.8em;
+		margin-bottom: 1em;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.vertical.pip-labels) {
+		margin-right: 2.8em;
+		margin-bottom: 1em;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28 .rangeHandle) {
+		position: absolute;
+		display: block;
+		height: 1.4em;
+		width: 1.4em;
+		top: 0.25em;
+		bottom: auto;
+		transform: translateY(-50%) translateX(-50%);
+		z-index: 2;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.reversed .rangeHandle) {
+		transform: translateY(-50%) translateX(50%);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.vertical .rangeHandle) {
+		left: 0.25em;
+		top: auto;
+		transform: translateY(50%) translateX(-50%);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.vertical.reversed .rangeHandle) {
+		transform: translateY(-50%) translateX(-50%);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28 .rangeNub),
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28 .rangeHandle:before) {
+		position: absolute;
+		left: 0;
+		top: 0;
+		display: block;
+		border-radius: 10em;
+		height: 100%;
+		width: 100%;
+		transition: box-shadow 0.2s ease;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28 .rangeHandle:before) {
+		content: '';
+		left: 1px;
+		top: 1px;
+		bottom: 1px;
+		right: 1px;
+		height: auto;
+		width: auto;
+		box-shadow: 0 0 0 0px var(--handle-border);
+		opacity: 0;
+	}
+	:global(
+		._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.hoverable:not(.disabled)
+			.rangeHandle:hover:before
+	) {
+		box-shadow: 0 0 0 8px var(--handle-border);
+		opacity: 0.2;
+	}
+	:global(
+		._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.hoverable:not(.disabled)
+			.rangeHandle.press:before
+	),
+	:global(
+		._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.hoverable:not(.disabled)
+			.rangeHandle.press:hover:before
+	) {
+		box-shadow: 0 0 0 12px var(--handle-border);
+		opacity: 0.4;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.range:not(.min):not(.max) .rangeNub) {
+		border-radius: 10em 10em 10em 1.6em;
+	}
+	:global(
+		._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.range .rangeHandle:nth-of-type(1) .rangeNub
+	) {
+		transform: rotate(-135deg);
+	}
+	:global(
+		._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.range .rangeHandle:nth-of-type(2) .rangeNub
+	) {
+		transform: rotate(45deg);
+	}
+	:global(
+		._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.range.reversed
+			.rangeHandle:nth-of-type(1)
+			.rangeNub
+	) {
+		transform: rotate(45deg);
+	}
+	:global(
+		._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.range.reversed
+			.rangeHandle:nth-of-type(2)
+			.rangeNub
+	) {
+		transform: rotate(-135deg);
+	}
+	:global(
+		._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.range.vertical
+			.rangeHandle:nth-of-type(1)
+			.rangeNub
+	) {
+		transform: rotate(135deg);
+	}
+	:global(
+		._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.range.vertical
+			.rangeHandle:nth-of-type(2)
+			.rangeNub
+	) {
+		transform: rotate(-45deg);
+	}
+	:global(
+		._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.range.vertical.reversed
+			.rangeHandle:nth-of-type(1)
+			.rangeNub
+	) {
+		transform: rotate(-45deg);
+	}
+	:global(
+		._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.range.vertical.reversed
+			.rangeHandle:nth-of-type(2)
+			.rangeNub
+	) {
+		transform: rotate(135deg);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28 .rangeFloat) {
+		display: block;
+		position: absolute;
+		left: 50%;
+		top: -0.5em;
+		transform: translate(-50%, -100%);
+		font-size: 1em;
+		text-align: center;
+		opacity: 0;
+		pointer-events: none;
+		white-space: nowrap;
+		transition: all 0.2s ease;
+		font-size: 0.9em;
+		padding: 0.2em 0.4em;
+		border-radius: 0.2em;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28 .rangeHandle.active .rangeFloat),
+	:global(
+		._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.hoverable .rangeHandle:hover .rangeFloat
+	) {
+		opacity: 1;
+		top: -0.2em;
+		transform: translate(-50%, -100%);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28 .rangeBar) {
+		position: absolute;
+		display: block;
+		transition: background 0.2s ease;
+		border-radius: 1em;
+		height: 0.5em;
+		top: 0;
+		user-select: none;
+		z-index: 1;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.vertical .rangeBar) {
+		width: 0.5em;
+		height: auto;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28) {
+		background-color: var(--slider, #d7dada);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28 .rangeBar) {
+		background-color: var(--range-inactive, #99a2a2);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.focus .rangeBar) {
+		background-color: var(--range, #838de7);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28 .rangeNub) {
+		background-color: var(--handle-inactive, #99a2a2);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.focus .rangeNub) {
+		background-color: var(--handle, #838de7);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28 .rangeHandle.active .rangeNub) {
+		background-color: var(--handle-focus, #4a40d4);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28 .rangeFloat) {
+		color: white;
+		color: var(--float-text);
+		background-color: var(--float-inactive, #99a2a2);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.focus .rangeFloat) {
+		background-color: var(--float, #4a40d4);
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.disabled) {
+		opacity: 0.5;
+	}
+	:global(._rangeslider-0f6d4a99-47b0-4108-8415-b2aefa867e28.disabled .rangeNub) {
+		background-color: var(--slider, #d7dada);
+	}
+</style>
-- 
cgit v1.2.3