diff --git a/web/src/lib/components/kit/ParamControl.svelte b/web/src/lib/components/kit/ParamControl.svelte
index 4e4bb41..e005659 100644
--- a/web/src/lib/components/kit/ParamControl.svelte
+++ b/web/src/lib/components/kit/ParamControl.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
+	import ColorField from "$lib/components/kit/fields/ColorField.svelte";
+	import NumberField from "$lib/components/kit/fields/NumberField.svelte";
+	import SelectField from "$lib/components/kit/fields/SelectField.svelte";
+	import SliderField from "$lib/components/kit/fields/SliderField.svelte";
+	import TextField from "$lib/components/kit/fields/TextField.svelte";
+	import ToggleRow from "$lib/components/kit/fields/ToggleRow.svelte";
 	import type { ParamDef } from "$lib/registry";
-	import ColorField from "$lib/components/kit/ColorField.svelte";
-	import SliderField from "$lib/components/kit/SliderField.svelte";
-	import SelectField from "$lib/components/kit/SelectField.svelte";
-	import ToggleRow from "$lib/components/kit/ToggleRow.svelte";
-	import TextField from "$lib/components/kit/TextField.svelte";
-	import NumberField from "$lib/components/kit/NumberField.svelte";
 
 	type ParamValue = string | number | boolean;
 
diff --git a/web/src/lib/components/kit/SettingsPanel.svelte b/web/src/lib/components/kit/SettingsPanel.svelte
index 72a4259..8d9b980 100644
--- a/web/src/lib/components/kit/SettingsPanel.svelte
+++ b/web/src/lib/components/kit/SettingsPanel.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import EmptyState from "$lib/components/kit/EmptyState.svelte";
+	import SelectField from "$lib/components/kit/fields/SelectField.svelte";
 	import Panel from "$lib/components/kit/layout/Panel.svelte";
-	import SelectField from "$lib/components/kit/SelectField.svelte";
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
 	import StepCard from "$lib/components/kit/StepCard.svelte";
 	import Button from "$lib/components/kit/ui/Button.svelte";
diff --git a/web/src/lib/components/kit/CheckboxField.svelte b/web/src/lib/components/kit/fields/CheckboxField.svelte
similarity index 100%
rename from web/src/lib/components/kit/CheckboxField.svelte
rename to web/src/lib/components/kit/fields/CheckboxField.svelte
diff --git a/web/src/lib/components/kit/ColorField.svelte b/web/src/lib/components/kit/fields/ColorField.svelte
similarity index 100%
rename from web/src/lib/components/kit/ColorField.svelte
rename to web/src/lib/components/kit/fields/ColorField.svelte
diff --git a/web/src/lib/components/kit/layout/Field.svelte b/web/src/lib/components/kit/fields/Field.svelte
similarity index 100%
rename from web/src/lib/components/kit/layout/Field.svelte
rename to web/src/lib/components/kit/fields/Field.svelte
diff --git a/web/src/lib/components/kit/FieldGrid.svelte b/web/src/lib/components/kit/fields/FieldGrid.svelte
similarity index 100%
rename from web/src/lib/components/kit/FieldGrid.svelte
rename to web/src/lib/components/kit/fields/FieldGrid.svelte
diff --git a/web/src/lib/components/kit/NumberField.svelte b/web/src/lib/components/kit/fields/NumberField.svelte
similarity index 94%
rename from web/src/lib/components/kit/NumberField.svelte
rename to web/src/lib/components/kit/fields/NumberField.svelte
index 21e719a..424e47d 100644
--- a/web/src/lib/components/kit/NumberField.svelte
+++ b/web/src/lib/components/kit/fields/NumberField.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Field from "./layout/Field.svelte";
+	import Field from "./Field.svelte";
 
 	interface Props {
 		label: string;
diff --git a/web/src/lib/components/kit/SelectField.svelte b/web/src/lib/components/kit/fields/SelectField.svelte
similarity index 94%
rename from web/src/lib/components/kit/SelectField.svelte
rename to web/src/lib/components/kit/fields/SelectField.svelte
index 54ff040..1995251 100644
--- a/web/src/lib/components/kit/SelectField.svelte
+++ b/web/src/lib/components/kit/fields/SelectField.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Field from "./layout/Field.svelte";
+	import Field from "./Field.svelte";
 
 	interface Option {
 		value: string;
diff --git a/web/src/lib/components/kit/SliderField.svelte b/web/src/lib/components/kit/fields/SliderField.svelte
similarity index 100%
rename from web/src/lib/components/kit/SliderField.svelte
rename to web/src/lib/components/kit/fields/SliderField.svelte
diff --git a/web/src/lib/components/kit/TextField.svelte b/web/src/lib/components/kit/fields/TextField.svelte
similarity index 100%
rename from web/src/lib/components/kit/TextField.svelte
rename to web/src/lib/components/kit/fields/TextField.svelte
diff --git a/web/src/lib/components/kit/ToggleRow.svelte b/web/src/lib/components/kit/fields/ToggleRow.svelte
similarity index 89%
rename from web/src/lib/components/kit/ToggleRow.svelte
rename to web/src/lib/components/kit/fields/ToggleRow.svelte
index 01b5c7f..088cd0d 100644
--- a/web/src/lib/components/kit/ToggleRow.svelte
+++ b/web/src/lib/components/kit/fields/ToggleRow.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Toggle from "./Toggle.svelte";
+	import Toggle from "../ui/Toggle.svelte";
 
 	interface Props {
 		label: string;
diff --git a/web/src/lib/components/kit/Toggle.svelte b/web/src/lib/components/kit/ui/Toggle.svelte
similarity index 100%
rename from web/src/lib/components/kit/Toggle.svelte
rename to web/src/lib/components/kit/ui/Toggle.svelte
diff --git a/web/src/routes/preview/+page.svelte b/web/src/routes/preview/+page.svelte
index ec075aa..61cf116 100644
--- a/web/src/routes/preview/+page.svelte
+++ b/web/src/routes/preview/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+	import TextField from "$lib/components/kit/fields/TextField.svelte";
 	import Panel from "$lib/components/kit/layout/Panel.svelte";
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
-	import TextField from "$lib/components/kit/TextField.svelte";
 	import ToolCard from "$lib/components/kit/ToolCard.svelte";
 	import Button from "$lib/components/kit/ui/Button.svelte";
 	import { TOOLS } from "$lib/registry";
diff --git a/web/src/routes/preview/demo/+page.svelte b/web/src/routes/preview/demo/+page.svelte
index d426170..9d54237 100644
--- a/web/src/routes/preview/demo/+page.svelte
+++ b/web/src/routes/preview/demo/+page.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import ColorField from "$lib/components/kit/ColorField.svelte";
-	import FieldGrid from "$lib/components/kit/FieldGrid.svelte";
+	import ColorField from "$lib/components/kit/fields/ColorField.svelte";
+	import FieldGrid from "$lib/components/kit/fields/FieldGrid.svelte";
+	import SliderField from "$lib/components/kit/fields/SliderField.svelte";
+	import ToggleRow from "$lib/components/kit/fields/ToggleRow.svelte";
 	import PageGrid from "$lib/components/kit/layout/PageGrid.svelte";
 	import MetaList from "$lib/components/kit/MetaList.svelte";
 	import PipelineFooter from "$lib/components/kit/PipelineFooter.svelte";
 	import PreviewStack from "$lib/components/kit/PreviewStack.svelte";
 	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
 	import SectionLabel from "$lib/components/kit/SectionLabel.svelte";
-	import SliderField from "$lib/components/kit/SliderField.svelte";
 	import StepCard from "$lib/components/kit/StepCard.svelte";
-	import ToggleRow from "$lib/components/kit/ToggleRow.svelte";
 	import Badge from "$lib/components/kit/ui/Badge.svelte";
 	import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
 	import IconButton from "$lib/components/kit/ui/IconButton.svelte";
diff --git a/web/src/routes/preview/kit/+page.svelte b/web/src/routes/preview/kit/+page.svelte
index 52cee41..086dd1b 100644
--- a/web/src/routes/preview/kit/+page.svelte
+++ b/web/src/routes/preview/kit/+page.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
-	import CheckboxField from "$lib/components/kit/CheckboxField.svelte";
 	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
 	import CodeBlock from "$lib/components/kit/CodeBlock.svelte";
-	import ColorField from "$lib/components/kit/ColorField.svelte";
 	import EmptyState from "$lib/components/kit/EmptyState.svelte";
+	import CheckboxField from "$lib/components/kit/fields/CheckboxField.svelte";
+	import ColorField from "$lib/components/kit/fields/ColorField.svelte";
+	import SelectField from "$lib/components/kit/fields/SelectField.svelte";
+	import SliderField from "$lib/components/kit/fields/SliderField.svelte";
+	import TextField from "$lib/components/kit/fields/TextField.svelte";
 	import ImageCard from "$lib/components/kit/ImageCard.svelte";
 	import Panel from "$lib/components/kit/layout/Panel.svelte";
 	import MetaList from "$lib/components/kit/MetaList.svelte";
 	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
-	import SelectField from "$lib/components/kit/SelectField.svelte";
 	import SettingGroup from "$lib/components/kit/SettingGroup.svelte";
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
-	import SliderField from "$lib/components/kit/SliderField.svelte";
 	import StatusLine from "$lib/components/kit/StatusLine.svelte";
 	import StepCard from "$lib/components/kit/StepCard.svelte";
-	import TextField from "$lib/components/kit/TextField.svelte";
-	import Toggle from "$lib/components/kit/Toggle.svelte";
 	import ToolCard from "$lib/components/kit/ToolCard.svelte";
 	import Badge from "$lib/components/kit/ui/Badge.svelte";
 	import Button from "$lib/components/kit/ui/Button.svelte";
 	import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
 	import IconButton from "$lib/components/kit/ui/IconButton.svelte";
 	import Segmented from "$lib/components/kit/ui/Segmented.svelte";
+	import Toggle from "$lib/components/kit/ui/Toggle.svelte";
 	import { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte";
 
 	let mode = $state("preview");