chore: add prettier, eslint, fix some components

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import BlueprintGrid from './BlueprintGrid.svelte';
+	import BlueprintGrid from "./BlueprintGrid.svelte";
 
 	let { children } = $props();
 </script>

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

@@ -6,8 +6,16 @@
 		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);
+			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;
 	}

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

@@ -1,40 +1,44 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
+
 	interface Props {
-		children?: import('svelte').Snippet;
-		size?: 'sm' | 'large';
+		children?: Snippet;
+		size?: "sm" | "large";
 	}
-	let { children, size = 'large' }: Props = $props();
+	let { children, size = "large" }: Props = $props();
 </script>
 
 <div class="checker-canvas checker-canvas--{size}">
-  {#if children}
-    {@render children()}
-  {/if}
+	{#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 {
+		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--sm {
+		min-height: 180px;
+	}
 
-  .checker-canvas--large {
-    min-height: 360px;
-  }
+	.checker-canvas--large {
+		min-height: 360px;
+	}
 </style>

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

@@ -1,13 +1,15 @@
 <script lang="ts">
+	import type { Snippet } from "svelte";
+
 	interface Props {
 		accent?: boolean;
-		children?: import('svelte').Snippet;
+		children?: Snippet;
 	}
 
 	let { accent = false, children }: Props = $props();
 </script>
 
-<span class="mono-label" class:accent={accent}>
+<span class="mono-label" class:accent>
 	{#if children}
 		{@render children()}
 	{/if}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import StatusDot from './StatusDot.svelte';
-	import MonoLabel from './MonoLabel.svelte';
+	import StatusDot from "./StatusDot.svelte";
+	import MonoLabel from "./MonoLabel.svelte";
 
 	interface Props {
 		label: string;