fix: update design with references

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

@@ -6,10 +6,11 @@
 		icon: Component<{ size?: number; class?: string }>;
 		label: string;
 		onclick?: () => void;
-		variant?: "ghost" | "solid" | "accent";
+		variant?: "ghost" | "solid" | "accent" | "bare";
 		size?: number;
 		disabled?: boolean;
 	}
+
 	let {
 		icon,
 		label,
@@ -57,6 +58,18 @@
 		color: #042;
 		border-color: var(--cyan);
 	}
+	.icon-btn--bare {
+		width: auto;
+		height: auto;
+		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;

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

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import IconButton from "./IconButton.svelte";
-	import Segmented from "./Segmented.svelte";
 	import StatusDot from "./StatusDot.svelte";
 	import { CircleHelp, Moon, Sun } from "@lucide/svelte";
 
 	interface Props {
 		theme: "light" | "dark";
+		crumb?: string;
 		ontoggle: () => void;
 	}
 
-	let { theme, ontoggle }: Props = $props();
+	let { theme, crumb, ontoggle }: Props = $props();
 
 	let lang = $state("RU");
 </script>
@@ -18,22 +18,31 @@
 	<div class="brand">
 		<span class="brand-mark">EP</span>
 		<span>easy-png-tools</span>
+		{#if crumb}<span class="version">{crumb}</span>{/if}
 	</div>
 	<div class="top-actions">
 		<span class="status"><StatusDot /> AUTO PIPELINE</span>
-		<IconButton icon={CircleHelp} label="Help" onclick={() => {}} />
+		<IconButton icon={CircleHelp} label="Help" variant="bare" onclick={() => {}} />
 		<IconButton
 			icon={theme === "light" ? Moon : Sun}
 			label="Toggle theme"
+			variant="bare"
 			onclick={ontoggle}
 		/>
-		<Segmented
-			bind:value={lang}
-			options={[
-				{ value: "RU", label: "RU" },
-				{ value: "EN", label: "EN" },
-			]}
-		/>
+		<div class="lang" role="group" aria-label="Language">
+			<button
+				type="button"
+				class="lang-btn"
+				class:active={lang === "RU"}
+				onclick={() => (lang = "RU")}>RU</button
+			>
+			<button
+				type="button"
+				class="lang-btn"
+				class:active={lang === "EN"}
+				onclick={() => (lang = "EN")}>EN</button
+			>
+		</div>
 	</div>
 </header>
 
@@ -66,6 +75,11 @@
 		display: grid;
 		place-items: center;
 	}
+	.version {
+		font: 10px var(--font-mono);
+		letter-spacing: 0.12em;
+		color: var(--blue);
+	}
 	.top-actions {
 		display: flex;
 		align-items: center;
@@ -79,4 +93,26 @@
 		font: 10px var(--font-mono);
 		letter-spacing: 0.08em;
 	}
+	.lang {
+		display: inline-flex;
+		border: 1px solid var(--line);
+		border-radius: var(--radius);
+		overflow: hidden;
+	}
+	.lang-btn {
+		border: 0;
+		background: transparent;
+		color: var(--muted);
+		font: 10px var(--font-mono);
+		letter-spacing: 0.06em;
+		padding: 6px 9px;
+		cursor: pointer;
+	}
+	.lang-btn + .lang-btn {
+		border-left: 1px solid var(--line);
+	}
+	.lang-btn.active {
+		background: var(--foreground);
+		color: var(--background);
+	}
 </style>