@selvajs/ui 6.6.0-beta.8 → 6.6.0-beta.9

package/src/lib/components/preview/InputControl.svelte

@@ -4,6 +4,7 @@
 		FileInputWidgetConfig,
 		DynamicValueListWidgetConfig,
 		DropdownWidgetConfig,
+		UISchema,
 		SupportedTypes
 	} from '@selvajs/schemas';
 	import {
@@ -16,6 +17,8 @@
 		isColorWidget
 	} from '@selvajs/schemas';
 	import * as Field from '$lib/components/primitives/field';
+	import { Button } from '$lib/components/primitives/button';
+	import { toast } from '$lib/components/primitives/sonner';
 	import HelpButton from './HelpButton.svelte';
 	import {
 		CheckboxInput,
@@ -23,11 +26,21 @@
 		ColorInput,
 		DropdownInput,
 		FileInput,
+		GeometryInput,
 		NumberInput,
-		TextInput
+		SegmentedInput,
+		TextInput,
+		TileInput
 	} from '$lib/components/preview/inputs';
 	import { getClientSlot } from '$lib/contexts/clientSlotContext.svelte';
+	import {
+		getHostContext,
+		type GeometryPickTarget,
+		type PickKind
+	} from '$lib/contexts/hostContext.svelte';
 	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { isGeometryParamType, isTriggerItem } from '$lib/schema/host-support';
+	import { resolveOptionDisplay } from '$lib/schema/option-display';
 
 	interface Props {
 		item: InputLayoutItem;
@@ -42,6 +55,10 @@
 		disabled?: boolean;
 		/** Runtime-computed options for a dynamic value list input (name -> value). */
 		dynamicOptions?: Record<string, string>;
+		/** The input's paramType: a geometry input gets its control from this, not from the widget type. */
+		paramType?: string;
+		/** The schema's icons and thumbnails, which value-list options point into. */
+		assets?: UISchema['assets'];
 	}
 
 	let {
@@ -50,10 +67,25 @@
 		displayName,
 		onChange,
 		disabled = false,
-		dynamicOptions
+		dynamicOptions,
+		paramType,
+		assets
 	}: Props = $props();
 
 	const locale = getLocaleContext();
+	const hostActions = getHostContext();
+	const { pickGeometry, clearGeometry, onGeometrySummary } = hostActions;
+	const isGeometry = $derived(isGeometryParamType(paramType));
+	const isTrigger = $derived(isTriggerItem(item));
+	const pickTarget = $derived(
+		isGeometry ? hostActions.describeGeometry?.(item.paramId) : undefined
+	);
+
+	// Get Point/Line/Plane take their own kind; Get Geometry takes what its filter allows.
+	function pickKinds(target: GeometryPickTarget | undefined): readonly PickKind[] | undefined {
+		if (paramType === 'point' || paramType === 'line' || paramType === 'plane') return [paramType];
+		return target?.kinds;
+	}
 
 	const inputId = $derived(`input-${item.paramId}`);
 	const label = $derived(displayName || item.displayName || item.paramId);
@@ -102,7 +134,8 @@
 	// As a dropdown config so DropdownInput/ChecklistInput can consume it unchanged.
 	const dynamicListAsDropdownConfig = $derived<DropdownWidgetConfig>({
 		options: dynamicListOptions,
-		displayAs: dynamicListConfig?.displayAs ?? 'dropdown'
+		displayAs: dynamicListConfig?.displayAs ?? 'dropdown',
+		optionMedia: dynamicListConfig?.optionMedia
 	});
 	const hideDynamicListWhenEmpty = $derived(
 		isDynamicValueListWidget(item) &&
@@ -173,6 +206,48 @@
 	}
 </script>
 
+{#snippet valueList(config: DropdownWidgetConfig)}
+	{@const display = resolveOptionDisplay(
+		config.displayAs,
+		Object.keys(config.options ?? {}).length
+	)}
+	{@const single = typeof value === 'string' ? value : ''}
+	{#if display === 'checklist'}
+		<ChecklistInput
+			{inputId}
+			value={Array.isArray(value)
+				? (value as string[])
+				: typeof value === 'string' && value
+					? [value]
+					: []}
+			{config}
+			{assets}
+			onChange={commit}
+			{disabled}
+		/>
+	{:else if display === 'segmented'}
+		<SegmentedInput
+			labelId="{inputId}-label"
+			value={single}
+			{config}
+			{assets}
+			onChange={commit}
+			{disabled}
+		/>
+	{:else if display === 'tiles'}
+		<TileInput
+			labelId="{inputId}-label"
+			value={single}
+			{config}
+			{assets}
+			onChange={commit}
+			{disabled}
+		/>
+	{:else}
+		<DropdownInput value={single} {config} {assets} onChange={commit} {disabled} />
+	{/if}
+{/snippet}
+
 {#snippet labelText(forId?: string, tone: 'quiet' | 'strong' = 'quiet')}
 	<Field.Label
 		for={forId}
@@ -218,6 +293,34 @@
 			})}
 		</div>
 	{/if}
+{:else if isGeometry}
+	<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
+		{@render fieldHeader(inputId)}
+		<GeometryInput
+			{inputId}
+			kinds={pickKinds(pickTarget)}
+			atMost={pickTarget?.atMost}
+			summary={typeof value === 'string' ? value : undefined}
+			onPick={pickGeometry && (() => pickGeometry(item.paramId))}
+			onClear={clearGeometry && (() => clearGeometry(item.paramId))}
+			watchSummary={onGeometrySummary && ((listener) => onGeometrySummary(item.paramId, listener))}
+			onError={(message) => toast.error(message)}
+			{disabled}
+		/>
+	</div>
+{:else if isTrigger}
+	<div role="group" class="group/field gap-1.5 min-w-0 flex items-center" data-control-line>
+		<Button
+			id={inputId}
+			variant="outline"
+			class="min-w-0 flex-1"
+			onclick={() => hostActions.trigger?.(item.paramId)}
+			disabled={disabled || !hostActions.trigger || hostActions.isSolving?.()}
+		>
+			<span class="truncate">{label}</span>
+		</Button>
+		{@render helpButton()}
+	</div>
 {:else if !hideDynamicListWhenEmpty}
 	<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
 		{#if !isCheckboxWidget(item)}
@@ -254,49 +357,10 @@
 				{disabled}
 			/>
 		{:else if isDropdownWidget(item)}
-			{@const config = item.config}
-			{#if config.displayAs === 'checklist'}
-				<ChecklistInput
-					{inputId}
-					value={Array.isArray(value)
-						? (value as string[])
-						: typeof value === 'string' && value
-							? [value]
-							: []}
-					{config}
-					onChange={commit}
-					{disabled}
-				/>
-			{:else}
-				<DropdownInput
-					value={typeof value === 'string' ? value : ''}
-					{config}
-					onChange={commit}
-					{disabled}
-				/>
-			{/if}
+			{@render valueList(item.config)}
 		{:else if isDynamicValueListWidget(item)}
 			{#if dynamicListHasOptions}
-				{#if dynamicListAsDropdownConfig.displayAs === 'checklist'}
-					<ChecklistInput
-						{inputId}
-						value={Array.isArray(value)
-							? (value as string[])
-							: typeof value === 'string' && value
-								? [value]
-								: []}
-						config={dynamicListAsDropdownConfig}
-						onChange={commit}
-						{disabled}
-					/>
-				{:else}
-					<DropdownInput
-						value={typeof value === 'string' ? value : ''}
-						config={dynamicListAsDropdownConfig}
-						onChange={commit}
-						{disabled}
-					/>
-				{/if}
+				{@render valueList(dynamicListAsDropdownConfig)}
 			{:else}
 				<p class="text-sm text-muted-foreground">{locale.messages.noOptionsYet}</p>
 			{/if}

package/src/lib/components/preview/TabContent.svelte

@@ -3,6 +3,7 @@
 		TabConfig,
 		SchemaInput,
 		DiscoveredOutput,
+		UISchema,
 		SupportedTypes,
 		InputLayoutItem,
 		OutputLayoutItem
@@ -14,6 +15,8 @@
 	import InputControl from './InputControl.svelte';
 	import OutputDisplay from './OutputDisplay.svelte';
 	import { evaluateGroupVisibility } from '$lib/schema/visibility-rules';
+	import { isSupportedOn, layoutItemKind } from '$lib/schema/host-support';
+	import { getHostContext } from '$lib/contexts/hostContext.svelte';
 	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
 
 	const locale = getLocaleContext();
@@ -29,6 +32,10 @@
 		outputs: DiscoveredOutput[];
 		/** Computed value list options keyed by the target dynamic-value-list input id. */
 		dynamicOptions?: Record<string, Record<string, string>>;
+		/** The schema's icons and thumbnails, which value-list options point into. */
+		assets?: UISchema['assets'];
+		/** No tinted backdrop and no scroll area of its own: the container scrolls. */
+		bare?: boolean;
 	}
 
 	let {
@@ -39,11 +46,24 @@
 		onValueChange,
 		inputs,
 		outputs,
-		dynamicOptions = {}
+		dynamicOptions = {},
+		assets,
+		bare = false
 	}: Props = $props();
 
+	const { host } = getHostContext();
+
+	// An element this host can't render is left out, not shown broken: its input still solves with
+	// the definition's own default. A group left with nothing to show goes too.
 	const visibleGroups = $derived(
-		tab.groups.filter((group) => evaluateGroupVisibility(group, values))
+		tab.groups
+			.filter((group) => evaluateGroupVisibility(group, values))
+			.flatMap((group) => {
+				const items = group.items.filter((item) =>
+					isSupportedOn(host, layoutItemKind(item, inputs))
+				);
+				return items.length > 0 || group.items.length === 0 ? [{ ...group, items }] : [];
+			})
 	);
 
 	function getInputById(paramId: string): SchemaInput | undefined {
@@ -68,6 +88,8 @@
 			onChange={onValueChange}
 			disabled={visibility.disabled}
 			dynamicOptions={dynamicOptions[input.id]}
+			paramType={input.paramType}
+			{assets}
 		/>
 	{/if}
 {/snippet}
@@ -83,34 +105,44 @@
 	{/if}
 {/snippet}
 
-<Tabs.Content value={tab.id} class="min-h-0">
-	<div class="h-full bg-muted dark:bg-background">
-		<ScrollArea class="h-full" orientation="vertical">
-			<div class="px-3">
-				<!-- A heading per panel lets a screen reader jump between them; the tab, when shown,
+{#snippet body()}
+	<div class={bare ? 'px-1' : 'px-3'}>
+		<!-- A heading per panel lets a screen reader jump between them; the tab, when shown,
 				     already names it on screen. -->
-				<h2 class="sr-only">{tab.label}</h2>
-				{#if visibleGroups.length === 0}
-					<StateDisplay type="empty" size="medium" message={t.tabNoGroups} />
-				{:else}
-					<div class="gap-3 py-3 flex flex-col">
-						{#each visibleGroups as group (group.id)}
-							<Group
-								label={group.label}
-								description={group.description}
-								items={group.items}
-								columns={group.columns ?? 1}
-								collapsed={collapsedGroups[group.id] ?? false}
-								{values}
-								onToggle={() => onToggleGroup(group.id)}
-								inputSnippet={renderInput}
-								outputSnippet={renderOutput}
-								flat={visibleGroups.length === 1}
-							/>
-						{/each}
-					</div>
-				{/if}
+		<h2 class="sr-only">{tab.label}</h2>
+		{#if visibleGroups.length === 0}
+			<StateDisplay type="empty" size="medium" message={t.tabNoGroups} />
+		{:else}
+			<div class="gap-3 py-3 flex flex-col">
+				{#each visibleGroups as group (group.id)}
+					<Group
+						label={group.label}
+						description={group.description}
+						items={group.items}
+						columns={group.columns ?? 1}
+						collapsed={collapsedGroups[group.id] ?? false}
+						{values}
+						onToggle={() => onToggleGroup(group.id)}
+						inputSnippet={renderInput}
+						outputSnippet={renderOutput}
+						flat={visibleGroups.length === 1}
+					/>
+				{/each}
 			</div>
-		</ScrollArea>
+		{/if}
 	</div>
+{/snippet}
+
+<Tabs.Content value={tab.id} class="min-h-0">
+	{#if bare}
+		{@render body()}
+	{:else}
+		<div class="h-full bg-muted dark:bg-background">
+			<!-- `auto`, not the default `hover`: a hover-only bar comes and goes with the pointer,
+			     and a host that freezes mid-solve drops the pointer state with it. -->
+			<ScrollArea class="h-full" orientation="vertical" type="auto">
+				{@render body()}
+			</ScrollArea>
+		</div>
+	{/if}
 </Tabs.Content>

package/src/lib/components/preview/TabLayout.svelte

@@ -15,9 +15,21 @@
 		panelFilter?: 'left' | 'right';
 		/** Externally request a specific tab to be active (e.g. from collapsed strip click) */
 		requestedTabId?: string | null;
+		/**
+		 * Drops the card frame and the tab's own scroll area, for a container that already frames
+		 * and scrolls it (the phone drawer). Nested, the inner scroll gets only a sliver of height.
+		 */
+		bare?: boolean;
 	}
 
-	let { schema, values, onValueChange, panelFilter, requestedTabId = null }: Props = $props();
+	let {
+		schema,
+		values,
+		onValueChange,
+		panelFilter,
+		requestedTabId = null,
+		bare = false
+	}: Props = $props();
 
 	let activeTabId = $state('');
 	let collapsedGroups = $state<Record<string, boolean>>({});
@@ -66,7 +78,7 @@
 	}
 </script>
 
-<Card.Root variant="flush" class="min-h-0 mx-1 flex-1">
+{#snippet tabs()}
 	<Tabs.Root value={activeTabId} variant="line" class="min-h-0 flex-1">
 		{#if showTabBar}
 			<TabBar tabs={visibleTabs} {activeTabId} onTabChange={handleTabChange} />
@@ -82,7 +94,17 @@
 				inputs={schema.inputs}
 				outputs={schema.outputs}
 				{dynamicOptions}
+				assets={schema.assets}
+				{bare}
 			/>
 		{/each}
 	</Tabs.Root>
-</Card.Root>
+{/snippet}
+
+{#if bare}
+	{@render tabs()}
+{:else}
+	<Card.Root variant="flush" class="min-h-0 mx-1 flex-1">
+		{@render tabs()}
+	</Card.Root>
+{/if}

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

@@ -1,17 +1,20 @@
 <script lang="ts">
-	import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
 	import { Checkbox } from '$lib/components/primitives/checkbox';
+	import { optionGlyph } from '$lib/schema/option-display';
+	import OptionGlyph from './OptionGlyph.svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 
 	interface Props {
 		inputId: string;
 		value?: string[];
 		config?: DropdownWidgetConfig;
+		assets?: UISchema['assets'];
 		onChange: (value: SupportedTypes) => void;
 		disabled?: boolean;
 	}
 
-	let { inputId, value, config, onChange, disabled = false }: Props = $props();
+	let { inputId, value, config, assets, onChange, disabled = false }: Props = $props();
 
 	const options = $derived(config?.options ?? {});
 	const selected = $derived(new Set(value ?? []));
@@ -32,6 +35,7 @@
 		{@const optionValue = expr ?? name}
 		{@const optionId = `${inputId}-${optionValue}`}
 		{@const isSelected = selected.has(optionValue)}
+		{@const glyph = optionGlyph(config?.optionMedia?.[name], assets)}
 		<label
 			for={optionId}
 			class="gap-3 px-3 py-2 text-sm flex items-center transition-colors select-none hover:bg-accent/50 {isSelected
@@ -44,6 +48,7 @@
 				onCheckedChange={(state) => toggle(optionValue, state === true)}
 				{disabled}
 			/>
+			{#if glyph}<OptionGlyph {glyph} class="text-muted-foreground" />{/if}
 			<span class="flex-1" class:font-medium={isSelected}>{name}</span>
 		</label>
 	{/each}

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

@@ -1,16 +1,19 @@
 <script lang="ts">
-	import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
 	import * as Select from '$lib/components/primitives/select';
+	import { optionGlyph } from '$lib/schema/option-display';
+	import OptionGlyph from './OptionGlyph.svelte';
 	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
 
 	interface Props {
 		value?: string;
 		config?: DropdownWidgetConfig;
+		assets?: UISchema['assets'];
 		onChange: (value: SupportedTypes) => void;
 		disabled?: boolean;
 	}
 
-	let { value, config, onChange, disabled = false }: Props = $props();
+	let { value, config, assets, onChange, disabled = false }: Props = $props();
 
 	const locale = getLocaleContext();
 
@@ -19,6 +22,8 @@
 	const currentLabel = $derived(
 		Object.entries(options).find(([_, expr]) => expr === currentValue)?.[0] ?? currentValue
 	);
+	const glyphOf = (name: string) => optionGlyph(config?.optionMedia?.[name], assets);
+	const currentGlyph = $derived(glyphOf(currentLabel));
 </script>
 
 <Select.Root
@@ -33,11 +38,18 @@
 	{disabled}
 >
 	<Select.Trigger class="w-full" {disabled}>
-		{currentLabel || locale.messages.selectOption}
+		<span class="gap-2 min-w-0 flex items-center">
+			{#if currentGlyph}<OptionGlyph glyph={currentGlyph} />{/if}
+			<span class="truncate">{currentLabel || locale.messages.selectOption}</span>
+		</span>
 	</Select.Trigger>
 	<Select.Content>
 		{#each Object.entries(options) as [name, expr] (name)}
-			<Select.Item value={expr ?? name} label={name} />
+			{@const glyph = glyphOf(name)}
+			<Select.Item value={expr ?? name} label={name}>
+				{#if glyph}<OptionGlyph {glyph} />{/if}
+				{name}
+			</Select.Item>
 		{/each}
 	</Select.Content>
 </Select.Root>

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

@@ -7,6 +7,8 @@
 	import { APP_DEFAULTS } from '$lib/constants';
 	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
 	import { formatMessage } from '$lib/i18n/messages';
+	import { pickFile } from '$lib/utils/host-files';
+	import { acceptsFileEnding, isWebp, shouldConvertWebp, webpToPng } from '$lib/utils/webp-to-png';
 
 	interface Props {
 		value?: string;
@@ -40,7 +42,6 @@
 		activeMode = effectiveModes.includes(preferred) ? preferred : effectiveModes[0];
 	});
 
-	let fileInput: HTMLInputElement | null = $state(null);
 	let uploadedFileName = $state('');
 	let urlInput = $state('');
 	let isDragging = $state(false);
@@ -94,9 +95,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 {
@@ -138,14 +157,16 @@
 				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: formatNotAccepted(fileEnding), 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 = {
@@ -155,15 +176,7 @@
 				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(t.fileReadFailed));
-				reader.readAsDataURL(blob);
-			});
+			const base64Data = await readBase64(blob);
 			const data = JSON.stringify({ file: base64Data, type: 'base64', fileEnding });
 			value = data;
 			urlSuccess = formatMessage(t.fileLoaded, {
@@ -206,48 +219,39 @@
 		}
 	}
 
-	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)) {
-			toast.error(formatNotAccepted(fileEnding));
-			return;
-		}
+	async function handleFile(file: File) {
+		const requestedEnding = getFileExtension(file.name);
 
-		// 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(formatTooLarge(file.size));
+		if (!acceptsFileEnding(requestedEnding, acceptedFormats)) {
+			toast.error(formatNotAccepted(requestedEnding));
 			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) {
@@ -263,27 +267,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)}