1 files changed, 32 insertions, 0 deletions
diff --git a/src/features/surface-host/ui/Selector.svelte b/src/features/surface-host/ui/Selector.svelte
new file mode 100644
index 0000000..2da104f
--- /dev/null
+++ b/src/features/surface-host/ui/Selector.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { InvokeMessage } from "@dispatch/ui-contract";
+	import type { SelectorFieldView } from "../logic/types";
+
+	let {
+		field,
+		surfaceId,
+		onInvoke,
+	}: { field: SelectorFieldView; surfaceId: string; onInvoke: (msg: InvokeMessage) => void } =
+		$props();
+
+	function handleChange(event: Event) {
+		const target = event.target as HTMLSelectElement;
+		onInvoke({
+			type: "invoke",
+			surfaceId,
+			actionId: field.action.actionId,
+			payload: target.value,
+		});
+	}
+</script>
+
+<label>
+	{field.label}
+	<select onchange={handleChange}>
+		{#each field.options as option (option.value)}
+			<option value={option.value} selected={option.value === field.value}>
+				{option.label}
+			</option>
+		{/each}
+	</select>
+</label>