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>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import "$lib/styles/design2.css";
 	import type { Snippet } from "svelte";
+	import { page } from "$app/stores";
 	import AppShell from "$lib/components/kit/AppShell.svelte";
 	import TopBar from "$lib/components/kit/TopBar.svelte";
 
@@ -10,13 +11,40 @@
 
 	let { children }: Props = $props();
 
-	let theme = $state<"light" | "dark">("light");
+	type Theme = "light" | "dark";
+	const stored =
+		typeof localStorage !== "undefined"
+			? (localStorage.getItem("easy-png-tools:theme") as Theme | null)
+			: null;
+	let theme = $state<Theme>(stored ?? "light");
+
 	function toggle() {
 		theme = theme === "light" ? "dark" : "light";
 	}
+
+	$effect(() => {
+		document.documentElement.dataset.theme = theme;
+		try {
+			localStorage.setItem("easy-png-tools:theme", theme);
+		} catch {
+			/* ignore */
+		}
+	});
+
+	let crumb = $derived(toCrumb($page.url.pathname));
+
+	function toCrumb(path: string): string {
+		const seg = path
+			.replace(/^\/preview/, "")
+			.replace(/^\//, "")
+			.split("/")
+			.filter(Boolean);
+		const label = seg.length ? seg.join(" / ").toUpperCase() : "PREVIEW";
+		return "/ " + label;
+	}
 </script>
 
 <div class="preview-root" data-theme={theme}>
-	<TopBar {theme} ontoggle={toggle} />
+	<TopBar {theme} {crumb} ontoggle={toggle} />
 	<AppShell>{@render children()}</AppShell>
 </div>

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

@@ -250,8 +250,8 @@
 		grid-template-columns: minmax(0, 1.05fr) minmax(520px, 0.95fr);
 		align-items: start;
 		gap: 56px;
-		max-width: 1680px;
-		margin: 0 auto;
+		max-width: none;
+		margin: auto;
 		padding: 60px clamp(24px, 4vw, 72px) 72px;
 	}
 	.workspace {

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

@@ -214,9 +214,9 @@
 
 <style>
 	.showcase {
-		max-width: 880px;
+		max-width: none;
 		margin: 0 auto;
-		padding: 2.5rem 1.25rem 4rem;
+		padding: 2.5rem clamp(24px, 4vw, 72px) 4rem;
 		display: flex;
 		flex-direction: column;
 		gap: 1.25rem;

web/src/routes/preview/list-tools/+page.svelte

@@ -50,9 +50,9 @@
 
 <style>
 	.catalog {
-		max-width: 880px;
+		max-width: none;
 		margin: 0 auto;
-		padding: 2.5rem 1.25rem 4rem;
+		padding: 2.5rem clamp(24px, 4vw, 72px) 4rem;
 		display: flex;
 		flex-direction: column;
 		gap: 1.25rem;