@selvajs/ui 6.6.0-beta.2 → 6.6.0-beta.20

package/src/lib/components/preview/inputs/FileInput.svelte

@@ -1,10 +1,19 @@
 <script lang="ts">
-	import { Input } from '$lib/components/primitives/input';
-	import { Button } from '$lib/components/primitives/button';
-	import { Label } from '$lib/components/primitives/label';
-	import { toast } from '$lib/components/primitives/sonner';
+	import { Input } from '#lib/components/primitives/input/index.js';
+	import { Button } from '#lib/components/primitives/button/index.js';
+	import { Label } from '#lib/components/primitives/label/index.js';
+	import { toast } from '#lib/components/primitives/sonner/index.js';
 	import { FileUp, Link, CircleAlert, CircleCheck } from '@lucide/svelte';
-	import { APP_DEFAULTS } from '$lib/constants';
+	import { APP_DEFAULTS } from '#lib/constants.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatMessage } from '#lib/i18n/messages.js';
+	import { pickFile } from '#lib/utils/host-files.js';
+	import {
+		acceptsFileEnding,
+		isWebp,
+		shouldConvertWebp,
+		webpToPng
+	} from '#lib/utils/webp-to-png.js';
 
 	interface Props {
 		value?: string;
@@ -22,6 +31,9 @@
 		onChange
 	}: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	let effectiveModes = $derived(
 		allowedInputModes && allowedInputModes.length > 0
 			? allowedInputModes
@@ -35,7 +47,6 @@
 		activeMode = effectiveModes.includes(preferred) ? preferred : effectiveModes[0];
 	});
 
-	let fileInput: HTMLInputElement | null = $state(null);
 	let uploadedFileName = $state('');
 	let urlInput = $state('');
 	let isDragging = $state(false);
@@ -52,9 +63,12 @@
 				if (parsed.type === 'base64') {
 					if (parsed._isMetadata && parsed._fileSize) {
 						const sizeMB = (parsed._fileSize / 1024 / 1024).toFixed(2);
-						uploadedFileName = `Uploaded file (${parsed.fileEnding}, ${sizeMB}MB)`;
+						uploadedFileName = formatMessage(t.uploadedFileSize, {
+							ext: parsed.fileEnding,
+							size: sizeMB
+						});
 					} else {
-						uploadedFileName = `Uploaded file (${parsed.fileEnding})`;
+						uploadedFileName = formatMessage(t.uploadedFile, { ext: parsed.fileEnding });
 					}
 				} else if (parsed.type === 'url') {
 					urlInput = parsed.file;
@@ -65,6 +79,20 @@
 		}
 	});
 
+	function formatNotAccepted(fileEnding: string): string {
+		return formatMessage(t.fileFormatNotAccepted, {
+			ext: fileEnding,
+			formats: acceptedFormats.join(', ')
+		});
+	}
+
+	function formatTooLarge(bytes: number): string {
+		return formatMessage(t.fileTooLarge, {
+			size: (bytes / 1024 / 1024).toFixed(2),
+			max: APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_MB
+		});
+	}
+
 	function getFileExtension(filename: string): string {
 		// Strip query strings before extracting extension
 		const cleanPath = filename.split('?')[0];
@@ -72,9 +100,27 @@
 		return ext.toLowerCase();
 	}
 
-	function isValidFileExtension(fileEnding: string): boolean {
-		if (acceptedFormats.length === 0) return true;
-		return acceptedFormats.includes(fileEnding.toLowerCase());
+	// Runs before the size cap: the PNG is larger than the WebP it came from. A WebP already over
+	// the cap is passed through unconverted, so the cap rejects it without a full decode.
+	async function prepare(
+		blob: Blob,
+		fileEnding: string
+	): Promise<{ blob: Blob; fileEnding: string }> {
+		if (blob.size > APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_BYTES) return { blob, fileEnding };
+		if (!shouldConvertWebp(fileEnding, acceptedFormats)) return { blob, fileEnding };
+		return { blob: await webpToPng(blob), fileEnding: '.png' };
+	}
+
+	function readBase64(blob: Blob): Promise<string> {
+		return new Promise<string>((resolve, reject) => {
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				const result = e.target?.result as string;
+				resolve(result.includes(',') ? result.split(',')[1] : result);
+			};
+			reader.onerror = () => reject(new Error(t.fileReadFailed));
+			reader.readAsDataURL(blob);
+		});
 	}
 
 	function isCorsError(error: unknown): boolean {
@@ -96,56 +142,52 @@
 			try {
 				parsedUrl = new URL(urlInput);
 			} catch {
-				urlError = { message: 'Invalid URL — make sure it starts with https://', isCors: false };
+				urlError = { message: t.urlInvalid, isCors: false };
 				return;
 			}
 
 			if (parsedUrl.protocol !== 'https:' && parsedUrl.protocol !== 'http:') {
-				urlError = { message: 'Only http:// and https:// URLs are supported.', isCors: false };
+				urlError = { message: t.urlProtocolUnsupported, isCors: false };
 				return;
 			}
 
 			const response = await fetch(urlInput);
 			if (!response.ok) {
 				urlError = {
-					message: `Server returned ${response.status} ${response.statusText}. Check the URL is correct and publicly accessible.`,
+					message: formatMessage(t.urlServerError, {
+						status: `${response.status} ${response.statusText}`.trim()
+					}),
 					isCors: false
 				};
 				return;
 			}
 
-			const blob = await response.blob();
-			const fileEnding = getFileExtension(urlInput);
+			const fetched = await response.blob();
+			const requestedEnding = (await isWebp(fetched)) ? '.webp' : getFileExtension(urlInput);
 
-			if (!isValidFileExtension(fileEnding)) {
-				urlError = {
-					message: `File format "${fileEnding}" is not accepted. Allowed: ${acceptedFormats.join(', ')}`,
-					isCors: false
-				};
+			if (!acceptsFileEnding(requestedEnding, acceptedFormats)) {
+				urlError = { message: formatNotAccepted(requestedEnding), isCors: false };
 				return;
 			}
 
+			const { blob, fileEnding } = await prepare(fetched, requestedEnding);
+
 			const maxSize = APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_BYTES;
 			if (blob.size > maxSize) {
 				urlError = {
-					message: `File too large: ${(blob.size / 1024 / 1024).toFixed(2)}MB (max ${APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_MB}MB). Download it and use Upload instead.`,
+					message: `${formatTooLarge(blob.size)} ${t.fileTooLargeUseUpload}`,
 					isCors: false
 				};
 				return;
 			}
 
-			const base64Data = await new Promise<string>((resolve, reject) => {
-				const reader = new FileReader();
-				reader.onload = (e) => {
-					const result = e.target?.result as string;
-					resolve(result.includes(',') ? result.split(',')[1] : result);
-				};
-				reader.onerror = () => reject(new Error('Failed to read the downloaded file.'));
-				reader.readAsDataURL(blob);
-			});
+			const base64Data = await readBase64(blob);
 			const data = JSON.stringify({ file: base64Data, type: 'base64', fileEnding });
 			value = data;
-			urlSuccess = `Loaded ${fileEnding} (${(blob.size / 1024).toFixed(0)} KB)`;
+			urlSuccess = formatMessage(t.fileLoaded, {
+				ext: fileEnding,
+				size: (blob.size / 1024).toFixed(0)
+			});
 			onChange(data);
 		} catch (error) {
 			if (isCorsError(error)) {
@@ -158,26 +200,22 @@
 				})();
 				// The opaque TypeError hides CORS blocks and plain network failures (404, DNS)
 				// alike, so the message has to cover both.
-				let hint =
-					'Check that the URL is correct and the file is publicly accessible. If the server requires login, download the file and use the Upload option instead.';
+				let hint = t.urlUnreachableHint;
 				if (host.includes('sharepoint.com') || host.includes('onedrive.com')) {
-					hint =
-						'SharePoint/OneDrive blocks browser access. Open the file in SharePoint, use "Download" to save it locally, then upload it here.';
+					hint = t.urlHintSharePoint;
 				} else if (host.includes('drive.google.com')) {
-					hint =
-						'Google Drive blocks browser access. Use "Download" in Google Drive to save the file locally, then upload it here.';
+					hint = t.urlHintGoogleDrive;
 				} else if (host.includes('dropbox.com')) {
-					hint =
-						'Dropbox links may block browser access. Try changing "?dl=0" to "?dl=1" in the URL, or download and upload instead.';
+					hint = t.urlHintDropbox;
 				}
 				urlError = {
-					message: `Could not reach "${host}" — the file may not exist, or the server does not allow browser access.`,
+					message: formatMessage(t.urlUnreachable, { host }),
 					isCors: true,
 					hint
 				};
 			} else {
 				urlError = {
-					message: error instanceof Error ? error.message : 'Unknown error',
+					message: error instanceof Error ? error.message : t.unknownError,
 					isCors: false
 				};
 			}
@@ -186,50 +224,39 @@
 		}
 	}
 
-	function handleFileUpload(event: Event) {
-		const target = event.target as HTMLInputElement;
-		const file = target.files?.[0];
-		if (!file) return;
-
-		const fileEnding = getFileExtension(file.name);
+	async function handleFile(file: File) {
+		const requestedEnding = getFileExtension(file.name);
 
-		if (!isValidFileExtension(fileEnding)) {
-			toast.error(`File format not accepted: ${fileEnding}`);
+		if (!acceptsFileEnding(requestedEnding, acceptedFormats)) {
+			toast.error(formatNotAccepted(requestedEnding));
 			return;
 		}
 
-		// The file is base64-embedded into the compute request body, so without a
-		// client-side cap an oversize file comes back as an opaque 413. This cap is
-		// currently LOOSER than the server's COMPUTE_REQUEST_MAX_BYTES (see the TEMP
-		// note in constants.ts) — some files pass here and still 413. The URL import
-		// path applies the same cap.
-		if (file.size > APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_BYTES) {
-			toast.error(
-				`File too large: ${(file.size / 1024 / 1024).toFixed(2)}MB (max ${APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_MB}MB).`
-			);
-			return;
-		}
-
-		uploadedFileName = file.name;
-
-		const reader = new FileReader();
-		reader.onload = (e) => {
-			const base64 = e.target?.result as string;
-			const base64Data = base64.includes(',') ? base64.split(',')[1] : base64;
+		try {
+			const { blob, fileEnding } = await prepare(file, requestedEnding);
+
+			// The file is base64-embedded into the compute request body, so without a
+			// client-side cap an oversize file comes back as an opaque 413. This cap is
+			// currently LOOSER than the server's COMPUTE_REQUEST_MAX_BYTES (see the TEMP
+			// note in constants.ts) — some files pass here and still 413. The URL import
+			// path applies the same cap.
+			if (blob.size > APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_BYTES) {
+				toast.error(formatTooLarge(blob.size));
+				return;
+			}
 
-			const data = JSON.stringify({
-				file: base64Data,
-				type: 'base64',
-				fileEnding
-			});
+			uploadedFileName = file.name;
+			const data = JSON.stringify({ file: await readBase64(blob), type: 'base64', fileEnding });
 			value = data;
 			onChange(data);
-		};
-		reader.readAsDataURL(file);
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : t.fileReadFailed);
+		}
 	}
 
-	function openFilePicker() {
-		fileInput?.click();
+	async function openFilePicker() {
+		const file = await pickFile({ accept: acceptAttribute });
+		if (file) handleFile(file);
 	}
 
 	function handleDragOver(e: DragEvent) {
@@ -245,27 +272,14 @@
 		e.preventDefault();
 		isDragging = false;
 
-		const files = e.dataTransfer?.files;
-		if (files?.[0]) {
-			const fakeEvent = new Event('change');
-			const fakeTarget = { files: files } as HTMLInputElement;
-			Object.defineProperty(fakeEvent, 'target', { value: fakeTarget });
-			handleFileUpload(fakeEvent);
-		}
+		const file = e.dataTransfer?.files?.[0];
+		if (file) handleFile(file);
 	}
 
 	const acceptAttribute = $derived(acceptedFormats.length > 0 ? acceptedFormats.join(',') : '*');
 </script>
 
 <div class="gap-2.5 flex w-full flex-col">
-	<input
-		bind:this={fileInput}
-		type="file"
-		accept={acceptAttribute}
-		onchange={handleFileUpload}
-		class="hidden"
-	/>
-
 	{#if showToggle}
 		<div class="p-0.5 text-xs flex rounded-md bg-muted">
 			{#each effectiveModes as mode (mode)}
@@ -273,13 +287,13 @@
 					type="button"
 					onclick={() => (activeMode = mode)}
 					aria-pressed={activeMode === mode}
-					class={`px-3 py-1 font-medium flex-1 rounded-sm transition-colors ${
+					class={`px-3 py-1 font-medium flex-1 rounded-sm border transition-colors ${
 						activeMode === mode
-							? 'shadow-xs bg-background text-foreground'
-							: 'text-muted-foreground hover:text-foreground'
+							? 'shadow-xs border-border-strong bg-raised text-foreground'
+							: 'border-transparent text-muted-foreground hover:text-foreground'
 					}`}
 				>
-					{mode === 'upload' ? 'Upload' : 'URL'}
+					{mode === 'upload' ? t.fileModeUpload : t.fileModeUrl}
 				</button>
 			{/each}
 		</div>
@@ -289,7 +303,7 @@
 		<div class="gap-2 flex flex-col">
 			<Label for="url-input">
 				<Link size={16} />
-				File URL
+				{t.fileUrlLabel}
 			</Label>
 			<div class="gap-2 flex">
 				<Input
@@ -310,7 +324,7 @@
 					disabled={isLoading || !urlInput.trim()}
 					onclick={handleUrlChange}
 				>
-					{isLoading ? 'Fetching...' : 'Fetch'}
+					{isLoading ? t.fetchingFile : t.fetchFile}
 				</Button>
 			</div>
 
@@ -336,9 +350,7 @@
 			{/if}
 
 			{#if !urlError && !urlSuccess}
-				<p class="text-xs text-muted-foreground">
-					URL must be publicly accessible (no login required).
-				</p>
+				<p class="text-xs text-muted-foreground">{t.fileUrlPublic}</p>
 			{/if}
 		</div>
 	{:else}
@@ -353,11 +365,11 @@
 				ondrop={handleDrop}
 			>
 				<FileUp size={16} />
-				{uploadedFileName || 'Choose File or Drag & Drop'}
+				{uploadedFileName || t.chooseFile}
 			</Button>
 			{#if acceptedFormats.length > 0}
 				<p class="text-xs text-muted-foreground">
-					Accepted formats: {acceptedFormats.join(', ')}
+					{formatMessage(t.acceptedFormats, { formats: acceptedFormats.join(', ') })}
 				</p>
 			{/if}
 		</div>

package/src/lib/components/preview/inputs/GeometryInput.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { Button } from '#lib/components/primitives/button/index.js';
+	import type { GeometryPickResult, PickKind } from '#lib/contexts/hostContext.svelte.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import type { ViewerMessages } from '#lib/i18n/messages.js';
+
+	interface Props {
+		inputId: string;
+		/** The kinds of object the input takes; one kind names the button after it. */
+		kinds?: readonly PickKind[];
+		/** 1 picks a single object. */
+		atMost?: number;
+		/** What the host reports the param holds, such as "2 curves"; absent until something is picked. */
+		summary?: string;
+		/** Absent where this page may not pick, such as a browser tab beside the Rhino panel. */
+		onPick?: () => Promise<GeometryPickResult>;
+		onClear?: () => void;
+		/** Subscribes to what the host holds after any page picks or clears; returns an unsubscribe. */
+		watchSummary?: (listener: (summary: string | null) => void) => () => void;
+		/** Shown when the pick fails; the host's own message. */
+		onError?: (message: string) => void;
+		disabled?: boolean;
+	}
+
+	let {
+		inputId,
+		kinds,
+		atMost,
+		summary,
+		onPick,
+		onClear,
+		watchSummary,
+		onError,
+		disabled = false
+	}: Props = $props();
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
+	type PickLabels = readonly [one: keyof ViewerMessages, other: keyof ViewerMessages];
+
+	const ANY_LABELS: PickLabels = ['geometryPickAnyOne', 'geometryPickAnyOther'];
+	const KIND_LABELS: Record<PickKind, PickLabels> = {
+		point: ['geometryPickPointOne', 'geometryPickPointOther'],
+		pointCloud: ['geometryPickPointCloudOne', 'geometryPickPointCloudOther'],
+		curve: ['geometryPickCurveOne', 'geometryPickCurveOther'],
+		line: ['geometryPickLineOne', 'geometryPickLineOther'],
+		plane: ['geometryPickPlaneOne', 'geometryPickPlaneOther'],
+		surface: ['geometryPickSurfaceOne', 'geometryPickSurfaceOther'],
+		polysurface: ['geometryPickPolysurfaceOne', 'geometryPickPolysurfaceOther'],
+		extrusion: ['geometryPickExtrusionOne', 'geometryPickExtrusionOther'],
+		mesh: ['geometryPickMeshOne', 'geometryPickMeshOther'],
+		subd: ['geometryPickSubdOne', 'geometryPickSubdOther'],
+		block: ['geometryPickBlockOne', 'geometryPickBlockOther']
+	};
+
+	const pickLabel = $derived.by(() => {
+		const [one, other] = kinds?.length === 1 ? KIND_LABELS[kinds[0]] : ANY_LABELS;
+		return t[atMost === 1 ? one : other];
+	});
+
+	// Rhino's command line prompts during the pick; the page keeps the button from being pressed
+	// twice and says where to look.
+	let picking = $state(false);
+	// The last pick or clear wins over what the host reported when the page loaded.
+	let local = $state<string | null | undefined>(undefined);
+	const shown = $derived(local !== undefined ? local : (summary ?? null));
+
+	$effect(() =>
+		watchSummary?.((held) => {
+			local = held;
+		})
+	);
+
+	async function pick(onPick: () => Promise<GeometryPickResult>) {
+		picking = true;
+		try {
+			const result = await onPick();
+			if (result.outcome === 'picked') local = result.summary;
+			else if (result.outcome === 'failed') onError?.(result.error);
+		} finally {
+			picking = false;
+		}
+	}
+
+	// The field label points at inputId: the button where there is one, else an <output>, which
+	// unlike a <span> can be labelled.
+	const readout = $derived(onPick ? 'span' : 'output');
+
+	function clear(onClear: () => void) {
+		local = null;
+		onClear();
+	}
+</script>
+
+<div class="gap-2 min-w-0 flex flex-wrap items-center">
+	{#if onPick}
+		<Button
+			id={inputId}
+			variant="outline"
+			size="sm"
+			onclick={() => pick(onPick)}
+			disabled={disabled || picking}
+		>
+			{shown ? t.geometryPickAgain : pickLabel}
+		</Button>
+	{/if}
+	{#if picking}
+		<span class="text-sm min-w-0 text-muted-foreground" role="status">{t.geometryPicking}</span>
+	{:else if shown}
+		<svelte:element
+			this={readout}
+			id={onPick ? undefined : inputId}
+			class="text-sm min-w-0 truncate text-foreground"
+		>
+			{shown}
+		</svelte:element>
+		{#if onClear}
+			<Button variant="ghost" size="sm" onclick={() => clear(onClear)} {disabled}>
+				{t.geometryClear}
+			</Button>
+		{/if}
+	{:else if !onPick}
+		<output id={inputId} class="text-sm min-w-0 text-muted-foreground"
+			>{t.geometryPickInPanel}</output
+		>
+	{/if}
+</div>

package/src/lib/components/preview/inputs/NumberInput.svelte

@@ -1,21 +1,35 @@
 <script lang="ts">
 	import type { NumberWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	import { debounce } from '$lib/utils/debounce';
-	import { Input } from '$lib/components/primitives/input';
-	import { Slider } from '$lib/components/primitives/slider';
-	import * as InputGroup from '$lib/components/primitives/input-group';
-	import { Separator } from '$lib/components/primitives/separator';
-	import * as Field from '$lib/components/primitives/field';
+	import { debounce } from '#lib/utils/debounce.js';
+	import { Input } from '#lib/components/primitives/input/index.js';
+	import { Slider } from '#lib/components/primitives/slider/index.js';
+	import * as InputGroup from '#lib/components/primitives/input-group/index.js';
+	import { Separator } from '#lib/components/primitives/separator/index.js';
+	import * as Field from '#lib/components/primitives/field/index.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatMessage } from '#lib/i18n/messages.js';
 
 	interface Props {
 		inputId: string;
+		/** Id of the field's label, which also names the slider thumb. */
+		labelId?: string;
 		value?: number;
 		config?: NumberWidgetConfig;
 		onChange: (value: SupportedTypes) => void;
 		disabled?: boolean;
 	}
 
-	let { inputId, value = $bindable(), config, onChange, disabled = false }: Props = $props();
+	let {
+		inputId,
+		labelId,
+		value = $bindable(),
+		config,
+		onChange,
+		disabled = false
+	}: Props = $props();
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 
 	let validationError = $state<string | null>(null);
 
@@ -29,9 +43,9 @@
 
 	function validateNumber(val: number): string | null {
 		if (config?.minimum !== undefined && val < config.minimum)
-			return `Minimum value is ${config.minimum}`;
+			return formatMessage(t.minValue, { min: config.minimum });
 		if (config?.maximum !== undefined && val > config.maximum)
-			return `Maximum value is ${config.maximum}`;
+			return formatMessage(t.maxValue, { max: config.maximum });
 		return null;
 	}
 
@@ -44,11 +58,69 @@
 		}
 	}
 
-	function handleSliderChange(newValue: number) {
+	// bits-ui builds an array of every step and rebuilds a tick object per step on each value
+	// change, so a fine-grained range freezes the drag. Past this many steps the track drives a
+	// coarse proxy scale instead; the number box next to it still sets any exact value.
+	const MAX_TRACK_STEPS = 1000;
+	const FINE_DRAG_FACTOR = 10;
+	const stepCount = $derived((max - min) / step);
+	const useProxyTrack = $derived(
+		step > 0 && Number.isFinite(stepCount) && stepCount > MAX_TRACK_STEPS
+	);
+	const trackMin = $derived(useProxyTrack ? 0 : min);
+	const trackMax = $derived(useProxyTrack ? MAX_TRACK_STEPS : max);
+	const stepPrecision = $derived((String(step).split('.')[1] ?? '').length);
+
+	let dragging = false;
+	let shiftHeld = false;
+	let lastTrack: number | null = null;
+	let fineAnchor: { track: number; value: number } | null = null;
+
+	function snapToStep(v: number): number {
+		const clamped = Math.min(max, Math.max(min, v));
+		if (!(step > 0)) return clamped;
+		const snapped = min + Math.round((clamped - min) / step) * step;
+		return Math.min(max, Number(snapped.toFixed(stepPrecision)));
+	}
+
+	function toTrack(v: number): number {
+		return useProxyTrack ? Math.round(((v - min) / (max - min)) * MAX_TRACK_STEPS) : v;
+	}
+
+	function trackSpanToValue(trackDelta: number): number {
+		return (trackDelta / (trackMax - trackMin)) * (max - min);
+	}
+
+	// bits-ui maps the pointer to an absolute track position, so fine drag works in deltas: the
+	// value moves FINE_DRAG_FACTOR times slower than the pointer from where Shift took effect.
+	function setFromTrack(track: number) {
+		if (max <= min) return;
+		let newValue: number;
+		if (dragging && shiftHeld) {
+			fineAnchor ??= { track: lastTrack ?? track, value: numValue };
+			newValue = snapToStep(
+				fineAnchor.value + trackSpanToValue(track - fineAnchor.track) / FINE_DRAG_FACTOR
+			);
+		} else {
+			fineAnchor = null;
+			newValue = snapToStep(min + trackSpanToValue(track - trackMin));
+		}
+		lastTrack = track;
 		value = newValue;
 		commitSliderDebounced(newValue);
 	}
 
+	function startDrag(e: PointerEvent) {
+		dragging = true;
+		shiftHeld = e.shiftKey;
+		lastTrack = null;
+		fineAnchor = null;
+	}
+
+	function setShift(e: KeyboardEvent) {
+		if (e.key === 'Shift') shiftHeld = e.type === 'keydown';
+	}
+
 	const decimals = $derived(Math.max(0, -Math.floor(Math.log10(step))));
 
 	function commitTypedValue(input: HTMLInputElement) {
@@ -65,6 +137,13 @@
 	}
 </script>
 
+<svelte:window
+	onkeydown={setShift}
+	onkeyup={setShift}
+	onpointerup={() => (dragging = false)}
+	onblur={() => (shiftHeld = dragging = false)}
+/>
+
 {#if config?.renderAsSlider}
 	<!-- Value and track share one box, the height of a number input, so mixed rows line up and
 	     a value can't be read as belonging to the neighbouring slider. -->
@@ -84,14 +163,17 @@
 			}}
 		/>
 		<Separator orientation="vertical" />
-		<div class="px-3.5 min-w-0 flex flex-1 items-center">
+		<div class="px-3.5 min-w-0 flex flex-1 items-center" onpointerdowncapture={startDrag}>
+			<!-- A function binding, not value + onValueChange: when a fine drag leaves the value
+			     unchanged, the thumb must stay put instead of following the pointer. -->
 			<Slider
 				type="single"
-				value={numValue}
-				{min}
-				{max}
-				{step}
-				onValueChange={handleSliderChange}
+				bind:value={() => toTrack(numValue), setFromTrack}
+				min={trackMin}
+				max={trackMax}
+				step={useProxyTrack ? 1 : step}
+				title={t.fineDragHint}
+				thumbLabelledby={labelId}
 				{disabled}
 			/>
 		</div>