feat: add new design primitives

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import BlueprintGrid from './BlueprintGrid.svelte';
+
+	let { children } = $props();
+</script>
+
+<div class="app-shell">
+	<BlueprintGrid />
+	<div class="app-content">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.app-shell {
+		position: relative;
+		min-height: 100dvh;
+		background: var(--background);
+		color: var(--foreground);
+		font-family: var(--font-sans);
+	}
+
+	.app-content {
+		position: relative;
+		z-index: 1;
+	}
+</style>

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

@@ -0,0 +1,14 @@
+<div class="blueprint-grid" aria-hidden="true"></div>
+
+<style>
+	.blueprint-grid {
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+		background-image:
+			linear-gradient(to right, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px),
+			linear-gradient(to bottom, color-mix(in srgb, var(--line) 45%, transparent) 1px, transparent 1px);
+		background-size: 32px 32px;
+		opacity: 0.55;
+	}
+</style>

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		size?: 'sm' | 'large';
+	}
+	let { children, size = 'large' }: Props = $props();
+</script>
+
+<div class="checker-canvas checker-canvas--{size}">
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style>
+  .checker-canvas {
+    position: relative;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    background-color: #0b0f14;
+    background-image: linear-gradient(45deg, #1a2129 25%, transparent 25%),
+      linear-gradient(-45deg, #1a2129 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1a2129 75%),
+      linear-gradient(-45deg, transparent 75%, #1a2129 75%);
+    background-size: 20px 20px;
+    background-position:
+      0 0,
+      0 10px,
+      10px -10px,
+      -10px 0;
+  }
+
+  .checker-canvas--sm {
+    min-height: 180px;
+  }
+
+  .checker-canvas--large {
+    min-height: 360px;
+  }
+</style>

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	interface Props {
+		accent?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let { accent = false, children }: Props = $props();
+</script>
+
+<span class="mono-label" class:accent={accent}>
+	{#if children}
+		{@render children()}
+	{/if}
+</span>
+
+<style>
+	.mono-label {
+		font-family: var(--font-mono);
+		font-size: 10px;
+		line-height: 1.2;
+		font-weight: 500;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		color: var(--muted);
+	}
+
+	.accent {
+		color: var(--blue);
+	}
+</style>

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

@@ -0,0 +1,12 @@
+<span class="status-dot" aria-hidden="true"></span>
+
+<style>
+	.status-dot {
+		display: inline-block;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background: var(--success);
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent);
+	}
+</style>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import StatusDot from './StatusDot.svelte';
+	import MonoLabel from './MonoLabel.svelte';
+
+	interface Props {
+		label: string;
+	}
+
+	let { label }: Props = $props();
+</script>
+
+<span class="status-line">
+	<StatusDot />
+	<MonoLabel>{label}</MonoLabel>
+</span>
+
+<style>
+	.status-line {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+	}
+</style>