refactor: icon and download button use button component

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Copy } from "@lucide/svelte";
-	import IconButton from "./IconButton.svelte";
+	import IconButton from "./ui/IconButton.svelte";
 
 	interface Props {
 		code: string;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Component, Snippet } from "svelte";
-	import Icon from "./Icon.svelte";
+	import Icon from "./ui/Icon.svelte";
 
 	interface Props {
 		title: string;

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

@@ -1,87 +0,0 @@
-<script lang="ts">
-	import type { Component } from "svelte";
-	import Icon from "./Icon.svelte";
-
-	interface Props {
-		icon: Component<{ size?: number; class?: string }>;
-		label: string;
-		onclick?: () => void;
-		variant?: "ghost" | "solid" | "accent" | "bare";
-		size?: number;
-		disabled?: boolean;
-	}
-
-	let {
-		icon,
-		label,
-		onclick,
-		variant = "ghost",
-		size = 16,
-		disabled = false,
-	}: Props = $props();
-</script>
-
-<button
-	type="button"
-	class="icon-btn icon-btn--{variant}"
-	aria-label={label}
-	{disabled}
-	onclick={() => onclick?.()}
->
-	<Icon {icon} {size} />
-</button>
-
-<style>
-	.icon-btn {
-		display: grid;
-		align-items: center;
-		border: 1px solid var(--line);
-		border-radius: var(--radius);
-		background: transparent;
-		color: var(--muted);
-		cursor: pointer;
-		font-size: inherit;
-		line-height: inherit;
-		border: 0;
-		background: 0 0;
-		border: 0;
-		place-items: center;
-		padding: 6px;
-		display: grid;
-	}
-	.icon-btn:hover:not(:disabled) {
-		color: var(--foreground);
-		border-color: var(--blue);
-	}
-	.icon-btn--solid {
-		background: var(--blue);
-		color: #fff;
-		border-color: var(--blue);
-	}
-	.icon-btn--accent {
-		background: var(--cyan);
-		color: #042;
-		border-color: var(--cyan);
-	}
-	.icon-btn--bare {
-		padding: 6px;
-		border: 0;
-		border-radius: 0;
-		color: var(--muted);
-	}
-	.icon-btn--bare:hover:not(:disabled) {
-		color: var(--foreground);
-		border-color: transparent;
-	}
-	.icon-btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.icon-btn--ghost {
-		padding: 6px;
-		border: 0;
-		border-radius: 0;
-		color: var(--muted);
-	}
-</style>

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

@@ -2,7 +2,7 @@
 	import { resolve } from "$app/paths";
 	import { ArrowUpRight } from "@lucide/svelte";
 	import type { Component } from "svelte";
-	import Icon from "./Icon.svelte";
+	import Icon from "./ui/Icon.svelte";
 
 	interface Props {
 		title: string;
@@ -73,15 +73,4 @@
 		color: var(--muted);
 		align-self: start;
 	}
-	.tool-arrow {
-		color: var(--blue);
-		opacity: 0;
-		transition:
-			opacity 0.12s ease,
-			transform 0.12s ease;
-	}
-	.tool-card:hover .tool-arrow {
-		opacity: 1;
-		transform: translate(2px, -2px);
-	}
 </style>

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
 	import { CircleQuestionMark, Moon, Sun } from "@lucide/svelte";
-	import IconButton from "./IconButton.svelte";
 	import StatusDot from "./StatusDot.svelte";
+	import IconButton from "./ui/IconButton.svelte";
 
 	interface Props {
 		theme: "light" | "dark";
@@ -35,13 +35,13 @@
 		<IconButton
 			icon={CircleQuestionMark}
 			label="Help"
-			variant="bare"
+			variant="clear"
 			onclick={() => {}}
 		/>
 		<IconButton
 			icon={theme === "light" ? Moon : Sun}
 			label="Toggle theme"
-			variant="bare"
+			variant="clear"
 			onclick={ontoggle}
 		/>
 		<div class="lang" role="group" aria-label="Language">

web/src/lib/components/kit/define.ts

@@ -0,0 +1,10 @@
+export const ButtonVariantDefine = {
+	PRIMARY: "primary",
+	OUTLINE: "outline",
+	ACCENT: "accent",
+	DANGER: "danger",
+	CLEAR: "clear",
+} as const;
+
+export type ButtonVariant =
+	(typeof ButtonVariantDefine)[keyof typeof ButtonVariantDefine];

web/src/lib/components/kit/ui/Badge.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Check } from "@lucide/svelte";
 
+	// TODO: сделать эти типы общими для кнопок \ бейджей \ етц???
 	const ToneVariantDefine = {
 		DEFAULT: "default",
 		ACCENT: "accent",

web/src/lib/components/kit/ui/Button.svelte

@@ -1,26 +1,19 @@
 <script lang="ts">
-	import type { Component, Snippet } from "svelte";
+	import type { Component } from "svelte";
-	import Icon from "../Icon.svelte";
+	import { ButtonVariantDefine, type ButtonVariant } from "../define";
-
+	import Icon from "./Icon.svelte";
-	const ButtonVariantDefine = {
-		PRIMARY: "primary",
-		OUTLINE: "outline",
-		ACCENT: "accent",
-		DANGER: "danger",
-	} as const;
-
-	type ButtonVariant =
-		(typeof ButtonVariantDefine)[keyof typeof ButtonVariantDefine];
 
 	interface Props {
-		children: Snippet;
+		label: string;
+		ariaLabel?: string;
 		onclick?: () => void;
 		variant?: ButtonVariant;
 		icon?: Component<{ size?: number; class?: string }>;
 		disabled?: boolean;
 	}
 	let {
-		children,
+		label,
+		ariaLabel = label,
 		onclick,
 		variant = ButtonVariantDefine.PRIMARY,
 		icon,
@@ -28,9 +21,14 @@
 	}: Props = $props();
 </script>
 
-<button class="btn btn--{variant}" {disabled} onclick={() => onclick?.()}>
+<button
+	class="btn btn--{variant}"
+	{disabled}
+	aria-label={ariaLabel}
+	onclick={() => onclick?.()}
+>
 	{#if icon}<Icon {icon} size={14} />{/if}
-	<span class="btn-label">{@render children()}</span>
+	<span class="btn-label">{label}</span>
 </button>
 
 <style>

web/src/lib/components/kit/ui/DownloadButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { ArrowDownToLine, Download } from "@lucide/svelte";
+	import { Download } from "@lucide/svelte";
+	import Button from "./Button.svelte";
 
 	interface Props {
 		label: string;
@@ -8,29 +9,4 @@
 	let { label, onclick }: Props = $props();
 </script>
 
-<button class="download-btn" type="button" onclick={() => onclick?.()}>
+<Button icon={Download} {label} {onclick} />
-	<Download size={16} />
-	{label}
-	<ArrowDownToLine size={14} />
-</button>
-
-<style>
-	.download-btn {
-		background: var(--color-main);
-		color: var(--color-background);
-		width: 100%;
-		height: calc(5 * var(--space-m));
-		font-size: var(--font-button);
-		font-family: var(--font-mono);
-		border: 0;
-		justify-content: center;
-		align-items: center;
-		gap: var(--space-m);
-		margin-top: var(--space-xl);
-		display: flex;
-		white-space: nowrap;
-	}
-	.download-btn:hover {
-		background: var(--color-main-tint);
-	}
-</style>

web/src/lib/components/kit/ui/IconButton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+	import { ButtonVariantDefine, type ButtonVariant } from "../define";
+	import Button from "./Button.svelte";
+
+	interface Props {
+		icon: Component<{ size?: number; class?: string }>;
+		label: string;
+		onclick?: () => void;
+		variant?: ButtonVariant;
+		disabled?: boolean;
+	}
+
+	let {
+		icon,
+		label,
+		onclick,
+		variant = ButtonVariantDefine.PRIMARY,
+		disabled = false,
+	}: Props = $props();
+</script>
+
+<Button label="" {onclick} {variant} {disabled} {icon} ariaLabel={label} />

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 onclick={() => {}} label="Primary" />
-				<Button variant="outline" onclick={() => {}}>Outline</Button>
+				<Button variant="outline" onclick={() => {}} label="Outline" />
-				<Button variant="accent" onclick={() => {}}>Accent</Button>
+				<Button variant="accent" onclick={() => {}} label="Accent" />
-				<Button variant="danger" onclick={() => {}}>Danger</Button>
+				<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>