feat: refresh site for the multi-repository WrightKit ecosystem

src/lib/components/CompatibilitySection.svelte

@@ -11,29 +11,59 @@
 			</p>
 		</div>
 
-		<!-- Frontends -->
+		<!-- Source forms -->
 		<div class="mt-10 grid gap-6 md:grid-cols-3">
-			{#each compatibility.frontends as frontend (frontend.name)}
+			{#each compatibility.surfaces as surface (surface.name)}
 				<div class="border border-ink-800 bg-ink-900/30 p-5">
 					<div class="flex items-center justify-between gap-2">
-						<h3 class="font-sans text-base font-semibold text-ink-50">{frontend.name}</h3>
+						<h3 class="font-sans text-base font-semibold text-ink-50">{surface.name}</h3>
 						<span
-							class="rounded-xs px-2 py-0.5 text-xs font-medium {frontend.status ===
+							class="rounded-xs px-2 py-0.5 text-xs font-medium {surface.status ===
 							'Supported'
 								? 'bg-accent-500/10 text-accent-400 border border-accent-500/30'
 								: 'bg-ink-800 text-ink-400'}"
 						>
-							{frontend.status}
+							{surface.status}
 						</span>
 					</div>
-					<p class="mt-1 text-xs text-ink-400">{frontend.role}</p>
+					<p class="mt-1 text-xs text-ink-400">{surface.role}</p>
 					<p class="mt-3 text-[0.875rem] leading-relaxed text-ink-300">
-						{frontend.details}
+						{surface.details}
+					</p>
+					<p class="mt-3 border-t border-ink-800/80 pt-2.5 text-xs text-ink-500">
+						Owned by: {surface.owner}
 					</p>
 				</div>
 			{/each}
 		</div>
 
+		<!-- Conversion directions -->
+		<div class="mt-10 max-w-3xl border border-ink-800">
+			<div class="border-b border-ink-800 bg-ink-900/60 px-5 py-3">
+				<h3 class="font-sans text-sm font-semibold text-ink-50">
+					Conversion directions
+				</h3>
+			</div>
+			<ul class="divide-y divide-ink-800">
+				{#each compatibility.conversionDirections as dir (dir.from + dir.to)}
+					<li class="flex items-center justify-between gap-4 px-5 py-3">
+						<div class="flex items-baseline gap-2 font-mono text-[0.8125rem] text-ink-200">
+							<span>{dir.from}</span>
+							<span class="text-ink-600">→</span>
+							<span>{dir.to}</span>
+						</div>
+						<span
+							class="text-xs font-medium {dir.status === 'Supported'
+								? 'text-accent-400'
+								: 'text-ink-400'}"
+						>
+							{dir.status}
+						</span>
+					</li>
+				{/each}
+			</ul>
+		</div>
+
 		<!-- S/D/N/E Verification Model -->
 		<div class="mt-12 border border-ink-800 bg-ink-900/50 p-6 sm:p-8">
 			<div class="max-w-xl">

src/lib/components/CopyButton.svelte

@@ -47,7 +47,7 @@
 
 <button
 	type="button"
-	class="inline-flex items-center justify-center gap-1.5 rounded-sm font-sans text-xs font-medium tracking-tight transition-all duration-150 active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-500 {variant ===
+	class="inline-flex items-center justify-center gap-1.5 rounded-sm font-sans text-xs font-medium tracking-tight transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-500 {variant ===
 	'primary'
 		? 'bg-accent-500 px-3 py-1.5 text-ink-950 hover:bg-accent-400'
 		: variant === 'inline'

src/lib/components/EcosystemSection.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { ecosystem } from '$lib/site';
+</script>
+
+<section id="ecosystem" class="scroll-mt-16 border-t border-ink-800">
+	<div class="container-site py-16 sm:py-20 lg:py-24">
+		<div class="max-w-2xl">
+			<h2 class="font-sans font-semibold text-title text-ink-50">{ecosystem.title}</h2>
+			<p class="mt-3 text-[1.0625rem] leading-relaxed text-ink-300">
+				{ecosystem.lead}
+			</p>
+		</div>
+
+		<div class="mt-10 max-w-3xl border-y border-ink-800">
+			<ul class="divide-y divide-ink-800">
+				{#each ecosystem.items as item (item.repo)}
+					<li class="py-5">
+						<div class="flex items-baseline justify-between gap-4">
+							<div class="flex flex-wrap items-baseline gap-x-2.5 gap-y-1">
+								<a
+									class="text-[0.9375rem] font-medium text-ink-100 underline decoration-ink-600 underline-offset-4 transition-colors duration-150 hover:text-ink-50 hover:decoration-ink-300"
+									href={item.href}
+									target="_blank"
+									rel="noreferrer"
+								>
+									{item.repo}
+								</a>
+								<span class="text-xs text-ink-500">{item.role}</span>
+							</div>
+							<span class="shrink-0 text-xs font-medium text-ink-400">{item.status}</span>
+						</div>
+						<p class="mt-1.5 max-w-xl text-[0.875rem] leading-relaxed text-ink-300">
+							{item.desc}
+						</p>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</div>
+</section>

src/lib/components/Mark.svelte

@@ -9,7 +9,7 @@
 	viewBox="0 0 32 32"
 	fill="none"
 	role="img"
-	aria-label="Wright Kit mark"
+	aria-label="WrightKit mark"
 >
 	<rect x="2.5" y="2.5" width="27" height="27" stroke="currentColor" stroke-width="2.5" />
 	<rect x="11" y="11" width="10" height="10" fill="var(--color-accent-500)" />

src/lib/components/OpenSourceSection.svelte

@@ -7,7 +7,7 @@
 	<div class="mt-8 flex flex-col gap-6">
 		<div class="flex flex-wrap items-center gap-3">
 			<a class="btn btn-primary" href={site.github} target="_blank" rel="noreferrer">
-				View wright on GitHub
+				View Wright on GitHub
 			</a>
 			<a class="btn btn-ghost" href={site.releases} target="_blank" rel="noreferrer">
 				Releases

src/lib/components/Wordmark.svelte

@@ -4,9 +4,9 @@
 	let { compact = false }: { compact?: boolean } = $props();
 </script>
 
-<a href="/" class="inline-flex min-h-11 items-center gap-2" aria-label="Wright Kit — home">
+<a href="/" class="inline-flex min-h-11 items-center gap-2" aria-label="WrightKit — home">
 	<Mark size={compact ? 20 : 22} />
 	<span class="font-semibold tracking-tight text-ink-50 {compact ? 'text-[0.9375rem]' : 'text-base'}">
-		Wright Kit
+		WrightKit
 	</span>
 </a>