fix: css fixes

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

@@ -46,6 +46,7 @@
 	}
 	.tool-cards {
 		display: grid;
+		grid-template-columns: 1fr 1fr;
 		gap: var(--space-m);
 	}
 </style>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Filter, Search } from "@lucide/svelte";
+	import { Funnel, Search } from "@lucide/svelte";
 
 	interface Props {
 		query: string;
@@ -18,6 +18,8 @@
 		{ value: "analyze", label: "ANALYZE" },
 		{ value: "generate", label: "GENERATE" },
 	];
+
+	// TODO: Button component
 </script>
 
 <div class="catalog-toolbar">
@@ -30,13 +32,15 @@
 		/>
 	</label>
 	<div class="catalog-filters">
-		<Filter size={15} />
+		<Funnel size={15} />
 		{#each FILTERS as f (f.value)}
 			<button
 				type="button"
 				class:active={category === f.value}
-				onclick={() => (category = f.value)}>{f.label}</button
+				onclick={() => (category = f.value)}
 			>
+				{f.label}
+			</button>
 		{/each}
 	</div>
 </div>
@@ -79,7 +83,7 @@
 	}
 	.catalog-filters button {
 		border: var(--size-border) solid var(--color-border);
-		background: transparent;
+		background: var(--color-panel);
 		color: var(--color-text-muted);
 		font: var(--font-size-s) var(--font-mono);
 		letter-spacing: var(--space-text-m);

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

@@ -73,8 +73,8 @@
 		cursor: pointer;
 		text-align: center;
 		transition:
-			border-color var(--duration-m) ease,
-			background var(--duration-m) ease;
+			border-color var(--duration-s) ease,
+			background var(--duration-s) ease;
 	}
 	.dropzone:hover,
 	.dropzone:focus-visible,

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

@@ -26,6 +26,7 @@
 		gap: var(--space-xl);
 		padding: var(--space-l) var(--space-xl);
 		border-bottom: var(--size-border) solid var(--color-border);
+		margin-bottom: var(--space-m);
 	}
 	.heading-text {
 		display: flex;

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import SchemaTextResult from "./SchemaTextResult.svelte";
 	import { toDataUrl } from "$lib/core/io";
 	import type { PixelImage } from "$lib/core/types";
-	import { Check } from "@lucide/svelte";
+	import { Check, RefreshCw } from "@lucide/svelte";
+	import SchemaTextResult from "./SchemaTextResult.svelte";
 
 	interface Props {
 		resultKind?: "image" | "text" | "verdict";
@@ -27,7 +27,14 @@
 </script>
 
 <figure class="tile" style:grid-column={wide ? "1 / -1" : undefined}>
-	<figcaption><span>RESULT {running ? "…" : ""}</span></figcaption>
+	<figcaption>
+		<span>
+			RESULT
+			{#if running}
+				<RefreshCw class="rotating" size="16" />
+			{/if}
+		</span>
+	</figcaption>
 	<div class="canvas" class:checker={resultKind === "image"}>
 		{#if resultKind === "text" && textResult}
 			<div class="text-result-wrap">
@@ -65,6 +72,9 @@
 		margin-bottom: var(--space-m);
 		font: var(--font-size-s) var(--font-mono);
 		color: var(--color-text-muted);
+		& :global(.rotating) {
+			animation: rotate var(--duration-l) linear infinite;
+		}
 	}
 	.canvas {
 		display: flex;
@@ -72,7 +82,7 @@
 		justify-content: center;
 		min-height: clamp(var(--space-brand), 30vh, 60vh);
 		border: var(--size-border) solid var(--color-border);
-		border-radius: var(--radius-m);
+		border-radius: var(--radius-s);
 		overflow: hidden;
 		background: var(--color-background-muted);
 		color: var(--color-text-muted);
@@ -98,4 +108,13 @@
 		padding: var(--space-l);
 		box-sizing: border-box;
 	}
+
+	@keyframes rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
 </style>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import SchemaTextSource from "./SchemaTextSource.svelte";
 	import { toDataUrl } from "$lib/core/io";
 	import type { PixelImage } from "$lib/core/types";
+	import SchemaTextSource from "./SchemaTextSource.svelte";
 
 	interface Props {
 		mode: "file" | "text";
@@ -58,7 +58,7 @@
 		justify-content: center;
 		min-height: clamp(var(--space-brand), 30vh, 60vh);
 		border: var(--size-border) solid var(--color-border);
-		border-radius: var(--radius-m);
+		border-radius: var(--radius-s);
 		overflow: hidden;
 		background: var(--color-background-muted);
 		color: var(--color-text-muted);

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

@@ -221,6 +221,7 @@
 	.schema-tool {
 		padding: calc(var(--space-xxxl) + var(--space-l))
 			clamp(var(--space-m), 4vw, var(--space-xxxl));
+		flex: 1;
 	}
 	.header {
 		display: flex;

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

@@ -29,9 +29,9 @@
 <style>
 	.tool-card {
 		display: grid;
-		grid-template-columns: var(--size-tool-icon) minmax(0, 1fr) var(
-				--space-xxl
-			) var(--size-tool-arrow);
+		grid-template-columns:
+			var(--size-tool-icon) minmax(0, 1fr) var(--space-xxl)
+			var(--size-tool-arrow);
 		align-items: center;
 		gap: var(--space-l);
 		min-height: var(--size-tool-min-height);

web/src/lib/components/kit/layout/Footer.svelte

@@ -13,6 +13,7 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: var(--space-xl);
+		background: var(--color-background);
 		border-top: var(--size-border) solid var(--color-border);
 		font: var(--font-size-s) var(--font-mono);
 		color: var(--color-text-muted);

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

@@ -9,8 +9,10 @@
 		type="button"
 		class="lang-btn"
 		class:active={lang === "RU"}
-		onclick={() => (lang = "RU")}>RU</button
-	><span class="lang-div">/</span>
+		onclick={() => (lang = "RU")}
+	>
+		RU
+	</button>
 	<button
 		type="button"
 		class="lang-btn"

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

@@ -3,11 +3,8 @@
 </script>
 
 <nav class="nav">
+	<a href={resolve("/preview")}>Home page</a>
 	<a href={resolve("/preview/list-tools")}>Catalog</a>
-	<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
-	<a href={resolve("/preview/tools/remove-background-png")}>
-		Background remover
-	</a>
 	<a href={resolve("/preview/kit")}> UI Kit </a>
 </nav>