From e970b477205ea02dc96c67dac19bbc36660aab85 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Thu, 10 Sep 2026 15:08:56 +0500
Subject: [PATCH] refactor: set root layout, rename css, fix links in lint
 rules \ etc

---
 .../design-tokens/no-hardcoded-in-svelte.js   |  4 +-
 .../no-token-definition-in-svelte.js          |  4 +-
 .../design-tokens/no-undefined-in-svelte.js   |  8 +--
 web/eslint-plugins/index.js                   |  2 +-
 web/postcss.config.js                         |  4 +-
 web/scripts/check-tokens.mjs                  |  6 +-
 web/scripts/token-audit/colors.mjs            |  2 +-
 web/scripts/token-audit/helpers.mjs           |  6 +-
 web/scripts/token-audit/unused.mjs            |  2 +-
 web/src/{preview.css => app.css}              |  0
 web/src/{old.css => app_v1.css}               |  0
 web/src/lib/palette.test.ts                   |  2 +-
 web/src/routes/+layout.svelte                 | 60 ++++++++++++++++---
 web/src/routes/preview/+layout.svelte         |  2 +-
 web/src/routes/v1/+layout.svelte              |  2 +-
 web/stylelint.config.js                       |  6 +-
 16 files changed, 76 insertions(+), 34 deletions(-)
 rename web/src/{preview.css => app.css} (100%)
 rename web/src/{old.css => app_v1.css} (100%)

diff --git a/web/eslint-plugins/design-tokens/no-hardcoded-in-svelte.js b/web/eslint-plugins/design-tokens/no-hardcoded-in-svelte.js
index d652078..70cda6e 100644
--- a/web/eslint-plugins/design-tokens/no-hardcoded-in-svelte.js
+++ b/web/eslint-plugins/design-tokens/no-hardcoded-in-svelte.js
@@ -37,9 +37,9 @@ export default {
 			hardcodedZIndex:
 				"Hardcoded z-index '{{value}}'. Use a var(--z-...) token.",
 			hardcodedBreakpoint:
-				"Hardcoded breakpoint '{{value}}' in @media. Use the @custom-media name instead: declare `@custom-media --bp-* (...)` in preview.css and write `@media (--bp-*)`.",
+				"Hardcoded breakpoint '{{value}}' in @media. Use the @custom-media name instead: declare `@custom-media --bp-* (...)` in app.css and write `@media (--bp-*)`.",
 			varInMedia:
-				"var() inside @media '{{value}}'. Custom properties do not resolve in media queries — declare `@custom-media --bp-* (...)` in preview.css and use `@media (--bp-*)`.",
+				"var() inside @media '{{value}}'. Custom properties do not resolve in media queries — declare `@custom-media --bp-* (...)` in app.css and use `@media (--bp-*)`.",
 			colorMix:
 				"color-mix() in component ({{value}}). Tokenize the result in the design CSS file.",
 		},
diff --git a/web/eslint-plugins/design-tokens/no-token-definition-in-svelte.js b/web/eslint-plugins/design-tokens/no-token-definition-in-svelte.js
index 4d67fa2..2aec0ba 100644
--- a/web/eslint-plugins/design-tokens/no-token-definition-in-svelte.js
+++ b/web/eslint-plugins/design-tokens/no-token-definition-in-svelte.js
@@ -2,7 +2,7 @@
 // A custom property may be DEFINED inside a component's <style> block, but its
 // value must not introduce a design primitive: a raw color literal (hex/rgb/
 // oklch/named) or an absolute size (px/rem/em). This keeps the design surface
-// (colors/sizes) a single source of truth in preview.css, while still allowing
+// (colors/sizes) a single source of truth in app.css, while still allowing
 // local DERIVED variables built from tokens: var(--...), calc(), unitless
 // ratios (--ratio: 1.5) — those are legitimate component-local state.
 
@@ -24,7 +24,7 @@ export default {
 		},
 		messages: {
 			tokenPrimitive:
-				"Custom property '{{prop}}' defines a primitive '{{value}}' in a component. Move it to preview.css or derive it from tokens via var()/calc().",
+				"Custom property '{{prop}}' defines a primitive '{{value}}' in a component. Move it to app.css or derive it from tokens via var()/calc().",
 		},
 		schema: [],
 	},
diff --git a/web/eslint-plugins/design-tokens/no-undefined-in-svelte.js b/web/eslint-plugins/design-tokens/no-undefined-in-svelte.js
index 582bc18..5a25a29 100644
--- a/web/eslint-plugins/design-tokens/no-undefined-in-svelte.js
+++ b/web/eslint-plugins/design-tokens/no-undefined-in-svelte.js
@@ -1,6 +1,6 @@
 // Rule: NO UNDEFINED CSS-TOKEN USAGE IN COMPONENTS.
 // A var(--...) referenced in a Svelte <style> block must exist in the design
-// token file (src/preview.css) or be a local override defined in the same
+// token file (src/app.css) or be a local override defined in the same
 // component. Catches typos and drop-in tokens that were never added to the
 // "single source of truth".
 
@@ -16,7 +16,7 @@ const VAR_REF_RE = /var\(\s*(--[\w-]+)/g;
 const definedCache = new Map();
 
 function getDefinedTokens(cwd) {
-	const file = resolve(cwd, "src/preview.css");
+	const file = resolve(cwd, "src/app.css");
 	if (!existsSync(file)) return null;
 	if (definedCache.has(file)) return definedCache.get(file);
 
@@ -34,13 +34,13 @@ export default {
 		type: "problem",
 		docs: {
 			description:
-				"Disallow referencing a CSS variable that is not defined in preview.css (design token file) and not defined locally in the component.",
+				"Disallow referencing a CSS variable that is not defined in app.css (design token file) and not defined locally in the component.",
 			category: "Design tokens",
 			recommended: true,
 		},
 		messages: {
 			undefinedToken:
-				"CSS variable '{{token}}' is not defined in preview.css and not locally in this component.",
+				"CSS variable '{{token}}' is not defined in app.css and not locally in this component.",
 		},
 		schema: [],
 	},
diff --git a/web/eslint-plugins/index.js b/web/eslint-plugins/index.js
index 832c7d4..5b023b7 100644
--- a/web/eslint-plugins/index.js
+++ b/web/eslint-plugins/index.js
@@ -3,7 +3,7 @@
  *
  * Goal: a single source of truth for design. In Svelte components, hardcoded
  * colors and sizes are banned; everything must come from CSS variables (tokens
- * in preview.css). Rules inspect the postcss AST of Svelte <style> blocks
+ * in app.css). Rules inspect the postcss AST of Svelte <style> blocks
  * exposed by svelte-eslint-parser.
  */
 import noCategoryMismatch from "./design-tokens/no-category-mismatch.js";
diff --git a/web/postcss.config.js b/web/postcss.config.js
index 7595293..644f5cd 100644
--- a/web/postcss.config.js
+++ b/web/postcss.config.js
@@ -4,10 +4,10 @@ import postcssCustomMedia from "postcss-custom-media";
 
 export default {
 	plugins: [
-		// Breakpoints live only in preview.css (next to the --bp-* tokens);
+		// Breakpoints live only in app.css (next to the --bp-* tokens);
 		// global-data injects them so @media (--bp-*) expands in every file.
 		postcssGlobalData({
-			files: ["src/preview.css"],
+			files: ["src/app.css"],
 		}),
 		postcssCustomMedia({
 			preserve: false,
diff --git a/web/scripts/check-tokens.mjs b/web/scripts/check-tokens.mjs
index a580a39..14e465d 100644
--- a/web/scripts/check-tokens.mjs
+++ b/web/scripts/check-tokens.mjs
@@ -1,5 +1,5 @@
 // Design-token audit, one command: theme parity, hct-only color authorship and
-// unused-token warnings over src/preview.css.
+// unused-token warnings over src/app.css.
 //
 // Usage: pnpm --dir web exec node scripts/check-tokens.mjs
 // Exit code 1 when a failing check (parity or color authorship) reports.
@@ -36,10 +36,10 @@ async function main() {
 
 	const unused = checkUnused(root);
 	if (unused.length > 0) {
-		console.log("\nUnused tokens (defined in preview.css, never used):");
+		console.log("\nUnused tokens (defined in app.css, never used):");
 		for (const token of unused) console.log(`  ${token}`);
 	} else {
-		console.log("All preview.css tokens are used somewhere.");
+		console.log("All app.css tokens are used somewhere.");
 	}
 
 	if (failed) process.exitCode = 1;
diff --git a/web/scripts/token-audit/colors.mjs b/web/scripts/token-audit/colors.mjs
index e00f189..15144d7 100644
--- a/web/scripts/token-audit/colors.mjs
+++ b/web/scripts/token-audit/colors.mjs
@@ -1,4 +1,4 @@
-// Color authorship: every color value in preview.css must be authored as hct()
+// Color authorship: every color value in app.css must be authored as hct()
 // — literals AND derived forms (hct(from var(...) h c t) with channel math) —
 // so the whole palette is computed through HCT channels and output as sRGB by
 // the postcss-hct plugin. Exceptions: the seed tokens --brand-main/--brand-alt
diff --git a/web/scripts/token-audit/helpers.mjs b/web/scripts/token-audit/helpers.mjs
index 84031d9..2044f2d 100644
--- a/web/scripts/token-audit/helpers.mjs
+++ b/web/scripts/token-audit/helpers.mjs
@@ -1,4 +1,4 @@
-// Shared plumbing for the design-token audits: reading preview.css, scanning
+// Shared plumbing for the design-token audits: reading app.css, scanning
 // for var() usages across src, and the color/form predicates the checks use.
 
 import { readdirSync, readFileSync, statSync } from "node:fs";
@@ -7,7 +7,7 @@ import { join } from "node:path";
 import { fileURLToPath } from "node:url";
 import postcss from "postcss";
 
-export const FILE = new URL("../../src/preview.css", import.meta.url);
+export const FILE = new URL("../../src/app.css", import.meta.url);
 const SRC_DIR = fileURLToPath(new URL("../../src/", import.meta.url));
 
 // A var(--x) REFERENCE anywhere in the app (primary argument only).
@@ -65,7 +65,7 @@ export function collectTokens(root, selector) {
 	return map;
 }
 
-// Parse preview.css once and hand out the postcss root plus both theme maps.
+// Parse app.css once and hand out the postcss root plus both theme maps.
 export async function parsePreview() {
 	const css = await readFile(FILE, "utf8");
 	const root = postcss.parse(css);
diff --git a/web/scripts/token-audit/unused.mjs b/web/scripts/token-audit/unused.mjs
index 3632f15..35b46a6 100644
--- a/web/scripts/token-audit/unused.mjs
+++ b/web/scripts/token-audit/unused.mjs
@@ -1,4 +1,4 @@
-// Unused tokens: defined in preview.css but never referenced via var()
+// Unused tokens: defined in app.css but never referenced via var()
 // anywhere in src. A dead token is not the single source of truth — it's dust.
 // Reported as a warning; it does not fail the run.
 
diff --git a/web/src/preview.css b/web/src/app.css
similarity index 100%
rename from web/src/preview.css
rename to web/src/app.css
diff --git a/web/src/old.css b/web/src/app_v1.css
similarity index 100%
rename from web/src/old.css
rename to web/src/app_v1.css
diff --git a/web/src/lib/palette.test.ts b/web/src/lib/palette.test.ts
index 1b1abd5..af3af78 100644
--- a/web/src/lib/palette.test.ts
+++ b/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 };
 
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index da1132f..6aaedd0 100644
--- a/web/src/routes/+layout.svelte
+++ b/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>
diff --git a/web/src/routes/preview/+layout.svelte b/web/src/routes/preview/+layout.svelte
index 0ac3488..880bfdd 100644
--- a/web/src/routes/preview/+layout.svelte
+++ b/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;
diff --git a/web/src/routes/v1/+layout.svelte b/web/src/routes/v1/+layout.svelte
index b4517cc..c7e7543 100644
--- a/web/src/routes/v1/+layout.svelte
+++ b/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();
 
diff --git a/web/stylelint.config.js b/web/stylelint.config.js
index 4ffd6b1..80c75a7 100644
--- a/web/stylelint.config.js
+++ b/web/stylelint.config.js
@@ -1,12 +1,12 @@
 // Stylelint config — design-token enforcement for easy-png-tools.
 // FWHM: keeps the design system a single source of truth. Colors and sizes must
 // come from prefixed tokens; direct color values are allowed only for the two
-// brand tokens. old.css is the legacy design and is ignored (removed later).
+// brand tokens. app_v1.css is the legacy design and is ignored (removed later).
 
 export default {
 	extends: ["stylelint-config-standard"],
 	ignoreFiles: [
-		"src/old.css",
+		"src/app_v1.css",
 		"**/node_modules/**",
 		"**/build/**",
 		"**/.svelte-kit/**",
@@ -52,7 +52,7 @@ export default {
 	},
 	overrides: [
 		{
-			// Applies to every CSS file EXCEPT old.css (already in ignoreFiles) —
+			// Applies to every CSS file EXCEPT app_v1.css (already in ignoreFiles) —
 			// the legacy design is exempt and will be removed later.
 			files: ["src/**/*.css"],
 			rules: {