feat: initial sveltekit

web/src/routes/+layout.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import '../app.css';
+	import favicon from '$lib/assets/favicon.svg';
+	import { CATEGORIES } from '$lib/categories';
+
+	let { children } = $props();
+</script>
+
+<svelte:head>
+	<link rel="icon" href={favicon} />
+</svelte:head>
+
+<div class="app">
+	<header>
+		<a href="/" class="brand">easy-png-tools</a>
+		<nav aria-label="Категории инструментов">
+			{#each CATEGORIES as category (category.id)}
+				<a class="nav-link" href="/#{category.id}">{category.label}</a>
+			{/each}
+		</nav>
+	</header>
+
+	<main>
+		{@render children()}
+	</main>
+
+	<footer>
+		<p>Все операции выполняются локально в вашем браузере — файлы никуда не отправляются.</p>
+	</footer>
+</div>
+
+<style>
+	.app {
+		min-height: 100dvh;
+		display: flex;
+		flex-direction: column;
+	}
+
+	header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-3);
+		flex-wrap: wrap;
+		padding: var(--space-3) var(--space-4);
+		background: var(--surface);
+		border-bottom: 1px solid var(--border);
+	}
+
+	.brand {
+		font-weight: 700;
+		font-size: 1.1rem;
+		color: var(--text);
+	}
+
+	.brand:hover {
+		text-decoration: none;
+		color: var(--accent);
+	}
+
+	nav {
+		display: flex;
+		gap: var(--space-3);
+		flex-wrap: wrap;
+	}
+
+	.nav-link {
+		color: var(--text-muted);
+		font-size: 0.9rem;
+		padding: var(--space-1) var(--space-2);
+		border-radius: var(--radius-s);
+	}
+
+	.nav-link:hover {
+		color: var(--accent);
+		background: var(--bg);
+		text-decoration: none;
+	}
+
+	main {
+		flex: 1;
+		width: 100%;
+		max-width: 64rem;
+		margin: 0 auto;
+		padding: var(--space-5) var(--space-4);
+	}
+
+	footer {
+		padding: var(--space-3) var(--space-4);
+		border-top: 1px solid var(--border);
+		color: var(--text-muted);
+		font-size: 0.85rem;
+		text-align: center;
+	}
+</style>

web/src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

web/src/routes/+page.svelte

@@ -0,0 +1,3 @@
+<h1>easy-png-tools</h1>
+<p>Набор PNG-утилит, которые работают полностью в вашем браузере.</p>
+<p>Инструменты появятся здесь по мере добавления — см. <code>docs/mvp-plan.md</code>.</p>