refactor: icon and download button use button component

web/src/routes/preview/+page.svelte

@@ -38,7 +38,12 @@
 					placeholder="Search tools…"
 				/>
 			</div>
-			<Button icon={Search} variant="primary" onclick={() => {}}>Search</Button>
+			<Button
+				icon={Search}
+				variant="primary"
+				onclick={() => {}}
+				label="Search"
+			/>
 		</div>
 		<div class="ws-results">
 			{#each results as tool (tool.id)}
@@ -50,7 +55,7 @@
 			{/each}
 		</div>
 		<SettingsFooter>
-			<Button onclick={() => {}}>Open last project</Button>
+			<Button onclick={() => {}} label="Open last project" />
 		</SettingsFooter>
 	</Panel>
 </section>

web/src/routes/preview/demo/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import ColorField from "$lib/components/kit/ColorField.svelte";
 	import FieldGrid from "$lib/components/kit/FieldGrid.svelte";
-	import IconButton from "$lib/components/kit/IconButton.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";
@@ -14,6 +13,7 @@
 	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";
 	import {
 		ChevronDown,
 		Plus,
@@ -95,7 +95,7 @@
 				onremove={() => {}}
 			>
 				{#snippet tools()}
-					<Badge tone="success" check>AUTO</Badge>
+					<Badge tone="success" check label="AUTO" />
 				{/snippet}
 				<FieldGrid>
 					<ColorField label="COLOR" chevron bind:value={gradColor} />
@@ -128,7 +128,7 @@
 				onremove={() => {}}
 			>
 				{#snippet tools()}
-					<Badge tone="success" check>AUTO</Badge>
+					<Badge tone="success" check label="AUTO" />
 				{/snippet}
 				<div class="transform-note">
 					<SlidersHorizontal size={15} /> Automatic subject detection enabled
@@ -137,7 +137,7 @@
 
 			<StepCard index={3} type="STYLE" title="Add outline" onremove={() => {}}>
 				{#snippet tools()}
-					<Badge tone="success" check>AUTO</Badge>
+					<Badge tone="success" check label="AUTO" />
 				{/snippet}
 				<FieldGrid compact>
 					<SliderField
@@ -158,7 +158,7 @@
 				onremove={() => {}}
 			>
 				{#snippet tools()}
-					<Badge tone="success" check>AUTO</Badge>
+					<Badge tone="success" check label="AUTO" />
 				{/snippet}
 				<FieldGrid compact>
 					<SliderField

web/src/routes/preview/kit/+page.svelte

@@ -4,7 +4,6 @@
 	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 IconButton from "$lib/components/kit/IconButton.svelte";
 	import ImageCard from "$lib/components/kit/ImageCard.svelte";
 	import MetaList from "$lib/components/kit/MetaList.svelte";
 	import Panel from "$lib/components/kit/Panel.svelte";
@@ -23,6 +22,7 @@
 	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 { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte";
 
 	let mode = $state("preview");
@@ -62,18 +62,18 @@
 		<PanelHeading title="Buttons" eyebrow="controls" />
 		<div class="stack">
 			<SettingGroup label="variants">
-				<Button onclick={() => {}}>Primary</Button>
-				<Button variant="outline" onclick={() => {}}>Outline</Button>
-				<Button variant="accent" onclick={() => {}}>Accent</Button>
-				<Button variant="danger" onclick={() => {}}>Danger</Button>
+				<Button onclick={() => {}} label="Primary" />
+				<Button variant="outline" onclick={() => {}} label="Outline" />
+				<Button variant="accent" onclick={() => {}} label="Accent" />
+				<Button variant="danger" onclick={() => {}} label="Danger" />
 			</SettingGroup>
 			<SettingGroup label="states">
-				<Button disabled onclick={() => {}}>Disabled</Button>
+				<Button disabled onclick={() => {}} label="Disabled" />
 				<IconButton icon={Plus} label="Add" onclick={() => {}} />
 				<IconButton
 					icon={Trash2}
 					label="Delete"
-					variant="solid"
+					variant="primary"
 					onclick={() => {}}
 				/>
 				<IconButton
@@ -202,7 +202,7 @@
 				title="No image loaded"
 				description="Drop a PNG to start processing"
 			>
-				<Button onclick={() => {}}>Open file</Button>
+				<Button onclick={() => {}} label="Open file" />
 			</EmptyState>
 			<CodeBlock
 				code={'export const config = {\n  radius: 8,\n  tint: "#3b82f6",\n};'}

web/src/routes/preview/tools/[id]/PreviewPanel.svelte

@@ -67,18 +67,21 @@
 		{#if needsSource && !sourceImg}
 			<Dropzone onfile={onFile} />
 		{:else if needsSource && sourceImg}
-			<Button variant="ghost" onclick={onClearSource}>Change image</Button>
+			<Button variant="outline" onclick={onClearSource} label="Change image" />
 		{/if}
 		<PreviewStack>
 			{#if needsSource && sourceImg}
-				<PreviewTile label="SOURCE">
+				<PreviewTile label="SOURCE" caption="">
 					<CheckerCanvas size="sm">
 						<img class="tile-img" src={sourceUrl} alt="source" />
 					</CheckerCanvas>
 				</PreviewTile>
 			{/if}
 			{#each stepOutputs as out, i (out.toolId + i)}
-				<PreviewTile label={`STEP ${String(i + 1).padStart(2, "0")}`}>
+				<PreviewTile
+					label={`STEP ${String(i + 1).padStart(2, "0")}`}
+					caption=""
+				>
 					<CheckerCanvas size="sm">
 						<img class="tile-img" src={out.url} alt={out.title} />
 					</CheckerCanvas>

web/src/routes/preview/tools/[id]/SettingsPanel.svelte

@@ -41,7 +41,7 @@
 <Panel>
 	<PanelHeading title="Pipeline" eyebrow="STEPS">
 		{#snippet actions()}
-			<Badge tone="accent">AUTO</Badge>
+			<Badge tone="accent" label="AUTO" />
 		{/snippet}
 	</PanelHeading>
 	<div class="pipeline-body">
@@ -78,7 +78,7 @@
 				options={chainOptions}
 				onchange={(v) => onSetAddId(v)}
 			/>
-			<Button variant="ghost" onclick={onAddStep}>Add step</Button>
+			<Button variant="outline" onclick={onAddStep} label="Add step" />
 		</div>
 	</SettingsFooter>
 </Panel>