fix: update field spec types

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

@@ -1,8 +1,23 @@
 <script lang="ts">
 	import type {
+		CheckboxSpec,
+		ColorListSpec,
+		ColorPairSpec,
+		ColorSpec,
 		Dimension,
+		DimensionSpec,
 		FieldSpec,
 		FieldSpecKind,
+		FontStyleSpec,
+		GradientSpec,
+		NumberSpec,
+		OffsetSpec,
+		PlateSpec,
+		Position9Spec,
+		SegmentedSpec,
+		SelectSpec,
+		SliderSpec,
+		TextSpec,
 		ToolSchema,
 	} from "$lib/registry-schema";
 	import { effectiveMax, resolveLayoutGroups } from "$lib/registry-schema";
@@ -36,22 +51,34 @@
 		onchange?: (value: unknown, axis?: "width" | "height" | "both") => void;
 	}
 
+	// The kind key of FIELDS guarantees the spec subtype at runtime (fieldSpecs
+	// map in registry-schema); the cast lives once here, so each control
+	// declares its exact spec type instead of casting internally.
+	type ControlFor<S extends FieldSpec> = Component<
+		Omit<FieldControlProps, "spec"> & { spec: S }
+	>;
+	function controlFor<S extends FieldSpec>(
+		c: ControlFor<S>,
+	): Component<FieldControlProps> {
+		return c as unknown as Component<FieldControlProps>;
+	}
+
 	const FIELDS: Record<FieldSpecKind, Component<FieldControlProps>> = {
-		number: RangeControl,
-		slider: RangeControl,
-		color: ColorControl,
-		"color-pair": ColorPairControl,
-		colors: ColorsControl,
-		select: SelectControl,
-		segmented: SegmentedControl,
-		checkbox: CheckboxControl,
-		text: TextControl,
-		dimension: DimensionField,
-		offset: OffsetControl,
-		position9: PositionControl,
-		"font-style": FontStyleControl,
-		plate: PlateControl,
-		gradient: GradientControl,
+		number: controlFor<NumberSpec | SliderSpec>(RangeControl),
+		slider: controlFor<NumberSpec | SliderSpec>(RangeControl),
+		color: controlFor<ColorSpec>(ColorControl),
+		"color-pair": controlFor<ColorPairSpec>(ColorPairControl),
+		colors: controlFor<ColorListSpec>(ColorsControl),
+		select: controlFor<SelectSpec>(SelectControl),
+		segmented: controlFor<SegmentedSpec>(SegmentedControl),
+		checkbox: controlFor<CheckboxSpec>(CheckboxControl),
+		text: controlFor<TextSpec>(TextControl),
+		dimension: controlFor<DimensionSpec>(DimensionField),
+		offset: controlFor<OffsetSpec>(OffsetControl),
+		position9: controlFor<Position9Spec>(PositionControl),
+		"font-style": controlFor<FontStyleSpec>(FontStyleControl),
+		plate: controlFor<PlateSpec>(PlateControl),
+		gradient: controlFor<GradientSpec>(GradientControl),
 	};
 
 	interface Props {

web/src/lib/components/schema/SchemaToolView.svelte

@@ -42,7 +42,6 @@
 		applySourceDefaults,
 		clampSourceAwareMaxes,
 		sanitizeSchemaParams,
-		type ToolSchema,
 	} from "$lib/registry-schema";
 	import { onMount } from "svelte";
 	import { SvelteSet } from "svelte/reactivity";
@@ -65,9 +64,7 @@
 	}
 	let { page, tool, chainId = undefined }: Props = $props();
 
-	const schema = $derived(
-		tool.schema as ToolSchema<Record<string, unknown>> | undefined,
-	);
+	const schema = $derived(tool.schema);
 
 	const inputMode = $derived(tool.input);
 
@@ -471,14 +468,17 @@
 						onadd={(id) => replaceStepTool(i, id)}
 					/>
 				{/snippet}
-				<SchemaFields
-					schema={toolSchemaOf(step)}
-					values={step.params}
-					toolId={step.id}
-					sourceDims={i === 0 ? (source ?? undefined) : stepDims[i - 1]}
-					onchange={(id, v, axis) => setStepValue(i, id, v, axis)}
-					onreset={() => resetStep(i)}
-				/>
+				{@const stepSchema = toolSchemaOf(step)}
+				{#if stepSchema}
+					<SchemaFields
+						schema={stepSchema}
+						values={step.params}
+						toolId={step.id}
+						sourceDims={i === 0 ? (source ?? undefined) : stepDims[i - 1]}
+						onchange={(id, v, axis) => setStepValue(i, id, v, axis)}
+						onreset={() => resetStep(i)}
+					/>
+				{/if}
 			</StepCard>
 		{/snippet}
 

web/src/lib/components/schema/schema-tool-state.svelte.ts

@@ -12,7 +12,6 @@ import {
 	defaultSchemaParams,
 	withAspectLock,
 	type Dimension,
-	type ToolSchema,
 } from "$lib/registry-schema";
 import { SvelteMap, SvelteSet } from "svelte/reactivity";
 
@@ -28,7 +27,7 @@ interface StepsState {
 }
 
 export function toolSchemaOf(step: ChainStep) {
-	return getTool(step.id)?.schema as ToolSchema<Record<string, unknown>>;
+	return getTool(step.id)?.schema;
 }
 
 function setStepValue(
@@ -79,7 +78,8 @@ function setStepValue(
 			}
 		}
 	}
-	const clamped = dims ? clampSourceAwareMaxes(stepSchema, next, dims) : next;
+	const clamped =
+		dims && stepSchema ? clampSourceAwareMaxes(stepSchema, next, dims) : next;
 	s.steps = s.steps.with(index, { ...step, params: clamped });
 }