Checkpoint SHD dashboard design system

src/routes/admin/+layout.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	let { children } = $props();
+	const sections = [
+		{ href: '/admin/stats', label: 'Stats & attributes', code: 'ATTR' },
+		{ href: '/admin/talents', label: 'Talents & triggers', code: 'TLNT' },
+		{ href: '/admin/equipment', label: 'Equipment types', code: 'EQPT', pending: true },
+		{ href: '/admin/weapons', label: 'Weapons', code: 'WPN', pending: true }
+	];
+</script>
+
+<main class="admin-page">
+	<header class="admin-command">
+		<div class="command-title"><p class="eyebrow"><span></span> SHD DATA OPERATIONS</p><h1>ADMIN CONSOLE</h1><p>Embedded game-data control surface</p></div>
+		<div class="command-status"><div><i></i><span>DATABASE</span><strong>ONLINE</strong></div><div><span>ACCESS</span><strong>ADMIN</strong></div><div><span>ENVIRONMENT</span><strong>LOCAL</strong></div></div>
+	</header>
+	<div class="admin-dashboard">
+		<aside class="admin-sidebar">
+			<div class="sidebar-label"><span>DATA MANAGEMENT</span><b>04 MODULES</b></div>
+			<nav aria-label="Admin sections">
+				{#each sections as section}
+					<a class:active={page.url.pathname === section.href} class:pending={section.pending} href={section.href}>
+						<small>{section.code}</small><span>{section.label}</span>{#if section.pending}<em>SOON</em>{:else}<b>›</b>{/if}
+					</a>
+				{/each}
+			</nav>
+			<div class="sidebar-foot"><span>SHD NODE</span><strong>NYC-01</strong><small>Schema synchronized</small></div>
+		</aside>
+		<section class="admin-content">{@render children()}</section>
+	</div>
+</main>