feat: add offset field component

web/src/lib/components/kit/SchemaFields.svelte

@@ -13,6 +13,7 @@
 	import RangeControl from "./fields/schema/RangeControl.svelte";
 	import SelectControl from "./fields/schema/SelectControl.svelte";
 	import TextControl from "./fields/schema/TextControl.svelte";
+	import OffsetControl from "./fields/schema/OffsetControl.svelte";
 
 	interface FieldControlProps {
 		label: string;
@@ -30,6 +31,7 @@
 		checkbox: CheckboxControl,
 		text: TextControl,
 		dimension: DimensionField,
+		offset: OffsetControl,
 	};
 
 	interface Props {

web/src/lib/components/kit/fields/schema/OffsetControl.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { FieldSpec, Offset, OffsetSpec } from "$lib/registry-schema";
+
+	interface Props {
+		label: string;
+		value: unknown;
+		spec: FieldSpec;
+		onchange?: (value: Offset) => void;
+	}
+	let { label, value, spec, onchange }: Props = $props();
+
+	const sp = $derived(spec as OffsetSpec);
+	const current = $derived.by(() => {
+		const v = value as Partial<Offset> | undefined;
+		return {
+			x: typeof v?.x === "number" && Number.isFinite(v.x) ? v.x : sp.x,
+			y: typeof v?.y === "number" && Number.isFinite(v.y) ? v.y : sp.y,
+		};
+	});
+
+	function setAxis(axis: "x" | "y", n: number) {
+		onchange?.({ ...current, [axis]: n });
+	}
+</script>
+
+<div class="control offset-control">
+	<span class="offset-label">{label}</span>
+	<div class="offset-field">
+		<label class="offset-axis">
+			<span>X</span>
+			<input
+				type="number"
+				min={sp.min}
+				max={sp.max}
+				value={current.x}
+				oninput={(e) =>
+					setAxis("x", Number((e.target as HTMLInputElement).value))}
+			/>
+		</label>
+		<label class="offset-axis">
+			<span>Y</span>
+			<input
+				type="number"
+				min={sp.min}
+				max={sp.max}
+				value={current.y}
+				oninput={(e) =>
+					setAxis("y", Number((e.target as HTMLInputElement).value))}
+			/>
+		</label>
+	</div>
+</div>
+
+<style>
+	.control {
+		display: grid;
+		gap: var(--space-m);
+		margin-bottom: var(--space-xl);
+		color: var(--color-text-muted);
+		font: var(--font-size-s) var(--font-mono);
+		letter-spacing: var(--space-text-m);
+	}
+	.offset-label {
+		color: var(--color-text);
+		font-size: var(--font-size-s);
+		letter-spacing: var(--space-text-l);
+		text-transform: uppercase;
+	}
+	.offset-field {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: var(--space-m);
+	}
+	.offset-axis > span {
+		display: block;
+		margin-bottom: var(--space-m);
+	}
+	.offset-axis input {
+		width: 100%;
+		padding: var(--space-m) var(--space-l);
+		background: var(--color-background);
+		border: var(--size-border) solid var(--color-border);
+		border-radius: var(--radius-s);
+		color: var(--color-text);
+		font: var(--font-size-s) var(--font-mono);
+	}
+</style>