feat: update - use design system components

web/src/lib/components/DownloadButton.svelte

@@ -1,21 +1,18 @@
 <script lang="ts">
+	import Button from './ui/Button.svelte';
 	import { downloadBlob, encode } from '$lib/core/io';
 	import type { PixelImage } from '$lib/core/types';
 	import type { OutputFormat } from '$lib/registry';
 
-	let {
-		image,
-		format,
-		baseName,
-		params,
-		onError
-	}: {
+	interface Props {
 		image: PixelImage | null;
 		format?: OutputFormat;
 		baseName: string;
 		params: Record<string, unknown>;
 		onError?: (e: unknown) => void;
-	} = $props();
+	}
+
+	let { image, format, baseName, params, onError }: Props = $props();
 
 	let busy = $state(false);
 
@@ -36,6 +33,13 @@
 	}
 </script>
 
-<button class="primary" onclick={download} disabled={!image || !format || busy}>
-	{busy ? 'Готовим файл…' : `Скачать .${format?.ext ?? 'png'}`}
-</button>
+<Button
+	variant="primary"
+	fullWidth
+	disabled={!image || !format}
+	{busy}
+	busyText="Готовим файл…"
+	onclick={download}
+>
+	Скачать .{format?.ext ?? 'png'}
+</Button>

web/src/lib/components/DropZone.svelte

@@ -33,7 +33,7 @@
 </script>
 
 <div
-	class="dropzone"
+	class="dropzone panel"
 	class:dragging
 	role="button"
 	tabindex="0"
@@ -81,16 +81,14 @@
 		gap: var(--space-2);
 		min-height: 14rem;
 		padding: var(--space-4);
-		border: 2px dashed var(--border);
-		border-radius: var(--radius-m);
-		background: var(--surface);
+		border-style: dashed;
 		color: var(--text-muted);
 		text-align: center;
 		cursor: pointer;
 		user-select: none;
 		transition:
-			border-color 120ms ease,
-			background 120ms ease;
+			border-color var(--transition-fast),
+			background var(--transition-fast);
 	}
 
 	.dropzone:hover,

web/src/lib/components/InfoPanel.svelte

@@ -1,20 +1,24 @@
 <script lang="ts">
 	import type { ImageInfo } from '$lib/core/analyze';
 
-	let { info }: { info: ImageInfo | null } = $props();
+	interface Props {
+		info: ImageInfo | null;
+	}
+
+	let { info }: Props = $props();
 </script>
 
 {#if info}
 	<dl>
-		<div>
+		<div class="panel">
 			<dt>Размеры</dt>
 			<dd>{info.width} × {info.height} px</dd>
 		</div>
-		<div>
+		<div class="panel">
 			<dt>Альфа-канал</dt>
 			<dd>{info.hasAlpha ? 'есть — есть полупрозрачные пиксели' : 'нет'}</dd>
 		</div>
-		<div>
+		<div class="panel">
 			<dt>Уникальных цветов (RGBA)</dt>
 			<dd>{info.colorCount.toLocaleString('ru-RU')}</dd>
 		</div>
@@ -33,9 +37,6 @@
 		justify-content: space-between;
 		gap: var(--space-3);
 		padding: var(--space-2) var(--space-3);
-		background: var(--surface);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-s);
 	}
 
 	dt {

web/src/lib/components/ParamForm.svelte

@@ -1,89 +1,39 @@
 <script lang="ts">
+	import CheckboxField from './ui/CheckboxField.svelte';
+	import ColorField from './ui/ColorField.svelte';
+	import SelectField from './ui/SelectField.svelte';
+	import TextField from './ui/TextField.svelte';
 	import type { ParamDef } from '$lib/registry';
 
-	let {
-		params,
-		values = $bindable()
-	}: {
+	interface Props {
 		params: ParamDef[];
 		values: Record<string, any>;
-	} = $props();
+	}
+
+	let { params, values = $bindable() }: Props = $props();
 </script>
 
 {#each params as param (param.id)}
-	<div class="field">
-		{#if param.type === 'checkbox'}
-			<label class="checkbox">
-				<input type="checkbox" bind:checked={values[param.id]} />
-				{param.label}
-			</label>
-		{:else}
-			<label for={param.id}>{param.label}</label>
-			{#if param.type === 'number'}
-				<input
-					id={param.id}
-					type="number"
-					min={param.min}
-					max={param.max}
-					step={param.step}
-					bind:value={values[param.id]}
-				/>
-			{:else if param.type === 'select'}
-				<select id={param.id} bind:value={values[param.id]}>
-					{#each param.options as option (option.value)}
-						<option value={option.value}>{option.label}</option>
-					{/each}
-				</select>
-			{:else if param.type === 'color'}
-				<input id={param.id} type="color" bind:value={values[param.id]} />
-			{/if}
-		{/if}
-	</div>
+	{#if param.type === 'checkbox'}
+		<CheckboxField id={param.id} label={param.label} bind:checked={values[param.id]} />
+	{:else if param.type === 'number'}
+		<TextField
+			id={param.id}
+			label={param.label}
+			type="number"
+			min={param.min}
+			max={param.max}
+			step={param.step}
+			bind:value={values[param.id]}
+		/>
+	{:else if param.type === 'select'}
+		<SelectField
+			id={param.id}
+			label={param.label}
+			options={param.options}
+			bind:value={values[param.id]}
+		/>
+	{:else if param.type === 'color'}
+		<ColorField id={param.id} label={param.label} bind:value={values[param.id]} />
+	{/if}
 {/each}
-
-<style>
-	.field {
-		display: flex;
-		flex-direction: column;
-		gap: var(--space-1);
-		margin-bottom: var(--space-3);
-	}
-
-	label,
-	.checkbox {
-		font-size: 0.9rem;
-		color: var(--text-muted);
-	}
-
-	input,
-	select {
-		padding: var(--space-1) var(--space-2);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-s);
-		background: var(--surface);
-		max-width: 16rem;
-	}
-
-	input[type='number'] {
-		font-family: var(--font-mono);
-	}
-
-	input[type='color'] {
-		height: 2.4rem;
-		padding: 2px;
-		cursor: pointer;
-	}
-
-	.checkbox {
-		display: flex;
-		align-items: center;
-		gap: var(--space-2);
-		color: var(--text);
-		cursor: pointer;
-	}
-
-	.checkbox input {
-		width: 1rem;
-		height: 1rem;
-	}
-</style>

web/src/lib/components/ToolPage.svelte

@@ -3,8 +3,10 @@
 	import { decodeFile } from '$lib/core/io';
 	import type { PixelImage } from '$lib/core/types';
 	import { defaultParams, outputOf, sanitizeParams, type ToolEntry } from '$lib/registry';
+	import Button from './ui/Button.svelte';
 	import DownloadButton from './DownloadButton.svelte';
 	import DropZone from './DropZone.svelte';
+	import EmptyState from './ui/EmptyState.svelte';
 	import InfoPanel from './InfoPanel.svelte';
 	import ParamForm from './ParamForm.svelte';
 	import Preview from './Preview.svelte';
@@ -75,10 +77,10 @@
 
 <section>
 	<h1>{tool.title}</h1>
-	<p class="description">{tool.description}</p>
+	<p class="description text-muted">{tool.description}</p>
 
 	{#if errorText}
-		<div class="error" role="alert">{errorText}</div>
+		<div class="error-banner" role="alert">{errorText}</div>
 	{/if}
 
 	{#if !source}
@@ -86,28 +88,37 @@
 	{:else}
 		<div class="layout">
 			<div class="result-col">
-				<h2>{isInfo ? 'Изображение' : 'Результат'}</h2>
+				<h2 class="heading-section">{isInfo ? 'Изображение' : 'Результат'}</h2>
 				{#if status === 'processing' && !result}
-					<p class="hint">Обработка…</p>
+					<EmptyState title="Обработка…" hint="Изображение обрабатывается, это займёт немного времени" />
 				{:else}
 					<Preview image={isInfo ? source : result} />
 				{/if}
 				{#if isInfo && info}
 					<InfoPanel {info} />
 				{/if}
-				<button class="secondary" onclick={reset}>Загрузить другое изображение</button>
+				<div class="reset-row">
+					<Button variant="secondary" onclick={reset}>Загрузить другое изображение</Button>
+				</div>
 			</div>
 
 			{#if !isInfo}
 				<div class="params-col">
-					<h2>Параметры</h2>
+					<h2 class="heading-section">Параметры</h2>
 					{#if tool.params.length > 0}
 						<ParamForm params={tool.params} bind:values />
-						<button class="primary" onclick={apply} disabled={status === 'processing'}>
-							{status === 'processing' ? 'Обработка…' : 'Применить'}
-						</button>
+						<Button
+							onclick={apply}
+							busy={status === 'processing'}
+							busyText="Обработка…"
+							fullWidth
+						>
+							Применить
+						</Button>
 					{:else}
-						<p class="hint">У этого инструмента нет параметров — результат уже готов.</p>
+						<p class="hint text-caption text-muted">
+							У этого инструмента нет параметров — результат уже готов.
+						</p>
 					{/if}
 					<div class="download-row">
 						<DownloadButton
@@ -130,19 +141,12 @@
 	}
 
 	.description {
-		color: var(--text-muted);
 		max-width: 48rem;
 		margin-bottom: var(--space-4);
 	}
 
-	.error {
-		padding: var(--space-2) var(--space-3);
+	.error-banner {
 		margin-bottom: var(--space-3);
-		border: 1px solid #e5484d;
-		border-radius: var(--radius-s);
-		background: color-mix(in srgb, #e5484d 8%, var(--surface));
-		color: #b3261e;
-		font-size: 0.9rem;
 	}
 
 	.layout {
@@ -161,33 +165,19 @@
 	.result-col h2,
 	.params-col h2 {
 		margin-bottom: var(--space-2);
-		font-size: 1rem;
-		color: var(--text-muted);
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
 	}
 
-	.result-col button.secondary {
+	.reset-row {
 		margin-top: var(--space-3);
 	}
 
-	.params-col button.primary {
-		width: 100%;
-	}
-
 	.download-row {
 		margin-top: var(--space-4);
 		padding-top: var(--space-3);
 		border-top: 1px solid var(--border);
 	}
 
-	.download-row :global(button) {
-		width: 100%;
-	}
-
 	.hint {
-		color: var(--text-muted);
-		font-size: 0.9rem;
 		margin-bottom: var(--space-3);
 	}
 </style>

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

@@ -7,6 +7,7 @@
 		disabled?: boolean;
 		busy?: boolean;
 		busyText?: string;
+		fullWidth?: boolean;
 		onclick?: () => void;
 		children: Snippet;
 	}
@@ -17,6 +18,7 @@
 		disabled = false,
 		busy = false,
 		busyText = '',
+		fullWidth = false,
 		onclick,
 		children
 	}: Props = $props();
@@ -24,7 +26,7 @@
 
 <button
 	{type}
-	class={variant}
+	class={fullWidth ? `${variant} fullwidth` : variant}
 	aria-busy={busy}
 	disabled={disabled || busy}
 	onclick={onclick}
@@ -74,4 +76,8 @@
 		opacity: 0.55;
 		cursor: not-allowed;
 	}
+
+	.fullwidth {
+		width: 100%;
+	}
 </style>

web/src/routes/+layout.svelte

@@ -25,7 +25,9 @@
 	</main>
 
 	<footer>
-		<p>Все операции выполняются локально в вашем браузере — файлы никуда не отправляются.</p>
+		<p class="text-caption text-muted">
+			Все операции выполняются локально в вашем браузере — файлы никуда не отправляются.
+		</p>
 	</footer>
 </div>
 
@@ -66,7 +68,7 @@
 
 	.nav-link {
 		color: var(--text-muted);
-		font-size: 0.9rem;
+		font-size: var(--text-s);
 		padding: var(--space-1) var(--space-2);
 		border-radius: var(--radius-s);
 	}
@@ -88,8 +90,6 @@
 	footer {
 		padding: var(--space-3) var(--space-4);
 		border-top: 1px solid var(--border);
-		color: var(--text-muted);
-		font-size: 0.85rem;
 		text-align: center;
 	}
 </style>

web/src/routes/+page.svelte

@@ -12,7 +12,7 @@
 </svelte:head>
 
 <h1>easy-png-tools</h1>
-<p class="lead">
+<p class="lead text-muted">
 	Набор утилит для работы с PNG. Все операции выполняются локально в браузере — файлы никуда не
 	отправляются.
 </p>
@@ -21,12 +21,12 @@
 	{@const categoryTools = TOOLS.filter((tool) => tool.category === category.id)}
 	{#if categoryTools.length > 0}
 		<section id={category.id} class="category" aria-labelledby="{category.id}-heading">
-			<h2 id="{category.id}-heading">{category.label}</h2>
+			<h2 id="{category.id}-heading" class="heading-section">{category.label}</h2>
 			<div class="grid">
 				{#each categoryTools as tool (tool.id)}
-					<a class="card" href="/tools/{tool.id}">
+					<a class="card panel" href="/tools/{tool.id}">
 						<span class="card-title">{tool.title}</span>
-						<span class="card-desc">{tool.description}</span>
+						<span class="card-desc text-caption text-muted">{tool.description}</span>
 					</a>
 				{/each}
 			</div>
@@ -40,7 +40,6 @@
 	}
 
 	.lead {
-		color: var(--text-muted);
 		max-width: 48rem;
 		margin-bottom: var(--space-5);
 	}
@@ -51,10 +50,6 @@
 	}
 
 	h2 {
-		font-size: 1.1rem;
-		color: var(--text-muted);
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
 		margin-bottom: var(--space-3);
 	}
 
@@ -69,27 +64,23 @@
 		flex-direction: column;
 		gap: var(--space-2);
 		padding: var(--space-3) var(--space-3) var(--space-4);
-		background: var(--surface);
-		border: 1px solid var(--border);
-		border-radius: var(--radius-m);
-		text-decoration: none;
 		color: inherit;
 		transition:
-			border-color 120ms ease,
-			box-shadow 120ms ease,
-			transform 120ms ease;
+			border-color var(--transition-fast),
+			box-shadow var(--transition-fast),
+			transform var(--transition-fast);
 	}
 
 	.card:hover {
 		text-decoration: none;
 		border-color: var(--accent);
-		box-shadow: 0 4px 14px rgb(37 99 235 / 12%);
+		box-shadow: var(--shadow-card);
 		transform: translateY(-1px);
 	}
 
 	.card-title {
 		font-weight: 600;
-		font-size: 0.95rem;
+		font-size: var(--text-m);
 	}
 
 	.card:hover .card-title {
@@ -97,8 +88,6 @@
 	}
 
 	.card-desc {
-		font-size: 0.85rem;
-		color: var(--text-muted);
 		display: -webkit-box;
 		-webkit-line-clamp: 3;
 		line-clamp: 3;