Checkpoint SHD dashboard design system

src/lib/components/AppShell.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import type { Snippet } from 'svelte';
+
+	let { user, children }: {
+		user: { username: string; role: string } | null;
+		children: Snippet;
+	} = $props();
+
+	const links = [
+		{ href: '/builds', label: 'Discover' },
+		{ href: '/builder', label: 'Builder' },
+		{ href: '/guides', label: 'Guides' }
+	];
+</script>
+
+<header class="site-header">
+	<a class="brand" href="/" aria-label="SHD.build home">
+		<span class="brand-mark">SHD</span><span>SHD<b>.build</b></span>
+	</a>
+	<nav aria-label="Main navigation">
+		{#each links as link}
+			<a class:active={page.url.pathname.startsWith(link.href)} href={link.href}>{link.label}</a>
+		{/each}
+		{#if user}
+			<a class:active={page.url.pathname.startsWith('/account')} href="/account">My Profile</a>
+		{/if}
+		{#if user?.role === 'admin'}
+			<a class:active={page.url.pathname.startsWith('/admin')} href="/admin/stats">Admin</a>
+		{/if}
+	</nav>
+	{#if user}
+		<div class="account">
+			<a href="/account"><small>AGENT</small>{user.username}</a>
+			<form method="POST" action="/sign-in?/logout"><button>SIGN OUT →</button></form>
+		</div>
+	{:else}
+		<a class="sign-in" href="/sign-in">SIGN IN →</a>
+	{/if}
+</header>
+
+{@render children()}