refactor: set root layout, rename css, fix links in lint rules \ etc

web/src/lib/palette.test.ts

@@ -5,7 +5,7 @@ import { Color } from "@panmdaa/colors";
 
 declare const process: { cwd(): string };
 
-const css = readFileSync("src/preview.css", "utf8");
+const css = readFileSync("src/app.css", "utf8");
 
 type Hct = { h: number; c: number; t: number };
 

web/src/routes/+layout.svelte

@@ -1,28 +1,70 @@
 <script lang="ts">
+	import { page } from "$app/state";
 	import favicon from "$lib/assets/favicon.svg";
-	import { onMount } from "svelte";
+	import Footer from "$lib/components/kit/layout/Footer.svelte";
+	import TopBar from "$lib/components/kit/layout/TopBar.svelte";
 	import { initLocale } from "$lib/i18n/locale.svelte";
-	import { initTheme } from "$lib/theme.svelte";
+	import { getTheme, initTheme, setTheme } from "$lib/theme.svelte";
+	import type { Snippet } from "svelte";
+	import { onMount } from "svelte";
+	import "../app.css";
 
-	let { children } = $props();
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	let theme = $derived(getTheme());
+
+	function toggle() {
+		setTheme(theme === "light" ? "dark" : "light");
+	}
 
 	onMount(() => {
 		initLocale();
 		initTheme();
 	});
+
+	let crumb = $derived(toCrumb(page.url.pathname));
+
+	const CRUMB: Record<string, string> = {
+		"/list-tools": "CATALOG",
+		"/tools/linear-gradient-png": "GRADIENT",
+		"/tools/remove-background-png": "BACKGROUND REMOVER",
+	};
+
+	function toCrumb(path: string): string {
+		return (
+			"/ " +
+			(CRUMB[path] ??
+				path.split("/").filter(Boolean).pop()?.toUpperCase() ??
+				"HOME")
+		);
+	}
 </script>
 
 <svelte:head>
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-{@render children()}
+<main class="preview-root" data-theme={theme}>
+	<TopBar {theme} {crumb} ontoggle={toggle} />
+	{@render children()}
+	<Footer />
+</main>
 
 <style>
-	/* Порядок cascade-слоёв для всего документа (грузится на всех маршрутах):
-	   app = старый дизайн ((old)), design = новый (preview/*). design выигрывает
-	   у app на совпадающих правилах независимо от порядка <link> / истории
-	   SPA-навигации. Содержимое слоёв — в app.css (@layer app) и design2.css
-	   (@layer design). */
+	.preview-root {
+		background-color: var(--color-background);
+		background-image:
+			linear-gradient(var(--color-background-muted) 1px, transparent 1px),
+			linear-gradient(90deg, var(--color-background-muted) 1px, transparent 1px);
+		background-size: var(--space-xxxl) var(--space-xxxl);
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+	}
+
 	@layer app, design;
 </style>

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

@@ -3,7 +3,7 @@
 	import Footer from "$lib/components/kit/layout/Footer.svelte";
 	import TopBar from "$lib/components/kit/layout/TopBar.svelte";
 	import type { Snippet } from "svelte";
-	import "../../preview.css";
+	import "../../app.css";
 
 	interface Props {
 		children: Snippet;

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

@@ -6,7 +6,7 @@
 	import { t } from "$lib/i18n/t";
 	import { getTheme, initTheme, setTheme } from "$lib/theme.svelte";
 	import { onMount } from "svelte";
-	import "../../old.css";
+	import "../../app_v1.css";
 
 	let { children } = $props();