@selvajs/ui 0.9.0

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
+	import * as Select from '$lib/components/primitives/select';
+
+	interface Props {
+		value?: string;
+		config?: DropdownWidgetConfig;
+		onChange: (value: SupportedTypes) => void;
+		disabled?: boolean;
+	}
+
+	let { value, config, onChange, disabled = false }: Props = $props();
+
+	const options = $derived(config?.options || {});
+	const currentValue = $derived(value || '');
+	const currentLabel = $derived(
+		Object.entries(options).find(([_, expr]) => expr === currentValue)?.[0] ?? currentValue
+	);
+</script>
+
+<Select.Root
+	type="single"
+	value={currentValue}
+	onValueChange={(selected) => {
+		if (selected) {
+			value = selected;
+			onChange(selected);
+		}
+	}}
+	{disabled}
+>
+	<Select.Trigger class="w-full" {disabled}>
+		{currentLabel || 'Select an option...'}
+	</Select.Trigger>
+	<Select.Content>
+		{#each Object.entries(options) as [name, expr] (expr ?? name)}
+			<Select.Item value={expr ?? name} label={name} />
+		{/each}
+	</Select.Content>
+</Select.Root>

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

@@ -0,0 +1,368 @@
+<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 { FileUp, Link, CircleAlert, CircleCheck } from '@lucide/svelte';
+	import { APP_DEFAULTS } from '$lib/constants';
+
+	interface Props {
+		value?: string;
+		acceptedFormats?: string[];
+		defaultInputMode?: 'upload' | 'url';
+		allowedInputModes?: ('upload' | 'url')[];
+		onChange: (value: string) => void;
+	}
+
+	let {
+		value = $bindable(),
+		acceptedFormats = [],
+		defaultInputMode = 'upload',
+		allowedInputModes,
+		onChange
+	}: Props = $props();
+
+	// Resolve which modes are actually available
+	let effectiveModes = $derived(
+		allowedInputModes && allowedInputModes.length > 0
+			? allowedInputModes
+			: (['upload', 'url'] as const)
+	);
+	let showToggle = $derived(effectiveModes.length > 1);
+
+	// Active mode: default to defaultInputMode if allowed, otherwise first allowed mode
+	let activeMode = $state<'upload' | 'url'>('upload');
+	$effect(() => {
+		const preferred = defaultInputMode ?? 'upload';
+		activeMode = effectiveModes.includes(preferred) ? preferred : effectiveModes[0];
+	});
+
+	let fileInput: HTMLInputElement | null = $state(null);
+	let uploadedFileName = $state('');
+	let urlInput = $state('');
+	let isDragging = $state(false);
+	let isLoading = $state(false);
+	let urlError = $state<{ message: string; isCors: boolean } | null>(null);
+	let urlSuccess = $state('');
+
+	// Parse existing value if it's JSON
+	$effect(() => {
+		if (value) {
+			try {
+				const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+
+				if (parsed.type === 'base64') {
+					if (parsed._isMetadata && parsed._fileSize) {
+						const sizeMB = (parsed._fileSize / 1024 / 1024).toFixed(2);
+						uploadedFileName = `Uploaded file (${parsed.fileEnding}, ${sizeMB}MB)`;
+					} else {
+						uploadedFileName = `Uploaded file (${parsed.fileEnding})`;
+					}
+				} else if (parsed.type === 'url') {
+					urlInput = parsed.file;
+				}
+			} catch {
+				// Not JSON, ignore
+			}
+		}
+	});
+
+	function getFileExtension(filename: string): string {
+		// Strip query strings before extracting extension
+		const cleanPath = filename.split('?')[0];
+		const ext = cleanPath.includes('.') ? '.' + cleanPath.split('.').pop() : '.tmp';
+		return ext.toLowerCase();
+	}
+
+	function isValidFileExtension(fileEnding: string): boolean {
+		if (acceptedFormats.length === 0) return true;
+		return acceptedFormats.includes(fileEnding.toLowerCase());
+	}
+
+	function isCorsError(error: unknown): boolean {
+		// CORS errors surface as a generic TypeError with no useful status code
+		// because the browser blocks the response entirely
+		if (error instanceof TypeError && error.message === 'Failed to fetch') return true;
+		return false;
+	}
+
+	async function handleUrlChange() {
+		if (!urlInput.trim()) return;
+
+		// Reset all state before starting a new fetch
+		isLoading = true;
+		urlError = null;
+		urlSuccess = '';
+		uploadedFileName = '';
+
+		try {
+			// Validate URL format first
+			let parsedUrl: URL;
+			try {
+				parsedUrl = new URL(urlInput);
+			} catch {
+				urlError = { message: 'Invalid URL — make sure it starts with https://', isCors: false };
+				isLoading = false;
+				return;
+			}
+
+			if (parsedUrl.protocol !== 'https:' && parsedUrl.protocol !== 'http:') {
+				urlError = { message: 'Only http:// and https:// URLs are supported.', isCors: false };
+				isLoading = 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.`,
+					isCors: false
+				};
+				isLoading = false;
+				return;
+			}
+
+			const blob = await response.blob();
+			const fileEnding = getFileExtension(urlInput);
+
+			if (!isValidFileExtension(fileEnding)) {
+				urlError = {
+					message: `File format "${fileEnding}" is not accepted. Allowed: ${acceptedFormats.join(', ')}`,
+					isCors: false
+				};
+				isLoading = false;
+				return;
+			}
+
+			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.`,
+					isCors: false
+				};
+				isLoading = false;
+				return;
+			}
+
+			await new Promise<void>((resolve, reject) => {
+				const reader = new FileReader();
+				reader.onload = (e) => {
+					const base64 = e.target?.result as string;
+					const base64Data = base64.includes(',') ? base64.split(',')[1] : base64;
+					const data = JSON.stringify({ file: base64Data, type: 'base64', fileEnding });
+					value = data;
+					urlSuccess = `Loaded ${fileEnding} (${(blob.size / 1024).toFixed(0)} KB)`;
+					onChange(data);
+					resolve();
+				};
+				reader.onerror = () => reject(new Error('Failed to read the downloaded file.'));
+				reader.readAsDataURL(blob);
+			});
+		} catch (error) {
+			if (isCorsError(error)) {
+				const host = (() => {
+					try {
+						return new URL(urlInput).hostname;
+					} catch {
+						return '';
+					}
+				})();
+				// We can't distinguish CORS blocks from non-CORS network errors (404, DNS fail, etc.)
+				// because the browser hides all of them behind the same opaque TypeError.
+				// Give a message that covers both cases.
+				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.';
+				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.';
+				} 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.';
+				} 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.';
+				}
+				urlError = {
+					message: `Could not reach "${host}" — the file may not exist, or the server does not allow browser access.`,
+					isCors: true,
+					// @ts-expect-error hint is properly typed at runtime
+					hint
+				};
+			} else {
+				urlError = {
+					message: error instanceof Error ? error.message : 'Unknown error',
+					isCors: false
+				};
+			}
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function handleFileUpload(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const file = target.files?.[0];
+		if (!file) return;
+
+		const fileEnding = getFileExtension(file.name);
+
+		if (!isValidFileExtension(fileEnding)) {
+			alert(`File format not accepted: ${fileEnding}`);
+			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;
+
+			const data = JSON.stringify({
+				file: base64Data,
+				type: 'base64',
+				fileEnding
+			});
+			value = data;
+			onChange(data);
+		};
+		reader.readAsDataURL(file);
+	}
+
+	function openFilePicker() {
+		fileInput?.click();
+	}
+
+	function handleDragOver(e: DragEvent) {
+		e.preventDefault();
+		isDragging = true;
+	}
+
+	function handleDragLeave() {
+		isDragging = false;
+	}
+
+	function handleDrop(e: DragEvent) {
+		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 acceptAttribute = $derived(acceptedFormats.length > 0 ? acceptedFormats.join(',') : '*');
+</script>
+
+<div class="gap-4 flex w-full flex-col">
+	<input
+		bind:this={fileInput}
+		type="file"
+		accept={acceptAttribute}
+		onchange={handleFileUpload}
+		class="hidden"
+	/>
+
+	{#if showToggle}
+		<div class="rounded text-xs flex overflow-hidden border">
+			{#each effectiveModes as mode (mode)}
+				<button
+					type="button"
+					onclick={() => (activeMode = mode)}
+					class={`px-3 py-1 flex-1 transition-colors ${
+						activeMode === mode
+							? 'bg-primary text-primary-foreground'
+							: 'text-muted-foreground hover:bg-accent'
+					}`}
+				>
+					{mode === 'upload' ? 'Upload' : 'URL'}
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	{#if activeMode === 'url'}
+		<div class="gap-2 flex flex-col">
+			<Label for="url-input" class="gap-2 flex items-center">
+				<Link size={16} />
+				File URL
+			</Label>
+			<div class="gap-2 flex">
+				<Input
+					id="url-input"
+					type="url"
+					bind:value={urlInput}
+					placeholder="https://example.com/model.3dm"
+					disabled={isLoading}
+					class={urlError ? 'border-destructive focus-visible:ring-destructive' : ''}
+					oninput={() => {
+						urlError = null;
+						urlSuccess = '';
+					}}
+				/>
+				<Button
+					type="button"
+					variant="outline"
+					disabled={isLoading || !urlInput.trim()}
+					onclick={handleUrlChange}
+				>
+					{isLoading ? 'Fetching...' : 'Fetch'}
+				</Button>
+			</div>
+
+			{#if urlSuccess}
+				<div class="gap-1.5 text-xs flex items-center text-success">
+					<CircleCheck size={13} />
+					{urlSuccess}
+				</div>
+			{/if}
+
+			{#if urlError}
+				<div
+					class="p-2.5 gap-1.5 flex flex-col rounded-md border border-destructive/40 bg-destructive/5"
+				>
+					<div class="gap-1.5 flex items-start">
+						<CircleAlert size={13} class="mt-0.5 shrink-0 text-destructive" />
+						<p class="text-xs leading-snug text-destructive">{urlError.message}</p>
+					</div>
+					{#if urlError.isCors && (urlError as any).hint}
+						<p class="text-xs leading-snug pl-5 text-muted-foreground">{(urlError as any).hint}</p>
+					{/if}
+				</div>
+			{/if}
+
+			{#if !urlError && !urlSuccess}
+				<p class="text-xs text-muted-foreground">
+					URL must be publicly accessible (no login required).
+				</p>
+			{/if}
+		</div>
+	{:else}
+		<div class="gap-2 flex flex-col">
+			<Label for="file-upload" class="gap-2 flex items-center">
+				<FileUp size={16} />
+				Upload File
+			</Label>
+			<Button
+				type="button"
+				variant="outline"
+				class="gap-2 w-full {isDragging ? 'border-primary' : ''}"
+				onclick={openFilePicker}
+				ondragover={handleDragOver}
+				ondragleave={handleDragLeave}
+				ondrop={handleDrop}
+			>
+				<FileUp size={16} />
+				{uploadedFileName || 'Choose File or Drag & Drop'}
+			</Button>
+			{#if acceptedFormats.length > 0}
+				<p class="text-xs text-muted-foreground">
+					Accepted formats: {acceptedFormats.join(', ')}
+				</p>
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,152 @@
+<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 Field from '$lib/components/primitives/field';
+
+	interface Props {
+		inputId: string;
+		value?: number;
+		config?: NumberWidgetConfig;
+		onChange: (value: SupportedTypes) => void;
+		disabled?: boolean;
+	}
+
+	let { inputId, value = $bindable(), config, onChange, disabled = false }: Props = $props();
+
+	let validationError = $state<string | null>(null);
+	let sliderEditing = $state(false);
+	let sliderInputValue = $state('');
+
+	const min = $derived(config?.minimum ?? 0);
+	const max = $derived(config?.maximum ?? 100);
+	const step = $derived(config?.stepSize ?? 1);
+	const numValue = $derived(typeof value === 'number' ? value : min);
+
+	const commitDebounced = debounce((newValue: SupportedTypes) => onChange(newValue), 400);
+	const commitSliderDebounced = debounce((newValue: SupportedTypes) => onChange(newValue), 150);
+
+	function validateNumber(val: number): string | null {
+		if (config?.minimum !== undefined && val < config.minimum)
+			return `Minimum value is ${config.minimum}`;
+		if (config?.maximum !== undefined && val > config.maximum)
+			return `Maximum value is ${config.maximum}`;
+		return null;
+	}
+
+	function handleNumberInput(newValue: number) {
+		const error = validateNumber(newValue);
+		validationError = error;
+		if (!error) {
+			value = newValue;
+			commitDebounced(newValue);
+		}
+	}
+
+	function handleSliderChange(newValue: number) {
+		value = newValue;
+		commitSliderDebounced(newValue);
+	}
+
+	function focusSliderInput(node: HTMLInputElement) {
+		node.focus();
+		node.select();
+	}
+
+	function decimalPlaces(stepSize: number): number {
+		return Math.max(0, -Math.floor(Math.log10(stepSize)));
+	}
+</script>
+
+{#if config?.renderAsSlider}
+	{@const dp = decimalPlaces(step)}
+	<div class="gap-4 flex items-center">
+		<Slider
+			type="single"
+			value={numValue}
+			{min}
+			{max}
+			{step}
+			class="flex-1"
+			onValueChange={handleSliderChange}
+			{disabled}
+		/>
+		{#if sliderEditing}
+			<input
+				use:focusSliderInput
+				type="number"
+				{step}
+				class="min-w-12 w-16 text-sm border-b border-border bg-transparent text-right outline-none focus:border-foreground"
+				bind:value={sliderInputValue}
+				onblur={() => {
+					const parsed = parseFloat(sliderInputValue);
+					if (!isNaN(parsed)) handleSliderChange(Math.min(max, Math.max(min, parsed)));
+					sliderEditing = false;
+				}}
+				onkeydown={(e) => {
+					if (e.key === 'Enter') {
+						const parsed = parseFloat(sliderInputValue);
+						if (!isNaN(parsed)) handleSliderChange(Math.min(max, Math.max(min, parsed)));
+						sliderEditing = false;
+					} else if (e.key === 'Escape') {
+						sliderEditing = false;
+					}
+				}}
+			/>
+		{:else}
+			<span
+				role="button"
+				tabindex={0}
+				class="min-w-12 text-sm cursor-text text-right text-muted-foreground select-none"
+				title="Double-click to edit"
+				ondblclick={() => {
+					sliderInputValue = numValue.toFixed(dp);
+					sliderEditing = true;
+				}}
+				onkeydown={(e) => {
+					if (e.key === 'Enter' || e.key === ' ') {
+						sliderInputValue = numValue.toFixed(dp);
+						sliderEditing = true;
+					}
+				}}
+			>
+				{numValue.toFixed(dp)}
+			</span>
+		{/if}
+	</div>
+{:else}
+	<Input
+		id={inputId}
+		type="number"
+		value={numValue}
+		min={config?.minimum}
+		max={config?.maximum}
+		{step}
+		placeholder={config?.placeholder}
+		data-invalid={validationError ? true : undefined}
+		aria-invalid={validationError ? true : undefined}
+		class={validationError ? 'border-destructive' : ''}
+		{disabled}
+		oninput={() => (validationError = null)}
+		onchange={(e) => {
+			const newValue = parseFloat((e.currentTarget as HTMLInputElement).value);
+			if (!isNaN(newValue)) handleNumberInput(newValue);
+		}}
+		onblur={(e) => {
+			const newValue = parseFloat((e.currentTarget as HTMLInputElement).value);
+			if (!isNaN(newValue)) {
+				const error = validateNumber(newValue);
+				validationError = error;
+				if (!error) {
+					value = newValue;
+					onChange(newValue);
+				}
+			}
+		}}
+	/>
+{/if}
+
+{#if validationError}
+	<Field.Error>{validationError}</Field.Error>
+{/if}

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

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { TextWidgetConfig, SupportedTypes } from '@selvajs/schemas';
+	import { debounce } from '$lib/utils/debounce';
+	import { Input } from '$lib/components/primitives/input';
+	import * as Field from '$lib/components/primitives/field';
+
+	interface Props {
+		inputId: string;
+		value?: string;
+		config?: TextWidgetConfig;
+		onChange: (value: SupportedTypes) => void;
+		disabled?: boolean;
+	}
+
+	let { inputId, value = $bindable(), config, onChange, disabled = false }: Props = $props();
+
+	let validationError = $state<string | null>(null);
+	let currentValue = $state(value || '');
+
+	const commitDebounced = debounce((newValue: SupportedTypes) => onChange(newValue), 400);
+
+	function validateText(val: string): string | null {
+		if (config?.maxLength && val.length > config.maxLength)
+			return `Maximum ${config.maxLength} characters allowed`;
+		if (config?.pattern) {
+			try {
+				if (!new RegExp(config.pattern).test(val))
+					return config.customErrorMessage || 'Invalid format';
+			} catch {
+				return 'Invalid validation pattern configured';
+			}
+		}
+		return null;
+	}
+
+	function handleChange() {
+		const error = validateText(currentValue);
+		validationError = error;
+		if (!error) {
+			value = currentValue;
+			commitDebounced(currentValue);
+		}
+	}
+</script>
+
+<Input
+	id={inputId}
+	type="text"
+	bind:value={currentValue}
+	placeholder={config?.placeholder}
+	maxlength={config?.maxLength}
+	data-invalid={validationError ? true : undefined}
+	aria-invalid={validationError ? true : undefined}
+	class={validationError ? 'border-destructive' : ''}
+	{disabled}
+	oninput={() => {
+		validationError = null;
+		handleChange();
+	}}
+	onblur={(e) => {
+		const val = (e.currentTarget as HTMLInputElement).value;
+		const error = validateText(val);
+		validationError = error;
+		if (!error) {
+			currentValue = val;
+			value = val;
+			onChange(val);
+		}
+	}}
+/>
+
+{#if validationError}
+	<Field.Error>{validationError}</Field.Error>
+{/if}

package/src/lib/components/preview/inputs/index.ts

@@ -0,0 +1,7 @@
+export { default as CheckboxInput } from './CheckboxInput.svelte';
+export { default as ChecklistInput } from './ChecklistInput.svelte';
+export { default as ColorInput } from './ColorInput.svelte';
+export { default as DropdownInput } from './DropdownInput.svelte';
+export { default as FileInput } from './FileInput.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as TextInput } from './TextInput.svelte';

package/src/lib/components/primitives/CalculateButton.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Button } from './button';
+	import { Zap, Check, Loader, Play } from '@lucide/svelte';
+
+	interface Props {
+		hasPendingChanges: boolean;
+		hasNeverSolved?: boolean;
+		isSolving: boolean;
+		oncalculate: () => void;
+	}
+
+	let { hasPendingChanges, hasNeverSolved = false, isSolving, oncalculate }: Props = $props();
+</script>
+
+<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border/50">
+	<Button
+		variant={hasPendingChanges ? 'default' : 'ghost'}
+		size="lg"
+		onclick={() => !isSolving && oncalculate()}
+		disabled={!hasPendingChanges && !isSolving}
+		aria-busy={isSolving}
+		class="gap-2 font-medium w-full transition-all duration-200
+			{hasPendingChanges && !isSolving ? 'selva-pending-pulse shadow-md' : ''}
+			{!hasPendingChanges && !isSolving ? 'text-muted-foreground' : ''}"
+	>
+		{#if isSolving}
+			<Loader class="h-4 w-4 animate-spin" />
+			Solving...
+		{:else if hasNeverSolved}
+			<Play class="h-4 w-4" />
+			Press to calculate
+		{:else if hasPendingChanges}
+			<Zap class="h-4 w-4" />
+			Calculate
+		{:else}
+			<Check class="h-4 w-4" />
+			Up to date
+		{/if}
+	</Button>
+</div>