fix: update style, resolve old css leaks issue

web/src/app.css

@@ -1,4 +1,5 @@
-:root {
+@layer app {
+	:root {
 		color-scheme: light;
 
 		--bg: #f6f7f9;
@@ -42,9 +43,9 @@
 			system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
 			sans-serif;
 		--font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
-}
+	}
 
-[data-theme="dark"] {
+	[data-theme="dark"] {
 		color-scheme: dark;
 
 		--bg: #12151a;
@@ -60,112 +61,112 @@
 		--check-b: #171b21;
 
 		--shadow-card: 0 4px 14px rgb(0 0 0 / 45%);
-}
+	}
 
-*,
+	*,
-*::before,
+	*::before,
-*::after {
+	*::after {
 		box-sizing: border-box;
-}
+	}
 
-* {
+	* {
 		margin: 0;
-}
+	}
 
-html {
+	html {
 		font-family: var(--font-sans);
 		color: var(--text);
 		background: var(--bg);
 		line-height: 1.55;
 		-webkit-text-size-adjust: 100%;
-}
+	}
 
-body {
+	body {
 		min-height: 100dvh;
-}
+	}
 
-h1 {
+	h1 {
 		font-size: var(--text-xxl);
 		line-height: var(--leading-tight);
 		letter-spacing: -0.01em;
-}
+	}
 
-h2 {
+	h2 {
 		font-size: var(--text-xl);
 		line-height: var(--leading-tight);
-}
+	}
 
-p,
+	p,
-label {
+	label {
 		font-size: var(--text-m);
-}
+	}
 
-a {
+	a {
 		color: var(--link);
 		text-decoration: none;
-}
+	}
 
-a:hover {
+	a:hover {
 		text-decoration: underline;
-}
+	}
 
-button,
+	button,
-input,
+	input,
-select {
+	select {
 		font: inherit;
 		color: inherit;
-}
+	}
 
-:focus-visible {
+	:focus-visible {
 		outline: 2px solid var(--accent);
 		outline-offset: 2px;
 		border-radius: var(--radius-s);
-}
+	}
 
-.text-muted {
+	.text-muted {
 		color: var(--text-muted);
-}
+	}
 
-.text-caption {
+	.text-caption {
 		font-size: var(--text-s);
-}
+	}
 
-.heading-section {
+	.heading-section {
 		font-size: var(--text-l);
 		color: var(--text-muted);
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
-}
+	}
 
-.panel {
+	.panel {
 		background: var(--surface);
 		border: 1px solid var(--border);
 		border-radius: var(--radius-m);
-}
+	}
 
-.control {
+	.control {
 		padding: var(--space-1) var(--space-2);
 		border: 1px solid var(--border);
 		border-radius: var(--radius-s);
 		background: var(--surface);
 		max-width: var(--control-max-width);
-}
+	}
 
-input.control[type="number"] {
+	input.control[type="number"] {
 		font-family: var(--font-mono);
 		width: 100%;
-}
+	}
 
-.error-banner {
+	.error-banner {
 		padding: var(--space-2) var(--space-3);
 		border: 1px solid var(--danger);
 		border-radius: var(--radius-s);
 		background: color-mix(in srgb, var(--danger) 8%, var(--surface));
 		color: var(--danger-strong);
 		font-size: var(--text-s);
-}
+	}
 
-.visually-hidden {
+	.visually-hidden {
 		position: absolute;
 		width: 1px;
 		height: 1px;
@@ -175,34 +176,34 @@ input.control[type="number"] {
 		clip: rect(0 0 0 0);
 		white-space: nowrap;
 		border: 0;
-}
+	}
 
-.tool-stage {
+	.tool-stage {
 		display: grid;
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 		gap: var(--space-4);
 		padding: var(--space-4);
 		align-items: start;
 		width: 100%;
-}
+	}
 
-.tool-stage.single {
+	.tool-stage.single {
 		grid-template-columns: 1fr;
-}
+	}
 
-.tool-stage .cell {
+	.tool-stage .cell {
 		min-width: 0;
 		display: flex;
 		flex-direction: column;
 		gap: var(--space-2);
-}
+	}
 
-.tool-stage .cell + .cell {
+	.tool-stage .cell + .cell {
 		border-left: 1px solid var(--border);
 		padding-left: var(--space-4);
-}
+	}
 
-.cell-media {
+	.cell-media {
 		flex: 1;
 		display: flex;
 		flex-direction: column;
@@ -211,16 +212,16 @@ input.control[type="number"] {
 		min-height: 14rem;
 		position: relative;
 		width: 100%;
-}
+	}
 
-.chain-stack {
+	.chain-stack {
 		display: flex;
 		flex-direction: column;
 		gap: var(--space-3);
 		margin-top: var(--space-4);
-}
+	}
 
-.edge-legend {
+	.edge-legend {
 		position: absolute;
 		top: -0.65em;
 		padding: 0 var(--space-2);
@@ -232,42 +233,42 @@ input.control[type="number"] {
 		line-height: 1.3;
 		white-space: nowrap;
 		z-index: 1;
-}
+	}
 
-.params-sep {
+	.params-sep {
 		position: relative;
 		border-top: 1px solid var(--border);
 		margin: 0 var(--space-4);
 		padding-bottom: var(--space-3);
-}
+	}
 
-/* Панель этапа для инлайн-раскладки: исходник | параметры | результат */
+	/* Панель этапа для инлайн-раскладки: исходник | параметры | результат */
-.pane {
+	.pane {
 		position: relative;
 		display: flex;
 		flex-direction: column;
 		min-width: 0;
-}
+	}
 
-.pane-legend {
+	.pane-legend {
 		top: -0.65em;
 		left: 50%;
 		transform: translateX(-50%);
-}
+	}
 
-.actions-row {
+	.actions-row {
 		display: flex;
 		gap: var(--space-1);
 		align-items: stretch;
 		width: 100%;
-}
+	}
 
-.actions-row > button {
+	.actions-row > button {
 		flex: 1;
 		min-width: 0;
-}
+	}
 
-@media (max-width: 48rem) {
+	@media (max-width: 48rem) {
 		.tool-stage {
 			grid-template-columns: 1fr;
 		}
@@ -278,4 +279,5 @@ input.control[type="number"] {
 			border-top: 1px solid var(--border);
 			padding-top: var(--space-4);
 		}
+	}
 }

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

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import { resolve } from "$app/paths";
 	import { ArrowUpRight } from "@lucide/svelte";
 	import type { Component } from "svelte";
 	import Icon from "./Icon.svelte";
-	import { resolve } from "$app/paths";
 
 	interface Props {
 		title: string;
@@ -12,9 +12,11 @@
 		icon?: Component<{ size?: number; class?: string }>;
 	}
 	let { title, href, description, index, icon }: Props = $props();
+
+	let normalizedHref = $derived(href === "#" ? "/" : href);
 </script>
 
-<a class="tool-card" href={resolve(href)}>
+<a class="tool-card" href={resolve(normalizedHref)}>
 	{#if icon}<span class="tool-icon"><Icon {icon} size={19} /></span>{/if}
 	<span class="tool-copy">
 		<strong>{title}</strong>

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

@@ -77,6 +77,7 @@
 		gap: 10px;
 		font: 600 14px var(--font-mono);
 		color: var(--foreground);
+		text-decoration: none;
 	}
 	.brand-mark {
 		background: var(--blue);
@@ -101,7 +102,7 @@
 	}
 	.nav a {
 		color: var(--muted);
-		font: 12px var(--font-mono);
+		font: 10px var(--font-mono);
 		text-decoration: none;
 	}
 	.nav a:hover {

web/src/lib/styles/design2.css

@@ -5,47 +5,74 @@
 @import "@fontsource/ibm-plex-mono/400.css";
 @import "@fontsource/ibm-plex-mono/500.css";
 
-/* Минимальный reset (новый дизайн грузится только на preview-маршрутах). */
+/* Порядок cascade-слоёв (дубль из корневого +layout.svelte — идемпотентен и
-*,
+   страхует случай, когда design2.css грузится раньше корневого layout): */
-*::before,
+@layer app, design;
-*::after {
+
+/* Новый дизайн — слой design. В слое design правила выигрывают у того же
+   правила из слоя app (старый app.css) по слою, а не по порядку <link>,
+   поэтому утечка app.css на /preview при SPA-переходе не перебивает design2. */
+@layer design {
+	/* Минимальный reset (новый дизайн грузится только на preview-маршрутах). */
+	*,
+	*::before,
+	*::after {
 		box-sizing: border-box;
-}
+	}
-html,
+	html,
-body {
+	body {
 		margin: 0;
 		padding: 0;
-}
+	}
 
-/* Базовая типографика и палитра: без этого весь текст наследует UA-дефолт
+	/* Базовая типографика и палитра: без этого весь текст наследует UA-дефолт
 	   (Times New Roman / чёрный), что даёт сотни расхождений с рефом. */
-html {
+	html {
 		color-scheme: light dark;
 		font-family: var(--font-sans);
 		-webkit-text-size-adjust: 100%;
-}
+	}
-body {
+	body {
 		font-family: var(--font-sans);
 		color: var(--foreground);
 		background: var(--background);
 		-webkit-font-smoothing: antialiased;
 		text-rendering: optimizeLegibility;
-}
+	}
 
-/* Форм-контролы не наследуют шрифт семьи по умолчанию (браузер ставит Arial). */
+	/* Форм-контролы не наследуют шрифт семьи по умолчанию (браузер ставит Arial). */
-button,
+	button,
-input,
+	input,
-select,
+	select,
-textarea,
+	textarea,
-optgroup {
+	optgroup {
 		font: inherit;
-}
+	}
 
-/* Новый дизайн: токены (§2 плана redesign).
+	/* Перебивки глобальных правил старого app.css (слой app ниже), чтобы при
+	   утечке app.css на /preview новый дизайн не получал старую типографику.
+	   Пустые — заполни при необходимости. */
+	a,
+	a:hover {
+		/* color: inherit; text-decoration: none; */
+	}
+	h1,
+	h2 {
+		/* font-size: revert; line-height: revert; letter-spacing: revert; */
+	}
+	p,
+	label {
+		/* font-size: revert; */
+	}
+	:focus-visible {
+		/* outline: revert; */
+	}
+
+	/* Новый дизайн: токены (§2 плана redesign).
 	   Файл грузится только layout'ом новой ветки (preview/+layout), поэтому
 	   глобально не конфликтует со старым app.css. */
 
-:root {
+	:root {
 		--font-sans: "IBM Plex Sans", sans-serif;
 		--font-mono: "IBM Plex Mono", monospace;
 
@@ -63,9 +90,9 @@ optgroup {
 		--danger: #e5484d;
 
 		--radius: 4px;
-}
+	}
 
-[data-theme="dark"] {
+	[data-theme="dark"] {
 		--background: #11171d;
 		--panel: #182129;
 		--foreground: #e8eef2;
@@ -77,4 +104,5 @@ optgroup {
 		--amber: #bd7411;
 		--success: #25a96a;
 		--danger: #ff7479;
+	}
 }

web/src/routes/+layout.svelte

@@ -17,3 +17,12 @@
 </svelte:head>
 
 {@render children()}
+
+<style>
+	/* Порядок cascade-слоёв для всего документа (грузится на всех маршрутах):
+	   app = старый дизайн ((old)), design = новый (preview/*). design выигрывает
+	   у app на совпадающих правилах независимо от порядка <link> / истории
+	   SPA-навигации. Содержимое слоёв — в app.css (@layer app) и design2.css
+	   (@layer design). */
+	@layer app, design;
+</style>

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

@@ -1,29 +1,29 @@
 <script lang="ts">
+	import Badge from "$lib/components/kit/Badge.svelte";
+	import Button from "$lib/components/kit/Button.svelte";
+	import CheckboxField from "$lib/components/kit/CheckboxField.svelte";
+	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
+	import CodeBlock from "$lib/components/kit/CodeBlock.svelte";
+	import ColorField from "$lib/components/kit/ColorField.svelte";
+	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
+	import EmptyState from "$lib/components/kit/EmptyState.svelte";
+	import IconButton from "$lib/components/kit/IconButton.svelte";
+	import ImageCard from "$lib/components/kit/ImageCard.svelte";
+	import MetaList from "$lib/components/kit/MetaList.svelte";
 	import Panel from "$lib/components/kit/Panel.svelte";
 	import PanelHeading from "$lib/components/kit/PanelHeading.svelte";
+	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
+	import Segmented from "$lib/components/kit/Segmented.svelte";
+	import SelectField from "$lib/components/kit/SelectField.svelte";
 	import SettingGroup from "$lib/components/kit/SettingGroup.svelte";
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
-	import MetaList from "$lib/components/kit/MetaList.svelte";
-	import Badge from "$lib/components/kit/Badge.svelte";
-	import Segmented from "$lib/components/kit/Segmented.svelte";
-	import StepCard from "$lib/components/kit/StepCard.svelte";
-	import ToolCard from "$lib/components/kit/ToolCard.svelte";
-	import ImageCard from "$lib/components/kit/ImageCard.svelte";
-	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
-	import CheckerCanvas from "$lib/components/kit/CheckerCanvas.svelte";
-	import StatusLine from "$lib/components/kit/StatusLine.svelte";
-	import Button from "$lib/components/kit/Button.svelte";
-	import IconButton from "$lib/components/kit/IconButton.svelte";
 	import SliderField from "$lib/components/kit/SliderField.svelte";
-	import ColorField from "$lib/components/kit/ColorField.svelte";
+	import StatusLine from "$lib/components/kit/StatusLine.svelte";
+	import StepCard from "$lib/components/kit/StepCard.svelte";
 	import TextField from "$lib/components/kit/TextField.svelte";
-	import SelectField from "$lib/components/kit/SelectField.svelte";
-	import CheckboxField from "$lib/components/kit/CheckboxField.svelte";
 	import Toggle from "$lib/components/kit/Toggle.svelte";
-	import EmptyState from "$lib/components/kit/EmptyState.svelte";
+	import ToolCard from "$lib/components/kit/ToolCard.svelte";
-	import CodeBlock from "$lib/components/kit/CodeBlock.svelte";
+	import { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte";
-	import DownloadButton from "$lib/components/kit/DownloadButton.svelte";
-	import { Plus, Trash2, Download, ImageOff, Palette } from "@lucide/svelte";
 
 	let mode = $state("preview");
 	let radius = $state(8);
@@ -85,7 +85,7 @@
 			</SettingGroup>
 		</div>
 		<SettingsFooter>
-			<DownloadButton label="Download PNG" size="1.2 MB" onclick={() => {}} />
+			<DownloadButton label="Download PNG" onclick={() => {}} />
 		</SettingsFooter>
 	</Panel>
 
@@ -174,10 +174,10 @@
 			<ImageCard label="result.png · 512×512">
 				<CheckerCanvas size="sm" />
 			</ImageCard>
-			<PreviewTile label="tile-01">
+			<PreviewTile label="tile-01" caption="caption-01">
 				<CheckerCanvas size="sm" />
 			</PreviewTile>
-			<PreviewTile label="tile-02">
+			<PreviewTile label="tile-02" caption="caption-01">
 				<CheckerCanvas size="sm" />
 			</PreviewTile>
 		</div>